<?xml version="1.0" encoding="UTF-8"?>
<org.eclipse.epf.uma:ContentDescription xmi:version="2.0" xmlns:xmi="http://www.omg.org/XMI" xmlns:org.eclipse.epf.uma="http://www.eclipse.org/epf/uma/1.0.6/uma.ecore" xmlns:epf="http://www.eclipse.org/epf" epf:version="1.5.1" xmlns:rmc="http://www.ibm.com/rmc" rmc:version="7.5.1" xmi:id="_x83_ocezEdmYjcUf1_oIew" name="building_web_ui_using_jsf_and_sdo,{A85C5E3E-C9D3-4C1F-8EFF-4C551BD993D2}" guid="_x83_ocezEdmYjcUf1_oIew" changeDate="2005-10-18T20:47:40.591-0700" version="7.1.0">
  <mainDescription>&lt;h3>&#xD;
    Overview&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    This tool mentor assumes that a Dynamic Web Project has already been created for the application and that all required&#xD;
    SDO components have been developed and included in the project. The following steps are performed in this tool mentor:&#xD;
&lt;/p>&#xD;
&lt;ul>&#xD;
    &lt;li>&#xD;
        &lt;a href=&quot;#create&quot;>Create a Faces JSP File.&lt;/a>&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        &lt;a href=&quot;#visually&quot;>Visually compose page Layout.&lt;/a>&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        &lt;a href=&quot;#configure&quot;>Configure component parameters and attributes.&lt;/a>&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        &lt;a href=&quot;#add_event&quot;>Add Event-handling and Validation logic.&lt;/a>&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        &lt;a href=&quot;#test&quot;>Test the page.&lt;/a>&#xD;
    &lt;/li>&#xD;
&lt;/ul>&#xD;
&lt;p>&#xD;
    References to additional resources are also provided under:&#xD;
&lt;/p>&#xD;
&lt;ul>&#xD;
    &lt;li>&#xD;
        &lt;a href=&quot;#more_info&quot;>More Information&lt;/a>&#xD;
    &lt;/li>&#xD;
&lt;/ul>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;create&quot; href=&quot;#Top&quot; name=&quot;create&quot;>Create a Faces JSP File&lt;/a>&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    Create a new Faces JSP file in the &lt;em>WebContent&lt;/em> folder of the application's Web project:&#xD;
&lt;/p>&#xD;
&lt;ol>&#xD;
    &lt;li>&#xD;
        Start the &lt;em>New Faces JSP File&lt;/em> wizard.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Select the desired page model (&lt;em>Basic&lt;/em> or &lt;em>Basic with client-side data caching&lt;/em>).&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Optionally, specify page template, tag library and Cascading Style Sheet options.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Click Finish to open the new page in Page Designer.&lt;br />&#xD;
    &lt;/li>&#xD;
&lt;/ol>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;visually&quot; href=&quot;#Top&quot; name=&quot;visually&quot;>Visually Compose Page Layout&lt;/a>&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    Page Designer includes a &lt;em>Palette&lt;/em> view with different drawers that contain many pre-defined user interface (UI)&#xD;
    components.&#xD;
&lt;/p>&#xD;
&lt;ol>&#xD;
    &lt;li>&#xD;
        Drag a JSF component from either the &lt;em>Faces Components&lt;/em> or &lt;em>Faces Client Components&lt;/em> (available only&#xD;
        for a Faces JSP with client-side data caching) drawer onto the page.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Drag an SDO component from the &lt;em>Data&lt;/em> drawer onto the page. The appropriate data component reference wizard&#xD;
        is opened to allow you to specify its source and initial configuration properties.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Drag other UI components from the Palette onto the page as necessary.&#xD;
    &lt;/li>&#xD;
