Curso JSF

JSF
JavaServer Faces, um Framework Web no padro MVC como o objetivo de simplificar a construo de interfaces com o usurio para aplicaes Java Web e fazer componente UI reutilizvel fcil de implementar. Ao contrrio da verso anterior da JSF, para a verso 2.0 quase tudo declarado no arquivo faces-config.xml, alm disso foi disponibilizada a permisso para usar anotaes para navegao declarada, foi proposto o CDI Bean, o que torna o desenvolvimento mais fcil e mais rpido. JSF uma excelente tecnologia JAVA no campo de desenvolvimento de aplicaes Web. Este o melhor lugar para passar conceitos JSF de maneira fcil e sequencial.
Verso 1.0
Apostila destinada ao curso com carga horria de 32 (trinta e duas) horas
Curso JSF
Sumrio
1. JavaServer Faces..................................................................................................................4 Caractersticas da JSF...........................................................................................................4 2. Ajax com JSF..........................................................................................................................6 Enviar uma solicitao do Ajax..............................................................................................6 Renderizar a viso parcial.....................................................................................................6 Processar a viso parcial.......................................................................................................7 Outro Exemplo.......................................................................................................................8 3. Navegao...........................................................................................................................10 Navegao esttica e dinmica...........................................................................................10 Navegao Esttica.............................................................................................................11 Navegao Dinmica...........................................................................................................13 Outros detalhes....................................................................................................................14 Especificar wild-cards......................................................................................................15 4. Facelets................................................................................................................................16 Por que usar Facelets?........................................................................................................16 JSF 2 Templating com exemplo Facelets............................................................................17 1. Layout do modelo........................................................................................................17 2. Cabealho, Contedo e Rodap.................................................................................18 3. Utilizando template......................................................................................................20 5. Richfaces..............................................................................................................................22 Baixar os RichFaces............................................................................................................22 Adicionar as bibliotecas RichFaces para o projeto..............................................................22 Registrar o RichFaces no web.xml......................................................................................22 managed bean.....................................................................................................................24 Demonstrao dos Componentes.......................................................................................25 6. Primefaces............................................................................................................................28 Caractersticas do PrimeFaces............................................................................................28 Aplicativo Exemplo...............................................................................................................28 7. Validao e Converso........................................................................................................36 Fases do Ciclo de Vida........................................................................................................37 Sobre o atributo imediato.................................................................................................37 Um exemplo de trabalho......................................................................................................38 Converso............................................................................................................................38 Um conversor para cada ocasio....................................................................................39 Conversores Personalizados...........................................................................................39 Validao..............................................................................................................................42 Validao e o Ciclo de Vida da JSF e seus componentes..............................................42 Padro de Validao........................................................................................................43 8. JSF e Spring.........................................................................................................................44 Lado Spring..........................................................................................................................44 Lado Java Server Faces......................................................................................................45 Spring Beans no ambiente JSF...........................................................................................45
S G A S 9 1 0 , B l o c o D , sa l a s , 2 3 7 a 2 4 3 , M i x Pa r k S u l A s a S u l , B ra s l i a / D F C E P : 7 0 . 3 9 0 - 1 0 0 Fo n e / Fa x : ( 6 1 ) 3 2 4 4 - 2 5 1 0 3 2 4 2 - 4 3 3 9
2 de 50
Curso JSF
Apoio da API para a integrao...........................................................................................46 9. JSF e Seam 2.......................................................................................................................47 Integrao com JSF com EJB 3.0.......................................................................................47 Integrao com AJAX...........................................................................................................47 10. Formulrio Master/Detail....................................................................................................49
3 de 50
Curso JSF
1. JavaServer Faces
Quais so as razes que iniciaram o projeto JSF e porque est to falado estes dias? H razes para o desenvolvimento de um novo framework apesar das muitas tecnologias j existentes como JSP, Servlets, Struts, entre outras. Ao desenvolver aplicaes complexas Web baseadas em JSP, existe um problema enfrentado com essas tecnologias. Vejamos uma lista de alguns dos problemas enfrentados com as tecnologias anteriores, como JSP e Servlets: Codificao tediosa e repetitiva Tecnologias anteriores, como JSP obrigam ao programador realizar um monte de codificao tediosas e repetitivas. Trabalhar diretamente com HTTP Request e HTTP Response Usar estas tecnologias os programadores trabalham diretamente com um solicitao HTTP e responde com objetos que manipula os registros. Por exemplo se o usurio submete o formulrio de inscrio, em seguida, o programador escreve o cdigo para obter os valores de cada elemento na forma em que uma varivel realiza um posterior processamento. Quando existe a necessidade de recuperar os registros no banco de dados e, em seguida, mostrar no formulrio de edio, ento, neste caso, o programador escreve o cdigo para recuperar o registro no banco de dados e em seguida, defina os valores nos formulrios. No disponibilidade de IDE outro grande problema que afeta o custo programadores produtividade e desenvolvimento dos aumentos projetos.
JSF muda esse cenrio, fornecendo uma estrutura intuitiva para os desenvolvedores. Alm disso, JSP uma especificao na qual muitos fornecedores esto desenvolvendo suas prprias implementaes. Ambas as implementaes livres e comerciais de JSF esto disponveis estes dias. Pode-se escolher qualquer um deles com base em sua necessidade e oramento. Agora, em alguns dias os fornecedores de software estaro desenvolvendo uma IDE para o desenvolvimento de aplicativos baseados em JSF que uma boa notcia para os iniciantes. Uma vez que familiarizado com os conceitos fundamentais do JSF pode-se iniciar o desenvolvimento de projetos de software usando qualquer IDE disponvel no mercado. Estas mudanas permitem que o programador torne seu trabalho muito mais fcil. JSF um componente de estrutura orientada e dirigida a eventos para aplicaes Web. Facilita o desenvolvimento de GUI para aplicaes Web. JSF permite que os programadores trabalhem com as interfaces extensveis como botes, caixas de texto, caixas, entre outras. O programador escreve o cdigo para um determinado evento, tais como o boto clicado. Isto faz com que a programao seja muito mais fcil e agora no h necessidade de escrever uma requisio e lgica de processamento de resposta.
Caractersticas da JSF
Uma das caracterstica principais do JSF que no s foi projetado para a codificao por
4 de 50
Curso JSF
parte dos especialistas, mas para: Autores de Pginas Web designers possuem a experincia com arte grfica. Podem observar e sentir o projeto de aplicao web em HTML/JSP utilizando bibliotecas de marcas personalizadas de JSF. Desenvolvedores de Aplicativos podem integrar este projeto com componentes de interface do usurio. objetos de programa, iniciadores de eventos, conversores, validadores. Desenvolvedores de Componentes podem construir componentes de interface personalizados por causa da natureza extensvel e personalizvel da JSF. Podem criar seus prprios componentes diretamente de classes de componentes de interface do usurio ou estender os componentes padro do JSF. Arquitetos de Aplicativos responsveis pela criao de aplicativos Web. Definio de navegao de pgina, garantindo escalabilidade para a aplicao, configurando registro o objeto bean so os principais pontos que um arquiteto de aplicativos trata. Fornecedores de Ferramentas JSF bem adequado para os fornecedores de ferramentas, por exemplo, Sun Java Studio Creator uma ferramenta de desenvolvimento de aplicativos, que fornecem ferramentas que tiram vantagens do JSF para criar interface do usurio mais fcil.
Muitos dos frameworks de desenvolvimento Web surgiram aps uma fundamentada existncia de Servlet e JSP. Struts surgiu como uma estrutura padro de aplicativos Web. Tornou-se um framework padro, porque chegou mais cedo no mercado e com as caractersticas necessrias, e os concorrentes tiveram que adicionar os recursos que faltavam para o Struts para obterem sucesso. Assim, tornou-se necessrio para Java o advento de um novo framework padro como um modelo de componente poderoso. Esta foi a principal razo para o desenvolvimento da tecnologia JSF. Ento o principal propsito de desenvolver a JSF, foi criar uma coleo de APIs para os componentes de interface com a capacidade de gerir seus estados, manipular os eventos e validao. Struts possui a opo de migrar para JSF. A opo mais simples usar os componentes. Isto permite tirar proveito de componentes de terceiros. A principal caracterstica da JSF a facilidade de uso. Torna o desenvolvimento de aplicaes Web mais fcil e mais rpido do que em outros frameworks porque suporta componentes de interface do usurio e uma fcil manipulao de eventos. Possui componentes construdo por terceiros que pode reduzir o custo de reescrever os elementos existentes e minimizar o tempo de desenvolvimento.
5 de 50
Curso JSF
2. Ajax com JSF

Conforme colocado na capa desta a JSF 2.0 foi uma grande atualizao sobre a JSF 1.2, uma das adies mais importantes para essa verso foi quanto ao suporte padro para Ajax. Muitos conceitos e caractersticas so realizados ao longo do RichFaces. JSF vem com uma tag que fornece a funcionalidade Ajax. A tag chamada de <f:ajax>. Vamos dividir o uso desta tag em trs partes: 1. Enviar uma solicitao para o Ajax; 2. Renderizar a viso parcial; 3. Processar a viso parcial.
Enviar uma solicitao do Ajax

JSF vem com uma tag para enviar uma solicitao do Ajax. Esta tag realmente um comportamento do lado cliente, e implica no ser utilizado isoladamente em uma pgina, sempre adicionado uma tag filha (comportamento) para outro componente da interface do usurio (ou pode at mesmo envolver vrios componentes). Usaremos um simples aplicativo para demonstrar essa utilizao:
<h:form> <h:panelGrid> <h:inputText value="#{bean.texto}"> <f:ajax event="keyup"/> </h:inputText> <h:outputText id="texto" value="#{bean.texto}" /> </h:panelGrid> </h:form>
No trecho de cdigo acima devemos tomar cuidado ao disparar uma solicitao Ajax com base no evento onkeyup. Observe que o nome real do evento keyup. Este cuida de em disparar uma solicitao do Ajax. Em seguida, precisamos descobrir como fazer o processamento da viso parcial.
Renderizar a viso parcial

