• NetBeans IDE Java 包还包括本教程所需的 GlassFish Server 3.0.1（一种 Java EE 6 兼容的服务器）。
• 要将您的项目与工作解决方案进行比较，请下载完成的样例项目。

<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <welcome-file-list>
        <welcome-file>faces/index.xhtml</welcome-file>
    </welcome-file-list>
</web-app>

使用受管 Bean 向导

1. 在“项目”窗口中，右键单击 jsfDemo 项目节点，然后选择“新建”>“JSF 受管 Bean”。（如果未列出“受管 Bean”，请选择“其他”。然后从 "JavaServer Faces" 类别中选择“JSF 受管 Bean”选项。单击“下一步”。）
2. 在向导中，输入以下内容：
   • 类名：UserNumberBean
   • 包：guessNumber
   • 范围：Session
   
3. 单击“完成”。将会生成 UserNumberBean 类并在编辑器中将其打开。注意以下标注（粗体显示）：

   package guessNumber;
   
   import javax.faces.bean.ManagedBean;
   import javax.faces.bean.SessionScoped;
   
   /**
    *
    * @author nbuser
    */
   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean {
   
       /** Creates a new instance of UserNumberBean */
       public UserNumberBean() {
       }
   
   }

   因为您使用的是 JSF 2.0，所以可以使用标注来声明所有 JSF 特定的组件。在以前的版本中，您需要在 Faces 配置文件 (faces-config.xml) 中对其进行声明。
   
   要查看所有 JSF 2.0 标注的 Javadoc，请参见 Faces 受管 Bean 标注规范。

创建构造函数

UserNumberBean 构造函数必须生成一个 0 到 10 之间的随机数字并将其存储到一个实例变量中。这就构成了应用程序的部分业务逻辑。

1. 为 UserNumberBean 类定义一个构造函数。输入以下代码（更改内容以粗体显示）。

   public class UserNumberBean {
   
       Integer randomInt;
   
       /** Creates a new instance of UserNumberBean */
       public UserNumberBean() {
           Random randomGR = new Random();
           randomInt = new Integer(randomGR.nextInt(10));
           System.out.println("Duke's number: " + randomInt);
       }
   
   }

   以上代码将生成一个 0 到 10 之间的随机数字，并将其输出到服务器日志中。
2. 修复导入。为此，请单击显示在编辑器左旁注中的提示标记 ()，然后选择将 java.util.Random 导入到类中的选项。
3. 重新运行项目（单击“运行项目”() 按钮，或者按 F6 键；在 Mac 上为 fn-F6 组合键）。当运行项目时，服务器的日志文件将自动在“输出”窗口中打开。
   
4. 请注意，输出中并未列出 "Duke's number:"（从构造函数中也表明了这一点）。因为缺省情况下 JSF 使用延迟实例化，所以未创建 UserNumberBean 对象。也就是说，只有当应用程序需要时才会创建和初始化特定范围中的 Bean。
   
   @ManagedBean 标注的 Javadoc 中描述了以下内容：
   
   
   如果 eager() 属性的值为 true，且 managed-bean-scope 的值为 "application"，则当应用程序启动时，运行时必须对该类执行实例化操作。必须在提供任何请求服务之前，对实例执行实例化和存储操作。如果 eager 未指定或为 false，或者 managed-bean-scope 不是 "application"，则会发生受管 Bean 的缺省“延迟”实例化和作用域存储。
