`
ysen
  • 浏览: 121847 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JSF应用

    博客分类:
  • JSF
阅读更多

Facelets是用来建立JSF应用程序时的一个可供选择的表现层技术。Facelets提供了一个强有力的模板化系统,让你使用HTML样式的模板来定义JSF的表现层,减少了组件整合进表现层时候冗余的代码,而不需要一个web容器。

基于Facelets写表现层是通过编写XHTML文件实现的,不需要写JSP代码,一切都是通过FaceletsJSF等组件标签和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集成了richfacesrichfaces是一款基于JSFAJAX的实现,拥有丰富的组件可以选用。

首先要在页面上添加标签库:

    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

 

分享到:
评论

相关推荐

    JSF应用程序的结构

    在JSF应用程序的结构中,有几个关键概念值得深入理解: 1. **事件驱动型组件模型**:JSF的核心是组件模型,其中UI组件(如按钮、输入字段)与事件和监听器相结合。当用户交互(如点击按钮)发生时,会触发特定的...

    netBeans中导入已有的JSF应用程序

    NetBeans是一款功能强大的集成开发环境(IDE),它支持多种编程语言,包括Java,自然也支持JSF应用程序的开发。这篇博文"在NetBeans中导入已有的JSF应用程序"提供了关于如何在NetBeans环境中整合和管理已有的JSF项目...

    NetBeans中JSF应用开发

    首先,创建JSF应用。在NetBeans中,可以选择“File”&gt;“New Project”(Ctrl-Shift-N),然后在“Web”目录下选择“Web Application”,点击“Next”。接下来,为项目命名,例如“jAstrologer”,并指定项目位置。选择...

    JSF标签应用实例

    这个压缩包文件"myfaces-example-simple-1.1.7-SNAPSHOT"包含了一个JSF的实际应用示例,适合初学者和开发者了解JSF标签的使用方法和JSF应用的部署流程。 首先,我们要理解JSF的核心概念:组件、事件和渲染。JSF中的...

    JSF 应用 在线购物系统

    ### JSF 应用:在线购物系统 Eshop #### 概述 本章节将深入探讨一个基于JavaServer Faces (JSF)技术实现的在线购物系统——Eshop。该系统不仅作为一个实际的应用案例来展示JSF的功能,同时也为读者提供了一个实践...

    刘长炯的开发JSF应用

    ### 刘长炯的开发JSF应用:深入解析与实践指南 #### 1. 引言:JSF的诞生背景与挑战 刘长炯在《开发JSF应用》一书中,详细介绍了JavaServer Faces(JSF)框架的发展历程及其在Java Web开发领域的独特价值。JSF由Sun...

    JSF应用的实例讲源码

    7. ** faces-config.xml**:这是JSF应用程序的主要配置文件,包含了组件注册、导航规则、转换器和验证器等配置。 8. **Ajax支持**:JSF 2.0引入了Partial State Saving和Ajax支持,使得部分页面刷新成为可能,提高...

    JSF 应用程序的生命周期.rar

    在JSF应用程序开发中,理解这些生命周期阶段至关重要,因为它可以帮助开发者正确地组织和安排他们的代码,确保在正确的时间执行正确的操作。例如,验证应该在处理请求值之后立即进行,而业务逻辑应在更新模型值之后...

    jsf 详细 原理介绍 内容讲解

    `MessageResource`类用于构建本地化消息模板,实现JSF应用的国际化和本地化功能。 总的来说,JSF提供了一个强大的框架,通过组件、上下文、生命周期管理和事件处理机制,简化了Web应用程序的开发。理解这些基本...

    JSF Web 应用开发实战源码

    1. **JSF生命周期**:JSF应用的每个请求都会经历一系列的阶段,包括恢复视图、应用请求值、处理验证、更新模型值、调用应用逻辑和渲染响应。理解这些阶段对于调试和优化JSF应用至关重要。 2. **组件模型**:JSF的...

    开发JSF应用程序(与Web有关)

    Java Server Faces (JSF) 提供了令人兴奋的可视化开发 J2EE Web应用程序的新的开发环境。如果没有 JSF,开发人员必须书写处理几乎所有用户和应用程序之间的交互的代码。非 JSF Web 应用程序使用 HTML 控件来处理用户...

    jsf应用开发必用jar包

    commons-beanutils.jar,commons-collections.jar, commons-digester.jar, jsf-api.jar, jsf-impl.jar, jstl.jar, standard.jar

    jsf教程 JSF为JAVA的 Web应用用户界面

    JSF为JAVA的 Web应用用户界面的开发人员提供了标准的编程接口、丰富可扩展的UI组件库(一个核心的JSP标记库用来处理事件、执行验证以及其他非UI相关的操作和一个标准的HTML 标记库来表示 UI组件)、事件驱动模型等...

    JSF Java Server Faces (JSF)框架

    JSF是一种用于构建Java ... 包含JSP页面的JSF应用程序也使用由为了表现UI组件和在页面上的其他对象的JSF技术而定义的标准的tag库。 Java Server Faces技术的重要开发框架 sun-ri、myfaces、icefaces、richfaces、seam

    JSF第一个应用

    在这个“JSF第一个应用”中,我们将深入探讨如何创建一个基本的JSF应用。 ### 一、JSF框架概述 JSF框架提供了一系列的UI组件和事件处理机制,允许开发者使用声明式的方式构建用户界面。它遵循MVC(Model-View-...

    JSF入门+JSF web实战+JSF2

    书中会介绍如何创建一个简单的JSF应用程序,设置开发环境,以及如何使用JSF的UI组件来构建动态网页。此外,还会讲解EL(Expression Language)和 Managed Beans,这两个是JSF中用于数据绑定和业务逻辑处理的关键技术...

Global site tag (gtag.js) - Google Analytics