Pular para o conteúdo principal

Facelets uma forma mais ágil para construção de telas – Parte I

A construção de telas ou camada de apresentação em um sistema MVC seja web ou desktop é uma tarefa complexa e de extrema importância. Nesse post vou comentar e mostrar algum exemplo do Facelets como solução para os desafios existentes nessa etapa especificamente para web.

Com a web cada vez mais presente em nosso dia-a-dia, um fato é que com isso nossos usuários tornam-se mais exigentes em relação a usabilidade, agilidade, performance ou de uma forma bem resumida “o usuário espera uma navegação simples e agradável aonde uma determinado tarefa possa ser concluída em poucos passos e em um curto espaço de tempo”.

Atender as expectativas em relação ao que o usuário espera com o que realmente ele precisa, definir uma estrutura flexível a mudanças sem engessar o desenvolvimento, acessibilidade, portabilidade em múltiplos navegadores, tudo isso e muito mais, num prazo que quase sempre é apertado. Um outro ponto fundamental é manter o time motivado e produtivo em um ambiente que favoreça a criatividade e evolução. Uma equação nada simples de resolver!

Ainda bem que no mundo Java temos varias opções de ferramentas e frameworks para tornar esse trabalho mais produtivo, qualitativo e prazeroso. Gosto muito da idéia de componentes visuais (User Interface Components) com o conceito RAD (Rapid Application Development), adquiri isso na época em que trabalhei com o Delphi, e é por isso que sou fã de carteirinha do JavaServer Faces (JSF), que incorpora isso. Melhor ainda eh usar JSF com Facelets.

Inicialmente podemos considerar o Facelets como outra opção de criação de telas com JSF, substituindo o antigo JSP por xhtml. Nada contra o JSP, mas o Facelets é um mecanismo mais aderente ao formato de trabalho do JSF principalmente em relação a árvores de componentes e ciclo de requisição. O mais interessante do Facelets é a possibilidade de usar técnicas da Orientação a Objetos para a construção de telas.

Na sequência vou colocar um bocado de código focando na estrutura do Facelets e demonstrando um alternativa no uso de templates. Não me preocupo com configurações complementares de layout (css).

O suporte a templates permite a definição de uma estrutura visual comum e reaproveitá-la em diversas telas, mantendo o esforço de customização em trechos particulares e específicos de cada tela. Imagine por exemplo um sistema compostos por vários cadastros, cada cadastro possui uma listagem aonde o usuário visualiza a listagem com os dados atuais podendo optar pela edição ou por um novo cadastro. Outra tela seria de formulário de preenchimento, uma vez que o usuário selecionou um item para edição ou então pediu por um novo cadastro essa tela seria carregada. Podemos definir um padrão visual para essas telas:














A definição desse template seria algo próximo ao conteúdo do cadastro.xhtml:
<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
  <body>
    <table>
      <tr>
        <td colspan="2">
          <ui:insert name="topo">
            <ui:include src="topo.xhtml"/>
          </ui:insert>  
        </td>
      </tr>

      <tr>
        <td>
          <ui:insert name="menu">
            <ui:include src="menu.xhtml"/>
          </ui:insert>
        </td>
        <td>  
          <ui:insert name="principal" />  
        </td>
      </tr>

      <tr>
        <td colspan="2">
          <ui:insert name="rodape">  
            <ui:include src="rodape.xhtml"/>
          </ui:insert>
        </td>
      </tr>
    </table>  
  </body>  
</html>
cadastro.xhtml

A tag ui:insert define um ponto de substituição no template. Ao utilizar esse template a tela poderia customizar 4 pedaços do cadastro.xhtml, sendo que três já possuem um comportamento default. A área do menu por exemplo, usa a tag ui:include para inserir um fragmento (pedaço) de tela relacionado ao Menu de Opções. A seguir um trecho do fragmento do menu, repare na tag ui:fragment:
<ui:fragment
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
  <h:form>  
    <ul>  
      <li>  
        <h:commandLink action="fornecedores">
          Fornecedores
        </h:commandLink>
      </li>
      ...
    </ul>
  </h:form>
</ui:fragment>
menu.xhtml