5. 要对此进行测试，可暂时对 UserNumberBean 类进行如下修改。（更改内容以粗体显示。）

   @ManagedBean(name="UserNumberBean", eager=true)
   @ApplicationScoped
   public class UserNumberBean {

6. 在编辑器中单击鼠标右键，然后选择“修复导入”（Alt-Shift-I 组合键；在 Mac 上为 &#8984-Shift-I 组合键）。使用 IDE 的“修复所有导入”对话框添加一个 javax.faces.bean.ApplicationScoped 导入，并删除现有的 SessionScoped 导入。
7. 请在运行项目之前，先清除服务器日志。可以右键单击“输出”窗口的服务器日志，然后选择“清除”（Ctrl-L 组合键；在 Mac 上为 &#8984-L 组合键）来完成此操作。
8. 重新运行项目。为此，可以使用“输出”窗口的左旁注中的按钮。首先单击 jsfDemo (run) 标签，然后单击“重新运行”() 按钮重新运行该项目。
9. 检查服务器的日志文件。这次您可以看到 "Duke's number:" 字符串了，这表示已创建了一个 UserNumberBean 对象。
   
10. 将 UserNumberBean 类更改回以前的内容。（还原上述步骤 5 中所做的更改。）

    @ManagedBean(name="UserNumberBean")
    @SessionScoped
    public class UserNumberBean {

    确保添加了 javax.faces.bean.SessionScoped 导入声明并删除了 ApplicationScoped 导入声明。
11. 因为 UserNumberBean 属于会话范围，所以它将实现 Serializable 接口。

    @ManagedBean(name = "UserNumberBean")
    @SessionScoped
    public class UserNumberBean implements Serializable {

    使用提示标记 () 将 java.io.Serializable 导入到类中。

添加属性

您在下一部分创建的 Facelets 页将需要访问用户键入的数字和生成的响应。为了便于实现此功能，请将 userNumber 和 response 属性添加到类中。

1. 首先声明一个名为 userNumber 的 Integer。

   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean implements Serializable {
   
       Integer randomInt;
       Integer userNumber;

2. 在编辑器中单击鼠标右键，然后选择“插入代码”（Alt-Insert 组合键；在 Mac 上为 Ctrl-I 组合键）。选择“Getter 和 Setter”。
   
3. 选择 userNumber : Integer 选项。
   
   单击“生成”。请注意，getUserNumber() 和 setUserNumber(Integer userNumber) 方法已添加到类中。
4. 创建一个 response 属性。声明一个名为 response 的 String。

   @ManagedBean(name="UserNumberBean")
   @SessionScoped
   public class UserNumberBean implements Serializable {
   
       Integer randomInt;
       Integer userNumber;
       String response;

5. 为 response 创建一个 getter 方法。（本应用程序不需要 setter。）可以使用以上步骤 2 中显示的 IDE 的“生成代码”弹出式窗口来生成模板代码。但是就本教程而言，只需将以下方法粘贴到类中即可。

   public String getResponse() {
       if ((userNumber != null) && (userNumber.compareTo(randomInt) == 0)) {
   
           //invalidate user session
           FacesContext context = FacesContext.getCurrentInstance();
           HttpSession session = (HttpSession) context.getExternalContext().getSession(false);
           session.invalidate();
   
           return "Yay! You got it!";
       } else {
   
           return "<p>Sorry, " + userNumber + " isn't it.</p>"
                   + "<p>Guess again...</p>";
       }
   }

   上面的方法执行了两个功能：
   1. 测试用户输入的数字 (userNumber) 是否等于为会话生成的随机数字 (randomInt)，并相应地返回一个 String 响应。
   2. 如果用户猜对了数字（即，如果 userNumber 等于 randomInt），则将使用户会话失效。这是必需的，以便当用户希望再玩一次时会生成一个新的数字。
6. 在编辑器中单击鼠标右键，然后选择“修复导入”（Alt-Shift-I 组合键；在 Mac 上为 &#8984-Shift-I 组合键）。将为以下内容自动创建导入声明：
   • javax.servlet.http.HttpSession
   • javax.faces.context.FacesContext

   可以在编辑器中的项目上按 Ctrl-空格键以调用代码完成建议和文档支持。在 FacesContext 上按 Ctrl-空格键来查看 Javadoc 中的类描述。

   
   
   在文档窗口中单击 Web 浏览器 () 图标，在外部 Web 浏览器中打开 Javadoc。

index.xhtml

1. 在编辑器中打开 index.xhtml 页。双击“项目”窗口中的 "index.xhtml" 节点，或者按 Alt-Shift-O 组合键以使用“转至文件”对话框。
   
   索引页和响应页都已包含了本练习所需的 JSF UI 组件。只需取消其注释，并注释掉当前正在使用的 HTML 元素。
2. 注释掉 HTML 表单元素。为此，请按照下图所示突出显示 HTML 表单元素，然后按 Ctrl-/ 组合键（在 Mac 上为 &#8984-/ 组合键）。
   
   注意：要突出显示该表单元素，可以单击该元素，然后用鼠标在编辑器中拖动；也可以使用键盘，按住 Shift 键并按方向键。
   

   在编辑器中使用 Ctrl-/ 组合键（在 Mac 上为 &#8984-/ 组合键）启用/禁用注释。还可以将此快捷键应用于其他文件类型，如 Java 和 CSS。

3. 取消 JSF HTML 表单组件的注释。如下图所示突出显示组件，然后按 Ctrl-/ 组合键（在 Mac 上为 &#8984-/ 组合键）。
   
   取消 JSF HTML 表单组件的注释之后，编辑器指示 <h:form>、<h:inputText> 和 <h:commandButton> 标记未进行声明。
   
4. 要声明这些组件，请使用 IDE 的代码完成将标记库名称空间添加到页面的 <html> 标记中。将光标置于任何未声明的标记上，然后按 Ctrl-空格键。将显示代码完成建议和文档支持。
   
   按 Enter 键。（如果有多个选项，请确保按 Enter 键之前选择了在编辑器中显示的标记。）JSF HTML 标记库名称空间将被添加到 <html> 标记中（如以下粗体所示），并且错误指示符将消失。

   <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:h="http://java.sun.com/jsf/html">

5. 使用 JSF 表达式语言将 UserNumberBean 的 userNumber 属性绑定到 inputText 组件。value 属性可用于指定所呈现组件的当前值。键入以下粗体显示的代码。

   <h:form>
       <h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />

   JSF 表达式语言使用 #{} 语法。在这些分隔符内，会指定用点 (.) 分隔的受管 Bean 的名称和需要应用的 Bean 属性。现在，将表单数据发送至服务器时，会使用属性的 setter (setUserNumber()) 将该值自动保存到 userNumber 属性中。此外，当请求页面且已设置 userNumber 的值时，该值将自动显示在呈现的 inputText 组件中。有关详细信息，请参见 Java EE 6 教程：使用统一 EL 引用支持 Bean。
6. 为单击表单按钮时调用的请求指定目标。在 HTML 表单版本中，可以使用 <form> 标记的 action 属性来完成此操作。在 JSF 中，可以使用 commandButton 的 action 属性。此外，由于 JSF 2.0 的隐式导航功能，您只需指定目标文件的名称，而无需文件扩展名。
   
   键入以下粗体显示的代码。

   <h:form>
       <h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
       <h:commandButton id="submit" value="submit" action="response" />
   </h:form>

   JSF 运行时将搜索一个名为 response 的文件。JSF 运行时将假定文件扩展名与请求源自的文件 (index.xhtml) 所使用的扩展名相同，并在与源文件相同的目录（即 Web 根目录）中查找 response.xhtml 文件。
   
   注意：JSF 2.0 旨在帮助开发者更轻松地执行任务。如果您在本项目中使用的是 JSF 1.2，则需要在 Faces 配置文件中声明一条类似于以下内容的导航规则：

   <navigation-rule>
       <from-view-id>/index.xhtml</from-view-id>
   
       <navigation-case>
           <from-outcome>response</from-outcome>
           <to-view-id>/response.xhtml</to-view-id>
       </navigation-case>
   </navigation-rule>

   以下步骤 7 至 12 为可选操作。如果希望快速生成项目，请跳至 response.xhtml。
7. 测试当处理请求时上述 EL 表达式是否实际调用了 setUserNumber() 方法。要执行此操作，请使用 IDE 的 Java 调试器。
   
   切换到 UserNumberBean 类（按 Ctrl-Tab 组合键，然后从列表中选择文件。）在 setUserNumber() 方法签名上设置一个断点。可以通过单击左旁注来完成此操作。将显示一个红色的标记，表示已设置方法断点。
   
8. 单击 IDE 主工具栏上的“调试项目” () 按钮。将启动调试会话，并在浏览器中打开项目欢迎页面。
   
   注意：如果显示了“调试项目”对话框，请选择缺省“服务器端 Java”选项，然后单击“调试”。
9. 在浏览器中，将数字输入表单中，然后单击 "submit" 按钮。
10. 切换回 IDE 并检查 UserNumberBean 类。在 setUserNumber() 方法内暂停执行调试器。
    
11. 打开调试器的“变量”窗口（选择“窗口”>“调试”>“变量”，或者按 Ctrl-Shift-1 组合键）。将看到调试器暂停所在点的变量值。
    
    在上图中，setUserNumber() 签名中 userNumber 变量的值为 "4"。（表单中输入了数字 4。）"this" 指的是为用户会话创建的 UserNumberBean 对象。在其下方，可看到 userNumber 属性的值目前为 null。
12. 在“调试器”工具栏中，单击“步入”() 按钮。调试器将执行当前暂停的行。“变量”窗口将刷新，表示执行产生的更改。
    
    userNumber 属性现在被设置为表单中输入的值。

response.xhtml

1. 在编辑器中打开 response.xhtml 页。双击“项目”窗口中的 "response.xhtml" 节点，或者按 Alt-Shift-O 组合键以使用“转至文件”对话框。
2. 注释掉 HTML 表单元素。突出显示 HTML <form> 起始标记和结束标记及其之间的代码，然后按 Ctrl-/ 组合键（在 Mac 上为 &#8984-/ 组合键）。
   
   注意：要突出显示该表单元素，可以单击该元素，然后用鼠标在编辑器中拖动；也可以使用键盘，按住 Shift 键并按方向键。
3. 取消 JSF HTML 表单组件的注释。突出显示 <h:form> 起始标记和结束标记及其之间的代码，然后按 Ctrl-/ 组合键（在 Mac 上为 &#8984-/ 组合键）。
   
   此时，<body> 标记之间的代码如下所示：

   <body>
       <div id="mainContainer">
   
           <div id="left" class="subContainer greyBox">
   
               <h4>[ response here ]</h4>
   
               <!--<form action="index.xhtml">
   
                   <input type="submit" id="backButton" value="Back"/>
   
               </form>-->
   
               <h:form>
   
                   <h:commandButton id="backButton" value="Back" />
   
               </h:form>
   
           </div>
   
           <div id="right" class="subContainer">
   
               <img src="duke.png" alt="Duke waving" />
                <!--<h:graphicImage url="/duke.png" alt="Duke waving" />-->
   
           </div>
       </div>
   </body>

   在取消 JSF HTML 表单组件的注释后，编辑器将指示 <h:form> 和 <h:commandButton> 标签未进行声明。
4. 要声明这些组件，请使用 IDE 的代码完成将标记库名称空间添加到页面的 <html> 标记中。

   使用编辑器的代码完成支持将所需的 JSF 名称空间添加到文件中。当通过代码完成选择一个 JSF 或 Facelets 标记时，会自动将所需的名称空间添加到文档的根元素中。有关详细信息，请参见 NetBeans IDE 中的 JSF 2.0 支持。

   将光标置于任何未声明的标记上，然后按 Ctrl-空格键。将显示代码完成建议和文档支持。
   
   按 Enter 键。（如果有多个选项，请确保按 Enter 键之前选择了在编辑器中显示的标记。）JSF HTML 标记库名称空间将被添加到 <html> 标记中（如以下粗体所示），并且错误指示符将消失。

   <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:h="http://java.sun.com/jsf/html">

5. 为用户单击表单按钮时调用的请求指定目标。您希望设置一个按钮以便当用户单击该按钮时，会返回到索引页。要完成此功能，请使用 commandButton 的 action 属性。键入以粗体显示的代码。

   <h:form>
   
       <h:commandButton id="backButton" value="Back" action="index" />
   
   </h:form>

   注意：通过键入 action="index"，将可依赖 JSF 的隐式导航功能。当用户单击表单按钮时，JSF 运行时会搜索一个名为 index 的文件。JSF 运行时将假定文件扩展名与请求源自的文件 (response.xhtml) 所使用的扩展名相同，并在与源文件相同的目录（即 Web 根目录）中查找 index.xhtml 文件。
6. 将静态的 "[ response here ]" 文本替换为 UserNumberBean 的 response 属性值。要执行此操作，请使用 JSF 表达式语言。输入以下内容（粗体显示）。

   <div id="left" class="subContainer greyBox">
   
       <h4><h:outputText value="#{UserNumberBean.response}"/></h4>

7. 运行项目（单击“运行项目”() 按钮，或者按 F6 键；在 Mac 上为 fn-F6 组合键）。当浏览器中显示欢迎页面时，输入一个数字，然后单击 submit。将看到响应页显示类似于以下的内容（如果您没有猜对数字）。
   
   响应页的当前状态中有两处错误：
   1. html <p> 标记显示在了响应消息中。
   2. "Back" 按钮没有显示在正确的位置。（请与原始版本作比较。）
   以下两个步骤分别更正了这两个问题。
8. 将 <h:outputText> 标记的 escape 属性设置为 false。将光标置于 outputText 和 value 之间，插入一个空格，然后按 Ctrl-空格键调用代码完成。向下滚动以选择 escape 属性并检查文档。
   
   如文档所示，缺省情况下，escape 值被设为 true。这意味着任何被正常解析为 html 的字符都包含在此字符串中，如上所示。将该值设置为 false，将使任何可解析为 html 的字符都像这样来呈现。
   
   按 Enter 键，然后键入 false 作为值。

   <h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>

9. 将 <h:form> 标记的 prependId 属性设置为 false。将光标置于 <h:form> 中 "m" 的后面并插入一个空格，然后按 Ctrl-空格键调用代码完成。向下滚动以选择 prependId 属性并检查文档。然后按 Enter 键，并键入 false 作为值。

   <h:form prependId="false">

   JSF 应用内部 id 来跟踪 UI 组件。在当前的示例中，如果检查所呈现页面的源代码，将看到如下内容：

   <form id="j_idt5" name="j_idt5" method="post" action="/jsfDemo/faces/response.xhtml" enctype="application/x-www-form-urlencoded">
   <input type="hidden" name="j_idt5" value="j_idt5" />
       <input id="j_idt5:backButton" type="submit" name="j_idt5:backButton" value="Back" />
       <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="7464469350430442643:-8628336969383888926" autocomplete="off" />
   </form>

   表单元素的 id 为 j_idt5，并且此 id 被置于包含在表单中的 "Back" 按钮的 id 前面（如以上粗体显示）。因为 "Back" 按钮依赖于 #backButton 样式规则（在 stylesheet.css 中定义），所以在前置 JSF id 时，将禁用该规则。可以通过将 prependId 设置为 false 来避免这种情况。
10. 重新运行项目（单击“运行项目”() 按钮，或者按 F6 键；在 Mac 上为 fn-F6 组合键）。在欢迎页面输入一个数字，然后单击 "Submit"。现在响应页显示了不带 <p> 标记的响应消息，并且 "Back" 按钮放在了正确的位置。
    
11. 单击 "Back" 按钮。因为 UserNumberBean 的 userNumber 属性的当前值绑定到了 JSF inputText 组件，所以您之前输入的数字现在显示在文本字段中。
12. 在 IDE 的“输出”窗口中检查服务器日志（Ctrl-4 组合键；在 Mac 上为 &#8984-4 组合键），以确定正确的猜测数字是什么。

    如果由于某种原因无法看到服务器日志，可以通过切换到“服务”窗口（Ctrl-5 组合键；在 Mac 上为 &#8984-5 组合键）并展开“服务器”节点来打开日志。然后右键单击项目部署所在的 GlassFish 服务器，并选择“查看服务器日志”。

13. 键入正确的数字，然后单击 "Submit"。应用程序将您的输入与当前保存的数字进行比较，并显示相应的消息。
    
14. 再次单击 "Back" 按钮。请注意，以前输入的数字在文本字段中不再显示。回想一下，当猜对了数字后，UserNumberBean 的 getResponse() 方法就会使当前的用户会话失效。

创建 Facelets 模板文件

1. 创建一个 Facelets 模板文件。按 Ctrl-N 组合键（在 Mac 上为 &#8984-N 组合键）来打开文件向导。选择 "JavaServer Faces" 类别，然后选择“Facelets 模板”。单击“下一步”。
2. 键入 template 作为文件名。
3. 从八种布局样式中选择任意一种，然后单击“完成”。（您将使用现有的样式表，所以无论您选择的是哪种布局样式都没有关系。）
   
   该向导会基于您的选择生成 template.xhtml 文件和附带的样式表，并将这些文件置于项目 Web 根目录内的 resources > css 文件夹中。

   完成向导之后，模板文件在编辑器中打开。要在浏览器中查看模板，请右键单击编辑器并选择“视图”。

4. 检查模板文件标记。请注意以下要点：
   • 在页面的 <html> 标记中声明了 facelets 标记库。标记库具有 ui 前缀。

     <html xmlns="http://www.w3.org/1999/xhtml"
           xmlns:ui="http://java.sun.com/jsf/facelets"
           xmlns:h="http://java.sun.com/jsf/html">

   • Facelets 页使用 <h:head> 和 <h:body> 标记而不是 html 的 <head> 和 <body> 标记。通过使用这些标记，Facelets 可以构造一个包含整个页面的组件树。
   • 该页引用了在完成向导操作时同时创建的样式表。

     <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>

   • 对于每个与所选择布局样式相关联的分栏，页面主体中都使用 <ui:insert> 标记。每个 <ui:insert> 标记都有一个 name 属性用于标识分栏。例如：

     <div id="top">
         <ui:insert name="top">Top</ui:insert>
     </div>

5. 重新检查欢迎和响应页面。这两个页面之间唯一更改的内容是包含在灰色方块中的标题和文本。因此，模板可以提供其余所有内容。
6. 将您的模板文件的全部内容替换为如下内容。

   <?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="css/stylesheet.css" rel="stylesheet" type="text/css" />
   
           <title><ui:insert name="title">Facelets Template</ui:insert></title>
       </h:head>
   
       <h:body>
   
           <div id="left">
               <ui:insert name="box">Box Content Here</ui:insert>
           </div>
   
       </h:body>
   
   </html>

   上述代码实现了以下更改：
   • 项目的 stylesheet.css 文件替换了由向导创建的模板样式表引用。
   • 除了一个名为 box 的标记之外，所有 <ui:insert> 标记（及其包含的 <div> 标记）都已删除。
   • 在页面标题周围放置了 <ui:insert> 标记对，并命名为 title。
7. 将 index.xhtml 或 response.xhtml 文件中的相关代码复制到模板中。将以下粗体显示的内容添加到模板文件的 <h:body> 标记中。

   <h:body>
       <div id="mainContainer">
           <div id="left" class="subContainer greyBox">
               <ui:insert name="box">Box Content Here</ui:insert>
           </div>
           <div id="right" class="subContainer">
               <img src="duke.png" alt="Duke waving" />
           </div>
       </div>
   </h:body>

8. 运行项目。当欢迎页面在浏览器中打开时，将 URL 修改为以下内容：

   http://localhost:8080/jsfDemo/faces/template.xhtml

   模板文件将如下所示：
   

此项目现在包含了一个可为所有视图提供外观和结构的模板文件。您现在可以创建调用了模板的客户端文件。

创建模板客户端文件

为欢迎页和响应页创建模板客户端文件。将欢迎页面的模板客户端文件命名为 greeting.xhtml。对于响应页，其模板客户端文件则为 response.xhtml。

greeting.xhtml

1. 按 Ctrl-N 组合键（在 Mac 上为 &#8984-N 组合键）以打开“新建文件”向导。选择 "JavaServer Faces" 类别，然后选择“Facelets 模板客户端”。单击“下一步”。
2. 键入 greeting 作为文件名。
3. 单击“模板”字段旁边的“浏览”按钮，然后使用显示的对话框导航到上一部分创建的 template.xhtml 文件。
   
4. 单击“完成”。将生成新的 greeting.xhtml 模板客户端文件并显示在编辑器中。
5. 检查标记。请注意以粗体突出显示的内容。

   <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:ui="http://java.sun.com/jsf/facelets">
   
       <body>
   
           <ui:composition template="./template.xhtml">
   
               <ui:define name="title">
                   title
               </ui:define>
   
               <ui:define name="box">
                   box
               </ui:define>
   
           </ui:composition>
   
       </body>
   </html>

   模板客户端文件通过使用 <ui:composition> 标记的 template 属性来引用模板。因为模板包含了 title 和 box 的 <ui:insert> 标记，所以该模板客户端包含了这两个名称的 <ui:define> 标记。您在 <ui:define> 标记之间指定的内容就是将插入到模板中相应名称的 <ui:insert> 标记之间的内容。
6. 指定 greeting 作为文件的标题。进行以下更改（粗体显示）。

   <ui:define name="title">
       Greeting
   </ui:define>

7. 切换到 index.xhtml 文件（按 Ctrl-Tab 组合键），然后复制通常会出现在灰色方块（显示在所呈现的页面中）中的内容。然后切换回 greeting.xhtml，并将其粘贴到模板客户端文件中。（更改内容以粗体显示。）

   <ui:define name="box">
       <h4>Hi, my name is Duke!</h4>
   
       <h5>I'm thinking of a number
   
           <br/>
           between
           <span class="highlight">0</span> and
           <span class="highlight">10</span>.</h5>
   
       <h5>Can you guess it?</h5>
   
       <h:form>
           <h:inputText size="2" maxlength="2" value="#{UserNumberBean.userNumber}" />
           <h:commandButton id="submit" value="submit" action="response" />
       </h:form>
   </ui:define>

8. 为该文件声明 JSF HTML 标记库。将光标置于任意一个被标记为错误的标记（任何使用 "h" 前缀的标记）上，然后按 Ctrl-空格键。然后从代码完成建议列表中选择标记。标记库名称空间将被添加到该文件的 <html> 标记中（如以下粗体所示），并且错误指示符将消失。

   <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:form> 中的 "m" 后面，然后按 Ctrl-空格键，则名称空间将自动添加到文件中。如果在按 Ctrl-空格键时仅有一个逻辑选项可用，则会立即将其应用于文件中。当在标记上调用代码完成时，会自动声明 JSF 标记库。

response.xhtml

因为此项目已经包含了一个名为 response.xhtml 的文件，并且您现在已经知道了模板客户端文件应该是什么样的，那么就请将现有的 response.xhtml 修改为模板客户端文件。（就本教程而言，只需复制和粘贴已提供的代码即可。）

1. 在编辑器中打开 response.xhtml。（如果该文件已打开，请按 Ctrl-Tab 组合键并选择该文件。）将整个文件的内容替换为以下代码。

   <?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">
   
       <body>
   
           <ui:composition template="./template.xhtml">
   
               <ui:define name="title">
                   Response
               </ui:define>
   
               <ui:define name="box">
                   <h4><h:outputText escape="false" value="#{UserNumberBean.response}"/></h4>
   
                   <h:form prependId="false">
   
                       <h:commandButton id="backButton" value="Back" action="greeting" />
   
                   </h:form>
               </ui:define>
   
           </ui:composition>
   
       </body>
   </html>

   请注意，该文件除了在 title 和 box 的 <ui:define> 标记之间指定的内容外，与 greeting.xhtml 是相同的。
2. 在此项目的 web.xml 部署描述符中，修改欢迎文件条目以使 greeting.xhtml 成为在运行此应用程序时所打开的页面。
   
   在“项目”窗口中，双击“配置文件”> "web.xml" 以在编辑器中将其打开。在“页面”标签下面，将“欢迎文件”字段更改为 "faces/greeting.xhtml"。
   
3. 运行该项目以查看其在浏览器中的外观。按 F6 键（在 Mac 上为 fn-F6 组合键），或者单击主工具栏上的“运行项目”() 按钮。该项目将被部署到 GlassFish 服务器并在浏览器中打开。

使用了 Facelets 模板和模板客户端文件，该应用程序的行为方式仍与以前一样。通过将应用程序欢迎页和响应页中的重复代码提取出来，可以成功减小应用程序的大小，并避免在以后添加更多页面时可能编写更多的重复代码。在使用大型项目时，这样便可以更有效更轻松地维护开发。

NetBeans 文章和教程

• NetBeans IDE 中的 JSF 2.0 支持
• 通过数据库生成 JavaServer Faces 2.0 CRUD 应用程序
• Scrum 玩具 - JSF 2.0 完整样例应用程序
• Java EE 6 应用程序入门指南
• Java EE 和 Java Web 学习资源

外部资源

• JavaServer Faces 技术（官方主页）
• JavaServer Faces 2.0 的 JSR 314 规范
• Java EE 6 教程第 5 章：JavaServer Faces 技术
• GlassFish 服务器项目 Mojarra（JSF 2.0 的正式引用实现）
• Sun JavaServer Faces 论坛
• JSF Central

博客

• Ed Burns
• Ryan Lubke
• Jim Driscoll