2012年2月2日星期四

NetBeans_008：开发JavaEE 6 应用之八：使用JSF2开发页面

JSF2允许使用Facelets作为页面模板，页面则由XHTML和CSS组成，这是一个很好的设计。
业务逻辑放在Backing Bean中，在Java EE 6中，EJB可以作为Backing Bean。
与普通Backing Bean不同的是，EJB具有事务特性和安全特性。
因此在Java EE 6中，典型的模型视图控制器设计模式中：Model是JPA实体、View是JSF2、Controller是EJB。

Contexts Dependency Injection (CDI)是Java EE 6中的一个新特性。
有了CDI，所有的POJOs类都可以作为Backing Bean依赖注入进来，包括EJB，真是非常好的一个特性。

1. 创建CDI配置文件：beans.xml


2. 为CustomerSessionBean加上标注：@javax.inject.Named
加上该标注后，CustomerSessionBean就可以在Expression Language中引用。

3. 为项目增加JSF2特性
右键项目，选择属性，选择框架，增加JavaServer Faces。
完成后会生成web.xml（其中注册了Faces Servlet）和index.xhtml。




4. 创建Faceslet模板
右键项目，选择新建，选择JavaServer Faces，选择Facelets模板：

模板文件一般放在WEB-INF目录下：

完成后，template.xhtml内容如下：
<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./../resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Facelets Template</title>
    </h:head>

    <h:body>

        <div id="top">
            <ui:insert name="top"><h1>Java EE 6 Sample App</h1></ui:insert>
        </div>

        <div id="content" class="center_content">
            <ui:insert name="content">Content</ui:insert>
        </div>

        <div id="bottom">
            <ui:insert name="bottom"><center>Powered by GlassFish!</center></ui:insert>
        </div>

    </h:body>

</html>

可以看出，template.xhtml使用了ui:insert 定义了name="top"、name="content"、name="bottom"三个部分。

5. 创建JSF页面，继承Faceslet模板
右键项目，选择新建，选择JavaServer Faces，选择Facelets模板客户端

完成后，index.xhtml内容如下：
<html 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:ez="http://java.sun.com/jsf/composite/ezcomp">

    <body>

        <ui:composition template="./WEB-INF/template.xhtml">
            <ui:define name="content">
               <h:dataTable value="#{customerSessionBean.customers}" var="c">
               <f:facet name="header">
                  <h:outputText value="Customer Table" />
               </f:facet>
               <h:column>
                  <f:facet name="header">Customer Name</f:facet>
                   #{c.name}
               </h:column>
               <h:column>
                  <f:facet name="header">Customer ID</f:facet>
                  #{c.customerId}
               </h:column>
            </h:dataTable>
            </ui:define>
        </ui:composition>
    </body>
</html>

可以看出，index.xhtml使用了ui:define重新定义了name="content"部分。

6. 运行index.xhtml页面
标签：

没有评论:

发表评论

订阅： 博文评论 (Atom)