&lt;/ol>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;configure&quot; href=&quot;#Top&quot; name=&quot;configure&quot;>Configure Component Parameters and Attributes&lt;/a>&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    UI components on a page are configured through specialized views (for example, &lt;em>Properties&lt;/em>, &lt;em>Page Data&lt;/em>&#xD;
    and &lt;em>Client Data&lt;/em> views) or by means of wizards that pop-up when they are dropped onto the page.&#xD;
&lt;/p>&#xD;
&lt;ol>&#xD;
    &lt;li>&#xD;
        Configure a JSF component. Using the &lt;em>Properties&lt;/em> view, you can: &#xD;
        &lt;blockquote>&#xD;
            &lt;p>&#xD;
                a. Customize a component's appearance.&lt;br />&#xD;
                 b. Bind a component's value to data defined in the &lt;em>Page Data&lt;/em> or &lt;em>Client Data&lt;/em> view.&lt;br />&#xD;
                 c. Specify navigation rules for control components (for example, Command Button) based on aliases returned&#xD;
                from Java snippets.&#xD;
            &lt;/p>&#xD;
        &lt;/blockquote>&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Configure an SDO Component. &#xD;
        &lt;blockquote>&#xD;
            &lt;p>&#xD;
                a. When dropped onto a page, a pop-up wizard allows you to specify the SDO's data source (for example,&#xD;
                JavaBean class name or database and table names)&lt;br />&#xD;
                 b. For a relational data SDO, the wizard also allows you to configure advanced options such as&#xD;
                automatically generating keys and setting concurrency control.&lt;br />&#xD;
                 c. The &lt;em>Properties&lt;/em> view can be used to customize the SDO's data format and paging options if&#xD;
                applicable.&#xD;
            &lt;/p>&#xD;
        &lt;/blockquote>&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Configure other UI components. Use the &lt;em>Properties&lt;/em> view to see and customize the available options for the&#xD;
        component.&#xD;
    &lt;/li>&#xD;
&lt;/ol>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;add_event&quot; href=&quot;#Top&quot; name=&quot;add_event&quot;>Add Event-Handling and Validation Logic&lt;/a>&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    For JSF components, the &lt;em>Quick Edit&lt;/em> view can be used to add Java snippets for event-handling and validation&#xD;
    logic.&#xD;
&lt;/p>&#xD;
&lt;ol>&#xD;
    &lt;li>&#xD;
        Specify simple validation rules (for example, Value is required) in the component's &lt;em>Properties&lt;/em> view.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Add custom code validation using the &lt;em>Quick Edit&lt;/em> view.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Customize a component's event-handling code (for example, to return an Alias value to control navigation) using the&#xD;
        &lt;em>Quick Edit&lt;/em> view.&#xD;
    &lt;/li>&#xD;
&lt;/ol>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;test&quot; href=&quot;#Top&quot; name=&quot;test&quot;>Test the Page&lt;/a>&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    Select &lt;em>Run As &amp;gt; Run on Server&lt;/em> from Page Designer's menu bar to test the page. Note that you must select a&#xD;
    WebSphere v5.1 or later server as your target Test Environment in order to support the SDOs in your Web page. After the&#xD;
    server starts, the page is opened in a browser view and ready to be tested.&#xD;
&lt;/p>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;more_info&quot; href=&quot;#Top&quot; name=&quot;more_info&quot;>More Information&lt;/a>&amp;nbsp;&#xD;
&lt;/h3>&#xD;
&lt;ol>&#xD;
    &lt;li>&#xD;
        Start Rational Application Developer v6.0.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        In the menu bar, select &lt;em>Help &amp;gt; Tutorials Gallery&lt;/em>.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Explore one or more of the following sections: &lt;em>Watch and Learn&lt;/em>, &lt;em>Play and Learn&lt;/em> and &lt;em>Do and&#xD;
        Learn&lt;/em>.&#xD;
    &lt;/li>&#xD;
&lt;/ol>&lt;br />&#xD;
&lt;br /></mainDescription>
</org.eclipse.epf.uma:ContentDescription>
