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