Tool Mentor: Building
a Web User Interface Using JSF and SDO
Purpose
This tool mentor describes the overall approach for constructing a JavaServer Faces (JSF) Web page that accesses back-end data using Server Data Objects (SDO) in RAD 6.0.
For a description of JSF and SDO technology and guidelines on how to build Web user interfaces, refer to:
Overview
This tool mentor assumes that a Dynamic Web Project has already been created for the application and that all required SDO components have been developed and included in the project. The following steps are performed in this tool mentor:
- Create a Faces JSP File.
- Visually compose page Layout.
- Configure component parameters and attributes.
- Add Event-handling and Validation logic.
- Test the page.
References to additional resources are also provided under:
Create a Faces JSP File
Create a new Faces JSP file in the WebContent folder of the application's Web project:
- Start the New Faces JSP File wizard.
- Select the desired page model (Basic or Basic with client-side data caching).
- Optionally, specify page template, tag library and Cascading Style Sheet options.
- Click Finish to open the new page in Page Designer.
Visually Compose Page Layout
Page Designer includes a Palette view with different drawers that contain many pre-defined user interface (UI) components.
- Drag a JSF component from either the Faces Components or Faces Client Components (available only for a Faces JSP with client-side data caching) drawer onto the page.
- Drag an SDO component from the Data drawer onto the page. The appropriate data component reference wizard is opened to allow you to specify its source and initial configuration properties.
- Drag other UI components from the Palette onto the page as necessary.
Configure Component Parameters and Attributes
UI components on a page are configured through specialized views (for example, Properties, Page Data and Client Data views) or by means of wizards that pop-up when they are dropped onto the page.
- Configure a JSF component. Using the Properties view, you can:
- Configure an SDO Component.
- Configure other UI components. Use the Properties view to see and customize the available options for the component.
a. Customize a component's appearance.
b. Bind a component's value to data defined in the Page Data or Client Data view.
c. Specify navigation rules for control components (for example, Command Button) based on aliases returned from Java snippets.
a. When dropped onto a page, a pop-up wizard allows you to specify the SDO's data source (for example, JavaBean class name or database and table names)
b. For a relational data SDO, the wizard also allows you to configure advanced options such as automatically generating keys and setting concurrency control.
c. The Properties view can be used to customize the SDO's data format and paging options if applicable.
Add Event-Handling and Validation Logic
For JSF components, the Quick Edit view can be used to add Java snippets for event-handling and validation logic.
- Specify simple validation rules (for example, Value is required) in the component's Properties view.
- Add custom code validation using the Quick Edit view.
- Customize a component's event-handling code (for example, to return an Alias value to control navigation) using the Quick Edit view.
Test the Page
Select Run As > Run on Server from Page Designer's menu bar to test the page. Note that select a WebSphere v5.1 or later server as your target Test Environment in order to support the SDOs in your Web page. After the server starts, the page is opened in a browser view and ready to be tested.
More Information
- Start Rational Application Developer v6.0.
- In the menu bar, select Help > Tutorials Gallery.
- Explore one or more of the following sections: Watch and Learn, Play and Learn and Do and Learn.
