Introduction

This is Part 3 of a series of articles exposing the features of the Java™ Server Faces Technology Preview within WebSphere® Studio V5.1.1. The articles in this series include:

• Part 1: Creating a JSF Web project and page template
• Part 2: Creating JSF submission forms
• Part 3: Creating JSF applications that access data using Web Data Objects (WDO, soon to be SDO: Service Data Objects)
• Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components
• Part 5: Creating a JSF Web service client using the Web service proxy component.

In Part 2, we saw how to build JSF forms using Rapid Application Development (RAD) Java Server Faces (JSF) components. In Part 3, we will see how JSF can work with data using Web Data Object (WDO) technology. WDO is the IBM precursor to the emerging Service Data Object (SDO) standard currently in development within the Sun Java Community Process as JSR 235. JSF and SDO make a powerful combination that enables Web Applications to interact with enterprise data in a visual way, and does so without compromising good design.

You will need to download the materials includes with this article to follow along and complete the exercise. The solution to the exercise from Part 2 is included in the download file, in case you have not completed it. You can import the EAR file as illustrated in Part 2.

To run the example, we first need to create a database. We use DB2® here, but the database scripts are included in case you want to use it as a model for a different database. After creating the database, we will use WebSphere Studio to create a WDO component and drag it onto to a display page. We will test the application using the built-in unit test environment (UTE), and then lastly, you will see how JSF has a built in validation framework by applying validation to the Stock History Form.

Back to top

Setup a database

You need to create a database before starting the exercise. To create a DB2 database:

1. Download the materials and database scripts provided in the Download section of this article, if you have not already done so.
2. Open a DB2 Command Window. This can be done through the Windows® Explorer (Figure 1).
   Figure 1. Open DB2 command window
   
   
3. Switch to the directory where you extracted the ZIP file to and go to <Extracted Dir>\JSFArticleSeries\Part3\DBScript.
4. Type the command CreateWSTrade (Figure 2). This will create the necessary database tables. (We use db2admin/db2admin for the userID/password; if you wish to change this, you can edit the CreateWSTrade.bat file.)
   Figure 2. Create database tables
   
   
5. To verify that the database is installed correctly, connect to the database from the DB2 command window by typing (Figure 3):
   db2 connect to WSTRADE user db2admin using db2admin
   Figure 3. Connect to the database
   
   
6. Type the command: db2 select * from WSTRADE.STOCKHISTORY. You should get some results back, similar to Figure 4.
   Figure 4. Database inquiry
   
   
7. Close the DB2 command window.

Back to top

Create a JSP using JSF/WDO components

We are now ready to create our first JSF form. Your WebSphere Studio workspace should be open from the last lab.

1. First, we are going to create a new JSF page that will display the results of submitting a Stock History Request.
   1. From the Web perspective, expand the PersonalTradeJSF Web project, right-click the WebContent folder, and select New => Faces JSP File (Figure 5).
      Figure 5. Project Navigator
      
      
   2. Name the new JSP file viewStockHistory.jsp, check Create from page template, and press Next. (Figure 6)
      Figure 6. Create a Faces JSP file
      
      
   3. On the next dialog, make sure the StockPageTemplate.jtpl is selected and then Finish.
      Figure 7. Create a Faces JSP file
      
      
2. The accessStockHistory page stores the symbol value as input in the request scope. Since accessStockHistory will forward to the viewStockHistory page, the latter page will have access to the input to pass the symbol to the WDO object.
   1. Ensure that viewStockHistory is the active JSP in the editor. In the Page Data view, add a new requestScope variable (Figure 8).
      Figure 8. Page Data
      
      
   2. The variable name is symbol and the type is java.lang.String (Figure 9). This should be the same information as on the submitting page. Select OK.
      Figure 9. Add Request Scope Variable
      
      
      Figure 10. requestScope result
      
      
