O documento discute o desenvolvimento de aplicações web usando Java Server Faces (JSF). Aborda os principais conceitos como camadas, arquitetura MVC, ciclo de vida JSF e navegação entre páginas. Também apresenta o uso de managed beans para navegação dinâmica.

1. Projeto e Desenvolvimento de Sistemas Web Web 2 Prof. Frank Camada de Apresentação: JSF (Iniciar o Netbeans)

2. Desenvolvimento em camadas de uma aplicação Banco de dados Camada de Persistência Camada de Negócios Camada de Apresentação

3. Desenvolvimento em camadas de uma aplicação Web JEE Java Enterprise Edition Banco de dados Camada de Persistência JPA Camada de Negócios Session Beans / MDB Camada de Apresentação JSP/JSF

4. Desenvolvimento em camadas de uma aplicação Web Spring Spring Banco de dados Camada de Persistência JPA / Hibernate Camada de Negócios POJO Camada de Apresentação JSP/JSF

5. Camada de apresentação Abordagem orientada a páginas Servlets Java Server Pages Abordagem orientada a framework MVC 2 Struts, WebWork, Spring MVC + Web Flow, FreeMarker, Velocity Abordagem orientada a framework de componentes JSF, Tapestry, Wicket Ajax Por que usar frameworks?

6. Características de JSF Orientado a componentes Manipulação de Eventos Implementação de controladores Chamada direta de métodos controladores a partir da view. Independente de visualização (html, xml) Padrão JEE Ferramentas Bibliotecas: MyFaces, RichFaces, Facelets Bibliotecas: http://www.jsfmatrix.net

7. Instalação As últimas versões de servidores costumam vir com o JSF instalado Para usar o JSF, seguir seguintes passos: Copiar os JARs para a parta WEB-INF/lib jsf-api.jar jsf-impl.jar Bibliotecas Commons Java Standard Tag Libraries Biblioteca Facelets (opcional) Arquivo de Configuração faces-config.xml

