4.1 一切尽在组件中
本章内容
l UI
组件基础
l IDE
组件开发
l
标准输出组件
现在,已经知道了何为JSF,并熟悉了一些基本概念,那么该开始学习使用标准组件了。在本章和下一章中,我们将讨论
所有JSF 实现都包括的标准组件。它们提供了构建基于HTML的Web应用所必需的基本功能集(你也可以从Web容器供应商、
工具厂商和第三方开发商那里获得附加组件)。
在本章,首先概述所有组件,详细讨论JSP集成,并且讨论那些不涉及用户输入的组件。在下一章,将主要集中讨论
标准的输入组件,以及可以显示、编辑来自数据源的表格化数据的 HtmlDataTable组件。这两章的目标是,帮助你使用这
些组件来开发用户界面。如果是前端开发人员,这两章是不可或缺的,因为你大部分时间都是和它们打交道。如果是后端
开发人员,理解这些组件如何工作也将有助于你开发自己的组件,并有助于与你的代码进行平滑集成。
4.1 一切尽在组件中
JSF最核心的特征就是对UI 组件的支持— — 这也是它与其他很多Web开发框架有别之处。JSF本身提供了支持典型的HT
ML UI的标准组件。它们包括用于文本显示、文本输入字段、下拉列表、表单、面板等等功能的部件。这些组件均列于表
4-1中。
紧跟每个组件名称的下一列是显示名称列。它们是在IDE中看到的用户友好的名称。如你所见,这些名称可能因不同
的IDE而不同。我们未列出那些通常不会出现在组件选项板中的组件的,或者在写作本书时还没有合适的例子的组件的显
示名称。不管IDE使用什么显示名称,都产生标准的代码(换言之,任何生成的JSP 或者 Java 代码看起来都类似本书中
的代码)。
你可能注意到,所有这些标准组件都类似于标准的HTML 控件。这并不奇怪,因为JSF本身的意图就是提供丰富的部件
来构建基本的HTML UI。所有具有可视化表达的标准组件都能够产生标准的HTML 4.01标记,并且能够很好地与CSS和JavaS
cript集成(如果希望标准组件能够支持旧版本的浏览器,你可能就不那么幸运了— — 请寻求其他第三方的替代方案)。
表
4-1 JSF
包括多个标准
UI
组件以构建
HTML
视图。具有相似功能的相关组件被组织成组件族(
family
)
组件族
1
组 件
可能的IDE显示名称
说 明
Column
UIColumn
—
表格列。用于配置父组件HtmlDat
a- Table组件的模板列
Command
HtmlCommandButton
Command-Button,
Button
表单按钮,它是动作源并可以执行
动作方法
HtmlCommandLink
Command-Link,
Link Action
超链接,它是动作源并可以执行
动作方法
Data
HtmlDataTable
Data Grid,Data T
able
具有可定制的表头、表脚和其他属
性的数据感知表格。可以连接到多种
类型的数据源
Form
HtmlForm
—
输入表单;必须用它封装所有输入
组件
(续)
. 从技术上讲,每个组件族都具有前缀“ javax.faces.” 所以,“ Form” 族其实叫javax.faces.Form。当你在Java
Graphic
HtmlGraphicImage
Image
基于其URL显示图像
Input
HtmlInputHidden
Hidden Field
类型为“ hidden” 的输入域
HtmlInputSecret
Secret Field
类型为“ password” 的输入域
HtmlInputText
Text Field
类型为 “ text” 的输入域
HtmlInputTextarea
Multi Line Text A
rea
文本区域(多行输入域)
Message
HtmlMessage
Display Error,
Inline Message
显示针对某个特定组件的消息
Messages
HtmlMessages
Message List
显示所有消息(组件相关或者应用
相关的)
Output
HtmlOutputFormat
Formatted Output
输出参数化文本
HtmlOutputLabel
Component Label
输入域的文本标注
HtmlOutputLink
Hyperlink
未关联到用户命令的超链接
HtmlOutputText
Output Text
普通文本,具有可选的CSS格式
UIOutput
—
普通文本(无格式)。用于封装HT
ML标记和其他定制标签
Parameter
UIParameter
—
不可视组件,用于配置其他组件
Panel
HtmlPanelGrid
Grid Panel
具有可定制的表头、表脚和其他属
性的表格
HtmlPanelGroup
Panel-Group Box,
Group Box
用于组织组件以便其他组件内部一
起使用,并且可以应用公共样式或者
显示/隐藏整个一组组件
Select-
Boolean
HtmlSelectBooleanCheckbox
Check Box,Checkb
ox
单选框
Select-
Item
UISelectItem
—
表示用于SelectMany 和 SelectOn
e组件的一个单一选项或者选项组
Select- Ite
ms
UISelectItems
—
表示用于SelectMany和 SelectOne
组件中的选项集合(Collection)或
者选项组
Select-
Many
HtmlSelectManyCheckbox
Check Box Group
复选框列表的表格,并分为一组
HtmlSelectManyListbox
Multi Select List
box
允许多项选择的列表框
HtmlSelectManyMenu
—
同时只显示一个选项的多选列表框
SelectOne
HtmlSelectOneRadio
Radio Button Group
单选按钮列表的表格,分为一组
HtmlSelectOneListbox
Listbox
允许选择单个项目的列表框
组件族
1
组 件
可能的IDE显示名称
说 明
HtmlSelectOneMenu
Combo Box,
Dropdown List
允许选择单个选项的下拉列表框
ViewRoot
UIViewRoot
—
表示包括本页面中所有组件的整
个视图
代码中同呈现器和组件打交道时,使用完整的组件族名称是有帮助的。
表4-1也显示了UI组件的另一方面:它们是被组织成组件族(family)的。组件族是一组相关的UI组件,具有相似行
为。按组件族组织主要用于幕后处理以帮助进行呈现。然而,因为同一族中的组件具有相似功能,因此将同一族组件放到
一起讨论是有益的,这也是我们在这一章和下一章采用的方式。
这些组件中的大部分都具有特别针对HTML的属性— — 例如,HtmlPanelGrid组件有个cellpadding属性,因为它对应于
HTML 表格。你可以在可视化的IDE中,直接使用JSP或者Java代码来操作这些属性。然而,这些组件都是未针对特定目标
客户端的特定属性的通用组件的子类。如果你在编写Java代码或者开发定制组件,可能更希望直接使用超类,以便不会依
赖于产生的HTML;见本书第三部分和第四部分的相关详细内容。
所有这些组件都漂亮而华丽,但是为什么UI组件如此重要呢?在第2章已经讨论过— — 它们提供有状态的,对与用户
的交互进行的封装功能。例如,HtmlTextarea组件向用户显示一个HTML <textarea>元素,根据用户的响应更新其值,并
且在请求之间记住该值。我们已经看到,其值还可以直接关联到后台bean或者模型对象。UI 组件也产生可以连接到服务
器端代码的事件。HtmlTextarea将在用户输入新值时产生值改变事件。
UI组件也大量地使用值绑定表达式,大多数情况下,任何组件属性都可以关联到一个值绑定表达式。这意味着,可以
将组件的所有属性,即,从组件的值到组件的诸如大小和标题之类的所有属性,指定到完全不同的数据源中。具体保存在
哪里并不是问题(或者根本就不保存),只要它们是通过bean来进行暴露的。
注解
在本章和下一章,我们从前端开发的角度讨论标准组件。这样,我们仅列出了可在
Java
代码外访问的属性,并且不讨论组件
的方法。关于编写如何与组件交互的
Java
代码,见本书第三部分。
我们在第3章讨论过,JSF 是通过定制标签与JSP集成的。对应于UI 组件的标签称为是组件标签。特别针对HTML的称
为HTML标签库(通常使用前缀“ h” ),而剩下的组件则在核心标签库中(通常使用前缀“ f” )。核心标签库也包含用于
验证器、转换器等的标签。
4.1.1 使用HTML属性
所有标准HTML组件都有支持基本HTML 4.01属性(attribute)的属性(property)。这些属性会被直接传递给浏览
器,也称为直通(pass-through)属性。当在事件监听器(在第1章有叙述)或者组件标签中操作组件时,你都可以使用
这些属性。
某些情况下,组件标签直接对应于HTML元素,所以使用直通属性是很符合逻辑的。例如,这个组件标签:
就对应于这段HTML:
黑体标出的那些属性被直接传递给浏览器。即便value属性看起来也是直通给浏览器,实际上它是经过了合法性检查的。
这引出了一个重要问题:直通属性是根本不经过合法性检查的。
知道了组件标签是如何对应到HTML元素的,那么添加HTML直通属性将是很自然的事情。这也使得使用JSF组件来替换
现有的HTML标签会更加容易。我们在第一部分和第二部分的后续内容会提供很多直通HTML属性的例子。
使用CSS
直通属性规则的一个微妙之处是class属性,它用来关联到HTML元素的CSS的类名称。因为JSP中的技术限制,不能使
用名称"class"。作为解决方法,大部分UI组件都有个styleClass属性。当声明一个组件时,可以使用空格分隔指定多个C
SS类:
这样就为假定的myComponent指定了三个CSS样式类。某些IDE允许你直接从项目中的样式表中选择样式类。
大部分组件也支持CSS style 属性,所以也可以不使用类而直接指定它们的样式。如果你是个CSS专家,则可以简单
地通过style和styleClass属性手动将每个组件与你的样式表(或样式)进行集成。某些IDE 可以通过基本的CSS 编辑器
来简化这个过程,这样你可以修改组件的外观和感觉而无需了解CSS,如图4-1。一旦选择了显示属性(font color、back
ground color、border、alignment等),IDE将自动创建正确的CSS样式。
图4-1 WebSphere Application Developer [IBM,WSAD] 提供了一个便捷对话框来创建用于某些UI组件属性
的CSS样式
4.1.2 理解facet
如今,已经看过多个父子关系的例子,比如HtmlInputText组件嵌套在HtmlForm组件中。JSF 也支持命名关系,称为f
acet。facet没有实际的儿子,但是它们非常相似。它们常用来指定从属元素,比如表头和表脚,所以它们常用在复杂组
件中,比如HtmlPanelGrid 或者 HtmlDataTable。下面就是用于后者的例子:
例子中有三个facet:一个用作表头、一个用作列头和一个用作表脚。如你所见,<f:facet> 标签定义了关系,但是f
acet的子组件是实际显示的组件。每个facet 仅可以有一个子组件,所以如果想包括多个组件,它们必须是另一组件的子
组件,比如用于封装footer facet中的其他组件的HtmlPanelGroup。
你将会在我们讨论那些要使用facet的组件时,比如HtmlPanelGrid,看到更多有关facet的例子。现在,我们来看看U
I 组件如何同开发工具集成— — 这也是JSF的一个主要目标。
4.1.3 工具的威力