<?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="_xyvzQsezEdmYjcUf1_oIew" name="building_web_user_interfaces,2.1236886661583098E-303" guid="_xyvzQsezEdmYjcUf1_oIew" changeDate="2005-10-18T21:05:45.078-0700" version="7.1.0">
  <mainDescription>&lt;h3>&#xD;
    &lt;a id=&quot;introduction&quot; name=&quot;introduction&quot;>&lt;/a>Introduction&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    The Web development environment in RAD 6.0 provides a comprehensive set of tools to rapidly build Web user interfaces.&#xD;
    It includes &lt;em>Web Site Designer&lt;/em> and &lt;em>Page Designer&lt;/em> and numerous wizards to simplify the creation of&#xD;
    complex Web pages. This document provides guidelines on how to effectively use these tools to build Web user interfaces&#xD;
    by describing a development approach, identifying the page types supported and highlighting the features that&#xD;
    facilitate the creation of a Web page.&#xD;
&lt;/p>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;introduction&quot; name=&quot;introduction&quot;>&lt;/a>Development Approach&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    Although you can immediately use &lt;em>Page Designer&lt;/em> to build each individual Web page in your user interface, RAD&#xD;
    6.0 promotes a top-down development approach using &lt;em>Web Site Designer&lt;/em> as the starting point. Its&#xD;
    &lt;em>Navigation&lt;/em> editor allows you to:&#xD;
&lt;/p>&#xD;
&lt;ul>&#xD;
    &lt;li>&#xD;
        Define the navigation structure of your Web site: &#xD;
        &lt;p>&#xD;
            Start by building a hierarchical diagram representing the structure of your Web site. A &lt;em>Site&lt;/em> drawer is&#xD;
            available on the &lt;em>Palette&lt;/em> view to allow you to drag and drop new or existing pages and projects into&#xD;
            the diagram and organize them into groups. The editor allows you to easily add, delete and re-arrange pages in&#xD;
            a visual manner. Creating a navigation diagram enables &lt;em>Web Site Designer&lt;/em> to automatically identify and&#xD;
            keep track of the navigation links between your Web pages and generate a site map. Later, when composing an&#xD;
            individual page using &lt;em>Page Designer&lt;/em>, you can add navigation elements to it, such as a navigation bar&#xD;
            or menu, which you can customize to show only those links that are appropriate for it based on the site&#xD;
            structure (for instance, you can show only links to Top, Parent, Sibling and First Child).&#xD;
        &lt;/p>&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Apply a page template: &#xD;
        &lt;p>&#xD;
            A page template defines visual elements and layout common to all of your pages and allows you to apply a&#xD;
            consistent look and feel to your Web site. You can create one using a wizard either while creating your Web&#xD;
            project or separately thereafter. The &lt;em>Navigation&lt;/em> editor allows you to easily apply a template to&#xD;
            selected or all pages in your diagram. A suggested good practice is to include your navigation elements in the&#xD;
            template and apply it to all pages in order to get consistent navigation controls across your entire Web site.&#xD;
        &lt;/p>&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Select the page type to use for each Web page: &#xD;
        &lt;p>&#xD;
            Double-click on a page to launch the &lt;em>Create a page&lt;/em> wizard. It will allow you to choose one of the&#xD;
            supported page types (see Page Type Selection), specify initial page properties and open it in the &lt;em>Page&#xD;
            Designer&lt;/em> editor. You can now compose and edit the Web page content. Note that a &lt;em>Web Site&#xD;
            Navigation&lt;/em> drawer is automatically available in the &lt;em>Palette&lt;/em> view to allow you to drag and drop&#xD;
            navigation elements to the page.&#xD;
        &lt;/p>&#xD;
    &lt;/li>&#xD;
