`
yuzhi2217
  • 浏览: 35046 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JSF2 页面标签使用说明(一)

    博客分类:
  • JSF2
阅读更多

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页面时,包含如下的命名空间指令:

  1. <html xmlns="http://www.w3.org/1999/xhtml"
  2. xmlns:h="http://java.sun.com/jsf/html"
  3. xmlns:f="http://java.sun.com/jsf/core">
复制代码

    XML命名空间URI确定了标签库的位置、用来区分属于该标签库的标签的前缀。我们可以使用其他的前缀来代替标准的前缀h或f。相应的,在该页面使用标签的时候,也需要使用自己定义的前缀。例如,在下面的web页面中,form标签必须使用h前缀,因为在前面的标签库的声明指令中我们定义了使用前缀h来区分HTML标签库中的标签。

  1. <h:form...>
复制代码

    后面的“使用HTML标签向页面添加组件”和“使用核心标签”描述了怎样使用JavaServer Faces标准HTML标签的组件标签和JavaServer Faces核心标签库的核心标签。

使用HTML标签向页面添加组件
    JavaServer Faces标准HTML标签库定义的标签用来显示HTML表单组件和其他的基本的HTML元素。这些组件显示数据和接受用户输入的数据。这些数据作为表单的一部分被收集并提交到服务器,通常是在用户点击一个按钮的时候提交。本节中介绍怎样使用下表中显示的每个组件。

[td]               

                                

标签

                        
                                

功能

                        
                                

呈现为

                        
                                

显示

                        
                                

column

                        
                                

显示数据组件中的一列数据

                        
                                

HTML表格中的一列数据

                        
                                

表格中的一列

                        
                                

commandButton

                        
                                

提交表单到应用程序

                        
                                

一个html<input>元素,该元素的type属性可以是submit,resetimage

                        
                                

一个按钮

                        
                                

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,用户可以从中选择多项

                        
                                

一组类型为checkboxHTML<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组件不会被呈现。

  1. <h:commandLink id="check"
  2. ...
  3. rendered="#{cart.numberOfItems > 0}">
  4. <hutputText
  5. value="#{bundle.CartCheck}"/>
  6. </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标签。

  1. <h:dataTable id="books"
  2. ...
  3. styleClass="list-background"
  4. value="#{bookDBAO.books}"
  5. 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页面的例子:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Add a title</title>
  6. </head>
  7. <body>
  8. Add Content
  9. </body>
复制代码

    下面是一个使用了h:head和h:body标签的XHTML页面的例子:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4. xmlns:h="http://java.sun.com/jsf/html">
  5. <h:head>
  6. Add a title
  7. </h:head>
  8. <h:body>
  9. Add Content
  10. </h:body>
复制代码

    上面两个例子中的代码最后呈现出的都是同样的HTML元素。Head和body标签主要对资源重定位有用。更多关于资源重定位的信息见第160页的“使用h:output标签资源重定位”。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics