JSF UI 组件详解


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