在JSF2.0 Web 应用程序中使用 Hibernate（2）

 

创建 JSF 受管 Bean

在本练习中，将创建一个 JSF 受管 Bean。受管 Bean 中的方法用于显示 JSF 页面中的数据，以及访问 helper 类中的方法以检索记录。JSF 2.0 规范允许在 Bean 类中使用标注以将类标识为 JSF 受管 Bean，以及指定范围和 Bean 名称。

要创建受管 Bean，请执行以下步骤。

1. 右键单击 dvdrental 源包节点，然后选择“新建”>“其他”。
2. 从 JavaServer Faces 类别中选择“JSF 受管 Bean”。单击“下一步”。
3. 键入 FilmController 作为类名。

   在调用受管 Bean 中的方法时，将使用 Bean 名称 filmController 作为 JSF 页面 index.xhtml 中的 inputText 和 commandButton 的值。

4. 选择 dvdrental 作为包。
5. 键入 filmController 作为将用于受管 Bean 的名称。
6. 将“范围”设置为“会话”。单击“完成”。

单击“完成”后，IDE 创建 Bean 类并在编辑器中打开该类。IDE 添加了 @ManagedBean 和 @SessionScoped 标注以及 Bean 名称。

@ManagedBean(name="filmController")
@SessionScoped
public class FilmController {

    /** Creates a new instance of FilmController */
    public FilmController() {
    }

}

 

1. 将以下字段（以粗体显示）添加到类中。

   @ManagedBean(name="filmController")
   @SessionScoped
   public class FilmController {
       int startId;     int endId;     DataModel filmTitles;     FilmHelper helper;     private int recordCount = 1000;     private int pageSize = 10;      private Film current;     private int selectedItemIndex;
   }

2. 添加以下代码（以粗体显示），创建 FilmController 实例并检索影片。

   /** Creates a new instance of FilmController */
   public FilmController() {
       helper = new FilmHelper();     startId = 1;     endId = 10; }  public FilmController(int startId, int endId) {     helper = new FilmHelper();     this.startId = startId;     this.endId = endId; }  public Film getSelected() {     if (current == null) {         current = new Film();         selectedItemIndex = -1;     }     return current; }   public DataModel getFilmTitles() {     if (filmTitles == null) {         filmTitles = new ListDataModel(helper.getFilmTitles(startId, endId));     }     return filmTitles; }  void recreateModel() {     filmTitles = null; }

3. 添加用于显示表和导航页面的以下方法。

   public boolean isHasNextPage() {         if (endId + pageSize <= recordCount) {             return true;         }         return false;     }      public boolean isHasPreviousPage() {         if (startId-pageSize > 0) {             return true;         }         return false;     }      public String next() {         startId = endId+1;         endId = endId + pageSize;         recreateModel();         return "index";     }      public String previous() {         startId = startId - pageSize;         endId = endId - pageSize;         recreateModel();         return "index";     }      public int getPageSize() {         return pageSize;     }      public String prepareView(){         current = (Film) getFilmTitles().getRowData();         return "browse";     }     public String prepareList(){         recreateModel();         return "index";     } 

   返回 "index" 或 "browse" 的方法将提示 JSF 导航处理程序尝试打开名为 index.xhtml 或 browse.xhtml 的页面。JSF 2.0 规范允许在使用 Facelets 技术的应用程序中使用隐式导航规则。此应用程序中，没有在 faces-config.xml 中配置任何导航规则。导航处理程序将尝试在应用程序中查找合适的页面。

4. 添加以下方法以访问 helper 类，以便检索其他影片详细信息。

        public String getLanguage() {         int langID = current.getLanguageByLanguageId().getLanguageId().intValue();         String language = helper.getLangByID(langID);         return language;     }      public String getActors() {         List actors = helper.getActorsByID(current.getFilmId());         StringBuffer totalCast = new StringBuffer();         for (int i = 0; i < actors.size(); i++) {             Actor actor = (Actor) actors.get(i);             totalCast.append(actor.getFirstName());             totalCast.append(" ");             totalCast.append(actor.getLastName());             totalCast.append("  ");         }         return totalCast.toString();     }      public String getCategory() {         Category category = helper.getCategoryByID(current.getFilmId());         return  category.getName();     }
   

5. 修复导入 (Ctrl-Shift-I) 并保存更改。

您可以在编辑器中使用代码完成以帮助键入代码。

创建 Web 页面

在本练习中，将创建两个 Web 页以显示数据。您将修改 IDE 生成的 index.xhtml 以添加一个表，以便显示数据库中的影片。然后创建 browse.xhtml，以便在单击表中的 "View" 链接时显示影片的详细信息。还会创建一个 JSF 模板页面以供 index.xhtml 和 browse.xhtml 使用。

有关使用 JSF 2.0 和 Facelets 模板的更多信息，请参见 JavaServer Faces 2.0 简介。

创建 template.xhtml

