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

PrimeFaces com JSF2 no ScrumToys

O JSF traz um grupo de componentes visuais prontos, a partir da versão 2.0 com suporte a Ajax nativo! Melhor que isso é a possibilidade de customizar ou utilizar uma suíte de componentes prontos para "turbinar" o projeto com o minimo de esforço. PrimeFaces é uma suite de componentes JSF customizados, a maioria com suporte a ajax, conta com um Kit para desenvolvimento mobile, é open source, a documentação é razoável, facíl de instalar e usar. Nesse exemplo utilizo o PrimeFaces 2.0.0, versão com suporte a JSF 2, no ScrumToys. Conheçe o ScrumToys ? ScrumToys é um Projeto Exemplo para JavaServer Faces 2.0 dentro do NetBeans 6.8, criado e mantido pelo time da Globalcode. É interessante que você tenha o NetBeans 6.8 para fazer esse exemplo, senão tiver baixe aqui . Baixe também, aqui , o PrimeFaces e o configure no NetBeans como biblioteca para o ScrumToys. Inicialmente o PrimeFaces requer a runtime JSF, mas isso pode variar dependendo de quais componentes você utilize, mai

Seja um Palestrante do TDC Connections 2022

A Equipe TDC está muito feliz e orgulhosa em começar mais uma jornada de eventos em 2022 e criar muitas oportunidades! Agora, chegou o momento para você que sempre quis ser palestrante mas não teve oportunidade, e também de quem já é palestrante experiente, e está ansioso para compartilhar aquela nova prática ou caso de sucesso fresquinho, submeter sua palestra para o TDC Connections e co-criar conosco o maior evento de desenvolvedores do Brasil.  Link de inscrição: https://cfp-conn.thedevconf.com.br/?_ga=2.103579840.1386204218.1643036190-1988609034.1631800014 Confira aqui o calendário do TDC 2022. Nesta edição teremos muitas novidades e você poderá palestrar de forma Online ou Presencial! Entenda como vai funcionar o TDC CONNECTIONS: Nesta edição, além de todo o conteúdo dividido em Trilhas transmitidas ao vivo (13 trilhas simultâneas) também teremos dois eventos híbridos em Recife e Belo Horizonte, que terão uma trilha por dia, ao vivo, para um público limitado, seguindo protocolo

Entendendo como funciona a programação de computadores: linguagens de programação, lógica, banco de dados

Nesse post, diferente dos últimos que foram mais enfáticos nas experiências com tecnologias, vou focar um pouco mais nos profissionais que estão começando, ou pretendem ingressar na área de desenvolvimento de software, falando sobre conceitos fundamentais relacionados a programação em geral . Mercado de trabalho para programação Conforme já sabemos, o mercado de desenvolvimento de software, especialmente no Brasil, continua em franca expansão, sendo que cada vez mais as empresas buscam desenvolver seus próprios sistemas usando as mais diferentes e novas tecnologias. Algumas matérias interessantes: As seis profissões mais valorizadas em 2010 no IDG Now! Muitas vagas e sensação de reaquecimento da economia Por isso, a área de desenvolvimento de software tem despertado interesse em muitos profissionais de outras áreas que desejam mudar de profissão, já que as oportunidades de trabalho tendem a ser maiores. Esse é um perfil presente em muitos dos clientes da Globalcode que acabou m

JSON fácil em Java com GSon !

Ola pessoal ! O formato JSON ( J ava S cript O bject N otation) vem se consagrando cada vez mais na comunicação de dados, principalmente nos dispositivos móveis devido a esse formato ser mais leve que o XML e também mais legível. Uma prova disso são as inúmeras bibliotecas que existem para manipular esse formato, e no caso do Android, o suporte ao JSON é nativo. Mas apesar de ter esse suporte nativo, algumas operações devem ser feitas manualmente e o código acaba ficando um pouco verboso e repetitivo, já que para cada objeto que se deseja transmitir é necessário fazer um método que lê as propriedades do JSON e faz as devidas atribuições no seu objeto Java. Vamos supor o seguinte objeto sendo transmitido em JSON: {   user: {     id: 123456,     name: "Neto Marin",     username: "netomarin",     email: "netomarin@globalcode.com.br"   } } Se você fosse tratar um Webservice que envia esse JSON para o seu aplicativo Android, além de criar a o

Top 4 desafios do gestor de TI e como superá-los

  O setor de TI se apresenta como uma área essencial ao desenvolvimento e expansão da empresa, em especial, aquelas que têm a criação de soluções tecnológicas como core business. O mercado dinâmico da atualidade, com mudanças constantes e concorrência elevada, exige aperfeiçoamento do gestor de TI para se destacar em suas atividades. Pensando em te ajudar nesse processo, separamos 4 desafios do gestor de TI e como superá-los. Acompanhe! Transformação digital na atualidade A transformação digital é constante e define os caminhos futuros da nossa sociedade. Por isso, o setor de TI vem se tornando mais estratégico em empresas de todos os segmentos. O home office é um bom exemplo de como a revolução digital está se processando. Vamos falar sobre ele e outros pontos nos tópicos a seguir. Confira! Desafios do gestor de TI Para se manter atualizado sobre o tema e permanecer competitivo no mercado, é  necessário acompanhar as tendências de TI . Confira, abaixo, alguns dos principais desafios d

Segurança da informação no alvo: o que esperar do futuro?

A segurança da informação não se trata apenas de proteger os dados contra acesso não autorizado. Na prática, refere-se aos recursos que impedem: uso; registro; inspeção; divulgação; interrupção; modificação; destruição de dados. O uso de dados pode abranger desde um perfil nas redes sociais a detalhes financeiros, biometrias ou novos projetos. Por isso, a preocupação com a proteção dos dados é crescente, tanto para empresas quanto clientes. Para muitas pessoas, a coleta de dados é considerada invasão de privacidade, criando desconfiança do titular dos dados, pois o uso dos dados pode ser facilmente corrompido, utilizado para fins não declarados. Apesar de o uso dos dados terem impulsionado os avanços tecnológicos na última década, as organizações lidam com o desafio de distinguir dados de informações pessoais de modo a proteger a privacidade e as preferências dos clientes. Neste artigo, abordaremos o impacto da segurança da informação e o que esperar do futuro. Confira casos conhecido