JSF标签大全
4.4.3 显示文本和图片
JSF程序使用下面的标签显示文本和图片：
h:outputText标签是JSF最简单的标签之一。该标签仅有少数几个属性，通常不产生HTML 元素。相反，它只产生文本--有一个例外：如果指定了style或styleClass属性，
h:outputText将产生HTML span元素。h:outputText 和h:outputFormat具有在所有JSF HTML标签中独有的属性：escape。
默认情况下，escape属性的值是false。但如果将它设为true，那么字符<、>、&将被转换为<、>、&。改变这些字符有助于防止跨站点脚本攻击，参考
https://www.doczj.com/doc/9016691092.html,/advisories/CA-2000-02.html获得关于跨站点脚本攻击的更多信息。表4-11列出了h:outputText、h:outputFormat的所有属性。
表4-11 h:outputText 和h:outputFormat的属性
[a]参考表4-4中关于基本属性的信息。
[b]参考表4-5中关于HTML4.0属性的信息
h:outputFormat在其标签主体中以指定的参数格式化组合消息。例如：
在上述代码段中，组合消息是{0} is {1} years old，使用f:param标签指定的参数是Bill 和38。上述代码段的输出是：Bill is 38 years old(Bill 38岁了)。h:outputFormat标签使用java.text.MessageFormat实例来格式化输出。
表4-11列出了h:outputFormat的所有属性。
h:graphicImage标签可以让开发者使用相对路径--即与Web应用程序顶层目录相对--来显示图片。h:graphicImage产生HTML img元素。
表4-12显示了h:graphicImage的所有属性。
表4-12 h:graphicImage的属性
[a]参考表4-4关于基本属性的信息。
[b]参考表4-5关于HTML4.0属性的信息。
[c]参考表4-6关于DHTML事件属性的信息。
表4-13显示了使用h:outputText和h:graphicImage的一些例子。
表4-13 h:outputText 和 h:graphicImage示例
表4-13的第三个和第四个例子演示了escape属性的使用。如果h:outputText的值是，escape属性是false--正如表4-13的第三个例子的情况--h:outputText标签产生HTML input元素。攻击者正是利用HTML元素的这种自动生成功能来实施跨站点脚本攻击的。将escape属性设置为true--正如表4-13的第四个例子所示--输出被转换为无害的文本，因此能够阻止潜在的攻击。
表4-13的最后两个例子向读者演示了h:graphicImage的使用。
4.5 按钮和链接
按钮和链接在Web应用程序中非常普遍，JSF提供了下面的标签来支持它们：
h:commandButton和h:commandLink动作都表示JSF命令组件--JSF框架触发动作事件和当按钮或链接激活的时候调用的动作。关于命令组件事件处理的信息，请参考第7章7.3节'动作事件'。
h:outputLink标签产生一个HTML锚元素，它指向一个资源，例如图片或网页。单击产生的链接，将跳转到指定的资源而不需要涉及JSF框架。
表4-14列出了h:commandButton和h:commandLink共享的属性。
表4-14 h:commandButton和h:commandLink的属性
(续表)
4.5.1 使用命令按钮
h:commandButton标签产生一个HTML input元素，它的类型是button、image、submit或reset，这取决于指定的属性。表4-15演示了h:commandButton的一些用法。
表4-15 h:commandButton的例子
表4-15中的第三个例子产生一个 push按钮--一种HTML input元素，其类型是button--它并不会导致表单提交。将行为添加到push按钮的唯一方法是为DHTML事件的属性指定脚本，就像我们在例子中为onclick所做的。
注意
h:graphicImage和h:commandButton都可以显示图片，但是在JSF1.1中，通过这两个标签指定图片的方式是不一致的。h:graphicImage需要一个环境路径，而h:graphicImage自动加载环境路径。例如，对于名为myApp的应用程序，下面代码演示了如何为每个标签指定相同的图片：
在JSF1.2中，不能为每个属性添加环境路径。如果路径是绝对路径(以/开始)，自动添加环境路径。如果路径相对于周围的页面(例如，不是以/开始)，则无需改变地使用。
h:commandLink标签产生一个用途类似表单提交按钮的HTML锚元素。表4-16演示了一些h:commandLink的例子。
表4-16 h:commandLink的例子
子产生的HTML代码：
当用户单击链接的时候，锚元素的值设置为h:commandLink的客户ID，并且提交包含的表单。这个提交将JSF生命周期设置为运行状态，因为href属性是'#'，所以当前页将被重新加载，除非与链接相关联的动作返回一个非null结果。参考第3章获得更多关于JSF导航的信息。
在h:commandLink标签的标签体内，可以放置多个JSF HTML标签--其中每个HTML元素都是该链接的一部分。例如，如果单击表4-16第三个例子中的文本或图片，链接的表单将提交。
表4-16中的倒数第二个例子会将一个动作和动作监听器连接起来。动作监听器在第7章7.3
节的'动作事件'中讨论。
表4-16的最后一个例子在h:commandLink标签体中嵌入了一个f:param标签。当单击链接的时候，链接创建由f:param标签指定的名值请求参数。可以以任意方式使用这个请求参数。参考第7章7.6节'从UI到服务器传递数据'的例子。
h:commandButton和h:commandLink都能提交请求，然后调用JSF生命周期。虽然这些标签都非常有用，但有时只需一个加载资源的链接而无需启动JSF生命周期。在这种情况下，可以使用h:outputLink标签。表4-17列出了h:outputLink的所有属性。
表4-17 h:outputLink的属性
[a]参考表4-4关于基本属性的信息。
[b]参考表4-5关于HTML 4.0属性的信息。
[c]参考表4-6关于DHTML事件属性的信息。
就像h:commandLink一样，h:outputLink产生一个HTML锚元素。但与h:commandLink不同的是，h:outputLink不产生JavaScript来使链接用起来像提交按钮。h:outputLink value 属性的值可用于锚的href属性，并且h:outputLink主体中的内容用于产生锚元素的主体。表4-18演示了一些h:outputLink的例子。
表4-18 h:outputLink的例子
链接的URL和文本。这些属性的实现如下：
表4-18的最后三个例子是到同一JSF页面命名锚的链接。这些锚如下：
注意
如果使用JSF1.1，需要为表4-18的最后一个例子使用f:verbatim标签：
不能简单地在h:outputLink标签中放置文本--否则，文本将显示在链接外面。在JSF1.1中，组件的子组件必须是另一个组件，例如h:outputText 或f:verbatim。JSF1.2中修复了这个问题。
4.5.2 使用命令链接
前面讨论了JSF按钮和链接标签的细节，下面我们看一个完整的例子。图4-5显示了4.4.2节'使用文本字段和文本区'中讨论的程序，其中有两个允许读者选择英文或德文本地设置的链接。当链接被激活时，动作将改变视图的本地设置，JSF实现重新加载当前页。
两个链接分别指定了一个图片、一个请求参数和一个动作方法。这些方法如下所示：
JSF 实现将在表单提交之后，重新加载当前页。当页面重新加载时，它本地化为英文或德文，页面相应地重新显示。
图4-6显示了程序的目录结构，程序清单4-8到程序清单4-11显示了相关的JSF页面的Java 类。程序清单4-11显示了约束配置文件。
程序清单4-9 flags/src/java/com/corejsf/UserBean.java
程序清单
4.6.1 复选框和单选按钮
有两个JSF标签表示复选框：
在JSF
在支撑
生成的HTML如下所示：
可以使用
择一个或多个复选框。也可以在h:selectManyCheckbox的标签体内指定该组，要么使用一个或多个f:selectItem标签，要么使用一个f:selectItems标签。参考4.6.3节的'项目'获得更多关于核心标签的信息。例如，下面是选择颜色的一组复选框：
h:selectManyCheckbox标签如下所示：
复选框使用
HTML table元素；例如，下面是上述颜色例子生成的HTML代码：
每个颜色都对应一个input元素，并有一个label用于访问。这个label放在td元素中。单选按钮由h:selectOneRadio实现。下面是一个例子：
h:selectOneRadio标签的value属性指定当前选择的项。我们再一次使用多个f:selectItem 标签来生成单选按钮：
与
除了生成的HTML表之外，h:selectOneRadio和h:selectManyCheckbox还有一些共同之处--这两个标签独有的属性：
border属性指定边框的宽度。例如，下面是边框为1和2的单选和复选框：
enabledClass和CSS类。例如，下图显示了一个被激活类的样式--斜体、蓝色字体和黄色背景：
layout属性可以是lineDirection (水平)或pageDirection (垂直)。例如，左边的复选框具有pageDirection布局，右边的复选框是lineDirection。
说明
读者可能想知道为什么layout属性值不是horizontal和vertical，而是lineDirection 和 pageDirection。尽管lineDirection和pageDirection事实上是水平和垂直的拉丁语表
述，但是在其他语言中并不一定是这个意思。例如，将文本从上到下显示的中文浏览器，可能将lineDirection看作是垂直的，将pageDirection看作是水平的
4.6.2 菜单和列表框
菜单和列表框由下面的标签表示：
上述标签的属性列在表4-20中，因此在这里不重复讨论。
菜单和列表框标签产生HTML select元素。菜单标签为select元素添加size='1'属性。这个size就是唯一用来区分菜单和列表框的属性。
下面是单选列表框的例子：
相应的列表框标签如下：
列表框标签如下：
如下：
对于菜单，使用h:selectOneMenu和h:selectManyMenu。单选菜单的外观如下：
h:selectOneMenu
HTML)中的h:selectManyMenu产生的结果：
说明
在HTML中，菜单和列表框的区别是人为的。菜单和列表框都是HTML select元素。唯一的区别是：菜单总是具有size='1'属性。
正如期望的，浏览器总是将单选菜单显示为下拉列表。但是它们并不总是一致的显示由size='1'和multiple属性指定的多选菜单。与我们期待的包含多个选项的下拉列表不同，有的浏览器显示得很荒缪，例如显示几乎无法操作的微小滚动条(Windows IE 6)或者根本没有滚动条，只能用下一个箭头键来导航(Firefox 1.5)。
从4.6节的'选择标签'开始，我们一直使用多个f:selectItem来填充select组件。在熟悉了选择标签的基础上，下面我们进一步讨论f:selectItem和相关的f:selectItems标签。
4.6.3 项目（1）
除了h:selectBooleanCheckbox之外，所有选择标签都使用f:selectItem 或
f:selectItems来指定它们的项目。下面，我们将讨论这些核心标签，从f:selectItem开始。
1. f:selectItem标签
可以使用f:selectItem来指定单选项，例如：