14. نسخه ۹: پیاده‌سازی لایه وب با PrimeFaces

پیش‌نیازها: مطالعهٔ «مقدمه‌ای بر PrimeFaces» در [ref3].

سؤال ۱: یک پروژه جدید Maven از نوع [Web Application] ایجاد کنید، که در آن صفحات XHTML از مثال قبلی با استفاده از کامپوننت‌های PrimeFaces ساخته شوند. هیچ تغییری در بین‌ها (beans) ایجاد نکنید.

صفحه اصلی از کامپوننت‌های <p:panel>, <p:inputText>, <p:selectOneMenu> و <p:message> استفاده می‌کند:

یک ورودی نادرست:

یک شبیه‌سازی:

فهرست شبیه‌سازی‌ها از اجزای <p:dataTable>, <p:commandLink> استفاده می‌کند:

روش‌های AJAX ناحیه با id='formulaire' را که کل صفحه را پوشش می‌دهد، به‌روزرسانی خواهند کرد (به خط ۱۱ زیر مراجعه کنید):


<?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">
        <!-- سربرگ -->
        <ui:include src="entete.xhtml" />
        <!-- محتوا -->
        <ui:insert name="part1" >
          Gestion des assistantes maternelles
        </ui:insert>
        <ui:insert name="part2"/>
      </h:form>
    </h:body>
  </f:view>
</html>

وقتی برنامه‌تان کار می‌کند، صفحه [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:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">


  <!-- سربرگ -->
  <h:panelGroup>
    <h2><h:outputText value="#{msg['form.titre']}"/></h2>
  </h:panelGroup>

  <p:menubar id="menu" header="Menu" style="width: 500px">
    <p:submenu label="#{msg['form.menu.simulation']}">  
      <p:menuitem  id="cmdFaireSimulation" style="width: 200px" value="#{msg['form.menu.faireSimulation']}" actionListener="#{form.faireSimulation}" rendered="#{sessionData.menu.faireSimulation}" update=":formulaire:contenu"/>  
      <p:menuitem id="cmdEffacerSimulation" style="width: 200px" onclick="raz();" immediate="true" value="#{msg['form.menu.effacerSimulation']}" actionListener="#{form.effacerSimulation}" rendered="#{sessionData.menu.effacerSimulation}" update=":formulaire:contenu"/>
      <p:menuitem id="cmdEnregistrerSimulation" style="width: 200px" immediate="true" value="#{msg['form.menu.enregistrerSimulation']}" actionListener="#{form.enregistrerSimulation}" rendered="#{sessionData.menu.enregistrerSimulation}" update=":formulaire:contenu"/>            
    </p:submenu>
    <p:submenu label="Navigation">  
      <p:menuitem id="cmdRetourSimulateur" style="width: 200px" immediate="true" value="#{msg['form.menu.retourSimulateur']}" actionListener="#{form.retourSimulateur}" rendered="#{sessionData.menu.retourSimulateur}" update=":formulaire:contenu"/>  
      <p:menuitem id="cmdVoirSimulations" style="width: 200px" immediate="true" value="#{msg['form.menu.voirSimulations']}" actionListener="#{form.voirSimulations}" rendered="#{sessionData.menu.voirSimulations}" update=":formulaire:contenu"/>    
    </p:submenu>
    <p:menuitem id="cmdTerminerSession" immediate="true" value="#{msg['form.menu.terminerSession']}" actionListener="#{form.terminerSession}" rendered="#{sessionData.menu.terminerSession}" update=":formulaire:contenu"/>         
  </p:menubar>
  
  <p:spacer height="50px"/>

</html>

خط ۱۵: یک نوار منوی PrimeFaces،
خط ۱۶: یک گزینه منو در این نوار،
خط ۱۷: یک آیتم درون آن گزینه منو.

این تغییر بر قالب تأثیری ندارد. نمای جدید به شرح زیر است: