IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 3

Creating JSF applications that access data using Web Data Objects

In Part 2 of this 5-part series, we built Java Server Faces forms using Rapid Application Development (RAD) JSF components. In Part 3, we will see how JSF can work with data using Web Data Object (WDO) (soon to be Service Data Object) technology.

Share:

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:

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.


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
    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
    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
    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
    Database inquiry
  7. Close the DB2 command window.

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
      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
      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
      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
      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
      Add Request Scope Variable
      Figure 10. requestScope result
      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
      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
      JSF palette
    3. Change the font size of the text to 18 in the Attribute view.
      Figure 13. Attribute view
      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
      Visual palette
      Figure 15. Stock History page
      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
      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
      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
      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
      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
      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
      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
      Conditions
    12. Select the symbol variable from requestScope (Figure 23), then OK.
      Figure 23. Select Page Data Object
      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
      Conditions
      Figure 25. Add Conditions and Orders
      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
      JSP page with data grid
    15. The Page Data will have the stockHistory object defined (Figure 27).
      Figure 27. stockHistory object defined
      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
      Attribute view
    2. Select the Columns tab. Order the columns to display in the sequence shown in Figure 30.
      Figure 30. Ordering columns
      Ordering columns
    3. Select the Columns tab and make the border 0.
      Figure 31. Data grid attributes
      Data grid attributes
    4. The screen should now look like Figure 32. You can preview the page as well.
      Figure 32. Page preview
      Page preview

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
      Project Navigator
    2. Select the Access Stock History button.
      Figure 34. Assign navigation
      Assign navigation
    3. Go to the Attribute view, select the Navigation tab, then press the Add button.
      Figure 35. Navigation attributes
      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
      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
      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
      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>

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
    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
    New JSP page
    Figure 41. Successful result
    Successful result

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
    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
    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
    Set custom message
  6. A placeholder for the error message will appear in the JSP (Figure 45).
    Figure 45. JSP with error message pplaceholder
    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
    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
    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
    Stop server

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.


Download

DescriptionNameSize
Code sampleJSFArticleSeriesP3.zip  ( HTTP | FTP )4.8 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=13651
ArticleTitle=IBM WebSphere Developer Technical Journal: Developing JSF applications using WebSphere Studio V5.1.1 -- Part 3
publish-date=03172004