3. Next, we will build the result page using a WDO Data Component. WebSphere Studio automatically connects to the database and builds the necessary data components.
   1. First, we need to create a title label. From the JSF palette, select an Output component (Figure 11).
      Figure 11. JSF palette
      
      
   2. Drag the coomponent on the JSP page, between the start and end markers, and select Text as the Type.
      Figure 12. JSF palette
      
      
   3. Change the font size of the text to 18 in the Attribute view.
      Figure 13. Attribute view
      
      
   4. Create a blank line after the output component (Figure 13). Expand the Data (Beta) section of the palette. Select Relational Data List (Figure 14) and drag it onto to the JSP page, as shown in Figure 15.
      Figure 14. Visual palette
      
      
      Figure 15. Stock History page
      
      
   5. The Data wizard will display (Figure 16). Enter or select the following values:
      • Name: stockHistory
      • Scope: request
      • Action Type: Display existing data list
      Select New beside the Connection name field.
      Figure 16. Data wizard
      
      
   6. In the New Connection dialog, enter WSTRADE for Connection name, then select New Connection. Press Next.
      Figure 17. Connect to a database
      
      
   7. In the Database Connection dialog (Figure 18), enter or select the following values:
      • Connection Name : WSTRADE
      • Database: WSTRADE
      • User ID: db2admin
      • Password: db2admin
      • Database vendor type: DB2 Universal Database V8.1
      • JDBC Driver: IBM DB2 APP DRIVER
      • Class location: should already contain the proper path.
      Press Finish.
      Figure 18. Establish a JDBC connection
      
      
   8. In the Add Data List dialog (Figure 19), select the table WSTRADE.STOCKHISTORY and select Next.
      Figure 19. Data List Properties
      
      
   9. In the next dialog (Figure 20), leave all the fields checked and select Next.
      Figure 20. Column selection and advanced tasks
      
      
   10. On the next dialog (Figure 21), select the + button to add a condition.
       Figure 21. Add conditions and orders
       
       
   11. For Condition, select By columns, for Column, select SYMBOL and =. Next to the Value section, press the ... button.
       Figure 22. Conditions
       
       
   12. Select the symbol variable from requestScope (Figure 23), then OK.
       Figure 23. Select Page Data Object
       
       
   13. This condition allows the data to be retrieved by input of the symbol on the request scope. Press OK (Figure 24) then Finish (Figure 25).
       Figure 24. Conditions
       
       
       Figure 25. Add Conditions and Orders
       
       
   14. The JSP page should now contain the data grid component based on the table, as shown in Figure 26.
       Figure 26. JSP page with data grid
       
       
   15. The Page Data will have the stockHistory object defined (Figure 27).
       Figure 27. stockHistory object defined
       
       
   16. If you open the faces-config.xml file, you will notice that the data component is defined as a managed bean. You can find faces-config.xml file in the WEB-INF/wdo directory. The file is listed below.

       <managed-bean> <managed-bean-name>stockHistory</managed-bean-name> <managed-bean-class>com.ibm.etools.webtools.wdo.rdb.internal.DataListAccessBeanImpl </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>connectionName</property-name> <value>WSTRADE1</value> </managed-property> <managed-property> <property-name>inputPath</property-name> <value>/WEB-INF/wdo/stockHistory.xml</value> </managed-property> <managed-property> <property-name>servletContext</property-name> <value-ref>${facesContext.externalContext.context}</value-ref> </managed-property> <managed-property> <property-name>servletRequest</property-name> <value-ref>${facesContext.externalContext.request}</value-ref> </managed-property> <managed-property> <property-name>action</property-name> <value>fill</value> </managed-property> <managed-property> <property-name>params</property-name> <map-entries> <map-entry> <key>requestScopesymbol</key> <value-ref>${requestScope.symbol}</value-ref> </map-entry> </map-entries> </managed-property> <managed-property> <property-name>targetPageSize</property-name> <value>0</value> </managed-property> </managed-bean>

       
       
4. We have the data control on the page, but we need to modify the visual structure of the table to meet the requirements. We can use the Attributes View to update the table properties.
   1. Select one of the columns on the table, then on the Attribute View, select HX:DATAGRID. This will let us update the data grid table on the JSP page (Figure 28). (There are several useful items on the Basics tab in the Attributes view. You can add different elements, such as a table header or footer, add a row select check box, and you can also support pagination for a data list.)
      Figure 28. Attribute view
      
      
   2. Select the Columns tab. Order the columns to display in the sequence shown in Figure 30.
      Figure 30. Ordering columns
      
      
   3. Select the Columns tab and make the border 0.
      Figure 31. Data grid attributes
      
      
   4. The screen should now look like Figure 32. You can preview the page as well.
      Figure 32. Page preview
      
      

Back to top

Setup JSF Navigation

Now that we have created our Stock History page, we now need to define the navigation rule from accessStockHistory.jsp. WebSphere Studio uses the Attribute view to do this.

1. First, we will define the Navigation:
   1. From the Project Navigator, open accessStockHistory.jsp.
      Figure 33. Project Navigator
      
      
   2. Select the Access Stock History button.
      Figure 34. Assign navigation
      
      
   3. Go to the Attribute view, select the Navigation tab, then press the Add button.
      Figure 35. Navigation attributes
      
      
   4. Select viewStockHistory.jsp from the Page dropdown box (Figure 36). This defines which page this control will forward to. For Alias, select success. Ensure that This page only is selected, then press OK. Whenever success is encountered, the faces Servlet will forward to viewStockHistory.jsp. The success String can be returned as a result of an Action, or implicitly set as a default when submitting.
      Figure 36. Add navigation rule
      
      
   5. The Navigation should be defined as shown in Figure 37. This will also add the navigation entry to the faces-config.xml file.
      Figure 37. Navigation entry
      
      
