Introducing Java Server Faces (JSF) - JSF: Steps for Implementation
(Page 3 of 4 )
Like any other framework, JSF has its own steps that have to be followed by the developer for creating a workable application. The common steps that are the part of JSF based application development process are:
- Develop the model objects, which will hold the data.
- Add managed bean declarations to the Application Configuration File.
- Create the Pages using the UI component and core tags.
- Define Page Navigation.
The sequence of the first and third steps can be swapped. That means, depending on your needs, model objects can be developed once the UI has been created and managed beans have been configured. With large enterprise applications, it is always better to develop model objects first and then work on UI development. With small- or medium-sized applications, rapid prototyping can be done using UI components and, when approved, model objects can be developed.
Here are the details:
Develop the model objects, which will hold the data
Data forms the basis of any application. With web applications, it is always better to develop a model to hold the data. In essence a model object is the object world representation of a relational or non-relational data model such as tables. In JSF a model object is a JavaBean that is modeled after, for example, a table. The model object can be used to represent, process and return the result of the user's input. For instance, the following example holds the data entered in the text field:
import java.util.Random;
public class UserNumberBean {
Integer userNumber = null;
Integer randomInt = null;
String response = null;
public UserNumberBean () {
Random randomGR = new Random();
randomInt = new Integer(randomGR.nextInt(10));
}
public void setUserNumber(Integer user_number) {
userNumber = user_number;
}
public Integer getUserNumber() {
return userNumber;
}
public String getResponse() {
if(userNumber.compareTo(randomInt) == 0)
return "Yay! You got it!";
else
return "Sorry, "+userNumber+" is incorrect.";
}
The above class takes user input, generates random integers and compares them, then returns either an affirmative or negative String. One thing to keep in mind is that the model object and managed bean can be same Java class. This approach is mostly used in small projects.
Add managed bean declarations to the Application Configuration File
The model object and/or the managed bean must be added to the Application Configuration File, which is a technical term for faces-config.xml. It is done by providing the required details to the child elements of the <managed-bean> tag. For example, the Model object that has been shown in the above example can be added thus:
<managed-bean>
<managed-bean-name>
UserNumberBean
</managed-bean-name>
<managed-bean-class>
guessNumber.UserNumberBean
</managed-bean-class>
<managed-bean-scope>
Session
</managed-bean-scope>
</managed-bean>
The <managed-bean-name> takes the name of the managed bean. Next comes the <managed-bean-class> that takes the fully qualified Java class name as its value. The scope of the bean is defined in the <managed-bean-class> element. The framework reads it and does the needful.
Create the Pages using the UI component and core tags
Now that the model object has been associated with the framework, next task is to create the page that will present the data to the user. This is done by developing the page using UI Components provided as tags. The two main tags are view and form. The first informs of the start of JSF tags and the second is for form controls in JSF. The following example creates a input box and connects it with the bean:
<f:view>
<h:form binding="#{Page1.form1}" id="form1">
<h:inputText binding="#{
guessNumber.UserNumberBean
}"
id="textField1" style="left: 192px; top: 48px; position:
absolute"/>
<h:commandButton binding="#{Page1.button1}" id="button1" style="left: 288px; top: 144px; position: absolute" value="Submit"/>
</h:form>
</f:view>
Observe the inputText tag. It is connected with the managed bean using the binding attribute. And it comes under the form tag along with the commandButton tag. The whole set up is placed under the view tag. That's how pages are created using JSF tags and UI Components. Next let's see how to set up the navigation.
Define Page Navigation
In JSF, the center of action is faces-config.xml. So the navigation rules are also set up in the faces-config file. There are three main participating elements. Navigation-rule contains a set of rules for navigation within the application. Navigation-case is a child node of navigation-rule, and it defines the per page processing result which navigation will be defined. From-outcome and to-view-id are the child nodes of navigation-case. The former defines the expected result of the processing of a page and the later defines to which page the redirection must be done.
The following is an example of such a navigation set up:
<navigation-rule>
<from-view-id>/login.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/mainmenu.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>failure</from-outcome>
<to-view-id>/login.jsp</to-view-id>
</navigation-case>
</navigation-rule>
That covers the steps required in using JSF for development. The next section will focus on implementing these steps for a real world scenario.
Next: JSF in the Real World >>
More Java Articles
More By A.P.Rajshekhar