8. Web.xml <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>/faces/*</url-pattern> </servlet-mapping>

9. Arquitetura

10. Descrição JSF conecta view e controlador Um bean pode ser conectado diretamente a um método controlador (get & set) <h:inputText value=&quot;#{user.name}&quot;/> JSF opera como controlador quando faz com que o clique de um botão invoque um método no lado servidor <h:commandButton value=&quot;Login&quot; action=&quot;#{user.check}&quot;/>

11. Descrição Conversão de Dados Usuários entram dados em formato String Objetos de negócio necessitam de strings, inteiros, decimais e datas JSF faz a conversão automática dos dados Validação e Tratamento de Erros JSF torna fácil a inclusão de validações como: “valor requerido”, “valor deve ser inteiro” Ao entrar com dados inválidos, faz-se necessário mostrar os dados errados JSF trata da maior parte da tarefa de converter dados e validar/tratar erros

12. Descrição Internacionalização JSF permite criar facilmente aplicações internacionalizadas Componentes Customizados Desenvolvedores podem desenvolver componentes sofisticados e podem utilizar nas páginas

13. Descrição Renders Alternativos Por default, o componente é gerado para HTML Mas, pode gerar outras saídas: XML, WML Suporte a ferramentas Netbeans Eclipse Estilo drag-and-drop

14. Fluxo Geral

15. Componentes <h:form> Nome: <h:inputText/> Telefone: <h:inputText/> <h:commandButton/> </h:form>

16. Componentes Todo o texto que não é JSF tag é simplesmente passado adiante As tags h:form, h:inputText, h:inputSecret são convertidas para HTML Cada uma das tags é associada com um determinado componente (classe) Cada classe tem um renderer que gera a saída (HTML por padrão) O processo de gerar saída da árvore de componentes gráficos é chamado encode

17. Componentes

18. Ciclo de Vida

19. Ciclo de Vida

20. Restore View Restaurar Visualização Reconstrói a árvore de componentes da visualização correspondente Se a requisição for a primeira, a árvore de visualização é criada e enviado para o render Response

21. Apply Request Values Depois da árvore de componentes ser restaurada, cada componente tem seu valor do parâmetro atualizado de acordo com o método decode. Se algum erro de conversão acontecer, ele é empilhado no FacesContext e exibido na página Exibido na fase de Render Response. Se algum método chamar o método renderResponse o ciclo pula para a fase de renderização.

22. Process Validation Durante esta fase, são feitas todas as validações registradas no componente. Se o valor for inválido, as mensagens são adicionadas no FacesContext. Se qualquer validador ou listener de evento chamar o renderResponse, o ciclo pula as outra fases. Se houver a necessidade de redirecionar para uma página não JSF, é feita uma chamada FacesContext.responseComplete.

23. Update Model Values Caso os valores tenham sido convertidos com sucesso e tenham sido validados, os Managed Beans são atualizados. Ao fim desta fase, os componentes estão sincronizados com a árvore de componentes JSF.

24. Invoke Application Esta fase é a chamada do action controller. Chama o modelo e retorna a regra de navegação.

25. Render Response Nesta fase, a árvore de componentes serverFaces é renderizada para o formato alvo Normalmente HTML É possível renderizar para outros formatos: WML XML Etc...

26. Projeto e Desenvolvimento de Sistemas Web Web 2 Prof. Frank Navegação de páginas

27. Configuração de navegação <navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>listar</from-outcome> <to-view-id>/listar.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>cadastrar</from-outcome> <to-view-id>/cadastrar.jsp</to-view-id> </navigation-case> </navigation-rule>

28. Navegação de páginas <navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome> listar </from-outcome> <to-view-id>/listar.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome> cadastrar </from-outcome> <to-view-id>/cadastrar.jsp</to-view-id> </navigation-case> </navigation-rule> index.jsp listar.jsp cadastrar.jsp

29. Navegação Dinâmica Formulário Formulário Exemplo: Reservar Passagem Classe Java String processar() over-booking sucesso lotado

30. Configuração <navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome> over-booking </from-outcome> <to-view-id>/over.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome> sucesso </from-outcome> <to-view-id>/sucesso.jsp</to-view-id> </navigation-case> </navigation-rule>

31. Managed bean Um Managed bean é uma classe cadastrada no Serves Faces e identificada através de um alias Permite invocar um formulário diretamente de um método Funciona como elemento de controle Chamando o modelo Escolhendo a visualização Utilizado para navegação dinâmica (através do retorno do método)

32. Definindo o Managed bean no FaceContext.xml <faces-config> <managed-bean> <managed-bean-name> nome </managed-bean-name> <managed-bean-class> classe </managed-bean-class> <managed-bean-scope> request | session | application </managed-bean-scope> </managed-bean> </faces-config>

33. Usando o managed bean Como chamar? Ao invés de colocar a String na action <h:commandLink value=&quot;Voltar“ action=&quot;index&quot;/> Usa-se a chamada ao Managed Bean <h:commandLink value=&quot; Voltar “ action=“#{beanName.metodo}&quot;/> A declaração do método deve ser public String metodo() { .... }

34. Exemplo... Uma página com um formulário que recebe um valor Caso o valor digitado seja ímpar, redirecionar para uma página Caso o valor seja par, redirecionar para outra página

35. Exemplo de managed bean package curso.jsf; public class Valor { private int valor; public void setValor(int valor) {this.valor = valor;} public int getValor() {return valor;} public String processar() { if ( valor % 2 == 0 ) { return “par”; } else { return “impar”; } } }

36. Exemplo de faces-config <faces-config> <managed-bean> <managed-bean-name> bean </managed-bean-name> <managed-bean-class> curso.jsf.Valor </managed-bean-class> <managed-bean-scope> request </managed-bean-scope> </managed-bean> </faces-config>

37. Exemplo de navegação <navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>par</from-outcome> <to-view-id>/par.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>impar</from-outcome> <to-view-id>/impar.jsp</to-view-id> </navigation-case> </navigation-rule>

38. Exemplo de formulário <f:view> <h:form> Valor: <h:inputText value=&quot;#{bean.valor}&quot;/> <br/> <h:commandButton value=“Enviar“ action=&quot;#{bean.escolher}&quot;/> </h:form> </f:view>

39. Funcionamento Quando o formulário é enviado, os dados são preenchidos no managed Bean e o método escolher é chamado Baseado no retorno do método a escolha de navegação é feita Baseada nos navigation-rules.

40. Parte prática