SlideShare a Scribd company logo
JustJava 2008


     JavaServer Faces e
          Facelets:
    Um casamento perfeito
   Yara Senger
   Instrutora e Diretora Educacional Globalcode

   Alberto Lemos (Dr. Spock)
   Arquiteto e Instrutor Globalcode
Objetivo




   Apresentar o que é e porque usar o
   framework Facelets em aplicações
             Web com JSF
Agenda

 •   Introdução: O que é Facelets?
 •   Principais funcionalidades do Facelets
 •   O Facelets no JCP e JSF 2.0
 •   Configurando uma aplicação Web
 •   Criando um template de tela JSF
 •   Criando uma tela JSF com Facelets
 •   Criando componentes de UI
 •   Suporte nos principais IDEs
 •   Conclusão
 •   Perguntas & Respostas
Introdução: O que é Facelets?
 • Framework de código aberto e uso livre, sob
   licença CDDL 1.0, criado pelo Jacob Hookom;

 • Foi criado especificamente para JSF,
   resolvendo deficiências encontradas
   nas versões iniciais;

 • Ainda não é uma tecnologia
   padrão mantida pelo JCP;

 • Uma linguagem de descrição de páginas (PDL)
   criada especificamente para JSF;

 • Será incorporado no JSF 2.0, substituindo JSP
Introdução: O que é Facelets?
Introdução: O que é Facelets?
Principais funcionalidades
 • Disponibiliza um novo compilador de páginas
   baseado em XHTML;
 • Realiza a criação da árvore de componentes
   das telas JSF;
 • Suporta as custom tags: JSF Core, JSF HTML e JSTL;
 • Criação de templates de tela JSF e reuso
   (herança) de telas;
 • Composição de componentes JSF para a formação
   de novos componentes;
 • Definição de custom tags para usar os novos
   componentes visuais.
Configurando aplicação Web
 • Download do Facelets:
   https://facelets.dev.java.net/
 • Adicionar o JAR em /WEB-INF/lib: jsf-facelets.jar
 • Adicionar configuração no web.xml:
   <context-param>
     <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
     <param-value>.xhtml</param-value>
   </context-param>


 • Adicionar configuração no faces-config.xml:
   <application>
     <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
   </application>



 • O Facelets estará pronto para ser usado!
Criando template de tela JSF
 • Criar uma arquivo texto com extensão XHTML no
   projeto;
 • Definir as custom tags JSF Core e JSF HTML via
   XML namespaces;
 • Adicionar a custom tag do Facelets via XML
   namespace;
 • Definir áreas de conteúdo substituível através
   da custom tag:
      <ui:insert name=quot;nome_areaquot;>Conteúdo Default</ui:insert>

 • Construir a tela JSF com tags HTML e JSF.
Exemplo de template XHTML
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot;
                      quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;>

<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;
      xmlns:h=quot;http://java.sun.com/jsf/htmlquot;               Define prefixo e
      xmlns:f=quot;http://java.sun.com/jsf/corequot;
      xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;>         custom tag
  <head>
    <title><ui:insert name=quot;titlequot;>Título da Página</ui:insert></title>
  </head>

  <body>
    <h2><ui:insert name=quot;headerquot;>Cabeçalho</ui:insert></h2>
    <table width=quot;90%quot; border=quot;1quot;>
      <tr>
        <td><h:messages /></td>
      </tr>
      <tr>                                           Áreas substituíveis
        <td>
          <ui:insert name=quot;bodyquot;>Corpo da Página</ui:insert>
        </td>
      </tr>
    </table>
  </body>

</html>
                                                               template.xhtml
Criando tela JSF com Facelets
 • Criar uma arquivo texto com extensão XHTML no
   projeto;
 • Adicionar as custom tags via XML namespace;
 • Definir o template a ser usado através da custom
   tag:
  <ui:composition template=quot;template.xhtmlquot;>...</ui:composition>


 • Definir o conteúdo de cada área substituível
   através da custom tag:
       <ui:define name=quot;nome_areaquot;>Novo conteúdo</ui:define>

 • Construir a tela JSF com tags HTML e JSF.
Exemplo de tela com Facelets
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot;
                      quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;>

