View RSS Feed

My Java Tips

Simple JSF Application

Rate this Entry
by , 11-12-2011 at 05:15 PM (1476 Views)
Java Server Faces (JSF) defines three layers of architecture: component architecture, a standard UI widget, and application infrastructure. Where architecture allows standard JSF UI widgets and provide platform for third party components. JSF strictly follow MVC2 pattern, with a more stress on view side. It uses standard jsp with customized tags.


Here we will develop a simple web application to demonstrate JSF.

Consider the following jsp file called welcome.jsp
XML Code:
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<f:view>

       <title>&lt;br /&gt;                Hello JSF&lt;br /&gt;       </title>

        <h:form id="”formWelcome”">
         <h:outputtext id="”outputWelcome”&lt;br">           value = ”Welcome to JSF World”
           style = ”color: blue”/&gt;

	<h:message id="”errors”" for="“inputNumber”">

	<h:outputlabel for="”inputNumber”">
	<h:outputtext id="”inputNumberLabel”" value="”Enter">
	</h:outputtext></h:outputlabel>
	<h:inputtext id="”inputNumber”" value="”#{welcomeBean.numControls}”" required="”true”">
	<f:validatelongrange minimum="”1”" maximum="”50”/">
	</f:validatelongrange></h:inputtext>

	<h:commandbutton id="”submitCommand”" type="”submit”" value="”Submit”&lt;br">        action=”#{welcomeBean.submit}”
        actionListener="#{welcomeBean.addControls}" immediate=”true”/&gt;
	</h:commandbutton></h:message></h:outputtext></h:form>

</f:view>
In this file, at first level imports were made. Firstly core JSF tag library get imported. It provides core tasks of validation and event handling. Next html tag library get imported, which provide custom tags for user interface components like text boxes, forms etc.

f:view tag must be present as parent tag for all tags, i.e. it should include all other tags in the file.

h:outputText tag creates an HtmlOutputText component, which displays read-only data.

h:message tag is HtmlMessage component, which displays validation errors for specific component. ‘for’ attribute tells the control for which it has to check for errors.

h:outputLabel tag creates HtmlOutputLabel component, which acts as a label for input components.

h:inputText tag creates an HtmlInputText component, which get text input. Its value is associated with a back side bean welcomeBean.

f:validateLongRange validates the input and keep it in specified range.

h:commandButton makes HtmlCommandButton component, which displays HTML form button. Value of its’ action property guide the page to desired direction.

Now we look into second page, on which, we will move after entering a number and clicking submit button on first page i.e. welcome.jsp. Second page is factor.jsp. On the first page, we get a number as input, on this page we will display factors of that number.


XML Code:
&lt;%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %&gt;
&lt;%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %&gt;
<f:view>

<title>&lt;br /&gt;Factors&lt;br /&gt;</title>

<h:form id="factorForm">
<h:outputtext id="factorOutput">value="Factors of "
style	  ="color: blue"/&gt;
<h:outputtext id="welcomeBeanOutput">value="#{welcomeBean.numControls}"/&gt;

<h:panelgrid id="controlPanel">binding="#{welcomeBean.htmlPanel}"
columns="5" border="1" cellspacing="0"/&gt;
</h:panelgrid></h:outputtext></h:outputtext></h:form>

</f:view>
This jsp file has almost same components, which we have seen in the previous file with one exception. In the start there are imports. Then <f:view>, <h:form> and <h:outputtext> tags get used. And then, the new tag <h:panelgrid>, which was not there in first jsp file. It is the representation of HtmlPanelGrid component. HtmlPanelGrid is a container to hold other components and display them in html table. Html tables are used widely used for design side settings and here it fulfills our purpose. Any component in JSF can be associated directly with a bean with binding attribute of <h:panelgrid>. Here we have attached binding with “#{welcomeBean.htmlPanel}”. It is JSF expression language that references property of welcomeBean namely htmlPanel.</h:panelgrid></h:panelgrid></h:outputtext></h:form></f:view>


In this last part of our introductory JSF blog, we will look at bean and configuration file in our application.
First have a look at bean, WelcomeBean.java

Java Code:
import javax.faces.application.Application;
import javax.faces.component.html.HtmlOutputText;
import javax.faces.component.html.HtmlPanelGrid;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
import java.util.List;

public class WelcomeBean
{
	private int numControls;
	private HtmlPanelGrid htmlPanel;

	public int getNumControls()
	{
		return numControls;
	}
	public void setNumControls(int numControls)
	{
		this.numControls = numControls;
	}

	public HtmlPanelGrid getHtmlPanel()
	{
		return htmlPanel;
	}
	public void setHtmlPanel(HtmlPanelGrid htmlPanel)
	{
		this.htmlPanel = htmlPanel;
	}

	public void addControls(ActionEvent actionEvent)
	{
		Application application =
		FacesContext.getCurrentInstance().getApplication();
		List childrenList = htmlPanel.getChildren();
		childrenList.clear();
		for (int count = 1; count < numControls; count++)
		{
			if(numControls%count == 0){//if count is factor of number entered?
				HtmlOutputText output =
				(HtmlOutputText)application.createComponent
                                             (HtmlOutputText.COMPONENT_TYPE);
				output.setValue(" " + count + " ");
				output.setStyle("color: blue");
				childrenList.add(output);
			}
		}
	}
}
Both of our jsp’s have used components from this bean. First property defined in this bean is numControls. In our welcome.jsp, it is used to take input and is referenced by HtmlInputText, while in factor.jsp, it is referenced by HtmlOutputText component. htmlPanel property is object of HtmlPanelGrid, which get created by tag in factor.jsp. The method addControls is the method to handle events. The submit method in welcome.jsp references this method with its actionListener property. When this method get execute, it adds HtmlOutputText component to htmlPanel as much as the factors of numControls.

Then we have the configuration file namely faces-config.xml
XML Code:
<!--?xml version='1.0' encoding='UTF-8'?-->
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"&gt;
<faces-config>
	<managed-bean>
		<description>My first bean for JSF</description>
		<managed-bean-name>welcomeBean</managed-bean-name>
		<managed-bean-class>WelcomeBean</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>
	<navigation-rule>
		<description>Navigation from the Welcome page</description>
		<from-view-id>/welcome.jsp</from-view-id>
		<navigation-case>
			<from-outcome>success</from-outcome>
			<to-view-id>/factor.jsp</to-view-id>
		</navigation-case>
         </navigation-rule>
</faces-config>
Like struts, JSF has a configuration file. This allows user to define beans, navigation rules and several other components of JSF. In our file, we have declared object welcomeBean, which is used by our jsp files. Class for this object is WelcomeBean. Navigation rule specifies the possible routes from pages. Since, we had a single case of moving from welcome.jsp to factor.jsp. So, that is given in success case.

Submit "Simple JSF Application" to Facebook Submit "Simple JSF Application" to Digg Submit "Simple JSF Application" to del.icio.us Submit "Simple JSF Application" to StumbleUpon Submit "Simple JSF Application" to Google

Comments