14. Version 9: Implementing the web layer with PrimeFaces

Prerequisites: Read "Introduction to Primefaces" in [ref3].

Question 1: Create a new Maven project of type [Web Application] where the XHTML pages from the previous example are built using Primefaces components. Do not make any changes to the beans.

The home page uses the <p:panel>, <p:inputText>, <p:selectOneMenu>, and <p:message> components:

An incorrect entry:

A simulation:

The list of simulations uses the <p:dataTable> and <p:commandLink> components:

The AJAX methods will update the area with id='formulaire', which includes the entire page (see line 11 below):


<?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="form">
        <!-- header -->
        <ui:include src="header.xhtml" />
        <!-- content -->
        <ui:insert name="part1" >
          Childcare Provider Management
        </ui:insert>
        <ui:insert name="part2"/>
      </h:form>
    </h:body>
  </f:view>
</html>

Once your application is working, replace the [entete.xhtml] page with the following page:


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


  <!-- header -->
  <h:panelGroup>
    <h2><h:outputText value="#{msg['form.title']}"/></h2>
  </h:panelGroup>

  <p:menubar id="menu" header="Menu" style="width: 500px">
    <p:submenu label="#{msg['form.menu.simulation']}">  
      <p:menuitem id="cmdRunSimulation" style="width: 200px" value="#{msg['form.menu.runSimulation']}" actionListener="#{form.runSimulation}" rendered="#{sessionData.menu.runSimulation}" update=":form:content"/>  
      <p:menuitem id="cmdClearSimulation" style="width: 200px" onclick="raz();" immediate="true" value="#{msg['form.menu.clearSimulation']}" actionListener="#{form.clearSimulation}" rendered="#{sessionData.menu.clearSimulation}" update=":form:content"/>
      <p:menuitem id="cmdSaveSimulation" style="width: 200px" immediate="true" value="#{msg['form.menu.saveSimulation']}" actionListener="#{form.saveSimulation}" rendered="#{sessionData.menu.saveSimulation}" update=":form:content"/>            
    </p:submenu>
    <p:submenu label="Navigation">  
      <p:menuitem id="cmdReturnToSimulator" style="width: 200px" immediate="true" value="#{msg['form.menu.returnToSimulator']}" actionListener="#{form.returnToSimulator}" rendered="#{sessionData.menu.returnToSimulator}" update=":form:content"/>  
      <p:menuitem id="cmdViewSimulations" style="width: 200px" immediate="true" value="#{msg['form.menu.viewSimulations']}" actionListener="#{form.viewSimulations}" rendered="#{sessionData.menu.viewSimulations}" update=":form:content"/>    
    </p:submenu>
    <p:menuitem id="cmdEndSession" immediate="true" value="#{msg['form.menu.endSession']}" actionListener="#{form.endSession}" rendered="#{sessionData.menu.endSession}" update=":form:content"/>         
  </p:menubar>
  
  <p:spacer height="50px"/>

</html>

line 15: a PrimeFaces menu bar,
line 16: a menu option in this bar,
line 17: an item in this menu option.

The model is not affected by this change. The new view is as follows: