Curso JSF

FR-800
JavaServer Faces
Edio 2.0 Maro 2006
http://www.mayworm.com/cursos Marcelo Mayworm - mayworm@ieee.org Luis Henrique Muiz de Carvalho - bulinha@gmail.com
Curso JavaServer Faces
Objetivos
Aprender eficientemente o desenvolvimento de aplicaes WEB utilizando o framework JavaServes Faces. O curso explora aspectos bsicos e avanados do JavaServer Faces, cobrindo tnicas de desenvolvimento para WEB. Tpico especial:
Este curso tambm abordar o uso do MyFaces, uma implementao de cdigo aberto da especificao de JavaServer Faces desenvolvida pela Apache Group.
Objetivos
Ao final desse curso o aluno estar apto a desenvolver uma aplicao WEB utilizando JavaServer Faces.
Pr-requisitos
Conhecimento de Java bsico Conhecimento de Servlet e Java Server Pages Conhecimento de HTML Conhecimento de XML
Qual o seu background? Expectativas? Objetivos?
Livro-texto e fontes
Este curso baseado principalmente no livrotexto
Core JavaServer Faces (Sun Microsystems Press Java Series) - David Geary, Cay Horstmann
Softwares utilizados
Java 5.0
http://java.sun.com/j2se/1.5.0/download.jsp http://www.eclipse.org/webtools/releases/1.0/ http://tomcat.apache.org/ http://myfaces.apache.org/binary.cgi http://www.hsqldb.org/
Eclipse 3.1.1 + WebTools 1.0
Apache Tomcat 5.5.15
MyFaces
Hsqldb 1.8.0
Tpicos

Introduo Managed Beans Navegao Tags Componentes Data Table Conversores e Validadores Eventos e Ciclo de Vida Subvises Componentes Personalizados
Curso JavaServer Faces 7
Calendrio Estimado
Primeiro dia
Introduo Managed Beans, Navegao Tags Componentes Tags Componentes DataTable
Segundo dia
Terceiro dia
Quarto dia
Quinto dia
Calendrio Estimado
Sexto dia
DataTable, Conversores, Validadores Eventos, Sub-Vises Componentes Personalizados Componentes Personalizados MyFaces, Tpicos Extras
Stimo dia
Oitavo dia
Nono dia
Dcimo dia
Sobre o material didtico e CD
Este material didtico um roteiro baseado no livro-texto
Core JavaServer Faces O livro recomendado como referncia didtica A ordem e forma de apresentao so diferentes Nem todos os assuntos so abordados O instrutor poder fornecer material adicional As referncias no so baseadas no livro apostila/ este material dividido em captulos software/ software usado no curso books/ livro usado como base para este material e outros extras/ software e material extra sobre o mesmo tema
Cada mdulo corresponde a um captulo do livro

O CD contm material de pesquisa adicional

Estrutura do curso
O curso alterna apresentaes tericas com exerccios prticos e demonstraes sobre os temas abordados Exemplos e demonstraes
Nesta verso, a maior parte dos exemplos so baseados no livro-texto. 1. Ambiente Java padro 2. Editor de texto (Eclipse) 3. Sistema de gerenciamento de banco de dados (HSQLDB) Os arquivos do JavaServer Faces esto distribudos nas pastas dos exemplos e exerccios quando necessrios Outros recursos sero instalados quando forem necessrios
Ambiente de desenvolvimento inicial

Como tirar melhor proveito desse curso
Faa perguntas (a qualquer hora) Faa os exerccios; refaa os exerccios; invente Leia o livro-texto, outros livros, artigos, revistas Explore os exemplos fornecidos; busque ir alm Adapte suas aplicaes para que usem a tecnologia abordada neste curso Entre em um frum sobre o assunto Se possvel, faa tudo isto durante o curso Faa perguntas (explore o instrutor!)
12
FR-800: JavaServer Faces

Desenvolvendo Aplicaes para WEB com JavaServer Faces
Verso 2.0 Maro 2006
www.mayworm.com/cursos
13
O que JavaServer Faces
JavaServer Faces um dos mais novos frameworks para web a seguir o modelo MVC. Desenvolvido pela Sun como uma especificao (JSR 127) e com a participao de vrias outras empresas/entidades (Apache, Borland, IBM, Oracle, BEA, Macromedia, etc....)
Um dos lideres Craig R. McClanahan o pai do Struts.
14
O que JavaServer Faces
Por ser uma especificao JSF tem a vantagem de possuir mais de uma implementao disponvel. Temos a RI (reference implementation) da prpria Sun e algumas outras:

MyFaces Apache ADF Faces Oracle
Recentemente a Oracle doou o ADF para o grupo Apache, e este ser incorporado ao MyFaces.
Viso geral do JavaServer Faces

MVC Model View Controler Converso de dados Validao e manipulao de erros Internacionalizao Componentes customizados Renderizao Suporte a ferramentas de desenvolvimento
16
Software necessrio

No curso usaremos os seguintes softwares; JDK 5.0
http://java.sun.com/j2se/1.5.0/download.jsp http://www.eclipse.org/webtools http://myfaces.apache.org
Eclipse 3.1.1 + WebTools 1.0
MyFaces 1.1.1
(baixar tambm os exemplos)
Tomcat 5.5.x
http://jakarta.apache.org/tomcat/index.html
Instalao e Configurao
Criar diretrio curso c:\curso. Neste diretrio iremos instalar o JDK e descompactar o eclipse, o MyFaces e Tomcat JDK
Para preparar o nosso ambiente devemos instalar primeiramente o JDK. Ele distribuido como um executvel que deve ser executado. Basta seguir os passos para sua instalao, que bastante simples. Vamos instal-lo no diretrio c:\curso\jdk5.0.
18
Eclipse
O Eclipse e o WebTools podem ser baixados juntos, facilitando a instalao. O arquivo wtp-all-inone-sdk-1.0-win32.zip contem o Eclipse, o WebTools e outros plug-ins necessrios para a utilizao do mesmo (EMF, GEM e JEMF). Como um arquivo zip, basta descompact-lo num diretrio para que possa ser utilizado. Vamos descompactlo no diretrio curso, teremos c:\curso\eclipse
19
MyFaces
O MyFaces tambm distribudo como um arquivo zip, bastando descompact-lo em um diretrio. Este arquivo contm os arquivos:

myfaces-api.jar api JSF (principalmente interfaces) myfaces-impl.jar implementao da api tomahawk.jar componentes extras sandbox.jar mais componentes (usam ajax) myfaces-all.jar todas as anteriores juntas
Descompactando no nosso diretrio de curso teremos c:\curso\myfaces-1.1.1

MyFaces Examples
Para facilitar o nosso trabalho vamos utilizar o arquivo de exemplos myfaces-1.1.1-examples.zip. Este arquivo possui algumas aplicaes de exemplo, uma delas uma aplicao em branco com toda as bibliotecas citadas a cima e com o myfaces previamente configurado. Descompactando este arquivo no nosso diretrio de curso teremos c:\curso\myfaces-1.1.1-examples
21
Blank.war
Iremos usar o arquivo blank.war. Renomeie ele para zip e descompacte no nosso diretrio de curso dentro de um subdiretrio blank (que deve ser criado), assim teremos c:\curso\blank Este arquivo j vem com as libs necessrias para o MyFaces:
commons-beanutils-1.6.1.jar,commons-codec-1.2.jar, commons-collections-3.0.jar, commons-digester-1.5.jar, commons-el.jar, commons-fileupload-1.0.jar, commonsvalidator.jar, commons-lang-2.1.jar, jakarta-oro.jar, jstl.jar, log4j-1.2.8.jar, portlet-api-1.0.jar, struts.jar
22
Tomcat
Como servidor web iremos usar o tomcat, este tambm distribudo em um nico arquivo zip, bastando apenas descompact-lo.
Teremos:
23
Configurando o Eclipse
Apontar o workspace para o diretrio c:\curso\workspace
24
Configurando o JDK
Na opo Window/Preferences, devemos selecionar a opo Java/Instaled JREs. L encontraremos o JRE instalado na pasta Arquivo de Programas do windows, vamos alter-lo para o que instalamos na nossa pasta c:\curso\jdk5.0
25
Configurando o JDK
26
Configurar o tomcat
Na opo Window/Preferences, devemos selecionar a opo Server/Instaled Runtimes.
27
Configurar o tomcat
Selecione Apache Tomcat v5.5
28
Configurar o tomcat
Indique onde est instalado o tomcat
29
Configurar o tomcat
30
Primeira Aplicao em JSF
Criao do projeto no Eclipse

File/New Web/Dynamic Web Project
31
Criao do projeto no Eclipse
Utilize ExemploLogin como nome para o projeto
32
Devemos copiar o contedo da pasta WEB-INF da aplicao de exemplo blank:
Copiar apenas lib, web.xml e examples-config.xml
Renomeie examples-config.xml para exemploconfig.xml
Este o arquivo de configurao do JSF
33
Editar web.xml
Alterar o nome do arquivo de configurao do JSF

<context-param> <param-name>javax.faces.CONFIG_FILES</param-name> <param-value> /WEB-INF/exemplo-config.xml </param-value> </context-param>
34
Criar a classe exemplo.Login