<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;
      xmlns:f=quot;http://java.sun.com/jsf/corequot;                  Template a
      xmlns:h=quot;http://java.sun.com/jsf/htmlquot;
      xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;>            ser usado!
  <body>
    <ui:composition template=quot;/WEB-INF/templates/template.xhtmlquot;>
      <ui:define name=quot;titlequot;>Cadastro de Produtos</ui:define>
      <ui:define name=quot;headerquot;>Cadastro de Produtos</ui:define>
      <ui:define name=quot;bodyquot;>
        <h:form>
          <h:panelGrid columns=quot;2quot;>
            <h:outputLabel for=quot;idcodquot; value=quot;Código: quot; />
            <h:inputText id=quot;idcodquot; value=quot;#{produtoMB.codigo}quot; />
            <h:outputLabel for=quot;iddescquot; value=quot;Descrição: quot; />
            <h:inputText id=quot;iddescquot; value=quot;#{produtoMB.descricao}quot; />
            <h:commandButton value=quot;Salvarquot; action=quot;#{produtoMB.salvar}quot;/>
          </h:panelGrid>
        </h:form>
      </ui:define>
    </ui:composition>
  </body>

</html>
                                          Conteúdo da
                                          área “body”         telaJSF.xhtml
Demonstração
Criando componentes de UI
 • Por não usar JSP, o Facelets define um
   mecanismo próprio de custom tags;
 • Permite associar custom tags a UIComponents,
   Validators, Converters, TagHandlers ou
   TagFiles;
 • Será necessário criar um XML de configuração:
   “Facelets Taglib Descriptor”;
 • Os componentes UIComponents, Validators e
   Converters devem ser registrados no faces-
   config.xml;
Criando componentes de UI
 • Um TagHandler deve estender a classe abstrata
   com.sun.facelets.tag.TagHandler;
 • Um TagFile deve ser implementado como um
   arquivo XHTML;
 • O “Facelets Taglib Descriptor” deve ser registrado
   no web.xml:
   <context-param>
     <param-name>facelets.LIBRARIES</param-name>
     <param-value>
       /WEB-INF/facelets/minha.taglib.xml,
       /WEB-INF/facelets/outra.taglib.xml
     </param-value>
   </context-param>
Exemplo de configuração
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>

<!DOCTYPE facelet-taglib
          PUBLIC quot;-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//ENquot;
                 quot;http://java.sun.com/dtd/facelet-taglib_1_0.dtdquot;>

<facelet-taglib>

  <namespace>http://www.globalcode.com.br/facelets/justjava2008</namespace>

  <tag>
    <tag-name>produto</tag-name>
    <source>tags/produto.xhtml</source>
  </tag>

</facelet-taglib>                                       exemplo.taglib.xml


     <context-param>
       <param-name>facelets.LIBRARIES</param-name>
       <param-value>/WEB-INF/facelets/exemplo.taglib.xml</param-value>
     </context-param>
                                                                 web.xml
Exemplo de uso de TagFile
<?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?>
                                                        exemplo.taglib.xml
<!DOCTYPE facelet-taglib
          PUBLIC quot;-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//ENquot;
                 quot;http://java.sun.com/dtd/facelet-taglib_1_0.dtdquot;>

<facelet-taglib>

  <namespace>http://www.globalcode.com.br/facelets/justjava2008</namespace>

  <tag>
    <tag-name>produto</tag-name>
    <source>tags/produto.xhtml</source>
  </tag>
         <html xmlns= ...
</facelet-taglib>
               xmlns:jj2008=quot;http://www.globalcode.com.br/facelets/justjava2008quot;>

          <body>
            <ui:composition template=quot;/WEB-INF/templates/template2.xhtmlquot;>
              <ui:define name=quot;titlequot;>Cadastro de Produtos</ui:define>
              <ui:define name=quot;headerquot;>Cadastro de Produtos</ui:define>
              <ui:define name=quot;bodyquot;>
                <jj2008:produto entity=quot;#{produtoMB.produto}quot;
                                controller=quot;#{produtoMB}quot; />
              </ui:define>
            </ui:composition>
          </body>

        </html>                                               telaJSF3.xhtml
Exemplo de TagFile

<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot;
                      quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;>

<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;
      xmlns:h=quot;http://java.sun.com/jsf/htmlquot;
      xmlns:f=quot;http://java.sun.com/jsf/corequot;         Uso dos parâmetros
      xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;>   da Tag!
  <ui:component>
    <h:form>
      <h:panelGrid columns=quot;2quot;>
        <h:outputLabel for=quot;idcodquot; value=quot;Código: quot; />
        <h:inputText id=quot;idcodquot; value=quot;#{entity.codigo}quot; />
        <h:outputLabel for=quot;iddescquot; value=quot;Descrição: quot; />
        <h:inputText id=quot;iddescquot; value=quot;#{entity.descricao}quot; />
        <h:outputLabel for=quot;idprcquot; value=quot;Preço: quot; />
        <h:inputText id=quot;idprcquot; value=quot;#{entity.preco}quot;>
          <f:convertNumber locale=quot;pt_BRquot; pattern=quot;###,###.##quot;/>
        </h:inputText>
        <h:commandButton value=quot;Salvarquot; action=quot;#{controller.salvarProduto}quot;/>
      </h:panelGrid>
    </h:form>
  </ui:component>

