JavaServer Faces 2.2: aumento de produtividade

O JSF (JavaServer Faces) � o framework MCV para Java mais utilizado atualmente nas m�dias e grandes corpora��es para constru��o de interfaces com usu�rios baseando-se em componentes para aplica��es web. O JSF faz parte da Java Platform, Enterprise Edition. Entre outras coisas o JSF inclui suporte a internacionaliza��o e acessibilidade, um conjunto padr�o de componentes de interface de usu�rio que possibilitam valida��o padronizada, um modelo de eventos no lado servidor ("server-side event model"), ger�ncia de estados, Managed Beans e muito mais.

Server e Client Extension Points

Os Converters, Validators, e Listeners s�o objetos que est�o no lado servidor e que adicionam funcionalidades aos componentes nas p�ginas.

Os comportamentos s�o pontos de extens�o do lado cliente que podem melhorar o conte�do processado de um componente atrav�s de scripts definidos pelo comportamento.

Um Converter converte os dados inseridos em um componente de um formato para outro. Por exemplo String para Number. JSF prov� diversos Converters tais como f:convertNumber e f:convertDateTime. Eles podem ser aplicados a qualquer componente edit�vel. Segue na Listagem 1 um exemplo.

Listagem 1. Exemplo de p�gina utilizando um converter.


  <h:form>
           Idade: 
           <h:inputText value="#{usuario.idade}" id="idade">
                     <f:convertNumber integerOnly="true"/>
           </h:inputText>
   
           <h:commandButton value="Enviar"/>
  </h:form>

No c�digo acima verificamos que o texto inserido na caixa de texto ser� convertido para um Integer se for poss�vel.

Uma mensagem de erro ser� lan�ada se o texto n�o puder ser convertido.

Um Converter customizado pode ser facilmente criado, conforme � exemplificado na Listagem 2.

Listagem 2. Exemplo de como podemos criar um converter


  @FacesConverter("meuConverterExemplo")
  public class MeuConverterExemplo implements Converter {
           @Override
           public Object getAsObject(FacesContext context, UIComponent component, String value) {
                     //. . .
           }
   
           @Override
           public String getAsString(FacesContext context, UIComponent component, Object value) {
                     //. . .
           }
  }

No c�digo acima os m�todos getAsObject e getAsString executam as convers�es Object-para-String e String-para-Object respectivamente.

A classe POJO implementa uma interface Converter e tamb�m � marcada com a anota��o @FacesConverter. Agora este converter j� poderia ser utilizado numa p�gina JSF como mostra o c�digo da Listagem 3.

Listagem 3. Exemplo de p�gina utilizando um converter criado.


  <h:inputText value="#{usuario.idade}" id="idade">
           <f:converter converterId=" meuConverterExemplo "/>
  </h:inputText>

O valor de @FacesConverter deve ser igual ao valor do atributo "converterId" na p�gina JSF acima.

J� um validador � usado para validar informa��es que s�o recebidas por componentes de entrada (inputText). O JSF fornece v�rios validadores pr�-definidos tais como �f:validateLength� e �f:validateDoubleRange�.

Esses validadores podem ser aplicados em qualquer componente edit�vel. Na Listagem 4 temos um exemplo.

Listagem 4. Exemplo de um validador sendo usado numa p�gina.


  <h:inputText value="#{usuario.nome}" id="nome">
           <f:validateLength min="3" maximum="15"/>
  </h:inputText>

Neste c�digo o tamanho do texto inserido ser� validado se ele est� entre 3 e 15 caracteres.

Uma mensagem de erro � lan�ada se o tamanho do texto estiver fora do tamanho especificado.

Um validador customizado tamb�m pode ser criado. O c�digo da Listagem 5 demonstra como poder�amos fazer um validador.

Listagem 5. Criando um validador.


  @FacesValidator("meuValidadorExemplo")
  public class MeuValidadorExemplo implements Validator {
           @Override
           public void validate(FacesContext context, UIComponent component, Object value)
                     throws ValidatorException {
   
                     //. . .
           }
  }

Neste c�digo o m�todo �validate� retorna se o valor for validado com sucesso. Caso contr�rio, uma exce��o �ValidatorException� ser� lan�ada.

Este validador pode ser aplicado a qualquer componente edit�vel, conforme exemplificado na Listagem 6.

Listagem 6. Utilizando um validador customizado.


  <h:inputText value="#{usuario.nome}" id="nome">
           <f:validator id="meuValidadorExemplo"/>
  </h:inputText>

O valor de @FacesValidator deve ser igual ao valor do atributo id de �f:validator�.

JSF tamb�m fornece integra��o com restri��es pr�-definidas usando Bean Validation.

Al�m de colocar anota��es de restri��es no bean, nenhum outro trabalho adicional � necess�rio pelo desenvolvedor. Qualquer mensagem de erro por causa da viola��o de restri��o � automaticamente convertido para um FacesMessage e exibido para o usu�rio final.

A tag �f:validateBean� pode ser utilizada para especificar �validationGroups� para indicar quais grupos de valida��o deveriam ser levados em considera��o quando validamos um componentes em particular.

Outro objeto bastante utilizado s�o os listeners. Um listener monitora eventos em um componente. O evento pode ser um valor alterado, um clique de um bot�o, um clique num link, entre outras coisas. Um listener pode ter um m�todo em um Managed Bean ou uma Classe.

Um ValueChangeListener pode ser registrado em um componente edit�vel. O c�digo da Listagem 7 mostra um exemplo.

Listagem 7. Utilizando valueChangeListener em um componente edit�vel.


  <h:inputText value="#{ usuario.idade}" id="idade" valueChangeListener="#{usuario.nomeAtualizado}">

Neste c�digo o m�todo �nomeAtualizado� no bean �Usuario� � chamado quando o formul�rio associado � enviado.

