0
0
In the process of building this application, the following tasks (which can be done in any order) will be included. They are as follows:
In this article, we will be building the guessNumber. It asks the user to guess a number between 0 and 10, inclusive. The second page tells you whether you guessed correctly . Now, let us start with creating the pages. This task involves laying out UI components on the pages, mapping the components to beans, and adding other core tags.
Listing 1: Shows the code for creating the pages of guessNumber application
<HTML >
<HEAD> <title>Hello</title> </HEAD>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<body bgcolor="white">
<f:view>
<h:form id="helloForm" >
<h2>Hi. My name is Duke. I'm thinking of a number from
<h:outputText value="#{UserNumberBean.minimum}"/> to
<h:outputText value="#{UserNumberBean.maximum}"/>.
Can you guess it?</h2>
<h:graphicImage id="waveImg" url="/wave.med.gif" />
<h:inputText id="userNo"
value="#{UserNumberBean.userNumber}">
<f:validateLongRange
minimum="#{UserNumberBean.minimum}"
maximum="#{UserNumberBean.maximum}" />
</h:inputText>
<h:commandButton id="submit" action="success"
value="Submit" /> <p>
<h:message style="color: red;
font-family: 'New Century Schoolbook', serif;
font-style: oblique;
text-decoration: overline"
id="errors1"
for="userNo"/>
</h:form>
</f:view>
</HTML>
The created page demonstrates a few important features that you will use in most of your JavaServer Faces applications. These features are below:
Now, after creating the pages, the next step is to define page navigation. It involves the process of determining which page to go to after the user clicks a button or a hyperlink. Navigation for the application is defined in the application configuration resource file using a powerful rule-based system.
Listing 2: Shows the code for defining the page navigation
<navigation-rule>
<from-view-id>/greeting.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/response.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/response.jsp</from-view-id>
<navigation-case>
<from-outcome>success</from-outcome>
<to-view-id>/greeting.jsp</to-view-id>
</navigation-case>
</navigation-rule>
In the code above , each navigation-rule element defines how to get from one page (specified in the from-view-id element) to the other pages of the application. The navigation-rule elements can contain any number of navigation-case elements, each of which defines the page to open next based on a logical outcome. The outcome can be defined by the action attribute of the UICommand component that submits the form. The outcome can also come from the return value of an action method in a backing bean. This method performs some processing to determine the outcome.
Listing 3: Shows the code for defining the outcome
<h:commandButton id="submit" action="success" value="Submit" />
Now after defining the page navigation, there is a need for developing the beans. Developing beans is one responsibility of the application developer. The page author and the application developer--if they are two different people--will need to work in tandem to make sure that the component tags refer to the proper UI component properties, to ensure that the properties have the acceptable types, and to take care of other such details. A typical JavaServer Faces application couples a backing bean with each page in the application. The backing bean defines properties and methods that are associated with the UI components used on the page. Each backing bean property is bound to either a component instance or its value. A backing bean can also define a set of methods that perform functions for the component, such as validating the component's data, handling events that the component fires and performing processing associated with navigation when the component is activated. The page author binds a component's value to a bean property using the component tag's value attribute to refer to the property. Similarly, the page author binds a component instance to a bean property by referring to the property using the component tag's binding attribute.
Listing 4: Shows the code for UserNumberBean backing bean property that maps to the data for the userNo component
Integer userNumber = null;
...
public void setUserNumber(Integer user_number) {
userNumber = user_number;
}
public Integer getUserNumber() {
return userNumber;
}
public String getResponse() {
if(userNumber != null &&
userNumber.compareTo(randomInt) == 0) {
return "Yay! You got it!";
} else {
return "Sorry, "+userNumber+" is incorrect.";
}
}
The last step is to add managed bean declarations. As we know, there is a need to configure them in the application configuration resource file so that the JavaServer Faces implementation can automatically create new instances of the beans whenever they are needed. The task of adding managed bean declarations to the application configuration resource file is the application architect's responsibility.
Listing 5: Shows the code for managed bean declaration forUserNumberBean
<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-property>
<property-name>minimum</property-name>
<property-class>long</property-class>
<value>0</value>
</managed-property>
<managed-property>
<property-name>maximum</property-name>
<property-class>long</property-class>
<value>10</value>
</managed-property>
</managed-bean>
One outputText tag on the greeting.jsp page binds its component's value to the minimum property of UserNumberBean. The other outputText tag binds its component's value to the maximum property of UserNumberBean.
Listing 6: Shows the code for outputText
<h:outputText value="#{UserNumberBean.minimum}"/>
<h:outputText value="#{UserNumberBean.maximum}"/>
As shown in the tags, the part of the expression before the “.” matches the name defined by the managed-bean-name element. The part of the expression after the “.” matches the name defined by the property-name element corresponding to the same managed-bean declaration. Notice that the managed-property elements configure the minimum and maximum properties with values. These values are set when the bean is initialized, which happens when it is first referenced from a page. Also notice that the application configuration resource file does not configure the userNumber property. Any property that does not have a corresponding managed-property element will be initialized to whatever the constructor of the bean class has the instance variable set to. The JavaServer Faces implementation processes this file on application startup time. When the UserNumberBean is first referenced from the page, the JavaServer Faces implementation initializes it and stores it in session scope if no instance exists. The bean is then available for all pages in the application.
Finally, in this article, we have studied, in details, all the steps that are required to create a simple JavaServer Faces application.
See the prices for this post in Mr.Bool Credits System below: