Pular para o conteúdo principal

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 xhtml - 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 (Create Read Update Delete). 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 preenchimento:

  • barra com botões para cada operação:
Vale a ressalva que nos exemplos apresentados na sequência deixei a parte visual muito simples, focando justamente no mecanismo de componentes da tecnologia.

Mesmo com a utilização de templates uma parte do trabalho ainda é repetitiva e chata, como a criação da barra de botões para Salvar / Cancelar (Voltar para listagem) / Excluir. Podemos criar um componente através do Facelets para centralizar e resolver a barra de botões, evitando um pouco do costumeiro "copia (ctrl-c) e cola (ctrl-v)".

A seguir o código inicial da barra de botões:
<ui:composition 
    xmlns:h="http://java.sun.com/jsf/html"  
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">
  <h:panelGrid columns="3">
    <h:commandButton action="#{mbean[acaoSalvar]}" value="Salvar" />
    <h:commandButton action="#{mbean[acaoCancelar]}" value="Cancelar"
       immediate="true"/>
    <h:commandButton action="#{mbean[acaoExcluir]}" value="Excluir"/>
  </h:panelGrid>
</ui:composition>
barraBotoes.xhtml (dentro do diretório WEB-INF)

A próxima etapa seria definir o componente no descritor de taglib, habilitando a utilização na tela. Exemplo:
<?xml version="1.0"?>  
<!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "facelet-taglib_1_0.dtd">  
<facelet-taglib>  
  <namespace>http://www.globalcode.com.br/facelets</namespace>  
  <tag>  
    <tag-name>barraBotoes</tag-name>  
    <source>barraBotoes.xhtml</source>  
  </tag>  
</facelet-taglib>
globalcode.tag.xml

Importante, para o Facelets considerar essa taglib precisamos informa-la no web.xml via o parâmetro facelets.LIBRARIES, dessa forma:
...
<context-param>  
  <param-name>facelets.LIBRARIES</param-name>  
  <param-value>/WEB-INF/globalcode.tag.xml</param-value>  
</context-param> 
...

Na sequência o trecho do formulário de Fornecedores acionando o componente barraBotoes, no xmlns mapeamos o namespace da taglib da globalcode com alias g, além de definir a referência do managed bean fornecedorMB e os nomes das respectivas actions
<ui:composition template="/cadastro.xhtml"
    ...
    xmlns:g="http://www.globalcode.com.br/facelets">
  <ui:define name="principal">  
    <h:form>
       ...  
       <g:barrabotoes mbean="#{fornecedorMB}" acaosalvar="doSalvar" 
          acaocancelar="doCancelar" acaoexcluir="doExcluir" />
    </h:form>  
  </ui:define>  
</ui:composition>  
formFornecedores.xhtml

A primeira versão do componente é bem simples, só agrupa três h:commandButton no mesmo h:panelGrid, pouco flexível e inteligente. Poderíamos criar novos recursos fazendo com que o programador tenha menos trabalho e mais flexibilidade, por exemplo:

  • cada h:commandButton tem um valor padrão para action se não informado. O desenvolvedor só deve definir as propriedades acaoSalvar / acaoCancelar / acaoExcluir caso o nome do método no managed bean não siga esse padrão.
  • o h:commandButton de exclusão só deveria aparecer caso exista um registro, ou seja, em modo de edição do cadastro. Podemos criar uma propriedade para tratar isso e usá-la no rendered.
  • permitir ao desenvolvedor a escolha do alinhamento dos botões no formato Horizontal (default) ou Vertical.

A lógica para validar propriedades dentro xhtml pode ser implementada usando algumas tags do core JSTL (JavaServer Pages Standard Tag Library).


Veja a nova versão do componente:
<ui:component xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jstl/core">
  <!-- caso o ñ recebe property para action, usa padrão -->
  <c:if test="#{empty acaoSalvar}">
    <c:set var="acaoSalvar" value="doSalvar"></c:set>
  </c:if>
  <c:if test="#{empty acaoCancelar}">
    <c:set var="acaoCancelar" value="doCancelar"></c:set>
  </c:if>
  <c:if test="#{empty acaoExcluir}">
    <c:set var="acaoExcluir" value="doExcluir"></c:set>
  </c:if>

  <!-- valida a property (flag) para mostrar o botão Excluir -->
  <c:if test="#{empty renderizaExcluir}">
    <c:set var="renderizaExcluir" value="true"></c:set>
  </c:if>
  
  <!-- define o comportamento de alinhamento -->
  <c:if test="#{empty alinhamento || alinhamento != 'vertical'}" 
     var="bAlinhamento">
    <c:set var="colunas" value="3"></c:set>
  </c:if>
  <c:if test="#{alinhamento eq 'vertical'}">
    <c:set var="colunas" value="1"></c:set>
  </c:if>
  
  <h:panelGrid columns="#{colunas}" rendered="#{mbean ne null}">
  <h:commandButton action="#{mbean[acaoSalvar]}" value="Salvar" />
  <h:commandButton action="#{mbean[acaoCancelar]}" value="Cancelar"
     immediate="true" />
  <h:commandButton action="#{mbean[acaoExcluir]}" value="Excluir"
     rendered="#{renderizaExcluir}" />
  </h:panelGrid>
</ui:component>
barrabotoes.xhtml

Agora no formulário de Fornecedores a nova maneira de acionar o componente:
<ui:composition template="/cadastro.xhtml"
    ...
    xmlns:g="http://www.globalcode.com.br/facelets">
  <ui:define name="principal">
    <h:form>

      ...

      <g:barraBotoes mbean="#{fornecedorMB}" alinhamento = "vertical"
         renderizaExcluir="#{fornecedorMB.fornecedor.id ne null}"/>

    </h:form>
  </ui:define>
</ui:composition>
formFornecedores.xhtml

Nesse exemplo o formulário de fornecedores uso os botões na vertical, em uma coluna. Caso o fornecedor ainda não tenha sido salvo o botão de exclusão não é renderizado. Um detalhe é que o managed bean FornecedorMB segue a padrão de nome para os metódos do cadastro, retirando a verbosidade na chamada da tag.

Esse mecanismo também pode ser aplicado em situações aonde um componente possui alguma complexidade que poderia ser escondida. Seria interessante definir em algumas telas inputs com mascara simplificando para o usuário preenchimento de CPF / CNPJ / Telefone / CEP / ou qualquer informação que tenha um formato de preenchimento.

A idéia seria customizar o inputText com código JavaScript aplicando a mascara, mas codificar JavaScript nem sempre é uma tarefa simples. Por isso vou usar o JQuery. Sou fã dessa library que simplifica muito a utilização de JavaScript, quem ainda não usou esta perdendo tempo! O JQuery adota conceito de plugins, o Masked Input Plugin faz justamente esse trabalho.

A seguir o exemplo desse input customizado, o inputMask.xhtml:
<ui:component xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">
  <script>
    jQuery(function($){
      $("input[id*='#{id}']").mask('#{mascara}');
    });
  </script>

  <h:inputText id="#{id}" value="#{value}" styleClass="masked"/>
</ui:component>
inputMask.xhtml

O código acima utiliza a função JQuery para buscar o input (text) pelo ID (identificador) e aplica a mascara. Um pré-requisito para esse código funcionar corretamente é importar os arquivos js do JQuery e plugin. Para centralizar o import podemos colocá-lo no cadastro.xhtml, o template das telas de cadastro, veja esse trecho de código:
<script src="js/jquery.js" type="text/javascript">
</script>
<script src="js/jquery.maskedinput.js" type="text/javascript">
</script>

No formulário de Fornecedor podemos aplicar esse componente para os campos de CNPJ e Telefone, veja o codigo completo:
<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"
    xmlns:g="http://www.globalcode.com.br/facelets">
  <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" />
        <g:inputMask id="iCnpj" value="#{fornecedorMB.fornecedor.cnpj}"
           mascara="99.999.999/9999-99" />

        <h:outputLabel value="Fone"/>
        <g:inputMask id="fone" value="#{fornecedorMB.fornecedor.nome}"
           mascara="9999-9999" />
      </h:panelGrid>
   
      <h:messages showDetail="true" showSummary="true" />

      <g:barraBotoes mbean="#{fornecedorMB}"  
         renderizaExcluir="#{fornecedorMB.fornecedor.id ne null}"/>
    </h:form>
  </ui:define>
</ui:composition>
formFornecedores.xhtml

O digito 9 representa qualquer número entre 0 e 9, maiores detalhes sobre o formato podem ser encontrados no site do plugin. Veja aqui demonstrações desse plugin.

No caso de um componente mais complexo composto por sub-tags ou que necessite de processamento em Java, podemos usar o mecanismo de TagHandler - para mais detalhes acesse o site do Facelets.
O objetivo dos 2 posts foi ilustrar de uma maneira simples e rápida como o Facelets é uma alternativa interessante abordando recursos que aumentam a produtividade do desenvolvimento favorecendo a manutenabilidade, com qualidade. Outro fator de peso é a chegada do JavaSever Faces 2.0 que adota a tecnologia como padrão de criação das telas.

Além dos Minicursos oferecidos pela Globalcode, você pode aprender mais sobre essa tecnologia no treinamento Core Web, veja detalhes aqui.

Links:
- Facelets Project
- JSF 2 / Mojarra Project
- Tutorial JQuery

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

Comentários

mchiareli disse…
oq vc usou para criar as imagens do protótipo?
leandro disse…
onde está a primeira parte?
Unknown disse…
Leandro a primeira parte aqui:
http://blog.globalcode.com.br/2009/08/facelets-uma-forma-mais-agil-para.html
Junior Osho disse…
otimo blog e post !

valeu !
Wanderlei Magri disse…
Opa, gostaria de saber se tem como usar essa funcao ou algo semelhante para recuperar o id gerado pelo jsf tipo: jQuery(function($){$("input[id*='#{id}']").mask('#{mascara}');});
essa funcao vc usa ja para colocar a mascara certo, gostaria q ela fosse utilizada somente para pegar o id gerado algo +- assim:
var id = jQuery(function($){$("input[id*='#{id}']").id;});
Tem como ou tem algum jeito de fazer isso?
Obrigado desde ja.
Anônimo disse…
Olá!! Ótimo post!

Como eu faria para passar um parâmetro pelos mbeans do exemplo? A função funciona legal se estou com um único objeto! Mas nun dataTable tenho o objeto no atributo var....

Obrigado
andre disse…
Tenho uma duvida, com a utilização de facelets, eu sempre tenho que usar arquivos .xhtml?
Ou posso fazer um template e usar dentro de arquivos jsf?
Programmerms disse…
Ola , tdo certo ?

Seguinte nao consigo fazer rodar o componente.
Ola , nao estou conseguindo fazer rodar o

da um erro dizendo que o atributo do componotente nao foi registrado na interface.

Eta igualzinho ao teu exemplo , na verdade so copiei e colei .... oq pode estar errado ?


Vlw
paulojeronimo disse…
O Bruno Borges fez uma pequena referência a este post, fazendo um código com funcionalidades similares e publicando-o no link http://bit.ly/c0KexP
Unknown disse…
Muito legal o artigo, eder. Parabéns!

Como sempre direto ao ponto, sem fazer fita.

Perfeito!

Postagens mais visitadas deste blog

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

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

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

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

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