IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2

Creating JSF submission forms

Part 2 of this 5-part series on Java Server Faces builds upon Part 1, continuing with the creation of JSF submission forms, and showing some of the dynamic controls that can be used for visually developing J2EE Web applications.

Share:

Introduction

This is part of 2 of a 5 part article series illustrating the features of the Java™ Server Faces (JSF) technology preview available in WebSphere® Studio V5.1.1. The articles that make up this series include:

These exercises will expose the Rapid Application Development (RAD) nature of JSF. In Part 1, we created a JSF-enabled Web project and a JSF page template. Page templates help us deal with the static portions of our Web sites, although J2EE applications servers are designed for running dynamic Web pages. In Part 2, we will create two JSF submission forms and show some of the dynamic controls on the visual palette, continuing where we left off in Part 1.

You can download the solution to Part 1 from the Download section of this article. If you extract the zip file to your C: drive, you can import the StockSystemEAR file from C:\JSFArticleSeries\Part2\SolutionPt1 into a clean workspace, then select File => Import, then EAR file from the Import wizard (Figure 1).

Figure 1. Import EAR
Figure 1. Import EAR

Create accessStock JSF form

To create our first JSF form, your workspace should first be open from the last exercise from Part 1.

  1. Create a new JSF page within our Web project:
    1. If you are not in the Web perspective, go there now. Expand the PersonalTradeJSF Web project and right-click the WebContent folder and select New => Faces JSP File (Figure 2).
      Figure 2. Create new JSP file
      Figure 2. Create new JSP file
    2. Enter accessStock.jsp for the File Name and check Create from page template (Figure 3). Press Next.
      Figure 3. New Faces JSP File
      Figure 3. New Faces JSP File
    3. Select User-Defined Page Template and StockPageTemplate.jtpl. If the template is not listed, select Browse => Current Project next Location (Figure 4). Select Finish.
      Figure 4. Page Template File Selection
      Figure 4. Page Template File Selection
    4. The Faces JSP page should match the template we built previously (Figure 5). You will notice "Default content of bodyarea". This is the only place on the page into which we can drag components. Any changes to the template need to be made to the template file; only the content area is dynamic.
      Figure 5. Faces JSP Page
      Figure 5. Faces JSP Page
  2. We will now drag JSF components into the content area:
    1. Delete the "Default content of body area" text and create some spaces in between the start and end pencil icons. From the Faces Components section of the palette (Figure 6), drag the Output component onto the content area.
      Figure 6. Faces Components palette
      Figure 6. Faces Components palette
    2. After dragging the component into the content area (Figure 7), the Select Type dialog appears asking you to identify the type of component (Figure 8). Select Text and OK.
      Figure 7. Drag component into content area
      Figure 7. Drag component into content area
      Figure 8. Select Type
      Figure 8. Select Type
    3. Select the component. For Value, enter Access Stock, then select the Properties tab (Figure 9).
      Figure 9. Attributes
      Figure 9. Attributes
    4. Change the font size of the text to 18 points, then OK (Figure 10).
      Figure 10. Add Style
      Figure 10. Add Style
      Figure 11. Properties
      Figure 11. Properties
    5. Next, add a space under the label on the JSP page. From the palette (Figure 12), select the Input component and drag it next to the Access Stock output component.
      Figure 12. Faces Components palette
      Figure 12. Faces Components palette
    6. Again, select Text from Select Type dialog (Figure 13).
      Figure 13. Select Type
      Figure 13. Select Type
    7. The JSP page should now look similar to Figure 14. Enter a few new lines after the input box.
      Figure 14. New JSP page content area
      Figure 14. New JSP page content area
    8. Select Command - Button from the palette (Figure 15) and drag it onto the JSP page (Figure 16).
      Figure 15. Select Command - Button
      Figure 15. Select Command - Button
      Figure 16. New JSP page
      Figure 16. New JSP page
    9. Select the new button and then go to the Attributes view. Select the Format tab and enter Submit Stock Request for the Label. The button on the JSP should reflect this new label.
      Figure 17. Define Label
      Figure 17. Define Label
    10. Save the JSP page.
  3. Now that we have created our first JSF form, we need to bind the controls to page data. The Page Data view allows the Web developer to create scripting variables for any of the allowable JSP scope levels.
    1. With accessStock.jsp still open, go to the Page Data view on the middle left side of the workbench. Select JSP scripting, right-click on requestScope, then select Add Request Scope Variable (Figure 18).
      Figure 18. JSP scripting menu
      Figure 18. JSP scripting menu
    2. In the Add Request Scope Variable dialog that displays, enter the following values:
      • Variable name: symbol
      • Type: java.lang.String
      then select OK.
    3. The variable is now defined. Any tag that supports JSTL expression language can now access the symbol variable using ${requestScope.symbol}. JSF tags support the JSTL expression language; JSP 2.0 will fully support the JSTL expression language as well. An expression language is much easier for a Web developer to use than JSP expressions in Java.
      Figure 19. Accessing the symbol variable
      Figure 19. Accessing the symbol variable
  4. We can now use the Attribute view of certain components to bind the page data we have defined to a control. Here, we will bind the input control to the symbol variable defined in the requestScope:
    1. Highlight the input control on accessStock.jsp (Figure 20).
      Figure 20. accessStock.jsp
      Figure 20. accessStock.jsp
    2. From the Attribute view, select the button beside the Bind to text box (Figure 21).
      Figure 21. Attributes view
      Figure 21. Attributes view
    3. Select the symbol variable under requestScope and press OK (Figure 22).
      Figure 22. Select Page Data Object
      Figure 22. Select Page Data Object
    4. The JSP should display the {symbol} variable in the input box (Figure 23).
      Figure 23. JSP with symbol variable
      Figure 23. JSP with symbol variable
    5. Save the JSP.
    6. On the JSP page, select the Preview tab to view the result.
      Figure 24. JSP preview
      Figure 24. JSP preview

