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