</html>
                                                              produto.xhtml
Demonstração
Suporte nos principais IDEs
 • Suportado pelo Eclipse e NetBeans através de
   plugins;
 • Recomendado o plugin JBoss Tools para o Eclipse;
   Download: http://jboss.org/tools/

 • O plugin para o NetBeans: nbfaceletssupport;
   Download: https://nbfaceletssupport.dev.java.net/

 • Os plugins permitem:
   • Criação de projeto Web configurado com Facelets;
   • Criação de arquivos XHTML com import de taglib;
   • Paleta para Drag'n Drop das custom tags do Facelets;
   • Editor de XHTML com preview (wysywyg);
   • Completamento de código: tags, atributos e EL;
   • Checagem de erros.
Suporte a Facelets no Eclipse
Suporte a Facelets no NetBeans
O Facelets no JCP e JSF 2.0
 • A popularidade chamou a atenção do JCP;
 • Será incorporado à especificação JSF 2.0 (JSR-314);
 • A especificação também será baseada no
   JSFTemplating;
 • Passará por melhorias ao ser incorporado no JSF
   2.0;
 • Suportará registro de listeners, validadors,
   converters em componentes visuais criados via
   XHTML;
 • Será a linguagem padrão para descrever telas
   JSF (Page Description Language - PDL).
O Facelets no JCP e JSF 2.0
 • Poderá ser chamado de PDL ou Facelets 2
 • Miniminiza o esforço para criação de componentes
   compostos
 • Define um diretório padrão onde os “fragmentos” /
   componentes compostos devem ser colocados;
 • Ainda está incompleto
 • Mais informações:
 http://blogs
     .sun.com/enterprisetechtips/entry/true_abstraction_composite_ui_components
 http://blogs.sun.com/rlubke/entry/jsf_2_0_new_feature5
 http://www.jcp.org/en/jsr/detail?id=314
Exemplo de template XHTML

<html xmlns=quot;http://www.w3.org/1999/xhtmlquot;
      xmlns:h=quot;http://java.sun.com/jsf/htmlquot;
      xmlns:f=quot;http://java.sun.com/jsf/corequot;
      xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;
                                                             Define prefixo e
      xmlns:ez=quot;http://java.sun.com/jsf/composite/ezcompquot;>   custom tag
<ez:loginPanel>
   <f:actionListener for=quot;loginEventquot; type=quot;example01.LoginActionListenerquot; />

   <ui:param name=quot;usernamequot; value=quot;#{LoginActionMB.username}quot; />

   <ui:param name=quot;passwordquot; value=quot;#{LoginActionMB.password}quot;/>
  </ez:loginPanel>                                          index.xhtml

<composite:interface>
            <composite:actionSource name=quot;loginEventquot; />
            <composite:valueHolder name=quot;usernamequot; />
            <composite:valueHolder name=quot;passwordquot; />
                                                             Define prefixo e
</composite:interface>                                       custom tag
<composite:implementation>
   <table>
       <tr><td>Username: <h:inputText   id = quot;usernamequot; /> </td></tr>
       <tr><td>Password: <h:inputText   id = quot;passwordquot; /> </td></tr>
       <tr><td><h:commandButton value=quot;Login” id=quot;loginEventquot;/></tr></td>
   </table>
</composite:implementation>
                                                             loginPanel.xhtml
Conclusão
 • O Facelets será incorporado à especificação JSF 2.0;
 • Será a linguagem padrão de descrição de
   páginas;
 • Elimina a falta de um mecanismo de templates
   integrado ao JSF;
 • Permite a criação de componentes de UI e definição
   de custom tags;
 • Permite o reuso de definição de estrutura de telas
   JSF;
 • Permite a saparação da definição de padrão
   visual da definição das telas;
 • Já pode ser usado hoje com o JSF 1.2 e 1.1!
Perguntas & Respostas




             ?

More Related Content

More from Dr. Spock

Improving Batch-Process Testing Techniques with a Domain-Specific Language
Improving Batch-Process Testing Techniques with a Domain-Specific LanguageImproving Batch-Process Testing Techniques with a Domain-Specific Language
Improving Batch-Process Testing Techniques with a Domain-Specific Language
Dr. Spock
 
