jAstrologer JSF Tutorial - Hooking up Backing Beans

Yesterday we created a simple web application with JSF components called jAstrologer. The problem is, our web application doesn't really do anything interesting right now. In order to add rich functionality to your JSF web applications, you can associate your UI components with backing beans, or JSF managed beans whose bean properties and methods are available to the JSF components.

In our example, we'll create a UserBean managed bean that will expose two String bean properties: name and birthday.

  1. Right-click the project and choose New > File/Folder. Under the Web category, select the JSF Managed Bean template and click Next.
  2. Name the bean UserBean and put it in the astrologer.user package. Leave the rest of the settings at their default values and click Finish. The IDE opens UserBean.java in the Source Editor and adds the following bean declaration to faces-config.xml:
        <managed-bean>
            <managed-bean-name>UserBean</managed-bean-name>
            <managed-bean-class>astrologer.user.UserBean</managed-bean-class>
            <managed-bean-scope>request</managed-bean-scope>
        </managed-bean>
  3. Add the following field declarations (shown in bold) to UserBean.java:
    public class UserBean {
        
        String name;
        String birthday;
  4. Now let's generate getters and setters for the fields. Right-click anywhere in the file and choose Refactor > Encapsulate Fields. Click Next in the dialog, then Do Refactoring in the Refactoring window. The IDE switches the access level for the fields to private and creates the getter and setter methods.
  5. In greeting.jsp, make the following changes shown in bold. Note that code completion is available for UserBeans.java and its properties:
        <f:view>
            <h:form>
                <p>Enter your name: <h:inputText value="#{UserBean.name}" /></p>
                <p>Enter your birthday: <h:inputText value="#{UserBean.birthday}" /></p>
                <h:commandButton value="Submit" action="submit" />
            </h:form>
        </f:view>
  6. Add the JSF taglib declarations to success.jsp. You can copy and paste them from greeting.jsp.
  7. Add a JSF form to success.jsp by clicking the JSF Form button in the Palette window and releasing it below the h1 tag in the Source Editor.
  8. Make the following changes to success.jsp:
        <h1>Congratulations</h1>
        <f:view>
            <h:form>
                <p>You've successfully registered with jAstrologer.</p>
                <p>Your name is <h:outputText value="#{UserBean.name}" /></p>
                <p>Your birthday is <h:outputText value="#{UserBean.birthday}" /></p>
            </h:form>
        </f:view>
  9. Right-click the project and choose Run Project. The same greeting.jsp page greets you when the application is deployed.

    greeting.jsp

    When you enter values and click Submit, success.jsp also displays the values you entered, as shown in the following diagram:

    result.jsp

Comments:

Post a Comment:
Comments are closed for this entry.
About

johnc

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today