首先，创建 JSF Facelets 模板 template.xhtml，在创建 index.xhtml 和 browse.xhtml 页面时将使用该模板。

1. 在“项目”窗口中右键单击 "DVDStore"，然后选择“新建”>“其他”。
2. 在 JavaServer Faces 类别中选择“Facelets 模板”。单击“下一步”。
3. 键入 template 作为文件名，并选择第一个 CSS 布局样式。
4. 单击“完成”。

   单击“完成”后，template.xhtml 文件在编辑器中打开。该模板包含以下缺省代码。

   <h:body>
   
       <div id="top" class="top">
           <ui:insert name="top">Top</ui:insert>
       </div>
   
       <div id="content" class="center_content">
           <ui:insert name="content">Content</ui:insert>
       </div>
   
   </h:body>

5. 修改 <ui:insert> 元素，以将生成的缺省名称更改为 "body"。

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

6. 保存所做的更改。

index.xhtml 和 browse.xhtml 中的 <ui:define name="body"> 元素包含的内容将插入到使用模板中的 <ui:insert name="body">Content</ui:insert> 指定的位置。

修改 index.xhtml

在创建 Web 应用程序时，IDE 将自动生成 index.xhtml 页面。在本练习中，将修改该页面以显示影片名称列表。JSF 页面调用 JSF 受管 Bean FilmController 中的方法以检索影片列表，然后显示一个包含影片名称和说明的表格。

1. 展开“项目”窗口的“Web 页”文件夹，并在编辑器中打开 index.xhtml。

   “新建项目”向导生成了以下缺省 index.xhtml 页面。

   <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:h="http://java.sun.com/jsf/html">
   <h:head>
           <title>Facelet Title</title>
       </h:head>
       <h:body>
           Hello from Facelets
       </h:body>
   </html>

2. 修改该页面以使用 JSF <ui:composition> 和 <ui:define> 元素，并添加 <h:form> 元素。

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

   开始键入标记时，IDE 将添加 xmlns:ui="http://java.sun.com/jsf/facelets" 标记库声明。

   <ui:composition> 和 <ui:define> 元素将与所创建的页面模板结合使用。<ui:composition> 元素引用此页面将使用的模板的位置。<ui:define> 元素引用包含的代码将占用的模板位置。

3. 添加以下导航链接以调用 JSF 受管 Bean 中的 previous 和 next 方法。

       <ui:define name="body">
               <h:form>
                   <h:commandLink action="#{filmController.previous}" value="Previous #{filmController.pageSize}" rendered="#{filmController.hasPreviousPage}"/>                  <h:commandLink action="#{filmController.next}" value="Next #{filmController.pageSize}" rendered="#{filmController.hasNextPage}"/> 
               </h:form>
       </ui:define>

4. 添加以下 dataTable 元素（以粗体显示）来生成表，以便显示检索到的条目。

               <h:form styleClass="jsfcrud_list_form">
                   <h:commandLink action="#{filmController.previous}" value="Previous #{filmController.pageSize}" rendered="#{filmController.hasPreviousPage}"/> 
                   <h:commandLink action="#{filmController.next}" value="Next #{filmController.pageSize}" rendered="#{filmController.hasNextPage}"/> 
                   <h:dataTable value="#{filmController.filmTitles}" var="item" border="0" cellpadding="2" cellspacing="0" rowClasses="jsfcrud_odd_row,jsfcrud_even_row" rules="all" style="border:solid 1px">                     <h:column>                         <f:facet name="header">                             <h:outputText value="Title"/>                         </f:facet>                         <h:outputText value="#{item.title}"/>                     </h:column>                     <h:column>                         <f:facet name="header">                             <h:outputText value="Description"/>                         </f:facet>                         <h:outputText value="#{item.description}"/>                     </h:column>                     <h:column>                         <f:facet name="header">                             <h:outputText value=" "/>                         </f:facet>                         <h:commandLink action="#{filmController.prepareView}" value="View"/>                     </h:column>                 </h:dataTable>                 <br/>
               </h:form>
   

5. 保存所做的更改。

现在，index 页面将显示数据库中的影片名称列表。表中的每一行都包含 "View" 链接，用于调用受管 Bean 中的 prepareView 方法。prepareView 方法返回 "browse" 并打开 browse.xhtml。

键入 <f:facet> 标记时，IDE 将添加 xmlns:f="http://java.sun.com/jsf/core 标记库声明。

创建 browse.xhtml

现在，将创建 browse.xhtml 页面以显示所选影片的详细信息。可以使用“Facelets 模板客户端”向导基于所创建的 JSF Facelets 模板 template.xhtml 创建该页面。

1. 在“项目”窗口中右键单击 "DVDStore"，然后选择“新建”>“其他”。
2. 在 JavaServer Faces 类别中选择“Facelets 模板客户端”。单击“下一步”。
   
3. 键入 browse 作为文件名。
4. 单击“浏览”打开“浏览文件”对话框以查找页面模板。
5. 展开“Web 页”文件夹并选择 template.xhtml。单击“选择文件”。
   
