Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tutorial JSF 2.0 (2012)

652 views

Published on

Palestra-tutorial curto sobre JSF 2.0 (2012).

  • Be the first to comment

Tutorial JSF 2.0 (2012)

  1. 1. Java  Server  Faces  2.0   Breve  introdução  prá0ca   Helder  da  Rocha   helder@argonavis.com.br   16/02/2012  
  2. 2. Obje0vos  deste  tutorial   •  Introdução  ao  JSF  2   –  O  que  é,  quando  usar,  como  usar,  para  que  serve,   beneGcios,  perfil  de  usuários   •  Introdução  prá0ca   –  Configuração  do  ambiente   –  Criação  e  execução  de  uma  aplicação  simples   •  Breve  visão  geral  da  API  e  arquitetura   –  APIs  básica,  componentes  padrão  e  tags   –  Arquitetura  de  aplicações  JSF:  ciclo  de  vida,  0pos  de   requisições  e  respostas,  fases  do  processamento   –  Conversores,  validadores,  listeners,  suporte  a  ajax   –  Bibliotecas  de  componentes  (ex:  PrimeFaces)  e  JSR299  (CDI)  
  3. 3. O  que  é  Java  Server  Faces   •  Um  framework  de  interface  do  usuário  (UI)  para   aplicações  Web  em  Java   •  Arquitetura  baseada  em  árvore  de  componentes  com   estado  e  comportamento  mapeados  a  tags     –  Facilita  a  criação  de  GUIs  em  HTML  e  o  controle  de  ciclos   de  vida,  estado  e  eventos  em  objetos  Java   •  Arquitetura  que  promove  a  separação  de  camadas   com  baxíssimo  acoplamento   –  Facilita  testes,  desenvolvimento,  manutenção,  evolução   •  Tecnologia  baseada  em  padrões  e  independente  de   ferramentas     –  Permite  tanto  o  desenvolvimento  via  ferramentas   integradas,  mas  também  sem  essas  ferramentas  
  4. 4. Caracterís0cas   •  Transparência  no  gerenciamento  do  estado  nas   requisições   •  Encapsulamento  de  diferenças  entre  browsers   •  Suporte  a  processamento  mulC-­‐página  de  formulários   •  Plataforma  extensível  (através  de  bibliotecas  de   componentes  criadas  por  terceiros)   •  Suporte  na0vo  e  extensível  a  validação,  eventos  e   conversão  de  0pos  (String  ßà  Objeto)   •  Controle  declara0vo  e  condicional  de  navegação  
  5. 5. A  quem  se  des0na  a  especificação?   •  Autores  de  página   –  Programadores  Web  que  poderão  construir  páginas  em  HTML  usando   tags,  facelets,  bibliotecas  de  terceiros   •  Autores  de  componentes   –  Programadores  Java  que  poderão  construir  os  componentes  que   serão  mapeados  a  tags,  ou  que  irão  suportar  páginas  e  aplicações   •  Desenvolvedores  de  aplicação   –  Programadores  Java  EE  que  irão  u0lizar  o  JSF  como  interface  para   serviços  e  aplicações   •  Fornecedores  de  ferramentas  e  implementadores  JSF   –  Usam  a  especificação  para  construir  ferramentas  e  containers/ servidores  que  irão  suportar  aplicações  JSF  
  6. 6. Uso  `pico:  papéis  de  desenvolvimento   •  Autor  de  página   –  Constrói  views  em  XHTML,  imagens,  CSS,  etc   –  Declara  namespaces  para  bibliotecas  de  tags  e   widgets   •  Autor  de  componentes     –  Cria  conversores,  managed  beans,  event  handlers;     –  Eventualmente  escreve  componentes  novos.   •  Desenvolvedores  de  aplicação     –  Configuram  a  integração  de  aplicações  JSF  com  dados   e  serviços  (EJBs,  JPA,  MDB,  Web-­‐Services)  
  7. 7. Criação  de  aplicações  simples     •  Obje0vos   –  Configurar  os  ambientes  de  desenvolvimento  e  de   execução   –  Familiarizar-­‐se  com  a  sintaxe  e  estrutura  de  aplicações   JSF  e  processo  de  desenvolvimento   •  Aplicações  de  exemplo   1.  Aplicação  mínima  (apenas  uma  tela  com  facelets)   2.  Aplicação  mínima  com  managed  bean   3.  Aplicação  simples  usando  bean,  navegação,   componentes  de  formulário  e  resources   4.  Aplicação  mínima  usando  CDI  (JSR  299)  
  8. 8. O  que  é  preciso   •  Versão  mínima:  JSF  2.0,  JDK  6  ou  superior   •  Dependências  (JARs  necessários)   –  JARs  do  API  JSF,  da  implementação  JSF  e  JSTL   –  O  JAR  da  implementação  de  referência  (Mojarra)  já  inclui  todos   os  arquivos  necessários;  baixar  em  javaserverfaces.java.net     –  PrimeFaces  3.0  (www.primefaces.org  -­‐  opcional)   •  Ambiente  de  execução   –  Tomcat  7  ou  servidor  de  aplicações  com  suporte  a  Java  EE  6;   baixar  em  tomcat.apache.org   •  Ambiente  de  desenvolvimento   –  Usaremos  o  mínimo:  editor  de  texto  (EditPad,  TextWrangler,   etc.),  acesso  ao  prompt  da  linha  de  comando  e  Apache  Ant;   baixar  o  Ant  em  ant.apache.org.  
  9. 9. Diagrama  do  ambiente   de  desenvolvimento  jsnasico                                       src                   web                               intro.xhtml   WEB-­‐INF             lib         javax.faces-­‐2.x.jar   resources             build.xml   build.proper0es   myapp           IntroBean.java   css         myapp.css   Ant  build  script   do  projeto   Pasta  raiz  do  projeto   (use  dentro  de  uma   pasta  de  workspace)   Pasta  dist  contendo   WAR  será  criada   durante  o  build   Contém  estrutura  do  WAR   (contexto  Web)   Pasta  classes  será  criada   durante  o  build   Contém  código-­‐fonte   Java  que  será   compilado  para     WEB-­‐INF/classes  
  10. 10. Desenvolvimento  com  JSF   Bibliotecas   de  tags   XHTML   Linguagem  de   expressões   API  Java  javax.faces.*   Páginas  XHTML   Tags   Expressões   Managed  beans   Event  handlers   Conversores   Validadores   Componentes   UI   Usadas  para  escrever  à   Usada  para  escrever  à   Usadas  em   Transferem  dados  de/para   ßMapeados  a  à   Usada  para  escrever  à   JSF   Estrutura,   comportamento   e  apresentação   da  interface  do   usuário   Dados,   controle  de   navegação  e   integração   com  serviços   faces-­‐config.xml   Configuração   @Anotações   Configuração  
  11. 11. Página  web  mínima     <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transi0onal//EN"   "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transi0onal.dtd">   <html    xmlns="hwp://www.w3.org/1999/xhtml"                              xmlns:h="hTp://java.sun.com/jsf/html">                <h:head>                      <0tle>Introducao  a  JSF</0tle>                </h:head>                <h:body>                        <h:outputText  value="Esta  funcionando!"/>                </h:body>   </html>     Facelets:  tags  mapeados   a  componentes  HTML   naCvos  do  JSF   Mapeamento  XML  de  namespace  de  biblioteca   de  tags  JSF  HTML  a  prefixo  padrão  (tags  com   prefixo  “h”  fazem  parte  desta  biblioteca)   Mapeamento  XML  do   namespace  da  biblioteca   padrão  XHTML  a  tags   sem  prefixo  (tags  sem   prefixo  são  XHTML)   Tags   XHTML  
  12. 12. basicapp.war                               Arquitetura:  aplicação  mínima   WEB-­‐INF                 lib         javax.faces-­‐2.x.jar   intro.xhtml   web.xml   faces-­‐config.xml   <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transi0onal//EN"   "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transi0onal.dtd">     <html  xmlns="hwp://www.w3.org/1999/xhtml"                xmlns:h="hwp://java.sun.com/jsf/html"                xmlns:f="hwp://java.sun.com/jsf/core"                xmlns:ui="hwp://java.sun.com/jsf/facelets">                              <h:head>                      <Ctle>Introducao  a  JSF</Ctle>                </h:head>                <h:body>                        <h:outputText  value="Esta  funcionando!"/>                </h:body>   </html>   intro.xhtml   <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transi0onal//EN"   "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transi0onal.dtd">   <html  xmlns="hTp://www.w3.org/1999/xhtml">   <head>                      <Ctle>Introducao  a  JSF</Ctle>   </head>   <body>Esta  funcionando!</body>   </html>   hTp://localhost:8080/basicapp/intro.faces   Facelets   HTML  gerado   web.xml  é  opcional  em  aplicações   simples  como  esta   faces-­‐config.xml  é  opcional  em   muitas  aplicações  `picas  
  13. 13. Ant:  build.xml  e   build.proper0es   •  Executar  ant  na  pasta  raiz  do  projeto   •  Compilar  conteúdo  de  src  para  a  pasta   WEB-­‐INF/classes   ant   ou   ant  compile   •  Reinciar  ambiente  (apagar  pastas   classes  e  dist)  e  recompilar   ant  clean  compile   •  Construir  WAR  e  gravar  em  dist/ basicapp.war   ant  war   <project  name="JSF  Basico"  default="compile">    <property  file="build.properCes"  />    <property  name="web.dir"  value="web"  />    <property  name="webinf.dir"  value="${web.dir}/WEB-­‐INF"  />    <property  name="classes.dir"  value="${webinf.dir}/classes"  />    <property  name="src.dir"  value="src"  />    <property  name="lib.dir"  value="${webinf.dir}/lib"  />    <property  name="dist.dir"  value="dist"  />                            <property  name="war.file"  value="${dist.dir}/${app.name}.war"  />                  <target  name="init">          <mkdir  dir="${classes.dir}"  />          <mkdir  dir="${dist.dir}"  />            </target>                <target  name="clean">          <delete  dir="${classes.dir}"  />          <delete  dir="${dist.dir}"  />          </target>                    <target  name="compile"  depends="init">            <javac  destdir="${classes.dir}  srcdir="${src.dir}">              <classpath>                        <fileset  dir="${lib.dir}"  includes="**/*.jar"  />                                        </classpath>            </javac>          </target>            <target  name="war"  depends="compile">                            <jar  des~ile="${war.file}">            <fileset  dir="${web.dir}"  />                            </jar>          </target>   </project>   app.name=basicapp         build.properCes   build.xml  
  14. 14. Opcional:  web.xml   •  Um  web.xml  com  a  configuração  default  já  é  fornecido  no  JAR  da   implementação  de  referência  (Mojarra  2.x)   •  Não  é  preciso  criar  um  a  menos  que  se  deseje  configurar  o  ambiente   (adicionando  listeners  e  outros  recursos)   •  Se  criado,  web.xml  deve  ter  a  configuração  mínima  abaixo   <?xml  version='1.0'  encoding='UTF-­‐8'?>     <web-­‐app  version="2.5"                xmlns="hwp://java.sun.com/xml/ns/javaee"              xmlns:xsi="hwp://www.w3.org/2001/XMLSchema-­‐instance"              xsi:schemaLoca0on="hwp://java.sun.com/xml/ns/javaee    hwp://java.sun.com/xml/ns/javaee/web-­‐app_2_5.xsd">         <servlet>          <servlet-­‐name>Faces  Servlet</servlet-­‐name>              <servlet-­‐class>javax.faces.webapp.FacesServlet</servlet-­‐class>     </servlet>           <servlet-­‐mapping>          <servlet-­‐name>Faces  Servlet</servlet-­‐name>          <url-­‐pawern>*.faces</url-­‐pawern>     </servlet-­‐mapping>         </web-­‐app>   2.5  ou  superior!   Deve  ser  colocado  na  raiz   da  pasta  WEB-­‐INF/  
  15. 15. Opcional  faces-­‐config.xml   •  O  faces-­‐config.xml  é  usado  para  configurar  mapeamentos  de  componentes,   navegação,  conversores,  validadores,  beans  e  outros  recursos  do  JSF   –  Tudo  isto  pode  ser  feito  via  comportamento  default  e  anotações   –  Às  vezes  é  mais  prá0co,  legível  e  eficiente  fazer  via  XML  (quando  se  usa   ferramentas  gráficas  que  geram  XML,  por  exemplo)   –  A  configuração  faces-­‐config.xml  tem  precedência  e  sobrepõe  a  configuração  via   anotações   •  Se  usado,  deve  ter  a  seguinte  configuração  mínima   <?xml  version="1.0"?>       <faces-­‐config              xmlns="hwp://java.sun.com/xml/ns/javaee"              xmlns:xsi="hwp://www.w3.org/2001/XMLSchema-­‐instance"              xsi:schemaLoca0on="hwp://java.sun.com/xml/ns/javaee    hwp://java.sun.com/xml/ns/javaee/web-­‐facesconfig_2_0.xsd"              version="2.0">       </faces-­‐config>   Deve  ser  colocado  na  raiz   da  pasta  WEB-­‐INF/   2.0  ou  superior!  
  16. 16. Implantação  (deploy)  e  execução   •  Inicie  o  Tomcat   –  $TOMCAT_HOME/bin/startup.sh   •  Implantação  (via  hot-­‐deployment  –  pode  também  ser  via  Manager)   –  Com  o  Tomcat  executando,  copie  dist/basicapp.war  para  pasta   $TOMCAT_HOME/webapps/  do  Tomcat   –  Espere  Tomcat  criar  automa0camente  uma  pasta  basicapp/  dentro  de  sua   pasta  webapps/   •  Execução   –  Acesse  hTp://localhost:8080/basicapp/intro.faces   •  Se  houver  erros,  corrija-­‐os  e  faça  redeploy  (remova  WAR  e  diretório   gerado  em  webapps/  e  copie  o  novo  WAR  para  webapps/)  
  17. 17. <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transi0onal//EN"   "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transi0onal.dtd">   <html  xmlns="hwp://www.w3.org/1999/xhtml"><head>                      <0tle>Introducao  a  JSF</0tle></head><body>                      <p>Hello!</p>   </body>   </html>   Arquitetura:  aplicação  mínima     com  managed  bean   basicapp.war                                         WEB-­‐INF                           lib         javax.faces-­‐2.x.jar   intro.xhtml   classes               myapp           IntroBean.class   web.xml   faces-­‐config.xml   <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transi0onal//EN"   "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transi0onal.dtd">     <html  xmlns="hwp://www.w3.org/1999/xhtml"                xmlns:h="hwp://java.sun.com/jsf/html"                xmlns:f="hwp://java.sun.com/jsf/core"                xmlns:ui="hwp://java.sun.com/jsf/facelets">                              <h:head>                      <Ctle>Introducao  a  JSF</Ctle>                </h:head>                <h:body>                      <p>#{introBean.mensagem}</p>              </h:body>   </html>   package  myapp;   import  javax.faces.bean.*;   @ManagedBean   public  class  IntroBean  {        public  String  getMensagem()  {                  return  "Hello!”;        }   }   intro.xhtml   hTp://localhost:8080/basicapp/intro.faces   IntroBean.java   Facelets   HTML  gerado   Java  
  18. 18. Com  managed  bean   •  Propriedades  de  leitura  são  derivadas  de   métodos  geTer  iniciados  em  get  ou  is   •  Propriedades  de  gravação  são  derivadas   de  métodos  seTer  iniciados  em  set   <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transi0onal//EN"   "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transi0onal.dtd">   <html    xmlns="hwp://www.w3.org/1999/xhtml"                              xmlns:h="hTp://java.sun.com/jsf/html">                <h:head>                      <0tle>Introducao  a  JSF</0tle>                </h:head>                <h:body>                          <p>#{introBean.mensagem}</p>              </h:body>   </html>     package  myapp;   import  javax.faces.bean.ManagedBean;   @ManagedBean   public  class  IntroBean  {        public  String  getMensagem()  {                  return  "Hello!”;        }   }  @ManagedBean  (name="introBean")   public  class  NomeDoBean  {  …  }   Expressão  EL   IdenCficador  (nome)  do  bean  é  derivado  do  nome   da  classe  se  não  for  declarado  atributo  name  em   @ManagedBean  ou  em  faces-­‐config.xml   Derivação  de  nomes  de  beans  e  propriedades  usados  em  EL  segue  regras  de  JavaBeans  
  19. 19. Expression  language   •  Usada  para  comunicação  entre  componente  e  página   –  Ler  ou  gravar  propriedades  do  bean   –  Transformar  dados,  executar  expressões,  usar  resultados   –  Executar  métodos  no  bean  ou  componente   •  Geralmente  usada  em  atributos   –  Atributos  definem  como  resultados  da  expressão  serão  usados   (leitura,  leitura-­‐gravação,  métodos)   –  Expressões  de  leitura  podem  ser  usadas  diretamente  na  página   •  Exemplos     #{iden0ficadorDoBean.propriedade}   #{iden0ficadorDoBean.metodo}   #{iden0ficadorDoBean.prop1.prop2.prop3}   #{iden0ficadorDoBean.colecao[5].value  +  20}  
  20. 20. Navegação   •  Alguns  tags  recebem  métodos  que  retornam   idenCficadores  de  navegação   –  Ex:  tags  de  submissão  de  formulários  e  links  que  causam   eventos  de  ação  (ac0on  events)   •  Métodos  de  ação  devolvem  iden0ficadores  de  navegação   na  forma  de  strings   –  Iden0ficadores  retornados  podem  ser  mapeados  a  nomes  de   páginas  no  faces-­‐config.xml   –  Na  ausência  de  mapeamentos  explícitos,  o  string  retornado  é   interpretado  como  nome  de  uma  página  *.xhtml   …   public  String  processarResposta()  {    //  processar  resposta                  if  (erro)  {                              return  "erro";                  }                  return  "sucesso";   }     <h:form>        <h:commandBuwon                      ac0on="#{bean.processarResposta}"  />   </h:form>   erro.xhtml   sucesso.xhtml  
  21. 21. Exemplo  com  mapeamento  implícito   •  Jogo  de  cara  e  coroa   •  Três  páginas:  play.xhtml,  heads.xhtml,  tails.xhtml   •  Managed  bean:  coinBean  (coinsgame.CoinBean)   •  Método  de  ação  (coinFlip)  gera  número  aleatório  e   retorna  String  com  nome  da  página  a  exibir   package  coinsgame;   import  javax.faces.bean.*;   @ManagedBean   public  class  CoinBean  {    public  String  coinFlip()  {      int  side  =  (int)(Math.random()  *  2);      if  (side  ==  0)  return  "heads";      return  "tails";    }   }   <!DOCTYPE    …>   <html  xmlns="hwp://www.w3.org/1999/xhtml"                          xmlns:h="hwp://java.sun.com/jsf/html">                <h:head><0tle>Coin  Game</0tle></h:head>                <h:body>                        <h:form>                            <h:commandBuwon  value="Flip  a  coin!"                                  ac0on="#{coinBean.coinFlip}"/>                      </h:form>              </h:body>   </html>   Crie  páginas  heads.xhtml  e  tails.xhtml  
  22. 22. Aplicação  mínima  com  resources   basicapp.war                                       WEB-­‐INF                           lib         javax.faces-­‐2.x.jar   intro.xhtml   classes               myapp           IntroBean.class   web.xml   faces-­‐config.xml   META-­‐INF             resources         i18n.proper0es   resources             css         myapp.css   Resources  no  classpath   carregados  pelo  ClassLoader   (em  classes  Java)   Resources  da  aplicação  Web   carregados  através  de  Faces   Requests  *   <h:outputStylesheet   library="css"   name=”myapp.css"/>     Arquivo  carregado  através  de     Non-­‐Faces  Requests     <link  rel="stylesheet"     type="text/css"     href="other.css”  />   other.css   *  Esta  é  a  forma  recomendada  de  carregar  CSS  
  23. 23. Resources   •  Arquivos  que  não  são  processados  durante  a  requisição   –  Imagens,  scripts  JavaScript,  CSS,  etc.   •  Se  referenciados  em  tags  XHTML,  devem  ser  colocados  em   local  relaCvo  ao  contexto  Web   –  Arquivo  CSS:     <link  rel="stylesheet"  name=”resources/css/default.css"/>     –  Imagem  JPG     <img  src  =resources/images/badfish.jpg"/>   •  Se  referenciados  em  tags  JSF,  devem  ser  colocados  em   pasta  resources  dentro  do  contexto  Web   –  Arquivo  CSS:     <h:outputStylesheet  library="css"  name="default.css"/>     –  Imagem  JPG     <h:graphicImage  library="images"  name="badfish.jpg"/>  
  24. 24. Principais  APIs  do  JSF   •  javax.faces   •  javax.faces.applica0on   •  javax.faces.bean   •  javax.faces.component   •  javax.faces.context   •  javax.faces.convert   •  javax.faces.lifecycle   •  javax.faces.event   •  javax.faces.render   •  javax.faces.validator   •  javax.faces.webapp   Anotações  para  managed   beans  (@ManagedBean,   @SessionScoped,  etc.)   Componentes  gráficos  (hierarquia  de   UIComponent)  e  componentes   renderizáveis  (subpacote  html.*)   API  para  conversores  de  dados   (interface  Converter)   API  para  eventos  (FacesEvent,  FacesListener)   API  para  validação   API  para  acesso  ao  estado  da   requisição  (via  FacesContext)   API  para  renderização  gráfica  (RenderKit)  
  25. 25. javax.faces.component  e   javax.faces.component.html   •  Pacote  component  contém  hierarquia  fundamental  de   componentes  UI   •  Pacote  component.html  contém  componentes  associados   a  renderer  HTML  que  são  mapeados  aos  tags  da  biblioteca   padrão  HTML   javax.faces.component.UIForm   javax.faces.component.html.HtmlForm   javax.faces.Form   <h:form>   Componente  UI   Tipo   Tag   Componente  HTML  
  26. 26. Árvore  de   componentes   padrão  do   JSF   FIGURE 4-1 The javax.faces.component package Fonte:  especificação  JSF  2,  capítulo  4  
  27. 27. Arquitetura  JSF:  requisições   •  Uma  aplicação  pode  ter   combinações  de     –  Requisições  e  respostas  JSF   (Faces  Requests  e  Responses)       –  Requisições  e  respostas  não-­‐JSF   •  Faces  Requests  e  Faces   Responses  são  interceptadas   pelo  Faces  run0me  e  tratadas  de   forma  diferenciada   •  Faces  RunCme  processa  dois   0pos  de  Faces  requests:   –  Faces  Resource  Request  (para   transferir  imagens,  CSS,  etc.)   –  Faces  Request  (para  processar   uma  página  JSF)     Cliente   Faces  RunCme   Outro  Endpoint   Faces  Request   Faces  Response   Faces  Resource  Request   Faces  Resource  Response   Non-­‐Faces  Request   Non-­‐Faces  Response   Fonte:  especificação  JSF  2   Ciclo  de  vida   Execute  &  Render   GET  index.faces   Processar  req  e   devolver  bytes   GET  img.jpg   GET  img.jpg  
  28. 28. Tipos  de  requisições  e  respostas   •  Faces  Response  (FRs)   –  Resposta  criada  pela  execução  da  fase  Render  Response   •  Faces  Request  (FRq)   –  Requsição  iniciada  a  par0r  de  uma  FRs  prévia   –  Faces  Resource  Request  (FRRq):  um  FRq  para  um  resource  (imagem,   CSS,  etc.)   •  Non-­‐Faces  Request  (NFRq)   –  Requisição  não  iniciada  a  par0r  de  FRs  prévia   •  Non-­‐Faces  Response  (NFRs)   –  Resposta  que  não  passou  pelo  Faces  Run0me,  ou   –  Faces  Resource  Response  (FRRs):  um  NFRs  para  um  resource  iniciado   por  um  FRRq   •  Cenários  relevantes  para  JSF   1.  NFRq  gerando  FRs  (requisição  inicial)   2.  FRq  gerando  FRs  (requisição  que  causa  ciclo  execute  &  render)   3.  FRq  (FRRq)  gerando  NFRs  (FRRs)  
  29. 29. Dois  0pos  de  Faces  requests   Processar  Faces  Resource  Request                       Enviar  bytes  Processar  Faces  Request:   Ciclo  “execute  and  render”   É  Faces   Resource   Request?   Localizar  resource   Não   Sim  
  30. 30. Ciclo  de  vida:  execute  &  render   Restaurar  view   Aplicar  valores  da  requisição   Processar  validações   Atualizar  valores  do  modelo   Executar  aplicação   Renderizar  resposta   Faces  request   Faces  response   Execute   Render   Processar   eventos   Processar   eventos   Processar   eventos   Processar   eventos   Erros  de  conversão   ou  resposta   Erros  de  validação   ou  resposta   Precisa  validar   Precisa  converter   Precisa  executar  aplicação   Leia  descrição  detalhada  de  cada  fase   na  especificação  JSF  2,  capítulo  2  
  31. 31. Conversores   •  São  objetos  que  realizam  a  conversão  entre  dados  em  uma  view   (formato  String)  para  um  0po  de  dados  usado  em  propriedade  do   managed  bean  (int,  Date,  objetos,  etc.)   –  Conversores  encapsulam  a  lógica  necessária  para  converter  um  dado,  e   podem  ser  usados,  reusados  e  configurados  via  facelets  (tags  e  atributos)   •  Há  vários  conversores  prontos.  Exemplo:   <h:inputText converter="javax.faces.convert.IntegerConverter" />,  ou   <h:inputText ... /> ! <f:converter converterId="Integer" /> ! </h:inputText> ! •  Pode-­‐se  escrever  novos  conversores  (objeto  anotado  com   @FacesConverter  que  implementa  javax.faces.convert.Converter)  e   usar  os  mesmos  atributos  ou  tags  para  configurá-­‐los   •  Muitas  vezes  não  é  necessário  configurar  um  conversor  (se  a   conversão  default  resolver).  Ex:  idade  é  int  no  managed  bean   <h:inputText value=”#{bean.idade}" />!
  32. 32. Listeners   •  Listeners  são  objetos  usados  para  tratar  eventos   –  São  chamados  através  de  noCficações   –  Podem  ser  uma  classe  específica  que  implementa  uma  interface  ou   método  implementado  no  managed  bean   •  Há  duas  interfaces   –  AcConListener  para  eventos  de  ação,  registrados  por   <f:acConListener…>     –  ValueChangeListener  para  eventos  de  mudança  de  valor  (que  não   causam  a  submissão  do  formulário),  registrados  por   <f:valueChangeListener…>     •  Pode-­‐se  escrever  o  handler  no  próprio  bean   –  Componentes  de  ação  podem  associar  um  método  ao  atributo  acCon,   que  é  implementado  no  próprio  bean   •  PhaseListeners  podem  ser  criados  para  interceptar  eventos  nas   diferentes  fases  de  uma  requisição/resposta  JSF  
  33. 33. Validadores   •  JSF  oferece  várias  alterna0vas  para  validação,  que  são  realizadas  em   uma  ordem  pré-­‐determinada   –  Checagem  de  campos  vazios  em  componentes  (falha,  se  for  campo   required  e  vazio)   –  Conversão  de  0pos  (falha  se  conversão  não  puder  ser  realizada)   –  Validação  explícita,  se  houver   •  Erros  de  validação  geram  mensagens  que  podem  ser  apresentadas   via  facelets  (<h:message>  e  <h:messages>)  e/ou  atributos   (requiredMessage)   •  Validação  explícita  pode     –  Via  facelets  existentes:  <f:validateLength>,  <f:validateRegEx>,  etc.   –  Ou  usando  <f:validator>  para  registrar  validadores  customizados   (anotados  com  @FacesValidator,  implementando   javax.faces.validator.Validator)   –  Também  pode-­‐se  usar  a  API  Bean  ValidaCon.  
  34. 34. Ajax   •  JSF  2.0  inclui  bibliotecas  JavaScript  que  possibilitam  o  uso   transparente  de  Ajax   •  Qualquer  componente  pode  receber  a  tag  <f:ajax  />  e  sua  ação   default  ganha  comportamento  assíncrono:   –  <h:inputText value="#{bean.message}"> ! <f:ajax render=“tabela1”/>! </h:inputText> ! –  O  atributo  render  informa  qual  componente  vai  processar  e  exibir  a   resposta   •  Há  vários  outros  atributos  que  permitem  determinar  qual  evento   dispara  a  ação,  uma  lista  de  componentes  a  serem  noCficados,   listeners,  funções  JavaScript  e  outros  mecanismos  para  controle  da   requisição  e  resposta  
  35. 35. Templa0ng   •  TemplaCng  permite  que   segmentar  uma  view  e   processá-­‐la  em  separado   –  Uma  view  que  age  como   template  define  uma   estrutura  de  página  e   carrega  views  auxiliares   para  compor  a  página   –  Cabeçalhos,  rodapés,   etc.  podem  ser  repe0dos   em  várias  páginas  e  seu   processamento  pode  ser   o0mizado  (cache)   –  Promove  o  reuso!   <h:body>Conteúdo  compar0lhado   <h2><ui:insert  name=”Ctulo">Título  default</ui:insert></h2>                    Conteúdo  compar0lhado                    <ui:insert  name=”conteudo">Conteúdo  default</ui:insert>     </h:body>  ...     Template:  /templates/basico.xhtml   <ui:composi0on  xmlns=“..”  template="/templates/basico.xhtml">            <ui:define  name=”Ctulo">Texto  de  arquivo1</ui:define>            <ui:define  name=”conteudo”>Conteúdo  de  arquivo1</ui:define>     </ui:composi0on>     Página  que  usa  o  template:  arquivo1.xhtml   <body>Conteúdo  compar0lhado   <h2>Texto  de  arquivo1</h2>                    Conteúdo  compar0lhado                    Conteúdo  de  arquivo1   </body>  ...     Resultado  ao  chamar  /arquivo1.faces  
  36. 36. Bibliotecas  de  componentes   •  Os  componentes  do  JSF  focam  em  funcionalidade   –  Implementações  (Mojarra,  Apache,  etc.)  fornecem   apenas  componentes  padrão   –  Skins,  componentes  extensíveis,  pré-­‐configurados,   compostos,  etc.  devem  ser  fornecidos  por  uma   biblioteca  de  componentes   •  As  mais  populares  bibliotecas  de  componentes   que  suportam  o  JSF  2.0  são:   –  RichFaces   –  ICEFaces   –  PrimeFaces  
  37. 37. PrimeFaces  3.0   •  Uma  das  mais  populares   bibliotecas  de  componentes   para  o  JSF   –  Subs0tui  componentes  JSF  2.0   (também  podem  ser  usados   juntos)   –  Conecta  widgets  de  várias   bibliotecas  populares  (YUI,   JQuery,  Google,  etc.)   –  Suporte  integrado  a  Ajax  e   WebSockets  
  38. 38. Como  usar   •  Baixe  e  inclua  no  projeto  (WEB-­‐INF/lib)  e  depois  declare  em  cada   view  que  usar  os  componentes,  o  namespace:   –  xmlns:p="hwp://primefaces.org/ui   •  Alguns  exemplos   –  <p:ajax>  (sempre  use  este  em  vez  de  f:ajax  quando  usar  componentes   PrimeFaces)   –  <p:commandBuwon>  e  <p:commandLink>   –  <p:dataTable>  e  <p:column>   –  <p:message>  e  <p:messages>   –  <p:outputLabel>   –  <p:panelGrid>   –  <p:fieldset>   –  <p:inputText>,  <p:inputTextArea>,  <p:password>   –  <p:selectOneMenu>,  etc.   Também  permite   configuração  de  look   &  feel  através  de   temas  e  CSS   Mais  em     www.primefaces.org  
  39. 39. CDI  (JSR  299)   •  Se  o  seu  ambiente  0ver  suporte  a  CDI  (Contexts  and  Dependendy   Injec0on),  você  deve  usá-­‐lo  para  registrar  os  beans   –  CDI  é  um  mecanismo  universal  que  será  usado  para  registrar   componentes  gerenciados  em  qualquer  0po  de  aplicação  Java  EE     –  Inclua  um  arquivo  beans.xml  padrão  (use  o  IDE)  no  WEB-­‐INF   –  Registre  os  beans  usando  @Named  (no  lugar  de  @ManagedBean)  e   use  escopos  de  javax.enterprise.context  (em  vez  de  escopos  JSF)   •  CDI  será  parte  integrante  do  Java  EE  7,  portanto  @ManagedBean   no  futuro  será  deprecated.     •  Se  seu  ambiente  não  0ver  suporte  a  CDI  (ex:  Tomcat  7)  você  pode   –  Usar  @ManagedBean  normalmente  como  foi  mostrado  neste  tutorial   –  Acrescentar  uma  implementação  de  CDI  e  registrá-­‐la  no  web.xml  
  40. 40. <beans  xmlns="hwp://xmlns.jcp.org/xml/ns/javaee"                xmlns:xsi="hwp://www.w3.org/2001/XMLSchema-­‐instance"                xsi:schemaLoca0on="hwp://xmlns.jcp.org/xml/ns/javaee    hwp://xmlns.jcp.org/xml/ns/javaee/beans_1_1.xsd"                bean-­‐discovery-­‐mode="annotated">   </beans>   Managed  bean  com  CDI   •  Inclua  o  JAR  do  Weld:  a  implementação  de  referência   do  CDI  e  registre  o  listener   •  (isto  pode  não  ser  necessário  se  você  es0ver  usando   um  ambiente  que  tenha  suporte  na0vo  a  CDI)   <?xml  version='1.0'  encoding='UTF-­‐8'?>     <web-­‐app  version="2.5"  …  >         <servlet>…</servlet>       <servlet-­‐mapping>  …  </servlet-­‐mapping>       <listener>        <listener-­‐class>                      org.jboss.weld.environment.servlet.Listener        </listener-­‐class>   </listener>       </web-­‐app>   package  myapp;   import  javax.inject.Named;   import  javax.enterprise.context.RequestScoped;   @Named   @RequestScoped   public  class  IntroBean  {        public  String  getMensagem()  {                  return  "Hello!”;        }   }   beans.xml   web.xml   Use  @Named  ou  @Named(“introBean”)   para  registrar  o  bean  com  o  id  “introBean”   Verifique  se  está  importando  os  pacotes  corretos   Inclua  beans.xml  no  WEB-­‐INF   intro.xhtml   No  Tomcat  7  
  41. 41. <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transi0onal//EN"   "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transi0onal.dtd">   <html  xmlns="hwp://www.w3.org/1999/xhtml"><head>                      <0tle>Introducao  a  JSF</0tle></head><body>                      <p>Hello!</p>   </body>   </html>   Aplicação  com  managed  bean  e  CDI   basicapp.war                                         WEB-­‐INF                           lib             javax.faces-­‐2.x.jar   intro.xhtml   classes             myapp         IntroBean.class   web.xml   faces-­‐config.xml   <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transi0onal//EN"   "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transi0onal.dtd">     <html  xmlns="hwp://www.w3.org/1999/xhtml"                xmlns:h="hwp://java.sun.com/jsf/html"                xmlns:f="hwp://java.sun.com/jsf/core"                xmlns:ui="hwp://java.sun.com/jsf/facelets">                              <h:head>                      <Ctle>Introducao  a  JSF</Ctle>                </h:head>                <h:body>                      <p>#{introBean.mensagem}</p>              </h:body>   </html>   package  myapp;   import  javax.inject.Named;   @Named   public  class  IntroBean  {        public  String  getMensagem()  {                  return  "Hello!”;        }   }   intro.xhtml   hTp://localhost:8080/basicapp/intro.faces   IntroBean.java   Facelets   HTML  gerado   Java   weld-­‐servlet.jar   beans.xml   Tomcat  7  
  42. 42. Resumo   •  Este  tutorial  apresentou  uma  breve  introdução  ao  JSF  e  os   principais  componentes  da  sua  arquitetura   –  Demonstração:  configuração  do  ambiente,  criação  de  views  e   beans,  deployment,  execução   –  Facelets,  managed  beans,  expression  language   –  Arquitetura  de  componentes   –  Navegação   –  Ciclo  de  vida   –  Conversores,  listeners,  validadores   –  Uso  de  bibliotecas  de  componentes  (PrimeFaces)   –  Integração  com  CDI  (JSR  299)  
  43. 43. Referências   1.  Ed  Burns,  Roger  Kitain.  JavaServer  Faces  SpecificaCon.  Version  2.0.  Sun   Microsystems.  2009.   2.  Emmanuel  Bernard.  JSR  303:  Bean  ValidaCon.  Version  1.0.  Red  Hat,  2009.   3.  Gavin  King.  JSR-­‐299:  Contexts  and  Dependency  InjecCon  for  the  Java  EE   Plaxorm.  Red  Hat.  2009.   4.  Eric  Jendrock  et  al.  The  Java  EE  6  Tutorial.  2010.   hwp://docs.oracle.com/javaee/6/tutorial/doc/     5.  Mojarra.  Mojarra  DocumentaCon  hwps://javaserverfaces.java.net/docs/2.1/     6.  JBoss.  Weld  –  JBoss.org  documentaCon.  hwp://docs.jboss.org/weld     7.  PrimeFaces.  Manual  do  PrimeFaces.  hwp://primefaces.org/documenta0on.html     8.  David  Geary  &  Cay  Horstmann.  Core  JavaServer  Faces  2.0.  Pren0ce-­‐Hall,  2010.   9.  Marty  Hall.  JSF  2.0  Tutorial  Series.   hwp://www.coreservlets.com/JSF-­‐Tutorial/jsf2/   10.  Marty  Hall.  PrimeFaces  Tutorial  Series.   hwp://www.coreservlets.com/JSF-­‐Tutorial/primefaces/     11.  M.  Kyong.  JSF  2.0  Tutorials.  hwp://www.mkyong.com/tutorials/jsf-­‐2-­‐0-­‐tutorials/     Atualizado  em  Janeiro/2013    

×