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

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

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

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

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?

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

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

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>

<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=&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;/>

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;/>

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

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

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

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>

<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

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

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.

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.

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.

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.

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...

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>

<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.jsp listar.jsp cadastrar.jsp

Navegação Dinâmica Formulário Formulário Exemplo: Reservar Passagem Classe Java String 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)

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>

<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=&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() { .... }

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() { .... }

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

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”; } } }

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>

<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>

<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=&quot;#{bean.valor}&quot;/> <br/> <h:commandButton value=“Enviar“ action=&quot;#{bean.escolher}&quot;/> </h:form> </f:view>

<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>

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.

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