6. 选择 <ui:composition> 作为生成的根标记。单击“完成”。

   单击“完成”时，browse.xhtml 文件在编辑器中打开，其中包含以下代码。

   <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
       template="./template.xhtml">
   
       <ui:define name="top">
           top
       </ui:define>
   
       <ui:define name="body">
           body
       </ui:define>
   
   </ui:composition>

   您可以看到新文件指定了 template.xhtml 文件，并且 <ui:define> 标记具有属性 name="body"。

7. 在 <ui:define> 标记之间添加以下代码（以粗体显示）以创建表单，并调用受管 Bean FilmController 中的方法以检索数据和填充表单。

   <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
       template="./template.xhtml"
       xmlns:h="http://java.sun.com/jsf/html"     xmlns:f="http://java.sun.com/jsf/core">
   
           <ui:define name="top">
               top
           </ui:define>
   
           <ui:define name="body">
                        <h:form>                 <h:panelGrid columns="2">                     <h:outputText value="Title:"/>                     <h:outputText value="#{filmController.selected.title}" title="Title"/>                     <h:outputText value="Description"/>                     <h:outputText value="#{filmController.selected.description}" title="Description"/>                     <h:outputText value="Genre"/>                     <h:outputText value="#{filmController.category}"/>                      <h:outputText value="Cast"/>                     <h:outputText value="#{filmController.actors}"/>                       <h:outputText value="Film Length"/>                     <h:outputText value="#{filmController.selected.length} min" title="Film Length"/>                      <h:outputText value="Language"/>                     <h:outputText value="#{filmController.language}" title="Film Length"/>                      <h:outputText value="Release Year"/>                     <h:outputText value="#{filmController.selected.releaseYear}" title="Release Year">                         <f:convertDateTime pattern="MM/dd/yyyy" />                     </h:outputText>                     <h:outputText value="Rental Duration"/>                     <h:outputText value="#{filmController.selected.rentalDuration}" title="Rental DUration"/>                     <h:outputText value="Rental Rate"/>                     <h:outputText value="#{filmController.selected.rentalRate}" title="Rental Rate"/>                     <h:outputText value="Replacement Cost"/>                     <h:outputText value="#{filmController.selected.replacementCost}" title="Replacement Cost"/>                     <h:outputText value="Rating"/>                     <h:outputText value="#{filmController.selected.rating}" title="Rating"/>                     <h:outputText value="Special Features"/>                     <h:outputText value="#{filmController.selected.specialFeatures}" title="Special Features"/>                     <h:outputText value="Last Update"/>                     <h:outputText value="#{filmController.selected.lastUpdate}" title="Last Update">                         <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" />                     </h:outputText>                 </h:panelGrid>                 <br/>                 <br/>                 <h:commandLink action="#{filmController.prepareList}" value="View All List"/>                 <br/>             </h:form> 
           </ui:define>
       </ui:composition>
   </html>

   您可以看到 browse.xhtml 和 index.xhtml 使用相同的页面模板。

8. 保存所做的更改。

运行项目

应用程序的基础部分现已完成。现在，您可以运行应用程序以检查其是否正常运行。

1. 在主工具栏中单击“运行主项目”或在“项目”窗口中右键单击 DVDStore 应用程序节点并选择“运行”。

   IDE 保存所有更改过的文件，构建应用程序并将应用程序部署到服务器。IDE 将打开浏览器窗口并指向 URL http://localhost:8080/DVDStore/ 以显示影片列表。

   
2. 在浏览器中，单击 "View" 加载 browse.xhtml 以查看影片详细信息。

下载解决方案项目

您可以采用下列方法下载本教程的解决方案（作为一个项目）。

• 下载已完成项目的 zip 归档文件。
• 通过执行以下步骤从 NetBeans 样例签出项目源代码：
  1. 从主菜单中选择“团队开发”> "Subversion" >“签出”。
  2. 在“签出”对话框中，输入以下资源库 URL：
     https://svn.netbeans.org/svn/samples~samples-source-code
     单击“下一步”。
  3. 单击“浏览”以打开“浏览资源库文件夹”对话框。
  4. 展开根目录节点，然后选择 "samples/javaee/DVDStoreEE6"。单击“确定”。
  5. 指定用于存储源代码的本地文件夹（本地文件夹必须为空）。
  6. 单击“完成”。

     单击“完成”后，IDE 会将本地文件夹初始化为 Subversion 资源库，并签出项目源代码。

  7. 在完成签出操作后将会显示一个对话框，在该对话框中单击“打开项目”。

  注意：

  • 从 Kenai 签出源代码的步骤仅适用于 NetBeans IDE 6.8。
  • 需要 Subversion 客户端以从 Kenai 签出源代码。有关安装 Subversion 的更多信息，请参见 NetBeans IDE 中的 Subversion 指南中有关设置 Subversion 的部分。