&lt;/ul>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;introduction&quot; name=&quot;introduction&quot;>&lt;/a>Page Type Selection&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    RAD 6.0 supports the building of Web user interfaces using HTML, JSP and Faces JSP technology. Each represents an&#xD;
    implementation choice that addresses the requirements of different types of Web applications. Each technology also&#xD;
    defines a page type that supports different Web user interface features. When building a Web user interface, it is&#xD;
    important, therefore, to understand the features each page type supports and to know if it is suitable for the type of&#xD;
    Web application being developed. The sections below identify the Web user interface features supported by the different&#xD;
    page types in RAD 6.0 and specifies what page types can be used in static, dynamic, Struts and JavaServer Faces (JSF)&#xD;
    framework based Web applications.&#xD;
&lt;/p>&lt;strong>&lt;a id=&quot;introduction&quot; name=&quot;introduction&quot;>&lt;/a>Supported User Interface Features&lt;/strong> &#xD;
&lt;p>&#xD;
    The different page types offered by RAD 6.0 to implement Web user interfaces can be grouped into three categories:&#xD;
    HTML, JSP and Faces JSP. The JSP page type further distinguishes between a simple JSP file and a Struts JSP page.&#xD;
    Likewise, a Faces JSP page type can be either a basic Faces JSP or a Faces JSP with client-side caching. The different&#xD;
    page types are described below.&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    &lt;strong>HTML&lt;/strong>&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    This page type allows you to build a basic HTML page and also supports other markup languages (see Table 1 - Page Type&#xD;
    Features). Typical HTML features such as Frameset, Cascading Style Sheet and JavaScript scripting are also supported.&#xD;
    In addition, the tool allows the definition and use of page templates to support creating a consistent look and feel&#xD;
    across Web pages.&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    &lt;strong>JSP&lt;/strong>&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    The JSP page type is intended to support user interfaces implemented using JSP technology (RAD 6.0 supports the JSP 2.0&#xD;
    standard). All of the features of a basic HTML page are available and complemented by JSP scripting (Java Scriptlet)&#xD;
    and action (Custom Tag) technology. The tool allows the definition of a JSP Fragment to factor out common parts of a&#xD;
    page into a separate file that can be included as appropriate in other JSP pages. Also supported is the access of&#xD;
    back-end data using Service Data Object (SDO) technology (see &lt;a class=&quot;elementLinkWithType&quot;&#xD;
    href=&quot;./../../../tech.rad/guidances/concepts/web_application_frameworks_1A457BEE.html&quot;&#xD;
    guid=&quot;1.099460392705072E-303&quot;>Concept: Web Application Frameworks&lt;/a> for a description of SDOs).&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    &lt;strong>Struts JSP&lt;/strong>&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    A Struts JSP page extends a simple JSP by automatically including support for Struts-specific elements (see Concepts:&#xD;
    Web Application Frameworks for a description of Struts). It is intended to be used to develop Web user interfaces for&#xD;
    applications implemented using the Struts framework. Specifically, the tool automatically includes access to the Struts&#xD;
    HTML (struts-html.tld) and Bean (struts-bean.tld) tag libraries and allows the inclusion of fields from an ActionForm&#xD;
    bean directly onto the page. It will also give you the option to add other Struts libraries.&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    &lt;strong>Faces JSP&lt;/strong>&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    The Faces JSP page type is a JSP page specifically designed for Web user interfaces implemented using JSF technology&#xD;
    (see &lt;a class=&quot;elementLinkWithType&quot;&#xD;
    href=&quot;./../../../tech.rad/guidances/concepts/web_application_frameworks_1A457BEE.html&quot;&#xD;
    guid=&quot;1.099460392705072E-303&quot;>Concept: Web Application Frameworks&lt;/a> for a description of JSF). It provides access to&#xD;
    the JSF core tag library and pre-defined user interface components (Faces Components) that can be dragged and dropped&#xD;
    onto the page. In addition, a Faces JSP supports scripting using Java snippets, for example, to specify the handling of&#xD;
    user interface component events.&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    &lt;strong>Faces JSP with Client-Side Caching&lt;/strong>&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    This type of page extends the Faces JSP by providing user interface components whose data can be cached on the client&#xD;
    side. Specifically, client-side caching enables you to bind a component to JavaScript variables as opposed to&#xD;
    server-side data. This allows you to build better performing Web pages because the number of round trips between the&#xD;
    client and the server is reduced. The provided Faces client components include:&#xD;