A seguir o exemplo de código para implementar a tela com formulário de fornecedores:
<ui:composition template="cadastro.xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
  <ui:define name="principal">
    <h:form>
      <h:inputHidden value="#{fornecedorMB.fornecedor.id}" id="idFornecedor" />
      <h:panelGrid columns="2">
        <h:outputLabel value="Nome" for="iNome" />
        <h:inputText value="#{fornecedorMB.fornecedor.nome}" id="iNome" />

        <h:outputLabel value="Cnpj" for="iCnpj" />
        <h:inputText value="#{fornecedorMB.fornecedor.cnpj}" id="iCnpj" />
      </h:panelGrid>

      <h:messages showDetail="true" showSummary="true" />

      <h:commandButton action="#{fornecedorMB.doSalvar}" value="Salvar" />
      <h:commandButton action="#{fornecedorMB.doExcluir}" value="Excluir" />
    </h:form>
  </ui:define>
</ui:composition>
formFornecedores.xhtml

A tela formFornecedores.xhtml usa a estrutura do cadastro.xhtml, a tag ui:composition define o relacionamento de composição entre a tela e o template. Nesse exemplo a única sobrescrita do template é a área principal, a tag ui:define é utilizada para sobrepor a definição de ui:insert, no resto da tela as definições são mantidas.

Ok, fica faltando a listagem de fornecedores, o ponto de partida para o cadastro. Um detalhe interessante é que todas listagens tem o mesmo padrão visual, seguindo o seguinte formato:



Vamos definir um outro template, especifico para listagens:
<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
  <body>
    <table>
      <tr>
        <td>
          <h:commandButton value="Novo" action="#{mbean[actionNovo]}" />
        </td>
        <td>
         <h:commandButton value="Pesquisar" action="#{mbean[actionPesquisa]}" />
        </td>
      </tr>

      <tr>
        <td colspan="2">
          <ui:insert name="filtros"/>
        </td>
      </tr>

      <tr>
        <td colspan="2">
          <ui:insert name="tabela"/>
        </td>
      </tr>
    </table>
  </body>
</html>
listagem.xhtml

Nesse template alem de definir o organização visual da tela de listagem, temos a definição de 2 botões, agora como vincular a chamada aos respectivos métodos java no managed bean? O template é utilizado por diversas telas em situações distintas! Pra resolver esse detalhe foram definidos 3 parâmetros que o template deve receber ao ser utilizado: mbean, actionNovo e actionPesquisa.

Pra encerrar uma forma de implementação da listagem de fornecedores utilizando os templates cadastro.xhtml e listagem.xhtml:
<ui:composition template="cadastro.xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
  <ui:define name="principal">
    <h:form>
      <ui:decorate template="listagem.xhtml">
        <ui:param name="mbean" value="${fornecedorMB}" />
        <ui:param name="actionNovo" value="doNovoFornecedor" />
        <ui:param name="actionPesquisa" value="doPesquisarFornecedor" />

        <ui:define name="filtros">
          <h:panelGrid columns="2">
            <h:outputLabel value="Nome" for="iNome" />
            <h:inputText value="#{fornecedorMB.filtroNome}" id="iNome"/>
          </h:panelGrid>
        </ui:define>

        <ui:define name="table">
          <h:dataTable id="tableFornecedores"
             value="#{fornecedorMB.fornecedorDM}" var="f">
            <h:column>
              <f:facet name="header">Nome</f:facet>
              <h:commandLink action="#{fornecedorMB.doEditarFornecedor}">
                <h:outputText value="#{f.nome}" />
              </h:commandLink>
            </h:column>

            <h:column>
              <f:facet name="header">Cnpj</f:facet>
              <h:outputText value="#{f.cnpj}" />
            </h:column>
          </h:dataTable>  
        </ui:define>  
      </ui:decorate>  
    </h:form>  
  </ui:define>  
</ui:composition>
listFornecedores.xhtml

Repare que a tela define a composição com o template cadastro.xhtml, mas impõe também um relacionamento com o template listagem.xhtml via a tag ui:decorate. A diferença entre essas tags é que decorate considera o conteúdo xhtml externo aos limites da tag. As tags ui:param atribuem valores para os 3 parâmetros do template definindo assim o comportamento do botão de Novo (Fornecedor) e Pesquisar (Fornecedores).

Um diagrama de classes para representar o relacionamento das telas/fragmentos com os templates:



Bom vou deixar em aberto para outro post a composição de componentes e pedaços de tela, parte do facelets que eu mais gosto!

Para maiores informações sobre a tecnologia acesse o site do projeto: https://facelets.dev.java.net/

A Globalcode disponibiliza 2 mini-cursos que comentam sobre Facelets, acesse MC31 e MC45.

Eder Magalhães
http://twitter.com/edermag
http://www.yaw.com.br

Comentários

