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
Junior Osho disse…
Muito bom Adorei ! DA PARA Melhorara meu crud agora !
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

10 reasons why we love JSF

1. One-slide technology: it's so simple that I can explain basic JSF with one slide. 2. Easy to extend: components, listeners, render kit, Events, Controller, etc. 3. Real-world adoption: JBoss, Exadel, Oracle, IBM, ... 4. Architecture model: you can choose between more than 100 different architecture. 5. Open-mind community: using JSF you are going to meet very interesting people. 6. We are using JSF the last 5 years and we found very good market for JSF in Brazil 7. Progress: look to JSf 1.1 to JSF 1.2, JSF 1.2 to JSF 2.0. People are working really hard! 8. Many professionals now available 9. It's a standard. It's JCP. Before complain, report and help! 10. Ed Burns, spec leader, is an old Globalcode community friend! EXTRA: My wife is specialist in JSF. She's my F1 for JSF :) Nice job JSF community! -Vinicius Senger

2º Bate Papo do SP-GTUG - Divulgação

Pessoal, Para aqueles que já estiveram presentes nas atividades do SP-GTUG (encontros ou bate papos na Globalcode), e para os que ainda não puderam estar presentes, teremos um novo bate papo acerca de mais duas tecnologias do Google: AdSense e Python no GAE. Este será o nosso segundo bate papo do SP-GTUG, nos mesmos moldes dos minicursos da Globalcode . Local e data O bate papo acontecerá no dia 27/03/10, das 10:00 às 13:00 na Globalcode. Para fazer sua inscrição e participar acesse a home da Globalcode e vá até a parte de "Minicursos Gratuitos da Semana ". Conteúdo das apresentações Abaixo seguem as descrições passadas pelos palestrantes: Título: "Algoritmos em Python" Resumo: Python é uma linguagem considerada frugal, simples, sem ser simplória! Entenda como construir algoritmos ninjas com essa linguagem, adotada pela Google e pelo MIT. Veremos muito, muito código, desde algoritmos clássicos até tutoriais do

JSF 2 - Composite Components, você não precisa mais ser um ninja

Estamos em uma nova era da computação, os dados não estão mais localizados em um banco dentro de sua empresa, vivemos a explosão de redes sociais, informações são geradas a todo instante, e se torna essencial que sua aplicação conheça os serviços disponíveis na web e consumam suas APIs geralmente disponíveis por serviços REST. Legal, mas como ficam meus aplicativos Java EE neste novo cenário? Para quem vem acompanhando a evolução da plataforma, é notório que todo esforço vem sendo utilizado para aumentar a produtividade e a integração com novos serviços. Basicamente duas especificações surgem com muita força para atender este cenário, a JSR - 314 (JSF-2) e JSR - 311 (JAX-RS), neste post exploraremos a JSR-314 (JSF2) e sua nova forma de criar Composite Components. Uma das grandes queixas dos desenvolvedores JSF era a complexidade em criar composite components, era necessário um vasto conhecimento sobre o ciclo de vida de uma aplicação JSF. Agora, você não precisa ser mais um “ninja” em

Gosta de informática e sonha ser programador Java um dia ?

A Globalcode está procurando jovens que queiram ser programadores no futuro, para fazer parte de sua equipe de vendas e operacional na unidade Paraíso em São Paulo somente. O grande diferencial é o planejamento para carreira de programador. O planejamento de cursos do portifólio da Globalcode: Academia do Programador, Academia Java, Academia Web, Robótica, Eletrônica, etc, será realizado periodicamente de acordo com o desempenho e interesse individual. Atenção : Este não é um estágio para trabalhar com Java, são duas vagas CLT administrativas para pessoas que queiram ser programadores no futuro. Perfil : Conhecimentos de informática básica, saber lidar com pessoas e trabalhar em equipe. Deve ter concluído o ensino médio, ter boa escrita, ser organizado, responsável, comprometido e dinâmico. Interesse por computação, programação, internet, robótica, eletrônica,... Temos duas vagas para jovem-aprendiz abertas: 1) Setor operacional No dia a dia Serviços externos Controle de estoqu

Palestras do TDC Business Disponíveis Online

🚨 Atenção, TDC Lovers! O TDC Business em São Paulo acabou, mas os conteúdos mal começaram!  Não pô de aproveitar a STADIUM ao vivo? Não tem problema, porque trouxemos ela até você. Todas as palestras da STADIUM, palco principal do TDC, já estão no ar e liberadas para qualquer pessoa assistir. Essa Trilha incrível conta com palestras de Trilhas Premium e temas variados de forma GRATUITA para você poder maratonar de casa!  Aproveite para prestigiar seu evento de TI favorito com pipoca direto do seu sofá. 🎥 🍿 Gravação da STADIUM, 22 a 24 de Agosto de 2022, disponível aqui: https://www.globalcode.com.br/videos/tdc-2022-business/  Todas as demais trilhas do TDC Business serão publicadas gradualmente nas próximas semanas, fique atento aos nossos e-mails, você será notificado por lá quando sua Trilha estiver disponível. Acompanhe nossas redes sociais para não perder nada e ficar por dentro de todas as novidades do TDC!

TDC INNOVATION lança University Pass

Modalidade de ingresso tem como objetivo ajudar na capacitação dos universitários Uma pesquisa realizada em 2020 pela Associação Brasileira das Empresas de Tecnologia da Informação e Comunicação (Brasscom) diz que até o ano de 2024 o Brasil precisará de cerca de 420 mil profissionais na área de Tecnologia da Informação. Porém, por ano, a mesma pesquisa diz que o país forma apenas 46 mil profissionais capacitados no nicho. Pensando nisso, para ajudar na formação e capacitação desses jovens profissionais, o TDC INNOVATION, segunda edição do ano do The Developer's Conference, lança o University Pass, modalidade de ingresso que possibilita aceso digital gratuito a todas as palestras do evento, ou com 50% de desconto para quem preferir ir pessoalmente. Com o tema central “Desafios para a criação do futuro Digital”, o TDC INNOVATION ocorrerá entre 1 e 3 de junho, de forma híbrida: presencialmente no Centro de Convenções CentroSul, em Florianópolis, e com transmissão simultaneamente pela