&lt;/p>&#xD;
&lt;ul>&#xD;
    &lt;li>&#xD;
        Data Grid: Displays records from a relational data source or elements from a JavaBean array in a table.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Graph: Presents data in a bar graph, pie chart or line graph. The Macromedia Flash plug-in must be installed on the&#xD;
        browser to use the graphs.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Tree View: Displays hierarchical data in a tree structure.&#xD;
    &lt;/li>&#xD;
    &lt;li>&#xD;
        Web Service: Allows Faces page to retrieve data from an existing Web Service without refreshing the page.&#xD;
    &lt;/li>&#xD;
&lt;/ul>&#xD;
&lt;p>&#xD;
    The table below summarizes the features supported by each page type and can be used as a guide to determine the type&#xD;
    that best meets a Web application's user interface requirements.&#xD;
&lt;/p>&#xD;
&lt;center>&#xD;
    &lt;table cellspacing=&quot;0&quot; cellpadding=&quot;5&quot; width=&quot;700&quot; border=&quot;1&quot;>&#xD;
        &lt;tbody>&#xD;
            &lt;tr valign=&quot;top&quot; bgcolor=&quot;#CCCCCC&quot;>&#xD;
                &lt;th width=&quot;100&quot;>&#xD;
                    Page Type&#xD;
                &lt;/th>&#xD;
                &lt;th width=&quot;200&quot;>&#xD;
                    Markup Language&#xD;
                &lt;/th>&#xD;
                &lt;th width=&quot;50&quot;>&#xD;
                    Cascading Style Sheet Support&#xD;
                &lt;/th>&#xD;
                &lt;th width=&quot;50&quot;>&#xD;
                    Page Template Support&#xD;
                &lt;/th>&#xD;
                &lt;th width=&quot;50&quot;>&#xD;
                    XML Style Syntax&#xD;
                &lt;/th>&#xD;
                &lt;th width=&quot;100&quot;>&#xD;
                    ScriptingSupport&#xD;
                &lt;/th>&#xD;
                &lt;th width=&quot;140&quot;>&#xD;
                    SDO Data Access (*)&#xD;
                &lt;/th>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    HTML&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        HTML 4.01&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        HTML 4.01 Frameset&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Compact HTML 1.0&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        XHTML 1.0 or 1.1&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        XHTML 1.0 Frameset&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        WML 1.3&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    N/A&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    JavaScript&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    N/A&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    JSP&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        HTML 4.01&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        HTML 4.01 Frameset&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Compact HTML 1.0&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        XHTML 1.0 or 1.1&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        XHTML 1.0 Frameset&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        WML 1.3&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        JavaScript&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Java Scriptlet&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Custom Tag&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Struts JSP&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        HTML 4.01&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        HTML 4.01 Frameset&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        XHTML 1.0 or 1.1&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        XHTML 1.0 Frameset&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        JavaScript&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Java Scriptlet&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Custom Tag&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Faces JSP&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        HTML 4.01&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        XHTML 1.0 or 1.1&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        JavaScript&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Java Scriptlet&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Custom Tag&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Java Snippet&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Faces JSP with client side caching&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        HTML 4.01&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        XHTML 1.0 or 1.1&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        No&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Yes&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &lt;p>&#xD;
                        JavaScript&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Java Scriptlet&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Custom Tag&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Java Snippet&#xD;
                    &lt;/p>&#xD;
                    &lt;p>&#xD;
                        Macromedia Flash&#xD;
                    &lt;/p>&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes (with client side data caching)&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
        &lt;/tbody>&#xD;
    &lt;/table>&#xD;
&lt;/center>&#xD;
&lt;p>&#xD;
    * SDO Data Access requires WAS v5.1 as deployment target&#xD;
&lt;/p>&#xD;
&lt;p align=&quot;center&quot;>&#xD;
    &lt;strong>Table 1 - Page Type Features&lt;/strong>&lt;br />&#xD;
