Camada de apresentação com JSF

Para a construção da camada responsável pela receber as entradas de dados pelo utilizador e exibição da informação será utilizado o framework JavaServer Faces.

Quando se trabalha com JavaServer Faces a cada passo um novo conceito pode vir ao de cima. Destes conceitos podemos destacar:

  • Componentes
  • Renderers
  • Managed Beans (CDI)
  • Converters/Validators
  • Navegação
  • Eventos
  • Ciclo de vida (Request Life cycle)
  • Estes conceitos serão definidos a medida que forem utilizados.

Os primeiros que serão utilizados são os componentes. Cada view é composta por uma árvore hierárquica de componentes. Os componentes podem ser adicionados à pagina programaticamente ou via template com Facelets.

Grande parte dos componentes são de interface com o utilizador e são expressos nas paginas através de tags.

O JavaServer Faces dispõe 4 bibliotecas de componentes, tecnicamente chamadas tablibs. Para um primeiro contato com o JSF são apenas necessárias duas bibliotecas de componentes:

A Biblioteca de tags HTML e a Biblioteca de tags Core

É importante notar que o desenvolvimento de aplicações que utilizem a tecnologia JSF requer um bom conhecimento das bibliotecas de tags do JSF. As duas bibliotecas de referencia padrão, possuem um total de 43 tags.

Biblioteca de tags HTML

A biblioteca http://java.sun.com/jsf/html possui os componentes básicos para renderização de telas em HTML.

Para utilizar esta biblioteca numa página xhtml, é necessário adiciona-la como propriedade da tag html e atribuir um apelido (alias). Por padrão é declarado da seguinte forma:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

</html>

Esta declaração é também chamada namespace. No caso namespace da biblioteca html do JSF.

Utiliza-se o alias h para referenciar a biblioteca html e para utilizar algum componente desta biblioteca aplica-se a sintaxe h: + nome da tag, exemplo: .

A biblioteca html possui os seguintes componentes: body, head, form, outputFormat, outpuLabel, outputLink, outputScript, outputStylesheet, outputText, button, commandButton, commandLink, link, graphicImage, inputHidden, inputSecret, inputText, inputTextarea, message, messages, selectBooleanCheckbox, selectManyCheckbox, selectManyListbox, selectManyMenu, selectOneListbox, selectOneMenu, selectOneRadio, dataTable, column, panelGrid e panelGroup.

A maioria das ações nesta biblioteca representa um componente HTML padrão que fornece uma interface com método de acesso para a combinação das propriedades do tipo de componente genérico e os atributos suportados pelo renderer associado .

Estas tags podem ser chamadas através da diretiva taglib existente na página. Ao criar uma página JSF, com o NetBeans ID, automaticamente, a taglib HTML é adicionada as diretivas.

Biblioteca de Tags Core

A biblioteca de tags Core contém elementos de ação que representam objetos de JSF que são independentes da linguagem de marcação da página, como conversores e validadores. Essas tags podem ser chamadas através da diretiva taglib existente na página.

Para utilizar esta biblioteca numa página xhtml, é necessário adiciona-la como propriedade da tag html e atribuir um apelido (alias). Por padrão é declarado da seguinte forma:


<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core">

</html>

Utiliza-se o alias f para referenciar a biblioteca core e para utilizar algum componente desta biblioteca aplica-se a sintaxe f: + nome da tag, exemplo: .

Estrutura fundamental de uma pagina JSF

<?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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        Hello from Facelets
    </h:body>
</html>

