MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

guessNumber - Developing a JSF (Java Server Faces) application

In this article, we will be describing the process of developing a simple Java Server Faces application. In this, we will see what features a typical Java Server Faces application contains and what part each role has in developing the application.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

In the process of building this application, the following tasks (which can be done in any order) will be included. They are as follows:

  • Create the pages using the UI component and core tags.
  • Define page navigation in the application configuration resource file.
  • Develop the backing beans.
  • Add managed bean declarations to the application configuration resource file.

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:

  • Form Tag: The form tag represents an input form that allows the user to input some data and submit it to the server, usually by clicking a button. All UI component tags that represent editable components must be nested inside the form tag.
  • OutputText Tag: The outputText tag represents a label. The greeting.jsp page has two outputText tags. One of the tags displays the number 0. The other tag displays the number 10.
  • InputText Tag: The inputText tag represents a text field component. In the guessNumber example, this text field takes an integer. The instance of this tag included in greeting.jsp has two attributes: id and value.
  • CommandButton Tag: The commandButton tag represents the button used to submit the data entered in the text field. The action attribute specifies an outcome that helps the navigation mechanism decide which page to open next.
  • Message Tag: The message tag displays an error message if the data entered in the field does not comply with the rules specified by the LongRangeValidator implementation. The error message displays wherever you place the message tag on the page. The style attribute allows you to specify the formatting style for the message text.

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.

Conclusion

Finally, in this article, we have studied, in details, all the steps that are required to create a simple JavaServer Faces application.



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login