Avoiding Java EE Application Design Traps to Achieve Effective Use of Cloud C...
Avoiding Java EE Application Design Traps to Achieve Effective Use of Cloud C...Avoiding Java EE Application Design Traps to Achieve Effective Use of Cloud C...
Avoiding Java EE Application Design Traps to Achieve Effective Use of Cloud C...
Dr. Spock
 
Evitando Armadilhas no Projeto de Aplicações Java EE para uso eficaz na nuvem
Evitando Armadilhas no Projeto de Aplicações Java EE para uso eficaz na nuvemEvitando Armadilhas no Projeto de Aplicações Java EE para uso eficaz na nuvem
Evitando Armadilhas no Projeto de Aplicações Java EE para uso eficaz na nuvem
Dr. Spock
 
Novidades do JSF: Um tour completo no JSF 2.2
Novidades do JSF: Um tour completo no JSF 2.2Novidades do JSF: Um tour completo no JSF 2.2
Novidades do JSF: Um tour completo no JSF 2.2
Dr. Spock
 
Workshop de Introdução ao ScrumToys
Workshop de Introdução ao ScrumToysWorkshop de Introdução ao ScrumToys
Workshop de Introdução ao ScrumToys
Dr. Spock
 
TDC2012: Usando os recursos de extensibilidade da API de CDI do Java EE 6
TDC2012: Usando os recursos de extensibilidade da API de CDI do Java EE 6TDC2012: Usando os recursos de extensibilidade da API de CDI do Java EE 6
TDC2012: Usando os recursos de extensibilidade da API de CDI do Java EE 6
Dr. Spock
 
TDC2012: Explorando os conceitos básicos da API de CDI do Java EE 6
TDC2012: Explorando os conceitos básicos da API de CDI do Java EE 6TDC2012: Explorando os conceitos básicos da API de CDI do Java EE 6
TDC2012: Explorando os conceitos básicos da API de CDI do Java EE 6
Dr. Spock
 
TDC2011: Spring Mobile
TDC2011: Spring MobileTDC2011: Spring Mobile
TDC2011: Spring Mobile
Dr. Spock
 
TDC2011: Spring, uma plataforma enterprise, social, móvel e nas nuvens
TDC2011: Spring, uma plataforma enterprise, social, móvel e nas nuvensTDC2011: Spring, uma plataforma enterprise, social, móvel e nas nuvens
TDC2011: Spring, uma plataforma enterprise, social, móvel e nas nuvens
Dr. Spock
 
TDC2011: Arquitetura de Software Enterprise
TDC2011: Arquitetura de Software EnterpriseTDC2011: Arquitetura de Software Enterprise
TDC2011: Arquitetura de Software Enterprise
Dr. Spock
 
TDC2011: Java EE 6 & Azure
TDC2011: Java EE 6 & AzureTDC2011: Java EE 6 & Azure
TDC2011: Java EE 6 & Azure
Dr. Spock
 
Spring Framework no desenvolvimento móvel
Spring Framework no desenvolvimento móvelSpring Framework no desenvolvimento móvel
Spring Framework no desenvolvimento móvel
Dr. Spock
 
Desafios no deploy de aplicações Java EE 6 no Microsoft Azure
Desafios no deploy de aplicações Java EE 6 no Microsoft AzureDesafios no deploy de aplicações Java EE 6 no Microsoft Azure
Desafios no deploy de aplicações Java EE 6 no Microsoft Azure
Dr. Spock
 
Performance Tips and Tricks: Java EE, Java Persistence API and JavaServer Faces
Performance Tips and Tricks: Java EE, Java Persistence API and JavaServer FacesPerformance Tips and Tricks: Java EE, Java Persistence API and JavaServer Faces
Performance Tips and Tricks: Java EE, Java Persistence API and JavaServer Faces
Dr. Spock
 
Dicas e truques sobre performance em JavaEE, JPA e JSF
Dicas e truques sobre performance em JavaEE, JPA e JSFDicas e truques sobre performance em JavaEE, JPA e JSF
Dicas e truques sobre performance em JavaEE, JPA e JSF
Dr. Spock
 
Computação Física com Arduino, Program-ME e Java
Computação Física com Arduino, Program-ME e JavaComputação Física com Arduino, Program-ME e Java
Computação Física com Arduino, Program-ME e Java
Dr. Spock
 
Spring 3: Uma Plataforma além do Framework
Spring 3: Uma Plataforma além do FrameworkSpring 3: Uma Plataforma além do Framework
Spring 3: Uma Plataforma além do Framework
Dr. Spock
 
