JSF

Conhecendo JSF

Objetivos

Entender as motivaes do JSF Mostrar suas principais caractersticas; Conhecer os componentes da especificao; Desenvolver um primeiro exemplo

Objetivos do JSF
JSF um framework que foi criado para o desenvolvimento web de forma gil. Anteriomente ao JSF o desenvolvimento WEB seguia o modelo de desenvolvimento de SERVLET, com isto o forma de programao tornava-se totalmente diferente de aplicaes Desktop. O modelo de programao do JSF visa abstrair as questes referentes a programao WEB, facilitando o desenvolvimento e fazendo com que o desenvolvedor mantenha o foco na codificao das regras da aplicao. Alm disto a complexidade das interfaces grficas com o usurio, que tem se tornado cada vez mais complexas, faz com que se torne necessrio prover o dinamismo das aplicaes Desktop para as aplicaes Web, o que no facil utilizando somente HTML, j o JSF cria abstraes que tornam o desenvolvimento de aplicaes ricas muito mais fcil.

Ciclo de Vida
Como foi dito, JSF trabalha de abstraindo a questo do protocolo HTTP. Todo o mapeamento de campos HTML para os objetos Java feito de forma transparente, assim como os eventos de boto e suas aes e as validaes de campo. Para que isto acontea existe todo um ciclo de vida de uma requisio feita por JSF. O desenvolvedor no obrigatrio a conhecer profundamente o funcionamento interno do JSF, mas um diferencial muito importante, ter um conhecimento sobre o ciclo de vida, sabendo a ordem de execuo e o que acontece em cada uma destas fases. Este conhecimento permite que sejam construdas aplicaes melhores, pois o desenvolvedor sabe com detalhes que operaes esto acontecendo em cada fase, tornando mais fcil, inclusive, detectar um erro ao se identificar em qual fase ele ocorreu. A figura a seguir apresenta o ciclo de vida do JSF, logo a seguir temos a explicao de cada fase.

Restore View (Restaurar Viso) No JSF a view representa uma rvore com todos os componentes de uma pgina e a principal funo da fase Restore View inicializar o ciclo de vida de processamento da requisio, tentando obter a informao de estado para construir a rvore de componentes que representa a requisio. Uma requisio chega atravs do controlador FacesServlet, que examina e extrai o ID da view. Com este ID feita um busca, na sesso do usurio, pela view e caso no seja encontrada, criada uma. Caso seja a primeira vez que o usurio faz a requisio da pgina, no existiro dados submetidos pelo usurio, ento o JSF vai pular as prximas fases, indo direto para a Render Response que a ultima fase. Caso no seja a primeira requisio da pgina, o JSF aplicar na view os dados informados pelo usurio e seguir para a prxima fase, Apply Request Values. Apply Request Values (Aplicar Valores do Request) Nesta fase o valor local de cada componente atualizado pela requisio atual. Os componentes precisam ser restaurados ou criados e seus valores so recuperados, na maioria das vezes atravs dos parmetros da requisio, mas tambm podem ser recuperados de cookies, cabealhos e da sesso HTTP. Outra funo desta fase fazer a converso de dados, de modo que os valores passados na requisio, sejam convertidos em seu tipo esperado. Nesta fase atuam os conversores, que so responsveis por este trabalho e caso ocorra um erro criada uma mensagem que colocada na fila de mensagens para ser mostrada ao usurio na fase Render Response. Esta fase pode se comportar de maneira um pouco diferente se a propriedade immediate estiver com o valor 'true'; neste caso, alm da converso dos dados assumida a tarefa de validao dos dados que de responsabilidade da fase Process validation. Caso ocorra um erro na converso ou validao, tambm gerada e enfileirada uma mensagem na fila de mensagens. Process Validation (Processar Validaes) Nesta fase, a rvore de componentes percorrida e feito um teste para saber se o valor aceitvel. A responsabilidade de validao pode ser atribuda ao prprio componente, ou a um ou mais validadores registrados. Caso todos os componentes sejam validados com sucesso, o processo avana para fase update model, mas caso um ou mais componentes possuam valores invlidos, gerada uma mensagem de erro para cada componente e o JSF pula para a fase render response que mostrar a view atual com todas as mensagens de erro.

Update Model Values (Atualizar Valores do Model) Aqui so atualizadas as propriedades, dos Managed Beans, que possuem ligao com algum componente. Como esta fase s alcanada caso no ocorra nenhum erro de validao ou converso, pode-se assegurar que os valores que sero atualizado esto vlidos. Vale ressaltar que mesmo os valores estando vlidos com as regras de converso e validao, nada impede que eles estejam invlidos para alguma regra de negcio da aplicao. Um exemplo prtico uma validao de CPF, que pode comumente usar um algortimo para checar se o nmero informado um numero de CPF no formato vlido, mas para nossa regra de negcio pode no bastar o nmero possuir um formato vlido, sendo obrigatrio que este nmero represente um CPF existente. Invoke Application (Invocar Aplicao)

Ao chegar nesta fase temos a certeza que nossos dados foram convertidos, validados e usados para atualizar os Managed Beans, ento agora que o JSF executa as lgicas de negcio da aplicao. Os eventos de ao padro de cada componente e os que foram restaurados na primeira fase, sero agora enviados aos ouvintes de ao correspondentes. Primeiro sero executados os eventos de ao recuperados na fase restore view, depois o JSF executar os eventos padro e depois que tudo isso feito, a requisio segue para a prxima fase. Render Response (Renderizar Resposta) Chegamos na ltima fase do ciclo de vida da requisio sabendo que todo o processamento de nossa requisio foi feito, faltando apenas mostrar o resultado ao usurio. Mostrar o resultado ao usurio a principal funo desta fase, mas ela tambm grava o estado da view, para que ela possa ser recuperada na fase restore view caso seja necessrio. Podemos ressaltar que nesta fase os conversores precisam trabalhar de maneira inversa ao que ocorre na fase apply request values. Aqui os dados so convertidos em String, utilizando uma formatao que o usurio entenda.

Conceitos e componentes
Como a maioria das tecnologias, o JSF possui um conjunto prprio de termos, que formam a base conceitual para os recursos que proporciona. So muitos termos como componentes de interfaces (UI), validores, renderizadores, Managed Beans, entre outros, que sero encontrados por quem comear a desenvolver utilizando JSF. Antes de nos aprofundarmos em cada pea deste quebra cabea, podemos ter uma idia geral da funo de cada um nos prximos tpicos. Componentes UI Um objeto sem estado de conversao associado, mantido no servidor, que fornece uma funcionalidade especfica para interagir com um usurio final. Componentes UI so JavaBeans com propriedades, mtodos e eventos. Elas so organizadas em uma estrutura, que uma rvore de componentes geralmente apresentados como uma pgina. Renderizadores Responsvel por exibir um componente da UI e transformar uma entrada do usurio em um valor do componente. Renderizadores podem ser projetados para funcionar com um ou mais componentes UI, um componente UI pode ser associado a diversos renderizadores. Managed Beans Uma especializao do JavaBeans que coleta valores a partir de componentes da UI e implementam mtodos dos eventos dos ouvintes. Eles tambm podem possuir referncias a elementos da UI. Navegao A capacidade de passar de uma pgina para a prxima. JSF possui um poderoso sistema de navegao que integrado com os ouvintes dos eventos. Validadores Responsvel por garantir que o valor digitado por um usurio aceitvel. Um ou mais validadores podem ser associados com um componente da UI. Mensagens Informaes que so exibidas de volta para o usurio. Em qualquer parte da requisio (Managed Beans, validadores, conversores, e assim por diante) mensagens de erro podem ser geradas ou podem ser exibidas informaes para o usurio. Conversores Converte o valor de um componente para String e tambm executa a operao reversa. Um componente UI pode ser associado com apenas um conversor. Eventos e Listeners JSF usa o modelo JavaBean de evento/listener(tambm usado pelo Swing). Componentes UI (e outros objetos) geram eventos e listeners podem ser registrados para lidar com esses eventos.

Primeiro Projeto
Para comear a programar em JSF vamos criar um projeto Hello World. Um projeto JSF basicamente um projeto Web padro com as devidas libs do framework. Alm disto necessrio configurar o web.xml para receber requisies JSF e configurar um descritor do JSF (facesconfig.xml) Para facilitar o desenvolvimento utilizaremos o Eclipe (atualmente verso Helios), pois esta IDE possui muitos facilitadores para a criao de JSF. Tambm utilizaremos o plugin do Eclipse Jboss Tools, este possui ferramentas que agilizam muito o desenvolvimento, como por exemplo a paleta de componentes Rich e os templates de arquivos .xhtml. Como servidor utilizaremos o Tomcat 7. Aps baixar e descompactar o Eclipse, vamos criar um projeto novo. Este deve ser um Dynamic Web Project como mostra a figura abaixo:

A proxima tela pergunta sobre os caminhos do projeto, mantenha como est e click next. Logo aparece a tela de configurao do contexto WEB, mantenha como est e clique next. A tela que aparece neste momento nos permite buscar as libs de implementao do JSF. Utilizaremos o projeto MOJARRA. possivel baixar as libs diretamente desta tela, clicando no boto do disquete, no lado direito desta tela.

Feito isto s clicar em finish e o projeto estar criado.

Com isto teremos um projeto com a seguinte estrutura:

Nesta estrutura temos o web.xml com a configurao do JSF e o arquivo descritor do JSF (faces-config.xml). Nossos arquivos xhtml ficaro no diretrio WebContent, e sero processados pelo JSF. Agora vamos dar uma olhada nos arquivos criados e entender como funcionam.

web.xml O web.xml ir conter a informao do servlet JSF e as configuraes de mapping

<?xml version="1.0" encoding="ASCII"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http:// java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/ web-app_3_0.xsd" version="3.0"> <display-name>Hello World</display-name> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <context-param> <description>State saving method: 'client' or 'server' (=default).</description> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>client</param-value> </context-param> <context-param> <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name> <param-value>resources.application</param-value> </context-param> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> </web-app>

faces-config.xml O Faces-config contm as informaes de mapeamento do JSF, neste arquivo sero configurados os Managed Beans (JSF 2 permite fazer est configurao por Annotation), as regras de navegao, os conversores e validadores customizados assim como os phase listeners. Entraremos em detalhes sobre cada configurao mais adiante. No momento vamos apenas visualizar a estrutura bsica do arquivo.
<?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http:// java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd" version="2.0"> </faces-config>

Pgina de welcome page Na configurao da aplicao web informado quais so os arquivos de welcome. Isto indica qual arquivo deve ser carregado quando chamarmos a aplicao no indicando caminho. Por exemplo quando chamarmos http://www.minha-aplicacao.com.br/. Infelizmente no JSF no podemos fazer uma chamada direta a um arquivo html o jsp. Ao invs disto devemos fazer uma chamada ao mapping definido no web.xml. Para resolver este problema possvel criar um arquivo html que ir redirecionar para o JSF, fazendo com que o JSF processe a requisio e seguindo o clico de vida. Abaixo segue o documento html que podemos criar para evitar este problema, ele se chamar index.html e ficar no diretrio WebContent da aplicao:
<html> <head> <meta http-equiv="Refresh" content= "0; URL=helloworld.jsf"/> <title>Iniciando Aplicao</title> </head> <body> <p>Por Favor, aguarde enquanto a aplicao iniciada.</p> </body> </html>