Test the JSF form in the WebSphere Application Server V5.1 test environment

We will now use the WebSphere Application Server V5.1 Unit Test Environment (UTE), included with WebSphere Studio, to test the page.

  1. From the Project Navigator view, right-click on accessStock.jsp, and select Run on Server (Figure 25).
    Figure 25. Test JSP
    Figure 25. Test JSP
  2. The Server Configuration wizard will display. The Test Environment option should be selected under WebSphere version 5.1. Select the Set server as project default option, then Finish (Figure 26).
    Figure 26. Server selection
    Figure 26. Server selection
  3. Once the server completely starts, the browser should also start. Notice that the URL goes through the Faces servlet. Without going through the Faces servlet, the Faces context will not be setup and the JSP render would fail. WebSphere Studio automatically knows to access the JSP through the Faces servlet because we added Faces support when creating the Web project.
    Figure 27. Universal Test Client startup
    Figure 27. Universal Test Client startup
    Figure 28. Testing the JSP
    Figure 28. Testing the JSP
  4. In the JSP, enter a value of IBM , then Submit Stock Request (Figure 29). Notice that the page re-renders while the Text box still populates. The control is bound to the request variable for input and output. Also, the default navigation of JSF is to re-render the same page if no navigation is set or no navigation result is found. For pages wanting to use both input and output controls on the same page, it is quite easy to develop a JSF page with no navigation.
    Figure 29. Testing the JSP
    Figure 29. Testing the JSP

Create and test accessStockHistory.jsp

In the previous section, we walked through the creation of a JSF form. We will now create a second JSF form to access stock history, although we will only step through the creation process at a high level. This new page will be used in Part 3 of this article series.

Create another form using Faces components that will return a list of stock history. Follow the detailed steps above to create the form, to be named "Access Stock History":

  1. The new form should look like the page in Figure 30, below.
    Figure 30. New JSF form
    Figure 30. New JSF form
  2. Be sure to create the symbol variable and to bound the input box to the symbol variable.
    Figure 31. Create symbol variable
    Figure 31. Create symbol variable
    Figure 32. Bound input box to symbol variable
    Figure 32. Bound input box to symbol variable
  3. Preview and test the page when the form is compete. You will need to restart the application server.
    Figure 33. Restart application server
    Figure 33. Restart application server
  4. Aside from the title, the new page should look similar to the one previously created.
    Figure 34. New application page
    Figure 34. New application page
  5. Save and close the file.
  6. Go to the Project Navigator view and expand the Java Resources folder. Under the codebehind package, you will see the generated java code that corresponds to the JSP pages.
    Figure 35. Codebehind package
    Figure 35. Codebehind package
  7. Additionally, each generated Java class is added as a JSF managed bean. Open the faces-config.xml file under the WEB-INF directory to examine the file, the contents of which is shown in Listing 1.
    Figure 36. Locating the faces-config.xml file
    Figure 36. Locating the faces-config.xml file

    Listing 1. faces-config.xml

    <managed-bean>
    	<managed-bean-name>cb_StockPageTemplate</managed-bean-name>
    	<managed-bean-class>codebehind.StockPageTemplate</managed-bean-class>
    	<managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
    <managed-bean>
    	<managed-bean-name>cb_accessStock</managed-bean-name>
    	<managed-bean-class>codebehind.accessStock</managed-bean-class>
    	<managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
    <managed-bean>
    	<managed-bean-name>cb_accessStockHistory</managed-bean-name>
    	<managed-bean-class>codebehind.accessStockHistory</managed-bean-class>
    	<managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
  8. Stop the server when finished.
    Figure 37. Stop the server
    Figure 37. Stop the server

Conclusion

In Part 2 of this article series, we have successfully built two JSF forms. In so doing, we also saw how the JSF visual palette conveniently provides JSF components for building open and powerful Web sites. Part 3 will continue with building the result of the Stock History page using Web Data Object (WDO) Technology, which is another preview technology in WebSphere Studio V5.1.1.


Download

DescriptionNameSize
Code sampleJSFArticleSeriesP2.zip  ( HTTP | FTP )2.4 MB

Resources

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere
ArticleID=13457
ArticleTitle=IBM WebSphere Developer Technical Journal: Developing JSF Applications using WebSphere Studio V5.1.1 -- Part 2
publish-date=02182004