&lt;/p>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;web_application&quot; href=&quot;./../../../tech.rad/guidances/concepts/web_application_frameworks_1A457BEE.html&quot;&#xD;
    guid=&quot;1.099460392705072E-303&quot; name=&quot;web_application&quot;>&lt;/a>Web Application Applicability&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    &lt;br />&#xD;
     The type of page to use in implementing a Web user interface is influenced primarily by the type of Web application&#xD;
    being developed. For static Web applications, the choice is straightforward, as the HTML page type is the only option.&#xD;
    For dynamic Web application, both HTML and JSP pages can be used. In addition, if your are developing a dynamic Web&#xD;
    application using the Struts or JSF framework, you will benefit from using the user interface page types specific to&#xD;
    these technologies. This will allow you to take advantage of the specialized support provided by the tool and easily&#xD;
    construct your user interface. Table 2 shows the applicability of each page type for static Web applications, dynamic&#xD;
    Web applications and Web applications using the Struts and JSF frameworks.&lt;br />&#xD;
&lt;/p>&#xD;
&lt;center>&#xD;
    &lt;table cellspacing=&quot;0&quot; cellpadding=&quot;5&quot; width=&quot;700&quot; border=&quot;1&quot;>&#xD;
        &lt;tbody>&#xD;
            &lt;tr valign=&quot;top&quot; bgcolor=&quot;#CCCCCC&quot;>&#xD;
                &lt;th>&#xD;
                    Page Type&#xD;
                &lt;/th>&#xD;
                &lt;th>&#xD;
                    Static Web Application&#xD;
                &lt;/th>&#xD;
                &lt;th>&#xD;
                    Dynamic Web Application (Non-framework based)&#xD;
                &lt;/th>&#xD;
                &lt;th>&#xD;
                    Struts Web Application&#xD;
                &lt;/th>&#xD;
                &lt;th>&#xD;
                    JSF Web Application&#xD;
                &lt;/th>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    HTML&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    JSP&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    No&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Struts JSP&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    No&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    No&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes (recommended)&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    No&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Faces JSP&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    No&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    No&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes (with integration library)&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes (recommended)&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Faces JSP with client-side caching&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    No&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    No&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes (with integration library)&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    Yes (recommended)&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
        &lt;/tbody>&#xD;
    &lt;/table>&#xD;
&lt;/center>&#xD;
&lt;p align=&quot;center&quot;>&#xD;
    &lt;strong>Table 2 - Page Type Applicability&lt;/strong>&#xD;
&lt;/p>&#xD;
&lt;h3>&#xD;
    &lt;a id=&quot;web_application&quot; href=&quot;./../../../tech.rad/guidances/concepts/web_application_frameworks_1A457BEE.html&quot;&#xD;
    guid=&quot;1.099460392705072E-303&quot; name=&quot;web_application&quot;>&lt;/a>Page Editing&#xD;
&lt;/h3>&#xD;
&lt;p>&#xD;
    &lt;em>Page Designer&lt;/em> is the tool in RAD 6.0 used to edit a Web page. It provides a central editor view that allows&#xD;
    you to create a page in a either a visual WYSIWYG or textual source code based manner. The tool works in conjunction&#xD;
    with other views to support the development of different Web page types. In particular, the following views greatly&#xD;
    facilitate page editing:&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    &lt;strong>Palette View&lt;/strong>&#xD;
&lt;/p>&#xD;
&lt;p>&#xD;
    The Palette view provides a rich set of ready-to-use UI components that you can drop onto a page. It organizes them&#xD;
    into drawers that group functionally related components together. For instance, standard HTML form elements such as&#xD;
    buttons, text fields and drop-down boxes are grouped into a &lt;em>Form Tags&lt;/em> drawer. The list of drawers displayed in&#xD;
    the Palette view varies depending on the type of page being edited. Table 3 lists the default drawers shown for each&#xD;
    supported page type. You can customize both the Palette and most drawers by adding, deleting, hiding or un-hiding&#xD;
    drawers and components, respectively. For a description of each drawer and their default content, refer to the product&#xD;
    documentation.&#xD;