Podemos criar um listener em n�vel de classe implementando a interface �ValueChangeListener� e especific�-lo na p�gina usando a tag �f:valueChangeListener�.

Por outro lado os converters, validadores e listeners, melhoram a funcionalidade no lado do cliente de um componente anexando scripts declarativamente. Por exemplo, a tag �f:ajax� � definida como um comportamento do lado cliente.

Comportamento do lado cliente tamb�m permite executar valida��es no lado cliente, al�m de logging, exibir dicas de ferramentas entre coisas. Podemos definir um comportamento customizado estendendo �ClientBehaviorBase� e anotando com @FacesBehavior.

Resource Library Contracts

JSF 2, por padr�o, introduziu o Facelets como a Linguagem de Declara��o da View (View Declaration Language). Com Facelets podemos criar templates usando XHTML e CSS que podem ser usados para fornecer uma apar�ncia consistente em diferentes p�ginas de uma aplica��o.

O JSF 2.2 define o Resource Library Contracts, uma biblioteca de templates e recursos associados que podem aplicados na aplica��o inteira de uma maneira reutiliz�vel e intercambi�vel.

Um conjunto configur�vel de Views na aplica��o ser�o declarados como template-clientes de qualquer template no Resource Library Contract.

Um conjunto configur�vel de Views na aplica��o ser� capaz de declarar-se como modelo-clientes de qualquer modelo no contrato da biblioteca de recursos (Resource Library Contracts).

O Resource Library Contracts reside nos diret�rios "contracts" da raiz da aplica��o web.

Segue um exemplo abaixo de uma estrutura de exemplo de uma aplica��o:


index.xhtml
novo/index.xhtml
contracts/modeloazul/layout.css
contracts/modeloazul/template.xhtml
contracts/modeloazul/footer.png
contracts/modelovermelho
contracts/modelovermelho/layout.css
contracts/modelovermelho/template.xhtml
contracts/modelovermelho/logo.png
WEB-INF/faces-config.xml

Essa hierarquia mostra que primeiramente a aplica��o tem duas p�ginas: index.xhtml e novo/index.xhtml. Essas s�o p�ginas de modelo do cliente.

Tamb�m podemos observar que todos os contratos residem no diret�rio "contracts" do WAR e todos os templates e recursos para um contrato est�o em seus pr�prios diret�rios. Por exemplo, no exemplo anterior temos dois contratos definidos, modeloazul e modelovermelho. Al�m disso, cada contrato tem um arquivo template.xhtml, um CSS, e uma imagem. Cada template � chamado como um �template declarado�. No template, � recomendado que se use h:outputStylesheet quando referenciarmos um CSS para evitarmos alguns erros desnecess�rios quando n�o utilizamos essa tag. O arquivo template.xhtml tem tags chamadas como pontos de inser��o declarados. Os arquivos CSS, imagens e outros recursos agrupados no diret�rio s�o recursos declarados.

Dessa forma, o template declarado, pontos de inser��o declarados e os recursos declarados, juntos definem o Resource Library Contract. Um template cliente precisa saber o valor de todos os tr�s a fim de utilizar o contrato. As p�ginas clientes usar�o o contrato referenciando o template. Segue o exemplo abaixo de como podemos fazer essa refer�ncia:


<ui:composition template="/template.xhtml">
  <ui:define name="content">
                              . . .
  </ui:define>
</ui:composition>

Na hierarquia anterior tamb�m podemos notar que existe o WEB-INF/faces-config.xml. O arquivo faces-config define o uso do contrato. Segue na Listagem 8um exemplo do faces-config.

Listagem 8. Exemplo do arquivo faces-config com as configura��es do contrato.


