Skip to content

14. Versão 9: Implementação da camada web com o PrimeFaces

Pré-requisitos: Leia «Introdução ao PrimeFaces» em [ref3].


Questão 1: Crie um novo projeto Maven do tipo [Aplicação Web] onde as páginas XHTML do exemplo anterior sejam construídas utilizando componentes PrimeFaces. Não faça quaisquer alterações aos beans.


A página inicial utiliza os componentes <p:panel>, <p:inputText>, <p:selectOneMenu> e <p:message>:

 

Uma entrada incorreta:

 

Uma simulação:

 

A lista de simulações utiliza os componentes <p:dataTable> e <p:commandLink>:

Os métodos AJAX irão atualizar a área com id='formulaire', que inclui toda a página (ver linha 11 abaixo):


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

Assim que a sua aplicação estiver a funcionar, substitua a página [entete.xhtml] pela seguinte página:


<?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>
  • linha 15: uma barra de menus do PrimeFaces,
  • linha 16: uma opção de menu nesta barra,
  • linha 17: um item nesta opção de menu.

O modelo não é afetado por esta alteração. A nova vista é a seguinte:

Image