Em JSF 1.2 (e sem RichFaces) cada pedido retorna uma viso. No necessitamos preocupar com que partes da viso JSF queremos atualizar. O conceito bsico por trs de Ajax atualizar apenas as partes da pgina que realmente precisam. Para conseguir isso, devemos informar esses componentes para o servidor cuja marcao iremos atualizar no navegador. O que tudo isto significa? Agora precisamos especificar quais componentes de viso queremos retornar. Uma viso parcial processada pelo servidor. Uma parcela atualizada e enviada como XML para o navegador onde o DOM atualizado. Este exemplo no apenas um componente com o texto id. A tag tem um atributo de renderizao que aponta para o ID do componente para renderizar a volta. Poderia tambm ser uma EL (Expression Language). Somando-se ao nosso exemplo, se pareceria com isso:
6 de 50
Curso JSF
<h:inputText value="#{bean.texto}" > <f:ajax event="keyup" render="texto"/> </h:inputText> <h:outputText id="texto" value="#{bean.texto}" />
Ao usar RichFaces, o mesmo atributo chamado reRender. O evento que especificado atravs do atributo deve ser um no qual o componente pai suporta. Ao visualizar o HTML gerado, teremos:
<input id="j_idt5:j_idt7" type="texto" name="j_idt5:j_idt7" onkeyup="mojarra.ab(this, event, 'keyup', 0, 'j_idt5:texto')" />
Processar a viso parcial

