14. 第 9 版：使用 PrimeFaces 实现 Web 层

先决条件：阅读 [ref3] 中的“PrimeFaces 入门”。

问题 1：创建一个类型为 [Web Application] 的新 Maven 项目，其中使用 PrimeFaces 组件构建前一个示例中的 XHTML 页面。请勿对 Bean 进行任何修改。

主页使用了 <p:panel>、<p:inputText>、<p:selectOneMenu> 和 <p:message> 组件：

输入错误：

一个模拟：

该模拟列表使用了 <p:dataTable> 和 <p:commandLink> 组件：

AJAX 方法将更新 id 为 'formulaire' 的区域，该区域包含整个页面（参见下文第 11 行）：


<h:commandLink id="cmdTerminerSession" immediate="true" value="#{msg['form.menu.terminerSession']}" action="#{form.terminerSession}" rendered="#{sessionData.menuTerminerSessionIsRendered}"/>

一旦您的应用程序运行正常，请用以下页面替换 [entete.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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
 
  <f:view locale="#{sessionData.locale}">
    ...
    <h:body style="background-image: url('${request.contextPath}/resources/images/standard.jpg');">
      <h:form id="formulaire">
        <!-- entete -->
        <ui:include src="entete.xhtml" />
        <!-- content -->
        <ui:insert name="part1" >
          Gestion des assistantes maternelles
        </ui:insert>
        <ui:insert name="part2"/>
      </h:form>
    </h:body>
  </f:view>
</html>

第 15 行：一个 PrimeFaces 菜单栏，
第 16 行：该菜单栏中的一个菜单选项，
第 17 行：该菜单选项中的一个项目。

此更改不会影响模型。新的视图如下：