<application>
  <resource-library-contracts>
  <contract-mapping>
  <url-pattern>/novo/*</url-pattern>
  <contracts>modeloazul</contracts>
  </contract-mapping>
       
      <contract-mapping>
        <url-pattern>*</url-pattern>
        <contracts>modelovermelho</contracts>
      </contract-mapping>
    </resource-library-contracts>
</application>

Um contrato � aplicado baseando-se num padr�o de URL que � invocado na aplica��o. Com base nesta configura��o, tem-se que o contrato modelovermelho dever� ser aplicado para faces/index.xhtml e o contrato modeloazul ser� aplicado para faces/novo/index.xhtml.

Os contratos podem ser empacotados em META-INF/contracts de um arquivo JAR. Cada contrato no JAR deve ter um arquivo marcador.

O nome do arquivo � dado pelo valor da constante �javax.faces.application.ResourceHandler.RESOURCE_CONTRACT_XML�. Segue um exemplo abaixo de como os contratos est�o empacotados no JAR:

 META-INF/contracts/modeloazul/javax.faces.contract.xml
META-INF/contracts/modeloazul/layout.css
META-INF/contracts/modeloazul/template.xhtml
META-INF/contracts/modeloazul/footer.png
META-INF/contracts/modelovermelho/javax.faces.contract.xml
META-INF/contracts/modelovermelho/layout.css
META-INF/contracts/modelovermelho/template.xhtml
META-INF/contracts/modelovermelho/logo.png

O conte�do dos diret�rios de contratos das aplica��es pode ser empacotado em META-INF/contracts do JAR. Este JAR ainda pode ser empacotado em WEB-INF/lib e os templates declarados podem ser usados na aplica��o. Segue abaixo um exemplo de uma aplica��o que referencia o JAR anteriormente criado:


index.xhtml
novo/index.xhtml
WEB-INF/lib/layout.jar

Podemos usar um novo arquivo layout.jar, fornecendo um conjunto similar de pontos de inser��o declarados e recursos (provavelmente com um CSS diferente), para alterar a apar�ncia da aplica��o.

Tamb�m podemos alterar o template da p�gina dinamicamente colocando a p�gina template do cliente em um f:view. Segue na Listagem 9 um exemplo.

Listagem 9. Exemplo utilizando a tag f:view.


  <f:view contracts="#{contractsBean.contract}">
     <ui:composition template="/template.xhtml">
      <ui:define name="content">
       . . .
      <h:form>
      <h:selectOneRadio value="#{contractsBean.contract}">
     <f:selectItem itemValue="modelovermelho" itemLabel="red"/>
     <f:selectItem itemValue="modeloazul" itemLabel="blue"/>
     </h:selectOneRadio>
     <h:commandButton value="Aplicar Modelo" action="index" />
     </h:form>
   </ui:define>
 </ui:composition>
</f:view>

Neste c�digo o f:view tem um atributo conatracts que � ligado em uma EL.

O valor desta EL � populado por um radio button no formul�rio dentro de ui:define. O valor do radio button � igual ao nome do contrato. Se clicarmos no �command button� ser� aplicado o template escolhido para esta p�gina.

Na Listagem 10 temos a defini��o do bean ContractsBean referenciado acima.

Listagem 10. Exemplo do bean ContractsBean.


@Named
@SessionScoped
public class ContractsBean implements Serializable {
   String contract = "modelovermelho";
   // getter & setter
}

Faces Flow

O Faces Flow foi introduzido no JSF 2.2. Esta funcionalidade tem conceitos chaves de outras tecnologias tais como ADF Task Flows, Spring Web Flow, e Apache MyFaces CODI. O objetivo do Faces Flow � fornecer uma abordagem modular para a defini��o de fluxo de controle em um aplicativo. Outro objetivo do Faces Flow � de padronizar essa abordagem como parte integrante do JSF 2.2.

O Faces Flow fornece um encapsulamento de p�ginas relacionadas e backing beans correspondentes como um m�dulo. Este m�dulo tem pontos de entrada e sa�da bem definidos atribu�dos pelo desenvolvedor da aplica��o.

Frequentemente os objetos em um Faces Flow s�o projetados para permitir que o usu�rio realize uma tarefa que requer entrada sobre um n�mero de diferentes Views. Uma aplica��o torna-se assim uma cole��o de fluxos ao inv�s de apenas Views.

Podemos imaginar um carrinho de compras com v�rias p�ginas. Uma p�gina ser� para selecionar os itens que desejamos comparar, uma segunda p�gina para a escolha de op��es de envio, uma terceira p�gina para inserir os detalhes do cart�o de cr�dito, e uma quarta p�gina de confirma��o da encomenda.

Podemos usar Managed Beans para capturar dados, vari�veis com escopo de sess�o para passar informa��es entre as p�ginas, cliques em bot�es para invocar l�gica de neg�cio nos EJBs, e regras de navega��o para ir de uma p�gina para outra.

Existem alguns problemas com esta abordagem onde todo este fluxo de sequencia tipicamente ser� parte de uma grande aplica��o, esta aplica��o tipicamente com v�rias p�ginas, � um grande fluxo e tudo tem uma visibilidade global sem particionamento l�gico. Al�m disso, o fluxo de p�ginas ou Views n�o pode ser encapsulado como uma unidade l�gica e dessa forma n�o pode ser reutilizado, incorporado dentro de outra aplica��o maior ou �fluir� facilmente. O mesmo fluxo n�o pode ser aberto em m�ltiplas janelas porque as vari�veis com escopo de sess�o s�o usadas para passar informa��es entre as p�ginas. O CDI define o @ConversationScoped, mas isso � apenas parte da solu��o que veremos posteriormente. Outro problema dessa abordagem � que um escopo de requisi��o � para uma requisi��o particular e um escopo baseado em sess�o � mais do que um escopo de requisi��o, mas torna-se inv�lido depois que um browser � fechado. Assim sendo, precisar�amos de um escopo entre os dois, que pode se estender por v�rias p�ginas. Por fim, a �nica forma de invocar a l�gica da aplica��o � atrav�s de um componente de interface com usu�rio ativada pelo pr�prio usu�rio em uma p�gina, portanto, a l�gica de neg�cio n�o pode ser invocada sem qualquer a��o iniciada pelo usu�rio.

O Faces Flow oferece algumas solu��es para essas quest�es, s�o elas:

A aplica��o � dividida em uma s�rie de fluxos modulares que podem chamar um ao outro.
O fluxo de p�ginas pode ser empacotado como um m�dulo que pode ser reutilizado dentro da mesma aplica��o ou em uma aplica��o totalmente diferente.
O escopo de mem�ria compartilhada permite que as informa��es sejam passadas entre Views dentro de um fluxo de tarefa.
Um novo escopo CDI, @FlowScoped, pode ser especificado no bean. Este escopo permite ativa��o/passiva��o autom�tica do bean como o escopo � inserido/encerrado.
A l�gica de neg�cio pode ser invocada de qualquer lugar na p�gina com base na defini��o do fluxo.

O fluxo da aplica��o n�o � restrito apenas ao fluxo entre p�ginas, ao inv�s disso � definida como fluxo entre "n�s".

Existem cinco tipos diferentes de n�s, s�o eles:

View: Qualquer p�gina JSF na aplica��o.
Method call: Invoca a l�gica da aplica��o do gr�fico de fluxo (flow graph) atrav�s de uma EL.
Switch: Decis�es de navega��o no gr�fico de fluxo baseado em booleano da EL.
Flow call: Chama outro fluxo com os par�metros e recebe valores de retorno.
Flow return: Retorna para o fluxo de chamadas.

Esses n�s definem pontos de entrada e sa�da de um fluxo.

O mais novo escopo introduzido no CDI � o @FlowScoped que define o escopo de um bean no fluxo especificado. Isto habilita a ativa��o/passiva��o autom�tica do bean quando o escopo � inserido/encerrado, conforme a Listagem 11.

Listagem 11. Exemplo utilizando a anota��o FlowScoped.


  @FlowScoped("fluxo1")
  public class MeuFluxo1Bean {
           String endereco;
           String cartaoCredito;
           //. . .
  }

Neste c�digo, o bean tem duas vari�veis com escopo �flow�: endereco e cartaoCredito. O bean � definido para o fluxo �fluxo1�.

Um novo objeto EL para armazenamento de fluxo #{flowScope} tamb�m foi introduzido no JSF 2.2. Este objeto mapeia para facesContext.getApplication().getFlowHandler().getCurrentFlowScope().

Na Listagem 12 temos um exemplo.

Listagem 12. Exemplo utilizando flowScope.


  Valor: <h:inputText id="input" value="#{flowScope.valor}" />

Neste c�digo, o valor inserido na caixa de texto � ligado ao #{flowScope.valor}. Esta express�o EL pode ser utilizada em outras p�ginas do fluxo para acessar o valor.

Podemos definir fluxos declarativamente usando , ou programaticamente usando a API FlowBuilder. Os dois mecanismos s�o mutuamente exclusivos.

Fluxos podem ser empacotados em arquivos JAR ou em diret�rios. Os pacotes JAR requerem que os fluxos sejam explicitamente declarados no META-INF/faces-config.xml dentro do arquivo JAR. Os N�s de fluxo s�o empacotados em META-INF/flows/ onde � uma entrada do diret�rio do JAR cujo nome � id�ntico ao de um ID de fluxo nas classes �FlowDefinition� correspondentes.

Se o bean @FlowScoped e um fluxo definido via FlowBuilder est�o empacotados num arquivo JAR, eles devem ser acompanhados por META-INF/beans.xml. Segue abaixo um exemplo de um JAR com seus respectivos diret�rios e arquivos:


  META-INF/faces-config.xml
  META-INF/flows/fluxo1/entrada.xhtml
  META-INF/flows/fluxo1/proximo.xhtml
  META-INF/flows/fluxo1/fim.xhtml
  META-INF/flows/fluxo2/inicio.xhtml
  META-INF/flows/fluxo2/proximo.xhtml
  META-INF/flows/fluxo2/fim.xhtml
  META-INF/beans.xml
  org/glassfish/exemplo/MeuFluxo1Bean.class
  org/glassfish/exemplo/MeuFluxo2Bean.class
  org/glassfish/exemplo/MeuFluxo1Definicao.class
  org/glassfish/exemplo/MeuFluxo2Definicao.class

Neste JAR podemos notar os seguintes destaques abaixo:

Existem dois fluxos, fluxo1 e fluxo2.
O arquivo META-INF/beans.xml � obrigat�rio para habilitar o CDI. Isto pode ser habilitado de forma impl�cita se as anota��es do bean s�o usadas no arquivo.
MeuFluxo1Bean e MeuFluxo2Bean s�o beans com escopo de fluxo. Esses beans s�o usados para armazenar qualquer informa��o de fluxo local.
MeuFluxo1Definicao define pontos de entrada e sa�da de um fluxo, nome do par�metro de entrada e valor proveniente de um outro fluxo, nome do par�metro de sa�da e o valor para um outro fluxo e de navega��o para outros n�s.

Na Listagem 13 temos um c�digo de exemplo das defini��es de um fluxo.

Listagem 13. Exemplo de implementa��o do MeuFluxo1Definicao.


  public class MeuFluxo1Definicao {
   
           @Produces @FlowDefinition
           public Flow defineFlow(@FlowBuilderParameter FlowBuilder flowBuilder) {
                     String flowId = "fluxo1";
                     flowBuilder.id("unique", flowId);
                     flowBuilder.viewNode(flowId, "/" + flowId + "/" + flowId + ".xhtml").markAsStartNode();
                     flowBuilder.returnNode("goHome").
                     fromOutcome("#{fluxo1Bean.homeValue}");
                     flowBuilder.inboundParameter("param1DoFluxo2", "#{flowScope.param1Value}");
                     flowBuilder.flowCallNode("call2").flowReference("", "fluxo2").
                     outboundParameter("param1DoFluxo1", "param1 fluxo1 valor");
   
                     return flowBuilder.getFlow();
           }
  }

Neste c�digo temos um fluxo definido programaticamente via CDI Producer. @FlowDefinition � uma anota��o a n�vel de classe que permite que o fluxo seja definido atrav�s da API Flow Builder. No c�digo acima tamb�m temos uma inst�ncia de FlowBuilder sendo injetada como um par�metro via @FlowBuilderParameter e sendo usado para definir o fluxo.

O �fluxo1� � definido como o identificador do fluxo e fluxo1.xhtml � marcado como o n� de inicio. O m�todo returnNode � usado para definir um ponto de sa�da do fluxo. Neste caso, o fluxo � direcionado para /index para a a��o goHome. O valor do n� pode ser especificado como uma express�o EL. Os par�metros de entrada nomeados s�o chamados �par�metros de outro fluxo� e s�o definidos atrav�s do m�todo �inboundParameter�. O valor do m�todo � populado em outro lugar com um elemento �outboundParameter� correspondente. O valor � armazenado no armazenamento de fluxo local via #{flowScope}.

Por fim, o m�todo flowCallNode � usado para definir um ponto de sa�da de um fluxo. Neste caso, o fluxo �fluxo2� � chamado. Um par�metro de sa�da nomeado e seu valor s�o definidos atrav�s do m�todo �outboundParameter�.

Da mesma forma a classe MeuFluxo2Definicao define fluxo2.

Os fluxos empacotados em diret�rios usam uma conven��o para as configura��es. As conven��es s�o:

Todo arquivo "View Declaration Language", definido por uma p�gina �.xhtml�, nesse diret�rio � um n� View desse fluxo.
O n� de in�cio do fluxo � a View cujo nome � o mesmo que o nome do fluxo.
A navega��o entre qualquer uma das Views no diret�rio � considerado dentro do fluxo.
Navega��o para uma View de fora desse diret�rio � considerado uma sa�da do fluxo.
Um arquivo opcional -fluxo.xml representa a defini��o do fluxo.

As regras neste arquivo sobrescrevem as conven��es descritas:


fluxo1/fluxo1.xhtml
fluxo1/fluxo1a.xhtml
fluxo1/fluxo1b.xhtml
fluxo2/fluxo2-fluxo.xml
fluxo2/fluxo2.xhtml
fluxo2/fluxo2a.xhtml
fluxo2/fluxo2b.xhtml
WEB-INF/...

Seguindo as conven��es definidas nestes diret�rios tem-se que:

fluxo1.xhtml � o n� inicial do fluxo �fluxo1�, e �fluxo1a� e �fluxo1b� s�o dois outros n�s no mesmo fluxo.
�fluxo2� � o n� inicial do fluxo �fluxo2�, e �fluxo2a� e �fluxo2b� s�o outros dois n�s no mesmo fluxo. �fluxo2/fluxo2-fluxo.xml� define a navega��o declarativa do fluxo �fluxo2�. Isto define os pontos de entrada e sa�da de um fluxo, nome do par�metro de entrada e valor proveniente de outro fluxo, nome do par�metro de sa�da e o valor para outro fluxo e a navega��o para outros n�s.

Segue na Listagem 14 um exemplo do arquivo faces-config que define o fluxo de forma declarativa.

Listagem 14. Exemplo do arquivo faces-config.


 <faces-config version="2.2"
  xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="
  http://xmlns.jcp.org/xml/ns/javaee
  http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">
                     
  <flow-definition id="fluxo1">
    <flow-return id="goHome">
        <from-outcome>/index</from-outcome>
    </flow-return>
   
     <inbound-parameter>
       <name>param1DoFluxo1</name>
       <value>#{flowScope.param1Value}</value>
       </inbound-parameter>
   
       <flow-call id="callFlow2">
          <flow-reference>
             <flow-id>fluxo2</flow-id>
               </flow-reference>
                    <outbound-parameter>
                         <name>param1DoFluxo1</name>
                             <value>param1 fluxo1 valor</value>
                                </outbound-parameter>
                              </flow-call>
   
                     </flow-definition>
           </faces-config>

Neste c�digo temos:

A tag que define o fluxo para �fluxo1�, identificado pelo atributo id.
A tag que define um ponto de sa�da do fluxo. Neste caso, o fluxo � direcionado para /index para a a��o goHome. O valor do nodo pode ser especificado como uma express�o EL.
Um par�metro de entrada nomeado que � definido via . Este valor � populado em outro lugar com um elemento correspondente. O valor � armazenado no armazenamento local do fluxo via #{flowScope}.
A tag que define um ponto de sa�da do fluxo. Neste caso, o fluxo �fluxo2� � chamado. Um par�metro de sa�da nomeado e o seu valor s�o configurados via .
O diret�rio WEB-INF que conter� outros recursos requeridos pelas p�ginas, tais como os beans.

Atributos e Marca��es HTML 5

O HTML 5 adiciona uma s�rie de novos atributos para elementos existentes. Esses atributos incluem o tipo do atributo para elementos de entrada (input), al�m do suporte a valores tais como email, url, telefone, n�mero, range, e data.

Veja um exemplo na Listagem 15.

Listagem 15. Exemplo utilizando o type email.


  <input type="email" name="meuEmail"/>

O c�digo acima permite que o browser verifique se o texto inserido est� no formato de e-mail.

Al�m disso, atributos de dados customizados, podem ser definidos para armazenar informa��es privadas customizadas para a p�gina ou para a aplica��o.

Todo elemento HTML pode ter qualquer n�mero de atributos de dados customizados especificados, com qualquer valor, por exemplo:

<input id="minhaData" type="text" data-length="3"/>

Este fragmento de c�digo introduz o tamanho da informa��o como um atributo de dados customizado.

Esses atributos n�o s�o processados, mas podem ser lidos via JavaScript. Este atributo pode ser acessado em JavaScript como:

document.getElementById("minhaData").dataset.length;

Anteriormente ao JSF 2.2, por default, estes tipos recentemente introduzidos e os atributos de dados n�o eram suportados pelos componentes. O conjunto de atributos dispon�veis suportados por um componente JSF � determinado por uma combina��o do UIComponent e Renderer para aquela tag. Em alguns casos, o valor do atributo � interpretado pelo UIComponent ou Renderer (por exemplo, atributo columns do h:panelGrid), e em outros, o valor � passado diretamente para o agente de usu�rio (por exemplo, o atributo lang de h:inputText). Em ambos os casos, o UIComponent e o Renderer tem um conhecimento anterior do conjunto de atributos permitidos.

O JSF 2.2 introduz os �atributos de passagem�, na qual nos permite listar arbitrariamente pares nome/valor num componente que s�o passados diretamente para o agente de usu�rio sem interpreta��o pelo UIComponent ou Renderer. Os atributos de passagem podem ser especificados em tr�s formas diferentes:

Prefixando o atributo com o nome abreviado atribu�do para o namespace XML http://xmlns.jcp.org/jsf/passThrough.
Segue um exemplo na Listagem 16.
Listagem 16. Exemplo prefixando o atributo com o nome abreviado.
```
<h:inputText p:type="email" value="#{usuario.email}"/>
```
Neste c�digo, p � uma abrevia��o para o namespace.
Aninhando a tag dentro de um componente, conforme a Listagem 17.]
Listagem 17. Exemplo aninhando a tag dentro de um componente.
```
<h:inputText value="#{usuario.email}">
         <f:passThroughAttribute name="type" value="email"/>
</h:inputText>
```
Neste c�digo, um atributo de tipo de valor de e-mail � marcado como um atributo de passagem.
Aninhando a tag dentro de um componente com o valor definido para um Map, conforme a Listagem 18.
Listagem 18. Exemplo aninhando a tag dentro de um componente com valor definido para um Map.
```
<h:inputText value="#{usuario.data}">
         <f:passThroughAttributes value="#{usuario.meusAtributos}"/>
</h:inputText>
```
#{usuario.meusAtributos} deve apontar para um Map onde os valores podem ser ou literais ou express�es.

Este mecanismo pode ser aplicado para qualquer componente JSF e n�o � restrito apenas para elementos HTML 5.

Component Tags do JSF 2

JSF 2 possui uma variedade de componentes. Cada componente possui por tr�s uma classe UIComponent. Esses componentes s�o exibidos como elementos HTML.

Veremos neste artigo os componentes mais utilizados, os novos componentes adicionados e como eles s�o exibidos em HTML.

1. Componente h:commandButton

Exemplo de Uso:

<h:commandButton value="Pr�ximo" action="proximo"/>

Sa�da HTML:

<input type="submit" name="j_idt8" value="Pr�ximo" />

2. Componente h:commandLink

Exemplo de Uso:

<h:commandLink value="meuLink" action="proximo"/>

Sa�da HTML:

<script type="text/javascript" src="/components/faces/javax.faces.resource/jsf.js?ln=javax.faces&stage=Development">
  </script>
  <a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt6'), {'j_idt10':'j_idt10'},'');return false">
  meuLink
  </a>

3. Componente h:dataTable

Exemplo de Uso:

<h:dataTable value="#{meuBean.lista}" var="p">
           <h:column>
                     <f:facet name="header">Id</f:facet>
                     #{p.id}
           </h:column>
           <h:column>
                     <f:facet name="header">Nome</f:facet>
                     #{p.nome}
           </h:column>
  </h:dataTable>

Sa�da HTML:

<table>
           <thead>
                     <tr>
                              <th scope="col">Id</th>
                              <th scope="col">Nome</th>
                     </tr>
           </thead>
           <tbody>
                     <tr>
                              <td> 1 </td>
                              <td> Jo�o </td>
                     </tr>
                     
                     <tr>
                              <td> 2 </td>
                              <td> Carlos </td>
                     </tr>
   
                     <tr>
                              <td> 3 </td>
                              <td> Francisco </td>
                     </tr>
           </tbody>
  </table>

4. Componente h:form

Exemplo de Uso:

 <h:form> ... </h:form>

Sa�da HTML:

<form id="j_idt6" name="j_idt6" method="post"
           action="/components/faces/index.xhtml"
           enctype="application/x-www-form-urlencoded">
           ...
  </form>

5. Componente h:graphicImage

Exemplo de Uso:

<h:graphicImage value="/images/teste.png"/>

Sa�da HTML:

<img src="/components/images/teste.png" />

6. Componente h:inputHidden

Exemplo de Uso:

<h:inputHidden value="valorEscondido"/>

Sa�da HTML:

<input type="hidden" name="j_idt22" value="valorEscondido" />

7. Componente h:inputSecret

Exemplo de Uso:

<h:inputSecret value="#{meuBean.senha}"/>

Sa�da HTML:

<input type="senha" name="j_idt24" value="" />

8. Componente h:inputText

Exemplo de Uso:

<h:inputText id="meuInputTextExemplo" value="#{meuBean.inputText}"/>

Sa�da HTML:

<input id="meuInputTextExemplo" type="text" name="meuInputTextExemplo" />

9. Componente h:inputTextArea

Exemplo de Uso:

<h:inputTextarea value="#{meuBean.inputTextarea}"/>

Sa�da HTML:

<textarea name="j_idt27">
  </textarea>

10. Componente h:button

Exemplo de Uso:

<h:button value="meuButton" outcome="next"/>

Sa�da HTML:

<input type="button" onclick="window.location.href='/components/faces/next.xhtml'; return false;" value="meuButton" />

11. Componente h:link

Exemplo de Uso:

<h:link value="Pr�ximo" outcome="proximo">
           <f:param name="teste" value="testeValor"/>
  </h:link>

Sa�da HTML:

<a href="/components/faces/next.xhtml?teste=testeValor">
  Pr�ximo
  </a>

12. Componente h:body

Exemplo de Uso:

<h:body>
           Teste do Corpo
  </h:body>

Sa�da HTML:

<body>
           Teste do Corpo
  </body>

13. Componente h:outputFormat

Exemplo de Uso:

<h:outputFormat value="Ol� {0}">
           <f:param value="Jo�o"/>
  </h:outputFormat>

Sa�da HTML:

 Ol� Jo�o

14. Componente h:outputLabel

Exemplo de Uso:

<h:outputLabel for="inputTextId" value="meuLabelExemplo"/>
  <h:inputText id="inputTextId" value="meuInputTextExemplo"/>

Sa�da HTML:

<label for="inputTextId">
           meuLabelExemplo
  </label>
  <input id="inputTextId" type="text" name="inputTextId" value="meuInputTextExemplo" />

15. Componente h:outputLink

Exemplo de Uso:

<h:outputLink value="proximo.xhtml"> 
           meuOutputExemplo
  </h:outputLink>

Sa�da HTML:

<a href="proximo.xhtml">
           meuOutputExemplo
  </a>

16. Componente h:outputText

Exemplo de Uso:

<h:outputText value="meuOutputText"/>

Sa�da HTML:

meuOutputText

17. Componente h:outputScript

Exemplo de Uso:

<h:outputScript library="scripts" name="main.js"/>

Sa�da HTML:

<script type="text/javascript" src="/components/faces/javax.faces.resource/main.js">

18. Componente h:outputStylesheet

Exemplo de Uso:

<h:outputStylesheet library="stylesheets" name="main.css"/>

Sa�da HTML:

<link type="text/css" rel="stylesheet" href ="/components/faces/javax.faces.resource/main.css?ln=stylesheets"/>

19. Componente h:panelGrid

Exemplo de Uso:

<h:panelGrid columns="2">
           <h:outputLabel for="inputText1" value="meuLabel1"/>
           <h:inputText id="inputText1" value="#{meuBean.inputText}"/>
           <h:outputLabel for="inputText2" value="meuLabel2"/>
           <h:inputText id="inputText2" value="#{meuBean.inputText}"/>
  </h:panelGrid>

Sa�da HTML:

<table>
           <tbody>
                     <tr>
                              <td>
                                        <label for="inputText1">meuLabel1</label>
                              </td>
                              <td>
                                        <input id="inputText1" type="text" name="inputText1" />
                              </td>
                     </tr>
   
                     <tr>
                              <td>
                                        <label for="inputText2">meuLabel2</label>
                              </td>
                              
                              <td>
                                        <input id="inputText2" type="text" name="inputText2" />
                              </td>
                     </tr>
           </tbody>
  </table>

20. Componente h:selectBooleanCheckbox

Exemplo de Uso:

<h:selectBooleanCheckbox value="#{meuBean.selectBooleanCheckbox}"/>

Sa�da HTML:

<input type="checkbox" name="j_idt52" />

21. Componente h:selectOneRadio

Exemplo de Uso:

<h:selectOneRadio value="#{meuBean.selectBooleanCheckbox}">
           <f:selectItem itemValue="branco" itemLabel="Branco"/>
           <f:selectItem itemValue="preto" itemLabel="Preto"/>
           <f:selectItem itemValue="azul" itemLabel="Azul"/>
  </h:selectOneRadio>

Sa�da HTML:

<table>
           <tr>
                     <td>
                              <input type="radio" checked="checked" name="j_idt54" id="j_idt54:0" value="branco" />
                              <label for="j_idt54:0">Branco</label>
                     </td>
           
                     <td>
                              <input type="radio" checked="checked" name="j_idt54" id="j_idt54:1" value="preto" />
                              <label for="j_idt54:1">Preto</label>
                     </td>
   
                     <td>
                              <input type="radio" checked="checked" name="j_idt54" id="j_idt54:2" value="azul" />
                              <label for="j_idt54:2">Azul</label>
                     </td>
           </tr>
  </table>

22. Componente h:selectOneListbox

Exemplo de Uso:

<h:selectOneListbox value="#{meuBean.selectBooleanCheckbox}">
           <f:selectItem itemValue="branco" itemLabel="Branco"/>
           <f:selectItem itemValue="preto" itemLabel="Preto"/>
           <f:selectItem itemValue="azul" itemLabel="Azul"/>
  </h:selectOneListbox>

Sa�da HTML:

<select name="j_idt59" size="3">
           <option value="branco" selected="selected">Branco</option>
           <option value="preto" selected="selected">Preto</option>
           <option value="azul" selected="selected">Azul</option>
  </select>

23. Componente h:selectOneMenu

Exemplo de Uso:

<h:selectOneMenu value="#{meuBean.selectBooleanCheckbox}">
           <f:selectItem itemValue="branco" itemLabel="Branco"/>
           <f:selectItem itemValue="preto" itemLabel="Preto"/>
           <f:selectItem itemValue="azul" itemLabel="Azul"/>
  </h:selectOneMenu>

Sa�da HTML:

<select name="j_idt64" size="1">
           <option value="branco" selected="selected">Branco</option>
           <option value="preto" selected="selected">Preto</option>
           <option value="azul" selected="selected">Azul</option>
  </select>

24. Componente h:selectManyCheckbox

Exemplo de Uso:

<h:selectManyCheckbox value="#{meuBean.selectManyCheckbox}">
           <f:selectItem itemValue="branco" itemLabel="Branco"/>
           <f:selectItem itemValue="preto" itemLabel="Preto"/>
           <f:selectItem itemValue="azul" itemLabel="Azul"/>
  </h:selectManyCheckbox>

Sa�da HTML:

<table>
           <tr>
                     <td>
                              <input name="j_idt69" id="j_idt69:0" value="branco" type="checkbox" />
                              <label for="j_idt69:0" class="">Branco</label>
                     </td>
           
                     <td>
                              <input name="j_idt69" id="j_idt69:1" value="preto" type="checkbox" />
                              <label for="j_idt69:1" class="">Preto</label>
                     </td>
   
                     <td>
                              <input name="j_idt69" id="j_idt69:2" value="azul" type="checkbox" />
                              <label for="j_idt69:2" class="">Azul</label>
                     </td>
           </tr>
  </table>

25. Componente h:selectManyListbox

Exemplo de Uso:

<h:selectManyListbox value="#{meuBean.selectBooleanCheckbox}" size="2">
           <f:selectItem itemValue="branco" itemLabel="Branco"/>
           <f:selectItem itemValue="preto" itemLabel="Preto"/>
           <f:selectItem itemValue="azul" itemLabel="Azul"/>
  </h:selectManyListbox>

Sa�da HTML:

<select name="j_idt74" size="2">
           <option value="branco" selected="selected">Branco</option>
           <option value="preto" selected="selected">Preto</option>
           <option value="azul" selected="selected">Azul</option>
  </select>

26. Componente h:selectManyMenu

Exemplo de Uso:

<h:selectManyMenu value="#{meuBean.selectBooleanCheckbox}">
           <f:selectItem itemValue="branco" itemLabel="Branco"/>
           <f:selectItem itemValue="preto" itemLabel="Preto"/>
           <f:selectItem itemValue="azul" itemLabel="Azul"/>
  </h:selectManyMenu>

Sa�da HTML:

<select name="j_idt81" multiple="multiple" size="1">
           <option value="red">Branco</option>
           <option value="green">Preto</option>
           <option value="blue">Azul</option>
  </select>
  <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-6389029500114305749:3536902027553202703" autocomplete="off" />

27. Outros Componentes

A tag h:inputFile � um novo componente adicionado no JSF 2.2. Este componente permite que um arquivo seja carregado.

Este componente pode ser usado dentro de um h:form e ligado a um bean que tem um campo do tipo javax.servlet.http.Part.

Segue na Listagem 19 um exemplo

Listagem 19. Exemplo de um formul�rio utilizando h:inputFile.


  <h:form enctype="multipart/form-data">
           <h:inputFile value="#{fileUploadBean.file}"/><br/>
           <h:commandButton value="Carregar Arquivo"/><p/>
  </h:form>

Neste c�digo temos um formul�rio HTML que � criado atrav�s do elemento h:form. O formul�rio deve ter como valor "multipart/form-data" no atributo enctype. Este � um tipo MIME padr�o que deveria ser usado para submeter formul�rios que cont�m arquivos, dados que n�o sejam ASCII e dados bin�rios.

No c�digo acima tamb�m temos o atributo value que � ligado ao bean. Um exemplo de um bean para o c�digo acima � dado na Listagem 20.

Listagem 20. Exemplo de um bean para carregar o arquivo.


  @Named
  @RequestScoped
  public class FileUploadBean {
           private Part file;
           public Part getFile() {
                     return file;
           }
   
           public setFile(Part file) {
                     this.file = file;
           }
  }

O arquivo ser� carregado quando o bot�o �Carregar Arquivo� for clicado.

O upload do arquivo tamb�m pode ser empacotado em uma tag .

Segue o exemplo na Listagem 21.

Listagem 21. Exemplo utilizando f:ajax.


  <h:form enctype="multipart/form-data" prependId="false">
           <h:inputFile value="#{fileUploadBean.file}"/><br/>
           <h:commandButton value="Upload">
                     <f:ajax onevent="statusUpdate"/>
           </h:commandButton>
  </h:form>
  <textarea id="status" cols="40" rows="10" readonly="readonly"/>

Este c�digo � similar ao c�digo mostrado anteriormente com a diferen�a que o fora do h:form � um espa�o reservado para a exibi��o do status do upload do arquivo. Al�m disso, o h:commandButton tem uma tag aninhada. Esta tag invoca o m�todo statusUpdate definido separadamente num JavaScript definido, conforme a Listagem 22.

Listagem 22. Exemplo de JavaScript para mostra o status.

<br>var statusUpdate = function statusUpdate(data) {<br>   var statusArea = document.getElementById("status");<br>   var text = statusArea.value;<br>   text = text + "Nome: " + data.source.id;<br>    <br>   if (data.type === "event") {<br>       text = text + " Event: " + data.status + " ";<br>   }<br>    statusArea.value = text;<br>}<br>

As �ltimas vers�es do JSF t�m aumentado significativamente a produtividade das equipes de desenvolvimento, tornando mais simples e pr�tico desenvolver em cima dessa plataforma. A �ltima vers�o do JSF, a vers�o 2.2 em especial, teve um incremento de funcionalidades e uma atualiza��o significativa em alguns pontos de diversos outros componentes para fornecer uma maior produtividade aos desenvolvedores.

Bibliografia

[1]Josh Juneau. Java EE 7 Recipes: A Problem-Solution Approach. Apress, 2013.

[2]Josh Juneau. Introducing Java EE 7: A Look at What's New. Apress, 2013.

[3]Arun Gupta. Java EE 7 Essentials. O'Reilly, 2013.

Tecnologias:

Confira outros conte�dos:

Introdu��o ao JDBC

Novidades do Java

Teste unit�rio com JUnit

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Higor Em 2014

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

JavaServer Faces 2.2: aumento de produtividade

Veja neste artigo algumas das novidades introduzidas no JSF 2.2 como Server e Client Extension Points, Resource Library Contracts, Faces Flow e Atributos, Marca��es HTML 5 e Component Tags.

Server e Client Extension Points

Resource Library Contracts

Faces Flow

Atributos e Marca��es HTML 5

Component Tags do JSF 2

1. Componente h:commandButton

2. Componente h:commandLink

3. Componente h:dataTable

4. Componente h:form

5. Componente h:graphicImage

6. Componente h:inputHidden

7. Componente h:inputSecret

8. Componente h:inputText

9. Componente h:inputTextArea

10. Componente h:button

11. Componente h:link

12. Componente h:body

13. Componente h:outputFormat

14. Componente h:outputLabel

15. Componente h:outputLink

16. Componente h:outputText

17. Componente h:outputScript

18. Componente h:outputStylesheet

19. Componente h:panelGrid

20. Componente h:selectBooleanCheckbox

21. Componente h:selectOneRadio

22. Componente h:selectOneListbox

23. Componente h:selectOneMenu

24. Componente h:selectManyCheckbox

25. Componente h:selectManyListbox

26. Componente h:selectManyMenu

27. Outros Componentes

Confira outros conte�dos:

Introdu��o ao JDBC

Novidades do Java

Teste unit�rio com JUnit

Perguntas frequentes

Nossos casos de sucesso