Unknown disse…
Sensacional Eder! Acho que eu já vi esse esquema de Listagem.xhtml em algum lugar... e foi você que fez!
Paulo Fernandes disse…
Só não gostei de ter usado tabela para estrutura do layout, mas é bem interessante o conceito do facelets
Unknown disse…
Ola Paulooo.

Utilizei a estrutura do layout em tabelas pra focar no facelets, mas com certeza a mesma idéia pode ser aplicada em um layout 'tableless'.

[]'s
Yara Senger disse…
Eu me lembro bem quando comecei a utilizar JavaServer Faces 1.0: testar, e criar mecanismos de inclusão que deixassem o desenvolvimento parecido com Tiles.

Evidentemente diversos problemas foram encontrados, entre eles o principal: Interview Content Problem, que acontecia quando incluíamos dinamicamente um JSP que utilizava HTML puro aninhado com as tags JSP|JSF... e o conteúdo ficava embaralhado, ou melhor separado: HTML puro de um lado e o HTML gerado pelas tags JSF do outro...

Hoje evidentemente já está resolvido, mas na época o Facelets era a melhor solução. E ainda é. (risos).

Outro problema que encontramos, e a Ana Abrantes com certeza se lembra, era o fato de utilizar parâmetros na URL e perder estes parâmetros quando um validador encontrava um erro e redirecionava para a página com o formulário destacando o erro e perdendo o parâmetro de URL.

Mesmo com tudo isto acreditar em Facelets não foi algo natural, parecia estranho ter que usar mais um framework.

Hoje eu acho que vale muito a pena, e pessoalmente acho que demorei demais para acreditar.

A curva de aprendizado é rápida e os benefícios são muitos.

abraços,
Yara M. H. Senger
Ricardo Longa disse…
Legal este post, assim que tiver um tempinho vou fazer este tutorial.

Abraços!
Unknown disse…
Parabéns pelo post. Eu já utilizo o facelets há algum tempo. As vezes tenho um problema no firefox, ele exibe aquela tela YSOD - tela amarela de erro - falando que falta uma tag, etc, mas em 99,999% dos casos a tela é exibida normalmente. Já aconteceu com vc? Como resolveu? Abraços, Alexandre.
Unknown disse…
Finalmente um bom material de introdução a Facelets.
Parabéns
MoaPereira disse…
Excelente!!! De grande ajuda!!!
Alê disse…
nao vi vantagens no decorator...
era so criar mais um insert e include e pronto.
No exemplo nao teve real vantagem!
Rodrigo disse…
Amigo, parabéns pelo tutorial !!

Só não entendi um detalhe: o link que você atribuiu com action="fornecedores"
está configurado no fornecedorMB? Nele que você configurou o caminho para o formFornecedores.xhtml?

Pode postar este MB para melhor entendimento?

Grato,
Rodrigo Bortolon
Unknown disse…
Eder,

Muito bom o post.
Mas para complementar o entendimento, libera a classe fornecedorMB.

Obrigado

Postagens mais visitadas deste blog

Compilador GWT, não se preocupe com JavaScript!

Nesse post vou escrever um pouco sobre o Compilador do Google Web Toolkit , qual é o seu papel no kit, além de algumas dicas para o dia-a-dia no desenvolvimento com a tecnologia. Como exemplo vou usar um novo Projeto Web no Eclipse criado a partir do Google Plugin   para desenvolvimento GWT e/ou App Engine, acesse aqui mais informações e download. Depois de instalar o plugin, dentro do Eclipse siga a sequência para criar o projeto: New - Others - Google - Web Application Project - Defina o nome do projeto e a estrutura raiz de pacotes - Finish. Vou adotar como nome do projeto appGWT e pacote br.com.globalcode . O plugin gera uma aplicativo pronto que permite ao usuário preencher um campo e realizar o envio ao servidor de forma assíncrona (Ajax), quando o servidor responde um Dialog é apresentado com a mensagem de retorno. Para testar a aplicação é só executar o projeto com a opção Wep Application . Veja: O GWT, como já foi comentado , adota um conceito bem interess

O que é Lógica de programação?

Este é o segundo de uma série de posts voltados aos leitores do blog que estão dando início à carreira de desenvolvimento de software. O assunto de hoje é a lógica de programação. Para ler antes: Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados A lógica de programação é um pré-requisito para quem quer se tornar um desenvolvedor de software, independente da linguagem de programação que se pretende utilizar. Mas o que é de fato a Lógica de Programação e como saber se eu tenho esse pré-requisito? A lógica de programação nada mais é do que a organização coerente das instruções do programa para que seu objetivo seja alcançado. Para criar essa organização, instruções simples do programa, como mudar o valor de uma variável ou desenhar uma imagem na tela do computador, são interconectadas a estruturas lógicas que guiam o fluxo da execução do programa. Isso é muito próximo ao que usamos em nosso cotidiano para realizar atividad