package exemplo; public class Login { private String usuario; private String senha; public String efetuarLogin(){ if ("luis".equals(usuario) && "123456".equals(senha)) return "ok"; else return "falhou"; } public String getSenha() { return senha; } public void setSenha(String senha) { this.senha = senha; } public String getUsuario() { return usuario; } public void setUsuario(String usuario) { this.usuario = usuario; }
35
Configurar o bean no arquivo de configurao: exemplo-config.xml

<managed-bean> <managed-bean-name>LoginBean</managed-bean-name> <managed-bean-class>exemplo.Login</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>
Devemos apagar as configuraes existentes do projeto blank.
36
Criar a pgina login.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <f:view> <html> <head> <title>Exemplo de Login</title> </head> <body> <h:form id="frmLogin"> <h:panelGrid id="tbLogin" columns="2"> <h:outputText value="Usuario" /> <h:inputText id="usuario" value="#{LoginBean.usuario}" /> <h:outputText value="Senha" /> <h:inputSecret id="senha" value="#{LoginBean.senha}" /> </h:panelGrid> <h:commandButton action="#{LoginBean.efetuarLogin}" value="Ok"/> </h:form> </body> </html> </f:view>
37
Criar a pgina inicio.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <f:view> <html> <head> <title>Exemplo de Login</title> </head> <body> <h:outputText value="Login de #{LoginBean.usuario} efetuado com sucesso" /> </body> </html> </f:view>
38
Criar a pgina falha.jsp

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%> <f:view> <html> <head> <title>Exemplo de Login</title> </head> <body> <h:form id="frmFalha"> <h:outputText value="Login invlido!" /> <h:commandButton action="login" value="Voltar"/> </h:form> </body> </html> </f:view>
39
Criar a pgina index.jsp
O JEE no permite arquivos para welcome-files que no sejam jsp/html, por isso usamos este recurso para resolver esta limitao
<%@ page session="false"%> <% response.sendRedirect("login.jsf"); %>
40
Devemos criar a navegao no arquivo exemplo-config.xml

<navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>ok</from-outcome> <to-view-id>/inicio.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>falhou</from-outcome> <to-view-id>/falha.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/falha.jsp</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/login.jsp</to-view-id> </navigation-case> </navigation-rule>
41
Criar uma configurao de servidor e adicionar nosso projeto a esta configurao
Na janela servers, clicar com o boto direito e selecionar novo
42

Selecionaremos Tomcat 5.5 Adicionaremos o projeto
43
Com o servidor configurado temos as seguintes opes:
Debug, Start, Profiling, Restart, Stop, Publish
44
Podemos testar nossa aplicao dentro do prprio Eclipse

Browser interno do Eclipse-WebTools
45
Pginas JSF
Pginas JSF so na verdade pginas JSP utilizando algunas bibliotecas de tags que representam componentes do JSF.
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
CORE: responsvel por componentes no visuais ou auxiliares (conversores, validadores, views, etc...).
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
HTML: responsvel pelos componentes html visuais/layout (inputs, tables, forms, buttons, etc...).
46
ManagedBeans/BackingBeans
Os beans do JSF so POJOS, ou seja classes javas simples, que no tem a necessidade de estender nenhuma classe e/ou implementar nenhuma interface. Suas propriedades so visualisadas/alteradas pelos componentes da pgina (usando o padro de encapsulamento get e set) Os mtodos pblicos desta classe so as aes (actions) de nossa aplicao.
47
Navegao das Pginas
As regras de navegao indicam ao framework qual pgina dever ser exibida aps um formulrio ser processado
<navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>ok</from-outcome> <to-view-id>/inicio.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>falhou</from-outcome> <to-view-id>/falha.jsp</to-view-id> </navigation-case> </navigation-rule>
48
Ciclo de Vida
O Ciclo de vida de uma requisio formado por vrias fases:

Resposta finalizada Resposta finalizada
Restaurar
Request Viso
Aplicar Valores do request
Processar Eventos
Processar Validaes
Processar Eventos
Rendereizar Resposta Resposta finalizada Resposta finalizada
Renderizar Response
Resposta
Processar Eventos
Invocar Aplicao
Processar Eventos
Atualizar Valores do Modelo
Rendereizar Resposta Curso JavaServer Faces 49
Exerccio
Altere o aplicativo de exemplo:
Crie um novo bean que permita armazenar um nome e um sobrenome Deve possuir uma action que ir concatenar as strings passadas em uma nova string Criar a pgina jsp que ter os campos para entrada e a exibio da sada Fazer com que da pgina de inicio.jsp possa acessar esta nova pgina
50
Managed Beans
So classes simples, com atributos encapsulados e mtodos (actions) So usados para:

Componentes de interface Comportamento de um formulrio Objetos de negcio (cujas propriedades so exibidas/editadas nas pginas) Servios, fontes externas de dados, etc...
51
Managed-Beans
So configurados no arquivo de configurao do faces.
Todo bean deve ter:

Nome Classe Scopo
<managed-bean> <managed-bean-name>LoginBean</managed-bean-name> <managed-bean-class>exemplo.Login</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean>
52
Managed-Beans
Os atributos do bean que sero usados devem seguir o padro de encapsulamento:

Devem ser declarados como private Devem ter mtodos get e set pblicos para acesso Atributos boolean podem ter dois tipos de acesso de leitura:

IsAtributo getAtributo
53
Managed-Beans
Os escopos do JSF so os mesmo do container web
Request
Tem vida curta, inicia-se quando uma requisio feita e termina quando a resposta enviada iniciado quando o usurio acessa a aplicao e encerrada quando ocorre um time-out (usurio fica determinado tempo sem acessar) ou esta invalidada Inicia-se quando a aplicao iniciada e termina quando esta encerrada
Session
Application (Servlet-Context)
Managed-Beans
Definindo propriedades
Devemos indicar o nome da propriedade, seu tipo (opcional para strings) e o valor
<managed-property> <property-name>minimo</property-name> <property-class>java.lang.Integer</property-class> <value>1</value> </managed-property> <managed-property> <property-name>maximo</property-name> <property-class>java.lang.Integer</property-class> <value>30</value> </managed-property>
55
Managed-Beans
Inicializando Listas
Podemos definir valores para listas
<managed-property> <property-name>validos</property-name> <list-entries> <value-class>java.lang.Integer</value-class> <value>3</value> <value>5</value> <value>8</value> <value>11</value> <value>17</value> </list-entries> </managed-property>
56
Managed-Beans
Maps
Tambem podemos inicializar mapas

<managed-property> <property-name>usuarios</property-name> <map-entries> <key-class>java.lang.String</key-class> <map-entry> <key>luis</key> <value>Luis Henrique</value> </map-entry> <map-entry> <key>leonardo</key> <value>Leonardo Lopes</value> </map-entry> <map-entry> <key>mayworm</key> <value>Marcelo Mayworm</value> </map-entry> </map-entries> </managed-property>
57
Managed-Beans
Encadeamento de beans
Um Bean pode fazer referncia a outro bean
<managed-bean> <managed-bean-name>Problemas</managed-bean-name> <managed-bean-class>exemplo.Problemas</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>lista</property-name> <list-entries> <value-class>exemplo.problema</value-class> <value>#{problema1}</value> <value>#{problema2}</value> <value>#{...}</value> </list-entries> </managed-property> </managed-bean>
<managed-bean> <managed-bean-name>problema1</managed-bean-name> <managed-bean-class>exemplo.Problema</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>sequencia</property-name> <value>1, 4, 9, 16</value> </managed-property> <managed-property> <property-name>resposta</property-name> <value>25</value> </managed-property> </managed-bean>
58
Managed-Beans
Encadeamento de beans
Escopos compatveis
Escopo dos Beans referenciados None None, aplication None, aplication, session None, aplication, session, request
Escopo do Bean None Application Session Request
59
Managed-Beans
Converso de Valores
Nas definies de propriedades sempre entramos com valores do tipo String, o JSF pode fazer a converso para alguns tipos especficos:
Converso Mtodo valueOf da classe wrapper, Ou 0 se for vazia Mtodo valueOf de Boolean ou false se vazia Primeiro caracter da string, ou (char) 0 se vazia Cpia da String, ou new String() se vazia
Tipo destino int, byte, short, long, float, double, (ou wrapper) Boolean ou boolean Character ou char String ou Object
60
Managed-Beans
Linguagem de Expresses (EL)

<h:inputText value="#{login.usuario}" />
Podemos acessar propriedades de 3 maneiras

login.usuario login["usuario"] login['usuario']
61
Managed-Beans
Utilizao de Map e List
Expresso #{beam.prop}
Tipo de Prop Qualquer Null Qualquer Conversvel em int Conversvel em int Qualquer Modo Escrita Erro Erro bean.put(prop,valor) bean.set(prop,valor) bean[prop] bean.setProp(valor) Modo Leitura Null Null bean.get(prop) bean.get(prop) bean[prop] bean.getProp()
Tipo de Bean Null Qualquer Map List Array Objeto (bean)
possvel usar #{bean.prop.prop.prop} , #{bean['prop'].prop['prop']}, etc....
62
Managed-Beans
Objetos pr-definidos
Valores Map com os parametros do cabealho HTTP, apenas o primeiro valor Map com os parametros do cabealho HTTP, array com todos os valores Map com os parametros da requisio, apenas o primeiro valor Map com os parametros da requisio, array com todos os valores Map com os nomes e valores dos cookies Map com os parametros de inicializao da aplicao Map com os atributos no escopo da requisio Map com os atributos no escopo da sesso Map com os atributos no escopo da aplicao Instancia de FacesContext dessa requisio Instancia de UIViewRoot dessa requisio
Vrivel header headerValues param ParamValues cookie initParam requestScope sessoinScope applicationScope facesContext view
63
Managed-Beans
Operadores

Aritimticos: +, -, *, / (div) e % (mod) Relacionais: < (lt), <= (le), > (gt), >= (ge), == (eq), != (ne) Lgicos: && (and), || (or), ! (not) Operador empty, ele true se for null, array ou String de tamanho 0 ou Collection de tamanho 0 Operador de seleo ternria ?
<h:outputText value="Bem vindo #{usuario.nome}, hoje sua #{usuario.cont} visita." rendered=#{usuario.logado && usuario.temPermissao}" />
64
Managed-Beans
Expresses de Ligao de Mtodo

<h:commandButton action="#{login.efetuarLogin}" />
Podem ser usadas em:

Actions (sem parmetros, retorno String) Validators (parmetro FacesContext, UIComponent, value, retorno void) ActionListeners (parmetro ActionEvent, retorno void) ValueChangeListeners (parmetro ValueChangeEvent, retorno void)
65
Managed-Beans
Internacionalizao
String de mensagens fica em um arquivo do tipo properties

login.usuarioEntry=Usuario login.senhaEntry=Senha
Este arquivo carregado na pgina usando:

<f:loadBundle basename="exemplo.mensagens" var="msg" />
usado como se fosse um bean

<h:outputText value="#{msg['login.usuarioEntry']}" />
Este arquivo seria WEB-INF/classes/exemplo/mensagens.properties
66
Managed-Beans
Internacionalizao
Para vrias lnguas use um sufixo no nome do arquivo indicando o cdigo ISO-639 do idioma
Para o alemo
mensagens_de.properties
(lista de cdigos pode ser encontrada em http://www.loc.gov/standards )
Para caracteres especiais (acentos, etc...) devemos usar o padro unicode
Pode-se utilizar o utilitrio native2ascii do jdk para realizar a converso dos arquivos
67
Managed-Beans
Internacionalizao
Podemos definir uma localidade padro para uma pgina:

<f:view locale="de" />
Podemos tambem definir as localidades padro e opcionais no arquivo de configurao do faces

<application> <locale-config> <default-locale>pt</default-locale> <supported-locale>en</supported-locale> </locale-config> </application>
68
Managed-Beans
Exerccio
Desenvolver uma aplicao que:
Apresente ao usurio uma sequncia de nmeros e solicite a ele o nmero que completa a sequncia (1, 2, 3, 4, 5) Deve haver uma lista contendo vrias sequncias que sero exibidas a medida que o usurio for respondendo Informar quantos foram os acertos A aplicao deve suportar duas linguas
69
Navegao
Navegao esttica
<h:commandButton action="login" value="Ok" /> <navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/login.jsp</to-view-id> </navigation-case> </navigation-rule>
70
Navegao
Agrupando navegaes
Se no informarmos o from-view-id, a navegao ser usada em todas as views

<navigation-rule> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/login.jsp</to-view-id> </navigation-case> </navigation-rule>
71
Navegao
Navegao Dinmica
Depende do resultado de uma action

public String efetuarLogin(){ if ("luis".equals(usuario) && "123456".equals(senha)) return "ok"; else return "falhou"; }
<navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-outcome>ok</from-outcome> <to-view-id>/inicio.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>falhou</from-outcome> <to-view-id>/falha.jsp</to-view-id> </navigation-case> </navigation-rule>
Navegao
Redirecionamento
possvel usar o redirecionamento, fazendo com que a requisio seja encerrada e um redirecionamento HTTP seja enviado ao cliente
<navigation-case> <from-outcome>ok</from-outcome> <to-view-id>/inicio.jsp</to-view-id> <redirect/> </navigation-case>
73
Navegao
Coringas
Podemos usar coringas no elemento from-view-id

<navigation-rule> <from-view-id>/seguranca/*</from-view-id> <navigation-case> ... </navigation-case> </navigation-rule>
A navegao abaixo tem o mesmo funcionamento que o agrupamento (no usar o from-view-id)
ou
<from-view-id>*</from-view-id> <from-view-id>/*</from-view-id>
74
Navegao
From-Action
Caso seja necessrio possivel termos duas actions que retornam a mesma String de ao, mas com destinos diferentes Para isso usamos o from-action
<navigation-case> <from-action>#{login.efetuarLogin}</from-action> <from-outcome>ok</from-outcome> <to-view-id>/inicio.jsp</to-view-id> <redirect/> </navigation-case> <navigation-case> <from-action>#{Numeros.calcularResutlado}</from-action> <from-outcome>ok</from-outcome> <to-view-id>/resultado.jsp</to-view-id> </navigation-case>
75
Navegao
Algortimo de Navegao
1 passo

Recebe outcome, viewID, action Se outcome==null reexibe a pgina atual Combinar todas as regras com o mesmo from-view-id
Se encontrar uma, execute
Combinar todas as regras com coringas no from-view-id que sejam semelhantes ao viewID
Se encontrar uma que se aproxime ao mximo do viewID, execute
Se houver uma regra sem from-view-id, execute Se no encontrar nenhuma regra que coincida, reexiba a pgina atual
Navegao
Algortimo de Navegao
2 passo
Se for encontrado mais de uma regra que corresponda ao viewID

Se uma tiver from-outcome e from-action equivalentes, execute-o Se tiver from-outcome equivalente e no tiver from-action, execute-o Se tiver from-action equivalente e no tiver from-outcome, execute-o Se houver um caso, sem from-outcome e from-action equivalente, execute-o Se no atender a nenhuma das anteriores, reexiba a mesma pgina
77
Navegao
Exerccio
Criar paginas jsp (vazias, apenas com links/command) para recriar a seguinte navegao
Novo pedido Clientes
Novo cliente Inicio Pedidos
Lista de clientes
Lista de pedidos
Alterar cliente
Alterar pedido
78
Tags Padro JSF
Tags fundamentas JSF (core)

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
Tag Descrio view Viso subview Subviso facet Facet de um componente attribute Adiciona um atributo a um componente param Adiciona um parametro a um componente actionListener Adiciona listener de ao para um componente valueChangeListener Adiciona listener de alterao de valor converter Adiciona um conversor a um componente convertDate Adiciona um conversor de datas a um componente convertNumber Adiciona um conversor Numrico a um componente validator Adiciona um validador a um componente validatorDoubleRangeAdiciona um validador de faixa de numeros double validateLength Adiciona um validador de extenso validateLongRange Adiciona um validador de vaixa de numeros long loadBundle Carrega o arquivo de mensagens selectItens Itens para um componente do tipo Select selectItem Item para um comopnente de tipo Select verbatim Adiciona codigo a pgina (no validado pelo JSF
79
Tags Padro JSF
Tags html JSF

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
Descrio Formulario html Tag input type=text Tag textarea Tag input type=password Tag input type=hidden Rtulo de componente Output de texto de uma linha Mesmo que o anterior, mas formata o texto Ancora html Buttom, submit, reset Link Mensagem mais recente para um componente Todas as mensagens
Tag Descrio selectOneListbox Caixa de listagem selectOneMenu Combo selectOneRadio Botes radio selectBooleanCheckboxCheckbox selectManyCheckbox Conjunto de checkbox selectManyListbox Caixa de listagem de seleo multipla selectManyMenu Combo de seleo multipla panelGrid Tabela html panelGroup Componente so dispostos como um dataTable Tabela com mais funes column Coluna de uma data table
Tag form inputText inputTextArea inputSecret inputHidden outputLabel outputText outputFormat outputLink commandButton commandLink message messages
80
Tags Padro JSF
Atributos comuns
Atributos id binding rendered styleClass value valueChangeListener converter validator required Componentes Todos Todos Todos Todos Input, Output, Command Input, Output, Command Input, Output, Input Input Descrio Identificao do componente Referencia para um componente em um bean Indica se o componente ser renderizado (true/false) Nome da classe CSS Valor do componente Metodo de ao do componente Nome do conversor Nome do validador Se o preenchimento obrigatrio (true/false)
81
Tags Padro JSF
IDs
Ids so usadas para identificar os componentes

<h:inputText id="nome" .... /> <h:message for="nome" />
(exibir as mensagens referentes ao componente nome)
82
Tags Padro JSF
Ligaes
Ligaes (binding) permite que tenhamos variveis no bean ligadas a um componente da tela
<h:outputText binding="#{bean.resultado}" /> private UIComponent resultado = new UIOutput(); public UIComponent getResultato(){ return resultado; } public void setResultado(UIComponent resultado){ this.resultado = resultado; }
83
Tags Padro JSF
Formulrios
A tag h:form do JSF representa uma tag form do HTML
Sobre a tag form:

Sempre usado o mtodo post A action do form definida como sendo a prpria pgina jsf binding, id, rendered, styleClass accept, acceptcharset, dir, enctype, lang, style, target, title onblur, onchange, onclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, omnouseover, onreset, onsubmit
Atributos:

84
Tags JSF Padro
Campos Texto e rea de texto
Temos 3 tags diferentes para entrada de texto:

h:inputText h:inputSecret h:inputTextarea cols e rows (apenas para textarea) redisplay (apenas para secret)
Possuem os seguintes atributos:

Indica se o valor passado vai ser reexibido quando a pgina voltar da requisio
valueChangeListener
85
Tags JSF Padro
Campos Texto e rea de texto
Atributos (cont.)
bindig, converter, id, rendered, required, styleClass, value, validator (atributos bsicos) Accesskey, alt, dir, disabled, lang, maxlength, readonly, size, style, tabindex, title (atributos HTML 4.0) onblur, onchange, onclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, omnouseover, onreset, onsubmit
86
Tags JSF Padro
Exibio de textos
Tags
h:outputText
Somente exibo texto na pgina, mas se for passado um valor para styleClass, este texto fica dentro de um span com o class contendo o valor do styleClass passado Como outputText se receber um styleClass escrito dentro de um span Pode receber parmetros para o texto
<h:outputFormat value="{0} tem {1} anos"> <h:paran value="Luis"/> <h:param value="31"/> </h:outputFormat>
h:outputFormat

87
Tags JSF Padro
Exibio de textos
Tags
h:outputLabel
Semelhante a outputText, mas possi o atributo for que indica o id do componente ao qual este label pertence
Atributos para outputText, outputLabel e outputFormat
escape
Se true utiliza cdigos escape para os caracterers <, > e & (default falso)
binding, converter, id, rendered, styleClass, value Style, title (atributos HTML 4.0)
Tags JSF Padro
Exibindo imagens
Para exibir imagens usamos a tag h:graphicImage

Ela transformada na tag <img > do html Atributos

Binding, id, rendered, styleClass, value alt, dir, height, ismap, lang, longdesc, style, title, url, usemap, width onblur, onchange, onclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, omnouseover, onreset, onsubmit
<h:graphicImage value="/imagens/logo.jpg" />
89
Tags JSF Padro
Campos escondidos
A tag h:inputHidden usada para armezenar valores ocultos no formulrio

transformada em input type=hidden Atributos
Binding, converter, ind required, validator, value, valueChangeListener
<h:inputHidden value="#{bean.propriedade}" />
90
Tags JSF Padro
Botes e Links
Botes so usados para executar submeter os formulrios e executar actions Usamos a tag commandButton
<h:commandButton value="Ok" action="#{bean.gravar}"/>
Existem 2 tipos de links, um como os botes

<h:commandLink value="xpto" action="#{bean.salvar}"> <h:graphicImage value="/imgs/bg_gravar" /> </h:commandLink>
O outro funciona como um href do html

<h:outputLink value="http://www.java.net"> <h:outputText value="Java.net"/> </h:outputLink>
91
Tags JSF Padro
Atributos de commandButton e commandLink

action handler ou action que determina a prxima pgina na navegao actionListener evento a ser executado image imagem para o commandButton immediate se true as aes e eventos sero executados no inicio do cliclo de vida e no no final type para commandButton: reset, submit, button para commandLink contedo do recurso: text/html, image/gif, audio/basic, etc... value texto exibido no boto ou no link
92
Tags JSF Padro
Atributos para commandButton e comandLink (cont).

accesskey, alt, binding, id, lang, rendered, styleClass dir, disabled, lang, readonly, style, tabindex, title, type Somente para comandLink
coords, href lang, rel, shape, target
onblur, onchange, onclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, omnouseover, onreset, onsubmit
93
Tags JSF Padro
Usando botes
<h:commandButton value="submit" type="submit"/> <h:commandButton value="reset" type="reset"/> <h:commandButton value="Click" type="button" onclick="alert('clicado');" /> <h:commandButton value="submit" type="submit"/> <h:commandButton value="inicio" action="inicio"/> <h:commandButton value="Logout" action="#{bean.logout}"/>
94
Tags JSF Padro

Usando Links
<h:commandLink> <h:outputText value="registrar" /> </h:commandLink> <h:commandLink style="font-style:intalic"> <h:outputText value="#{msg.linkRegistrar}" /> </h:commandLink> <h:commandLink value="#{msg.bemvindo}" action="#{bean.bemVindo}" actionListener="#{bean.eventBemVindo}"> <h:outputText value="registrar" /> </h:commandLink> <h:commandLink> <h:graphicImage value="/imagem/bt.jpg"/> </h:commandLink>
95
Tags JSF Padro
outputLink

Funcionam como a tag <a href> do html Atributos

accesskey, binding, id, lang, rendered, styleClass, value Charset, coords, der, hreflang, rel, rev, shape, style, tabindex, target, title, type onblur, onchange, onclick, onfocus, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, omnouseover, onreset, onsubmit
96
Tags JSF Padro
Usando outputLinks
<h:outputLink value="http://www.java.sun.com"> <h:graphicImage value="/img/logo_sun.jpg"/> </h:outputLink> <h:outputLink value="#{bean.linkSelected}"> <h:outputText value="#{bean.titleLinkSelected}"/> </h:outputLink> <h:outputLink value="#top"> <f:verbatim> <h4>Topo</h4> </f:verbatim> </h:outputLink>
97
Tags JSF Padro
Tags de Seleo
O JSF possui as seguintes tags para seleo:

h:selectBooleanCheckbox h:selectManyCheckBox h:selectOneRadio h:selectOneListBox h:selectManyListBox h:selectOneMenu h:selectManyMenu
98
Tags JSF Padro
Tags de Seleo
Atributos
disabledClass, enabledClass Classe css para elementos desabilitados e abilitados (apenas para selectOneRadio e selectManyCheckbox) layout Especifica a direo que sero dispostos os elementos (LINE DIRECTION e PAGE DIRECTION) binding, converter, id, styleClass, required, rendered, validator, value, valueChangeListener accessKey, border, dir, disabled, lang, readonly, style, size, tabindex, title (border apenas para selectOneRadio e selectManyCheckbox, size selectOneListBox e selectManyListBox) onblur, onchange, .... (evenos html)
99
Tags JSF Padro
Tags de Seleo CheckBox
selectBooleanCheckbox pode ser vinculada a uma propriedade booleana

<h:selectBooleanCheckbox value="#{bean.ativo}" /> private boolean ativo; public boolean getAtivo() { return this.ativo; } public void setAtivo(boolean ativo){ this.ativo=ativo; }
100
Tags JSF Padro
Tags de Seleo CheckBox
selectManyCheckbox pode ser vinculada a um array ou a uma lista

<h:selectManyCheckbox value="#{bean.disponiveis}"> <f:selectItem itemValue="Sala 01"/> <f:selectItem itemValue="Sala 02"/> <f:selectItem itemValue="Sala 03"/> </h:selectManyCheckbox> private String[] disponiveis; public String[] getDisponiveis(){ return this.disponiveis; } public void setDisponiveis(String[] disponiveis){ this.disponiveis=disponiveis; }
101
Tags JSF Padro
Tags de Seleo RadioButton
selectOneRadio pode ser vinculada a um unico valor

<h:selectOneRadio value="#{bean.periodo}"> <h:selectItem itemValue="Manha"/> <h:selectItem itemValue="Tarde"/> <h:selectItem itemValue="Noite"/> </h:selectOneRadio> private String periodo; public String getPeriodo(){ return this.periodo; } public void setPeriodo(String periodo){ this.periodo=periodo; }
102
Tags JSF Padro
Tags de Seleo Combos e Listas
h:selectOneListBox
Seleciona apenas um valor em uma lista Seleciona vrios valores em uma lista Seleciona um valor em uma combo Seleciona vrios valores em uma combo
h:selectManyListBox
h:selectOneMenu
h:selectManyMenu
103
Tags JSF Padro
Tags de Seleo Item
f:selectItem representa um item de uma seleo
Atributos

binding id ID do componente itemDescription usado em ferramentas (no usado no html) itemDisabled booleano, habilita/desabilita item itemLabel texto exibido do item itemValue valor enviado para o servidor value expresso que aponta para uma instncia da classe SelectItem
104
Tags JSF Padro
Classe SelectItem
javax.faces.model.SelectItem

new SelectItem(valor) new SelectItem("valor", "label") new SelectItem("valor","label","descrio") new SelectItem("valor","label","descrio", true/false)
(true/false indica se est habilitado ou desabilitado)
105
Tags JSF Padro
Tags de Seleo Itens
f:selectItems
<h:selectOneRadio> <h:selectItems value="#{bean.opcoes}"/> </selectOneRadio> private SelectItem opcoes = { new SelectItem("C","Casado(a)"), new SelectItem("S","Solteiro(a)"), new SelectItem("V","Viuvo(a)"), new SelectItem("D","Desquitado(a)") }; public SelectItem[] getOpcoes(){ return this.opcoes; }
106
Tags JSF Padro
Tags de Seleo Itens
Atributo value pode ser:

nica instncia de SelectItem Coleo de instncias de SelectItem Array de Instncias de SelectItem Mapa (map), onde key/value representam label/valor do SelectItem
107
Tags JSF Padro
Tags de Seleo
108
Tags JSF Padro
Tags de Seleo
109
Tags JSF Padro
Tags de seleo Grupos de Itens
Usado para agrupar itens em uma list ou combo
public List getOpcoes(){ List opcoes = new ArrayList(); SelectItemGroup eletronicos = new SelectItemGroup("Eletronicos", //valor "Opcionais Eletronicos", //descricao true, //habilitado/desabilitado getEletronicos()); //array de SelectItens opcoes.add(eletronicos); SelectItemGroup mecanicos = new SelectItemGroup("Mecnicos"); mecanios.setSelectItems(getMecanicos()); opcoes.add(mecanicos); } return opcoes;
110
Tags JSF Padro
Tags de seleo Grupos de Itens

<h:selectOneListbox > <f:selectItems value="#{bean.opcoes}"/> </h:selectOneListbox>
111
Tags JSF Padro
Tags de mensagens
h:message
Exibe uma mensagem referente a um componente que tenha sido armazenada no contexto Exibe todas as mensagens armazenadas no contexto Informao Advertncia Erro Fatal
h:messages
Tipos de mensagens

Tags JSF Padro
Tags de Mensagem
Atributos
Descrio ID ao qual a mensagen se refere (h:message somente) Classe CSS para mensagens de erro Estilo CSS para mensagens de erro Classe CSS para mensagens fatais Estilo CSS para mensagens fatais Somente mensagens globais (h:messages somente) classe CSS para mensagens de informao Estilo CSS para mensagens de informao Layout da mensagem: table ou list (h:messages somente) Se os detalhes das mensagem sero exibidos: true/false Se os sumrios das mensagens sero exibidos: true/false Se os detalhes das mensagens sero exibidos na tooltip (true/false) Classe CSS para mensagens de advertncia Estilo CSS para mensagens de advertncia Atributos bsicos
Atributo for errorClass errorStyle fatalClass fatalStyle globalOnly infoClass infoStyle layout showDetail showSummary tootip warnClass warnStyle binding, id, rendered,
Tags JSF Padro
Painis - h:panelGrid

Renderiza uma tabela HTML Permite definir um cabealho e um roda p para a tabela Permite apenas um nico componente por clula No permite colspan e rowspan
114
Tags JSF Padro
Painis - h:panelGrid
Atributos
Descrio Cor de fundo da tabela Largura da borda Espessura das clulas Espaamento entre as celulas Lista de classes CSS para as colunas Nmero de colunas Classe CSS para o rodap Classe CSS para o cabealho Lados da tabela que sero desenhados: none, above, below, hsides, vsides, lhs, rhs, box, border Lista de classes CSS para as linhas Linhas desenhadas entre as clulas: groups, rows, columns, all Atributos bsicos Atributos HTML Eventos DHTML
Atributo bgcolor border cellpadding cellspacing columnClasses columns footerClass headerClass frame rowClasses rules binding, id, rendered, styleClass dir, lang, style, title, width onclick, onkeydow, etc....
Tags JSF Padro
Painis h:panelGroup
Usado para agrupar vrios componentes (so considerados um componente para uma clula do panelGrid) Atributos
Atributos Descrio binding, id, rendered, styleClassAtributos bsicos style Atributo HTML
116
Tags JSF Padro
Painis f:facet

No tem representao visual utilizado para indicar partes de um componente

header footer title Etc.... name nome da parte que este representa
Atributo
<f:facet name="header"> <h:outputText value="Lista de valores" /> </f:facet>

117
Tags JSF Padro
Painis - Exemplo
<h:panelGrid columns="2"> <f:facet name="header"><h:outputText value="Login"/></f:facet> <h:outputText value="Nome" /> <h:panelGroup> <h:inputText id="nome" value="#{bean.nome}" required="true" /> <h:message for="nome" errorStyle="color:red" /> </h:panelGroup> <h:outputText value="Nome" /> <h:panelGroup> <h:inputSecret id="Senha" value="#{bean.periodo}" required="true" /> <h:message for="senha" errorStyle="color:red" /> </h:panelGroup> <f:facet name="footer"> <h:commandButton value="Ok" action="#{bean.efetuarLogin}"/> </f:facet> </h:panelGrid>
118
Tags JSF Padro
Exerccio
Criar uma tela (jsp e bean) de cadastro de clientes contendo:

Nome*, endereo, telefone, cpf* Sexo* M/F (radio) Estado Civil Casado, Solteiro, Viuvo (combo) Areas de interesse informatica, automveis, esportes, etc... (checkbox) Observaes (text area) Ativo (checkbox - boolean)
Campos com * so obrigatrios, deve-se usar mensagens e painis para o layout

Tag JSF Padro
Exerccio
Utilize o projeto ExemploCadastro e o banco de dados que o acompanha (hsqldb)
Classes
cadastro.dao.ClienteDAO Mtodos: inserirCliente, alterarCliente, consultarCliente, excluirCliente cadastro.dao.InteressesDAO Mtodo: listarIntereses cadastro.dto.Cliente cadastro.util.Banco cadastro.web.ServerListener consulta.jsp
Pgina
Tabela de Dados
h:dataTable
Permite a exibio de dados em formato tabular, utilizando tabelas HTML Aceita as seguintes fontes de dados no atributo value

array java.util.List java.sql.ResultSet javax.servlet.jsp.jstl.sql.Result javax.faceslmodel.DataModel
121
Tabela de Dados
h:dataTable
A medida que executado, cada item do valor passado se torna disponvel dentro do corpo da tag O atributo var de dataTable utilizado para dar um nome ao item durante a execuo Qualquer objeto java pode ser passado para value, neste caso, se for um escalar (no um tipo de coleo) no ocorrer iterao e o mesmo objeto ser passado para o var S permitido dentro da tag dataTable h:columns e f:facet
Tabela de Dados
h:dataTable
atributos
Descrio Cor de fundo da tabela Largura da borda da tabela Espessura das clulas da tabela Espaamento entre as clulas da tabela Lista separada por vrgula das classes CSS para as colunas Indice da primeira linha mostrada Classe CSS para o rodap da tabela Especificao dos lados da tabela: none, above, below, hsides, vsides lhs, rhs, box, border Classe CSS para o cabealho da tabela Lista separada por virgula das classes CSS para as linhas Nmero de linhas a ser exibida Linhas desenhadas entre clulas: groups, rows, columns, all Nome da varivel que representar o item Atributos bsicos Atributos HTML
Atributo bgcolor border cellpadding cellspacing columnClasses first footerClass frame headerClasse rowClasses rows rules var binging, id, rendered, .... dir, lang, style, width
Tabela de Dados
h:column

Representa uma coluna da tabela S permitida a utilizao de componentes faces
Para exibir textos deve-se utilizar h:outputText ou f:verbatim binding id rendered
Atributos:

124
Tabela de Dados
Cabealhos e rodaps
Para termos cabealhos de colunas e rodaps de colunas basta usar facets

footer para rodaps header para cabealhos
Os facets so definidos dentro de cada coluna Podemos ter um cabealho e um rodap para a tabela, basta utilizar facets dentro da dataTable para header e footer (devem estar fora das colunas)
125
Tabela de Dados
Exemplo
<h:dataTable value="#{bean.lista}" var="cliente"> <f:facet name="header"> <h:outputText value="Lista de Clientes"/> </f:facet> <h:column> <f:facet name="header"> <h:outputText value="Nome" /> </f:facet> <h:outputText value="#{cliente.nome}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Telefone" /> </f:facet> <h:outputText value="#{cliente.telefone}"/> </h:column> </h:dataTable>
126
Tabela de Dados
Estilos
Voc pode definir estilos:

Para a tabela como um todo (styleClass) Cabealhos e rodaps de colunas (headerClass e footerClass) Colunas individuais (columnClasses) Linhas individuais (rowClasses)
127
Tabela de Dados
Estilos de Colunas
<style> .tabela { width: 100%; } .cabecalho { font-weight: bold; font-family: sans-serif; background-color: teal; } .colunaNome { background-color: gray; } .colunaTelefone { background-color: silver; } </style> .... ... <h:dataTable value="#{clienteInsert.listaClientes}" var="cliente" styleClass="tabela" headerClass="cabecalho" columnClasses="colunaNome, colunaTelefone">
Tabela de Dados
Estilos de Colunas
129
Tabela de Dados
Estilos de Linhas
<style> .tabela { width: 100%; } .cabecalho { font-weight: bold; font-family: sans-serif; background-color: teal; } .linhaImpar { background-color: yellow; } .linhaPar { background-color: silver; } </style> .... <h:dataTable value="#{clienteInsert.listaClientes}" var="cliente" styleClass="tabela" headerClass="cabecalho" rowClasses="linhaImpar,linhaPar">
Tabela de Dados
Estilos de Linhas
131
Tabela de Dados
Exerccio
Criar uma tela para consultar os clientes cadastrados
Criar um bean para a tela de consulta

Armazenar os dados numa list Usar uma action para ler os dados do banco usando o dao e setar a list Utilizar CSS para formatar a pgina
Criar uma pagina para consulta utilizando dataTable
132
Tabela de Dados
Utilizando componentes nas clulas
Todos os componentes que vimos podem ser usados dentro das celulas de uma tabela Podem ser manipulados da mesma maneira que componentes fora da tabela

Renderizao condicionar Desabit-los Eventos Aes Etc...
Assim como nos componentes da pgina, os valores sero atualizados dentro do bean, mesmo estando dentro de uma list
133
Tabela de Dados
Utilizando componentes nas clulas
134
Tabela de Dados
Dica: selecionar linhas para excluso
Ao invs de termos uma lista de beans cliente, vamos usar um map, que conter o cliente e um valor booleando indicando se a linha foi excluda
List tmp = dao.consultarCliente(); clientes = new ArrayList(); for(int i = 0; i<tmp.size(); i++) { Map mapa = new HashMap(); mapa.put("cliente", tmp.get(i)); mapa.put("excluir", Boolean.valueOf(false)); clientes.add(mapa); }
135
Tabela de Dados

<h:dataTable value="#{clienteInsert.listaExcluir}" var="mapa" styleClass="tabela" headerClass="cabecalho" rowClasses="linhaImpar,linhaPar"> <f:facet name="header"> <h:outputText value="Lista de Clientes"/> </f:facet> <h:column> <f:facet name="header"> <h:outputText value="Excluir" /> </f:facet> <h:selectBooleanCheckbox value="#{mapa.excluir}" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Nome" /> </f:facet> <h:outputText value="#{mapa.cliente.nome}"/> </h:column> ..... <h:commandButton value="Excluir" action="#{bean.excluir}"/>
Tabela de Dados
Na ao do boto excluir basta verificarmos na lista quais linhas possuem no mapa o valor excluir setado para true
137
Tabela de Dados
Exerccio
Seguindo a dica anterior, implemente a excluso no nosso exemplo de cadastro
Crie um bean para a tela de manuteno

Este bean deve ter um atribudo que a lista para excluso Deve-se criar uma ao para excluir as linhas A excluso dever remover do banco as linhas selecionadas A lista dever ser lida novamente ao final da excluso
Crie a tela para manuteno como na dica
138
Tabela de Dados
Modelo de tabelas
Todos os dados passados para um dataTable so empacotados dentro de um modelos Pacote javax.faces.model temos os seguinte modelos usados

ArrayDataModel ListDataModel ResultDataModel ResultSetDataModel ScalarDataModel
139
Tabela de Dados
Modelo de tabelas
Todos os modelos extendem a classe DataModel esta possui os seguintes mtodos:

Descrio Retorna/seta o objeto que contem os dados do modelo Retorna/seta o indice da linha para exibio Retorna o item correspondente ao indice setado Retorna true se a linha est disponvel Retorna o nmero total de linhas
Mtodo get/setWrappedData get/setRowIndex getRowData isRowAvaliable getRowCount
Todos os modelos tem um contrutor que recebe como parametro um objeto do seu tipo correspondente (List, ResultSet, etc...)
Tabela de Dados
Modelo de Tabelas
public ListDataModel getListaExcluir(){ if (dataModel!=null) return dataModel; ClienteDAO dao = new ClienteDAO(); List tmp = dao.consultarCliente(); clientesExcluir = new ArrayList(); for(int i = 0; i<tmp.size(); i++) { Map mapa = new HashMap(); mapa.put("cliente", tmp.get(i)); mapa.put("excluir", Boolean.valueOf(false)); clientesExcluir.add(mapa); } dataModel = new ListDataModel(clientesExcluir); return dataModel; }
141
Tabela de Dados
Modelo de Tabelas
O mtodo getRowData pode ser utilizado para recuperarmos o item de uma linha onde uma action foi acionada:
public String alterar(){ Map mapa = (Map)dataModel.getRowData(); Cliente cliente = (Cliente) mapa.get("cliente"); alterarClienteMB.setCliente(cliente); return "alterarCliente"; }
Tabela de Dados
Exerccio
Implemente a opo de altera no exemplo de cadastro

Troque a lista por um ListDataModel Crie o mtodo alterar no bean Adicione uma coluna para acionar a ao alterar Crie uma tela para alterao (pode ser a mesma de incluso, ctrl+c ;-) Crie um bean e um metodo para atualizar os atributos da tela, a partir de um bean cliente Crie o mtodo que ir atualizar os dados no banco de dados chamando o DAO
Tabela de Dados
Dica: Implementar ordenao
Extender DataModel
package cadastro.mb; import java.util.Collections; import java.util.Comparator; import java.util.List; import java.util.Map; import javax.faces.model.DataModel; import cadastro.dto.Cliente; public class SortedDataModel extends DataModel { List wrappedData = null; int index = 0; public SortedDataModel(List clientes) { public public public public this.wrappedData = clientes;}
int getRowIndex() {return index; } void setRowIndex(int index) {this.index = index;} Object getWrappedData() {return wrappedData; } void setWrappedData(Object data) {wrappedData = (List) data; }
144
Tabela de Dados
public int getRowCount() { return wrappedData != null ? wrappedData.size() : 0; } public Object getRowData() { if (wrappedData != null && index >= 0 && index < wrappedData.size()) { return wrappedData.get(index); } return null; } public boolean isRowAvailable() { if (wrappedData != null && index >= 0 && index < wrappedData.size()) { return true; } return false; }
145
Tabela de Dados

public void ordenarPorNome(){ Collections.sort(wrappedData, comparatorNome); } public static Comparator comparatorNome= new Comparator(){ public int compare(Object o1, Object o2) { Cliente cli1 = (Cliente) ((Map)o1).get("cliente"); Cliente cli2 = (Cliente) ((Map)o2).get("cliente"); return cli1.getNome().compareTo(cli2.getNome()); } };
146
Tabela de Dados

public void ordenarPorTelefone(){ Collections.sort(wrappedData, comparatorTelefone); } public static Comparator comparatorTelefone= new Comparator(){ public int compare(Object o1, Object o2) { Cliente cli1 = (Cliente) ((Map)o1).get("cliente"); Cliente cli2 = (Cliente) ((Map)o2).get("cliente"); return cli1.getTelefone().compareTo(cli2.getTelefone()); } };
147
Tabela de Dados

<h:column> <f:facet name="header"> <h:commandLink action="#{cliente.listaManutencao.ordenarPorNome}"> <h:outputText value="Nome" /> </h:commandLink> </f:facet> <h:outputText value="#{mapa.cliente.nome}" /> </h:column> <h:column> <f:facet name="header"> <h:commandLink action="#{cliente.listaManutencao.ordenarPorTelefone}"> <h:outputText value="Telefone" /> </h:commandLink> </f:facet> <h:outputText value="#{mapa.cliente.telefone}" /> </h:column>
148
Tabela de Dados
149
Tabela de Dados
Exerccio
Implementar o DataModel com capacidades de ordenao
Implementar ordenao por:

Nome Telefone Endereo
150
Conversores e Validadores
Ciclo de vida
O Ciclo de vida de uma requisio JSF possi vrias fases:

Restaurar View Aplicar valores do request Processar validaes Atualizar valores do modelo Executar aplicao
Requisio
Resposta
Renderizar Resposta Curso JavaServer Faces 151
Ciclo de Vida
Restaurar view
Recupera a rvore de componentes que representa a view.
Aplicar valores do request Processar validaes Atualizar valores do modelo Executar aplicao
Requisio Restaurar View
Resposta
Ciclo de vida
Aplicar valores do request

realizada a converso default Converso customizada
Restaurar View Aplicar valores do request Processar validaes Atualizar valores do modelo Executar aplicao
Requisio
Resposta
Ciclo de Vida
Processar validaes
Validao padro Validao customizada: Mtodo de ao Classe de validao customizada Validao de mtodo inline
Processar validaes Atualizar valores do modelo Executar aplicao
Requisio Restaurar View Aplicar valores do request
Resposta
Ciclo de Vida
Atualizar valores do modelo

Os beans (model) so atualizados com os valores dos componentes
Resposta
Ciclo de Vida
Executar aplicao
Chamar os eventos executar os mtodos (aes) Processar a navegao
Resposta
Ciclo de Vida
Renderizar resposta
Valores dos componentes so recuperados para renderizao
Resposta
Processo de converso

Dados lidos da requisio setado no componente o atributo submitedValue exetudado o metodo getAsObject do conversor associado ao componente feita validao (caso haja) mtodo validate Modelo atualizado (bean)
UIInput
Valor submetido=10/11/2003 valor local = objeto tipo Date
Modelo - Bean
DataNascimento = objeto tipo date
158
Conversores padro
f:convertNumber
Tipo String String Int Int Int Int Boolean Boolean java.util.Locale String String Descrio number (default), currency ou percent Padro de formatao, conforme java.text.DecilmalFormat Numero mximo de digitos na parte fracionria Numero mnimo de digitos na parte fracionria Numero mximo de digitos na parte inteira Numero mnimo de digitos na parte inteira Se verdadeiro, considera somente a parte inteira (default: false) Se usa separadores de grupos (default: true) Varivel de locale que sera usada na formatao e no parsing Cdigo monetario isso 4217 Simbolo monetrio a ser usado
Atributo type pattern maxFractionDigits minFractionDigits maxIntegerDigits minIntegerDigits integerOnly groupingUsed locale currencyCode currencySymbol
159
Conversores padro
f:convertDateTime
Tipo String String String Int java.util.Locale java.util.TimeZone Descrio date (default), time ou both default, short, medium, long ou full default, short, medium, long ou full Padro de formatao de acordo com java.text.SimpleDateFormat Localizao cujas preferncias so usadas para parsing e formatao Fuso horrio a ser usado para parsing e formatao
Atributo type dateStyle timeStylle Pattern locale timeZone
160
Atributo Converter
possivel atribuir um conversor a um componente sem a necessidade de usar a tag de converso

<h:inputText id="limite" value="#{clienteInsert.limiteCredido}" converter="javax.faces.Double"/>
Deve-se usar um id definido para o conversor:

javax.faces.DateTime (usado no converterDateTime) javax.faces.Number (usado no converterNumber) Para tipos primitivos e wrappers
javax.faces.Boolean, javax.faces.Byte, javax.faces.Character, javax.faces.Double, javax.faces.Float, javax.faces.Integer, javax.faces.Long javax.faces.Short
javax.faces.BigDecimal e javax.faces.BigInteger
Erros de converso
Componente gera uma mensagem de erro sempre que ocorrer um erro de converso
Deve-se usar h:message ou h:messages para exibir a mensagem
A pgina exibida novamente Dica:
h:messages no muito util para exibir mensagens para cada componente, mais indicado para mensagens globais, mas caso esteja ocorrendo um erro na pgina que voc no consegue identificar, use-o para exibir todas as mensagens (detail=true)
Erros de converso
Para alterar a mensagem padro devemos criar uma nova mensagem no nosso arquivo de mensagens, com o cdigo abaixo

javax.faces.component.UIInput.CONVERSION=.... javax.faces.component.UIInput.CONVERSION_detail=....
Devemos incluir nosso arquivo de mensagens no arquivo de configurao da aplicao

<application> <message-bundle>cadastro.mensagens</message-bundle> </application>
163
Exerccio
Na tela de incluso de clientes
Incluir o campo para data de nascimento do cliente Na tabela, incluir uma coluna com a data de nascimento
Na tela de consulta
164
Validadores padro
Atributos minimum, maximum minimum, maximum minimum, maximum Valida Valor double dentro de uma faixa Valor long dentro de uma faixa String com nmero mximo e mnimo de caracteres
Tag JSP Classe do validador f:validadteDoubleRange DoubleRangeValidator f:validateLongRange f:validateLength LongRangeValidator LengthValidator
<h:inputTextarea id="obs" value="#{clienteInsert.obs}" cols="50" rows="3"> <f:validateLength maximum="400"/> </h:inputTextarea>
165
Valores Obrigatrios
Para obrigar o preenchimento de um componente, basta usar o atributo required=true
<h:inputText id="nome" value="#{clienteInsert.nome}" maxlength="50" required="true"/>
166
Erros de validao
So exibidos da mesma maneira que os erros de converso Mensagens padro:
Mensagem simples
javax.faces.component.UIInput.REQUIRED javax.faces.validator.NOT_IN_RANGE javax.faces.validator.DoubleRangeValidator.MAXIMUM javax.faces.validator.LongRangeValidator.MAXIMUM javax.faces.validator.DoubleRangeValidator.MINIMUM javax.faces.validator.LongRangeValidator.MINIMUM
Mensagem com parametros ( {0} max, {1} min)

167
Erros de validao
Mensagens padro (cont):

javax.faces.validator.DoubleRangeValidator.TYPE javax.faces.validator.LongRangeValidator.TYPE javax.faces.validator.LengthValidator.MAXIMUM javax.faces.validator.LengthValidator.MINIMUM javax.faces.component.UIInput.REQUIRED_detail javax.faces.validator.NOT_IN_RANGE_detail etc....
Estas mensagens tambem tem a opo detail

168
Ignorando a validao e a converso
Caso na tela exista um boto para cancelar a entrada de dados, no desejaremos que seja feita uma validao dos dados entrados (no s validao, mas converso tambem) Para ignorarmos estes passos usamos o atributo immediate
<h:commandLink value="Cancelar" action="#{clienteInsert.cancelar}" immediate="true" />
169
Exerccio
No cadastro de clientes fazer a validao do campo observao, para que este no ultrapasse 200 caracteres.
170
Conversores personalizados
Devemos implementar a interface javax.faces.convert.Converter

Object getAsObject(FacesContext context, UIComponent component, String newValue) String getAsString(FacesContext context, UIComponent component, Object value)
Caso ocorra erro na execuo deve ser lanada a exception javax.faces.convert.ConverterException
171
Exemplo: conversor de Data com suporte a GregorianCalendar

pakage import import import import import import import import converter; java.text.SimpleDateFormat; java.util.Date; java.util.GregorianCalendar; javax.faces.application.FacesMessage; javax.faces.component.UIComponent; javax.faces.context.FacesContext; javax.faces.convert.Converter; javax.faces.convert.ConverterException;
public class DateConverter implements Converter{ private String pattern="dd/MM/yyyy"; .... }
172
public Object getAsObject(FacesContext context, UIComponent component, String value) { if (value==null || value.trim().length()==0) return null; SimpleDateFormat sd = new SimpleDateFormat(pattern); sd.setLenient(false); Object retorno = null; try { Date dt = sd.parse(value); if (component.getValueBinding("value").getType(context) == Date.class) { retorno = dt; } else if (component.getValueBinding("value").getType(context) == GregorianCalendar.class) { retorno = new GregorianCalendar(); ((GregorianCalendar)retorno).setTime(dt); } } catch (Exception e ){ Object[] parametros = new Object[]{value, component.getId()}; FacesMessage mensagem = FacesUtil.getMessage("DATECONVERTER.ERROR", "DATECONVERTER.ERROR_detail", parametros, FacesMessage.SEVERITY_ERROR); throw new ConverterException(mensagem); } return retorno;
public String getAsString(FacesContext context, UIComponent component, Object value) { if (value==null) return ""; SimpleDateFormat sd = new SimpleDateFormat(pattern); sd.setLenient(false); if (value instanceof Date) { return sd.format((Date) value); } if (value instanceof GregorianCalendar) { return sd.format(((GregorianCalendar) value).getTime()); } Object[] parametros = new Object[]{value.getClass(), component.getId()}; FacesMessage mensagem = FacesUtil.getMessage("DATECONVERTER.FATAL", "DATECONVERTER.FATAL_detail", parametros, FacesMessage.SEVERITY_FATAL); throw new ConverterException(mensagem); }
174
Exemplo: configurao
FacesConfig.xml
<application> <message-bundle>mensagens</message-bundle> </application> <converter> <converter-id>dateConverter</converter-id> <converter-class>converter.DateConverter</converter-class> </converter>
175
Exemplo: mesagens
mensagens.properties
DATECONVERTER.ERROR=Data invlida DATECONVERTER.ERROR_detail=O valor {0} entrado no campo {1} invlido DATECONVERTER.FATAL=Tipo de dados invlido DATECONVERTER.FATAL_detail=Tipo de dados {0} invlido no componente {1}
176
Exemplo: utilizao
<h:inputText id="data" value="#{bean.campoData}"> <f:converter converterId="dateConverter" /> </h:inputText>
177
Como ler mensagens:

FacesContext context = FacesContext.getCurrentInstance(); UIViewRoot viewRoot = context.getViewRoot(); Locale locale = viewRoot.getLocale(); String bundleName = context.getApplication().getMessageBundle(); ClassLoader loader = Thread.currentThread().getContextClassLoader(); ResourceBundle bundle = ResourceBundle.getBundle(bundleName, locale, loader); String idMessage = bundle.getString(id); String idDetailMessage = bundle.getString(idDetail); MessageFormat formatter = new MessageFormat(idMessage, locale); String mensagem = formatter.format(parameters); formatter = new MessageFormat(idDetailMessage, locale); String mensagemDetalhe= formatter.format(parameters); FacesMessage fm = new FacesMessage(severity, mensagem, mensagemDetalhe); return fm;
public static FacesMessage getMessage( String id, String idDetail, Object[] parameters, Severity severity) {
178
Como ler Mensagens
FacesContext contexto faces

getViewRoot view da requisio corrente getApplication retorna uma instancia de Application desta aplicao getApplication().getMessageBundle retorna o nome do arquivo de mensagens associado a aplicao
FacesMessage classe que representa uma mensagem do faces
SEVERITY_ERROR, SEVERITY_FATAL, SEVERITY_INFO, SEVERITY_WARN: constantes de tipos de mensagens

Convesores e Validadores
Validadores Personalizados
Devem implementar a interface javax.faces.validator.Validator

void validate(FacesContext context, UIComponent component, Object value)
Em caso de erro de validao deve ser lancaa a exception javax.faces.validator.ValidatorException
180
package converter; import javax.faces.application.FacesMessage; import javax.faces.component.UIComponent; import javax.faces.context.FacesContext; import javax.faces.validator.Validator; import javax.faces.validator.ValidatorException; public class CPFValidator implements Validator{ public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException { if (value==null) return; boolean valido = false; try { valido = valid(value.toString()); } catch (NumberFormatException e) { valido = false; } if (!valido) { Object[] parametros = new Object[]{value.toString(), component.getId()}; FacesMessage mensagem = FacesUtil.getMessage("CPFVALIDATOR.ERROR", "CPFVALIDATOR.ERROR_detail", parametros, FacesMessage.SEVERITY_ERROR); throw new ValidatorException(mensagem); } } Curso JavaServer Faces 181
Exemplo: validador de CPF
private static boolean valid(String cpf) throws NumberFormatException { if (cpf==null || cpf.trim().length()==0) return true; if (cpf.length()!=11){ return false; } //calcula primeiro digito int[] valores = new int[]{10,9,8, 7, 6, 5, 4, 3, 2}; int[] total = new int[9]; int somatorio = 0; for (int i = 0; i<9; i++){ total[i] = valores[i] * (Integer.parseInt(String.valueOf(cpf.charAt(i)))); somatorio+=total[i]; } int resultado = (int) somatorio/11; int resto = somatorio % 11; int primeiroDigito=0; if (resto>2) { primeiroDigito = 11-resto; } (continua)
182
//calcula segundo digito valores = new int[]{11,10,9,8, 7, 6, 5, 4, 3, 2}; total = new int[10]; somatorio = 0; for (int i = 0; i<10; i++){ total[i] = valores[i] * (Integer.parseInt(String.valueOf(cpf.charAt(i)))); somatorio+=total[i]; } resultado = (int) somatorio/11; resto = somatorio % 11; int segundoDigito = 0; if (resto>2) { segundoDigito = 11-resto; } //compara digitos if (cpf.substring(9,11).equals("" + primeiroDigito + "" + segundoDigito)){ return true; } return false; } }
183
Exemplo: configurao
<validator> <validator-id>cpfValidator</validator-id> <validator-class>converter.CPFValidator</validator-class> </validator>
Mensagens
CPFVALIDATOR.ERROR=CPF Invlido CPFVALIDATOR.ERROR_detail=O valor {0} do campo {1} no um CPF vlido
Utilizao
<h:inputText id="cpf" value="#{bean.cpf}"> <f:validator validatorId="cpfValidator"/> </h:inputText>
184
Tag para conversor personalizado
Util para conversores que necessitem de parametros Deve-se criar uma classe que extenda javax.faces.webapp.ConverterTag
No construtor da classe deve ser setado o id do conversor, utilizando super.setConverterId Subrescrever o mtodo createConverter Utilizar o super.createConverter para pegar o conversor
nessesrio criar um arquivo TLD para identificar a nossa tag de conversor

Exemplo: tag para nosso DataConverter

package converter; import javax.faces.application.Application; import javax.faces.context.FacesContext; import javax.faces.convert.Converter; import javax.faces.webapp.ConverterTag; import javax.faces.webapp.UIComponentTag; import javax.servlet.jsp.JspException; public class DataConverterClass extends ConverterTag{ private String pattern; public String getPattern() { return pattern; } public void setPattern(String pattern) { this.pattern = pattern; } public DataConverterClass() { setConverterId("dataConverter"); } (continua)

public Converter createConverter() throws JspException { DateConverter converter = (DateConverter) super.createConverter(); converter.setPattern(eval(getPattern())); return converter; } public static String eval(String expression){ if (expression!=null && UIComponentTag.isValueReference(expression)){ FacesContext context = FacesContext.getCurrentInstance(); Application app = context.getApplication(); return "" + app.createValueBinding(expression).getValue(context); } else return expression; }
187
Conversores Validadores
Salvar estados do conversor

Nossa classe de coverso deve implementar Serializable Ou implementar StateHolder (caso no possa ser usado serializable)

Deve ter um construtor padro Implementar os mtodos Object saveState(FacesContext context) void restoreState(FacesContext context, Object state) Object pode ser um array que ir armazenas as varivies que podem ser serializadas Criar uma propriedade transient (setTransient e isTransient) do tipo boolean (aparentemente no tem efento nenhum (?))
188
Converores e Validadores
Alterar classe do conversor

Implementar Serializable Incluir mtodos de acesso na nossa classe DateConverter para o parametro pattern
public class DateConverter implements Converter, Serializable{ public String getPattern() { return pattern; } public void setPattern(String pattern) { this.pattern = pattern; }
189
Criar arquivo TLD para a tag
<?xml version="1.0" encoding="UTF-8"?> <taglib version="2.0" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee webjsptaglibrary_2_0.xsd"> <tlib-version>1.0</tlib-version> <short-name>convertertag</short-name> <uri>/WEB-INF/ConverterTag</uri> <tag> <name>dataConverter</name> <tag-class>converter.DataConverterTag</tag-class> <body-content>EMPTY</body-content> <attribute> <name>pattern</name> <rtexprvalue>true</rtexprvalue> </attribute> </tag> </taglib>
Utilizao
<%@taglib prefix="cv" uri="/WEB-INF/ConverterTag" %> <h:inputText id="gdata" value="#{teste.data}"> <cv:dataConverter pattern="dd-MM-yyyy"/> </h:inputText>
191
Tag para validadores personalizados
Segue o mesmpo padro de conversores
Deve-se extender a classe javax.faces.webapp.ValidatorTag

No construtor usar setValidatorId Sobrescrever createValidator
Classe do Validator deve implementar Serializable ou StateHolder
Implementar os mtodos saveState restoreState isTransiente setTransient
192
Passando atributos sem usar uma tag personalizada
Utiliza-se a tag f:attribute

<h:inputText id="data" value="#{bean.data}"> <f:converter converterId="dateConverter" /> <f:attribute name="pattern" value="dd-mm-yyyy"/> </h:inputText>
Deve-se pegar o atributo direto do componente

pattern = (String) component.getAttributes().get("pattern");
193
Exerccios
Implementar o conversor de data com suporte a GregorianCalendar

Implementar a tag para receber o parmetro pattern Implementar a classe FacesUtil
Implementar o validador de CPF
194
Eventos
Tipos de Eventos

Eventos de ao Eventos de mudana de valor Eventos de Fase
195
Eventos
Ciclo de Vida
Eventos de mudana de valor
Resposta finalizada
Resposta finalizada
Restaurar
Request Viso
Processar Eventos
Processar Validaes
Processar Eventos
Renderizar Response
Resposta
Processar Eventos
Invocar Aplicao
Processar Eventos
Rendereizar Resposta Curso JavaServer Faces
Eventos de ao
196
Eventos
Ciclo de vida
Restaurar viso
Recria a rvore de componentes server-side Copia os parametros da requisio para valores submetidos Converte os valores submetidos e valida o valor convertido
Aplicar valores de Requisio
Processar Validaes
197
Eventos
Ciclo de vida
Atualizar valores do Modelo
Copia o valor convertido e validado para o modelo (atravs das expresses #{bean.atributo}) Chama os listeners de ao e as aes, nessa ordem Salva o estado e carrega a viso seguinte
Invocar Aplicao
Renderizar Resposta
198
Eventos
Ocorrem sempre que o valor do componente ao qual o evento esta associado alterado
<h:selectOneMenu id="prod" value="#{bean.produto}" valueChangeListener="#{bean.changeProduto}" onchange="submit()" > <f:selectItems value="#{bean.comboProdutos}" /> </h:selectOneMenu>
public void changeProduto(ValueChangeEvent event) { Integer codProduto = (Integer)event.getNewValue(); ProdutoDAO dao = new ProdutoDAO(); Produto prod = dao.getProduto(codProduto); ItemPedido item = (ItemPedido)itens.getRowData(); item.setValorUnitario(prod.getPreco()); FacesContext.getCurrentInstance().renderResponse(); }
Eventos
javax.faces.event.ValueChangeEvent
UIComponent getComponent()
Componente que iniciou o evento Retorna o novo valor Retorna o valor anterior
Object getNewValue()
Object getOldValue()
200
Eventos
Eventos de Ao
Ocorrem sempre que uma ao disparada, usado apenas com commandButton e commandLink processada antes da ao
<h:commandButton type="submit" value="enviar" actionListener="#{bean.alteraLabel}"/>
public void alteraLabel(ActionEvent e) { UICommand c = (UICommand) e.getComponent(); c.setValue("novo label"); }
201
Eventos
Eventos de Ao
Dica: devem ser utilizados para lgica da interface, ficando as actions com a lgica de negcios
public void clickImagem(ActionEvent e) { FacesContext context = FacesContext.getCurrentInstance(); //parametros do request Map parametros=context.getExternalContext().getRequestParameterMap(); String clientId = e.getComponent().getClientId(context); int x = Integer.parseInt(clientId + ".x"); int y = Integer.parseInt(clientId + ".y"); if ( x>=0 && x<=100 && y>=0 && y<=200) this.acao="incluir"; else if (x>100 && x<=200 && y>=0 && y<=200) this.acao="cancelar"; .... } public void doAcao(){ if (acao.equals("incluir")) { .... }
Eventos
Tags Event Listener
Mudana de valor
f:valueChangeListener
<h:selectOneMenu id="prod" value="#{bean.produto}" onchange="submit()"> <f:valueChangeListener type="br.com.cadastro.ComboProdutoListener"/> <f:selectItems value="#{bean.comboProdutos}" /> </h:selectOneMenu>
Ao invz de um mtodo ele faz referncia a uma classe que implementa a interface ValueChangeListener
public class ComboProdutoListener implements ValueChangeListener{ public void processValueChange(ValueChangeEvent event) { .... } }
203
Eventos
Tags Event Listener
Ao
f:actionListener
>
<h:commandButton type="submit" value="enviar"
<f:actionListener type="br.com.cadastro.EnviarListener"/> </h:commandButton>
Ao invz de um mtodo ele faz referncia a uma classe que implementa a interface ActionListener
public class EnviarListener implements ActionListener{ public void processAction(ActionEvent event) { .... } }
204
Eventos
Componentes Imediatos
Quando necessrio que uma determinada ao ou evento ocorra antes das fases de converso e validao
Por exemplo cancelar uma entrada de dados CommandButton e commandLink para eventos de ao e actions inputs em geral (select, inputText, etc...) para tratar eventos de valueChangeListener
Para habilitar usa-se o atributo immediate=true
205
Eventos
Inputs imediatos
Aes imediatas
Resposta finalizada
Resposta finalizada
Restaurar
Request Viso
Processar Eventos
Processar Validaes
Processar Eventos
Renderizar Response
Resposta
Processar Eventos
Invocar Aplicao
Processar Eventos
Rendereizar Resposta Curso JavaServer Faces 206
Eventos
Basta incluir o atributo immediate=true
<h:selectOneMenu id="prod" value="#{bean.produto}" valueChangeListener="#{bean.changeProduto}" onchange="submit()" immediate="true"> <f:selectItems value="#{bean.comboProdutos}" /> </h:selectOneMenu>
<h:commandButton type="submit" value="Cancelar" actionListener="#{bean.alteraLabel}" immediate="true"/>
207
Eventos
Dica: ir diretamente para a fase de renderizao, ignorando as vases de validao, atualizao do modelo e execuo da aplicao (actions)
Executar o mtodo renderRespose do contexto
public void changeProduto(ValueChangeEvent event) { Integer codProduto = (Integer)event.getNewValue(); ProdutoDAO dao = new ProdutoDAO(); Produto prod = dao.getProduto(codProduto); ItemPedido item = (ItemPedido)itens.getRowData(); item.setValorUnitario(prod.getPreco()); FacesContext.getCurrentInstance().renderResponse(); }
208
Eventos
Eventos de fase

So executados antes e depois de cada fase Implementam a interface PhaseListener

PhaseId getPhaseId void afterPhase() void beforePhase()
Configurados no faces-config.xml
<faces-config> <lifecycle> <phase-listener>br.com.cadastro.Trace</phase-listener> </lifecycle> ... ... </faces-config>
209
Eventos
Eventos de fase
Mtodo getPhaseId pode retornar:

PhaseId.ANY_PHASE PhaseId.RESTORE_VIEW PhaseId.APPLY_REQUEST_VALUES PhaseId.PROCESS_VALIDATIONS PhaseId.UPDATE_MODEL_VALUES PhaseId.INVOKE_APPLICATION PhaseId.RENDER_RESPONSE
Muito til para realizar debug da aplicao
210
Eventos
Eventos de fase
public void afterPhase(PhaseEvent event) { System.out.println("AFTER: " + event.getPhaseId()); } public void beforePhase(PhaseEvent event) { System.out.println("BEFORE: " + event.getPhaseId()); } public PhaseId getPhaseId() { return PhaseId.ANY_PHASE; }
public class Trace implements PhaseListener {
211
Eventos
Exerccio
Criar uma tela para cadastro de pedidos

Campo para data com conversor de data Combo para clientes DataTable para itens

Combo para produtos Campo para quantidade (conversor para numeros) Exibio do preo do produto Exibio do total por linha e o total do pedido no rodape da coluna Boto para excluir item Incluir item (incluir um novo item no list do dataModel) Salvar pedido Cancelar
Botes para

Subvises e Tiles
Subvises
f:subview
Utilizada para fazer incluso de pores de cdigo jsp nas pginas Devem ter o atributo id definido Assim como forms e dataTabes, o id da subview passa a fazer parte dos ids dos clientes dos componentes que fazem parte da subview Tags HTML so ignoradas Pginas includas no devem ter a tag f:view
213
Subvises e Tiles
Subvises
Para incluir conteudo dentro de uma subview so utilizadas:
<%@ include file= conteudo.jsp %>
pginas so includas em tempo de compilao pginas so includas em tempo de execuo pginas so includas em tempo de execuo, pode acessar recursos/sites externos (depende da instalao da JSTL)
<jsp:include page= conteudo.jsp %>
<c:import url= conteudo.jsp %>
214
Subvises e Tiles
Subvises
Utilizao:
<f:subviewid="cabecalho"> <jsp:includepage="cabecalho.jsp"/> </f:subview> Importante: apesar do acesso as pginas jsp serem feitas melo mapeamento da servlet FacesServlet (*.jsf, /faces/* ou *.faces) a pgina incluida no deve usar o mapeamento
Exerccio
Criar uma pgina jsf contendo um cabealho e incluir esta pgina nas pginas da nossa aplicao
Subvises e Tiles
Tiles
um framworkd que permite ao desenvolvedor criar modelos de pginas e de maneira fcil e declarativa incluir partes reutiliveis de pginas distribudo junto com o Struts no arquivo struts.jar ou separadamente (tiles.jar)
Pode-se utilizar o struts.jar sem problemas com o JSF/MyFaces Para mais informaes sobre o Tiles acesse http://www.lifl.fr/~dumoulin/tiles/
216
Subvises e Tiles
Tiles
Definindo o arquivo de configuraco do tiles

<contextparam> <paramname>tilesdefinitions</paramname> <paramvalue>/WEBINF/tiles.xml</paramvalue> </contextparam>
217
Subvises e Tiles
Tiles
MyFaces possi um ViewHander que d suporte ao Tiles em aplicaes JSF. para us-lo basta configur-lo no nosso arquivo de configurao da aplicao
<application> <viewhandler> org.apache.myfaces.application.jsp.JspTilesViewHandlerImpl </viewhandler> </application>
218
Subvises e Tiles
Tiles
Pagina de layout
<tablewidth="100%"> <tr><tdcolspan="2"> <f:subviewid="titulo"> <tiles:insertattribute="titulo"flush="false"/> </f:subview> </td></tr> <tr><tdwidth="10%"> <f:subviewid="menu"> <tiles:insertattribute="menu"flush="false"/> </f:subview> </td> <tdwidth="*"> <f:subviewid="corpo"> <tiles:insertattribute="corpo"flush="false"/> </f:subview> </td></tr> <tr><tdcolspan="2"> <f:subviewid="rodape"> <tiles:insertattribute="rodape"flush="false"/> </f:subview> </td></tr> </table> Curso JavaServer Faces 219
Subvises e Tiles
Tiles
Definies do tiles
<tilesdefinitions> <definitionname="layout"path="/layout.jsp"> <putname="titulo"value="/titulo.jsp"/> <putname="menu"value="/menu.jsp"/> <putname="rodape"value="/rodape.jsp"/> </definition> <definitionname="inicio.tiles"extends="layout"> <putname="corpo"value="/inicio.jsp"/> </definition> <definitionname="inserir.tiles"extends="layout"> <putname="corpo"value="/inserir.jsp"/> </definition> <definitionname="consultar.tiles"extends="layout"> <putname="corpo"value="/consultar.jsp"/> </definition> <definitionname="pedido.tiles"extends="layout"> <putname="corpo"value="/pedido.jsp"/> </definition> </tilesdefinitions>
220
Subvises e Tiles
Tiles
Pgina de menu
<%@tagliburi="http://java.sun.com/jsf/html"prefix="h"%> <%@tagliburi="http://java.sun.com/jsf/core"prefix="f"%> <h:form> <h:panelGridcolumns="1"styleClass="subtabela"> <h:commandLinkvalue="Inserir"action="inserir"></h:commandLink> <h:commandLinkvalue="Consultar"action="#{clienteInsert.consultar}"></h:commandLink> <h:commandLinkvalue="Pedido"action="pedido"></h:commandLink> </h:panelGrid> </h:form>
Pgina de cabealho
<%@tagliburi="http://java.sun.com/jsf/html"prefix="h"%> <h:outputTextvalue="CursodeJavaServerFaces"styleClass="titulos"/>
221
Subvises e Tiles
Tiles
222
Subvises e Tiles
Tiles
Exerccio, incluir o tiles na nossa aplicao em todas as paginas
223
Componentes Personalizados
Dicas para desenvolver um componente:
Simule o resultado em HTML antes de implementar
Teste o visual, javascript, etc...
Separe o JavaScript em funes e verifique se estas no conflitam com outros componentes Teste seu componente com outros componentes na mesma pgina

Sendo filho deles Tendo eles como filhos (caso ele de suporte)
Verifique se ele funciona em diferentes browsers
224
Passos para o desenvolvimento de um componente
Implementar a classe de UI

Implementar a interface UIComponent, ou Estender UIComponentBase, ou Estender um outro componente j existente
UIInput, UIOutput, etc...
225
Implementar a renderizao
Pode ser implementada no prprio mtodo encodeBegin e encodeEnd

void encodeBegin(FacesContext context) inicio da gerao de html (abrir tags: <div>) void encodeEnd(FacesContext context) fim da gerao de html (fechar tags: </div>) Extender a classe Renderer
Implementar um renderizador externo
226
Implementar a Tag do componente
Estender a classe UIComponenteTag

String getContentType() - nome simblico do componente String getRendererType() - nome simblico do renderizador void release() - setar os atributos para nulo void setProperties(UIComponent) - passa os parametros da tag para o componente Verificar a utilizao de expresses
Criar arquivo TLD para a tag
Registrar o componente no faces-config.xml

Componente HelloWorld - HelloUI

Estender UIComponenteBase Famlia do componente Mtodo de encode ResponseWriter usuado para gerar o HTML StartElement inicia um elemento (<input) e writeAttribute acrescenta um atributo
Os parametros podem ser passados por ValueBinding (expresses) ou como atributos String
228
Componente HelloWorld - HelloUITag

Estender UIComponenteTag Tipo do componente (famlia) Componente no tem renderizador separado Passa os parametros para o componente
Verifica se o parametro uma expresso ou se uma String
229
Componente HelloWorld - HelloUITag

Limpa os atributos
Atributos da tag
230
Componente HelloWorld arquivo TLD
Classe da tag
Atributos herdados
Atributos da tag
231
Componente HelloWorld configurao no faces-config.xml

Familia do componente
Classe do componente
232
Componente HelloWorld Utilizao
233
Funcionamento do componente
234
Componente de Entrada - SpinnerUI
SetConverter define um conversor para o componente
ClientID retorna o id gerado no cliente: idform:idcampo
Mtodos criados no componente para simplificar o desenvolvimento Curso JavaServer Faces 235
Componente de Entrada - SpinnerUI
Mtodo para criar o campo
Cria o boto para incrementar
Cria o boto para decrementar 236
Componente de Entrada SpinnerUI
Mtodo decode responsvel por ler os parametros do request

Verifica se um dos botes foi pressionado
Caso o valor no seja um numero inteiro, deixa como responsabilidade do conversor exibir a mensagem de erro Curso JavaServer Faces 237
Componente de Entrada SpinnerTag
238
Componente de Entrada Configurao Spinner
Arquivo TLD
Faces-Config.xml
239
Componente de Entrada Utilizao
240
Exerccio
Crie um novo projeto no eclipse e tomo por base as configuraes do arquivo blank.war (est junto com os exemplos do MyEclipse)

Implemente o componente HelloWorld Implemente o componente Spinner Implemente um Bean e uma Pgina para test-los
241
Dicas
Componentes do MyFaces

Menu Tree NewsPaper Table Tabbed Pane Calendar Schedule DataScroller
242
Dicas
Menu
243
Dicas
Menu
<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>
244
Dicas
Tree
<t:tree2 value="TreeModel" var="String" varNodeToggler="String"> ...(anyComponent)... </t:tree2>
245
Dicas
NewsPaper Table
<t:newspaperTable newspaperColumns="3" value="#{addressBB.states}" var="state"> <f:facet name="spacer"> <f:verbatim> </f:verbatim> </f:facet> <h:column> <h:outputText value="#{state.abbr}"/> </h:column> <h:column> <h:outputText value="#{state.name}"/> </h:column> </t:newspaperTable>
246
Dicas
Tabbed Pane
<t:panelTabbedPane selectedIndex="int" activeTabStyleClass="CSSClass" inactiveTabStyleClass="CSSClass" disabledTabStyleClass="CSSClass" activeSubStyleClass="CSSClass" inactiveSubStyleClass="CSSClass" tabContentStyleClass="CSSClass"> <t:panelTab ...> ...(anyComponents)... </t:panelTab> </t:panelTabbedPane>
247
Dicas
Calendar
<t:inputCalendar [ HTML universal attributes ] [ HTML event handler attributes ] [ UIInput standard attributes (i.e. valueChangeListener) ] [monthYearRowClass="month-and-year-header-row-css-class"] [weekRowClass="week-header-row-css-class"] [dayCellClass="empty-or-date-cell-css-class"] [currentDayCellClass="currently-selected-day-cell-css-class"]> </t:inputCalendar>
Dicas
Schedule
249
Dicas
Schedule
<s:schedule [ UI component attributes ] [ UI command attributes ] [value="#{backingBean.scheduleModel}"] [visibleStartHour="7"] [visibleEndHour="21"] [workingStartHour="9"] [workingEndHour="17"] [readonly={true|false}] [submitOnClick={true|false}] [mouseListener="#{backingBean.scheduleClicked}"] [tooltip={true|false}] [theme={default|outlookxp|evolution}] [headerDateFormat="dd-MM-yyyy"] [compactWeekRowHeight="200"] [compactMonthRowHeight="100"]> </s:schedule>
Dicas
DataScroller
<t:dataScroller [ user-role-support-attributes ] [for="reference to UIData"] [fastStep="values {ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel}"] [pageIndexVar="A parameter name, under which the actual page index is set in request scope similar to the var parameter."] [pageCountVar="A parameter name, under which the actual page count is set in request scope similar to the var parameter."]> Nested Facets: first, previous, next, last, fastforward, fastrewind </t:dataScroller>
Dicas
Paginao com o MyFaces
<h:dataTable id="dados" value="#{beanPaginacao.modelo}" var="cliente" rows="5"> <h:column> <f:facet name="header"><h:outputText value="Nome"/></f:facet> <h:outputText value="#{cliente.nome}"/> </h:column> <h:column> <f:facet name="header"><h:outputText value="Telefone"/></f:facet> <h:outputText value="#{cliente.telefone}"/> </h:column> </h:dataTable> <t:dataScroller for="dados" pageCountVar="totpg" pageIndexVar="pg" paginator="true" > <f:facet name="next"><h:outputText value="proxima"/></f:facet> <f:facet name="previous"><h:outputText value="anterior"/></f:facet> <f:facet name="first"><h:outputText value="primeira"/></f:facet> <f:facet name="last"><h:outputText value="ultima"/></f:facet> <f:facet name="fastforward"><h:outputText value="+5"/></f:facet> <f:facet name="fastrewind"><h:outputText value="-5"/></f:facet> <h:outputText value="Pagina #{pg} de #{totpg}"/> </t:dataScroller>
Dicas
Paginao no Banco
PaginatorModel
package dicas; import java.util.HashMap; import java.util.Map; import java.util.List; import javax.faces.model.DataModel; public abstract class PaginatorModel extends DataModel { private List wrappedData; private int linhasPorPagina; private int totalDeLinhas; private int rowIndex; private Filtro filtro; public PaginatorModel(Filtro filtro) { this.filtro = filtro; this.linhasPorPagina= filtro.getLinhasPorPagina(); updateData(); } //atualiza os dados da pagina que esta sendo exibida private void updateData() { filtro.setLinhaInicial(getPaginaAtual() * linhasPorPagina); Retorno retorno = getData(filtro); totalDeLinhas = retorno.getTotal(); wrappedData = retorno.getRegistros(); } Curso JavaServer Faces
253
Dicas
Paginao no Banco
PaginatorModel
//metodo a ser implementado que ira acessar o banco //e retornar total de registros e linhas da "pagina" protected abstract Retorno getData(Filtro filtro) ; //retorna o dado da linha a ser exibida //caso esta nao esteja na pagina atual, chama updateData public Object getRowData() { int pg = getPaginaAtual(); Object retorno = null; if (rowIndex<getRowCount()) { if (rowIndex<filtro.getLinhaInicial() || rowIndex > ((filtro.getLinhaInicial() + linhasPorPagina)-1) ){ updateData(); } int linha = rowIndex - ((pg * linhasPorPagina) ); retorno = wrappedData.get(linha); } return retorno; } private int getPaginaAtual() { int pg = (int)( (double)(rowIndex)/(double)linhasPorPagina) ; return pg; } Curso JavaServer Faces 254
Dicas
Paginao no Banco
PaginatorModel
//metodos restantes do DataModel public int getRowCount() { return totalDeLinhas; } public int getRowIndex() { return rowIndex; } public void setRowIndex(int rowIndex) { this.rowIndex = rowIndex; } public boolean isRowAvailable() { return true; } public Object getWrappedData() { return wrappedData; public void setWrappedData(java.lang.Object object) { } }
255
Dicas
Paginao no Banco
PaginatorModel
//classe usada para filtrar os dados public static class Filtro { private Map parametros= new HashMap(); private String ordem; private int linhaInicial; private int linhasPorPagina; public Map getParametros() { return parametros;} public void setParametros(Map parametros) { this.parametros = parametros; } public String getOrdem() { return ordem; } public void setOrdem(String ordem) { this.ordem = ordem; } public int getLinhaInicial() { return linhaInicial; } public void setLinhaInicial(int linhaInicial) { this.linhaInicial = linhaInicial; } public int getLinhasPorPagina() { return linhasPorPagina; } public void setLinhasPorPagina(int linhasPorPagina) { this.linhasPorPagina = linhasPorPagina; } }
256
Dicas
Paginao no Banco
PaginatorModel
//classe usada para retornar os dados public static class Retorno{ private List registros; private int total; public List getRegistros() { return registros; } public void setRegistros(List registros) { this.registros = registros; } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; } }
257
Dicas
Paginao no Banco
Utilizao no bean - PaginatorModel
import java.util.ArrayList; import java.util.List; import javax.faces.model.DataModel; public class BeanPaginacao { private DataModel modelo; public DataModel getModelo(){ if (modelo==null){ PaginatorModel.Filtro filtro = new PaginatorModel.Filtro(); filtro.setLinhaInicial(0); filtro.setLinhasPorPagina(5); modelo = new PaginatorModel(filtro){ protected PaginatorModel.Retorno getData(PaginatorModel.Filtro filtro) { return PaginacaoDados.busca(filtro); } }; } return modelo; } }
258
Dicas
Gerando dados binrios (JasperReports)
FacesContext context = FacesContext.getCurrentInstance(); List dados = Banco.getDados(); JRBeanCollectionDataSource jrRS = new JRBeanCollectionDataSource(dados); HttpServletRequest request = (HttpServletRequest)context.getExternalContext().getRequest(); HttpServletRequest response = (HttpServletResponse)context.getExternalContext().getResponse(); String server = "http://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath(); Map parametros = new HashMap(); parametros.put("locale", facesContext.getExternalContext().getRequestLocale()); parametros.put("server",server);
259
Dicas
Gerando dados binrios (JasperReports)
try { InputStream is = Thread.currentThread().getContextClassLoader(). getResourceAsStream(jasper); JasperPrint print = JasperFillManager. fillReport(is, parametros,jrRS); bayte[] data = JasperExportManager.exportReportToPdf(print); relatorio=true; response.setContentType("application/pdf"); response.setHeader("Content-disposition", "inline;filename=relatorio.pdf"); response.setHeader("Cache-Control", "must-revalidate, max_age=360"); response.setContentLength(data.length); ServletOutputStream ouputStream = null; ouputStream = response.getOutputStream(); ouputStream.write(data, 0, data.length); ouputStream.flush(); ouputStream.close(); } catch (Exception e) { e.printStackTrace();} faces.responseComplete();
Dicas
Limpando campos com immediate (cancelar)

public void cancelar(){ setNome(null); setTelefone(null); FacesContext context = FacesContext.getCurrentInstance(); UIViewRoot vr = context.getViewRoot(); UIInput inputNome = (UIInput) find(vr,"nome"); UIInput inputTelefone = (UIInput) find(vr,"telefone"); inputNome.setSubmittedValue(null); inputTelefone.setSubmittedValue(null); } private UIComponent find(UIComponent base, String id) { for (int i = 0; i<base.getChildCount(); i++) { UIComponent filho = (UIComponent)base.getChildren().get(i); if (id.equals(filho.getId())) return filho; if (filho.getChildCount()>0) { UIComponent tmp= find(filho,id); if (tmp!=null) return tmp; } } return null; }
Dicas
Layouts complexos
Utilizar o pacote de componentes fornecido pela Exadel (free)

http://jsftutorials.net/htmLib Ele possi uma quantidade grande de componentes que representam as tags html

htm:table htm:tr htm:td htm:div htm:font htm:script htm:br, etc...

Dicas
Utilizar ajax em jsf
A Exadel tambem fornece uma biblioteca de componentes jsf que permite adicionar funcionalidades AJAX aos componentes
Link para download
https://ajax4jsf.dev.java.net
Utilizao
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%> <h:inputText value="#{bean.text}"> <a4j:support event="onkeyup" reRender="repeater" /> </h:inputText> <h:outputText value="Text in the AJAX Response:" /> <h:outputText id="repeater" value="#{bean.text}" />
Dicas
Acessar dados do contexto web

Sesso context.getExternalContext().getSession(); Atributos da sesso context.getExternalContext().getSession().get(atributo); HttpServletRequest e HttpServletResponse context.getExternalContext().getRequest(); context.getExternalContext().getResponse(); Parametro do request context.getExternalContext().getRequestParameterMap().get (parametro); Headers e Cookies context.getExternalContext().getRequestCookieMap(); context.getExternalContext().getRequestHeaderMap();
264
Dicas
private String nome="nome default"; private String telefone="telefone default"; private UIPanel painel; public UIPanel getPainel(){ if (painel!=null) return painel; FacesContext context = FacesContext.getCurrentInstance(); Application app = context.getApplication();
Criando uma tela dinamicamente (binding)
painel = new UIPanel(); painel.getAttributes().put("columns", new Integer(2)); UIOutput output = new UIOutput(); output.setValue("Nome"); painel.getChildren().add(output); UIInput input = new UIInput(); ValueBinding vb = app.createValueBinding("#{beanCancel.nome}"); input.setValueBinding("value",vb); painel.getChildren().add(input); output = new UIOutput(); output.setValue("Telefone"); painel.getChildren().add(output); input = new UIInput(); vb = app.createValueBinding("#{beanCancel.telefone}"); input.setValueBinding("value",vb); painel.getChildren().add(input); return painel; <h:panelGrid binding="#{beanCancel.painel}" Curso JavaServer Faces
/>
265
Dicas
Links para mais informaes

http://www.jsfcentral.com http://www.jsftutorials.net http://www.coreservlets.com/JSF-Tutorial http://java.sun.com/javaee/javaserverfaces http://developers.sun.com/prodtech/javatools/jscrea tor/index.jsp
266

Curso JSF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso JSF

Enviado por

Direitos autorais:

Formatos disponíveis

FR-800

http://www.mayworm.com/cursos Marcelo Mayworm - mayworm@ieee.org Luis Henrique Muiz de Carvalho - bulinha@gmail.com

Curso JavaServer Faces

Curso JavaServer Faces

Curso JavaServer Faces

Qual o seu background? Expectativas? Objetivos?

Curso JavaServer Faces

Este curso baseado principalmente no livrotexto

Curso JavaServer Faces

http://java.sun.com/j2se/1.5.0/download.jsp http://www.eclipse.org/webtools/releases/1.0/ http://tomcat.apache.org/ http://myfaces.apache.org/binary.cgi http://www.hsqldb.org/

Eclipse 3.1.1 + WebTools 1.0

Apache Tomcat 5.5.15

Curso JavaServer Faces

Introduo Managed Beans, Navegao Tags Componentes Tags Componentes DataTable

Curso JavaServer Faces

Curso JavaServer Faces

Sobre o material didtico e CD

Este material didtico um roteiro baseado no livro-texto

Cada mdulo corresponde a um captulo do livro

O CD contm material de pesquisa adicional

Ambiente de desenvolvimento inicial

Como tirar melhor proveito desse curso

Curso JavaServer Faces

FR-800: JavaServer Faces

Verso 2.0 Maro 2006

Curso JavaServer Faces

O que JavaServer Faces

Um dos lideres Craig R. McClanahan o pai do Struts.

Curso JavaServer Faces

O que JavaServer Faces

MyFaces Apache ADF Faces Oracle

Viso geral do JavaServer Faces

Curso JavaServer Faces

No curso usaremos os seguintes softwares; JDK 5.0

http://java.sun.com/j2se/1.5.0/download.jsp http://www.eclipse.org/webtools http://myfaces.apache.org

Eclipse 3.1.1 + WebTools 1.0

(baixar tambm os exemplos)

Curso JavaServer Faces

Curso JavaServer Faces

Descompactando no nosso diretrio de curso teremos c:\curso\myfaces-1.1.1

Curso JavaServer Faces

Curso JavaServer Faces

Curso JavaServer Faces

Apontar o workspace para o diretrio c:\curso\workspace

Curso JavaServer Faces

Curso JavaServer Faces

Curso JavaServer Faces

Na opo Window/Preferences, devemos selecionar a opo Server/Instaled Runtimes.

Curso JavaServer Faces

Selecione Apache Tomcat v5.5

Curso JavaServer Faces

Indique onde est instalado o tomcat

Curso JavaServer Faces

Curso JavaServer Faces

Primeira Aplicao em JSF

Criao do projeto no Eclipse

File/New Web/Dynamic Web Project

Curso JavaServer Faces

Primeira Aplicao em JSF

Criao do projeto no Eclipse

Utilize ExemploLogin como nome para o projeto

Curso JavaServer Faces

Primeira Aplicao em JSF