Produtividade com Spring Roo no Google App Engine
Produtividade com Spring Roo no Google App EngineProdutividade com Spring Roo no Google App Engine
Produtividade com Spring Roo no Google App Engine
Dr. Spock
 
Criando uma Aplicação Web com Spring Roo em 5 minutos!
Criando uma Aplicação Web com Spring Roo em 5 minutos!Criando uma Aplicação Web com Spring Roo em 5 minutos!
Criando uma Aplicação Web com Spring Roo em 5 minutos!
Dr. Spock
 
Spring Framework 3: Um 'brainstorm' de novas funcionalidades
Spring Framework 3: Um 'brainstorm' de novas funcionalidadesSpring Framework 3: Um 'brainstorm' de novas funcionalidades
Spring Framework 3: Um 'brainstorm' de novas funcionalidades
Dr. Spock
 

More from Dr. Spock (20)

Improving Batch-Process Testing Techniques with a Domain-Specific Language
Improving Batch-Process Testing Techniques with a Domain-Specific LanguageImproving Batch-Process Testing Techniques with a Domain-Specific Language
Improving Batch-Process Testing Techniques with a Domain-Specific Language
 
Avoiding Java EE Application Design Traps to Achieve Effective Use of Cloud C...
Avoiding Java EE Application Design Traps to Achieve Effective Use of Cloud C...Avoiding Java EE Application Design Traps to Achieve Effective Use of Cloud C...
Avoiding Java EE Application Design Traps to Achieve Effective Use of Cloud C...
 
Evitando Armadilhas no Projeto de Aplicações Java EE para uso eficaz na nuvem
Evitando Armadilhas no Projeto de Aplicações Java EE para uso eficaz na nuvemEvitando Armadilhas no Projeto de Aplicações Java EE para uso eficaz na nuvem
Evitando Armadilhas no Projeto de Aplicações Java EE para uso eficaz na nuvem
 
Novidades do JSF: Um tour completo no JSF 2.2
Novidades do JSF: Um tour completo no JSF 2.2Novidades do JSF: Um tour completo no JSF 2.2
Novidades do JSF: Um tour completo no JSF 2.2
 
Workshop de Introdução ao ScrumToys
Workshop de Introdução ao ScrumToysWorkshop de Introdução ao ScrumToys
Workshop de Introdução ao ScrumToys
 
TDC2012: Usando os recursos de extensibilidade da API de CDI do Java EE 6
TDC2012: Usando os recursos de extensibilidade da API de CDI do Java EE 6TDC2012: Usando os recursos de extensibilidade da API de CDI do Java EE 6
TDC2012: Usando os recursos de extensibilidade da API de CDI do Java EE 6
 
TDC2012: Explorando os conceitos básicos da API de CDI do Java EE 6
TDC2012: Explorando os conceitos básicos da API de CDI do Java EE 6TDC2012: Explorando os conceitos básicos da API de CDI do Java EE 6
TDC2012: Explorando os conceitos básicos da API de CDI do Java EE 6
 
TDC2011: Spring Mobile
TDC2011: Spring MobileTDC2011: Spring Mobile
TDC2011: Spring Mobile
 
TDC2011: Spring, uma plataforma enterprise, social, móvel e nas nuvens
TDC2011: Spring, uma plataforma enterprise, social, móvel e nas nuvensTDC2011: Spring, uma plataforma enterprise, social, móvel e nas nuvens
TDC2011: Spring, uma plataforma enterprise, social, móvel e nas nuvens
 
TDC2011: Arquitetura de Software Enterprise
TDC2011: Arquitetura de Software EnterpriseTDC2011: Arquitetura de Software Enterprise
TDC2011: Arquitetura de Software Enterprise
 
TDC2011: Java EE 6 & Azure
TDC2011: Java EE 6 & AzureTDC2011: Java EE 6 & Azure
TDC2011: Java EE 6 & Azure
 
Spring Framework no desenvolvimento móvel
Spring Framework no desenvolvimento móvelSpring Framework no desenvolvimento móvel
Spring Framework no desenvolvimento móvel
 
Desafios no deploy de aplicações Java EE 6 no Microsoft Azure
Desafios no deploy de aplicações Java EE 6 no Microsoft AzureDesafios no deploy de aplicações Java EE 6 no Microsoft Azure
Desafios no deploy de aplicações Java EE 6 no Microsoft Azure
 
Performance Tips and Tricks: Java EE, Java Persistence API and JavaServer Faces
Performance Tips and Tricks: Java EE, Java Persistence API and JavaServer FacesPerformance Tips and Tricks: Java EE, Java Persistence API and JavaServer Faces
Performance Tips and Tricks: Java EE, Java Persistence API and JavaServer Faces
 
