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:

• More Information

Create a Faces JSP File

Create a new Faces JSP file in the WebContent folder of the application's Web project:

1. Start the New Faces JSP File wizard.
2. Select the desired page model (Basic or Basic with client-side data caching).
3. Optionally, specify page template, tag library and Cascading Style Sheet options.
4. 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.

1. 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.
2. 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.
3. 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.

1. Configure a JSF component. Using the Properties view, you can:

   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.

2. Configure an SDO Component.

   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.

3. Configure other UI components. Use the Properties view to see and customize the available options for the component.

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.

1. Specify simple validation rules (for example, Value is required) in the component's Properties view.
2. Add custom code validation using the Quick Edit view.
3. 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 you must 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 

1. Start Rational Application Developer v6.0.
2. In the menu bar, select Help > Tutorials Gallery.
3. Explore one or more of the following sections: Watch and Learn, Play and Learn and Do and Learn.