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

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

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 ONLINE: SUA PLATAFORMA DE PALESTRAS GRAVADAS DO TDC DISPONÍVEL

Além do conteúdo ao vivo transmitido online nas edições do TDC, agora você pode ter acesso à centenas de palestras gravadas, através da nossa nova plataforma de vídeos - o TDC Online, que reúne todas as Trilhas premium, Stadium e Salas dos Patrocinadores das edições anteriores de 2022, TDC Innovation e TDC Connections.  Para acessar, basta clicar na edição em que você participou ( TDC Innovation ou TDC Connections ); Fazer o mesmo login (com e-mail e senha) cadastrados na hora de adquirir ou resgatar o seu ingresso no TDC; E clicar na Trilha de sua opção, e de acordo com a modalidade do seu ingresso. Logo em seguida, você será direcionado para a seguinte página com a lista de todas as palestras por Trilha: Pronto! Agora você tem acesso à centenas de palestras gravadas da sua área de interesse, para assistir como e quando quiser! Caso tenha esquecido a senha, clique na opção "Esqueci a senha" , insira o e-mail que você realizou para o cadastro no evento, e aparecerá a op

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

Inspire a mudança com a liderança ágil

A liderança ágil é essencial para que uma organização realize mudanças de negócios significativas. Ser líder é uma tarefa desafiadora, especialmente em um cenário de constantes transformações, principalmente na forma de lidar com a relação empresa e pessoal. Pesquisas sobre liderança na era digital revelam que algumas soft skills têm sido substituídas por outras, o profundo conhecimento na área de negócio, ser referência nas tecnologias utilizadas, ter foco total no prazo e nas entregas e conhecer um arsenal de técnicas e ferramentas, têm dado espaço a habilidades, como: empatia; adaptabilidade; senso de equipe; visão e propósito; engajamento constante. A colaboração entre pessoas de todos os níveis hierárquicos são vitais, afinal, as equipes estão trabalhando para o mesmo objetivo: o encantamento e atendimento das necessidades do cliente que proporcionarão um crescimento sustentável da organização. Com propósito claro, estratégia e prioridades definidas, os times desfrutam de uma ma

Facelets ainda mais divertido! Parte II

De volta ao Facelets , na primeira parte mantive o foco na utilização de templates e técnicas de reutilização visando maior agilidade para desenvolver telas com JSF , mas o Facelets vai bem além disso! Nesse post vou comentar e mostrar um pouco sobre a criação de componentes UI (User Interface) usando xht ml - na minha opinião esse é o grande diferencial da tecnologia. Com esse recurso é possível customizar / padronizar componentes usando xhtml + tags JSF + JavaScript + Css, sem código Java. A ideia é bem próxima ao Tag File em uma rápida comparação com JSP (JavaServer Pages), mas no caso do Facelets feito de uma forma ainda mais simples e com aderência a (infra)estrutura do JSF. Vou descrever o mesmo cenário da primeira parte, um sistema composto por vários cadastros ( C reate R ead U pdate D elete). Pensando especificamente em cada formulário, usando como exemplo um rascunho ou protótipo para o cadastro de Fornecedores, podemos assumir o seguinte formato: campos para preenchi