Dica rápida: Apagando registros duplicados no MySQL

Ola pessoal, Sei que vocês estão acostumados a ver posts meus sobre tecnologia móvel ou algo relacionado, mas hoje vou falar sobre um pequeno "truque" que usei esse final de semana com o MySQL. Eu estava desenvolvendo o lado servidor de uma nova aplicação mobile (ahh, então "tem a ver" com mobile hehe), e quando fui fazer alguns testes percebi que tinha quase 7 mil registros duplicados (!!!) na minha base de dados! Bom, o meu primeiro reflexo como programador foi pensar em fazer um "programinha" Java para buscar e deletar todos esses registros duplicados. Mas ai, resolvi tirar as teias de aranha dos neurônios e usar os vários anos de experiência que passei com SQL e criar uma query que fizesse esse trabalho todo de uma vez!! E a query ficou assim: delete from TABLE_NAME USING  TABLE_NAME, TABLE_NAME  AS  auxtable WHERE   ( NOT  TABLE_NAME.id  =  auxtable.id ) AND   ( TABLE_NAME.name  =  auxtable.name ) Explicação direta: TABLE_NAME

Devo fazer um curso ou ler um livro?

Acredito que todos os instrutores ou professores, independentemente da área, escola ou centro de treinamento, já devam ter recebido essa pergunta alguma vez na vida: devo fazer um curso ou ler um livro? Para responder a essa pergunta, precisamos avaliar os prós e contras de cada opção. Trabalho com treinamento há algum tempo e, hoje, recebi essa pergunta de um aluno. Não adianta responder a ou b sem argumentar, demonstrando as opções conforme a situação do aluno. O conteúdo, a forma de transmissão e a capacidade de assimilação do indivíduo são chaves para haver benefício maior de aprendizado. Tanto em um bom curso quanto em um bom livro, o conteúdo é a premissa básica . Por conteúdo entendemos: se está organizado; se respeita pré-requisitos; se promove o aprendizado guiado e incremental; se aborda de forma satisfatória os principais pontos; se tem bom balanço entre teoria, exemplos e prática (favorecendo exemplos e prática); se tem como premissa a acessibilidade possível (e cabível) pa

Saiba como programar para Arduino sem ter nenhum hardware disponível

O Arduino já é uma tecnologia muito difundida entre os amantes de tecnologia. É difícil encontrar um profissional da computação que não brincou um pouco com esta ferramenta de prototipagem ou, que gostaria de fazer isso. Porém, em alguns casos, o programador quer conhecer o arduino mas não dispõe de nenhum hardware, nem mesmo da placa. Como isso poderia ser resolvido? A primeira resposta seria aquela mais simples e direta: ir as compras. Isso pode ser feito em uma loja física ou pela internet. No meu caso, por exemplo, tive a felicidade de encontrar em um site (não me lembro qual) um kit arduino, com um conjunto de sensores e um DVD com 41 vídeo aulas. Mas digamos que o profissional não esteja passando por um bom momento financeiro, ou ainda, simplesmente não queira comprar o Arduino sem antes conhecê-lo um pouco melhor. Para a última situação também já existe uma resposta, e diga-se de passagem, uma excelente resposta. Trata-se do site 123D Circuits.io . Depois de criar seu u

JavaMail: Enviando mensagem HTML com anexos

Introdução Depois do post "JavaMail: Enviando e-mail com Java" , que apresentava como enviar um e-mail com Java, resolvi complementar a assunto apresentando como enviar uma mensagem formatada, em HTML , e também como realizar o envio de anexos. Bibliotecas Além da biblioteca JavaMail, veja mais no post anterior , é necessário incluir o JavaBeans Activation Framework (JAF), apenas se a versão utilizada for anterior ao JSE 6.0 , que já tem o JAF incluso. O JAF está disponível em http://www.oracle.com/technetwork/java/javase/downloads/index-135046.html , e neste download encontramos, alguns exemplos na pasta demo , documentação, incluindo javadocs, na pasta docs e a biblioteca activation.jar , que deve ser acrescentada no classpath da aplicação para versões anteriores ao JSE 6.0. Exemplo Primeiramente devemos realizar a configuração da javax.mail.Session e da javax.mail.internet.MimeMessage , estes passos podem ser vistos no post anterior . Agora vamos montar um