介绍
RAD 6.0 中的 Web 开发环境提供了一套综合工具,用以快速构建 Web 用户界面。 这些工具包括 Web 站点设计器和页面设计器以及用来简化复杂 Web
页面创建工作的各种向导。本文档描述开发方法、确定受支持的页面类型并强调有助于创建 Web 页面的功能部件,从而提供关于如何有效使用这些工具构建 Web 用户界面的指南。
开发方法
虽然您可以立即使用页面设计器在您的用户界面中构建每个 Web 页面,但 RAD 6.0 还是提倡自上而下的开发方法,即从 Web 站点设计器开始。它的导航编辑器使您能够:
-
定义 Web 站点的导航结构:
首先构建层次结构图,表示您的 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 客户端组件包括:
-
数据网格:在一个表格中显示关系数据源中的记录或 JavaBean 数组中的元素。
-
图表:通过条形图、饼图或折线图来展示数据。要使用这些图表,必须在浏览器上安装 Macromedia Flash 插件。
-
树形视图:通过树形结构显示分层的数据。
-
Web Service:允许 Faces 页面从现有的 Web Service 中检索数据,而无需刷新页面。
下表概括了每种页面支持的特性,并可作为指南来确定最能满足 Web 应用程序的用户界面需求的类型。
页面类型
|
标记语言
|
级联样式表支持
|
页面模板支持
|
XML 风格语法
|
脚本编制支持
|
SDO 数据访问(*)
|
HTML
|
HTML 4.01
HTML 4.01 Frameset
Compact HTML 1.0
XHTML 1.0 或 1.1
XHTML 1.0 Frameset
WML 1.3
|
是
是
否
是
是
否
|
是
否
否
是
否
否
|
N/A
|
JavaScript
|
N/A
|
JSP
|
HTML 4.01
HTML 4.01 Frameset
Compact HTML 1.0
XHTML 1.0 或 1.1
XHTML 1.0 Frameset
WML 1.3
|
是
是
否
是
是
否
|
是
否
否
是
否
否
|
否
否
否
是
是
是
|
JavaScript
Java Scriptlet
Custom Tag
|
是
|
Struts JSP
|
HTML 4.01
HTML 4.01 Frameset
XHTML 1.0 或 1.1
XHTML 1.0 Frameset
|
是
是
是
是
|
是
否
是
否
|
否
否
是
是
|
JavaScript
Java Scriptlet
Custom Tag
|
是
|
Faces JSP
|
HTML 4.01
XHTML 1.0 或 1.1
|
是
是
|
是
是
|
否
是
|
JavaScript
Java Scriptlet
Custom Tag
Java Snippet
|
是
|
具有客户端高速缓存的 Faces JSP
|
HTML 4.01
XHTML 1.0 或 1.1
|
是
是
|
是
是
|
否
是
|
JavaScript
Java Scriptlet
Custom Tag
Java Snippet
Macromedia Flash
|
是(具有客户端数据高速缓存)
|
* SDO 数据访问需要以 WAS V5.1 作为部署目标
表 1 - 页面类型特性
Web 应用程序适用性
实施 Web 用户界面时使用的页面类型主要受正在开发的 Web 应用程序的类型的影响。对于静态 Web 应用程序,选择很简单,因为 HTML 页面类型是唯一的选项。 对于动态 Web 应用程序,HTML 页面和 JSP
页面都可以使用。此外,如果您在使用 Struts 或 JSF 框架开发动态 Web 应用程序,您将因使用特定于这些技术的用户界面页面类型而获益。这将允许您利用该工具提供的专门支持,并轻易地构造您的用户界面。表 2 显示了每种页面对于静态
Web 应用程序、动态 Web 应用程序以及使用 Struts 和 JSF 框架的 Web 应用程序的适用性。
页面类型
|
静态 Web 应用程序
|
动态 Web 应用程序(不基于框架)
|
Struts Web 应用程序
|
JSF Web 应用程序
|
HTML
|
是
|
是
|
是
|
是
|
JSP
|
否
|
是
|
是
|
是
|
Struts JSP
|
否
|
否
|
是(推荐)
|
否
|
Faces JSP
|
否
|
否
|
是(具有集成库)
|
是(推荐)
|
具有客户端高速缓存的 Faces JSP
|
否
|
否
|
是(具有集成库)
|
是(推荐)
|
表 2 - 页面类型适用性
页面编辑
页面设计器是 RAD 6.0 中用来编辑 Web 页面的工具。它提供一个中央编辑器视图,使您能够以可视 WYSIWYG 或基于文本源代码的方式创建页面。该工具与其他视图协同工作,支持开发不同类型的 Web
页面。特别地,以下视图大大方便了页面编辑:
“调色板”视图
“调色板”视图提供一套丰富的现成 UI 组件,这些组件可以放入页面中。该视图将这些组件分到各个拖动器中,功能相关的组件分为一组。例如,标准 HTML
格式元素(如按钮、文本字段和下拉框)分组到格式标记拖动器。“调色板”视图中显示的抽取器列表因所编辑页面的类型而异。表 3
列出了针对每个受支持的页面类型显示的缺省拖动器。通过添加、删除、隐藏或取消隐藏拖动器和组件,可以分别定制“调色板”和大多数拖动器。有关每个拖动器及其缺省内容的描述,请参阅产品文档。
调色板拖动器
|
HTML
|
JSP
|
Struts JSP
|
Faces JSP
|
具有客户端高速缓存的 Faces JSP
|
HTML 标记
|
X
|
X
|
X
|
X
|
X
|
格式标记
|
X
|
X
|
X
|
|
|
页面模板
|
X
|
X
|
X
|
X
|
X
|
Web 站点导航
|
X
|
X
|
X
|
X
|
X
|
门户网站
|
X
|
X
|
X
|
X
|
X
|
JSP 标记
|
|
X
|
X
|
X
|
X
|
数据
|
|
X
|
X
|
X
|
X
|
Faces 组件
|
|
|
|
X
|
X
|
Faces 客户机组件
|
|
|
|
|
X
|
Struts HTML 标记
|
|
|
X
|
|
|
Struts Bean 标记
|
|
|
X
|
|
|
Struts 逻辑标记
|
|
|
X
|
|
|
Struts 嵌套标记
|
|
|
隐藏
|
|
|
Struts 平铺标记
|
|
|
隐藏
|
|
|
表 3 - 缺省调色板拖动器(按页面类型)
“快速编辑”视图
本视图使您能够将 JavaScript 代码片段快速添加到页面中。当您选择页面上的某一组件时,“快速编辑”视图的左窗格中会显示适合该组件的可能事件的列表。然后您就可以选择事件,并以下面的其中一种方式为其添加脚本:
-
在右窗格的脚本编辑器中直接输入脚本。
-
右键单击脚本编辑器,选择插入片段并从所提供的上下文相关列表中选择片段。
资源
有关 Web 站点设计器和页面设计器的详细信息,请参阅产品文档:
-
启动 Rational Application Developer v6.0。
-
在菜单栏中选择帮助 > 帮助内容。
-
展开开发 Web 应用程序。
-
浏览 Web 站点设计或 Web 页面设计。
|