web 2 - aula 01 - 02.08
TRANSCRIPT
Projeto e Desenvolvimento de Sistemas Web
Web 2Prof. Frank
Camada de Apresentação: JSF
(Iniciar o Netbeans)
Desenvolvimento em camadas de uma aplicação
Camada de Apresentação
Camada de Negócios
Camada de PersistênciaBanco de dados
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
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
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?
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
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
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>
Arquitetura
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}"/>
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
Descrição
Internacionalização JSF permite criar facilmente aplicações
internacionalizadas Componentes Customizados
Desenvolvedores podem desenvolver componentes sofisticados e podem utilizar nas páginas
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
Fluxo Geral
Componentes
<h:form>
Nome: <h:inputText/>
Telefone: <h:inputText/>
<h:commandButton/>
</h:form>
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
Componentes
Ciclo de Vida
Ciclo de Vida
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
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.
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.
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.
Invoke Application
Esta fase é a chamada do action controller. Chama o modelo e retorna a regra de
navegação.
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...
Projeto e Desenvolvimento de Sistemas Web
Web 2
Prof. Frank
Navegação de páginas
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>
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
Navegação Dinâmica
Formulário
Formulário
Exemplo: Reservar Passagem
Classe JavaString
processar()
over-booking
sucesso
lotado
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>
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)
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>
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() { .... }
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
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”;}
}}
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>
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>
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>
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.
Parte prática