当前位置： 代码迷 >> JavaScript >> JSF使用
  详细解决方案

JSF使用

热度：676   发布时间：2012-11-23 22:54:33.0
JSF应用

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="提交"/>&nbsp;
	          <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”

?

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.