2011年11月19日星期六

JavaEE_014：JavaEE6 新特性之五：JSF 2.0（1）

JSF（JavaServer Faces）是一个服务端组件框架，用于简化Web应用开发。
原来的JSP（JavaServer Pages）不支持一些JSF2.0的新特性，将逐渐被淘汰。
JSF 2.0版本增加了如下新特性：

1. Facelets
Facelets指的是JavaServer Faces View Declaration Language，JSF视图声明语言，是编写Web界面的新标准。
其实在JSF1.0中已经使用了该技术框架，只不过那时还没有正式成为规范。
Facelets通常是使用XHTML编写的（这说明也可以用其它语言编写？比如JDeveloper中的.jsf格式）。
.xhtml页面代码中，禁止添加任何Java代码片段，保证页面代码的整洁度。
而.jsp页面中允许添加Java代码片段，这是非常不好的设计，所以JSP被淘汰了。
从设计角度看，页面只应该负责展示数据，不应该包含任何逻辑。

下面是使用Facelets编写的.xhtml代码片段：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:demo="http://java.sun.com/jsf/composite/components">
.....
<h:form style="background-image:url(#{resource['book.png']});">
<demo:newItem item="#{itemBean.book}"/>

<h:panelGrid columns="2">
<h:outputLabel value="Number of pages : " styleClass="alabel" />
<h:inputText value="#{itemBean.book.nbOfPage}" styleClass="ainput"/>

<h:outputLabel value="Illustrations : " styleClass="alabel"/>
<h:selectBooleanCheckbox value="#{itemBean.book.illustrations}"/>

<h:outputLabel value="Tags : " styleClass="alabel"/>
<h:inputText value="#{itemBean.tags}" styleClass="ainput"/>

<h:outputLabel value="Language code : " styleClass="alabel"/>
<h:inputText value="#{itemBean.languageCode}" styleClass="ainput"/>
</h:panelGrid>

<h:commandButton value="Create a book" action="#{itemBean.doCreateBook}"/>

</h:form>
......
</html>
可以看出，这个页面中引入了JSF、JSTL和Facelets标签库。

2. 页面模板
使用页面模板是为了让其它页面“继承”该模板，节省代码的同时，也保证了页面风格的统一。
定义页面模板使用Facelets标签库中的<ui:insert>，如下所示：
<h:head>
<title>
<ui:insert name="title">Default title</ui:insert>
</title>
</h:head>

<h:outputStylesheet name="styles.css"/>

<h:body styleClass="abody">
<h1>
<ui:insert name="title">Default title</ui:insert>
</h1>
<hr/>
<h:messages style="color:red"/>
<ui:insert name="content">Default content</ui:insert>

<hr/>
<i>Hands-On Lab - Beginning with The Java EE 6 Platform</i>
</h:body>

在页面中，使用<ui:composition>标签指定模板，使用<ui:define>标签指定插入到模板中的内容。
<ui:composition template="layout.xhtml">

<ui:define name="title">Create a new book</ui:define>

<ui:define name="content">

<h:form style="background-image:url(#{resource['book.png']});">
<demo:newItem item="#{itemBean.book}"/>

<h:panelGrid columns="2">
<h:outputLabel value="Number of pages : " styleClass="alabel" />
<h:inputText value="#{itemBean.book.nbOfPage}" styleClass="ainput"/>

<h:outputLabel value="Illustrations : " styleClass="alabel"/>
<h:selectBooleanCheckbox value="#{itemBean.book.illustrations}"/>

<h:outputLabel value="Tags : " styleClass="alabel"/>
<h:inputText value="#{itemBean.tags}" styleClass="ainput"/>

<h:outputLabel value="Language code : " styleClass="alabel"/>
<h:inputText value="#{itemBean.languageCode}" styleClass="ainput"/>
</h:panelGrid>

<h:commandButton value="Create a book" action="#{itemBean.doCreateBook}"/>

</h:form>
......
</ui:define>

</ui:composition>

参考文献：
1. http://developer.51cto.com/art/201001/179049.htm
2. http://www.ibm.com/developerworks/cn/java/j-jsf2fu1/
3. http://www.ibm.com/developerworks/cn/java/j-jsf2fu2/
4. http://www.ibm.com/developerworks/cn/java/j-jsf2fu3/
标签：

没有评论:

发表评论

订阅： 博文评论 (Atom)