Por fim podemos criar o arquivo xhtml, que receber a requisio e montar a pgina. Um arquivo xhtml segue um padro para importao de taglibs e muito semelhante a jsp, com apenas algumas diferenas. Poderia ser utilizada a notao de JSP, entretanto xhtml mais atualizado e para facelets necessrio o uso desta formatao. A caixa abaixo mostra o exemplo de arquivo xhtml, neste caso helloworld.xhtml. A unica coisa que esta pgina faz escrever Hello World na tela.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> </h:head> <body>

<h:outputText value="Hello World!" /> </body> </html>

Navegao Agora digamos que seja necessrio adicionar um link nesta pagina para outra pgina, isto feito com regras de navegao, antes do JSF 2, era necessrio adicionar uma regra dentro do facesconfig.xml. com o JSF 2, foi criada a facilidade de regra de navegao implicita, onde o nome da regra sendo o mesmo do arquivo .xhtml, no h necessidade de declarao. O exemplo abaixo mostra como seria a declarao de regra de navegao (est ainda valida no JSF 2.0 e pode ser utilizada em casos que se necessita de uma regra mais complexa do que a navegao implcita)
<navigation-rule> <from-view-id>/helloworld.xhtml</from-view-id> <navigation-case> <from-outcome>proximo</from-outcome> <to-view-id>/cadastro.xhtml</to-view-id> </navigation-case> </navigation-rule>

Declarao de regras de navegao no faces-config.xml

logo o arquivo .xhtml com o link ficaria assim (cabe lembrar que sempre necessrio ter um form para adicionar um link ou button de navegao):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> </h:head> <body> <h:form id="helloForm"> <h:outputText value="Hello World!" /> <br/><br/> <h:commandLink action="proximo" value="Ir para cadastro" /> </h:form> </body> </html>

J no JSF 2 podemos fazer uso na navegao implcita, neste caso no colocaramos nenhuma configurao no faces-config.xml. E no .xhtml apontaramos o action para o nome do .xhtml sem a extenso, conforme mostrado abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> </h:head> <body> <h:form id="helloForm"> <h:outputText value="Hello World!" /> <br/><br/> <h:commandLink action="cadastro" value="Ir para cadastro" /> </h:form> </body> </html>

Mapeamento Form para Java O prximo passo fazer com que os valores do formulrio sejam mapeados em objetos Java. Para isto temos os chamados Managed Beans. Um managed bean nada mais do que uma classe java com attributos e seus respectivos getters/setter. Alm de mtodos actions chamados nos cliques de boto ou outras aes disparadas pela tela. Para indicar que uma classe java um managed bean existem duas formas. A primeira forma mapeando esta classe no faces-config.xml, esta forma era a maneira de se fazer at o JSF 1.2. A segunda maneira utilizando annotations, est forma foi adicionada na verso 2 do JSF e facilita muito no reconhecimento das classes. Ambas as formas podem ser utilizadas no JSF 2, j anotaes no podem ser utilizadas em JSF 1.2. A seguir sero apresentadas as duas formas.
<managed-bean> <managed-bean-name>usuario</managed-bean-name> <managed-bean-class>com.diehl.teste.bean.UsuarioBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>

Mapeamento no arquivo faces-config.xml

@ManagedBean(name="usuario") @RequestScoped

public class UsuarioBean { private String nome; public String getNome() { return nome; } public void setNome(String nome) { this.nome = nome; } }

Mapeamento por anotaes Tendo definido o managed bean, precisamos verificar como "linkar" os campos do formulrio com os atributos da classe Java. Isto feito utilizando uma anotao especfica do JSF: #{bean.nome} #{bean[nome]} Ambas as sintaxes so vlidas e sero melhor detalhadas a frente. O arquivo cadastro.xhtml com o formulrio ficar desta forma ento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> </h:head> <body> <h:form id="form"> Digite seu nome: <h:inputText value="#{usuario.nome}" /> <h:commandButton action="sucesso" value="Avancar" /> </h:form> </body> </html>

Como no command button estamos apontando para um action chamado sucesso, precisamos criar este arquivo. Neste apenas mostraremos o valor que foi digitado pelo usurio na pgina anterior.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head></h:head> <body> Bem-vindo <h:outputText value="#{usuario.nome}" /> </body> </html>

Navegaes condicionais At agora vimos navegaes estticas, sempre apontando para um determinado xhtml. Tambm possvel chamar mtodos de dentro do managed bean usando o atributo de um commandButton ou commandLink. Estes mtodos apenas no devem receber nenhum parmetro e devem retornar um String ou void. A string que ele deve retornar o nome da regra de navegao que deve ser redirecionada. Caso a String seja nula ou uma regra inexistente, o sistema voltar para o mesmo xhtml que

requisitou a pgina, da mesma forma isto ocorrer se tivermos retorno void. Vamos supor ento que precisamos decidir qual pgina mostrar de acordo com o que o usurio digitou na pagina cadastro.xhtml. Para fazer isto criaremos um novo mtodo no UsurioBean, este ser chamado de avancar, conforme mostrado abaixo.
public String avancar() { if ("invalido".equalsIgnoreCase(nome)) { return "falha"; } else { return "sucesso"; } }

Com isto estamos decidindo que se o usurio digitar invalido no campo, mostraremos uma pagina de falha, caso contrrio mostraremos a de sucesso. No cadastro.xhtml precisamos mudar o action do commandButton para #{usuario.avancar}.

Tambm precisamos criar um xhtml de falha (falha.xhtml).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head></h:head> <body> <font color="red"> <h:outputText value="#{usuario.nome}" /> no um valor vlido </font> </body> </html>

Exercicios
1.

Implementar uma pgina para simulao de cadastro de Alunos, com os seguintes dados: Nome; Sobrenome; Data de nascimento (campo textual para ser convertido posteriomente para Date utilizando DateFormat) Endereo; Telefone; Teremos duas telas, uma chamada cadastro.xhtml e outra resposta.xhtml. Na tela resposta.xhtml devemos informar uma mensagem de sucesso, informar o nome completo do aluno, sua idade, endereo e telefone. 2. Sem consultar a apostila tente desenhar o fluxo do ciclo de vida do JSF;
3.

Descreva cada fase do ciclo de vida do JSF e suas principais caractersticas

Managed Beans

Objetivos

Mostrar a importncia de um Java Bean ao JSF Mostrar como registrar um Bean no JSF Ver como ligar as propriedades de um Bean nas Tags JSF Mostrar o que so os Backing Beans Ver em que tipo de escopo podemos registrar um Bean no JSF Mostrar os tipos de expresses de ligao de valor Ver como funciona a comunicao entre Beans

Entendendo a importncia de JavaBean no JSF

O principal tema referente ao design de aplicaes web a separao entre a apresentao e a lgica de negcios. O JSF utiliza os beans para realizar essa separao. As pginas JSF fazem referncia s propriedades dos beans e a lgica de programao fica contida no cdigo de implementao do bean. De acordo com a especificao Java Beans, um Java Bean um componente de software reutilizvel que pode ser manipulado por uma ferramenta de construo. primeira vista, um bean parece ser um objeto. Entretanto, os beans servem a um propsito diferente. Os objetos so criados e manipulados dentro de um programa Java quando o software chama construtores e invoca mtodos. Entretanto os beans podem se configurados e manipulados sem programao. No contexto do Java Server Faces, beans so muito mais do que componentes de interface do usurio. Utiliza-se os beans sempre que preciso conectar classes Java com pginas web. Como vimos no capitulo anterior ao anotarmos uma classe como @ManagedBean, estamos indicando ao JSF que deve ser criado um objeto desta classe e que deve estar disponivel para acesso pelos componentes JSF. Nas aplicaes JSF os bean so normalmente usados para: Componentes da interface do usurio;

Definir o comportamento de um formulrio web, acesso a servios externos como banco de dados (os chamados backing beans); Objetos de negcio cujas propriedades so exibidas nas pginas web;

Propriedades de um Bean
Um bean deve seguir algumas convenes especificas definidas, para expor a camada de apresentao (.xhtml) seus atributos. O padro a ser seguido o seguinte: A classe sempre dever ter um contrutor padro, ou seja, um contrutor sem parmetros. Isto necessrio pois quem instncia um Managed Bean sempre o JSF. os atributos que forem expostos devem conter seus respectivos mtodos getter e setter. Por exemplo: Se tivermos o atributo private String nome; Devemos ter os mtodos private String getNome() { return nome;} e public String setNome (String nome) { this.nome = nome;}. Este um padro amplamente adotado em Java, logo a maioria das ferramentas IDE j possuem ferramentas que geram automaticamente estes mtodos. No exemplo a seguir podemos ver como a propriedade nome pode ser ligada no campo do .xhtml.
<h:inputText value=#{user.nome} />

O cdigo acima indica que o mtodo getter getNome do bean mapeado com o nome user, deve ser chamado quando o componente for renderizado (mostrado na tela), e o mtodo setter setNome deve ser chamado quando for processada a resposta do usurio.

Backing Beans
Em alguns casos conveniente desenvolver um bean que contenha alguns ou todos os objetos componentes de um formulrio web. Um bean desse tipo chamado de backing bean do formulrio web. Veja o exemplo abaixo:

public class UsuarioBean implements Serializable { private UIInput nomeField;

Neste caso o atributo link estar diretamente ligado a um campo do .xhtml atravs de um atributo binding, como mostrado abaixo:
<h:inputText value="#{usuario.nome}" binding="#{usuario.nomeField}"/>

Com isto voc tem um controle sobre o campo do formulrio, podendo controla-lo atravs deste atributo. Geralmente isto no necessrio, mas o mecanismo foi criado para casos em que est manipulao necessria.

Escopos dos Beans

Ao definir um Managed Bean tambm se define em que escopo ele deve atuar. Cada bean deve ser definido o escopo de acordo com a natureza do bean. Os escopos existentes so: Request View (Novo, existente apenas a partir do JSF 2) Session Application Vamos entender agora cada um destes escopos. Escopo Request (requisio) Neste escopo utilizado para beans que no necessitam armazenar dados entre requisies, pois ele comea quando um requisio HTTP submetida e termina quando a resposta enviada ao cliente. Escopo View Este escopo foi adicionado na verso 2, para preencher a lacuna entre o escopo de requisio e o de sesso. Neste escopo os valores so mantidos entre requisies enquanto este estiver navegando para o mesmo .xhtml. Isto muito util para pginas precisam manter os dados mesmo aps uma requisio, como por exemplo pginas de listagem, que devem manter os dados at que o usurio troque de pgina. Uma peculiaridade deste escopo que o bean ter que implementar Serializabe, uma vez que ele guarda o objeto para a proxima requisio. Escopo Session O escopo de sesso guardar o objeto seguindo o mesmo padro de session do Servlet. Isto quer dizer que enquanto o usurio manter o browser ligado com a sesso vlida os valores permanecero os mesmos. Funciona da mesma forma que Session de Servlets. Escopo Application Este o mais amplo dos escopos, assim como em Servlet, este escopo mantem os dados durante toda a existncia da aplicao, isto quer dizer que este objeto ser compartilhado entre todos os usurios. Deve se ter cuidado ao utilizar este escopo, pois no h separao dos dados entre as requisies de usurios diferentes.

Configurando Beans
Como vimos anteriormente, existem duas forma de configurar os beans, estas formas so por Annotations e por faces-config.xml. Apenas JSF 2 tme anotaes, ento quando se est trabalhando com verses anteriores a unica forma de configurao pelo arquivo facesconfig.xml.

Configurao por anotaes Para anotar um managed Bean possumos basicamente as seguintes anotaes: @ManagedBean(name="<NOME_DO_BEAN>") -> Anotao que indica que este objeto um ManagedBean e deve ser controlado pelo JSF, o parmetro que ele recebe o nome do ManagedBean que ser utilizado no .xhtml para variveis de ligao;

@RequestScope -> Indica que o bean ter o escopo de request; @ViewScope -> Indica que o bean ter o escopo de view; @SessionScope -> Indica que o bean ter o escopo de session; @ApplicationScope -> Indica que o bean ter o escopo de application.

A seguir temos um exemplo de Bean anotada, est bean ter nome de usurio e escopo de sesso. Nenhuma configurao adicional necessria no arquivo de xml.
@ManagedBean(name="usuario") @SessionScoped public class UsuarioBean { private String nome; public String getNome() { return nome; } public void setNome(String nome) { this.nome = nome; } }

Configurao por faces-config.xml A segunda forma de configurar um bean utilizando o arquivo faces-config.xml. Esta forma vlida tanto para JSF 1.2 quando JSF 2. Neste modo de configurao temos uma classe Java normal, apenas seguindo os padres de construtor e getters/setter explicados anteriormente. Em adio a isto temos a configurao deste bean no faces-config.xml, onde ser indicado o nome e escopo. Podemos ver no exemplo abaixo a mesma configurao mostrada acima por anotaes, porm agora utilizando o faces-config.xml. Classe Java:
public class UsuarioBean { private String nome; public String getNome() { return nome;

} public void setNome(String nome) { this.nome = nome; } }

faces-config.xml
<managed-bean> <managed-bean-name>usuario</managed-bean-name> <managed-bean-class> com.diehl.teste.bean.UsuarioBean </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>

O arquivo WEB-INF/faces-config.xml o padro utilizado para descritor de configuraes do JSF. No entanto, possvel tambm colocar informaes de configurao nos seguinte lugares: Nos arquivos /META-INF/faces-config.xml, dentro de quaisquer arquivos JAR carregados pelo classloader do contexto externo. Usa-se esse mecanismo quando se trabalha com componentes reutilizveis em um arquivo JAR.

Arquivos listados no parmetro de inicializao java.faces.CONFIG_FILES dentro de / WEB-INF/web.xml. Como no exemplo:

<web-app> ... <context-param> <param-name>javax.faces.CONFIG_FILES</param-name> <param-value> WEB-INF/navigation.xml, WEB-INF/beans.xml </param-value> </context-param> ...
</web-app>

Sintaxe das expresses de ligao de valor

Nesta seo, vista a sintaxe de expresses de ligao de valor detalhadamente. Vamos entender ento a expresso na forma a.b. Neste momento, assume-se que j conhecido o objeto a que a faz referencia. Se a um array, uma lista ou um map, ento algumas regras especiais devem ser aplicadas (veja a prxima sesso). Agora, se a qualquer outro objeto, ento bdeve ser o nome de uma propriedade de a. O significado exato de a.b depende se a expresso usada em modo rvalue ou modo lvalue. Esta terminologia usada na teoria das linguagens de programao para denotar que uma expresso do lado direito de uma equao tratada diferentemente de uma expresso do lado esquerdo. Considere a equao: left=right; O compilador gera cdigos para as expresses left e right. A expresso right avaliada como rvalue e gera um valor. A expresso left avaliada em modo lvalue e armazena um valor. O mesmo acontece quando usada uma expresso de ligao de valor em uma componente de interface de usurio: <h:inputText value=#{user.nome} /> Quando o campo texto for renderizado, a expresso user.nome avaliada em modo rvalue e o mtodo getNone chamado. Durante a decodificao, a mesma expresso avaliada em modo lvalue e o mtodo setNome chamado.

A expresso a.b em modo rvalue avaliada chamando-se o getter da propriedade, enquanto que a.b em modo lvalue chama o setter da propriedade. Usando chaves Como em JavaScript, possvel usar chaves em vez da notao com pontos. Como possvel ver abaixo, as trs expresses tm o mesmo significado: a.b a["b"] a['b'] Por exemplo, user.senha, user[senha] e user[senha] so expresses equivalentes. Mas por que escrever user[senha] se user.senha muito mais fcil e digitar?

So estes os motivos: Quando acessado um array, list ou mapa, a notao [] mais intuitiva;

possvel usar a notao [] com strings que contenham pontos ou traos, exemplo msgs[error.senha]; A notao [] permite computar dinamicamente uma propriedade, exemplo a[b.nome].

Usando expresses para Map e List possvel acessar valores de atributos Map e List de Managed Beans. JSF consegue, automaticamente, chamar os mtodos necessrios das interfaces para buscar ou settar os valores. Por exemplo, seja m um objeto de qualquer classe que implementa a interface Map, ento m[key] uma ligao ao valor associado. Em modo rvalue, o valor m.get(key) recuperado. Em modo lvalue, a declarao m.put(key, right) executada. Acima right o valor do lado direito que atribudo a m.key. possvel acessar um valor de qualquer objeto de uma classe que implemente a interface List. Deve-se especificar um ndice inteiro para a posio da lista. Por exemplo, a[i] ou a.i liga o i-simo elemento da lista a. Neste caso i pode ser um inteiro ou uma string que possa ser convertida em inteiro. Usando expresses compostas possvel utilizar um conjunto limitado de operadores dentro de expresses de ligao de valor: Operdores aritimticos: +, -, *, /, %. Os dois ltimos operadores possuem as variantes alfanumricas div e mod.

Operadores relacionais <, <=, >, >=, ==, != e suas variantes alfanumricas lt, le, gt, ge, eq, ne (as quatros primeiras so requeridas por motivos de segurana relativo ao XML). Operadores lgicos &&, ||, ! e as suas variantes alfanumricas and, ou, not (a primeira variante requerida por motivos de segurana do XML). O operador empty. A expresso empty a true se a for null, um array ou String de tamanho 0, ou uma Collection ou Map de tamanho 0.

Operador de seleo ternria ?. A precedncia dos operadores segue as mesmas regras do Java. Geralmente no deve-se fazer a maior parte da computao de expresses nas pginas web, pois isso viola a separao entre a apresentao e a lgica de negcios. Temos como exemplo de uso destes operadores, as regras especificas de apresentao, como por exemplo regras de apresentao de campos ou gerao de textos para a tela. O exemplo abaixo mostra que um texto deve ser apresentado apenas quando o atributo do bean estiver setado para mostrar. A maioria das tags de JSF possuem o atributo rendered, que indica se o componente deve ser mostrado na tela ou no. <h:inputText value="#{usuario.nome}" rendered="${config.mostrar}"/>

Outro exemplo a concatenao de atributos para apresentao na tela, como mostra o exemplo abaixo:
<h:outputText value="Bem-vindo ${usuario.sobrenome}, ${usuario.nome}!" />

Usando expresses de ligaes de mtodo.

Este tipo de ligao utilizada para chamar aes da bean, neste caso a expresso de ligao mapeada diretamente para o nome do mtodo no bean. Abaixo temos um exemplo tpico de ligao de mtodo:
<h:commandButton action="#{usuario.logar}" value="Login" />

Cdigo do .xhtml
public String logar () { //TODO implementar regras de negcio para login return "sucesso-login"; }

Mtodo no Managed Bean Os atributos de componentes que aceitam este tipo de ligao so: action validator actionListener valueChangeListener

Comunicao entre Beans

Algumas vezes necessrio acessar dados de um Managed Bean dentro de outro. Um exemplo se tivermos um UsuarioBean que seja de sesso. Neste bean teremos todos os dados do usurio logado, com isto ao chamar um mtodo de negcio que necessite do ID do usurio, por exemplo, precisamos recuperar o dado deste UsuarioBean. Para que isto seja feito podemos utilizar ManagedProperties, podemos fazer isto de duas formas, usando a Anotao @ManagedProperty por faces-config.xml.

Usando anotao ManagedProperty Esta anotao indicar que um atributo do seu bean ser mapeado a partir de uma varivel de ligao. O exemplo abaixo mostra como a classe CadastroBean receber o Managed Bean usuario:
@ManagedBean(name="cadastro") @RequestScoped public class CadastroBean { @ManagedProperty(value="#{usuario}") private UsuarioBean usuario; public void setUsuario(UsuarioBean usuario) { this.usuario = usuario; } }

Com este cdigo o atributo usurio ter a referncia ao bean.

Mapeando managed-property via faces-config.xml A segunda maneira de gerar esta referncia utilizando mapeamento por faces-config.xml. Desta forma temos que indicar qual atributo do ManagedBean dever receber o bean de acordo com a varivel de ligao. O Exemplo abaixo mostra o mesmo exemplo apresentado acima, entretando com o uso de faces-config.xml.
<managed-bean> <managed-bean-name>cadastro</managed-bean-name> <managed-bean-class>com.diehl.bean.CadastroBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>usuario</property-name> <value>#{usuario}</value> </managed-property> </managed-bean>

Mapeamento por faces-config.xml

public class CadastroBean { private UsuarioBean usuario; public void setUsuario(UsuarioBean usuario) { this.usuario = usuario; } }

Classe da bean sem as anotaes.

Navegaes

Objetivos

Entender como funcionam as navegaes Ver navegaes estticas Ver navegaes dinmicas Ver redirecionamento de pginas Ver regras de redirecionamento coringas Entender navegao implcita do JSF 2

Navegao Esttica
Consideremos o que acontece quando o usurio de uma aplicao web preenche um pgina. Toda a utilizao ou modificao acontece dentro do navegador do usurio. Quando ele clicar em um boto que envia os dados do formulrio, estas modificaes so transmitidas ao servidor. Nesse momento, a aplicao web analisa os dados do usurio e deve decidir qual pgina JSF ser utilizada para renderizar a resposta. O handler de navegao responsvel por este processo. Em aplicaes simples, a navegao entre pginas esttica. Ou seja ao clicarmos em um determinado boto sempre ter uma pgina fixa para renderizar a resposta. A configurao da navegao esttica fica no arquivo faces-config.xml, ou pode ser feita de forma implcita como ser mostrado adiante. Veja o exemplo abaixo:
<h:commandButton action="login" />

O valor do atributo action deve ser igual ao outcome da regra de navegao configurada para este boto, veja abaixo:
<navigation-rule> <from-view-id>/index.xhtml</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/welcome.xhtml</to-view-id> </navigation-case> </navigation-rule>

A regra acima diz, simplesmente, que a ao de login ser encaminhar para /welcome.xhtml caso tenha ocorrido dentro da pgina /index.xhtml. Observe que as strings from-view-id e to-view-id devem comear com uma /. A extenso deve coincidir com a extenso do arquivo (.xhtml), no com a extenso da URL. Se escolhermos as strings com cuidado, podemos agrupar vrias regras de navegao. Por exemplo, poderamos ter botes com a ao logout espalhados por todas as pginas de uma aplicao. Faramos com que todos estes botes naveguem para a pgina logout.jsp apenas configurando a seguinte regra:

<navigation-rule> <navigation-case> <from-outcome>logout</from-outcome> <to-view-id>/logout.xhtml</to-view-id> </navigation-case> </navigation-rule>

A regra acima se aplica a todas as pginas porque no foi especificado nenhum elemento fromview-id. Podemos, ainda, unir regras de navegao com o mesmo from-view-id. Como no exemplo abaixo:
<navigation-rule> <from-view-id>/index.xhtml</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/welcome.xhtml</to-view-id> </navigation-case> <navigation-case> <from-outcome>cadastro</from-outcome> <to-view-id>/cadastro.xhtml</to-view-id> </navigation-case> </navigation-rule>

Navegao dinmica
Na maioria dos casos precisamos de mais que apenas navegao esttica, precisamos decidir para onde ir de acordo com regras de negcio. Para isto existe a navegao dinmica. Esta basicamente implentada em mtodos de action (aqueles chamados pelo atributo action na view). Estes mtodos de action devem retornar um String que o nome do from-outcome. Com isto o JSF saber qual pgina deve ser renderizada. Pra implementarmos a navegao dinmica, o boto de submisso deve ter uma referencia a um mtodo, veja o exemplo abaixo:
<h:commandButton action="#{usuario.logar}" value="Login" />

No managed bean o mtodo de action ser:

public String logar () { if (logado) { return "sucesso-login"; } else { return "falha-login"; } }

Com isto a deciso de qual pgina deve ser apresentada estar definida no Managed Bean, que s mostrar sucesso caso o usurio esteja logado. Em resumo, abaixo esto listados os passos que so executados sempre que o usurio clica em um boto de comando cujo atributo action seja uma referncia a um mtodo: O bean especificado recuperado;

O mtodo referenciado chamado; A string resultante enviada ao handler de navegao; O handler procura a pgina seguinte.

Redirecionamento
Se adicionarmos um elemento redirect aps to-view-id, o container JSP termina a requisio atual e envia um redirecionamento HTTP ao cliente. A resposta do redirecionamento diz ao cliente qual URL usar para a prxima pgina. Redirecionar um pgina um processo mais lento que reencaminhar (forwarding), porque preciso mais uma viagem de ida e volta ao navegador. No entanto o ato de redirecionar d ao navegador a chance de atualizar o seu campo de endereo. Abaixo um exemplo do uso do redirect:
<navigation-rule> <from-view-id>/helloworld.xhtml</from-view-id> <navigation-case> <from-outcome>proximo</from-outcome> <to-view-id>/cadastro.xhtml</to-view-id> <redirect></redirect> </navigation-case> </navigation-rule>

Usando Coringas
Podemos usar coringas no elemento from-view-id de uma regra de navegao, veja exemplo:
<navigation-rule> <from-view-id>/secure/*</from-view-id> <navigation-case> ... </navigation-case> </navigation-rule>

A regra acima se aplica a todas as pginas que comecem com o prefixo /secure/. Somente permitido usar um nico * e ele deve estar no fim da string ID. Se houver mais regras de coringas coincidentes, a combinao mais longa usada.

Navegao implcita no JSF 2

A partir do JSF 2 foi adicionado a navegao implcita. Este recurso permite as regras de navegao sem a configurao no arquivo faces-config.xml. O funcionamento deste bem simples, a navegao feita utilizando o nome do arquivo .xhtml, a nica coisa que deve ser feita utilizar na action o mesmo nome do arquivo .xhtml sem a extenso. Veja o exemplo abaixo:
<h:commandLink action="cadastro" value="Ir para cadastro" />

logo dever existir o seguinte arquivo: WebContent/cadastro.xhtml Caso o arquivo esteja em uma sub-pasta, devemos utilizar a seguinte notao:
<h:commandLink action="public/cadastro" value="Ir para cadastro" />

Neste exemplo deveremos ter o arquivo WebContent/public/cadastro.xhtml.

Mensagens

Objetivos

Trabalhar com mensagens em JSF Entender o funcionamento do mecanismo de mensagens Trabalhar com mensagens a partir do cdigo Java.

Ententendo as mensagens no JSF

Durante o ciclo de vida JSF, qualquer objeto pode criar uma mensagem e adiciona-la a uma fila de mensagens mantida pelo contexto dos arquivos de configurao do JSF. No final do ciclo de vida, na fase de Renderizar Resposta, podemos exibir mensagens em um .xhtml. Estas mensagens podem estar associadas a um campo especfico ou ento ser uma mensagem global. Existem quatro tipos de mensagens no JSF, estes so: Informao

Advertncia Erro

Fatal Todas as mensagens podem conter um resumo e um detalhamento. entretanto no .xhtml pode ser configurado o que deve ser mostrado. Um exemplo poderia ser resumo "Dados invlidos" e o detalhamento poderia ser "O valor deve conter apenas caracteres alfanumricos". Para mostrar as mensagens so utilizadas duas tags que so: h:messages - Mostra todas as mensagens que foram adicionadas na fila de mensagens durante o ciclo de vida JSF.

h:message - Mostra uma nica mensagem para o um componente definido. o atributo for desta tag indica de qual campo devem ser apresentadas as mensagens.

Carregar mensagens de um arquivo Resource Bundle

Os arquivos de resource bundle (.properties) geralmente so usados para armazenar as mensagens estticas e mensagens de erro de uma aplicao JSF. Para carregar o resource bundle com dados estticos pode-se: Registrar o resource bundle na aplicao: adicionando o resource bundle dentro do arquivo de configurao do JSF;

Carregando o resource bundle: em cada pgina com a tag loadBundle. Como no exemplo: <f:loadBundle var=msg basename=pacote.messages/>

O atributo basename corresponde ao caminho completo do arquivo .properties, que nesse caso ele est dentro do pacote messages e possui o nome de Resources. O atributo var um alias (atalho) para a instncia do objeto resource bundle. Ele utilizado dentro das tags da pgina corrente. Para referenciar dados estticos de um resource bundle utiliza-se expresses de valores como mostrado abaixo:
<h:outputText value="#{msg.nome}" />

Muitas vezes em resource bundles as chaves dos valores utilizam "." (ponto). Neste caso devese utilizar a notao com parnteses :
<h:outputText value="#{msg['nome.label']}" />

Referenciando mensagens de erro

O JSF possui mensagens de erro padro para as validaes e converses, que podem ser customizadas pelo desenvolvedor.

As mensagens padro de validao podem ser sobreescritas no arquivo de properties utilizando as chaves pr-definidas. O exemplo abaixo traduz as chaves padro para o portugus:
#Override default JSF messages javax.faces.component.UIInput.CONVERSION=Converso de erro ocorrida javax.faces.component.UIInput.REQUIRED=Valor requerido javax.faces.component.UISelectOne.INVALID=Este valor no uma opo vlida javax.faces.component.UISelectMany.INVALID=Este valor no uma opo vlida javax.faces.validator.NOT_IN_RANGE=Atributo especificado no est entre os valores esperados de {0} e {1} javax.faces.validator.DoubleRangeValidator.MAXIMUM=Este valor muito maior que o mximo permitido de {0} javax.faces.validator.DoubleRangeValidator.MINIMUM=Este valor muito menor que o mnimo permitido de {0} javax.faces.validator.DoubleRangeValidator.TYPE=Este valor no do tipo correto javax.faces.validator.LengthValidator.MAXIMUM=Este valor muito maior que o mximo permitido de {0} javax.faces.validator.LengthValidator.MINIMUM=Este valor muito menor que o mnimo permitido de {0} javax.faces.validator.LongRangeValidator.MAXIMUM=Este valor muito maior que o mximo permitido de {0} javax.faces.validator.LongRangeValidator.MINIMUM=Este valor muito menor que o mnimo permitido de {0} javax.faces.validator.LongRangeValidator.TYPE=Este valor no do tipo correto

O desenvolvedor pode sobrescrever as mensagens padro de cada componente de interface, adicionando uma referncia s mensagens de resource bundle personalizado nos seguintes atributos: converterMessage: Referncia a uma mensagem que exibida quando o valor do campo no for convertido corretamente;

requiredMessage: Referncia a uma mensagem que exibida quando o valor do campo no for preenchido;

validatorMessage: Referncia a uma mensagem que exibida quando o campo no for validado corretamente. Abaixo um exemplo do atributo requiredMessage usando expresso de valor para referenciar a mensagem:
<h:inputText id="nome" size="50" required="true" requiredMessage="#{msg.nomeObrigatorio}"/> <h:message styleClass="error-required" for="nome" />

Componentes JSF

Objetivos

Conhecer as tags do JSF Criao de formulrios Uso de painis

Tags do JSF
A criao de .xhtml requer conhecimento das tags do JSF e de HTML. Para utilizarmos as tags do JSF precisamos importa-las, na definio do arquivo .xhtml. A gerao feita pelo plugin JBoss Tools, j faz a insero das principais bibliotecas. Vamos ver a estrutura bsica do .xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head></h:head> <body> </body> </html>

Como pode ser visto na tag html as bibliotecas so carregadas, neste exemplo foram carregas as bibliotecas de html, core e facelets. Conforme o uso de outros componentes necessrio fazer a carga da biblioteca especfica.

As tags fundamentais s existem para dar suporte as tags HTML. A tabela abaixo mostra estas tags.
Tag Facet Atribute Param ActionListener valueChangeListene r Converter convertDateTime ConvertNumber Validator validateDoubleRang e ValidateLength validateLongRange LoadBundle Selectitems Selectitem Verbatim Descrio Adiciona uma faceta a umcomponente Adiciona um atributo (key/value) a um componente Adiciona um parmetro a um componente Adiciona um listener de ao a um componente Adiciona Adiciona Adiciona Adiciona Adiciona um um um um um listener de mudana de valor a um componente conversor arbitrrio a um componente conversor de data e hora a um componente conversor numrico a um componente validador a um componente

Valida uma range dupla para um valor de um componente Valida a extenso de um valor de um componente Valida uma rage longa para um valor Carrega um resource bundle, armazena propriedades como um Mapa Especifica itens para um componente select one ou select many Especifica um item para um componente select one ou select many Adiciona cdigo markup a uma pgina JSF

As tags HTML do JSF representam o seguintes tipos de componentes: Inputs

Outputs Comandos

Seleo

Outros A categoria outros inclui formulrios, mensagens e componentes que geram layout para outros componentes.

A tabela abaixo mostra as tags HTML. Tag Descrio Form Formulrio HTML InputText Controle de entrada de texto de uma nica linha InputTextarea Controle de entrada de texto de vrias linhas InputSecret Controle de entrada de senha InputHidden Campo escondido OutputLabel Rotulao de outro componente para melhor acessibilidade OutputLink ncora HMTL Tag igual ao outputText, mas que formata mensagens OutputFormat compostas OutputText Sada de texto de uma nica linha commandButton Botes: submit, reset ou pushbutton CommandLink Link que age como um pushbutton Message Exibio da mensagem mais recente de um componente Messages Exibio de todas as mensagens GraphicImage Exibio de uma imagem selectOneListbox Caixa de listagem para seleo de um nico item SelectOneMenu Menu para seleo de um nico item SelectOneRadio Conjunto de botes de radio selectBooleanCheckbo x Caixa de verificao selectManyCheckbox Conjunto de caixas de verificao selectManyListbox Caixa de listagem para seleo de vrios itens selectManyMenu Menu para seleo de vrios itens PanelGrid Tabela HTML PanelGroup Dois ou mais componente que so dispostos como um s DataTable Controle de tabela com muitas funes

Atributos comuns
Existem 3 tipos de atributos que so compartilhados na maioria das tags de componentes HTML, estes 3 tipos so: bsicos, HTML 4.0 e eventos DHTML. Vamos ve-los a seguir:

Atributos bsicos Os atributos bsicos so aqueles de controle do JSF ou de estilos. Segue a tabela abaixo com eles: Atributo Descrio Id Identificador de um componente Referncia a um componente que pode ser usado em um Binding backing bean Rendered Atributo boolean; se falso interrompe a renderizao StyleClass Nome da classe CSS Um valor de um componente, normalmente uma ligao de Value valor valueChangeListener ligao a um mtodo que reponde a mudanas de valor Converter Nome da classe do conversor Nome da classe de um validador que criado e vinculado a Validator um componente Atributo booleano; se verdadeiro, exige a insero de um Required valor no campo associado ID O atributo ID funciona como um identificador nico do componente, com ele possvel referenciar tanto no .xhtml quanto no Java o componente. O ID de componente deve ser sempre nico, do contrrio o JSF ir lanar uma exceo. Implicitamente todos os componentes tem um ID, caso no seja setado o atributo, o JSF gerar um ID automatico. Alm disto o ID pode ser utilizado para referenciar o componente a partir de um Javascript. Isto muito til em alguns casos em que se deseja criar script customizados em sua pgina. Um exemplo do uso necessrio de ID na apresentao de uma mensagem de erro especfica para um campo. Neste caso a tag message referenciar um ID do componente, como mostrado abaixo:
<h:inputText id="campoNome" value="#{usuario.nome}" /> <h:message for="campoNome"/>

possvel tambm acessar o componente no contexto Java utilizando o ID informado. Isto feito como mostra o exemplo abaixo:
UIComponent nome = FacesContext.getCurrentInstance().getViewRoot(). findComponent("form:campoNome");

Binding possvel criar um componente no Managed Bean que ser a representao do componente do .xhtml. Este tipo de ligao se d pelo atributo Binding. Na seo de Backing Beans foi mostrado um exemplo de como este atributo funciona. Value e ValueChangeListener O Atributo value existe nos componentes que apresentam dados na tela ou componentes de formulrio. Neste atributos pode-se colocar uma varivel de ligao para qualquer atributo do Managed Bean que contenha getter/setter. Este valor ser convertido para String e apresentado no componente. J o ValueChangeListener ir usar uma varivel de ligao que aponte para um mtodo do Managed Bean, com isto este mtodo ser chamado quando o componente html sofrer alterao de valor. Cabe salientar que este mtodo chamado apenas aps a submisso do form e no no evento onchange DHTML.

Converter e Validator Estes atributos indicam qual ser o componente de validao e de converso. Estes componentes fazem o trabalho de converter o valor do formulrio, que sempre String, na representao correta do Managed Bean, e ainda validar se o valor informado vlido ou no. Rendered e styleClass O atributo rendered utilizado quando temos que suprimir algum componente da tela condicionalmente. ele espera uma expresso de ligao que deve retornar true ou false. Em caso de false o componente no renderizado na tela. J o styleClass simplesmente a representao do atributo class de cdigo HTML padro, ele indica qual classe CSS deve ser utilizada no componente.

Atributos HTML 4.0 As tags HTML JSF tm atributos pass-through HTML 4.0 apropriados. Os valores desses atributos so enviados diretamente ao elemento HTML gerado. Por exemplo, <h:inputText value="#{form.name.last}" size="25" .. ./> gera o seguinte HTML: <input type="text" size="25" .. ./>. Perceba que o atributo size passado diretamente para o HTML. O atributos do HTML 4.0 esto definidos na especificao HTML, que voc pode acessar na Internet em http://www.w3.org/TR/REC-html40. Este site um excelente recurso para estudos aprofundados sobre o HTML.

Atributos Eventos DHTML Os scripts cliente so teis para vrios tipos de tarefas, como por exemplo a validao de formulrios, e esses so fceis de usar com o JSF. O JSF oferece suporte aos atributos de eventos DHTML para quase todas as tags HTML JSF, veja a tabela abaixo com o atributos existentes. Atributo Descrio Onblur O elemento perde foco Onchange O valor do elemento muda Onclick O boto do mouse c1icado sobre o elemento ondblclick O boto do mouse c1icado duas vezes sobre o elemento onfocus O elemento recebe foco onkeydown Uma tecla pressionada onkeypress Uma tecla pressionada e subseqentemente solta onkeyup Uma tecla solta onmousedown O boto do mouse pressionado sobre o elemento onmousemove O boto do mouse se move sobre o elemento onmouseout O mouse sai da rea do elemento onmouseover O mouse se move para cima do elemento onmouseup O boto do mouse solto onreset O formulrio resetado (limpo) onselect Algum texto selecionado em um campo de entrada onsubmit O formulrio submetido

Uso dos componentes com Javascript

O JSF baseado em componentes do lado do servidor, entretanto tambm possvel utilizar script do lado cliente para tarefas especficas. O exemplo abaixo mostra como um javascript consegue acessar os dados de um campo JSF.
<body> <h:form id="cadastroForm"> Digite seu nome: <h:inputText id="campoNome" value="#{usuario.nome}" /> <h:commandLink onclick="return msg(document.getElementById('cadastroForm'));" value="teste" /> </h:form> </body> <script language="javascript"> function msg(formulario) { alert(formulario["cadastroForm:campoNome"].value); return false; } </script>

Exibindo imagens
Existe uma tag no JSF que gera o HTML <img src="..."/>. Logo para exibir imagens do sistema esta deve ser usada, conforme mostrada abaixo:
<h:graphicImage value="/images/test.jpg" />

Componentes de Formulrio
A montagem de formulrios deve ser feita com a utilizao dos componentes JSF especificos. A seguir veremos cada um destes componentes e como Utiliza-los. InputText Utilizado para gerar um campo texto de formulrio. Gera um html do tipo: <input type="text" ... /> A tag a ser utilizada : <h:inputText value="${bean.campo1}" /> InputSecret Este componente renderiza um campo de senha no HTML. Um campo senha como um campo texto s que apresenta uma mascar (*) ao invs do contedo que est sendo digitado. Gera um cdigo html do tipo: <input type="password" .../> A tag a ser utilizada : <h:inputSecret value="#{bean.senha}" /> InputTextarea Um textarea um campo para digitar textos grandes pois ele possui mais do que uma linha. Basicamente uma caixa onde pode ser colocado texto. Gera um cdigo html do tipo: <textarea></textarea> A tag a ser utilizada : <h:inputTextarea value="#{bean.textarea" /> InputHidden Campo invisvel no formulrio que serve apenas para passar atributos no controlados pelo usurio atravs do formulrio. Gera um cdigo html do tipo: <input type="hidden" ....> A tag a ser utilizada : <h:inputHidden value="#{bean.escondido}" />

Checkboxes
Existem dois tipo de tags para criar componentes checkbox no JSF. Um para checkbox simples outra para grupos de checkboxes. Checkbox Simples Estes so os checkboxes de apenas uma opo do tipo sim ou no. Um exemplo de um destes checkboxes um campo do tipo "Deseja receber e-mail com informaes?" neste caso a resposta do usurio sim ou no. Este tipo de campo ser mapeado para um atributo no Managed Bean do tipo boolean. O uso da tag o seguinte:
<h:selectBooleanCheckbox value="#{bean.checkboxSimples}" />

Checkbox Multiplo Este componente gera um grupo de checkboxes, cada uma representa uma opo e no Managed Bean este componente representado por um List. Todas as opes selecionadas so adicionadas a esta lista. O exemplo abaixo mostra a configurao deste componente.
<h:selectManyCheckbox value="#{bean.checkboxComposto}">

<f:selectItem itemLabel="Item 1" itemValue="1"/> <f:selectItem itemLabel="Item 2" itemValue="2"/> <f:selectItem itemLabel="Item 3" itemValue="3"/> </h:selectManyCheckbox>

Na parte Java o atributo a ser mapeado seria:

private List<Integer> checkboxComposto;

No caso acima as opes esto descritas no prprio .xhtml. Caso as opes sejam dinmicas, elas podem ser carregadas de um Managed Bean. Basta que este tenha uma List<SelectItem> como mostra o exemplo abaixo:
<h:selectManyCheckbox value="#{bean.checkboxCompostoDinamico}"> <f:selectItems value="#{bean.listaValoresCheckbox}"/> </h:selectManyCheckbox>

Cdigo do .xhtml Na parte Java temos que ter uma lista de SelectItem, no exemplo abaixo est lista est sendo montada no Construtor, entretanto ela poderia ser montada buscando dados do banco.
private List<SelectItem> listaValoresCheckbox; public FormularioBean() { listaValoresCheckbox = new ArrayList<SelectItem>(); listaValoresCheckbox.add(new SelectItem(1, "Item 1")); listaValoresCheckbox.add(new SelectItem(2, "Item 2")); listaValoresCheckbox.add(new SelectItem(3, "Item 3")); }

Cdigo Java. Existe um atributo chamado layout que pode ser ou LINE DIRECTION (horisontal) ou PAGE DIRECTION(vertical). Este indica se as opes sero apresentadas lado a lado ou uma abaixo da outra.

RadioBoxes
Da mesma forma como foi representado um h:selectManyCheckbox, dever ser codificado o radio. O nome da tag para montar radio h:selectOneRadio. Est tag pode usar tanto vrios f:selectItem quando um f:selectItems. O exemplo mostra o uso da tag:
<h:selectOneRadio value="#{bean.radio}"> <f:selectItem itemLabel="Item 1" itemValue="1"/> <f:selectItem itemLabel="Item 2" itemValue="2"/> <f:selectItem itemLabel="Item 3" itemValue="3"/> </h:selectOneRadio>

Existe um atributo chamado layout que pode ser ou LINE DIRECTION (horisontal) ou PAGE DIRECTION(vertical).

Combos e Caixas de listagens

Existem ainda componentes para criao dos combos e das caixas de listagens. Estes componentes so renderizados para a TAG <SELECT > do HTML. Os tags dos componentes so: h:selectOneMenu e h:selectOneList -> Mostra um combobox para seleo de apenas uma opo h:selectManyMenu e h:selectManyList -> Mostra uma caixa com todas as opes permitindo que se seleciona multiplas As tags de menu adicionam o atributo size=1 ao elemento select. Essa definio de tamanho a nica coisa que diferencia menus de caixas de listagens.

Painis
Foi criado o conceito de painis, assim como existe em Swing, para facilitar a disposio dos componentes na tela. De fato estes painis geram tabelas HTML. Entretanto o uso destes agilizam o processo de criao da pgina. Basicamente em um painel indicado o numero de colunas. Os componentes vo sendo colocados lado a lado, da esquerda para a direita, at atingirem o numero de colunas, assim atingindo este total criada uma nova linha e o processo segue novamente. Vamos ver um exemplo:
<h:panelGrid columns="2" border="1"> <h:outputText value="texto linha <h:outputText value="texto linha <h:outputText value="texto linha <h:outputText value="texto linha </h:panelGrid> 1 1 2 2 coluna coluna coluna coluna 1" 2" 1" 2" /> /> /> />

O cdigo acima ir gerar o seguinte resultado:

Geralmente necessrio adicionar mais do que um componente dentro de uma clula, para fazer isto foi criado o h:panelGroup. Tudo que tiver dentro deste componente ser inserido dentro de uma clula. Veja o exemplo abaixo:
<h:panelGrid columns="2" border="1"> <h:panelGroup> <h:outputText value="texto <br/> <h:outputText value="Ainda </h:panelGroup> <h:outputText value="texto linha <h:outputText value="texto linha <h:outputText value="texto linha </h:panelGrid> linha 1 coluna 1" /> na celula 1" /> 1 coluna 2" /> 2 coluna 1" /> 2 coluna 2" />

DataTable
O Componente DataTable utilizado para mostrar dados vindos de uma List do ManagedBean. Geralmente estes dados so recuperados de uma fonte de dados como um banco de dados. O resultado desta tag a gerao de uma tabela HTML com os dados. O uso bsico deste componente se d como mostrado no exemplo abaixo:
<h:dataTable value="#{dtBean.items}" var="item"> <h:column> <h:outputText value="#{item.nome}" /> </h:column> <h:column> <h:outputText value="#{item.sobrenome}"/> </h:column> </h:dataTable>

Cdigo .xhtml E no Managed Bean temos:

private ListDataModel<ItemVO> items; public DataTableBean() { List<ItemVO> vos = new ArrayList<ItemVO>(); vos.add(new ItemVO("Daniel", "Diehl")); vos.add(new ItemVO("Claudio", "Silva"));

items = new ListDataModel<ItemVO>(vos); }

O atributo value representa os dados sobre os quais h:dataTable atua; esses dados devem ser um dos seguintes tipos: Um array

Uma instncia de java.util.List Uma instncia de java.sql.ResultSet Uma instncia de javax.servlet.jsp.jstl.sql.Result Uma instncia de javax.faces.model.DataModel

medida que h:dataTable atua, ela torna cada um dos itens no array, lista, conjunto de resultados, etc., disponvel dentro do corpo da tag. O nome de cada item especificado com o atributo var de h:dataTable. No fragmento de cdigo acima, cada (item) de uma coleo de (itens) disponibilizado, um de cada vez, medida que h:dataTable atua sobre a coleo. Usamse as propriedades do item atual para preencher as colunas da linha atual. recomendavel sempre utilizar DataModel para que se tenha maior controle sobre as iteraes efetuadas na lista. Cabealhos e Rodaps possivel adicionar linha de cabecalho e rodap na tabela. Para isto necessrio usar o mecanismo de FACET. Um facet uma tag que indica um contedo, no nosso caso header e footer. O exemplo abaixo mostra como colocar cabealho e rodap nas colunas.
<h:dataTable border="1" value="#{dtBean.items}" var="item"> <h:column> <f:facet name="header"> <h:outputText value="Nome" /> </f:facet> <f:facet name="footer"> <h:outputText value="Fim Nome" /> </f:facet> <h:outputText value="#{item.nome}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Sobrenome" /> </f:facet> <f:facet name="footer"> <h:outputText value="Fim Sobrenome" /> </f:facet> <h:outputText value="#{item.sobrenome}"/> </h:column> </h:dataTable>

Componentes em Tabelas possvel inserir componentes em um datatable. Qualquer componente JSF pode ser inserido em uma clula. Para mapear valores destes componentes pode ser utilizada a varivel de iterao definida como var na tag datatable. O Exemplo abaixo exemplifica o isto.

<h:dataTable border="1" value="#{dtBean.items2}" var="item"> <h:column> <f:facet name="header"> <h:outputText value="Texto" /> </f:facet> <h:outputText value="#{item.val}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Input" /> </f:facet> <h:inputText value="#{item.val}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Boto" /> </f:facet> <h:commandButton value="#{item.val}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Combo" /> </f:facet> <h:selectOneMenu value="#{item.val}"> <f:selectItem itemLabel="Item 1" itemValue="1"/> <f:selectItem itemLabel="Item 2" itemValue="2"/> </h:selectOneMenu> </h:column> </h:dataTable>

Adicionando estilos as linhas e colunas das tabelas O componente datatable permite adicionar estilos CSS tantos as linhas quando as colunas da tabela. Para que isto seja feito necessrio utilizar os atributos columnClasses e rowClasses. Estes parmetros recebem uma lista de styles separadas por vrgulas, cada style aplicado a coluna ou linha, na ordem que for definido. Se ao chegar ao fim desta lista ainda existir colunas ou linhas ele utilizar os estilos reiniciando a lista. Por exemplo considerando que temos uma tabela com 4 linhas e definimos dois estilos no rowClasses. ento a linha 1 receber o primeiro estilo, a linha 2 receber o segundo estilo, a linha 3 receber o primeiro estilo e a linha 4 receber o segundo estilo. Exemplo de utilizao dos estilos.
<h:dataTable border="1" value="#{dtBean.items}" var="item" columnClasses="colunasA, colunasB" rowClasses="linhas1, linhas2"> <h:column> <h:outputText value="#{item.nome}" /> </h:column> <h:column> <h:outputText value="#{item.sobrenome}"/> </h:column> </h:dataTable>

Estilos aplicados a tabela:

.colunasA .colunasA .linhas1{ .linhas1{ { background-color: cyan;} { background-color: brown;} font-size: 32px;} font-size: 10px;}

O resultado obtido :

Manipulando dados da tabela Uma vez que criamos um DataModel como fonte de dados temos acesso a informaes sobre os registros, qual registro foi clicado e podemos manipula-lo. Os mtodos abaixo exemplificam como seriam os mtodos para selecionar um registro na tabela e para excluir um item da tabela. Cdigo .xhtml
<h:form> Manipulando a tabela <h:dataTable border="1" value="#{dtBean.items}" var="item"> <h:column> <h:outputText value="#{item.nome}" /> </h:column> <h:column> <h:outputText value="#{item.sobrenome}"/> </h:column> <h:column> <h:commandLink value="Selecionar" action="#{dtBean.selecionar}" /> </h:column> <h:column> <h:commandLink value="Apagar" action="#{dtBean.deletar}" /> </h:column> </h:dataTable> </h:form>

Mtodos Java:
public void selecionar() { ItemVO item = items.getRowData(); System.out.println("Item selecionado foi: "+item); } public void deletar() { ((List<ItemVO>)items.getWrappedData()). remove(items.getRowIndex()); }

API javax.faces.model.DataModel oferece os seguintes mtodos: int getRowCount() - Retorna o nmero total de linhas, se esse nmero for conhecido; do contrrio, retorna -1. O ResultSetDataModel sempre retorna -1 a partir desse mtodo.

Object getRowData() - Retorna os dados associados com a linha atual. boolean isRowAvailable() - Retorna true se houver dados vlidos no ndice da linha atual. int getRowIndex() - Retorna o ndice da linha atual.

void setRowIndex( int index ) - Define o ndice da linha atual e atualiza a varivel com escopo definido que representa o item atual da coleo (essa varivel especificada com o atributo var de h:dataTable). void addDataModelListener( DataModelListener listener ) - Adiciona um listener que notificado quando o ndice da linha modificado.

void removeDataModelListener( DataModelListener ) - Remove um listener do

modelo de dados

void setWrappedData( Object obj ) - Define o objeto a ser empacotado pelo modelo de dados. Object getWrappedData() - Retorna os dados empacotados de um modelo de dados.

Validadores

Objetivos

Ententer mecanismo de validao Aprender como usar validadores padro Aprender como usar validadores customizados

Entendendo validadores JSF

difcil imaginar uma aplicao web que no faa validao de dados. Uma vez que a validao est em toda parte, ela deveria ser fcil de usar e de se estender. O JavaServer Faces atende a estes requisitos, pois fornece validadores padro e por oferecer um mecanismo simples para implementarmos nossos prprios validadores. Alm disto em casos especficos possvel criar seus prprios validadores que tero as regras de acordo com cada aplicao. A parte principal na validao proteger o modelo. Pelo fato do JSF usar fases separadas para processar validaes e atualizar valores de modelos, podemos assegurar que o modelo no atualizado de forma inconsistente caso algumas das entradas no possa ser validada.

Utilizando validadores padro

O mecanismo de validao do JSF bastante simples de ser utilizado, a validao padro se d atravs do uso de tags especficas colocadas no corpo do campo de entrada de valor. O exemplo abaixo mostra a uma validao de tamanho do contedo aplicada sobre um campo.
<h:form> Campo 1: <h:inputText label="Campo 1" id="input1" value="#{bean.campo1}"> <f:validateLength maximum="6"/> </h:inputText> <font color="red"> <h:message for="input1"/> </font> <br/><br/> <h:commandButton value="enviar"/> </h:form>

Apenas com a tag f:validateLength, o JSF faz validao se o nmero de caracteres do campo maior que o maximo indicado. Os validadores padres que temos so: Atributo Tag JSP Classe do Validador s Validao mini mum, f:validateDoubleRang DoubleRangeValidato maximu Um valor double dentro de e r m uma faixa opcional mini mum, maximu Um valor long dentro de f:validateLongRange LongRangeValidator m uma faixa opcional mini mum, Uma String com um nmero maximu mnimo e mximo de f:validateLength LengthValidator m caracteres Um expresso regular para f:validateRegex RegexValidator pattern validao do campo

Marcando um campo como obrigatrio

possvel tambm marcar um campo como required, assim o validador verificar se tem algum contedo no campo, caso o campo esteja vazio a validao falha. Para fazer isto necessrio apenas colocar o atributo required="true" no campo como mostra o exemplo abaixo.
<h:inputText label="Campo 1" id="input1"

value="#{bean.campo1}" required="true"/>

Tambm possvel configurar a mensagem padro de erro desta validao setando o atributo requiredMessage com a mensagem desejada. Como mostrado a seguir:
<h:inputText id="input4" value="#{bean.campo1}" required="true" requiredMessage="Campo obrigatrio" /> <font color="red"> <h:message for="input4"/> </font>

Usando BeanValidation (JSF2) A verso 2 do JSF adicionou possibilidade do uso das validaes disponiveis na JSR303. Com isto apenas anotando os atributos da Bean com anotaes @NotNull, @Max, @Min @Length e @Pattern a validao ser automaticamente feita, no necessitando configurar na view. Estas anotaes no precisam estar diretamente no Managed Bean, se tivermos um atributo que seja um objeto no nosso Managed Bean e dentro deste objeto tivermos atributos anotados a validao ser feita tambm necessrio adicionar os jars de hibernate validation 4 ou superior, pois estes possuem a implementao da JSR. Uma vez anotadas as classes automaticamente a validao ser feita, caso no se queria fazer a validao descrita na anotao necessrio indicar explicitamente na view com a tag <h:validateBean disabled="true"/> Vamos ver agora um exemplo completo desta validao. Managed Bean:
@ManagedBean(name="beanValidation") @SessionScoped public class BeanValidationBean { private TesteVO vo = new TesteVO(); public void acao() { System.out.println("Entrou na acao"); } public TesteVO getVo() { return vo; } public void setVo(TesteVO vo) { this.vo = vo; } }

TesteVO (Neste exemplo as anotaes de validao esto neste objeto):

public class TesteVO { @NotNull(message="Campo1 requerido") @Length(min=1, message="Campo Obrigatrio") private String campo1 = null; @NotNull(message="Campo2 requerido") @Max(value=10, message="Campo passou do tamanho") private int campo2; public String getCampo1() { return campo1; } public void setCampo1(String campo1) { this.campo1 = campo1; } public int getCampo2() {

return campo2; } public void setCampo2(int campo2) { this.campo2 = campo2; } }

Arquivo .xhtml:
<h:form> campo 1: <h:inputText id="campo1" value="#{beanValidation.vo.campo1}" /> <h:message for="campo1"/> <br/> campo2: <h:inputText id="campo2" value="#{beanValidation.vo.campo2}"> <f:validateBean disabled="true"/> </h:inputText> <h:message for="campo2"/> <br/><br/> <h:commandButton value="enviar"/> </h:form>

Neste exemplo temos um objeto TesteVO que contm as anotaes de validao, no Managed Bean, temos um atributo que do Tipo TesteVO, e no .xhtml os atributos deste, so referenciados como inputs. Tambm podemos verificar que o campo2 est com a tag f:validateBean indicando que no deve fazer a validao. As anotaes possveis para este tipo de validao esto descritas abaixo:

Constraint

Description

@AssertFalse O valor do campo deve

ser falso. O valor do campo deve ser verdadeiro. @DecimalMax O valor deve ser um decimal menor ou igual au numero incicado na anotao. @DecimalMin O valor deve ser um decimal maior ou igual au numero incicado na anotao. @Digits O Valor deve ter at o valor indicado.
@AssertTrue @Future @Max

Example @AssertFalse(message="Visto Negado") boolean souTerrorista;

@AssertTrue(message="Tem queAceitar") boolean aceite; @DecimalMax(value="30.00", message="muito desconto") BigDecimal desconto; @DecimalMin(value="5.00", message="desconto muito baixo") BigDecimal desconto; @Digits(integer=6, fraction=2, message="preco invalido") BigDecimal preco; @Future (message="Deve ser data futura") Date dataEvento; @MAX(value=10, message="quantidade excedida") int quantidade;

O valor deve ser uma data no futuro. O valor deve ser um integer menor ou igual ao valor indicado na anotao.

@Min

@NotNull @Null

O valor deve ser um integer maior ou igual ao valor indicado na anotao. O valor no pode ser nulo O valor tem que ser nulo O valor deve ser uma data no passado. O valor deve respeitar a expresso regular O valor tem que estar entre o limite informado na anotao Valor tem que ter o numero de caracteres indicado na tag

@MIN(value=5, message="quantidade baixa") int quantidade; @NotNull(message="Campo nulo) Int idade; @Null(message="Campo tem que ser nulo") String comentarios; @Past(message="data tem que ser passada") Date aniversario; @Pattern(regexp="\\(\\d{3}\\)\\d{3}-\\d{4}", message="Numero invlido) String telefone; @Size(min=2, max=240, message="problemas") String mensagem; @Length(min=2 max=40, message="problemas") String mensagem;

@Past

@Pattern

@Size

@Length

Pulando a validao
Como vimos nos exemplos anteriores, os erros de validao e converso foram uma reexibio da pgina atual. Esse comportamento pode ser problemtico com certas aes de navegao. Suponhamos que, por exemplo, adicionamos um boto Cancel a uma pgina que contenha campos obrigatrios. Se o usurio simplesmente clicar em Cancel, deixando um campo obrigatrio em branco, o mecanismo de validao entra em ao e fora a pgina atual ser re-exibida. Para contornarmos este problema temos disposio um mecanismo para desviar de certas fases. Se um comando tem o atributo immediate definido, esse comando executado durante a fase Aplicar Valores de Requisio.
<h:commandButton value="cancelar" immediate="true"/>

Mensagens de erro para validaes padro

Os erros de validao so tratados da mesma forma que os erros de converso. Uma mensagem adicionada ao componente cuja validao falhou, o componente invalidado e a pgina atual re-exibida imediatamente aps a fase Processar Validaes ter sido finalizada. As tags h:message ou h:messages exibem os erros de validao. Podemos anular as mensagens de validao padro mostradas na tabela abaixo. Para isso defina um message bundle para a sua aplicao e fornea mensagens com as chaves apropriadas. Chave Mensagem Padro javax.faces.component.UIInput.CONVERSION Converso de erro ocorrida javax.faces.component.UIInput.REQUIRED Valor requerido Este valor no uma opo javax.faces.component.UISelectOne.INVALID vida Este valor noo uma opo javax.faces.component.UISelectMany.INVALID vlida Atributo especificado no est entre os valores javax.faces.validator.NOT_IN_RANGE esperados de {0} e {1} javax.faces.validator.DoubleRangeValidator.MAXIMU Este valor muito maior que M o mximo permitido de {0} javax.faces.validator.DoubleRangeValidator.MINIMU Este valor muito menor que M o mnimo permitido de {0} Este valor no do tipo javax.faces.validator.DoubleRangeValidator.TYPE correto Este valor muito maior que javax.faces.validator.LengthValidator.MAXIMUM o mximo permitido de {0} Este valor muito menor que javax.faces.validator.LengthValidator.MINIMUM o mnimo permitido de {0} Este valor muito maior que javax.faces.validator.LongRangeValidator.MAXIMUM o mximo permitido de {0} Este valor muito menor que javax.faces.validator.LongRangeValidator.MINIMUM o mnimo permitido de {0} Este valor no do tipo javax.faces.validator.LongRangeValidator.TYPE correto

Validadores customizados
J vimos como os validadores funcionam e como configurar a aplicao para fazer validao padro. Entretanto existem algumas validaes que necessitam ser codificadas especficamente para a aplicao, para isto foi criada a possibilidade de desenvolver novos validadores. Existem duas maneiras de definir um validador, por anotao e por faces-config.xml. A nica coisa que muda onde estar descrito o validador. O exemplo de configurao abaixo mostra como seria definido no faces-config.xml um validador. O exemplo completo ser mostrado usando anotao, muito embora a configurao ser igual com exceo do mapeamento (anotao ou faces-config.xml)
<validator> <validator-id>CPFValidator</validator-id> <validator-class> com.diehl.customvalidator.CPFValidator </validator-class> </validator>

Verso faces-config.xml
@FacesValidator("CPFValidator") public class CPFValidator implements Validator {

Verso com anotao Para implementar seu prprio validador apenas necessrio criar uma classe que implemente Validator. Com isto voc ser obrigado a implementar o mtodo:
validate(FacesContext ValidatorException ctx, UIComponent cmpt, Object valor) throws

Neste mtodo voc deve lanar uma ValidatorException se a validao falhar, caso contrrio o sistema considerar que a validao foi bem-sucedida. A seguir temos um exemplo de validao de CP F, usando anotaes.

Classe Java do validador:

@FacesValidator("CPFValidator") public class CPFValidator implements Validator { @Override public void validate(FacesContext ctx, UIComponent cmpt, Object valor) throws ValidatorException { if (!validaCPF(String.valueOf(valor))) { FacesMessage message = new FacesMessage(); message.setSeverity(FacesMessage.SEVERITY_ERROR); message.setSummary(ResourceBundle.getBundle( FacesContext.getCurrentInstance(). getApplication().getMessageBundle()). getString("erro.validacao.cpf")); throw new ValidatorException(message); } } /** * Valida CPF do usurio. No aceita CPF's padres como * 11111111111 ou 22222222222 * * @param cpf String valor com 11 dgitos */ private static boolean validaCPF(String cpf) { //remove pontos e tracos cpf = cpf.replaceAll("\\.", ""); cpf = cpf.replaceAll("-", ""); if (cpf == null || cpf.length() != 11 || isCPFPadrao(cpf)) return false; try { Long.parseLong(cpf); } catch (NumberFormatException e) { // CPF no possui somente nmeros return false; } if (!calcDigVerif(cpf.substring(0, 9)). equals(cpf.substring(9, 11))) { return false; } return true; } /** * * @param cpf String valor a ser testado * @return boolean indicando se o usurio entrou com um * CPF padro */ private static boolean isCPFPadrao(String cpf) { if (cpf.equals("11111111111") || cpf.equals("22222222222")|| cpf.equals("33333333333") || cpf.equals("44444444444")|| cpf.equals("55555555555") || cpf.equals("66666666666")|| cpf.equals("77777777777") || cpf.equals("88888888888")|| cpf.equals("99999999999")) { return true; } return false;

} private static String calcDigVerif(String num) { Integer primDig, segDig; int soma = 0, peso = 10; for (int i = 0; i < num.length(); i++) soma += Integer.parseInt(num.substring(i, i + 1)) * peso--; if (soma % 11 == 0 | soma % 11 == 1) primDig = new Integer(0); else primDig = new Integer(11 - (soma % 11)); soma = 0; peso = 11; for (int i = 0; i < num.length(); i++) soma += Integer.parseInt(num.substring(i, i + 1)) * peso--; soma += primDig.intValue() * 2; if (soma % 11 == 0 | soma % 11 == 1) segDig = new Integer(0); else segDig = new Integer(11 - (soma % 11)); return primDig.toString() + segDig.toString(); } }

Cdigo .xhtml
<h:form> CPF: <h:inputText id="cpf" value="#{customBean.cpf}"> <f:validator validatorId="CPFValidator" /> </h:inputText> <h:message for="cpf"/> <br/> <h:commandButton value="Validar" /> </h:form>

Conversores

Objetivos

Entender o funcionamento dos conversores Aprender a utilizao de conversores padro Aprender a criar conversores customizados

Entendendo os conversores
As aplicaes web armazenam dados de muitos tipos, mas a interface web do usurio lida exclusivamente com strings. Supomos que o usurio precise editar um objeto Date que esteja armazenado na lgica de negcios. Primeiramente, o objeto Date convertido em uma string que enviada ao cliente navegador para ser exibido dentro de um campo texto, o usurio ento edita o campo texto, a string resultante retornada ao servidor e de ser convertida de volta para um objeto Date. A mesma situao se aplica, tambm, para tipos primitivos como int, double ou boolean. O usurio da aplicao web edita strings, e o container JSF precisa converter a string para o tipo requerido pela aplicao.

Conversores padro
A grande parte das converses so feitas de acordo com o tipo do atributo no Managed Bean, entretanto alguma vezes necessrio indicar alguns parmetros para a converso padro. Existem duas tags que so utilizadas para converso padro, estas so: f:convertNumber -> Converte nmeros indicando formatao, tipo (inteiro ou no), nmero mximo de digitos, etc. Os atributos desta Tag so: Atributo Tipo Valor Type String number (padro), currency ou percent Padro de formatao, conforme definido em Pattern String java.text.DecimalFormat maxFractionDigi ts Int Nmero mximo de dgitos na parte fracionria minFractionDigit s Int Nmero mnimo de dgitos na parte fracionria maxIntegerDigit s Int Nmero mximo de dgitos na parte inteira minIntegerDigits Int Nmero mnimo de dgitos na parte inteira Verdadeiro se somente a parte inteira for parsed integerOnly Boolean (padro:false) Verdadeiro se separadores de grupos forem usados groupingUsed Boolean (padro:false) Java.util.Loca Localizao cujas preferncias devem ser usadas Locale le para parsing e formatao Cdigo monetrio ISSO 4217 a ser usado ao se currencyCode String converter valores de moeda Smbolo monetrio a ser usado ao se converter currencySymbol String valores de moeda

f:convertDateTime -> Faz converso de datas levando em conta o locale e padro

de formatao. Os atributos desta tag so: Atributo Tipo Type String dateStyle String timeStyle String Pattern Locale timeZone

Valor date (padro), time ou both default, short, medium, long ou full default, short, medium, long ou full Padro de formatao, conforme definido em String java.text.SimpleDateFormat Localizao cujas preferncias devem ser java.util.Locale usadas para parsing e formatao java.util.TimeZon Fuso horrio a ser usado para parsing e e formatao

Vamos agora ver um exemplo destas tags:

<h:form> Valor: <h:inputText id="campo" value="#{converterBean.valor}"> <f:convertNumber maxFractionDigits="2" groupingUsed="true" locale="pt_BR"/> </h:inputText> <h:message for="campo"/> <br/> Data: <h:inputText id="data" value="#{converterBean.data}"> <f:convertDateTime pattern="dd/MM/yyyy"/> </h:inputText> <h:message for="data"/> <br/><br/> <h:commandButton value="submeter"/> </h:form>

Conversores customizados
Algumas vezes precisamos de alguma converso mais especfica para a aplicao, para isto podemos criar conversores de acordo com a necessidade. Existem duas formas de se configurar um converter, a primeira indicar para que classe (forClass) este conversor ir atuar, assim sempre que um atributo do Managed Bean for deste tipo a converso ser aplicada. A segunda forma indicar um ID para o converter, neste caso necessrio adicionar a tag f:converter no componente desejado dentro do .xhtml para especificar quando o converter deve ser utilizado. Para codificao de um converter, em ambas formas, necessrio criar uma classe que implemente converter e colocar a anotao @FacesConverter. Tambm possvel usar o facesconfig.xml ao invs da anotao. Esta classe ter que implementar dois mtodos. O primeiro o getAsObject que receber uma String e tem que transformar para a representao de Object. O segundo o getAsString que receber um objeto e deve retornar a representao String. Vamos ver agora exemplos de conversores. Converso por classe (forClass) A converso por classe faz com que no seja necessria nenhuma codificao especfica no .xhtml, necessrio apenas a criao da classe conversora, sempre que um atributo de Managed Bean for acessado que seja do tipo indicado no forClass o conversor ser utilizado. Abaixo temos um exemplo completo deste conversor. Classe Java conversora:

@FacesConverter(forClass=SexoEnum.class) public class SexoConverter implements Converter { public Object getAsObject(FacesContext ctx, UIComponent cmpt, String valor) { try { return SexoEnum.getByCode(valor); } catch (EnumConstantNotPresentException e) { throw new ConverterException(new FacesMessage("Sexo invlido")); } } public String getAsString(FacesContext ctx, UIComponent cmpt, Object objeto) { if (!(objeto instanceof SexoEnum)) throw new ConverterException(new FacesMessage("Objeto no seco vlido")); return ((SexoEnum)objeto).getCode(); } }

Alternativamente ao uso da anotao @FacesConverter pode ser utilizada a abordagem de colocar as seguintes linhas no faces-context.xml
<converter> <converter-for-class> com.diehl.constant.SexoEnum </converter-for-class> <converter-class> com.diehl.converter.SexoConverter </converter-class> </converter>

ManagedBean:
@ManagedBean(name="customBean") @SessionScoped public class CustomConverterBean { private SexoEnum sexo; public SexoEnum getSexo() { return sexo; } public void setSexo(SexoEnum sexo) { this.sexo = sexo; } }

.XHTML:
<h:form> Digite o sexo(M/F): <h:inputText value="#{customBean.sexo}"> </h:inputText> <h:commandButton value="Enviar"/> <h:messages style="font-color:red;" /> </h:form>

SexoEnum:
public enum SexoEnum { MASCULINO("M", "Masculino"),

FEMININO("F", "Feminino"); private String code; private String name; private SexoEnum(String code, String name) { this.code = code; this.name = name; } public String getName() { return name; } public String getCode() { return code; } public static SexoEnum getByCode(String code) { SexoEnum[] values = SexoEnum.values(); for (int i = 0; i < values.length; i++) { if(values[i].getCode().equals(code)) return values[i]; } throw new EnumConstantNotPresentException(SexoEnum.class, code+ " not found"); } }

O exemplo mostrado ir ler o valor do inputText e, ao submeter o formulrio, ir chamar o mtodo getAsObject para decrobrir qual o item da Enum foi escolhido. No momento de mostrar na tela o sistema chamar o mtodo getAsString buscando o valor em String para aquele valor do Enum. Converso por ID (name) A segunda forma de converso utilizando um nome de converso e indicando explcitamente no .xhtml quando quiser utilizar o conversor. Este tipo de converso interessante quando no se quer aplicar globalmente, mas apenas em alguns momentos. Vamor ver agora um exemplo. Classe Java conversora:
@FacesConverter("sexoConverter") public class SexoConverter implements Converter { public Object getAsObject(FacesContext ctx, UIComponent cmpt, String valor) { try { return SexoEnum.getByCode(valor); } catch (EnumConstantNotPresentException e) { throw new ConverterException( new FacesMessage("Sexo invlido")); } } public String getAsString(FacesContext ctx, UIComponent cmpt, Object objeto) { if (!(objeto instanceof SexoEnum)) throw new ConverterException( new FacesMessage("Objeto no seco vlido")); return ((SexoEnum)objeto).getCode(); } }

Alternativamente pode ser utilizada a configurao por faces-config.xml ao invs da anotao:

<converter>

<converter-id>sexoConverter</converter-id> <converter-class> com.diehl.converter.SexoConverter </converter-class> </converter>

Arquivo .xhtml:
<h:form> Digite o sexo(M/F): <h:inputText value="#{customBean.sexo}"> <f:converter converterId="sexoConverter"/> </h:inputText> <h:commandButton value="Enviar"/> <h:messages style="font-color:red;" /> </h:form>

O Managed Bean e a classe SexoEnum so os mesmos mostrados na seo anterior.

Eventos e Listeners

Objetivos

Mostrar Eventos do Ciclo de Vida Ver Eventos de Mudana de Valor Mostrar Eventos de Ao O uso das Tags Event Listener Eventos de Fase

Eventos do ciclo de vida

O JSF oferece suporte a trs tipos de eventos, os quais so: Eventos de mudana de valor

Eventos de ao

Eventos de fase Eventos de mudana de valor so iniciados por componentes de entrada, tais como: h:inputText, h:selectOneRadio e h:selectManyMenu, quando o valor do componente modificado e o formulrio que o contm submetido. Eventos de ao so iniciados por componentes de comando, por exemplo h:commandButton e h:commandLink, quando o boto ou link ativado. Eventos de fase normalmente so iniciados pelo ciclo de vida do JSF. Se desejarmos manipular eventos, precisamos ter um entendimento bsico desse ciclo. Requisies em aplicaes JSF so postas em ao pela aplicao JSF, normalmente com um servlet controlador, que por sua vez executa o ciclo de vida JSF.

Eventos de mudana de valor

Eventos de mudana de valor so aplicados a componentes de entrada de dados de formulrio como h:inputText h:selectOneCheckbox e etc.. Para utilizar um evento deste tipo necessrio usar o atributo valueChangeListener no .xhtml e criar um mtodo no Managed Bean que receba um ValueChangeEvent. O exemplo abaixo exemplifica isto. Cdigo Managed Bean:
@ManagedBean(name="eventosBean") @SessionScoped public class EventosBean { public void idiomaListener(ValueChangeEvent event) { FacesContext fc = FacesContext.getCurrentInstance(); if (((String)event.getNewValue()).equals("BR")) { fc.getViewRoot().setLocale(new Locale("pt_BR")); } else { fc.getViewRoot().setLocale(Locale.US); } } }

Cdigo .xhtml:
<f:loadBundle var="msg" basename="com.diehl.message.messages"/> <h:form> Idioma: <h:selectOneMenu onchange="form.submit();" valueChangeListener="#{eventosBean.idiomaListener}"> <f:selectItem itemLabel="Portugues" itemValue="BR"/> <f:selectItem itemLabel="English" itemValue="EN"/> </h:selectOneMenu> <br/> <h:outputText value="#{msg.bemvindo}" /> </h:form>

Eventos de ao Os eventos de ao so iniciados por componentes de comando como botes, links, etc.. Quando o componente ativado, os eventos de ao so iniciados durante a fase Invocar Aplicao, quase no fim do ciclo de vida. Normalmente, vinculam-se listeners de ao aos componentes de comando nas pginas JSF. Por exemplo, voc pode adicionar um listener de ao a um link desta forma:
<h:commandButton actionListener="#{managedBean.methodListener}" />

Os componentes de comando submetem requisies quando so ativados, de modo que no h necessidade de se usar onchange a um listener de ao para forar submisses, como fizemos com os eventos de mudana de valor. Quando ativamos um command ou link, o formulrio que o contm submetido e a aplicao JSF consequentemente inicia eventos de ao. importante distinguir a diferena entre listeners de ao e aes. Resumidamente, as aes trabalham para a lgica de negcios e participam do handling de navegao, enquanto que os listeners de ao normalmente executam a lgica da interface e no participam do handling de navegao. Os listeners de ao frequentemente trabalham em conjunto com as aes quando uma ao precisa de informaes sobre a interface do usurio. Vamos agora a um exemplo onde so adicionados Listeners a botes para descobrir qual o ltimo boto foi clicado.

Cdigo Managed Bean:

@ManagedBean(name="actionListenerBean") @SessionScoped public class ActionListenerBean { private String ultimoClicado; public void clickListener(ActionEvent event) { UICommand cmpt = ((UICommand)event.getSource()); String val = (String) cmpt.getValue(); if (val.equals("Brasil")) { ultimoClicado = "Brasil"; } else if (val.equals("EUA")) { ultimoClicado = "Estados Unidos"; } else { ultimoClicado = ""; } } public String getUltimoClicado() { return ultimoClicado; } public void setUltimoClicado(String ultimoClicado) { this.ultimoClicado = ultimoClicado; } }

Cdigo .xhtml:
<h:form> <h:commandButton value="Brasil" actionListener="#{actionListenerBean.clickListener}" /> <h:commandButton value="EUA" actionListener="#{actionListenerBean.clickListener}"/> <br/><br/> Ultimo clicado: <h:outputText value="#{actionListenerBean.ultimoClicado}"/> </h:form>

Tags f:actionListener e f:valueChangeListener

Alm das formas mostradas anteriormente possvel tambm utilizar listeners adicionando as tags f:actionListener e f:valueChangeListener no corpo dos componentes no .xhtml. Com isto ao invs de utilizar um mtodo do Managed Bean, devem ser criadas classes que implementem ActionListener ou ValueChangeListener. A vantagem de usar esta abordagem que podemos colocar mais de um listener em um componente. Tambm com isto o cdigo do listener ficar separado em um arquivo s dele. Vamos ver como ficaria o exemplo anterior utilizando esta abordagem:

Cdigo ManagedBean:
@ManagedBean(name="actionListenerBean") @SessionScoped public class ActionListenerBean { private String ultimoClicado; public String getUltimoClicado() { return ultimoClicado; }

public void setUltimoClicado(String ultimoClicado) { this.ultimoClicado = ultimoClicado; } }

Cdigo do BotaoListener (classe listener):

public class BotaoListener implements ActionListener { public void processAction(ActionEvent event) throws AbortProcessingException { UICommand cmpt = ((UICommand)event.getSource()); String val = (String) cmpt.getValue(); ActionListenerBean bean = (ActionListenerBean) JSFUtils.getManagedBean("actionListenerBean"); if (val.equals("Brasil")) { bean.setUltimoClicado("Brasil"); } else if (val.equals("EUA")) { bean.setUltimoClicado("Estados Unidos"); } else { bean.setUltimoClicado(""); } } }

cdigo .xhtml:
<h:form> <h:commandButton value="Brasil"> <f:actionListener type="com.diehl.listener.BotaoListener"/> </h:commandButton> <h:commandButton value="EUA"> <f:actionListener type="com.diehl.listener.BotaoListener"/> </h:commandButton> <br/><br/> Ultimo clicado: <h:outputText value="#{actionListenerBean.ultimoClicado}"/> </h:form>

Phase Listeners
Os Phase Listener so listeners exclusivos para filtrar e executar cdigos em determinada fase, ou todas, do ciclo de vida JSF. Com um phase listener possvel controlar o ciclo de vida e mudar o fluxo, abortando algumas fases. O phase listener bastante usado para autenticao, pois possvel interceptar uma requisio e verificar se o usurio est logado, se no estiver h como abortar o processo e redireciona-lo para uma pgina de login. Para criar um PhaseListener deve-se criar uma classe que implemente PhaseListener e anota-la com @FacesPhaseListener (ou adicionar <phase-listener> no faces-config.xml). Esta classe ter que implementar os seguintes mtodos:
public void beforePhase(PhaseEvent event) -> Mtodo que ser executado antes da fase. public void afterPhase(PhaseEvent arg0)-> Cdigo que ser executado aps a fase public PhaseId getPhaseId() -> Deve retornar em que fase este listener deve rodar. Deve retornar uma das constantes de PhaseId.