Dicas e truques sobre performance em JavaEE, JPA e JSF
Dicas e truques sobre performance em JavaEE, JPA e JSFDicas e truques sobre performance em JavaEE, JPA e JSF
Dicas e truques sobre performance em JavaEE, JPA e JSF
 
Computação Física com Arduino, Program-ME e Java
Computação Física com Arduino, Program-ME e JavaComputação Física com Arduino, Program-ME e Java
Computação Física com Arduino, Program-ME e Java
 
Spring 3: Uma Plataforma além do Framework
Spring 3: Uma Plataforma além do FrameworkSpring 3: Uma Plataforma além do Framework
Spring 3: Uma Plataforma além do Framework
 
Produtividade com Spring Roo no Google App Engine
Produtividade com Spring Roo no Google App EngineProdutividade com Spring Roo no Google App Engine
Produtividade com Spring Roo no Google App Engine
 
Criando uma Aplicação Web com Spring Roo em 5 minutos!
Criando uma Aplicação Web com Spring Roo em 5 minutos!Criando uma Aplicação Web com Spring Roo em 5 minutos!
Criando uma Aplicação Web com Spring Roo em 5 minutos!
 
Spring Framework 3: Um 'brainstorm' de novas funcionalidades
Spring Framework 3: Um 'brainstorm' de novas funcionalidadesSpring Framework 3: Um 'brainstorm' de novas funcionalidades
Spring Framework 3: Um 'brainstorm' de novas funcionalidades
 

