Download - WEB 2 - Aula 01 - 02.08
![Page 1: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/1.jpg)
Projeto e Desenvolvimento de Sistemas Web
Web 2Prof. Frank
Camada de Apresentação: JSF
(Iniciar o Netbeans)
![Page 2: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/2.jpg)
Desenvolvimento em camadas de uma aplicação
Camada de Apresentação
Camada de Negócios
Camada de PersistênciaBanco de dados
![Page 3: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/3.jpg)
Desenvolvimento em camadas de uma aplicação Web JEE
Camada de Apresentação
JSP/JSF
Camada de Negócios
Session Beans / MDB
Camada de Persistência
JPA
Java Enterprise E
dition
Banco de dados
![Page 4: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/4.jpg)
Desenvolvimento em camadas de uma aplicação Web Spring
Camada de Apresentação
JSP/JSF
Camada de Negócios
POJO
Camada de Persistência
JPA / Hibernate
Spring
Banco de dados
![Page 5: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/5.jpg)
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?
![Page 6: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/6.jpg)
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
![Page 7: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/7.jpg)
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
![Page 8: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/8.jpg)
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>
![Page 9: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/9.jpg)
Arquitetura
![Page 10: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/10.jpg)
Descrição
JSF conecta view e controlador Um bean pode ser conectado diretamente a
um método controlador (get & set) <h:inputText value="#{user.name}"/>
JSF opera como controlador quando faz com que o clique de um botão invoque um método no lado servidor <h:commandButton value="Login" action="#{user.check}"/>
![Page 11: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/11.jpg)
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
![Page 12: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/12.jpg)
Descrição
Internacionalização JSF permite criar facilmente aplicações
internacionalizadas Componentes Customizados
Desenvolvedores podem desenvolver componentes sofisticados e podem utilizar nas páginas
![Page 13: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/13.jpg)
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
![Page 14: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/14.jpg)
Fluxo Geral
![Page 15: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/15.jpg)
Componentes
<h:form>
Nome: <h:inputText/>
Telefone: <h:inputText/>
<h:commandButton/>
</h:form>
![Page 16: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/16.jpg)
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
![Page 17: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/17.jpg)
Componentes
![Page 18: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/18.jpg)
Ciclo de Vida
![Page 19: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/19.jpg)
Ciclo de Vida
![Page 20: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/20.jpg)
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
![Page 21: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/21.jpg)
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.
![Page 22: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/22.jpg)
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.
![Page 23: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/23.jpg)
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.
![Page 24: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/24.jpg)
Invoke Application
Esta fase é a chamada do action controller. Chama o modelo e retorna a regra de
navegação.
![Page 25: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/25.jpg)
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...
![Page 26: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/26.jpg)
Projeto e Desenvolvimento de Sistemas Web
Web 2
Prof. Frank
Navegação de páginas
![Page 27: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/27.jpg)
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>
![Page 28: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/28.jpg)
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.jspindex.jsp
listar.jsplistar.jsp cadastrar.jspcadastrar.jsp
![Page 29: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/29.jpg)
Navegação Dinâmica
Formulário
Formulário
Exemplo: Reservar Passagem
Classe JavaString
processar()
over-booking
sucesso
lotado
![Page 30: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/30.jpg)
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>
![Page 31: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/31.jpg)
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)
![Page 32: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/32.jpg)
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>
![Page 33: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/33.jpg)
Usando o managed bean
Como chamar? Ao invés de colocar a String na action
<h:commandLink value="Voltar“ action="index"/>
Usa-se a chamada ao Managed Bean <h:commandLink value="Voltar“ action=“#{beanName.metodo}"/>
A declaração do método deve ser public String metodo() { .... }
![Page 34: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/34.jpg)
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
![Page 35: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/35.jpg)
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”;}
}}
![Page 36: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/36.jpg)
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>
![Page 37: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/37.jpg)
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>
![Page 38: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/38.jpg)
Exemplo de formulário
<f:view><h:form> Valor: <h:inputText value="#{bean.valor}"/> <br/>
<h:commandButton value=“Enviar“ action="#{bean.escolher}"/></h:form></f:view>
![Page 39: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/39.jpg)
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.
![Page 40: WEB 2 - Aula 01 - 02.08](https://reader036.vdocuments.pub/reader036/viewer/2022062709/558fd1851a28ab391b8b477d/html5/thumbnails/40.jpg)
Parte prática