指南:构建 Web 用户界面主题简介
RAD 6.0 中的 Web 开发环境提供了一套综合工具,用以快速构建 Web 用户界面。这些工具包括 Web 站点设计器和页面设计器以及用来简化复杂 Web 页面创建工作的各种向导。本文档描述开发方法、确定受支持的页面类型并强调有助于创建 Web 页面的功能部件,从而提供关于如何有效使用这些工具构建 Web 用户界面的指南。 开发方法
虽然您可以立即使用页面设计器在您的用户界面中构建每个 Web 页面,但 RAD 6.0 还是提倡自上而下的开发方法,即从 Web 站点设计器开始。它的导航编辑器使您能够:
首先构建层次结构图,表示您的 Web 站点的结构。调色板视图中提供站点拖动器,使您可以将新的或现有的页面和项目拖放到该图中,并将它们分为几组。该编辑器使您能轻易地以可视方式添加、删除并重新安排页面。创建导航图,这样 Web 站点设计器就能够自动确定并跟踪您的 Web 站点之间的导航链接,并生成站点图。以后使用页面设计器制作单个页面时,您可以向该页面添加导航元素,如导航栏或菜单,您可以根据站点结构将其进行定制,以只显示适合它的链接(例如,您可以只显示“顶级”、“上级”、“同级”和“第一个下级”的链接)。 页面模板定义了所有页面通用的可视元素和布局,并使您能够对 Web 站点应用统一的外观。您可以在创建 Web 项目时用向导创建一个模板,或在以后独立创建。导航编辑器使您能够轻松地将模板应用于图中的所选页面或全部页面。一个建议的好方法是,在模板中包含导航元素,并将其应用于全部页面,以在整个 Web 站点中获得统一的导航控件。 双击某个页面,启动创建页面向导。它将使您能选择一个受支持的页面类型(请参阅“页面类型选择”),指定初始页面属性并在页面设计器编辑器中打开。现在您可以制作并编辑 Web 页面内容。请注意,调色板视图中自动提供 Web 站点导航拖动器,使您能够将导航元素拖放到页面上。 页面类型选择
RAD 6.0 支持使用 HTML、JSP 和 Faces JSP 技术构建 Web 用户界面。每一种技术都代表一种可处理不同类型的 Web 应用程序的需求的实施选择。每种技术还定义了支持不同 Web 用户界面特性的一种页面。因此,构建 Web 用户界面时,理解每种页面支持的特性并了解它是否适于正在开发的 Web 应用程序的类型就很重要。以下几部分确定了 RAD 6.0 中不同页面类型支持的 Web 用户界面功能部件,并指定可以在基于静态、动态、Struts 以及 JavaServer Faces(JSF)框架的 Web 应用程序中使用的页面类型。 受支持的用户界面功能部件![]() RAD 6.0 提供的用于实施 Web 用户界面的不同页面类型可以分为三类:HTML、JSP 和 Faces JSP。JSP 页面类型进一步分为简单的 JSP 文件和 Struts JSP 页面。类似地,Faces JSP 页面可以是基本 Faces JSP 类型或具有客户端高速缓存的 Faces JSP 类型。这些不同的页面类型描述如下。 HTML 这种页面允许您构建基本 HTML 页面,也支持其它标记语言(请参阅表 1 - 页面类型特性)。也支持通常的 HTML 特性,例如 Frameset、级联样式表和 JavaScript 脚本编制。此外,该工具还允许定义和使用页面模板,以支持对各 Web 页面创建一致的外观。 JSP JSP 页面类型旨在支持使用 JSP 技术实施的用户界面(RAD 6.0 支持 JSP 2.0 标准)。基本 HTML 页面的所有特性都可用,另外还可使用 JSP 脚本编制(Java Scriptlet)和操作(Custom Tag)技术。该工具允许定义 JSP 分段以分解出页面的公共部分,放到一个单独文件中,使其可适当地包括在其它 JSP 页面中。还支持使用服务数据对象(Service Data Object,SDO)技术访问后端数据(请参阅概念:Web 应用程序框架中关于 SDO 的描述)。 Struts JSP Struts JSP 页面扩展了简单的 JSP,方法是自动包括对特定于 Struts 的元素的支持(请参阅“概念:Web 应用程序框架”中关于 Struts 的描述)。它旨在用于为使用 Struts 框架实施的应用程序开发 Web 用户界面。具体而言,该工具自动包含对 Struts HTML(struts-html.tld)和 Bean(struts-bean.tld)标记库的访问权,并允许将 ActionForm Bean 中的字段直接包含到该页面中。它还会允许您选择添加其它的 Struts 资料库。 Faces JSP Faces JSP 页面类型是特别为使用 JSF 技术实施的 Web 用户界面而设计的 JSP 页面(请参阅概念:Web 应用程序框架中关于 JSF 的描述)。它提供对 JSF 核心标记库和预定义的用户界面组件(Faces 组件)的访问权,它们可以拖放到该页面上。此外,Faces JSP 还支持使用 Java 片段(举例)的脚本编制技术,指定对用户界面组件事件的处理。 具有客户端高速缓存的 Faces JSP 这种页面扩展了 Faces JSP,方法是提供可在客户端高速缓存数据的用户界面组件。特别地,客户端高速缓存使您能够将组件绑定到 JavaScript 变量(与服务器端数据相对)。这允许您构建表现更好的 Web 页面,因为客户端和服务器之间的通信往返数减少了。提供的 Faces 客户端组件包括:
下表概括了每种页面支持的特性,并可作为指南来确定最能满足 Web 应用程序的用户界面需求的类型。
* SDO 数据访问需要以 WAS V5.1 作为部署目标 表 1 - 页面类型特性
Web 应用程序适用性
表 2 - 页面类型适用性
页面编辑
页面设计器是 RAD 6.0 中用来编辑 Web 页面的工具。它提供一个中央编辑器视图,使您能够以可视 WYSIWYG 或基于文本源代码的方式创建页面。该工具与其它视图协同工作,支持开发不同类型的 Web 页面。特别地,以下视图大大方便了页面编辑: “调色板”视图 “调色板”视图提供一套丰富的现成 UI 组件,这些组件可以放入页面中。该视图将这些组件分到各个拖动器中,功能相关的组件分为一组。例如,标准 HTML 格式元素(如按钮、文本字段和下拉框)分组到格式标记拖动器。“调色板”视图中显示的抽屉列表因所编辑页面的类型而异。表 3 列出了针对每个受支持的页面类型显示的缺省拖动器。通过添加、删除、隐藏或取消隐藏拖动器和组件,可以分别定制“调色板”和大多数拖动器。有关每个拖动器及其缺省内容的描述,请参阅产品文档。
表 3 - 缺省调色板拖动器(按页面类型)
“快速编辑”视图 本视图使您能够将 JavaScript 代码片段快速添加到页面中。当您选择页面上的某一组件时,“快速编辑”视图的左窗格中会显示适合该组件的可能事件的列表。然后您就可以选择事件,并以下面的其中一种方式为其添加脚本:
资源
有关 Web 站点设计器和页面设计器的详细信息,请参阅产品文档:
|
Rational Unified Process
|