Ao criar uma pagina JSF o NetBeans adiciona automaticamente o namespace da biblioteca de Tags HTML (xmlns:h="http://xmlns.jcp.org/jsf/html). A demais biblioteca são adicionadas quando necessário. O NetBeans facilita a adição através de sugestões do assistente do IDE.

Adição de uma nova página JSF ao projeto

1. Fazer clique com o botão direito do mouse sobre o projeto, apontar para New (Novo), no menu de contexto escolher Other.. e na caixa de diálogo que aparece, na secção Categories(Categorias) escolher JavaServer Faces e na secção File Types(Tipo de ficheiros) escolher JSF Page e fazer clique em Next(Seguinte).

2. Na janela seguinte definir um nome (File Name) e uma pasta (Folder) onde a página vai ficar. Em Options(Opções) deixar seleccionado Faceles, fazer clique em Finish(Terminar) e o código base da página será mostrado no editor do NetBeans.

Criação de um formulário

Para a construção de um formulário com JSF utilizam-se tags de componentes JSF na pagina.

Para uma primeira aproxição à construção de formularios, será apresentado um exemplo relativamente simples de uma pagina de login de uma aplicação qualquer.

<h:body>
        <h:form>
            <h:panelGrid columns="2">
                <h:outputLabel value="User Name:"/>
                <h:inputText />

                 <h:outputLabel value="Password:"/>
                 <h:inputSecret  />
            </h:panelGrid>
            <h:commandButton value="Login"/>
        </h:form>
    </h:body>

Output

A seguir serão apresentados códigos para a construção das páginas que servem à implementação de todas operações fundamentais do CRUD para o objeto Participante da aplicação de exemplo.

Pagina para registo de um participante

participante_guardar.xhmtl

<?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://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>
        <title>Novo Participante</title>
    </h:head>
    <h:body>
        <f:view>
            <h:form>
                <h:messages showDetail="true"/>
                <h:panelGrid columns="2">
                    <h:outputLabel value="Nome:"/>
                    <h:inputText value="#{participanteMBean.participante.nomeParticipante}" pt:placeholder="Nome:"/>

                    <h:outputLabel value="Sobrenome"/>
                    <h:inputText value="#{participanteMBean.participante.sobrenomeParticipante}" pt:placeholder="Sobrenome"/>
                    <h:outputLabel value="Data de Nascimento:"/>
                    <h:inputText value="#{participanteMBean.participante.dataNascimento}" pt:placeholder="dd/MM/yyyy">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>

                    </h:inputText>

                    <h:outputLabel value="Sexo:"/>
                    <h:selectOneRadio value="#{participanteMBean.participante.sexo}">
                        <f:selectItems value="#{participanteMBean.opSexos}" />
                    </h:selectOneRadio>

                    <h:outputLabel value="Municipio:"/>
                    <h:selectOneMenu value="#{participanteMBean.participante.municipio}" converter="municipioConverter">
                        <f:selectItem value="#{null}" itemLabel="Escolha um Municipio" noSelectionOption="true"/>

                        <f:selectItems value="#{participanteMBean.municipios}"
                                       var="municipio" itemValue="#{municipio}"  
                                       itemLabel="#{municipio.nomeMunicipio}"  />
                    </h:selectOneMenu>
                </h:panelGrid>   
                    <h:commandButton id="guardar" value="Guardar" actionListener="#{participanteMBean.save}"/>
            </h:form>
        </f:view>

    </h:body>
</html>

Output:

Componentes mais usados na construção de formulários

Para a construção do formulário foram utilizadas a tag para informar a área que terá o formulário. No quadro seguinte podem ser vistos o nome e a descrição dos demais componentes utilizados na construção do formulário atrás apresentado.

Componente Descrição
h:head Representa a tag 'head' do html
h:body Representa a tag body do HTML
h:form Representa a tag form do HTML
h:inputText Gera um campo de texto. Correspondente a tag 'input type=“text”' do HTML
h:inputTextarea Gera um campo de texto multilinha. Correspondente a tag 'textarea' do HTML
h:outputLabel Gera uma tag 'label' que pode estar associada a um campo do formulário.
h:panelGrid Permite montar um layout para a disposição de componentes
h:selectOneMenu Gera um componente 'select(dropdownlist)', no qual é possível selecionar apenas um item por vez.
actionListener Permite registrar uma ação a ser realizada por um componente
converter Permite registrar um conversor personalizado
h:commandButton Gera um botão de submit ou reset

Pagina para a edição dos dados de um participante

O código da pagina para a edição(alteração) dos dados de um participante é semelhante ao da pagina para o registo de um novo participante e pode ser visto a seguir. No entanto, na pagina aparece um elemento adicional. O campo que representa a chave primaria do Participante, ja que para a edição o método precisa deste parametro. :

participante_editar.xhtml

 <h:body>
        <f:view>
            <h:form>
                <h:messages showDetail="true"/>
                <h:inputHidden value="#{participanteMBean.participante.idParticipanete}"/>
                <h:panelGrid columns="2">
                    <h:outputLabel value="Nome:"/>
                    <h:inputText value="#{participanteMBean.participante.nomeParticipante}" pt:placeholder="Nome:"/>

                    <h:outputLabel value="Sobrenome"/>
                    <h:inputText value="#{participanteMBean.participante.sobrenomeParticipante}" pt:placeholder="Sobrenome"/>
                    <h:outputLabel value="Data de Nascimento:"/>
                    <h:inputText value="#{participanteMBean.participante.dataNascimento}" pt:placeholder="dd/MM/yyyy">
                        <f:convertDateTime pattern="dd/MM/yyyy"/>

                    </h:inputText>

                    <h:outputLabel value="Sexo:"/>
                    <h:selectOneRadio value="#{participanteMBean.participante.sexo}">
                        <f:selectItems value="#{participanteMBean.opSexos}" />
                    </h:selectOneRadio>

                    <h:outputLabel value="Municipio:"/>
                    <h:selectOneMenu value="#{participanteMBean.participante.municipio}" converter="municipioConverter">
                        <f:selectItem value="#{null}" itemLabel="Escolha um Municipio" noSelectionOption="true"/>

                        <f:selectItems value="#{participanteMBean.municipios}"
                                       var="municipio" itemValue="#{municipio}"  
                                       itemLabel="#{municipio.nomeMunicipio}"  />
                    </h:selectOneMenu>
                </h:panelGrid>   
                <h:commandButton id="guardar" value="Guardar" actionListener="#{participanteMBean.edit}"/>
            </h:form>
        </f:view>

    </h:body>

Pagina de listagem dos participantes

Para implementar a listagem de dados utiliza-se o componente do JSF chamado dataTable estudado com mais detalhes posteriormente.

participante_listar.xhtml

 <h:body>
        <f:view>

            <h:outputText id="titulo" value="Listagem dos Participantes" style="font-weight: bold;"/>

            <h:form>

                <h:dataTable id="listaParticipantes" var="item" value="#{participanteMBean.listaParticipantes}" border="1">

                    <h:column>
                        <f:facet name="header">
                            <h:outputLabel value="N°:"/>                                    
                        </f:facet>
                        <h:outputText value="#{item.idParticipanete}"/>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputLabel value="Nome"/>                                    
                        </f:facet>
                        <h:outputText value="#{item.nomeParticipante}"/>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputLabel value="Sobrenome"/>                                    
                        </f:facet>
                        <h:outputText value="#{item.sobrenomeParticipante}"/>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputLabel value="Sexo"/>                                    
                        </f:facet>
                        <h:outputText value="#{item.sexo.abreviatura}"/>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputLabel value="Nascimento"/>                                    
                        </f:facet>
                        <h:outputText value="#{item.dataNascimento}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:outputText>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputLabel value="Municipio"/>                                    
                        </f:facet>
                        <h:outputText value="#{item.municipio.nomeMunicipio}"/>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputLabel value="Operações"/>                                    
                        </f:facet>
                        <h:commandLink  action="#{participanteMBean.delete}">
                            <h:graphicImage library="imagens" name="delete.png"/>
                            <f:setPropertyActionListener target="#{participanteMBean.participante}" value="#{item}"/>
                        </h:commandLink>
                        <h:commandLink action="#{participanteMBean.startEdit}">
                            <h:graphicImage library="imagens" name="edit.png"/>
                            <f:setPropertyActionListener target="#{participanteMBean.participante}" value="#{item}"/>
                        </h:commandLink>
                    </h:column>

                </h:dataTable>

            </h:form>
            <h:form>
                <h:commandLink value="Novo Participante " action="#{participanteMBean.newSave()}"/>
            </h:form>
        </f:view>


    </h:body>

Prática

Baseando-se nas paginas construídas anteriormente. Construir as views de interação para as entidades já utilizadas no exercício da criação dos CDI Managed Bean e testar o funcionamento do CRUD (Create, Read, Update e Dele) de cada uma.

results matching ""

    No results matching ""