JustJava2008 Facelets

  • 1. JustJava 2008 JavaServer Faces e Facelets: Um casamento perfeito Yara Senger Instrutora e Diretora Educacional Globalcode Alberto Lemos (Dr. Spock) Arquiteto e Instrutor Globalcode
  • 2. Objetivo Apresentar o que é e porque usar o framework Facelets em aplicações Web com JSF
  • 3. Agenda • Introdução: O que é Facelets? • Principais funcionalidades do Facelets • O Facelets no JCP e JSF 2.0 • Configurando uma aplicação Web • Criando um template de tela JSF • Criando uma tela JSF com Facelets • Criando componentes de UI • Suporte nos principais IDEs • Conclusão • Perguntas & Respostas
  • 4. Introdução: O que é Facelets? • Framework de código aberto e uso livre, sob licença CDDL 1.0, criado pelo Jacob Hookom; • Foi criado especificamente para JSF, resolvendo deficiências encontradas nas versões iniciais; • Ainda não é uma tecnologia padrão mantida pelo JCP; • Uma linguagem de descrição de páginas (PDL) criada especificamente para JSF; • Será incorporado no JSF 2.0, substituindo JSP
  • 5. Introdução: O que é Facelets?
  • 6. Introdução: O que é Facelets?
  • 7. Principais funcionalidades • Disponibiliza um novo compilador de páginas baseado em XHTML; • Realiza a criação da árvore de componentes das telas JSF; • Suporta as custom tags: JSF Core, JSF HTML e JSTL; • Criação de templates de tela JSF e reuso (herança) de telas; • Composição de componentes JSF para a formação de novos componentes; • Definição de custom tags para usar os novos componentes visuais.
  • 8. Configurando aplicação Web • Download do Facelets: https://facelets.dev.java.net/ • Adicionar o JAR em /WEB-INF/lib: jsf-facelets.jar • Adicionar configuração no web.xml: <context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value> </context-param> • Adicionar configuração no faces-config.xml: <application> <view-handler>com.sun.facelets.FaceletViewHandler</view-handler> </application> • O Facelets estará pronto para ser usado!
  • 9. Criando template de tela JSF • Criar uma arquivo texto com extensão XHTML no projeto; • Definir as custom tags JSF Core e JSF HTML via XML namespaces; • Adicionar a custom tag do Facelets via XML namespace; • Definir áreas de conteúdo substituível através da custom tag: <ui:insert name=quot;nome_areaquot;>Conteúdo Default</ui:insert> • Construir a tela JSF com tags HTML e JSF.
  • 10. Exemplo de template XHTML <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xmlns:h=quot;http://java.sun.com/jsf/htmlquot; Define prefixo e xmlns:f=quot;http://java.sun.com/jsf/corequot; xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;> custom tag <head> <title><ui:insert name=quot;titlequot;>Título da Página</ui:insert></title> </head> <body> <h2><ui:insert name=quot;headerquot;>Cabeçalho</ui:insert></h2> <table width=quot;90%quot; border=quot;1quot;> <tr> <td><h:messages /></td> </tr> <tr> Áreas substituíveis <td> <ui:insert name=quot;bodyquot;>Corpo da Página</ui:insert> </td> </tr> </table> </body> </html> template.xhtml
  • 11. Criando tela JSF com Facelets • Criar uma arquivo texto com extensão XHTML no projeto; • Adicionar as custom tags via XML namespace; • Definir o template a ser usado através da custom tag: <ui:composition template=quot;template.xhtmlquot;>...</ui:composition> • Definir o conteúdo de cada área substituível através da custom tag: <ui:define name=quot;nome_areaquot;>Novo conteúdo</ui:define> • Construir a tela JSF com tags HTML e JSF.
  • 12. Exemplo de tela com Facelets <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xmlns:f=quot;http://java.sun.com/jsf/corequot; Template a xmlns:h=quot;http://java.sun.com/jsf/htmlquot; xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;> ser usado! <body> <ui:composition template=quot;/WEB-INF/templates/template.xhtmlquot;> <ui:define name=quot;titlequot;>Cadastro de Produtos</ui:define> <ui:define name=quot;headerquot;>Cadastro de Produtos</ui:define> <ui:define name=quot;bodyquot;> <h:form> <h:panelGrid columns=quot;2quot;> <h:outputLabel for=quot;idcodquot; value=quot;Código: quot; /> <h:inputText id=quot;idcodquot; value=quot;#{produtoMB.codigo}quot; /> <h:outputLabel for=quot;iddescquot; value=quot;Descrição: quot; /> <h:inputText id=quot;iddescquot; value=quot;#{produtoMB.descricao}quot; /> <h:commandButton value=quot;Salvarquot; action=quot;#{produtoMB.salvar}quot;/> </h:panelGrid> </h:form> </ui:define> </ui:composition> </body> </html> Conteúdo da área “body” telaJSF.xhtml
  • 14. Criando componentes de UI • Por não usar JSP, o Facelets define um mecanismo próprio de custom tags; • Permite associar custom tags a UIComponents, Validators, Converters, TagHandlers ou TagFiles; • Será necessário criar um XML de configuração: “Facelets Taglib Descriptor”; • Os componentes UIComponents, Validators e Converters devem ser registrados no faces- config.xml;
  • 15. Criando componentes de UI • Um TagHandler deve estender a classe abstrata com.sun.facelets.tag.TagHandler; • Um TagFile deve ser implementado como um arquivo XHTML; • O “Facelets Taglib Descriptor” deve ser registrado no web.xml: <context-param> <param-name>facelets.LIBRARIES</param-name> <param-value> /WEB-INF/facelets/minha.taglib.xml, /WEB-INF/facelets/outra.taglib.xml </param-value> </context-param>
  • 16. Exemplo de configuração <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> <!DOCTYPE facelet-taglib PUBLIC quot;-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//ENquot; quot;http://java.sun.com/dtd/facelet-taglib_1_0.dtdquot;> <facelet-taglib> <namespace>http://www.globalcode.com.br/facelets/justjava2008</namespace> <tag> <tag-name>produto</tag-name> <source>tags/produto.xhtml</source> </tag> </facelet-taglib> exemplo.taglib.xml <context-param> <param-name>facelets.LIBRARIES</param-name> <param-value>/WEB-INF/facelets/exemplo.taglib.xml</param-value> </context-param> web.xml
  • 17. Exemplo de uso de TagFile <?xml version=quot;1.0quot; encoding=quot;UTF-8quot;?> exemplo.taglib.xml <!DOCTYPE facelet-taglib PUBLIC quot;-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//ENquot; quot;http://java.sun.com/dtd/facelet-taglib_1_0.dtdquot;> <facelet-taglib> <namespace>http://www.globalcode.com.br/facelets/justjava2008</namespace> <tag> <tag-name>produto</tag-name> <source>tags/produto.xhtml</source> </tag> <html xmlns= ... </facelet-taglib> xmlns:jj2008=quot;http://www.globalcode.com.br/facelets/justjava2008quot;> <body> <ui:composition template=quot;/WEB-INF/templates/template2.xhtmlquot;> <ui:define name=quot;titlequot;>Cadastro de Produtos</ui:define> <ui:define name=quot;headerquot;>Cadastro de Produtos</ui:define> <ui:define name=quot;bodyquot;> <jj2008:produto entity=quot;#{produtoMB.produto}quot; controller=quot;#{produtoMB}quot; /> </ui:define> </ui:composition> </body> </html> telaJSF3.xhtml
  • 18. Exemplo de TagFile <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xmlns:h=quot;http://java.sun.com/jsf/htmlquot; xmlns:f=quot;http://java.sun.com/jsf/corequot; Uso dos parâmetros xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot;> da Tag! <ui:component> <h:form> <h:panelGrid columns=quot;2quot;> <h:outputLabel for=quot;idcodquot; value=quot;Código: quot; /> <h:inputText id=quot;idcodquot; value=quot;#{entity.codigo}quot; /> <h:outputLabel for=quot;iddescquot; value=quot;Descrição: quot; /> <h:inputText id=quot;iddescquot; value=quot;#{entity.descricao}quot; /> <h:outputLabel for=quot;idprcquot; value=quot;Preço: quot; /> <h:inputText id=quot;idprcquot; value=quot;#{entity.preco}quot;> <f:convertNumber locale=quot;pt_BRquot; pattern=quot;###,###.##quot;/> </h:inputText> <h:commandButton value=quot;Salvarquot; action=quot;#{controller.salvarProduto}quot;/> </h:panelGrid> </h:form> </ui:component> </html> produto.xhtml
  • 20. Suporte nos principais IDEs • Suportado pelo Eclipse e NetBeans através de plugins; • Recomendado o plugin JBoss Tools para o Eclipse; Download: http://jboss.org/tools/ • O plugin para o NetBeans: nbfaceletssupport; Download: https://nbfaceletssupport.dev.java.net/ • Os plugins permitem: • Criação de projeto Web configurado com Facelets; • Criação de arquivos XHTML com import de taglib; • Paleta para Drag'n Drop das custom tags do Facelets; • Editor de XHTML com preview (wysywyg); • Completamento de código: tags, atributos e EL; • Checagem de erros.
  • 21. Suporte a Facelets no Eclipse
  • 22. Suporte a Facelets no NetBeans
  • 23. O Facelets no JCP e JSF 2.0 • A popularidade chamou a atenção do JCP; • Será incorporado à especificação JSF 2.0 (JSR-314); • A especificação também será baseada no JSFTemplating; • Passará por melhorias ao ser incorporado no JSF 2.0; • Suportará registro de listeners, validadors, converters em componentes visuais criados via XHTML; • Será a linguagem padrão para descrever telas JSF (Page Description Language - PDL).
  • 24. O Facelets no JCP e JSF 2.0 • Poderá ser chamado de PDL ou Facelets 2 • Miniminiza o esforço para criação de componentes compostos • Define um diretório padrão onde os “fragmentos” / componentes compostos devem ser colocados; • Ainda está incompleto • Mais informações: http://blogs .sun.com/enterprisetechtips/entry/true_abstraction_composite_ui_components http://blogs.sun.com/rlubke/entry/jsf_2_0_new_feature5 http://www.jcp.org/en/jsr/detail?id=314
  • 25. Exemplo de template XHTML <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xmlns:h=quot;http://java.sun.com/jsf/htmlquot; xmlns:f=quot;http://java.sun.com/jsf/corequot; xmlns:ui=quot;http://java.sun.com/jsf/faceletsquot; Define prefixo e xmlns:ez=quot;http://java.sun.com/jsf/composite/ezcompquot;> custom tag <ez:loginPanel> <f:actionListener for=quot;loginEventquot; type=quot;example01.LoginActionListenerquot; /> <ui:param name=quot;usernamequot; value=quot;#{LoginActionMB.username}quot; /> <ui:param name=quot;passwordquot; value=quot;#{LoginActionMB.password}quot;/> </ez:loginPanel> index.xhtml <composite:interface> <composite:actionSource name=quot;loginEventquot; /> <composite:valueHolder name=quot;usernamequot; /> <composite:valueHolder name=quot;passwordquot; /> Define prefixo e </composite:interface> custom tag <composite:implementation> <table> <tr><td>Username: <h:inputText id = quot;usernamequot; /> </td></tr> <tr><td>Password: <h:inputText id = quot;passwordquot; /> </td></tr> <tr><td><h:commandButton value=quot;Login” id=quot;loginEventquot;/></tr></td> </table> </composite:implementation> loginPanel.xhtml
  • 26. Conclusão • O Facelets será incorporado à especificação JSF 2.0; • Será a linguagem padrão de descrição de páginas; • Elimina a falta de um mecanismo de templates integrado ao JSF; • Permite a criação de componentes de UI e definição de custom tags; • Permite o reuso de definição de estrutura de telas JSF; • Permite a saparação da definição de padrão visual da definição das telas; • Já pode ser usado hoje com o JSF 1.2 e 1.1!