Vous êtes sur la page 1sur 61

Java Server Faces

Itamir de Morais Barroca Filho Mario V. Andrade de Melo Neto

Contedo
           

MVC O que JSF? Instalando o JSF Servios JSF Rendering Navegao de Pginas Managed-Bean JSF Expression Language Tratamento de Eventos Tags JSF Data tables Componentes MyFaces

MVC Model-View-Controller
 

Programao orientada a objetos Padro de Projeto que possui as caractersticas:


Diviso de responsabilidades; Separao de camadas; Reusabilidade; Trs camadas: modelo, visualizao e controle.

MVC Model-View-Controller
Camada de Apresentao JSP, Swing, SWT

Camada de Aplicao Faades, Bussines Delegates, Actions

Camada de Domnio Objetos de domnio, lgica de negcio

Camada de Persistncia DAOs, JDBC, Hibernate

Java Server Faces




Framework MVC que permite:


Manipulao de eventos Implementao flexvel de controladores


Chamada de mtodos controladores diretamente a partir da visualizao. Pode-se utilizar JSF para gerar views que no sejam HTML

Independente de visualizao


Framework padro JEE (Java Enterprise Edition)

Instalando o Java Server Faces




Para utilizao do JSF em um projeto necessrio:


Copiar os JARs para a pasta WEB-INF/lib:
   

jsf-api.jar jsf-impl.jar libs comons JSTL libs faces-config.xml

Criar um arquivo de configurao:




Instalando o Java Server Faces




Para utilizao do JSF em um projeto necessrio:


Definir no web.xml:
<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>

Servios JSF


Arquitetura MVC
JSF conecta view e model Uma view pode ser conectado diretamente ao modelo
<h:inputTextvalue="#{user.name}"/>

JSF opera como controller quando faz com que o clique de um boto invoque um mtodo no lado servidor
<h:commandButton value="Login" action="#{user.check}"/>

Servios JSF


Converso de Dados
Usurios entram dados em formato String Objetos de negcio necessitam de Strings, inteiros, decimais e datas JSF faz a converso automtica dos dados

Validao e Tratamento de Erros


JSF torna fcil a incluso de validaes como: valor requerido, valor deve ser inteiro Ao entrar com dados invlidos, faz-se necessrio mostrar os dados errados JSF trata da maior parte da tarefa tediosa de converter dados e validar/tratar erros

Servios JSF


Componentes Customizados
Desenvolvedores podem desenvolver componentes sofisticados e podem utilizar arrastando para as pginas Exemplo:
<acme:calendar value="#{flight.departure}" startOfWeek="Mon"/>

Servios JSF


Renders Alternativos
Por default, o componente gerado para HTML Mas, fcil estender o framework JSF para gerar outras sadas: XML, WML, etc.

Suporte a ferramentas
JSF ideal para ser utilizado em IDEs Estilo drag-and-drop

Servios JSF


Fluxo Geral

Rendering
<h:form> Nome: <h:inputText/> Telefone: <h:inputText/> <h:commandButton/> </h:form>

Rendering


Todo o texto que no JSF tag simplesmente passado adiante As tags h:form, h:inputText, h:inputSecret so convertidas para HTML
Cada uma das tags associada com um determinado componente Cada classe tem um renderer que gera a sada (HTML por padro) O processo de gerar sada da rvore de componentes grficos chamado encode

Navegao de Pginas


A navegao de pginas em JSF baseado em regras de navegao


Navegao Estticas


Apenas um link estaticamente definido O link dinamicamente descoberto

Navegaes Dinmicas


Navegao de Pginas
index.jsp
index index listar cadastrar

listar.jsp

listar

cadastrar.jsp

Navegao de Pginas


Exemplo: index.jsp
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <f:view> <h1>Pgina Principal</h1> <br/> <h:form> <h:commandButton value=Listar" action=listar"/> <h:commandButton value=Cadastrar" action=cadastrar"/> </h:form> </f:view>

Navegao de Pginas


Cont. do ex.: configurao de navegao


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

Navegao de Pginas


No exemplo esttica:

anterior

temos

navegao

A navegao esttica no muito interessante pois se as identificadores so fixos, no h necessidade de tanta infra-estrutura Uma navegao dinmica necessitaria escolher o from-outcome em tempo de execuo Para isso, necessitamos chamar um cdigo Java para fazer esta deciso

Navegao de Pginas


Navegao dinmica:
over-booking

Formulrio
Exemplo: Reservar Passagem

Classe Java
String processar()

sucesso

lotado

Navegao de Pginas


Navegao dinmica:
<navigation-rule> <from-view-id>/psssagem.jsp</from-view-id> <navigation-case> <from-outcome>lotado</from-outcome> <to-view-id>/lotado.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>overbooking</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 definida no faces-config que identificada atravs de um alias Permite ligar um formulrio diretamente a um ou mais mtodos Funciona como elemento de controle
Chamando o modelo Escolhendo a visualizao

Utilizado para navegao dinmica (atravs do retorno do mtodo)

Managed-Bean


Definio no faces-context
<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


Para chamar um bean:


Usa-se a chamada ao Managed Bean
<h:commandLink value="Voltar action=#{beanName.metodo}"/>

A declarao do mtodo deve ser


public String metodo() { .... }

Managed-Bean


Exemplo: Uma pgina com um formulrio que recebe um valor


Caso o valor digitado seja mpar, redirecionar para uma pgina Caso o valor seja par, redirecionar para outra pgina

Managed-Bean


Cont. do ex.: definio do 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; } } }

Managed-Bean


Cont. do ex.: def. do bean no faces-context


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

Managed-Bean


Cont. do ex.: configuraes de navegao


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

Managed-Bean


Cont. do ex.: formulrio


<f:view> <h:form> Valor: <h:inputText value="#{bean.valor}"/><BR> <h:commandButton value=Enviaraction="#{bean.processar}"/> </h:form> </f:view>

Managed-Bean


Explicao do exemplo:
Quando o formulrio enviado, os dados so preenchidos no managed Bean e o mtodo escolher chamado Baseado no retorno do mtodo a escolha de navegao feita


Baseada nos navigation-rules.

Managed-Bean


Cenrios de utilizao do JSF:


Uma aplicao JSF suporta dois tipos de respostas e dois tipos de requisies:


Faces Response: Uma resposta que foi criada a partir da renderizao de componentes JSF. Non-Faces Response: Uma pgina JSP qualquer que no incorpora componentes JSF. Faces Request: Uma requisio que enviada a partir de uma resposta JSF anterior. Non-faces Request: Uma requisio vinda de uma pgina que no possuiu uma prvia gerao de componentes JSF.

JSF Expression Language




O JSF possui uma linguagem de expresses para simplificar a sintaxe de acesso a informaes:
Ex.:
   

#{cliente.nome} #{cliente.endereco.rua} #{aluno.disciplinas[3].ementa} #{x > 0 ? Positivo : Negativo}

Tratamento de Eventos


Existem dois tipos de eventos


Eventos que iniciam um processamento no back-end Eventos que apenas alteram a interface do usurio

JSF categoriza esses cdigos como:


Action Controllers
 

Disparado depois do bean populado e validado Retorna uma String como navegao Frequentemente disparado antes do bean ser populado e validado Nunca afeta diretamente a navegao de pgina

Event Listeners


Tratamento de Eventos


Action Listeners
Disparado por botes, links, etc.
  

<h:commandButton value=.../> <h:commandButton image=.../> <h:commandLink .../>

ValueChangeListener
Disparado por Caixas de Combinao (Combo Box), checkbox, radio button, textfield, etc
   

<h:selectOneMenu .../> <h:selectBooleanCheckBox .../> <h:selectOneRadio ../> <h:inputText .../>

No submetem o formulrio automaticamente

Tratamento de Eventos


Action Listeners
Quando desejamos que o boto submeta o boto e inicie um processamento de backend, usamos:


<h:commandButton action=.../>

Quando desejamos apenas afetar a interface grfica


<h:commandButton actionListener=.../> Usualmente, desejamos que isso ocorra antes da validao e populao


Pois os formulrios frequentemente esto incompletos

Use o atributo immediate para informar que o evento ser chamado antes do bean ser populado e validado
<h:commandButton actionListener=... immediate=true/>

Tratamento de Eventos


Criando um Tratador de um Evento


Criamos um ActionEvent com as seguintes regras:
  

Sem tipo de retorno (void) ActionEvent est em javax.faces.event. O ActionEvent possui a referncia para o objeto modificado

