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标签资源重定位”。
相关推荐
**标签说明**是JSF中另一个关键概念。JSF提供了一系列内建的UI组件标签,如`<h:inputText>`用于文本输入,`<h:commandButton>`用于提交表单等。这些标签在JSF视图层(通常是JSP或Facelets页面)中使用,与后台的...
**标签说明** JSF使用JSP标签(或Facelets)来构建页面。这些标签对应于JSF组件,例如`<h:outputLabel>`用于显示标签,`<h:commandButton>`用于创建按钮。标签可以携带属性,如`value`、`action`等,这些属性可以...
### JSF标签全解 #### 1. `f:actionListener` 标签 - **功能**:`f:actionListener` 标签主要...以上就是关于JSF标签的一些详细说明。这些标签在实际开发中非常重要,能够帮助开发者更高效地创建复杂的Web应用程序。
JSF使用组件模型,允许开发者使用预定义的UI组件,如按钮、输入字段和表格,来创建动态、交互式的页面。这些组件通过JSF标签在页面上表示,类似于HTML标签,但具有更丰富的功能和数据绑定能力。 1. 标签入门 在JSF...
此外,JSF2引入了Facelets作为默认的视图层技术,它允许在页面中嵌入表达式语言(EL)和标签,使得页面结构更加清晰,代码更易于维护。 在“JSF标签库快速参考”文档中,你将找到关于这些标签和组件的详细说明,...
%>创建了一个ArrayDataModel并将它添加到session作用域中,以便在JSF页面中使用。 综上所述,JSF标签使用文档提供了一个关于如何在JSF应用中使用标准和自定义组件进行页面构建的指南,涵盖了组件的基本属性设置、...
- `outputLink`:生成`<a>`标签,允许链接到其他页面,值可以是JSF表达式语言(EL)绑定。 - `outputFormat`:格式化输出文本,支持参数化,可以与`<f:param>`标签配合使用。 - `outputText`:简单地显示绑定的值或...
以下是对学习JSF标签使用文档中的主要知识点的详细说明: 1. **引入JSF核心标签库**: 在页面的开头,通过`<%@ taglib>`指令引入了JSF的核心标签库和HTML标签库。例如: ``` ...
使用`f:param`标签传递参数是JSF中常见的做法,尤其适用于页面间的导航和数据传递。这种方法简单易懂,同时也支持动态参数值,即通过EL表达式(Expression Language)来获取参数值。例如,`value="#{someBean.some...
JSF表达式语言(EL)是一个用于访问应用程序数据的语言,可以在JSF页面中使用它来绑定UI组件和后端bean的属性。 #### 1.6 国际化信息 JSF支持国际化和本地化,允许开发者创建支持多种语言和地区设置的应用程序。JSF...
在JSF页面中,`<f:view>`是一个重要的组件,类似于HTML的`<html>`标签。`<f:view>`是JSF页面的基础,所有JSF组件都应该位于`<f:view>`标签内。这确保了JSF能够正确地处理页面的生命周期和渲染过程。 JSF提供了一套...
2. **第一个JSF应用**:创建简单的“Hello, World”应用,展示如何创建一个JSF页面和对应的后台Bean。 3. **组件库**:介绍JSF标准组件库(JSF Core和PrimeFaces等)中的常见组件及其使用方法。 4. **数据绑定**:...
5.4.2 使用托管bean作为JSF页面的支撑bean 第6章 导航模型 6.1 使用隐式导航 6.2 JSF导航系统概述 6.2.1 回顾MVC-控制器 6.2.2 Navigation HandleI-幕后主管 6.2.3 Faces动作方法说明 6.3 构建导航规则 6.3.1 静态...
5. **创建JSF页面**:JSF页面通常以`.xhtml`为扩展名,使用JSF标签来构建UI。例如,`index.xhtml`可能是项目的主入口点,包含JSF组件如`<h:form>`、`<h:inputText>`和`<h:commandButton>`。 6. **使用 Managed Bean...
JSF(JavaServer Faces)是一种用于构建用户界面的Java技术,它提供了一套标准的HTML渲染组件,使得开发者能够方便地...对于更详细的标签使用和属性说明,建议查阅Tag Library Documentation文档,以便获取全面的信息。
Facelets 是JSF的一个视图技术,提供了一种更加简洁的方式来创建和管理JSF页面。Facelets支持模板化和组合化的页面结构,使得页面开发更加高效。 ##### 8.4 JSF与Ajax Ajax技术可以在不重新加载整个页面的情况下...
为了更好地理解如何在实际项目中使用Ajax4jsf,我们可以通过一个简单的示例来进行说明: 1. **环境准备**: 确保已经安装了JDK 1.4及以上版本,以及支持Servlet 2.4及以上的容器。 2. **下载Ajax4jsf**: 从官方网站...
**Ajax4jsf 用户手册** 是一份详细的指南,旨在帮助开发者了解如何在JavaServer Faces (JSF)项目中集成和使用Ajax4jsf框架。该框架使得在JSF环境中实现Ajax功能变得更加简单,无需编写JavaScript代码,而是通过一组...