&lt;/p>&#xD;
&lt;center>&#xD;
    &lt;table cellspacing=&quot;0&quot; cellpadding=&quot;5&quot; width=&quot;700&quot; border=&quot;1&quot;>&#xD;
        &lt;tbody>&#xD;
            &lt;tr valign=&quot;top&quot; bgcolor=&quot;#CCCCCC&quot;>&#xD;
                &lt;th>&#xD;
                    Palette Drawer&#xD;
                &lt;/th>&#xD;
                &lt;th>&#xD;
                    HTML&#xD;
                &lt;/th>&#xD;
                &lt;th>&#xD;
                    JSP&#xD;
                &lt;/th>&#xD;
                &lt;th>&#xD;
                    Struts JSP&#xD;
                &lt;/th>&#xD;
                &lt;th>&#xD;
                    Faces JSP&#xD;
                &lt;/th>&#xD;
                &lt;th>&#xD;
                    Faces JSP with client-side caching&#xD;
                &lt;/th>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    HTML Tags&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Form Tags&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Page Template&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Web Site Navigation&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Portal&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    JSP Tags&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Data&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Faces Components&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Faces Client Components&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Struts HTML Tags&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Struts Bean Tags&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Struts Logic Tags&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    X&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Struts Nested Tags&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    hidden&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
            &lt;tr valign=&quot;top&quot;>&#xD;
                &lt;td>&#xD;
                    Struts Tiles Tags&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td align=&quot;middle&quot;>&#xD;
                    hidden&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
                &lt;td>&#xD;
                    &amp;nbsp;&#xD;
                &lt;/td>&#xD;
            &lt;/tr>&#xD;
        &lt;/tbody>&#xD;
    &lt;/table>&#xD;
&lt;/center>&#xD;
&lt;p align=&quot;center&quot;>&#xD;
    &lt;strong>Table 3 - Default Palette Drawers by Page Type&lt;/strong>&#xD;
&lt;/p>&#xD;
&lt;p align=&quot;left&quot;>&#xD;
    &lt;strong>Quick Edit View&lt;/strong>&#xD;
&lt;/p>&#xD;
&lt;p align=&quot;left&quot;>&#xD;
    This view allows you to quickly add JavaScript code snippets to your page. When you select a component on your page, a&#xD;
    list of possible events appropriate for it is displayed in the left pane of the Quick Edit view. You can then select an&#xD;
    event and add a script for it in one of the following ways:&#xD;
&lt;/p>&#xD;
&lt;div align=&quot;left&quot;>&#xD;
    &lt;ul>&#xD;
        &lt;li>&#xD;
            Enter the script directly into the script editor in the right pane.&#xD;
        &lt;/li>&#xD;
        &lt;li>&#xD;
            Right-click the script editor, select &lt;em>Insert Snippet&lt;/em> and choose a snippet from the context-based list&#xD;
            provided.&#xD;
        &lt;/li>&#xD;
    &lt;/ul>&#xD;
&lt;/div>&#xD;
&lt;h3 align=&quot;left&quot;>&#xD;
    &lt;a id=&quot;web_application&quot; href=&quot;./../../../tech.rad/guidances/concepts/web_application_frameworks_1A457BEE.html&quot;&#xD;
    guid=&quot;1.099460392705072E-303&quot; name=&quot;web_application&quot;>&lt;/a>Resources&#xD;
&lt;/h3>&#xD;
&lt;p align=&quot;left&quot;>&#xD;
    For detailed information on &lt;em>Web Site Designer&lt;/em> and &lt;em>Page Designer&lt;/em>, refer to the product documentation:&#xD;
&lt;/p>&#xD;
&lt;div align=&quot;left&quot;>&#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; Help Contents&lt;/em>.&#xD;
        &lt;/li>&#xD;
        &lt;li>&#xD;
            Expand &lt;em>Developing Web Applications&lt;/em>.&#xD;
        &lt;/li>&#xD;
        &lt;li>&#xD;
            Explore &lt;em>Web Site Design&lt;/em> or &lt;em>Web Page Design&lt;/em>.&#xD;
        &lt;/li>&#xD;
    &lt;/ol>&#xD;
&lt;/div></mainDescription>
</org.eclipse.epf.uma:ContentDescription>
