WEB 2 - Aula 01 - 02.08

2,268 views
2,191 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,268
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
87
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

WEB 2 - Aula 01 - 02.08

  1. 1. Projeto e Desenvolvimento de Sistemas Web Web 2 Prof. Frank Camada de Apresentação: JSF (Iniciar o Netbeans)
  2. 2. Desenvolvimento em camadas de uma aplicação Banco de dados Camada de Persistência Camada de Negócios Camada de Apresentação
  3. 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. 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. 5. Camada de apresentação <ul><ul><li>Abordagem orientada a páginas </li></ul></ul><ul><ul><ul><li>Servlets </li></ul></ul></ul><ul><ul><ul><li>Java Server Pages </li></ul></ul></ul><ul><ul><li>Abordagem orientada a framework MVC 2 </li></ul></ul><ul><ul><ul><li>Struts, WebWork, Spring MVC + Web Flow, FreeMarker, Velocity </li></ul></ul></ul><ul><ul><li>Abordagem orientada a framework de componentes </li></ul></ul><ul><ul><ul><li>JSF, Tapestry, Wicket </li></ul></ul></ul><ul><ul><li>Ajax </li></ul></ul><ul><ul><li>Por que usar frameworks? </li></ul></ul>
  6. 6. Características de JSF <ul><ul><li>Orientado a componentes </li></ul></ul><ul><ul><li>Manipulação de Eventos </li></ul></ul><ul><ul><li>Implementação de controladores </li></ul></ul><ul><ul><ul><li>Chamada direta de métodos controladores a partir da view. </li></ul></ul></ul><ul><ul><li>Independente de visualização (html, xml) </li></ul></ul><ul><ul><li>Padrão JEE </li></ul></ul><ul><ul><li>Ferramentas </li></ul></ul><ul><ul><li>Bibliotecas: MyFaces, RichFaces, Facelets </li></ul></ul><ul><ul><li>Bibliotecas: http://www.jsfmatrix.net </li></ul></ul>
  7. 7. Instalação <ul><li>As últimas versões de servidores costumam vir com o JSF instalado </li></ul><ul><li>Para usar o JSF, seguir seguintes passos: </li></ul><ul><ul><li>Copiar os JARs para a parta WEB-INF/lib </li></ul></ul><ul><ul><ul><li>jsf-api.jar </li></ul></ul></ul><ul><ul><ul><li>jsf-impl.jar </li></ul></ul></ul><ul><ul><ul><li>Bibliotecas Commons </li></ul></ul></ul><ul><ul><ul><li>Java Standard Tag Libraries </li></ul></ul></ul><ul><ul><ul><li>Biblioteca Facelets (opcional) </li></ul></ul></ul><ul><ul><li>Arquivo de Configuração </li></ul></ul><ul><ul><ul><li>faces-config.xml </li></ul></ul></ul>
  8. 8. Web.xml <ul><li><servlet> </li></ul><ul><li><servlet-name>Faces Servlet</servlet-name> </li></ul><ul><li><servlet-class> javax.faces.webapp.FacesServlet </li></ul><ul><li></servlet-class> </li></ul><ul><li><load-on-startup>1</load-on-startup> </li></ul><ul><li></servlet> </li></ul><ul><li><servlet-mapping> </li></ul><ul><li><servlet-name>Faces Servlet</servlet-name> </li></ul><ul><li><url-pattern>/faces/*</url-pattern> </li></ul><ul><li></servlet-mapping> </li></ul>
  9. 9. Arquitetura
  10. 10. Descrição <ul><li>JSF conecta view e controlador </li></ul><ul><li>Um bean pode ser conectado diretamente a um método controlador (get & set) </li></ul><ul><ul><li><h:inputText value=&quot;#{user.name}&quot;/> </li></ul></ul><ul><li>JSF opera como controlador quando faz com que o clique de um botão invoque um método no lado servidor </li></ul><ul><ul><li><h:commandButton value=&quot;Login&quot; action=&quot;#{user.check}&quot;/> </li></ul></ul>
  11. 11. Descrição <ul><li>Conversão de Dados </li></ul><ul><ul><li>Usuários entram dados em formato String </li></ul></ul><ul><ul><li>Objetos de negócio necessitam de strings, inteiros, decimais e datas </li></ul></ul><ul><ul><li>JSF faz a conversão automática dos dados </li></ul></ul><ul><li>Validação e Tratamento de Erros </li></ul><ul><ul><li>JSF torna fácil a inclusão de validações como: “valor requerido”, “valor deve ser inteiro” </li></ul></ul><ul><ul><li>Ao entrar com dados inválidos, faz-se necessário mostrar os dados errados </li></ul></ul><ul><ul><li>JSF trata da maior parte da tarefa de converter dados e validar/tratar erros </li></ul></ul>
  12. 12. Descrição <ul><li>Internacionalização </li></ul><ul><ul><li>JSF permite criar facilmente aplicações internacionalizadas </li></ul></ul><ul><li>Componentes Customizados </li></ul><ul><ul><li>Desenvolvedores podem desenvolver componentes sofisticados e podem utilizar nas páginas </li></ul></ul>
  13. 13. Descrição <ul><li>Renders Alternativos </li></ul><ul><ul><li>Por default, o componente é gerado para HTML </li></ul></ul><ul><ul><li>Mas, pode gerar outras saídas: XML, WML </li></ul></ul><ul><li>Suporte a ferramentas </li></ul><ul><ul><li>Netbeans </li></ul></ul><ul><ul><li>Eclipse </li></ul></ul><ul><ul><li>Estilo drag-and-drop </li></ul></ul>
  14. 14. Fluxo Geral
  15. 15. Componentes <ul><li><h:form> </li></ul><ul><li>Nome: <h:inputText/> </li></ul><ul><li>Telefone: <h:inputText/> </li></ul><ul><li><h:commandButton/> </li></ul><ul><li></h:form> </li></ul>
  16. 16. Componentes <ul><li>Todo o texto que não é JSF tag é simplesmente passado adiante </li></ul><ul><li>As tags h:form, h:inputText, h:inputSecret são convertidas para HTML </li></ul><ul><ul><li>Cada uma das tags é associada com um determinado componente (classe) </li></ul></ul><ul><ul><li>Cada classe tem um renderer que gera a saída (HTML por padrão) </li></ul></ul><ul><ul><li>O processo de gerar saída da árvore de componentes gráficos é chamado encode </li></ul></ul>
  17. 17. Componentes
  18. 18. Ciclo de Vida
  19. 19. Ciclo de Vida
  20. 20. Restore View <ul><li>Restaurar Visualização </li></ul><ul><ul><li>Reconstrói a árvore de componentes da visualização correspondente </li></ul></ul><ul><ul><li>Se a requisição for a primeira, a árvore de visualização é criada e enviado para o render Response </li></ul></ul>
  21. 21. Apply Request Values <ul><li>Depois da árvore de componentes ser restaurada, cada componente tem seu valor do parâmetro atualizado de acordo com o método decode. </li></ul><ul><li>Se algum erro de conversão acontecer, ele é empilhado no FacesContext e exibido na página </li></ul><ul><ul><li>Exibido na fase de Render Response. </li></ul></ul><ul><li>Se algum método chamar o método renderResponse o ciclo pula para a fase de renderização. </li></ul>
  22. 22. Process Validation <ul><li>Durante esta fase, são feitas todas as validações registradas no componente. </li></ul><ul><li>Se o valor for inválido, as mensagens são adicionadas no FacesContext. </li></ul><ul><li>Se qualquer validador ou listener de evento chamar o renderResponse, o ciclo pula as outra fases. </li></ul><ul><li>Se houver a necessidade de redirecionar para uma página não JSF, é feita uma chamada FacesContext.responseComplete. </li></ul>
  23. 23. Update Model Values <ul><li>Caso os valores tenham sido convertidos com sucesso e tenham sido validados, os Managed Beans são atualizados. </li></ul><ul><li>Ao fim desta fase, os componentes estão sincronizados com a árvore de componentes JSF. </li></ul>
  24. 24. Invoke Application <ul><li>Esta fase é a chamada do action controller. </li></ul><ul><li>Chama o modelo e retorna a regra de navegação. </li></ul>
  25. 25. Render Response <ul><li>Nesta fase, a árvore de componentes serverFaces é renderizada para o formato alvo </li></ul><ul><ul><li>Normalmente HTML </li></ul></ul><ul><li>É possível renderizar para outros formatos: </li></ul><ul><ul><li>WML </li></ul></ul><ul><ul><li>XML </li></ul></ul><ul><ul><li>Etc... </li></ul></ul>
  26. 26. Projeto e Desenvolvimento de Sistemas Web Web 2 Prof. Frank Navegação de páginas
  27. 27. Configuração de navegação <ul><li><navigation-rule> </li></ul><ul><li><from-view-id>/index.jsp</from-view-id> </li></ul><ul><li><navigation-case> </li></ul><ul><li><from-outcome>listar</from-outcome> </li></ul><ul><li><to-view-id>/listar.jsp</to-view-id> </li></ul><ul><li></navigation-case> </li></ul><ul><li><navigation-case> </li></ul><ul><li><from-outcome>cadastrar</from-outcome> </li></ul><ul><li><to-view-id>/cadastrar.jsp</to-view-id> </li></ul><ul><li></navigation-case> </li></ul><ul><li></navigation-rule> </li></ul>
  28. 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. 29. Navegação Dinâmica Formulário Formulário Exemplo: Reservar Passagem Classe Java String processar() over-booking sucesso lotado
  30. 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. 31. Managed bean <ul><li>Um Managed bean é uma classe cadastrada no Serves Faces e identificada através de um alias </li></ul><ul><li>Permite invocar um formulário diretamente de um método </li></ul><ul><li>Funciona como elemento de controle </li></ul><ul><ul><li>Chamando o modelo </li></ul></ul><ul><ul><li>Escolhendo a visualização </li></ul></ul><ul><li>Utilizado para navegação dinâmica (através do retorno do método) </li></ul>
  32. 32. Definindo o Managed bean no FaceContext.xml <ul><li><faces-config> </li></ul><ul><li><managed-bean> </li></ul><ul><li><managed-bean-name> nome </managed-bean-name> </li></ul><ul><li><managed-bean-class> classe </managed-bean-class> </li></ul><ul><li><managed-bean-scope> request | session | application </managed-bean-scope> </li></ul><ul><li></managed-bean> </li></ul><ul><li></faces-config> </li></ul>
  33. 33. Usando o managed bean <ul><li>Como chamar? </li></ul><ul><ul><li>Ao invés de colocar a String na action </li></ul></ul><ul><ul><ul><li><h:commandLink value=&quot;Voltar“ action=&quot;index&quot;/> </li></ul></ul></ul><ul><ul><li>Usa-se a chamada ao Managed Bean </li></ul></ul><ul><ul><ul><li><h:commandLink value=&quot; Voltar “ action=“#{beanName.metodo}&quot;/> </li></ul></ul></ul><ul><ul><li>A declaração do método deve ser </li></ul></ul><ul><ul><ul><li>public String metodo() { .... } </li></ul></ul></ul>
  34. 34. Exemplo... <ul><li>Uma página com um formulário que recebe um valor </li></ul><ul><ul><li>Caso o valor digitado seja ímpar, redirecionar para uma página </li></ul></ul><ul><ul><li>Caso o valor seja par, redirecionar para outra página </li></ul></ul>
  35. 35. Exemplo de managed bean <ul><li>package curso.jsf; </li></ul><ul><li>public class Valor { </li></ul><ul><li>private int valor; </li></ul><ul><li>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”; } } } </li></ul>
  36. 36. Exemplo de faces-config <ul><li><faces-config> </li></ul><ul><li><managed-bean> </li></ul><ul><li><managed-bean-name> bean </managed-bean-name> </li></ul><ul><li><managed-bean-class> curso.jsf.Valor </managed-bean-class> </li></ul><ul><li><managed-bean-scope> request </managed-bean-scope> </li></ul><ul><li></managed-bean> </li></ul><ul><li></faces-config> </li></ul>
  37. 37. Exemplo de navegação <ul><li><navigation-rule> </li></ul><ul><li><from-view-id>/index.jsp</from-view-id> </li></ul><ul><li><navigation-case> </li></ul><ul><li><from-outcome>par</from-outcome> </li></ul><ul><li><to-view-id>/par.jsp</to-view-id> </li></ul><ul><li></navigation-case> </li></ul><ul><li><navigation-case> </li></ul><ul><li><from-outcome>impar</from-outcome> </li></ul><ul><li><to-view-id>/impar.jsp</to-view-id> </li></ul><ul><li></navigation-case> </li></ul><ul><li></navigation-rule> </li></ul>
  38. 38. Exemplo de formulário <ul><li><f:view> </li></ul><ul><li><h:form> </li></ul><ul><li>Valor: </li></ul><ul><li><h:inputText value=&quot;#{bean.valor}&quot;/> </li></ul><ul><li><br/> </li></ul><ul><li><h:commandButton </li></ul><ul><li>value=“Enviar“ </li></ul><ul><li>action=&quot;#{bean.escolher}&quot;/> </li></ul><ul><li></h:form> </li></ul><ul><li></f:view> </li></ul>
  39. 39. Funcionamento <ul><li>Quando o formulário é enviado, os dados são preenchidos no managed Bean e o método escolher é chamado </li></ul><ul><li>Baseado no retorno do método a escolha de navegação é feita </li></ul><ul><ul><li>Baseada nos navigation-rules. </li></ul></ul>
  40. 40. Parte prática

×