Facelets是用来建立JSF应用程序时的一个可供选择的表现层技术。Facelets提供了一个强有力的模板化系统，让你使用HTML样式的模板来定义JSF的表现层，减少了组件整合进表现层时候冗余的代码，而不需要一个web容器。
基于Facelets写表现层是通过编写XHTML文件实现的，不需要写JSP代码，一切都是通过Facelets或JSF等组件标签和EL表达式来构建。标签来构建页面元素，EL表达式来展示数据。
1.1.1 Facelets构建页面结构
第一步：创建主页模板
目录【example/subexample/】下创建模板文件“testTemplate.xhtml”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
contentType="text/html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<ui:insert name="headContent"/>
</head>
<body>
<h1>我是模板页面</h1>
<ui:insert name="content" />
</body>
</html>
</f:view>
相关标签介绍：
|
f:view
|
JSF视图标签，便签内的内容都会展示出来
|
|
ui:insert
|
用来展示继承自该模板的子页面中ui:define 标签中的内容。
headContent：如果子页面中有只有自己才使用的js资源的话，可以在子页中定义，这样引用的js会展示在html文件的head标签之间
注：该标签的详细说明，参见附录 Facelets UI标签
|
该模板文件的作用：
使子页面可以继承该模板的框架内容（比如公共的JS，统一的页面编码等），子页面中ui:define 中的内容展示的时候会展示到与其“name”属性一致的ui:insert 标签所在的位置。
第二步：创建继承子页面
目录【example/subexample/】下创建继承子页面文件“testsub.xhtml”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/example/subexample/testTemplate.xhtml">
<ui:define name="headContent">
</ui:define>
<ui:define name="content">
<h1>我是子页面</h1>
</ui:define>
</ui:composition>
相关标签介绍：
|
ui:composition
|
该标签指定实现的模板，在标签内部通过定义ui:define 来实现展示在模板页面ui:insert 位置的内容。
|
|
ui:define
|
定义实现展示在模板页面ui:insert 位置的内容。
本页面中“<h1>我是子页面</h1>”将展示在模板页面的<ui:insert name="content" /> 位置
|
第三步：访问实现页面查看效果
第四步：编写页面包含组件页面
目录【example/subexample/】下创建继承子页面文件“testinclude.xhtml”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h2 style="color: red">我是包含页面</h2>
</ui:composition>
包含页面中只需要在标签ui:composition 中写内容即可。
修改页面“testsub.xhtml”
1.1.1 页面组件有选择的显示
1.1.1.1 JSF组件级别的显示设置
以文本输入域为例：
<h:inputTextarea rendered="false"/>
“rendered”属性标识该组件是否显示（渲染），默认为true；当为false的时候，该组件将不在页面上显示
1.1.1.1 基于JSTL的页面显示设置
JSTL标签详细介绍参见：JSTL 标签
首先需要在页面上引入标签库：xmlns:c=http://java.sun.com/jstl/core
目录【example/subexample/】下创建文件“testredered.xhtml”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
template="/example/subexample/subindex.xhtml">
<ui:define name="testContent">
<h:inputText value="显示的输入框" /><br />
<h:inputText value="不显示的输入框" rendered="false"/><br />
<c:if test="true" >
<h1>显示的内容</h1>
</c:if>
<c:if test="false" >
<h1>不显示内容</h1>
</c:if>
</ui:define>
</ui:composition>
相关标签介绍：
|
c:if
|
JSTL的判断标签，如果“test”属性为true，则标签内的内容显示，否则标签内的内容不显示。
|
1.1.1 AJAX支持
在UI展示层seam集成了richfaces；richfaces是一款基于JSF的AJAX的实现，拥有丰富的组件可以选用。
首先要在页面上添加标签库：
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
AJAX方式提交表单
将表单中的<h:commandButton value="提交"/> 替换为
<a4j:commandButton value="AJAX提交"/> 即可。
当点击 “a4j:commandButton”按钮的时候，请求将以AJAX的方式提交到后台。
a4j:commandButton 等a4j组件常用的属性：
|
reRender
|
重新刷新页面上某个域（页面组件；填写组件ID，如果是多个组件的话要将ID用逗号分隔开）
|
|
oncomplete
|
当AJAX请求执行完成后要调用的js函数：
例如
<a4j:commandButton value="AJAX提交" oncomplete="alert('ok');" />
|
Richfaces更多组件资源：
http://livedemo.exadel.com/richfaces-demo/index.jsp
该网站包含了所有的Richfaces的组件使用的帮助文件以及实例。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/example/subexample/testTemplate.xhtml">
<ui:define name="headContent">
</ui:define>
<ui:define name="content">
<h1>我是子页面</h1>
<br />
<ui:include src="testinclude.xhtml" />
</ui:define>
</ui:composition>
第五步：访问实现页面查看效果
在开发中我们将很多的功能模块编写成子页面组件，后期的时候进行组装。
1.1.1 表单开发
目录【example/subexample/】下创建文件“testform.xhtml”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="/example/subexample/subindex.xhtml">
<ui:define name="testContent">
<h:form prependId="false">
<table border="1" width="80%">
<tr>
<td>文本：</td>
<td><h:inputText id="field1"/></td>
<td>单选：</td>
<td>
<h:selectOneMenu>
<f:selectItem itemLabel="选择一" itemValue="1"/>
<f:selectItem itemLabel="选择二" itemValue="2"/>
<f:selectItem itemLabel="选择三" itemValue="3"/>
</h:selectOneMenu>
</td>
</tr>
<tr>
<td>复选：</td>
<td>
<h:selectManyCheckbox>
<f:selectItem itemLabel="选择一" itemValue="1"/>
<f:selectItem itemLabel="选择二" itemValue="2"/>
</h:selectManyCheckbox>
</td>
<td>单选：</td>
<td>
<h:selectOneRadio>
<f:selectItem itemLabel="选择一" itemValue="1"/>
<f:selectItem itemLabel="选择二" itemValue="2"/>
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>字段五：</td>
<td colspan="3">
<h:inputTextarea />
</td>
</tr>
<tr>
<td colspan="4" align="center">
<h:commandButton value="提交"/>
<input type="button" value="取消"/>
</td>
</tr>
</table>
</h:form>
</ui:define>
</ui:composition>
首先引入便签库：xmlns:h=http://java.sun.com/jsf/html 和 xmlns:f="http://java.sun.com/jsf/core"
相关标签介绍：
|
h:form
|
JSF表单标签。
|
|
h:inputText
|
文本输入框。
|
|
h:selectOneMenu
|
下拉单选框
|
|
h:selectManyCheckbox
|
多选复选框
|
|
h:selectOneRadio
|
单选按钮
|
|
h:inputTextarea
|
文本输入域
|
以上是基于基本JSF标签的输入表单，更多的JSF标签参见：JSF 标签
以上表单的展示效果：
与JSP不同的地方是不再使用JSP标签，而是使用一些组件标签和html标签混合，构建web页面。
注意：
标签<h:form prependId="false">中属性“prependId”标识该表单是否将Form ID追加到表单内的组件上。例如：
|
<h:form id="fm1" prependId="false">
<h:inputText id="field1"/>
</h:form>
生成的html页面的输入框的属性id为“field1”
|
|
<h:form id="fm1">
<h:inputText id="field1"/>
</h:form>
生成的html页面的输入框的属性id为“fm1:field1”
|
分享到：
相关推荐
NetBeans中JSF应用开发
JSF应用程序的结构 希望对你学习jsf有帮助。。
MyEclipse 6 Java 开发中文教程2011.pdfMyEclipse 6 Java 开发中文教程2011.pdfMyEclipse 6 Java 开发中文教程2011.pdfMyEclipse 6 Java 开发中文...开发JSF应用.pdf第十四章 开发JSF应用.pdf第十四章 开发JSF应用.pdf
包含JSF应用的实例讲源码
JSF 应用程序的生命周期.rar
刘长炯的开发JSF应用,很实用的。有兴趣的看看不勉强大家。
MyEclipse 6 Java 开发中文教程第14章 开发JSF应用.pdf
Java Server Faces (JSF) 提供了令人兴奋的可视化开发 J2EE Web应用程序的新的开发环境。如果没有 JSF，开发人员必须书写处理几乎所有用户和应用程序之间的交互的代码。非 JSF Web 应用程序使用 HTML 控件来处理用户...
介绍JSF的基本概念，以及第一个JSF应用
在基于J2EE技术的三层架构软件开发过程中，大部分...而JSF的出现，给了程序员们一个取代Structs的机会。笔者也是初接触JSF，但很快被它的方便、简洁所吸引。笔者以一个实际的从数据库里查询的例子来演示一下JSF的使用。
JSf的 具体应用构建一个E shop在线购物系统
这是一个JSF标签应用的实例。解压以后可以在tomcat5.x下部署运行。可以作为JSF开发的参考
commons-beanutils.jar，commons-collections.jar， commons-digester.jar, jsf-api.jar, jsf-impl.jar， jstl.jar， standard.jar
JSF是一种用于构建Java ... 包含JSP页面的JSF应用程序也使用由为了表现UI组件和在页面上的其他对象的JSF技术而定义的标准的tag库。 Java Server Faces技术的重要开发框架 sun-ri、myfaces、icefaces、richfaces、seam
JSF为JAVA的 Web应用用户界面的开发人员提供了标准的编程接口、丰富可扩展的UI组件库（一个核心的JSP标记库用来处理事件、执行验证以及其他非UI相关的操作和一个标准的HTML 标记库来表示 UI组件）、事件驱动模型等...
NULL 博文链接：https://fdrgbs.iteye.com/blog/546391
JSF 的主要优势之一就是它既是 Java Web 应用程序的用户界面标准又是严格遵循模型-视图－控制器 (MVC) 设计模式的框架。用户界面代码（视图）与应用程序数据和逻辑（模型）的清晰分离使 JSF 应用程序更易于管理。...
经典JAVA EE企业应用实战基于WEBLOGIC JBOSS的JSF+EJB 3+JPA整合开发——源码第9章 其他部分详见我的上传列表。 本书介绍了Java EE规范的三大主要规范JSF、EJB 3和JPA，其中JSF是Sun公司提供的JSF RI；EJB 3部分则...
使用jsf1.2+spring3.0+hibernate3.3实现集成，利用annotation实现自动对象管理注入，用户表的登录增删改查操作，包括验证码ajax集成，消息机制，国际化处理，自定义转换器，自定义验证器等 qq：38732796 欢迎讨论
《JavaServer Faces 2.0完全参考手册》提供了一个综合的示例应用程序，可以将其用作您自己的jsf应用程序的模型。该示例应用程序的代码可以从网上下载。《JavaServer Faces 2.0完全参考手册》对所有jsf功能都进行了...