2. We now need the submission to trigger the success action so that the forward will succeed. We will not need a separate action for this exercise. The request variable is bound. Also, viewStockHistory.jsp will use a pull MVC style; only the input (the symbol variable) needs to be pushed.
   1. With the accessStockHistory.jsp still active in the editor, select the All tab in the Attributes view and enter success for the action.
      Figure 38. Assign success action
      
      
   2. Save both JSF pages. Open the faces-config.xml if you want to examine the navigation rule, which is shown here:

      <navigation-rule> <from-tree-id>/accessStockHistory.jsp</from-tree-id> <navigation-case> <from-outcome>success</from-outcome> <to-tree-id>/viewStockHistory.jsp</to-tree-id> </navigation-case> </navigation-rule>

      
      

Back to top

Test the JSF component

By adding the WDO data component, WebSphere Studio automatically added the data source to the WebSphere Unit Test Environment, enabling us to automatically test the application directly. To test the application:

1. Right-click the accessStockHistory.jsp file in the Project Navigator, then select Run on Server.
   Figure 39. Run the application
   
   
2. When the server starts and the browser renders the form, enter IBM in the blank field and press Access Stock History (Figure 40). The stock history data should display (Figure 41).
   Figure 40. New JSP page
   
   
   Figure 41. Successful result
   
   

Back to top

Setup page validation

You can easily apply a level of default validation from the validation framework built into JSF. We will add validation to the accessStockHistory.jsp page in the form of a required field; we will make the symbol field a required entry so that if it is left blank, an error message will display:

1. Open accessStockHistory.jsp and select the symbol input control (Figure 42).
   Figure 42. accessStockHistory.jsp
   
   
2. In the Attributes view (Figure 43), select Value is required and Add Display Error control.
3. Click again on the symbol input control on the JSP page to associate the control with the attribute (Figure 42).
4. In the Attributes view, select the Set Custom Message button (Figure 43).
   Figure 43. Attributes view
   
   
5. In the Set custom message dialog, add the text Symbol is required to the Message text box (Figure 44).
   Figure 44. Set custom message
   
   
6. A placeholder for the error message will appear in the JSP (Figure 45).
   Figure 45. JSP with error message pplaceholder
   
   
7. To test the validation, right-click on the server from the Server view, then select Restart Project => StockSystemEAR (Figure 46).
   Figure 46. Restart project
   
   
8. Again, right-click the accessStockHistory.jsp and select Run on Server.
9. When the browser renders, press the Access Stock History button without entering any text. The validation error message should display.
   Figure 48. Validation error message
   
   
10. To stop the server, go to the Servers view, right-click on the server and press Stop.
    Figure 49. Stop server
    
    

Back to top

Conclusion

In this installment of our article series, we showed how JSF and WDO (soon to be SDO) make a powerful combination for building dynamic Web pages quickly and efficiently. We also demonstrated how JSF supports validation in an easy and "toolable" way.

In Part 4, we will see how JSF can work just as easily with other J2EE technologies. Specifically, we will use the JavaBean component to connect our JSF pages to existing EJB applications.

Back to top

Download

Name	Size	Download method
JSFArticleSeriesP3.zip	4.8 MB	FTP|HTTP

Information about download methods

Resources

• IBM WebSphere Developer Technical Journal
  
  
• Part 1: Creating a JSF Web project and page template
  
  
• Part 2: Creating JSF submission forms
  
  
• Part 4: Integrating JSF applications with Enterprise Java Beans using action handlers and JavaBean data components
  
  
• JavaServer Faces Sun Web site
  
  
• Part 5: Creating a JSF Web service client using the Web service proxy component
  
  
• JSF Central
  
  

About the author

Roland Barcia is a Consulting IT Specialist for IBM Software Services for WebSphere. He is a co-author of IBM WebSphere: Deployment and Advanced Configuration. For more information about Roland, see his blog.

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• Introduction
• Setup a database
• Create a JSP using JSF/WDO components
• Setup JSF Navigation
• Test the JSF component
• Setup page validation
• Conclusion
• Download
• Resources
• About the author
• Comments

Next steps from IBM

With the WebSphere Application Server you can benefit from the simplified EJB 3.0 development experience, new persistence model, and interceptors.

---

• Try: Download a free trial version of WebSphere Application Server Community Edition, the lightweight Java 5 application server with robust EJB 3.0 funtionality.
• Article: Learn how call patterns and components involved in making calls to EJB components deployed in the EJB container operate in WebSphere Application Server.
• Tutorial: This tutorials shows you how to create an enterprise J2EE application that implements both Plain Old Java Object (POJO) and EJB Web services endpoints.
• Buy: WebSphere Application Server

My developerWorks community

Dig deeper into WebSphere on developerWorks

Rate a product. Write a review.

Write a review for Rational products today!

Special offers