Ao especificar um evento que no est disponvel no componente pai, uma mensagem de erro ser exibida ao executar a pgina. Vejamos agora o cdigo do bean:
@ManagedBean(name = "bean") public class Bean { private String texto; // Mtodos padro GET e SET }
Vamos supor que tambm queremos mostrar e atualizar um contador com o comprimento do texto. Adicionar um nova propriedade no bean:
private Integer tamanho; // Mtodos padro GET e SET
Tambm adicionamos um mtodo ouvinte Ajax para realizar a contagem, observe que o mtodo recebe um objeto da classe AjaxBehaviorEvent:
public void tamanhoListener(AjaxBehaviorEvent event) { tamanho = texto.length(); }
Atualizar a pgina:
<h:inputText value="#{bean.texto}" > <f:ajax event="keyup" render="texto tamanho" listener="#{bean.tamanhoListener}"/> </h:inputText> <h:outputText id="texto" value="#{bean.texto}" /> <h:outputText id="tamanho" value="#{bean.tamanho}" />
Adicionamos um identificador para tamanho, use espao como um separador. No exemplo acima, especificamos que o mesmo deve disparar uma solicitao Ajax e temos de especificar um evento. Se no for especificado, cada componente da interface do usurio tem um evento padro na qual o pedido Ajax usaria para enviar. A tag <h:inputText>, o padro evento Ajax o evento onchange. Nosso exemplo, no entanto, funcionaria, s que ao em vez de onkeyup, teria que usar a tecla tab ou sair do campo de entrada para disparar a requisio Ajax.
7 de 50
Curso JSF
Outro Exemplo
Agora que j estamos familiarizados como o Ajax funciona vejamos esse outro exemplo, comecemos pelo Bean:
import javax.faces.event.ActionEvent; import javax.faces.model.ManagedBean; import javax.faces.model.SessionScoped; @ManagedBean(name="calcula") @SessionScoped public class Calcula { private Integer conta = 0; public Integer getConta() { return conta++; } public void reset(ActionEvent ae) { conta = 0; }
Neste exemplo temos um contador para criarmos um simples aplicativo como um cronmetro. Um bean simples utilizado para armazenar a contagem, bem como increment-la e redefini-la.
<!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"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <title>Ajax</title> </h:head> <h:body> <h:form id="form1" prependId="false"> <h:outputScript name="jsf.js" library="javax.faces" target="head"/> <h:outputText id="cta" value="#{calcula.conta}"/> <br/>  <h:commandButton id="btContar" value="Contar" onclick="jsf.ajax.request(this, event, {execute: this.id, render: 'cta'}); return false;"/> <br/>  <h:commandButton id="btReiniciar" value="Reiniciar" onclick="jsf.ajax.request(this, event, {execute:'reset', render: 'cta'}); return false;" actionListener="#{calcula.reset}"/> </h:form> </h:body> </html>
8 de 50
Curso JSF
Neste formulrio temos trs widgets: Um outputText e dois CommandButtons. O "cta" tem o contedo do valor da contagem. "btContar" adiciona um elemento ao contador a "cta" e reprocessa apenas o campo, ou seja, no h recarga completa da pgina. Da mesma forma, "btReiniciar" redefine o valor do contador para 0. A tag <h:outputScript> informa que devemos incluir a biblioteca ajax em nossa pgina. Isto necessrio para a chamada para o response de jsf.ajax.request. O mesmo texto de sada "cta" o alvo do ajax, no contm qualquer marcao fora do comum. Temos "btContar" no qual o mtodo onclick faz duas aes: Uma chamada jsf.ajax.request Retornar false. O retorno falso, para aqueles que no conhecem JavaScript, significa que no deve executar a submisso do formulrio.
A chamada jsf.ajax.request, possui tem trs parmetros: 1. O objeto de chamada 2. O evento de chamada. 3. O ltimo parmetro um objeto JavaScript com duas propriedades - uma executa a propriedade, que tem a lista de ids de todos os componentes JSF que vamos executar - j que estamos executando este boto, vamos inclu-lo na lista como 'this.id'. A segunda propriedade todos os componentes JSF que queremos atualizar que neste caso, apenas "cta. Por ltimo, temos o boto btReiniciar com o evento onclick praticamente idntico, mas no h um atributo adicional, "actionListener". Desde j estamos executando um 'reset', que significa que o JSF vai chamar esse mtodo como parte do boto.
9 de 50
Curso JSF
3. Navegao
O modelo de navegao JSF tanto declarativa quanto programtica, ou seja, a navegao pode ser configurada estaticamente em tempo de implantao ou dinamicamente durante o tempo de execuo de uma aplicao Web. Navegao de pgina para a aplicao JSF tratado atravs de regras de navegao em um arquivo de configurao. A navegao pode especificar qual o componente que inicia a solicitao de Web, qual componente Web controla a resposta, e que valor faz com que a navegao para seguir o fluxo. At agora, vimos uma navegao apenas com base no valor da sequncia codificada de um atributo action. Tambm podemos controlar a navegao usando as expresses de ligao de valor e mtodo de ligao de expresses. Navegao, em seguida, depende do valor da expresso.
Navegao esttica e dinmica

Ao controlar a navegao atravs de valores de String do atributo action, o caminho de navegao deve ser conhecido quando o aplicativo implantado. Chamamos isso de Navegao Esttica, porque o fluxo determinado estaticamente e no modificado. Sendo o mesmo para cada solicitao. Quando usamos a navegao esttica, codificamos explicitamente um valor para o atributo ao de uma Custom tag JSF. Ao definir as regras de navegao em um arquivo de configurao. A regra especifica o fluxo de navegao quando o <from-outcome> de uma pgina coincide com o valor do atributo action. Quando isso ocorre, a navegao flui para o <to-view-id> especificado. Estes elementos so parte de um elemento de regra de navegao em um arquivo de configurao, o faces-config.xml. Ao controlar a navegao atravs do valor de expresses de ligao ou mtodos de ligao de expresses, o caminho de navegao no conhece quando o aplicativo implantado. Na verdade, o fluxo de navegao pode variar de acordo com a solicitao pedida, dependendo do valor da expresso. Chamamos isso de Navegao Dinmica. Para uma navegao dinmica, usamos uma expresso de valor de ligao ou o mtodo de ligao de expresso, como o valor do atributo action. Com um valor de expresses de ligao, o valor da propriedade deve ser do tipo String. Com o mtodo de expresses de ligao, o mtodo no obtm parmetro e retorna um valor do tipo String:
public String search();
O valor String retornado pelo mtodo comparado ao valor especificado na regra de navegao para determinar aonde o fluxo de controle deve ir. Resumidamente: Navegao Esttica recomendado quando a sada de uma pgina conhecido com antecedncia e sempre mais fcil prever a sada da pgina atual. Navegao Dinmica quando a sada da pgina atual altamente imprevisvel e a sada depende, principalmente, a execuo de alguma regra de negcio.
10 de 50
Curso JSF
Navegao Esttica
Como mencionado anteriormente, se a resposta da pgina conhecido antecipadamente, ento este tipo de navegao pode ser escolhido. Tomemos um exemplo para ilustrar isso. Vamos exibir uma pgina da Web (a pgina de login) que solicita a entrada do usurio como o nome de usurio e a senha. Uma vez que esses valores so inseridos e o formulrio enviado, em seguida, uma pgina de boas-vindas exibida. Aqui sabe-se que o resultado da pgina de login sempre a pgina de boas vindas. login.jsp
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <html> <head> <title>Aplicao de Login</title> </head> <body> <h1>Aplicao de Login</h1> <f:view> <h:form> <p>Login: <h:inputText value="#{LoginBean.username}" id="usernameTextField" required="true"/> <h:message for="usernameTextField" /> </p> <p>Senha: <h:inputSecret value="#{LoginBean.password}" id="passwordTextField" required="true"/> <h:message for="passwordTextField" /> </p> <h:commandButton value="Submit Values" action="loginWelcome"/> </h:form> </f:view> </body> </html>
Contm os campos de entrada do usurio para usurio e senha mostrada a seguir. Um boto est ligado na extremidade da forma de apresentao da informao pedido para o servidor. LoginBean.java
package net.javabeat.articles.jsf.navigation; public class LoginBean { private String username; private String password; public LoginBean() { } public String getUsername() {
11 de 50
Curso JSF
return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } }
A classe UserBean encapsula o nome de usurio e senha para as propriedades que detm a informao solicitada. O nome do usurio e os valores da senha digitada pelo usurio ser mapeada diretamente para UserBean.username e UserBean.password atravs de '#{UserBean.username}' as expresses e '#{UserBean.password}'. faces-config.xml
<?xml version='1.0' encoding='UTF-8'?> <faces-config version="1.2" 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_1_2.xsd"> <managed-bean> <managed-bean-name>LoginBean</managed-bean-name> <managed-bean-class> net.javabeat.articles.jsf.navigation.LoginBean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <description></description> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>loginWelcome</from-outcome> <to-view-id>/loginWelcome.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>
Este arquivo de configurao contm uma entrada de definio do bean gerenciado por LoginBean atravs do elemento "managed-bean. Em seguida, vem a parte mais importante que est relacionada ao Tratamento da navegao. Definimos a regra de navegao para a pgina login.jsp atravs dos elementos de regra de navegao fromview-id. A presena de from-view-id que a regra ser aplicvel para o resultado da pgina login.jsp. Em seguida, definimos um elemento interno chamado de navegao que define uma sada possivelmente o nico para a pgina atual. Note a presena de elementos from-outcome e to-view-id.
12 de 50
Curso JSF
O valor LoginWelcome representa um dos resultados lgicos da pgina login.jsp. O valor para to-view-id aponta para a pgina de resposta seguinte a ser exibida. Para resumir, se a pgina atual login.jsp e no resultado da pgina "loginWelcome, ento a prxima pgina a ser exibida a loginWelcome.jsp.
Navegao Dinmica
Vejamos como controlar o comportamento de uma navegao dinmica nesta seo. Vamos estender o exemplo acima para fazer isso. Neste momento, exibmos uma pgina de sucesso de login quando o nome de usurio e senha so valores combinados 'guest', mais uma pgina de falha de logon exibida. Como os valores so inseridos pelo usurio apenas no tempo de execuo, a prxima exibio a ser exibida no pode ser prevista. Isto significa que o ponto de vista seguinte a ser selecionado depende da execuo de alguma regra de negcios no cdigo. Adicione o seguinte mtodo na classe LoginBean:
public String nextPage() { if (username.equals("guest") && password.equals("guest")) { return "loginSuccess"; } return "loginFailure"; }
O mtodo nextPage() determina a prxima pgina a ser exibida com base nos valores do nome de usurio e a senha. Se tanto o nome de usurio e senha 'guest' uma pgina de sucesso de login ser exibida. Estamos retornando loginSucess (para o sucesso da entrada) e loginFailure (para falha na entrada). Adicione o seguinte regra de navegao no arquivo faces-config.xml:
<navigation-rule> <description></description> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>loginSuccess</from-outcome> <to-view-id>/loginSuccess.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>loginFailure</from-outcome> <to-view-id>/loginFailure.jsp</to-view-id> </navigation-case> </navigation-rule>
Adicionamos dois elementos navigation-case para a pgina de login, uma para o sucesso e outra para o fracasso. O arquivo de configurao mostra a pgina login.jsp, se o resultado lgico for loginSuccess, em seguida, mostrar a pgina loginSuccess.jsp. Caso contrrio, se o resultado lgico for loginFailure, depois a pgina loginFailure.jsp deve ser exibida. A pgina loginSuccess.jsp apenas exibe uma mensagem de Login Bem-Sucedido junto ao nome do usurio que retirado do bean gerenciado por LoginBean.
13 de 50
Curso JSF
loginSuccess.jsp
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <html> <head> <title>Sucesso no Login</title> </head> <body> <h3>Entrada com Sucesso</h3> <f:view> <h:form> <p>Voc teve sucesso com o Login.<p/> <p>Bem vindo <h:outputText value="#{LoginBean.username}"/><p/> </h:form> </f:view> </body> </html>
loginFailure.jsp
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %> <html> <head> <title>Login Falhou</title> </head> <body> <h3>Login Falhou</h3> <f:view> <h:form> <p>O login id <h:outputText value="#{LoginBean.username}"/> no encontrado.<p/> <p>Por favor tente novamente...</p> </h:form> </f:view> </body> </html>
Outros detalhes
Para finalizar, veremos os detalhes left-over do mecanismo de Navegao da JSF. Vamos cobrir o uso do elemento "request" bem como da especificao do uso wild-strings. Normalmente, quando um redirecionamento encontrado pelo servidor, a solicitao atual for encerrada, o controle redirecionado para o navegador e este faz a requisio (que est disponvel como a URL na instruo de redirecionamento). O mesmo acontece aqui tambm. Considere o seguinte elemento:
<navigation-case> <from-outcome>loginFailure</from-outcome> <to-view-id>/loginFailure.jsp</to-view-id> <redirect/> </navigation-case>
14 de 50
Curso JSF
Suponha-se, que o resultado da pgina login.jsp loginFailure.jsp. Se o redirecionamento do elemento no est presente no arquivo de configurao, ento a URL do navegador ainda mostra o login.jsp e no loginFailure.jsp (embora o contedo exibido no navegador ser loginFailure.jsp). A presena do elemento redirecionar o controle do servidor para o navegador e feita uma solicitao para a pgina de destino loginFailure.jsp.
Especificar wild-cards
Tambm possvel especificar um caractere wild-card (*) no elemento 'from-view-id'. Por exemplo, digamos que desejamos lidar com o mecanismo de navegao para todos os arquivos JSF dentro da pasta "registo", ento podemos ter o seguinte elemento:
<navigation-rule> <from-view-id>/registro/*</from-view-id> <navigation-case> ... </navigation-case> </navigation-rule>
15 de 50
Curso JSF
4. Facelets
Enquanto JavaServer Faces e JSP so feitos para serem alinhados, Facelets esto fora da especificao JSP e fornece uma alta performance, a JSF tecnologia centrada no ponto de vista. Qualquer um que tenha criado uma pgina JSP ser capaz de fazer o mesmo com Facelets e utilizar a familiaridade de tags no padro XML. A diferena est internamente, onde toda a carga do fornecedor JSP removida para aumentar consideravelmente a JSF como uma plataforma que pode proporcionar o simples desenvolvimento plug-and-go sem a necessidade de desenvolvimento de tags JSP. Aqui est um exemplo de como fcil definir uma viso com Facelets:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jstl/core"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Hello</title> </head> <body> <form id="helloForm" jsfc="h:form"> <h2>Oi. Meu nome Duke. Estou pensando em um nmero entre #{UserNumberBean.minimum} e #{UserNumberBean.maximum}. Pode advinhar qual ? </h2> <img id="waveImage" src="wave.med.gif" /> <input type="text" jsfc="h:inputText" id="userNo" value="#{UserNumberBean.userNumber}" validator="#{UserNumberBean.validate}"/> <input type="submit" jsfc="h:commandButton" id="submit" action="success" value="Submeter" /> <p /> <h:message showSummary="true" id="errors1" for="userNo"/> <p /> <c:forEach begin="1" end="4" varStatus="v"> #{view.viewId} #{v.index}<br/> </c:forEach> </form> </body> </html>
Voc pode estar pensando que a marcao parece extremamente familiar. Esse o ponto. No existe qualquer necessidade de aprender uma outra linguagem de templates ou esquema.
Por que usar Facelets?

Facelets no dependente de um continer JSP. Isso significa que podemos comear a usar os novos recursos de JSF. Aqui est uma pequena lista dos recursos do Facelets: Trabalha com JSF 1.1 e JSF 1.2, incluindo a RI da Sun e o Apache MyFaces.
16 de 50
Curso JSF
Tempo zero para o desenvolvimento de tags para UIComponents Rpido templating/decoradores para componentes e Pginas Capacidade de especificar UIComponents em arquivos separados Line Tag Atribute, erros so reportados precisamente Especificar as tags em arquivos separados, mesmo embalado com jar Suporte a EL completo, incluindo funes Em tempo de compilao Validao EL Arquivos de configurao XML no so necessrias, mas esto disponveis
Todos os desenvolvedores desejam um projeto mais amigvel. Desenvolvedores passam um tempo considervel definindo: UIComponents, Conversores e Validadores no arquivo facesconfig.xml. Facelets s exige a especificao de um apelido ao nome para ligar seus objetos em suas pginas (sem XML necessrio). A chave a facilidade de integrao e desenvolvimento.
JSF 2 Templating com exemplo Facelets

Neste exemplo, mostramos a utilizao de 4 tags Facelets para construir a pgina a partir de um modelo: ui:insert Usado em arquivo de modelo, define o contedo que vai substituir pelo arquivo que carrega o modelo. O contedo pode ser substituir por um tag ui:define. ui:define Define o contedo que inserido no modelo com uma correspondncia pela tag ui:insert. ui:include Semelhante a tag jsp:include do JSP padro, inclui o contedo de outra pgina XHTML. ui:composition Se for usado com um atributo "template", o modelo especifico carregado, e os filhos desta tag definem o layout do modelo, caso contrrio, um grupo de elementos, que pode ser inserido em algum lugar. Alm disso, JSF remove as tags outside da tag ui:composition.
1. Layout do modelo
Para JSF, um arquivo modelo apenas um simples arquivo XHTML, com poucas tags no padro Facelets para definir o layout do modelo. commonLayout.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!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"
17 de 50
Curso JSF
xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <h:outputStylesheet name="common-style.css" library="css" /> </h:head> <h:body> <div id="page"> <div id="header"> <ui:insert name="header"> <ui:include src="/template/common/commonHeader.xhtml" /> </ui:insert> </div> <div id="content"> <ui:insert name="content" > <ui:include src="/template/common/commonContent.xhtml" /> </ui:insert> </div> <div id="footer"> <ui:insert name="footer" > <ui:include src="/template/common/commonFooter.xhtml" /> </ui:insert> </div> </div> </h:body> </html>
Neste modelo, definimos o layout da Web padro, com os seguintes detalhes: Usamos a tag h:outputStylesheet para incluir um arquivo CSS no cabealho para denominar o layout de pgina inteira. Usamos a tag ui:insert para definir trs sees substituveis: cabealho, contedo e rodap. Usamos a tag ui:include para fornecer um contedo padro, se nenhuma substituio especificada quando o modelo for usado.
2. Cabealho, Contedo e Rodap

Codificao para os trs contedos da pgina. commonHeader.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!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:ui="http://java.sun.com/jsf/facelets"> <body> <ui:composition> <h1>Este o cabealho padro</h1> </ui:composition> </body> </html>
commonContent.xhtml
18 de 50
Curso JSF
<?xml version="1.0" encoding="UTF-8"?> <!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:ui="http://java.sun.com/jsf/facelets"> <body> <ui:composition> <h1>Este o contedo padro</h1> </ui:composition> </body> </html>
commonFooter.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!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:ui="http://java.sun.com/jsf/facelets"> <body> <ui:composition> <h1>Este o rodap padro</h1> </ui:composition> </body> </html>
Quando estas pginas forem inseridas no arquivo modelo, todas as tags ui:composition sero removidas. Por exemplo: commonHeader.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!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:ui="http://java.sun.com/jsf/facelets"> <body> TODAS AS TAGS acima desta linha sero removidas pelo JSF <ui:composition> <h1>Este o cabealho padro</h1> </ui:composition> TODAS AS TAGS abaixo desta linha sero removidas pelo JSF </body> </html>
JSF utiliza os seguintes elementos para inserir no arquivo de modelo:

<ui:composition> <h1>Este um cabealho padro</h1> </ui:composition>
Ao inserir o modelo commonLayout, tornou-se: commonLayout.xhtml

... <h:body>
19 de 50
Curso JSF
<div id="page"> <div id="header"> <h1>Este um cabealho padro</h1> </div> ...
3. Utilizando template
Para fazer uso de um modelo j existente, por exemplo. CommonLayout.xhtml, utilize a tag ui:composition com um atributo template. Vejamos os seguintes exemplos: default.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!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:ui="http://java.sun.com/jsf/facelets"> <h:body> <ui:composition template="template/common/commonLayout.xhtml"> </ui:composition> </h:body> </html>
A pgina JSF carrega o modelo commonLayout.xhtml e exibe todo o contedo da pgina padro.
page1.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!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"
20 de 50
Curso JSF
xmlns:ui="http://java.sun.com/jsf/facelets"> <h:body> <ui:composition template="/template/common/commonLayout.xhtml"> <ui:define name="content"> <h2>Este o contedo da Pgina 1</h2> </ui:define> <ui:define name="footer"> <h2>Este o rodap da Pgina 1</h2> </ui:define> </ui:composition> </h:body> </html>
Ao carregar a pgina JSF para o modelo commonLayout.xhtml e usar a tag ui:define para substituir a tag ui:insert, que foi definida no arquivo modelo.
Enquanto o nome da tag ui:define comparado com o nome da tag ui:insert, que foi definida para o modelo, ui:insert teve seu contedo substitudo.
21 de 50
Curso JSF
5. Richfaces
RichFaces, como a maioria dos outros frameworks de componentes projetados para uso com JSF, foi extensivamente modificado para permitir total compatibilidade. Nesta seo descreveremos todas as aes necessrias e configuraes que devem ser feitas para conectar os componentes RichFaces em uma aplicao JSF.
Baixar os RichFaces
A ltima verso dos componentes RichFaces est disponvel na rea de Downloads do JBoss RichFaces na comunidade JBoss:
http://labs.jboss.com/jbossrichfaces/downloads
So arquivos binrios (baixar os arquivos *.bin.zip ou *.bin.tar.gz) contm compilado, pronto para usar a verso do RichFaces com o conjunto bsico. Para comear com RichFaces no sistema de arquivo de computador criar uma nova pasta com o nome "RichFaces", e nesta baixe e descompacte o arquivo com os binrios.
Adicionar as bibliotecas RichFaces para o projeto

Na pasta com os arquivos descompactados anteriormente abra pasta lib. Esta pasta contm trs arquivos *.jar com a API, interface do usurio e as bibliotecas de execuo. Copiar os arquivos JARs na pasta lib para a pasta WEB-INF/lib da aplicao JSF. Uma aplicao JSF com RichFaces assume que os arquivos JARs a seguir esto disponveis no projeto: commons-beanutils-1.7.0.jar, commons-collections-3.2.jar, commonsdigester-1.8.jar, commons-logging-1.0.4.jar, jhighlight-1.0.jar.
Registrar o RichFaces no web.xml

Depois de adicionar as bibliotecas RichFaces ao projeto necessrio registr-las no arquivo web.xml. Adicionar seguintes linhas neste arquivo:
...  <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value> </context-param>  <context-param> <param-name>org.richfaces.CONTROL_SKINNING</param-name> <param-value>enable</param-value> </context-param>  <filter>
22 de 50
Curso JSF
<display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping> ...
Finalmente, o arquivo web.xml deve ficar assim:

<?xml version="1.0"?> <web-app version="2.5" 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-app_2_5.xsd"> <display-name>Greeter</display-name> <context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>server</param-value> </context-param> <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>blueSky</param-value> </context-param> <context-param> <param-name>org.richfaces.CONTROL_SKINNING</param-name> <param-value>enable</param-value> </context-param> <filter> <display-name>RichFaces Filter</display-name> <filter-name>richfaces</filter-name> <filter-class>org.ajax4jsf.Filter</filter-class> </filter> <filter-mapping> <filter-name>richfaces</filter-name> <servlet-name>Faces Servlet</servlet-name> <dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher> <dispatcher>INCLUDE</dispatcher> </filter-mapping> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener>  <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet>
23 de 50
Curso JSF
 <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <login-config> <auth-method>BASIC</auth-method> </login-config> </web-app>
managed bean
A aplicao "RichFaces Greeter" necessita de um managed bean. Na pasta do projeto criar um novo managed bean com nome de Usuario no pacote demo com o seguinte cdigo:
package demo; public class Usuario { private String nome = ""; public String getNome() { return nome; } public void setNome(String nome) { this.nome = nome; } }
Registrando o managed bean no arquivo faces-cofig.xml:

<?xml version="1.0" encoding="UTF-8"?> <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xi="http://www.w3.org/2001/XInclude" 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_1_2.xsd"> <managed-bean> <description>Bean do Usuario</description> <managed-bean-name>usuario</managed-bean-name> <managed-bean-class>demo.Usuario</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> <managed-property> <property-name>nome</property-name> <property-class>java.lang.String</property-class> <value/> </managed-property> </managed-bean> </faces-config>
O aplicativo "RichFaces Greeter" tem apenas uma pgina JSP. Criar a pgina index.jsp na pasta raiz do contedo Web e adicionar o seguinte cdigo:
24 de 50
Curso JSF
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>  <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <html> <head> <title>RichFaces Greeter</title> </head> <body> <f:view> <a4j:form> <rich:panel header="RichFaces Greeter" style="width: 315px"> <h:outputText value="Seu nome:"/> <h:inputText value="#{usuario.nome}"> <f:validateLength minimum="1" maximum="30"/> </h:inputText> <a4j:commandButton value="Obter Saudao" reRender="greeting"/> <h:panelGroup id="greeting"> <h:outputText value="Ol, " rendered="#{not empty usuario.nome}"/> <h:outputText value="#{usuario.nome}"/> <h:outputText value="!" rendered="#{not empty usuario.nome}"/> </h:panelGroup> </rich:panel> </a4j:form> </f:view> </body> </html>
A aplicao utiliza trs componentes RichFaces: rich:panel utilizado como um continer visual para a informao; a4j:commandButton com suporte embutido para Ajax que permite prestar uma saudao dinmica aps um respose e a4j:form auxilia ao boto executar a ao. Observamos, que a biblioteca RichFaces deve ser declarado em cada pgina JSP. Para Facelets devemos adicionar as seguintes linhas para declarao da biblioteca de tag:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"> ... </ui:composition>
Demonstrao dos Componentes

RichFaces possui diversos componentes e tem mais de 20 atributos especficos, alm de atributos gerais que podem ser substitudos. No entanto, no uso comum dos componentes no so difceis de configurar, como a maioria dos atributos com padres razoveis. Vejamos alguns desses componentes a seguir.
25 de 50
Curso JSF
Calendar: Um componente pop-up que permite selees de data.
Pick List: Uma seleo e ordenao componente. Lista de Escolha que pode mover os itens entre as reas disponveis e selecionadas, para cima e para baixo na rea selecionada.
AutoComplete: Substituto para o componente de entrada Suggestion Box que fornece sugestes clicveis para preencher ou completar uma entrada.
Tab Panel: um componente de sada que cria pginas com guias.
Accordion: Substituto para o componente de entrada Panel Bar.
26 de 50
Curso JSF
Collapsible Panel: Substituto para o componente Simple Toggle Panel.
27 de 50
Curso JSF
6. Primefaces
PrimeFaces um projeto de extenso que tem o objetivo ser uma biblioteca de componentes JSF leve e rpida, sendo um conjunto de diversos componentes. Este um projeto estendido pois define componentes teis que falta em outras bibliotecas da JSF. Utiliza padres e altamente compatvel com o framework JSF. A extenso PrimeFaces no somente um conjunto de componentes, conversores e comportamentos para o cliente. Tambm consiste de plugins teis para o framework Maven e vrios add-ons simplificadores para a Web e, especialmente, para o desenvolvimento JSF. A extenso PrimeFaces um projeto open source que est sob a licena do Apache. Podese us-lo livremente em projetos de cdigo aberto ou comerciais segundo os termos da licena.
Caractersticas do PrimeFaces
Resumidamente PrimeFaces uma biblioteca de componentes de cdigo aberto para a JSF com mais de 100 componentes. Possui as seguintes caractersticas: Um variado conjunto de componentes de interface para o usurio (DataTable, AutoComplete, HtmlEditor, Charts, entre outros); Somente a configurao XML necessria e no h dependncias necessrias; Built-in Ajax baseado no padro JSF 2.0 Ajax APIs; Mais de 25 temas internos; e Documentao com exemplos de cdigo.
Aplicativo Exemplo
Vamos construir uma aplicao exemplo utilizando a extenso PrimeFaces com as seguintes caractersticas: 1. Uma tela de Login que recebe o nome e a senha do usurio para autentic-lo. 2. Ao ser bem-sucedido o login ser exibida uma tela de pesquisa do usurio. Os usurios podem pesquisar outros usurios pelo seu nome. Os resultados da pesquisa sero exibidos em um DataTable com paginao, classificao e filtragem de apoio. 3. Ao clicar em uma linha, os detalhes do usurio sero exibidos em um formulrio. Inicialmente, realizar o download da bibliotecas do JSF:
http://javaserverfaces.java.net/download.html
Copiar os arquivos: jsf-api-X.X.X.jar, jsf-impl-X.X.X.jar e jstl-X.X.X.jar para a pasta:

WEB-INF/lib
Baixar o PrimeFaces em:

28 de 50
Curso JSF
http://www.primefaces.org/downloads.html
Colocar o arquivo primefaces X.X.X.jar na pasta:

WEB-INF/lib
Configurar FacesServlet no arquivo web.xml:

<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" 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-app_2_5.xsd" > <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <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> </web-app>
Criar um arquivo chamado faces-config.xml na pasta WEB-INF:

<?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"> <!-No h declaraes ManagedBean aqui pois usamos anotaes @ManagedBean. --> </faces-config>
Criar a pgina index.jsp, que desvia para a tela de login:

<jsp:forward page="login.jsf"></jsp:forward>
Criar a pgina login.xhtml:

<html xmlns="http://www.w3c.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> <link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css" /> </h:head> <h:body> <center> <p:panel header="Entrada no Sistema" style="width: 350;"> <h:form>
29 de 50
Curso JSF
<h:panelGrid columns="2" cellpadding="2"> <h:outputLabel for="#{userManagedBean.username}" value="Usurio"/> <h:inputText value="#{userManagedBean.username}" label="UserName"> </h:inputText> <h:outputLabel for="#{userManagedBean.password}" value="Senha"/> <h:inputSecret value="#{userManagedBean.password}"></h:inputSecret> <h:commandButton type="submit" value="Login" action="#{userManagedBean.login}"> </h:commandButton> </h:panelGrid> </h:form> </p:panel> <div><h:messages ></h:messages></div> </center> </h:body> </html>
Obter e disponibilizar o tema blusky de pacote PrimeFaces. Criar um arquivo chamado home.xhtml que contm o UserSearchForm, Resultados do dataTable e UserDetails Panel.
<html xmlns="http://www.w3c.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.prime.com.tr/ui"> <h:head> <link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css" /> </h:head> <h:body> <center> <h:form> <p:panel header="Formulrio de Busca para Usurios" style="width: 700;"> <h:form> <h:panelGrid columns="3" cellpadding="2"> <h:outputLabel for="#{userManagedBean.searchUser}" value="Usurio"/> <h:inputText value="#{userManagedBean.searchUser}" label="Usurio"> </h:inputText> <h:commandButton type="submit" value="Search" action="#{userManagedBean.searchUser}"> </h:commandButton> </h:panelGrid> </h:form> </p:panel> <p:dataTable var="user" value="#{userManagedBean.searchUsersResults}" selection="#{userManagedBean.selectedUser}" selectionMode="single" dynamic="true" onRowSelectUpdate="userUpdateForm" onRowUnselectUpdate="userUpdateForm" rowSelectListener="#{userManagedBean.onUserSelect}" rowUnselectListener="#{userManagedBean.onUserUnselect}" paginator="true" rows="5" style="width: 700"> <p:column sortBy="#{user.userId}" filterBy="#{user.userId}"> <f:facet name="header"> <h:outputText value="Id" /> </f:facet>
30 de 50
Curso JSF
<h:outputText value="#{user.userId}" /> </p:column> <p:column sortBy="#{user.username}" filterBy="#{user.username}"> <f:facet name="header"> <h:outputText value="Nome" /> </f:facet> <h:outputText value="#{user.username}" /> </p:column> <p:column sortBy="#{user.emailId}" filterBy="#{user.emailId}"> <f:facet name="header"> <h:outputText value="Email" /> </f:facet> <h:outputText value="#{user.emailId}" /> </p:column> <p:column parser="date" sortBy="#{user.dob}" filterBy="#{user.dob}"> <f:facet name="header"> <h:outputText value="DOB" /> </f:facet> <h:outputText value="#{user.dob}" > <f:convertDateTime pattern="dd/MM/yyyy" /> </h:outputText> </p:column> </p:dataTable> <p:panel id="userDetailsPanelId" header="Detalhes" style="width: 700;"> <h:panelGrid columns="2" cellpadding="2" id="userUpdateForm" border="0" > <h:outputLabel for="#{userManagedBean.selectedUser.userId}" value="ID"/> <h:inputText value="#{userManagedBean.selectedUser.userId}" style="width: 100;" readonly="true"></h:inputText> <h:outputLabel for="#{userManagedBean.selectedUser.username}" value="Usurio"/> <h:inputText value="#{userManagedBean.selectedUser.username}" readonly="true"> </h:inputText> <h:outputLabel for="#{userManagedBean.selectedUser.emailId}" value="Email"/> <h:inputText value="#{userManagedBean.selectedUser.emailId}" readonly="true"> </h:inputText> <h:outputLabel for="#{userManagedBean.selectedUser.gender}" value="Sexo"/> <h:inputText value="#{userManagedBean.selectedUser.gender}" readonly="true"> </h:inputText> <h:outputLabel for="#{userManagedBean.selectedUser.dob}" value="DOB"/> <h:inputText value="#{userManagedBean.selectedUser.dob}" readonly="true"> <f:convertDateTime pattern="dd/MM/yyyy" /> </h:inputText> </h:panelGrid> </p:panel> </h:form> </center> </h:body> </html>
Criar a classe de domnio User.java:

package x25.com.tutorial;
31 de 50
Curso JSF
import java.util.Date; public class User { private private private private private private private Integer userId; String username; String emailId; String phone; Date dob; String gender; String address;
public User() { } public User(Integer userId, String username, String emailId, String phone, Date dob, String gender, String address) { this.userId = userId; this.username = username; this.emailId = emailId; this.phone = phone; this.dob = dob; this.gender = gender; this.address = address; } // Mtodos padres GET/SET }
Criar a classe UserService.java, que atua como uma simulao da tabela na base de dados.
package x25.com.tutorial; import import import import import import java.util.ArrayList; java.util.Collection; java.util.Date; java.util.HashMap; java.util.Map; java.util.Set;
public class UserService { private static final Map<Integer, User> USERS_TABLE = new HashMap<Integer, User>(); static { USERS_TABLE.put(1, new User(1, "Administrator", "admin@gmail.com", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(2, new User(2, "Guest", "guest@gmail.com", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(3, new User(3, "John", "John@gmail.com", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(4, new User(4, "Paul", "Paul@gmail.com", "9247469543", new Date(), "M", "Hyderabad"));
32 de 50
Curso JSF
USERS_TABLE.put(5, new User(5, "raju", "raju@gmail.com", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(6, new User(6, "raghav", "raghav@gmail.com", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(7, new User(7, "caren", "caren@gmail.com", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(8, new User(8, "Mike", "Mike@gmail.com", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(9, new User(9, "Steve", "Steve@gmail.com", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(10, new User(10, "Polhman", "Polhman@gmail.com", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(11, new User(11, "Roger", "Rogermoor@gmail.com", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(12, new User(12, "Robin", "Robinhood@gmail.com", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(13, new User(13, "Sean", "Sean@gmail.com", "9000510456", new Date(), "M", "Hyderabad")); USERS_TABLE.put(14, new User(14, "Gabriel", "Gabriel@gmail.com", "9247469543", new Date(), "M", "Hyderabad")); USERS_TABLE.put(15, new User(15, "raman", "raman@gmail.com", "9000510456", new Date(), "M", "Hyderabad")); } public Integer create(User user) { if(user == null) { throw new RuntimeException("No foi possvel criar Usurio. Objeto nulo"); } Integer userId = this.getMaxUserId(); user.setUserId(userId); USERS_TABLE.put(userId, user); return userId; } public void delete(User user) { if(user == null) { throw new RuntimeException( "No foi possvel excluir o Usurio. Objeto nulo"); } USERS_TABLE.remove(user.getUserId()); } public Collection<User> getAllUsers() { return USERS_TABLE.values(); } public User getUser(Integer userId) { return USERS_TABLE.get(userId); } public Collection<User> searchUsers(String username) { String searchCriteria = (username == null)?"":username.toLowerCase().trim(); Collection<User> users = USERS_TABLE.values(); Collection<User> searchResults = new ArrayList<User>(); for (User user : users) { if (user.getUsername() != null && user.getUsername().toLowerCase().trim().startsWith(searchCriteria)) { searchResults.add(user);
33 de 50
Curso JSF
} public void update(User user) { if(user == null || !USERS_TABLE.containsKey(user.getUserId())) { throw new RuntimeException( "No possvel alterar o usurio. Objeto nulo ou ID [" + user.getUserId() + "] invlido." ); } USERS_TABLE.put(user.getUserId(), user); } protected Integer getMaxUserId() { Set<Integer> keys = USERS_TABLE.keySet(); Integer maxId = 1; for (Integer key : keys) { if(key > maxId) { maxId = key; } } return maxId; } }
} } return searchResults;
Criar a classe UserManagedBean.java:

package x25.com.tutorial; import import import import import import import java.util.Collection; javax.faces.application.FacesMessage; javax.faces.bean.ApplicationScoped; javax.faces.bean.ManagedBean; javax.faces.context.FacesContext; org.primefaces.event.SelectEvent; org.primefaces.event.UnselectEvent;
@ManagedBean @ApplicationScoped public class UserManagedBean { UserService userService = new UserService(); private String username; private String password; private String searchUser; private Collection<User> searchUsersResults; private User selectedUser; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password;
34 de 50
Curso JSF
} public void setPassword(String password) { this.password = password; } public User getSelectedUser() { if (selectedUser == null){ selectedUser = new User(); } return selectedUser; } public void setSelectedUser(User selectedUser) { this.selectedUser = selectedUser; } public Collection<User> getSearchUsersResults() { return searchUsersResults; } public void setSearchUsersResults(Collection<User> searchUsersResults) { this.searchUsersResults = searchUsersResults; } public String getSearchUser() { return searchUser; } public void setSearchUser(String searchUser) { this.searchUser = searchUser; } public String login() { if ("test".equalsIgnoreCase(getUsername()) && "test".equals(getPassword())) { return "home"; } eles { FacesContext context = FacesContext.getCurrentInstance(); context.addMessage("username", new FacesMessage("Usurio ou senha Invlido")); return "login"; } } public String searchUser() { String username = (this.searchUser == null)? "":this.searchUser.trim(); this.searchUsersResults = userService.searchUsers(username); System.out.println(searchUsersResults); return "home"; } public String updateUser() { userService.update(this.selectedUser); return "home"; } public void onUserSelect(SelectEvent event) { } public void onUserUnselect(UnselectEvent event) { }
Isso tudo o que precisamos fazer. Execute o aplicativo e veja toda a funcionalidade deste aplicativo junto ao tema blusky.
35 de 50
Curso JSF
7. Validao e Converso
JavaServer Faces suporta um mecanismo para validar os dados de componentes editveis. Cada componente em JSF cria mensagens de erro durante o ciclo de vida e pode-se atribuilos ao objeto FacesContext. Assim, cada mensagem est ligada a um componente na rvore de componentes e a mensagem exibida no modo de exibio no final do Ciclo de Vida da JSF conforme a seguinte figura:
Obviamente que diferentes cenrios poderiam impactar de forma diferente as descries do Ciclo de Vida. Devemos observar que os processos de converso e validao ocorrem nas fases de Aplicar os Valores de Solicitao, Validaes do Processo e Retornar a Resposta. Devemos esclarecer uma questo mais bsica: o que converso? Simplificando, o processo que garante se o objeto ou no do tipo certo. Aqui esto duas converses tpicas: Valor de um tipo String convertido para um java.util.Date. Valor de um tipo String convertido para um Float.
Quanto validao, garante que os dados contm o contedo esperado. Aqui esto duas validaes tpicas:
36 de 50
Curso JSF
java.util.Date MM/aaaa. Float est entre 1.0F e 100.0F.
Fases do Ciclo de Vida

O principal objetivo da converso e validao assegurar que os valores foram devidamente limpos antes de atualizar os dados do modelo. Posteriormente, quando chega a hora de invocar os mtodos da aplicao para realmente realizar algo com esses dados, pode-se seguramente fazer certas suposies sobre o estado do seu modelo. Converso e validao permite se concentrar na Regra de Negcio ao invs das qualificaes tediosas de dados de entrada, tais como dados nulos, qualificadores de tamanho ou limites de alcance, etc Faz sentido, ento, que os processos de converso e validao acontecerem antes dos dados de componente vinculados ao seu modelo do BackBean no modelo de atualizao de dados fase do Ciclo de Vida. A converso ocorre na fase de aplicar valores de solicitao e validao na fase de validao do processo.
Sobre o atributo imediato

Notamos que os processos de converso e validao representa o fluxo de aplicao quando o atributo imediato o componente UIInput definido como false. Foram o atributo definido para a converso, verdadeira e validao iria ocorrer no incio do ciclo de vida, durante a fase de valores aplica-se a requisio (ver a prxima figura). Existem casos em que til como o gerenciamento de listas dinmicas e at mesmo ignorando a validao por completo (quando utilizado com um componente UICommand). A prxima figura mostra onde a Converso e Validao ocorre no Ciclo de Vida da aplicao JSF foram o atributo imediato definido como verdadeiro.
37 de 50
Curso JSF
Um exemplo de trabalho
Daqui em diante vamos utilizar uma aplicao exemplo para demonstrar os conceitos discutidos. A aplicao demonstra as capacidades de converso e validao. Tenhamos em mente que a aplicao muito simples e no necessariamente exaustiva: Nosso objetivo no construir um aplicativo para uso no mundo real, depois de tudo. Uso do padro JSF conversores para converter dados de campo de formulrio; Uso de componentes JSF padro para validar dados de campo de formulrio; Escrever conversores e validadores personalizados; Registrar conversores e validadores personalizados no arquivo faces-config.xml; Personalizar mensagens de erro padro.
O aplicativo de exemplo um simples formulrio de registro do usurio. Nosso objetivo reunir os dados do usurio como nome, idade, endereo de correio eletrnico e nmero de telefone. Ento, vamos mostrar como utilizar a converso e validao para garantir que os dados coletados so apropriados e corretos. A aplicao utiliza trs pginas JSP: index.jsp que redireciona o usurio para UserRegistration.jsp UserRegistration.jsp que contm os campos da aplicao de formulrios Results.jsp que notifica o aplicativo no qual o usurio foi registrado
Comearemos incio com um olhar para as opes de codificao de processos de converso do JSF.
Converso
Como mencionado anteriormente, a converso o processo que assegura ao objeto. Podemos utilizar conversores prontos ou personalizados. JSF fornece muitos conversores padres. Tambm podemos ligar nosso prprio conversor personalizado, implementar a interface e converter. A seguinte tabela mostra os identificadores do conversor e as classes de implementao correspondentes utilizados pela JSF para uma converso de dados simples. A maioria das converses de dados acontece automaticamente.
javax.faces.BigDecimal javax.faces.BigInteger javax.faces.Boolean javax.faces.Byte javax.faces.Character javax.faces.DateTime javax.faces.Double javax.faces.convert.BigDecimalConverter javax.faces.convert.BigIntegerConverter javax.faces.convert.BooleanConverter javax.faces.convert.ByteConverter javax.faces.convert.CharacterConverter javax.faces.convert.DateTimeConverter javax.faces.convert.DoubleConverter
38 de 50
Curso JSF
javax.faces.Float
javax.faces.convert.FloatConverter
Um conversor para cada ocasio

O cdigo abaixo demonstra uma converso padro no campo idade do usurio. A tag JSF est configurado como tal:
<h:inputText id="age" value="#{UserRegistration.user.age}"/>
UserRegistration.user.age representa uma propriedade de valor de ligao que do tipo inteiro. Para as ligaes de ambos os tipos primitivos, BigInteger ou BigDecimal, JSF escolhe um conversor de padro. No entanto, tambm podemos usar um conversor especfico para granularidade maior usando a tag <f:converter/>, conforme a codificao a seguir:
<h:inputText id="age" value="#{UserRegistration.user.age}"> <f:converter id="javax.faces.Short"/> </h:inputText>
Embora JSF trata primitivas e como muito bem por padro, quando se lida com dados de data devemos especificar a tag <f:convertDateTime/>. Esta marca baseada no pacote java.text e utiliza curto, longo, e os padres personalizados. Aqui est um exemplo:
<h:inputText id="birthDate" value="#{UserRegistration.user.birthDate}"> <f:convertDateTime pattern="MM/yyyy"/> </h:inputText>
Este exemplo demonstra como usar a tag <f:convertDateTime/> para garantir que a data de nascimento do usurio conversvel em um objeto de data no formatado como MM/AAAA (ms/ano). Alm de converter formatos de data e hora, JSF fornece um conversor especial para lidar com nmeros como porcentagens ou moeda. Este conversor lida com o agrupamento (como vrgula), nmero de dgitos decimais, smbolos de moeda, entre outros. Por exemplo, o uso de <f:convertNumber/> seguinte uma tcnica para lidar com moeda:
<h:inputText id="salary" value="#{UserRegistration.user.salary}"> <f:convertNumber maxFractionDigits="2" groupingUsed="true" currencySymbol="$" maxIntegerDigits="7" type="currency"/> </h:inputText>
Conversores Personalizados
Converso de dados personalizado necessrio se voc precisa converter os dados de campo em um objeto de valor especfico do aplicativo, como nos exemplos a seguir: String para o objeto Telefone (Telefone.ddd, Telefone.numero) String para o objeto Nome (Nome.principal, Nome.apelido) String para o objeto Produto (Produto.numero, Produto.revisao) Implementar a interface Converter (javax.faces.convert.Converter)
39 de 50
Para criar um conversor personalizado, voc deve fazer o seguinte:
Curso JSF
Implementar o mtodo getAsObject, que converte um campo (String) em um objeto (por exemplo, Telefone). Implementar o mtodo getAsString, que converte um objeto (por exemplo Telefone) em uma String. Cadastrar seu conversor personalizado no contexto Faces. Insirir o conversor em sua JSP com a tag <f:converter/>.
Veja por si mesmo como essas etapas se encaixam no ciclo de aplicao JSF. JSF chama o mtodo getAsObject do conversor personalizado durante a fase de aplicar valores pedido. Este o lugar onde o conversor deve converter o valor String da requisio para o tipo de objeto desejado, e ento retornar o objeto para o armazenamento no componente JSF correspondente. Quando o valor for processado de volta para o ponto de vista, JSF chama o mtodo getAsString na fase da renderizao da resposta. Isto significa que o conversor tambm responsvel pela transformao dos dados de objetos de volta para uma representao de sequncia. Passo 1: Implementar a interface Converter.
import javax.faces.convert.Converter; import org.apache.commons.lang.StringUtils; ... public class TelefoneConverter implements Converter { ... }
Passo 2: Implementar o mtodo getAsObject que converte uma String para um objeto da classe Telefone.
public class TelefoneConverter implements Converter { ... public Object getAsObject( FacesContext context, UIComponent component, String valor) { if (StringUtils.isEmpty(valor)) { return null; } Telefone fone = new Telefone(); String [] foneComps = StringUtils.split(value," ,()-"); String codPais = foneComps[0]; fone.setCodPais(codPais); if ("1".equals(codPais)) { String ddd = foneComps[1]; String prefixo = foneComps[2]; String numero = foneComps[3]; fone.setDDD(ddd); fone.setPrefixo(prefixo); fone.setNumero(numero); } else {
40 de 50
Curso JSF
} }
phone.setNumero(valor); } return fone;
Passo 3: Implementar o mtodo getAsString que converte a classe Telefone para uma String.
public class TelefoneConverter implements Converter { ... public String getAsString(FacesContext context, UIComponent component, Object value) { return value.toString(); } } public class Telefone implements Serializable { ... public String toString(){ if (countryCode.equals("1")){ return codPais + " " + ddd + " " + prefixo + " " + numero; } eles { return numero; } }
Passo 4: Registrar o conversor personalizado com o contexto. Isso pode ser executado em uma das seguintes maneiras. A primeira opo registrar a classe TelefoneConverter com o ID de (por exemplo) x25.TelefoneConverter. Este ID ser ento utilizado pela tag <f:converter/> em suas pginas JSP.
<converter> <converter-id>arcmind.TelefoneConverter</converter-id> <converter-class>x25.com.tutorial.TelefoneConverter</converter-class> </converter>
Alternativamente, pode-se registrar a classe TelefoneConverter para lidar com todos os objetos Telefone automaticamente, como mostrado a seguir.
<converter> <converter-for-class>x25.com.tutorial.Telefone</converter-for-class> <converter-class>x25.com.tutorial.TelefoneConverter</converter-class> </converter>
Passo 5: Usa o conversor em seus JSPs. A execuo do seguinte passo depende da opo de qual registo foi escolhido. Ao optar por registrar a classe TelefoneConverter com o ID de x25.TelefoneConverter, ento utiliza-se a tag <f:converter/> como mostrado abaixo.
<h:inputText id="telefone" value="#{RegistroUsuario.usuario.telefone}">
41 de 50
Curso JSF
<f:converter converterId="x25.TelefoneConverter" /> </h:inputText>
Se optar por registrar a classe TelefoneConverter para lidar com todos os objetos Telefone automaticamente, ento no ser necessrio usar a tag <f:converter/> em seus JSPs. Aqui est o cdigo para o Passo 5, sem a tag conversor.
<h:inputText id="phone" value="#{RegistroUsuario.usuario.telefone}"> [ Veja s sem conversor !] </h:inputText>
Validao
Existe quatro formas de validao dentro JSF: Componentes Built-in de validao Validao em nvel de aplicativo Componentes personalizados de validao (que implemente a interface Validator) Mtodos de validao atravs de BackBeans
Validao e o Ciclo de Vida da JSF e seus componentes

Vejamos um estudo de caso do Ciclo de Vida para o campo nome do nosso formulrio de cadastro. As referncias de cdigo so destinas a ser interpretadas como um pseudocdigo.
42 de 50
Curso JSF
Aqui est uma lista dos componentes de validao padro fornecidos pelo JSF: DoubleRangeValidator: valor local de componentes deve ser do tipo numrico, e estar em um intervalo especificado pelos valores mnimos e/ou mximo. LongRangeValidator: valor local de componentes deve ser do tipo numrico e conversvel para o tipo long; deve estar no intervalo especificado pelos valores mnimos e/ou mximo. LengthValidator: Tipo deve ser String; o tamanho deve estar no intervalo especificado pelos valores mnimos e/ou mximo.
Padro de Validao
Em nosso aplicativo exemplo a idade do usurio pode ser de qualquer tipo inteiro vlido (byte, short, int). Porque no faz sentido permitir que uma idade de, digamos, -2, vamos adicionar uma validao para o campo. Este um cdigo de validao simples para garantir a integridade do modelo de dados para o campo idade:
<h:inputText id="idade" value="#{RegistroUsuario.usuario.idade}"> <f:validateLongRange maximum="150" minimum="0"/> </h:inputText>
Podemos especificar restries quanto ao comprimento do campo nome. Podemos realizar isso da seguinte forma:
<h:inputText id="nome" value="#{RegistroUsuario.usuario.nome}"> <f:validateLength minimum="2" maximum="25" /> </h:inputText>
A estratgia de Converso e Validao permite que facilmente e rapidamente comear (conversores padro, validao, validao in-line) durante a fase de prototipao, e migrar para solues de produo mais sofisticadas (objetos personalizados, mensagens personalizadas) durante as fases de desenvolvimento posterior. Ao longo de tudo isso, ciclo de vida da aplicao JSF fornece uma infraestrutura confivel para garantir a integridade do modelo de dados.
43 de 50
Curso JSF
8. JSF e Spring
Antes de entrar em detalhes como realizada a Integrao Spring-JSF, importante conhecer um pouco dos detalhes bsicos.
Lado Spring
Spring um framework que suporta de Inverso de Controle (IoC). IoC permite separar vrios componentes que se encaixam em um aplicativo. Na terminologia do Spring isto um Spring Bean que so nada mais que classes regulares java. possvel externalizar o estado dos objetos do Bean, especificando-os no arquivo padro XML. Um Spring Bean tem um ciclo de vida que passa por vrias fases. IoC do Spring responsvel por ler o arquivo XML e construir o Spring Beans a partir da informao de meta-dados diferentes. Assim, a principal responsabilidade da IoC fazer com que os Spring Beans disponvel para o aplicativo cliente. E no ncleo do IoC fornecer uma ligao entre Spring Beans. Assim, em vez de cdificar o aplicativo manualmente gerenciamos o relacionamento entre os Beans, sendo que o problema e manter este. Vejamos o seguinte Bean exemplo:
<bean id="pessoaBean" class="x25.com.tutorial.Pessoa"> <property name="nome"> <value>Annimo</value> </property> </bean>
O exemplo acima define um Spring Bean do tipo Pessoa com um identificador chamado pessoaBean. Tambm define uma propriedade simples chamada nome com valor annimo. Tambm possvel relacionar valores compostos (como referncias a outro objeto) ou conjuntos de valores (array, mapa, lista) como o seguinte trecho de cdigo ir mostrar:
<bean id="funcionario1" class="x25.com.tutorial.Funcionario"> <property name="nome"> <value>Func1</value> </property> </bean> <bean id="funcionario2" class="x25.com.tutorial.Funcionario"> <property name="nome"> <value>Func2</value> </property> </bean> <bean id="gerente1" class="x25.com.tutorial.Gerente"> <property name="nome"> <value>Gerente1</value> </property> <property name="funcionarios"> <ref bean="funcionario1"/> <ref bean="funcionario2"/> </property> </bean>
Observamos no exemplo acima, a declarao de dois objetos Funcionrio com os

44 de 50
Curso JSF
identificadores funcionario1 e funcionario2. Esses dois objetos de funcionrio estaro associados com um objeto de Gerente. Este um exemplo de uma relao composta, uma vez que estamos relacionando Gerente com Funcionrio. Isto conseguido atravs da tag de referncia dentro da declarao de propriedade.
Lado Java Server Faces

Depois de ter visto sobre como IoC do Spring gerencia e mantm os Spring Beans, vamos ver uma viso geral sobre a gesto da Java Server Faces sobre seus componentes. JSF responsvel por fornecer um componente de desenvolvimento orientado para a camada de interface do usurio em uma aplicao Web. A pedido do cliente mapeada diretamente para uma ao na camada Web, o que significa que o mecanismo de manipulao de eventos se assemelha ao que vemos nas bibliotecas SWING ou AWT. Se o mecanismo de manipulao de eventos da SWING para aplicaes desktop, em seguida, a arquitetura JSF orientada evento para aplicaes Web. Semelhante aos Spring Beans, em JSF temos chamado de Managed Beans ou BackBeans. Estes beans so responsveis pela manipulao de todos os tipos de aes em uma aplicao Web. Como um componente da interface do usurio associado a uma determinada ao e facilmente configurvel no arquivo XML. O cdigo a seguir mostra a declarao de um Managed Bean da JSF.
<managed-bean> <managed-bean-name>timerBean</managed-bean-name> <managed-bean-class> x25.com.tutorial.TimerBean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>
Um Managed Bean tambm uma classe Java regular em JSF e est configurado no arquivo faces-config.xml e disponibilizado para o aplicativo pela JSF.
Spring Beans no ambiente JSF

Agora que vimos os beans na viso do Spring e da JSF, vamos ver sobre Integrao e qual o componente fica integrado. Spring utiliza Spring Beans e JSF os Managed Beans. Spring fornece suporte, de tal modo que um Spring Bean torna-se visvel para o ambiente JSF. Precisamente, o Spring Bean que configuramos no arquivo XML pode ser visto diretamente no faces-config.xml como se fosse um bean gerenciado pela JSF.
<bean id="pessoaBean" class="x25.com.tutorial.Pessoa"> <property name="nome"> <value>Annimo</value> </property> </bean>
O cdigo acima define um Spring Bean. Agora, consideremos o seguinte trecho:

<managed-bean>
45 de 50
Curso JSF
<managed-bean-name>pessoaBean</managed-bean-name> <managed-bean-class> x25.com.tutorial.Pessoa </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>
Utilizamos o Spring Bean de Pessoa que foi previamente determinado na configurao do Spring para a JSF.
Apoio da API para a integrao

Retornando o foco para a API da Distribuio do Spring que esto relacionados com JSF para o apoio integrao. A API do Spring contm diversas classes de suporte para a Integrao de JSF e esto disponveis nos pacotes: org.springframework.web.jsf org.springframework.web.jsf.el
Para realizar a integrao, precisamos conhecer sobre os Spring Resolvers. No contexto JSF, resolver um processo de identificao de um objeto atravs de um determinado smbolo. Mais especificamente, um identificador do framework JSF constri e associa o objeto do identificador. Vamos retornar declarao do Managed Beans,
<managed-bean> <managed-bean-name>timerBean</managed-bean-name> <managed-bean-class> x25.com.tutorial.TimerBean </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>
Na declarao acima, temos um identificador (ou varivel) chamado timerBean. O objetivo da implementao de um JSF Resolver que deve associar um objeto do tipo x25.com.tutorial.TimerBean para timerBean. Vejamos o que acontece quando tentamos identificar uma varivel que no gerida pelo contexto da aplicao JSF, mas no contexto de uma aplicao Spring. A implementao JSF simplesmente lana um erro informando que a varivel no pode ser resolvida. No importa se a implementao JSF conhece ou no sobre os Beans que so mantidos no Contexto da aplicao Spring. Assim, a fim de resolver as variveis no contexto da aplicao Spring, temos que substituir a implementao JSF para resolver a implementao do Spring Resolver. A implementao do Spring tenta resolver as variveis do contexto do aplicativo. Em vez de definir um Resolver personalizado, a distribuio do Spring vem com um Resolver varivel prdefinido denominado "org.springframework.web.jsf.DelegatingVariableResolver".
46 de 50
Curso JSF
9. JSF e Seam 2
Seam um framework de aplicao para Enterprise Java. Define um modelo de componente uniforme para toda a lgica de negcios em sua aplicao. Um componente Seam pode ser stateful, com o estado associado a qualquer um dos vrios contextos bem definidos, incluindo o de longa durao, persistente contexto de processo, as empresas e ao contexto de conversao, que preservado atravs de mltiplas solicitaes Web em uma interao do usurio. No h distino entre os componentes ou camadas de apresentao e componentes de lgica de negcios no Seam. Pode-se colocar a camada em seu aplicativo da forma como a arquitetura foi concebida, ao invs de ser forado a encaixar a arquitetura no framework. Ao contrrio de uma simples plataforma Java EE ou componentes Java EE. Os componentes do Seam podem acessar simultaneamente o estado associado com a solicitao da Web, realizada em recursos transacionais (sem a necessidade de propagar o estado do pedido via web manualmente parmetros do mtodo).
Integrao com JSF com EJB 3.0

JSF e EJB 3.0 so dois dos novos recursos do Java EE. EJB3 um novo modelo de componentes para o negcio do lado do servidor e pela lgica de persistncia. Enquanto isso, JSF um grande modelo de componente para a camada de apresentao. Infelizmente, nem o modelo de componente capaz de resolver todos os problemas em computao, por si s. Na verdade, JSF e EJB3 funcionam melhor utilizados em conjunto. Mas a especificao Java EE no fornece uma maneira padro para integrar os dois modelos de componentes. Felizmente, os criadores de ambos os modelos previram esta situao e desde os pontos de extenso padro para permitir a extenso e integrao com outros frameworks. Seam unifica os modelos de componentes de JSF e EJB3, eliminando cdigo de juno, e permite que o desenvolvedor pense sobre as Regras do Negcio. possvel escrever aplicaes Seam, onde "tudo" um EJB. Isto pode ser surpresa se est acostumado a pensar em EJBs como granulao, os chamados objetos "pesados". No entanto, verso 3.0 mudou completamente a natureza dos EJBs a partir do ponto de vista do provedor. Um EJB um objeto de granulao fina, no sendo mais complexo do que uma anotao em um JavaBean. Seam incentiva a uso dos Session Beans com o uso da ao da JSF.
Integrao com AJAX

Seam suporta o melhor fonte aberto baseado em solues AJAX: JBoss RichFaces e ICEfaces. Estas solues permitem adicionar a capacidade AJAX para a interface do usurio sem a necessidade de escrever qualquer cdigo JavaScript. Alternativamente, Seam fornece um camada de construo remota JavaScript que permite
47 de 50
Curso JSF
chamar componentes de forma assncrona do lado cliente, JavaScript, sem a necessidade de uma camada de ao intermediria. Bijeo A noo de Inverso de Controle ou IoC existe tanto na JSF quanto na EJB3, bem como em numerosos chamados "recipientes leves". A maioria destes recipientes enfatizam a IoC que implementem servios. Mesmo quando a IoC suporta o tipo statefull (tal como no JSF), praticamente intil o tratamento do estado da aplicao porque o mbito da aplicao do componente statefull no pode ser definido com flexibilidade suficiente, e porque os componentes pertencentes aos mbitos mais amplos no pode ser injetado em componentes pertencentes a mbitos mais estreitos. Bijeo difere de IoC por ser mais dinmico, contextual e bidirecional. Pode-se pensar nisso como um mecanismo de variveis contextuais (nomes nos vrios contextos ligados ao segmento atual) para os atributos do componente. Bijeo permite a automontagem de componentes statefull pelo continer. Permite um componente de forma segura e manipula facilmente o valor de uma varivel de contexto, apenas atribuindo-o a um componente. Seam funciona em qualquer servidor de aplicao Java EE, inclusive no Tomcat. Se o seu ambiente suporta ou no a EJB 3.0 possvel usar o gerenciamento de transao do Seam com JPA ou Hibernate3 para persistncia. Ou, implantar o JBoss incorporado no Tomcat, e obter suporte total para a EJB 3.0.
48 de 50
Curso JSF
10. Formulrio Master/Detail

Em Componentes de Negcios, um relacionamento master-detail refere-se a duas instncias de exibio de um objeto que so relacionados por um link de visualizao. Um link de visualizao representa uma relao entre dois ou mais objetos, que normalmente , mas no necessariamente, com base em uma chave estrangeira que liga as tabelas de dados subjacentes. Os links de associao criam uma nica linha de instncia do objeto de exibio (o objeto principal) com uma ou mais linhas de outra instncia do objeto de exibio (o objeto detalhe). Por exemplo: Nota Fiscal e Itens da Nota, Funcionrio e Dependentes, Ordem de Pagamento e Itens de Pagamento. Vejamos como configurar um relacionamento entre Departamento que est relacionado com as Avaliaes de um Grupo escrita por Funcionrios. DepartmentForm.jsp
<!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:ui="http://java.sun.com/jsf/facelets" xmlns:q="http://www.qualcomm.com/cas" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"> <ui:composition template="template.jsp"> <ui:define name="title">Formulrio de Departmento</ui:define> <ui:define name="content"> <h:form id="departmentForm"> <h:panelGrid id="panelGrid" columns="3" cellpadding="4" cellspacing="0" styleClass="formPanelGrid" rowClasses="#{rowClasses}"> <q:fields fieldNames="name" entity="#{DepartmentCRUD.entity}"/> </h:panelGrid> Funcionrios<br /> <q:genericSubForm listing="#{DepartmentCRUD.entity.employees}" listingFieldNames="lastName,phone" linkFieldName="firstName" subForm="#{DepartmentCRUD.subForms.employeeSubForm}"> </q:genericSubForm> <br /> Avaliaes do Grupo<br /> <q:genericSubForm listing="#{DepartmentCRUD.entity.assessmentList}" listingFieldNames="rating" linkFieldName="groupName" linkFieldNotEditable="true" subForm="#{DepartmentCRUD.subForms.assessmentSubForm}"> <q:dropdown fieldName="group" entity="#{subForm.entity}" /> </q:genericSubForm> <br /> <q:addUpdate crud="#{DepartmentCRUD}"/>
49 de 50
Curso JSF
</h:form> </ui:define> </ui:composition> </html>
Observe as duas tags genericSubForm que realizam as tarefas de incluir, atualizar e consultar dentro do DepartmentForm.jsp para Funcionrio e Avaliaes.
50 de 50

Curso JSF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Curso JSF

Diunggah oleh

Hak Cipta:

Format Tersedia

JSF

2. Ajax com JSF

Enviar uma solicitao do Ajax

Renderizar a viso parcial

Processar a viso parcial

Navegao esttica e dinmica

Por que usar Facelets?

JSF 2 Templating com exemplo Facelets

2. Cabealho, Contedo e Rodap

JSF utiliza os seguintes elementos para inserir no arquivo de modelo:

Ao inserir o modelo commonLayout, tornou-se: commonLayout.xhtml

<div id="page"> <div id="header"> <h1>Este um cabealho padro</h1> </div> ...

Adicionar as bibliotecas RichFaces para o projeto

Registrar o RichFaces no web.xml

Finalmente, o arquivo web.xml deve ficar assim:

Registrando o managed bean no arquivo faces-cofig.xml:

Demonstrao dos Componentes

Calendar: Um componente pop-up que permite selees de data.

Tab Panel: um componente de sada que cria pginas com guias.

Accordion: Substituto para o componente de entrada Panel Bar.

Collapsible Panel: Substituto para o componente Simple Toggle Panel.

Copiar os arquivos: jsf-api-X.X.X.jar, jsf-impl-X.X.X.jar e jstl-X.X.X.jar para a pasta:

Baixar o PrimeFaces em:

Colocar o arquivo primefaces X.X.X.jar na pasta:

Configurar FacesServlet no arquivo web.xml:

Criar um arquivo chamado faces-config.xml na pasta WEB-INF:

Criar a pgina index.jsp, que desvia para a tela de login:

Criar a pgina login.xhtml:

Criar a classe de domnio User.java:

Criar a classe UserManagedBean.java:

java.util.Date MM/aaaa. Float est entre 1.0F e 100.0F.

Fases do Ciclo de Vida

Sobre o atributo imediato

Um conversor para cada ocasio

Para criar um conversor personalizado, voc deve fazer o seguinte:

phone.setNumero(valor); } return fone;

<f:converter converterId="x25.TelefoneConverter" /> </h:inputText>

Validao e o Ciclo de Vida da JSF e seus componentes

Observamos no exemplo acima, a declarao de dois objetos Funcionrio com os

Lado Java Server Faces

Spring Beans no ambiente JSF

O cdigo acima define um Spring Bean. Agora, consideremos o seguinte trecho:

<managed-bean-name>pessoaBean</managed-bean-name> <managed-bean-class> x25.com.tutorial.Pessoa </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean>

Apoio da API para a integrao

Integrao com JSF com EJB 3.0

Integrao com AJAX

10. Formulrio Master/Detail

</h:form> </ui:define> </ui:composition> </html>

Anda mungkin juga menyukai