Web页面代表了web应用程序显示层。创建JavaServer Faces应用程序的web页面的过程包括向页面添加组件和将组件绑定到后台bean、验证器、转换器和其他的与页面有关的服务器端对象。
建立页面
一个典型的JavaServer Faces的web页面包含以下的元素:
- 一组命名空间声明来声明JavaServer Faces标签库
- 可选的,新的HTML头(h:head)和体(h:body)标签
- form标签(h:form),展现用户输入组件
要向web页面添加JavaServer Faces组件,需要提供页面访问2个标准标准库的能力:JavaServer Faces HTML标签库和JavaServer Faces核心标签库。JavaServer Faces标准HTML标签库定义了展示普通的HMTL用户组件的标签。下面的链接是HTML呈现工具的文档http://download.oracle.com/javaee/6/javaserverfaces/2.0/docs/renderkitdocs/。
JavaServer Faces核心标签库定义了执行核心行为的标签。完整的JavaServer Faces Facelets标签及其属性的信息,见文档http://download.oracle.com/javaee/6/javaserverfaces/2.0/docs/pdldocs/facelets/。
要使用JavaServer Faces标签,需要在每个页面的顶部添加合适的指定标签库的指令。对于Facelets应用程序,XML命名空间指令唯一确定了标签库的URI和标签前缀。
例如,当创建Facelets XHTML页面时,包含如下的命名空间指令:
- <html xmlns="http://www.w3.org/1999/xhtml"
- xmlns:h="http://java.sun.com/jsf/html"
- xmlns:f="http://java.sun.com/jsf/core">
XML命名空间URI确定了标签库的位置、用来区分属于该标签库的标签的前缀。我们可以使用其他的前缀来代替标准的前缀h或f。相应的,在该页面使用标签的时候,也需要使用自己定义的前缀。例如,在下面的web页面中,form标签必须使用h前缀,因为在前面的标签库的声明指令中我们定义了使用前缀h来区分HTML标签库中的标签。
- <h:form...>
后面的“使用HTML标签向页面添加组件”和“使用核心标签”描述了怎样使用JavaServer Faces标准HTML标签的组件标签和JavaServer Faces核心标签库的核心标签。
使用HTML标签向页面添加组件
JavaServer Faces标准HTML标签库定义的标签用来显示HTML表单组件和其他的基本的HTML元素。这些组件显示数据和接受用户输入的数据。这些数据作为表单的一部分被收集并提交到服务器,通常是在用户点击一个按钮的时候提交。本节中介绍怎样使用下表中显示的每个组件。
[td]
标签 | 功能 | 呈现为 | 显示 |
column | 显示数据组件中的一列数据 | HTML表格中的一列数据 | 表格中的一列 |
commandButton | 提交表单到应用程序 | 一个html的<input>元素,该元素的type属性可以是submit,reset或image | 一个按钮 |
commandLink | 到另外一个页面或页面上的定位的链接 | 一个HTML<a href>元素 | 超链接 |
dataTable | 表示一个数据封装 | 一个HTML<table>元素 | 可以动态更新的表格 |
form | 显示一个输入表单(表单里的标签接受会随表单一起提交的数据 | 一个HTML<form>元素 | 没有显示 |
graphicImage | 显示一个图片 | 一个HTML<img>元素 | 一个图片 |
inputHidden | 允许页面作者在页面上添加一个隐藏的变量 | 一个HTML<input type=hidden>元素 | 没有 |
inputSecret | 允许用户在页面上输入字符串但是不显示用户的实际输入 | 一个HTML<input type=password>元素 | 一个文本框,但是不显示用户的实际输入而是显示替代的字符(如*) |
inputText | 允许用户在页面上输入一行字符 | 一个HTML<input type=text>元素 | 一个文本框 |
inputTextarea | 允许用户在页面上输入多行的字符 | 一个HTML<textarea>元素 | 一个多行的文本框 |
message | 显示一个本地信息 | 如果使用了样式的话,是一个HTML<span>标签 | 文本字符 |
messages | 显示一个本地信息 | 如果使用了样式的话,是一组HTML<span>标签 | 文本字符 |
outputFormat | 显示一个本地信息 | 普通文本 | 普通文本 |
outputLabel | 将内部的组件显示为一个指定的输入框的label | 一个HTML<lable>元素 | 普通文本 |
outputLink | 到另一个页面或页面上的位置的链接,不产生任何action事件 | 一个HTML<a>元素 | 一个超链接 |
outputText | 显示一行文本 | 普通文本 | 普通文本 |
panelGrid | 显示一个表格 | 一个带有<tr>和<td>元素HTML<table>元素 | 一个表格 |
panelGroup | 将多个组件组成有相同的parent的一个组 | 一个HTML<div>或<span>元素 | 表格中的一行 |
selectBooleanCheckBox | 允许用户改变一个Boolean选择的值 | 一个HTML<input type=checkbox>元素 | 一个check box |
selectItem | 代表一个列表中的一项,用户必须从列表中选择一项 | 一个HTML<option>元素 | 没有显示 |
selectItems | 代表一系列的项,用户必须从中选择一项 | 一系列的HTML<option>元素 | 没有显示 |
selectManyCheckBox | 显示一组check box,用户可以从中选择多项 | 一组类型为checkbox的HTML<input>元素 | 一组check box |
selectManyListbox | 显示一个列表(一次显示所有的选项),用户可以从中选择多项。 | 一个HTML<select>元素 | 一个list box |
selectManyMenu | 允许用户从所有选项中选择多个选项 | 一个HTML<select>元素 | 一个可滚动的comob box |
selectOneListBox | 允许用户从所有选项中选择一个选项。所有的选项都会同时显示出来。 | 一个HTML<select>元素 | 一个list box |
selectOneMenu | 允许用户从所有选项中选择一个选项 | 一个HTML<select>元素 | 一个可滚动的combo box |
selectOneRadio | 允许用户从所有选项中选择一个选项 | 一个HTML<input type=radio>元素 | 一组radio box |
通用组件标签属性
大多数组件都支持下表列出的属性.
属性 | 描述 |
binding | 标识一个bean属性并将组件实例绑定到该bean属性 |
id | 唯一的标识一个组件 |
immediate | 如果设置为true,表明所有的关联到该组件的事件、验证和转换都应该在request参数应用到该组件的时候就发生 |
rendered | 指定一个条件,在该条件下这个组件会被呈现。如果该条件没有被满足,该组件不会被呈现 |
style | 指定标签的层叠样式表样式 |
styleClass | 指定一个CSS类,该类包含了样式的定义 |
value | 指定一个外部数据源,该组件的值绑定到该数据源 |
所有的标签属性(除了id)都能够接受EL定义的表达式,表达式的详细信息见第6章“表达式语言”。
id属性
对于一个组件标签而言,id属性通常是不需要的。但是当另外一个组件或服务器端的类要引用这个组件的时候,id属性就是必须的了。如果开发人员没有指定id属性,JavaServer Faces实现会自动生成一个组件ID。和其他的JavaServer Faces标签属性不一样,当对id属性使用表达式的时候,id属性只接受使用在第137页的“立即求值属性”中描述的语法(也就是${})的表达式。
immediate属性
输入组件和命令组件(实现了ActionSource接口的组件,如button和hyperlinks)能够设置immediate属性为true来强制当request参数被应用的时候事件、验证和转换都会被处理。必须要仔细的考虑怎样设置输入组件和命令组件的immediate属性来决定当命令组件被激活的时候会发生什么事情。
假设有一个页面,页面上有一个按钮和一个输入框。输入框用来输入书籍的数量。如果按钮和输入框的immediate属性都设置为true,那么新输入的值对于任何和点击按钮时产生的事件相关的过程都生效。当request参数被应用的时候,和按钮相关的事件以及和输入框相关的验证、转换的事件都会被处理。
如果按钮的immediate属性设置为true,但是输入框的immediate属性是false,那么和按钮相关的事件会被处理时输入框中新输入的值还没有被更新到模型层。原因是和输入框相关的事件、验证和转换都是在request参数被应用之后才会发生。
rendered属性
组件标签使用rendered属性和Boolean EL表达式一起来决定组件是否会被呈现。例如,当cart中不包含任何项目的时候,下面的页面代码片段中的commandLink组件不会被呈现。
- <h:commandLink id="check"
- ...
- rendered="#{cart.numberOfItems > 0}">
- <hutputText
- value="#{bundle.CartCheck}"/>
- </h:commandLink>
和其他几乎所有的JavaServer Faces标签属性不同,rendered属性必须使用rvalue表达式。和在第122页的“值表达式和方法表达式”中介绍的一样,rvalue表达式只能读数据,而不能将数据写会数据源。因此,和rendered属性一起使用的表达式可以使用lvalue表达式不能使用但rvalue表达式可以使用的算术运算和文本。例如上面的例子中的表达式使用了>运算符。
style和styleClass属性
style和styleClass属性允许开发人员指定标签的呈现输出的CSS样式。第157页的“使用h:message和h:messages显示错误信息”中使用了一个使用style属性来自己指定样式的例子。组件标签页可以引用CSS class来指定样式。
下面的例子显示了一个使用名为list-background的style class的dataTable标签。
- <h:dataTable id="books"
- ...
- styleClass="list-background"
- value="#{bookDBAO.books}"
- var="book">
定义了这个class的样式表是stylesheet.css,给文件会被include到应用程序中。更多关于定义样式的信息见位于http://www.w3.org/Style/CSS/的Cascading Style Sheet Specifiaction。
value和binding属性
一个output组件的标签使用value和binding属性分别将组件的值和实例绑定到一个外部数据源。
添加HTML head和body标签
HTML head标签(h:head)和body标签(h:body)向JavaServer Faces web页面添加HTML页面结构。
- h:head标签代表一个HTML页面的head元素
- h:body标签代表一个HTML页面的body元素
下面是一个使用了通常的head和body标记标签的XHTML页面的例子:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Add a title</title>
- </head>
- <body>
- Add Content
- </body>
下面是一个使用了h:head和h:body标签的XHTML页面的例子:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml"
- xmlns:h="http://java.sun.com/jsf/html">
- <h:head>
- Add a title
- </h:head>
- <h:body>
- Add Content
- </h:body>
上面两个例子中的代码最后呈现出的都是同样的HTML元素。Head和body标签主要对资源重定位有用。更多关于资源重定位的信息见第160页的“使用h:output标签资源重定位”。