Exemplo
public void trataEvento(ActionEvent event) { // acao() }

Tratamento de Eventos


ValueChangeListener
Action ligado a um boto Sem tipo de retorno (void)


Formulrio submetido quando clicado

ValueChangeListener ligado com combobox, listbox, radio button, checkbox, textfield, etc.
 

O formulrio no submetido automticamente Necessrio adicionar javascript para submeter o formulrio:


Onclick=submit() e onchange=submit()

Tratamento de Eventos


Implementando um ValueChangeListener
Mtodo que possui um ValueChangeEvent como argumento ValueChangeEvent
  

getComponent: Retorna o componente alterado getOldValue(): Valor anterior getNewValue(): Valor alterado
Necessrio pois provavelmente o Bean ainda no foi populado Valor para um checkbox Boolean Valor para um radio button ou textfield o parametro de request

Tags JSF


As aplicaes JSF fazem uso extensivos de Tag Libraries As Tags JSF no so simplesmente tags HTML, e sim, classes que geram (renderizam) HTML Existem mais de 43 tags no JSF Padro

Tags JSF


Validao da Entrada do Usurio


Duas tarefas que so quase que essenciais em aplicaes Web:


Checar se toda a informao necessria est presente no formato correto Reexibir a informao quando algo estiver incorreto ou mal-formado
Com mensagens de erros mostrando problemas Com informaes corretas mantidas

Isto extremamente chato na maioria das tecnologias de desenvolvimento WEB

Tags JSF


Validao da Entrada do Usurio


Validao Manual
  

Faz a validao nos mtodos sets e gets Programador faz cdigo de validao Validao no mtodo de ao Adiciona required na entrada Usar h:message para informar erros f:convertNumber, f:convertDateTme, f:validateLength, f:validateDoubleRange, f:validateLongRange Sistema reexibe caso erro Herdam Validador, sobrescrevem o validate e so registrados no faces-config.xml

Validao Automtica Implcita


 

Validao automtica explcita


 

Validadores customizveis


Tags JSF


Exemplo de Validao Manual: no bean


private ArrayList erros; public String processar() { if ( idade <= 0 || idade > 120 ) { erros.add(Idade invlida, por favor, redigite-a); } if ( erros.size() > 0 ) { return null; } else { return navegacao; } }

Tags JSF


Cont. ex. de Validao Manual: no bean


public String getErros() { String message; if (erros.size() == 0) { message = ""; } else { message = "<FONT COLOR=RED><B><UL>\n"; for(int i=0; i<erros.size(); i++) { message = message + "<LI>" + (String)erros.get(i) + "\n"; } message = message + "</UL></B></FONT>\n"; } return message ; }

Tags JSF


Cont. ex. de Validao Manual: na jsp

<h:form> <h:outputText value="#{funcioanrio.erros} escape="false"/> ... </h:form>

Tags JSF


Exemplo de validao implcita

<h:form> <TABLE> <TR> <TD>Nome: <h:inputText value="#{funcionario.nome}" required="true id=nome"/> </TD> <TD> <h:message for=nome" styleClass="RED"/> </TD></TR> <TR> <TD>Telefone: <h:inputText value="#{funcionario.telefone}" required="true id=telefone"/></TD> <TD><h:message for=telefone" styleClass="RED"/> </TD></TR> </TABLE></h:form>

Tags JSF


Exemplo de validao explcita

<h:form> <TABLE> <TR> <TD>User ID: <h:inputText value="#{bidBean2.userID} id="userID"> <f:validateLength minimum="5" maximum="6"/> </h:inputText></TD> <TD><h:message for="userID" styleClass="RED"/></TD></TR> </form>

Data Tables


JSF possui uma estrutura para exibir tabelas Realiza iterao automtica sob os elementos da coleo
<h:dataTable value="#{someBean.someCollection} var="rowVar"> <h:column> <h:outputText value="#{rowVar.col1Data}"/> </h:column> <h:column> <h:outputText value="#{rowVar.col2Data}"/> </h:column> </h:dataTable>

Data Tables


value: Uma coleo (lista de bens) Array List ResultSet DataModel (javax.faces.model)

var
Varivel de cada item da coleo

Outros atributos
Atributos padres de tabelas


border, bgcolor, width, cellpadding, cellspacing, frame, ... rowClasses, headerClass, footerClass

Informaes de Estilo


Data Tables


Exemplo Escalao da seleo brasileira (copa 2006)


  

Managed-Bean: Elenco Classe: Jogador Pginas


brasil.jsp: Datatable com a lista dos jogadores

Data Tables


Exemplo
public class Jogador { private int numero; private String nome; private boolean escalado; } public class Elenco { private Collection timeBrasil; }

Data Tables


Cont. do exemplo: listagem


<h:dataTable value="#{elenco.brasil}" var="canarinho" border="1"> <h:column> <h:outputText value="#{canarinho.numero}"/> </h:column> <h:column> <h:outputText value="#{canarinho.nome}"/> </h:column> </h:dataTable>

<f:view>

</f:view>

Data Tables


Cont. do exemplo: listagem

Componentes MyFaces

<t:jscookMenu [ user-role-support-attributes ] [layout="values {hbr, hbl, hur, hul, vbr, vbl, vur, vul}"] [theme="values {ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel}"] Nested <t:navigationMenuItem> or <t:navigationMenuItems> tags (menu items) </t:jscookMenu>

Componentes MyFaces
Tree2 TabbedPane

Componentes MyFaces
Calendrio/Date

Componentes MyFaces
HTML/Editor

Componentes MyFaces
Schedule

Exerccio Nvel I
Crie uma jogo com JSF para adivinhar um nmero secreto. Esse jogo deve possuir duas JSPs: uma onde o usurio digitar um nmero e outra onde ser exibido uma mensagem de sucesso e nmero de tentativas para o acerto, caso o usurio acerte o nmero secreto. -O objetivo desse exerccio entender: a estrutura do faces-config.xml; criao de um bean; criao de JSPs com JSTL.

Exerccio Nvel II
Crie uma aplicao com JSF para cadastro de veculos (use quantos atributos forem necessrios). Dever existir duas JSPs: uma onde sero informados os dados do veculo e outra onde sero listados os veculos cadastrados. Durante o cadastro devem ser validadas as entradas do usurio. Objetivo do exerccio estudar: validaes de entradas do usurio.

Exerccio Nvel III


Crie uma aplicao com JSF para cadastro de veculos (use quantos atributos forem necessrios). Dever existir duas JSPs: uma onde sero informados os dados do veculo e outra onde sero listados os veculos cadastrados. Os veculos cadastrados devero ser persistidos em um banco de dados. -Objetivo do exerccio estudar: integrao de tecnologias (hibernate).

Fim

Dvidas?