cursojsf

Curso JavaServer Faces

FR-800

JavaServer Faces

Edição 2.0Março 2006

http://www.mayworm.com/cursosMarcelo Mayworm - [email protected] Henrique Muiz de Carvalho - [email protected]

Curso JavaServer Faces 2

Objetivos

Aprender eficientemente o desenvolvimento de aplicações WEB utilizando o framework JavaServes Faces.

O curso explora aspectos básicos e avançados do JavaServer Faces, cobrindo ténicas de desenvolvimento para WEB.

Tópico especial: Este curso também abordará o uso do MyFaces,

uma implementação de código aberto da especificação de JavaServer Faces desenvolvida pela Apache Group.


Objetivos

Ao final desse curso o aluno estará apto a desenvolver uma aplicação WEB utilizando JavaServer Faces.


Pré-requisitos

Conhecimento de Java básico 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 livro-texto 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

Eclipse 3.1.1 + WebTools 1.0 http://www.eclipse.org/webtools/releases/1.0/

Apache Tomcat 5.5.15 http://tomcat.apache.org/

MyFaces http://myfaces.apache.org/binary.cgi

Hsqldb 1.8.0 http://www.hsqldb.org/


Tópicos

Introdução Managed Beans Navegação Tags Componentes Data Table Conversores e Validadores Eventos e Ciclo de Vida Subvisões Componentes Personalizados


Calendário Estimado

Primeiro dia Introdução

Segundo dia Managed Beans, Navegação

Terceiro dia Tags Componentes

Quarto dia Tags Componentes

Quinto dia DataTable


Calendário Estimado

Sexto dia DataTable, Conversores, Validadores

Sétimo dia Eventos, Sub-Visões

Oitavo dia Componentes Personalizados

Nono dia Componentes Personalizados

Décimo dia MyFaces, Tópicos Extras


Sobre o material didático e CD

Este material didático é um roteiro baseado no livro-texto Core JavaServer Faces O livro é recomendado como referência didática

Cada módulo corresponde a um capítulo do livro A ordem e forma de apresentação são diferentes Nem todos os assuntos são abordados O instrutor poderá fornecer material adicional As referências não são baseadas no livro

O CD contém material de pesquisa adicional apostila/ este material dividido em capítulos software/ software usado no curso books/ livro usado como base para este material e outros extras/ software e material extra sobre o mesmo tema


Estrutura do curso

O curso alterna apresentações teóricas com exercícios práticos e demonstrações sobre os temas abordados

Exemplos e demonstrações Nesta versão, a maior parte dos exemplos são baseados no

livro-texto. Ambiente de desenvolvimento inicial

1. Ambiente Java padrão 2. Editor de texto (Eclipse) 3. Sistema de gerenciamento de banco de dados (HSQLDB) Os arquivos do JavaServer Faces estão distribuídos nas

pastas dos exemplos e exercícios quando necessários Outros recursos serão instalados quando forem necessários


Como tirar melhor proveito desse curso

Faça perguntas (a qualquer hora) Faça os exercícios; refaça os exercícios; invente Leia o livro-texto, outros livros, artigos, revistas Explore os exemplos fornecidos; busque ir além Adapte suas aplicações para que usem a tecnologia

abordada neste curso Entre em um fórum sobre o assunto Se possível, faça tudo isto durante o curso Faça perguntas (explore o instrutor!)


FR-800: JavaServer Faces

Versão 2.0Março 2006

Desenvolvendo Aplicações para WEB com JavaServer Faces

www.mayworm.com/cursos


O que é JavaServer Faces

JavaServer Faces é um dos mais novos frameworks para web a seguir o modelo MVC.

Desenvolvido pela Sun como uma especificação (JSR 127) e com a participação de várias outras empresas/entidades (Apache, Borland, IBM, Oracle, BEA, Macromedia, etc....) Um dos lideres Craig R. McClanahan o “pai” do

Struts.


O que é JavaServer Faces

Por ser uma especificação JSF tem a vantagem de possuir mais de uma implementação disponível. Temos a RI (reference implementation) da própria 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.


Visão geral do JavaServer Faces

MVC – Model View Controler Conversão de dados Validação e manipulação de erros Internacionalização Componentes customizados Renderização Suporte a ferramentas de desenvolvimento


Software necessário No curso usaremos os seguintes softwares; JDK 5.0

http://java.sun.com/j2se/1.5.0/download.jsp Eclipse 3.1.1 + WebTools 1.0

http://www.eclipse.org/webtools MyFaces 1.1.1 –

http://myfaces.apache.org (baixar também os exemplos)

Tomcat 5.5.x http://jakarta.apache.org/tomcat/index.html


Instalação e Configuração

Criar diretório curso c:\curso. Neste diretório 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 executável que deve ser executado. Basta seguir os passos para sua instalação, que é bastante simples. Vamos instalá-lo no diretório c:\curso\jdk5.0.



Eclipse O Eclipse e o WebTools podem ser baixados

juntos, facilitando a instalação. O arquivo wtp-all-in-one-sdk-1.0-win32.zip contem o Eclipse, o WebTools e outros plug-ins necessários para a utilização do mesmo (EMF, GEM e JEMF). Como é um arquivo zip, basta descompactá-lo num diretório para que possa ser utilizado. Vamos descompactá-lo no diretório curso, teremos c:\curso\eclipse



MyFaces O MyFaces também é distribuído como um arquivo

zip, bastando descompactá-lo em um diretório. Este arquivo contém os arquivos:

myfaces-api.jar – api JSF (principalmente interfaces) myfaces-impl.jar – implementação da api tomahawk.jar – componentes extras sandbox.jar – mais componentes (usam ajax) myfaces-all.jar – todas as anteriores juntas

Descompactando no nosso diretório 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 aplicações de exemplo, uma delas é uma aplicação em branco com toda as bibliotecas citadas a cima e com o myfaces previamente configurado. Descompactando este arquivo no nosso diretório de curso teremos c:\curso\myfaces-1.1.1-examples



Blank.war Iremos usar o arquivo blank.war. Renomeie ele

para zip e descompacte no nosso diretório de curso dentro de um subdiretório blank (que deve ser criado), assim teremos c:\curso\blank

Este arquivo já vem com as libs necessárias 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, commons-validator.jar, commons-lang-2.1.jar, jakarta-oro.jar, jstl.jar, log4j-1.2.8.jar, portlet-api-1.0.jar, struts.jar



Tomcat Como servidor web iremos usar o tomcat, este

também é distribuído em um único arquivo zip, bastando apenas descompactá-lo.

Teremos:



Configurando o Eclipse Apontar o workspace para o diretório

c:\curso\workspace



Configurando o Eclipse Configurando o JDK

Na opção Window/Preferences, devemos selecionar a opção 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



Configurando o Eclipse Configurando o JDK



Configurando o Eclipse Configurar o tomcat

Na opção Window/Preferences, devemos selecionar a opção Server/Instaled Runtimes.




Selecione Apache Tomcat v5.5




Indique onde está instalado o tomcat


Primeira Aplicação em JSF

Criação do projeto no Eclipse File/New Web/Dynamic

Web Project



Criação do projeto no Eclipse Utilize

ExemploLogin como nome para o projeto



Devemos copiar o conteúdo da pasta WEB-INF da aplicação de exemplo blank: Copiar apenas lib, web.xml e examples-config.xml

Renomeie examples-config.xml para exemplo-config.xml Este é o arquivo de configuração do JSF



Editar web.xml Alterar o nome do arquivo de configuração do JSF

<context-param> <param-name>javax.faces.CONFIG_FILES</param-name> <param-value> /WEB-INF/exemplo-config.xml </param-value> </context-param>



Criar a classe exemplo.Loginpackage exemplo;public class Login {

private String usuario;private String senha;public String efetuarLogin(){

if ("luis".equals(usuario) && "123456".equals(senha)) return "ok";

elsereturn "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; }

}



Configurar o “bean” no arquivo de configuração: exemplo-config.xml

Devemos apagar as configurações existentes do projeto blank.

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



Criar a página 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>



Criar a página 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>



Criar a página 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 inválido!" /><h:commandButton action="login" value="Voltar"/>

</h:form></body></html>

</f:view>



Criar a página index.jsp O JEE não permite arquivos para “welcome-files”

que não sejam jsp/html, por isso usamos este recurso para resolver esta limitação

<%@ page session="false"%><%response.sendRedirect("login.jsf");%>



Devemos criar a navegação 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>



Criar uma configuração de servidor e adicionar nosso projeto a esta configuração Na janela servers, clicar com o botão direito e

selecionar novo



Selecionaremos Tomcat 5.5 Adicionaremos o projeto



Com o servidor configurado temos as seguintes opções: Debug, Start, Profiling, Restart, Stop, Publish



Podemos testar nossa aplicação dentro do próprio Eclipse

Browser interno do Eclipse-WebTools


Páginas JSF

Páginas JSF são na verdade páginas JSP utilizando algunas bibliotecas de tags que representam componentes do JSF.

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

CORE: é responsável por componentes não visuais ou auxiliares (conversores, validadores, views, etc...).

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

HTML: é responsável pelos componentes html visuais/layout (inputs, tables, forms, buttons, etc...).


ManagedBeans/BackingBeans

Os beans do JSF são POJOS, ou seja classes javas simples, que não tem a necessidade de estender nenhuma classe e/ou implementar nenhuma interface.

Suas propriedades são visualisadas/alteradas pelos componentes da página (usando o padrão de encapsulamento get e set)

Os métodos públicos desta classe são as ações (actions) de nossa aplicação.


Navegação das Páginas

As regras de navegação indicam ao framework qual página deverá ser exibida após um formulário 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>


Ciclo de Vida

O Ciclo de vida de uma requisição é formado por várias fases:

RestaurarVisão

Aplicar Valores

do request

ProcessarValidações

AtualizarValores

do Modelo

InvocarAplicação

RenderizarResposta

ProcessarEventos

ProcessarEventos

ProcessarEventos

ProcessarEventos

Request

Response

Resposta finalizada Resposta finalizada


Rendereizar Resposta



Exercício

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 página jsp que terá os campos para entrada

e a exibição da saída Fazer com que da página de inicio.jsp possa

acessar esta nova página


Managed Beans

São classes simples, com atributos encapsulados e métodos (actions)

São usados para: Componentes de interface Comportamento de um formulário Objetos de negócio (cujas propriedades são

exibidas/editadas nas páginas) Serviços, fontes externas de dados, etc...


Managed-Beans

São configurados no arquivo de configuração 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>


Managed-Beans

Os atributos do bean que serão usados devem seguir o padrão de encapsulamento: Devem ser declarados como private Devem ter métodos get e set públicos para acesso Atributos boolean podem ter dois tipos de acesso

de leitura: IsAtributo getAtributo


Managed-Beans

Os escopos do JSF são os mesmo do container web Request

Tem vida curta, inicia-se quando uma requisição é feita e termina quando a resposta é enviada

Session É iniciado quando o usuário acessa a aplicação e é

encerrada quando ocorre um time-out (usuário fica determinado tempo sem acessar) ou esta é invalidada

Application (Servlet-Context) Inicia-se quando a aplicação é iniciada e termina quando

esta é encerrada


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>


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>


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>


Managed-Beans

Encadeamento de beans Um Bean pode fazer referência 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>


Managed-Beans

Encadeamento de beans Escopos compatíveis

Escopo do Bean Escopo dos Beans referenciadosNone NoneApplication None, aplicationSession None, aplication, sessionRequest None, aplication, session, request


Managed-Beans

Conversão de Valores Nas definições de propriedades sempre entramos

com valores do tipo String, o JSF pode fazer a conversão para alguns tipos específicos:

Tipo destino Conversãoint, byte, short, long, float, Método valueOf da classe wrapper,double, (ou wrapper) Ou 0 se for vaziaBoolean ou boolean Método valueOf de Boolean ou false se vaziaCharacter ou char Primeiro caracter da string, ou (char) 0 se vaziaString ou Object Cópia da String, ou new String(“”) se vazia


Managed-Beans

Linguagem de Expressões (EL)

<h:inputText value="#{login.usuario}" />

Podemos acessar propriedades de 3 maneiras login.usuario login["usuario"] login['usuario']


Managed-Beans

Linguagem de Expressões (EL) Utilização de Map e List

Expressão #{beam.prop}

é possível usar #{bean.prop.prop.prop} , #{bean['prop'].prop['prop']}, etc....

Tipo de Bean Tipo de Prop Modo Escrita Modo LeituraNull Qualquer Erro NullQualquer Null Erro NullMap Qualquer bean.put(prop,valor) bean.get(prop)List Conversível em int bean.set(prop,valor) bean.get(prop)Array Conversível em int bean[prop] bean[prop]Objeto (bean) Qualquer bean.setProp(valor) bean.getProp()


Managed-Beans

Linguagem de Expressões (EL) Objetos pré-definidos

Váriável Valoresheader Map com os parametros do cabeçalho HTTP, apenas o primeiro valorheaderValues Map com os parametros do cabeçalho HTTP, array com todos os valoresparam Map com os parametros da requisição, apenas o primeiro valorParamValues Map com os parametros da requisição, array com todos os valorescookie Map com os nomes e valores dos cookiesinitParam Map com os parametros de inicialização da aplicaçãorequestScope Map com os atributos no escopo da requisiçãosessoinScope Map com os atributos no escopo da sessãoapplicationScope Map com os atributos no escopo da aplicaçãofacesContext Instancia de FacesContext dessa requisiçãoview Instancia de UIViewRoot dessa requisição


Managed-Beans

Linguagem de Expressões (EL) Operadores

Aritiméticos: +, -, *, / (div) e % (mod) Relacionais: < (lt), <= (le), > (gt), >= (ge),

== (eq), != (ne) Lógicos: && (and), || (or), ! (not) Operador empty, ele é true se for null, array ou String de

tamanho 0 ou Collection de tamanho 0 Operador de seleção ternária ?

<h:outputText value="Bem vindo #{usuario.nome}, hoje é sua #{usuario.cont} visita." rendered=#{usuario.logado && usuario.temPermissao}" />


Managed-Beans

Linguagem de Expressões (EL) Expressões de Ligação de Método

<h:commandButton action="#{login.efetuarLogin}" />

Podem ser usadas em: Actions (sem parâmetros, retorno String) Validators (parâmetro FacesContext, UIComponent, value,

retorno void) ActionListeners (parâmetro ActionEvent, retorno void) ValueChangeListeners (parâmetro ValueChangeEvent, retorno

void)


Managed-Beans

Internacionalização String de mensagens fica em um arquivo do tipo

properties login.usuarioEntry=Usuario login.senhaEntry=Senha

Este arquivo é carregado na página 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


Managed-Beans

Internacionalização Para várias línguas use um sufixo no nome do

arquivo indicando o código ISO-639 do idioma Para o alemão

mensagens_de.properties(lista de códigos pode ser encontrada em http://www.loc.gov/standards )

Para caracteres especiais (acentos, etc...) devemos usar o padrão unicode

Pode-se utilizar o utilitário native2ascii do jdk para realizar a conversão dos arquivos


Managed-Beans

Internacionalização Podemos definir uma localidade padrão para uma

página:<f:view locale="de" />

Podemos tambem definir as localidades padrão e opcionais no arquivo de configuração do faces

<application><locale-config>

<default-locale>pt</default-locale><supported-locale>en</supported-locale>

</locale-config></application>


Managed-Beans

Exercício Desenvolver uma aplicação que:

Apresente ao usuário uma sequência de números e solicite a ele o número que completa a sequência (1, 2, 3, 4, 5)

Deve haver uma lista contendo várias sequências que serão exibidas a medida que o usuário for respondendo

Informar quantos foram os acertos A aplicação deve suportar duas linguas


Navegação

Navegação estática

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



Navegação

Agrupando navegações Se não informarmos o from-view-id, a navegação

será usada em todas as views

<navigation-rule><navigation-case>

<from-outcome>login</from-outcome><to-view-id>/login.jsp</to-view-id>



Navegação

Navegação Dinâmica 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>


<from-outcome>falhou</from-outcome><to-view-id>/falha.jsp</to-view-id>



Navegação

Redirecionamento É possível usar o redirecionamento, fazendo

com que a requisição 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>


Navegação

Coringas Podemos usar coringas no elemento from-view-id

A navegação abaixo tem o mesmo funcionamento que o agrupamento (não usar o from-view-id)

ou

<navigation-rule><from-view-id>/seguranca/*</from-view-id><navigation-case>

...</navigation-case>

</navigation-rule>

<from-view-id>*</from-view-id>

<from-view-id>/*</from-view-id>


Navegação

From-Action Caso seja necessário é possivel termos duas

actions que retornam a mesma String de ação, 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/>


<from-action>#{Numeros.calcularResutlado}</from-action><from-outcome>ok</from-outcome><to-view-id>/resultado.jsp</to-view-id>

</navigation-case>


Navegação

Algorítimo de Navegação 1º passo

Recebe outcome, viewID, action Se outcome==null reexibe a página 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 máximo do viewID,

execute Se houver uma regra sem from-view-id, execute Se não encontrar nenhuma regra que coincida, reexiba a

página atual


Navegação

Algorítimo de Navegação 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 não tiver from-action,

execute-o Se tiver from-action equivalente e não tiver from-outcome,

execute-o Se houver um caso, sem from-outcome e from-action equivalente,

execute-o Se não atender a nenhuma das anteriores, reexiba a mesma

página


Navegação

Exercício Criar paginas jsp (vazias, apenas com

links/command) para recriar a seguinte navegação

InicioClientes Pedidos

Novo pedido

Novo cliente

Lista de clientes

Lista depedidos

Alterar cliente

Alterarpedido


Tags Padrão JSF

Tags fundamentas JSF (core)● <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

Tag Descriçãoview Visãosubview Subvisãofacet Facet de um componenteattribute Adiciona um atributo a um componenteparam Adiciona um parametro a um componenteactionListener Adiciona listener de ação para um componentevalueChangeListener Adiciona listener de alteração de valorconverter Adiciona um conversor a um componenteconvertDate Adiciona um conversor de datas a um componenteconvertNumber Adiciona um conversor Numérico a um componentevalidator Adiciona um validador a um componentevalidatorDoubleRange Adiciona um validador de faixa de numeros doublevalidateLength Adiciona um validador de extensãovalidateLongRange Adiciona um validador de vaixa de numeros longloadBundle Carrega o arquivo de mensagensselectItens Itens para um componente do tipo SelectselectItem Item para um comopnente de tipo Selectverbatim Adiciona codigo a página (não validado pelo JSF


Tags Padrão JSF

Tags html JSF● <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

Tag Descriçãoform Formulario htmlinputText Tag input type=textinputTextArea Tag textareainputSecret Tag input type=passwordinputHidden Tag input type=hiddenoutputLabel Rótulo de componenteoutputText Output de texto de uma linhaoutputFormat Mesmo que o anterior, mas formata o textooutputLink Ancora htmlcommandButton Buttom, submit, resetcommandLink Linkmessage Mensagem mais recente para um componentemessages Todas as mensagens

Tag DescriçãoselectOneListbox Caixa de listagemselectOneMenu ComboselectOneRadio Botões radioselectBooleanCheckbox CheckboxselectManyCheckbox Conjunto de checkboxselectManyListbox Caixa de listagem de seleção multiplaselectManyMenu Combo de seleção multiplapanelGrid Tabela htmlpanelGroup Componente são dispostos como umdataTable Tabela com mais funçõescolumn Coluna de uma data table


Tags Padrão JSF

Atributos comuns

Atributos Componentes Descriãoid Todos Identificação do componentebinding Todos Referencia para um componente em um beanrendered Todos Indica se o componente será renderizado (true/false)styleClass Todos Nome da classe CSS value Input, Output, Command Valor do componentevalueChangeListener Input, Output, Command Metodo de ação do componenteconverter Input, Output, Nome do conversorvalidator Input Nome do validadorrequired Input Se o preenchimento é obrigatório (true/false)


Tags Padrão JSF

IDs Ids são usadas para identificar os componentes

<h:inputText id="nome" .... /><h:message for="nome" />

(exibirá as mensagens referentes ao componente nome)


Tags Padrão JSF

Ligações Ligações (binding) permite que tenhamos variáveis

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;

}


Tags Padrão JSF

Formulários A tag h:form do JSF representa uma tag form do

HTML Sobre a tag form:

Sempre é usado o método post A action do form é definida como sendo a própria página jsf

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


Tags JSF Padrão

Campos Texto e Área de texto Temos 3 tags diferentes para entrada de texto:

h:inputText h:inputSecret h:inputTextarea

Possuem os seguintes atributos: cols e rows (apenas para textarea) redisplay (apenas para secret)

Indica se o valor passado vai ser reexibido quando a página voltar da requisição

valueChangeListener


Tags JSF Padrão

Campos Texto e Área de texto Atributos (cont.)

bindig, converter, id, rendered, required, styleClass, value, validator (atributos básicos)

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


Tags JSF Padrão

Exibição de textos Tags

h:outputText Somente exibo texto na página, mas se for passado um valor

para styleClass, este texto fica dentro de um span com o class contendo o valor do styleClass passado

h:outputFormat Como outputText se receber um styleClass é escrito dentro de

um span Pode receber parâmetros para o texto

<h:outputFormat value="{0} tem {1} anos"> <h:paran value="Luis"/> <h:param value="31"/></h:outputFormat>


Tags JSF Padrão

Exibição de textos Tags

h:outputLabel Semelhante a outputText, mas possúi o atributo “for” que indica

o id do componente ao qual este label pertence Atributos para outputText, outputLabel e

outputFormat escape

Se true utiliza códigos escape para os caracterers <, > e & (default é falso)

binding, converter, id, rendered, styleClass, value Style, title (atributos HTML 4.0)


Tags JSF Padrão

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


Tags JSF Padrão

Campos escondidos A tag h:inputHidden é usada para armezenar

valores ocultos no formulário É transformada em input type=hidden Atributos

Binding, converter, ind required, validator, value, valueChangeListener

<h:inputHidden value="#{bean.propriedade}" />


Tags JSF Padrão

Botões e Links Botões são usados para executar submeter os

formulários e executar actions Usamos a tag commandButton

<h:commandButton value="Ok" action="#{bean.gravar}"/>

Existem 2 tipos de links, um como os botões<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>


Tags JSF Padrão

Atributos de commandButton e commandLink action – handler ou action que determina a próxima

página na navegação actionListener – evento a ser executado image – imagem para o commandButton immediate – se true as ações e eventos serão

executados no inicio do cliclo de vida e não no final type – para commandButton: reset, submit, button – para

commandLink conteúdo do recurso: text/html, image/gif, audio/basic, etc...

value – texto exibido no botão ou no link


Tags JSF Padrão

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


Tags JSF Padrão

Usando botões<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}"/>


Tags JSF Padrão

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>


Tags JSF Padrão

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


Tags JSF Padrão

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>


Tags JSF Padrão

Tags de Seleção O JSF possui as seguintes tags para seleção:

h:selectBooleanCheckbox h:selectManyCheckBox h:selectOneRadio h:selectOneListBox h:selectManyListBox h:selectOneMenu h:selectManyMenu


Tags JSF Padrão

Tags de Seleção Atributos

disabledClass, enabledClass Classe css para elementos desabilitados e abilitados

(apenas para selectOneRadio e selectManyCheckbox) layout

Especifica a direção que serão 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)


Tags JSF Padrão

Tags de Seleção – 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;

}


Tags JSF Padrão

Tags de Seleção – 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;}


Tags JSF Padrão

Tags de Seleção – 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;}


Tags JSF Padrão

Tags de Seleção – Combos e Listas h:selectOneListBox

Seleciona apenas um valor em uma lista h:selectManyListBox

Seleciona vários valores em uma lista h:selectOneMenu

Seleciona um valor em uma combo h:selectManyMenu

Seleciona vários valores em uma combo


Tags JSF Padrão

Tags de Seleção – Item f:selectItem representa um item de uma seleção

Atributos binding - id – ID do componente itemDescription – usado em ferramentas (não usado no html) itemDisabled – booleano, habilita/desabilita item itemLabel – texto exibido do item itemValue – valor enviado para o servidor value – expressão que aponta para uma instância da classe

SelectItem


Tags JSF Padrão

Classe SelectItem javax.faces.model.SelectItem

new SelectItem(“valor”) new SelectItem("valor", "label") new SelectItem("valor","label","descrição") new SelectItem("valor","label","descrição", true/false)

(true/false indica se está habilitado ou desabilitado)


Tags JSF Padrão

Tags de Seleção – 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; }


Tags JSF Padrão

Tags de Seleção – Itens Atributo value pode ser:

Única instância de SelectItem Coleção de instâncias de SelectItem Array de Instâncias de SelectItem Mapa (map), onde key/value representam label/valor do

SelectItem


Tags JSF Padrão

Tags de Seleção


Tags JSF Padrão

Tags de seleção – 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("Mecânicos");mecanios.setSelectItems(getMecanicos());

opcoes.add(mecanicos);

return opcoes;}


Tags JSF Padrão

Tags de seleção – Grupos de Itens

<h:selectOneListbox >

<f:selectItems value="#{bean.opcoes}"/>

</h:selectOneListbox>


Tags JSF Padrão

Tags de mensagens h:message

Exibe uma mensagem referente a um componente que tenha sido armazenada no contexto

h:messages Exibe todas as mensagens armazenadas no contexto

Tipos de mensagens Informação Advertência Erro Fatal


Tags JSF Padrão

Tags de Mensagem AtributosAtributo Descriçãofor ID ao qual a mensagen se refere (h:message somente)errorClass Classe CSS para mensagens de erroerrorStyle Estilo CSS para mensagens de errofatalClass Classe CSS para mensagens fataisfatalStyle Estilo CSS para mensagens fataisglobalOnly Somente mensagens globais (h:messages somente)infoClass classe CSS para mensagens de informaçãoinfoStyle Estilo CSS para mensagens de informaçãolayout Layout da mensagem: table ou list (h:messages somente)showDetail Se os detalhes das mensagem serão exibidos: true/falseshowSummary Se os sumários das mensagens serão exibidos: true/falsetootip Se os detalhes das mensagens serão exibidos na tooltip (true/false)warnClass Classe CSS para mensagens de advertênciawarnStyle Estilo CSS para mensagens de advertênciabinding, id, rendered, Atributos básicos


Tags JSF Padrão

Painéis - h:panelGrid Renderiza uma tabela HTML Permite definir um cabeçalho e um roda pé para a

tabela Permite apenas um único componente por célula Não permite colspan e rowspan


Tags JSF Padrão

Painéis - h:panelGrid Atributos

Atributo Descriçãobgcolor Cor de fundo da tabelaborder Largura da bordacellpadding Espessura das célulascellspacing Espaçamento entre as celulascolumnClasses Lista de classes CSS para as colunascolumns Número de colunasfooterClass Classe CSS para o rodapéheaderClass Classe CSS para o cabeçalhoframe Lados da tabela que serão desenhados: none, above, below, hsides, vsides, lhs, rhs, box, borderrowClasses Lista de classes CSS para as linhasrules Linhas desenhadas entre as células: groups, rows, columns, allbinding, id, rendered, Atributos básicosstyleClass dir, lang, style, title, width Atributos HTMLonclick, onkeydow, etc.... Eventos DHTML


Tags JSF Padrão

Painéis – h:panelGroup Usado para agrupar vários componentes (são

considerados um componente para uma célula do panelGrid)

Atributos

Atributos Descriçãobinding, id, rendered, styleClassAtributos básicosstyle Atributo HTML


Tags JSF Padrão

Painéis – f:facet Não tem representação visual É utilizado para indicar partes de um componente

header footer title Etc....

Atributo name – nome da “parte” que este representa<f:facet name="header">

<h:outputText value="Lista de valores" /></f:facet>


Tags JSF Padrão

Painéis - 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>


Tags JSF Padrão

Exercício Criar uma tela (jsp e bean) de cadastro de clientes

contendo: Nome*, endereço, telefone, cpf* Sexo* – M/F (radio) Estado Civil – Casado, Solteiro, Viuvo (combo) Areas de interesse – informatica, automóveis, esportes,

etc... (checkbox) Observações – (text area) Ativo – (checkbox - boolean)

Campos com * são obrigatórios, deve-se usar mensagens e painéis para o layout


Tag JSF Padrão

Exercício Utilize o projeto ExemploCadastro e o banco de

dados que o acompanha (hsqldb) Classes

cadastro.dao.ClienteDAO Métodos: inserirCliente, alterarCliente, consultarCliente,

excluirCliente cadastro.dao.InteressesDAO

Método: listarIntereses cadastro.dto.Cliente cadastro.util.Banco cadastro.web.ServerListener

Página consulta.jsp


Tabela de Dados

h:dataTable Permite a exibição 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


Tabela de Dados

h:dataTable A medida que é executado, cada item do valor

passado se torna disponível dentro do corpo da tag O atributo var de dataTable é utilizado para dar um

nome ao item durante a execução Qualquer objeto java pode ser passado para value,

neste caso, se for um escalar (não é um tipo de coleção) não ocorrerá iteração 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

Atributo Descriçãobgcolor Cor de fundo da tabelaborder Largura da borda da tabelacellpadding Espessura das células da tabelacellspacing Espaçamento entre as células da tabelacolumnClasses Lista separada por vírgula das classes CSS para as colunasfirst Indice da primeira linha mostradafooterClass Classe CSS para o rodapé da tabelaframe Especificação dos lados da tabela: none, above, below, hsides, vsides

lhs, rhs, box, borderheaderClasse Classe CSS para o cabeçalho da tabelarowClasses Lista separada por virgula das classes CSS para as linhasrows Número de linhas a ser exibidarules Linhas desenhadas entre células: groups, rows, columns, allvar Nome da variável que representará o itembinging, id, rendered, .... Atributos básicosdir, lang, style, width Atributos HTML


Tabela de Dados

h:column Representa uma coluna da tabela Só é permitida a utilização de componentes faces

Para exibir textos deve-se utilizar h:outputText ou f:verbatim

Atributos: binding id rendered


Tabela de Dados

Cabeçalhos e rodapés Para termos cabeçalhos de colunas e rodapés de

colunas basta usar facets footer para rodapés header para cabeçalhos

Os facets são definidos dentro de cada coluna Podemos ter um cabeçalho e um rodapé para a

tabela, basta utilizar facets dentro da dataTable para header e footer (devem estar fora das colunas)


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>


Tabela de Dados

Estilos Você pode definir estilos:

Para a tabela como um todo (styleClass) Cabeçalhos e rodapés de colunas (headerClass e

footerClass) Colunas individuais (columnClasses) Linhas individuais (rowClasses)


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


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


Tabela de Dados

Exercício 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 Criar uma pagina para consulta utilizando dataTable

Utilizar CSS para formatar a página


Tabela de Dados

Utilizando componentes nas células 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 Renderização condicionar Desabitá-los Eventos Ações Etc...

Assim como nos componentes da página, os valores serão atualizados dentro do bean, mesmo estando dentro de uma list


Tabela de Dados

Utilizando componentes nas células


Tabela de Dados

Dica: selecionar linhas para exclusão Ao invés de termos uma lista de beans cliente,

vamos usar um map, que conterá o cliente e um valor booleando indicando se a linha foi excluída

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

}


Tabela de Dados

Dica: selecionar linhas para exclusão

<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}" />


<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

Dica: selecionar linhas para exclusão Na ação do botão excluir basta verificarmos na lista

quais linhas possuem no mapa o valor excluir setado para true


Tabela de Dados

Exercício Seguindo a dica anterior, implemente a exclusão no

nosso exemplo de cadastro Crie um bean para a tela de manutenção

Este bean deve ter um atribudo que é a lista para exclusão Deve-se criar uma ação para excluir as linhas A exclusão deverá remover do banco as linhas selecionadas A lista deverá ser lida novamente ao final da exclusão

Crie a tela para manutenção como na dica


Tabela de Dados

Modelo de tabelas Todos os dados passados para um dataTable são

“empacotados” dentro de um modelos Pacote javax.faces.model temos os seguinte

modelos usados ArrayDataModel ListDataModel ResultDataModel ResultSetDataModel ScalarDataModel


Tabela de Dados

Modelo de tabelas Todos os modelos extendem a classe DataModel

esta possui os seguintes métodos:

Todos os modelos tem um contrutor que recebe como parametro um objeto do seu tipo correspondente (List, ResultSet, etc...)

Método Descriçãoget/setWrappedData Retorna/seta o objeto que contem os dados do modeloget/setRowIndex Retorna/seta o indice da linha para exibiçãogetRowData Retorna o item correspondente ao indice setadoisRowAvaliable Retorna true se a linha está disponívelgetRowCount Retorna o número total de linhas


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


Tabela de Dados

Modelo de Tabelas O método 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

Exercício Implemente a opção de altera no exemplo de

cadastro Troque a lista por um ListDataModel Crie o método alterar no bean Adicione uma coluna para acionar a ação alterar Crie uma tela para alteração (pode ser a mesma de

inclusão, ctrl+c ;-) Crie um bean e um metodo para atualizar os atributos da

tela, a partir de um bean cliente Crie o método que irá atualizar os dados no banco de

dados chamando o DAO


Tabela de Dados

Dica: Implementar ordenação 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) { this.wrappedData = clientes;}

public int getRowIndex() {return index; }public void setRowIndex(int index) {this.index = index;}public Object getWrappedData() {return wrappedData; }public void setWrappedData(Object data) {wrappedData = (List) data; }


Tabela de Dados

Dica: Implementar ordenação

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;

}


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());

}

};


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());

}};


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}" />


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


Tabela de Dados



Tabela de Dados

Exercício Implementar o DataModel com capacidades de

ordenação Implementar ordenação por:

Nome Telefone Endereço


Conversores e Validadores

Requisição

RestaurarView

Aplicar valoresdo request

Processarvalidações

Atualizar valores do modelo

Executaraplicação

RenderizarResposta

Resposta

Ciclo de vida O Ciclo de vida de uma requisição JSF possúi

várias “fases”:



Requisição

RestaurarView




Executaraplicação

RenderizarResposta

Resposta

Ciclo de Vida Restaurar view

Recupera a árvore de componentes que representa a view.



Requisição

RestaurarView




Executaraplicação

RenderizarResposta

Resposta

Ciclo de vida Aplicar valores do request

É realizada a conversão default Conversão customizada



Requisição

RestaurarView




Executaraplicação

RenderizarResposta

Resposta

Ciclo de Vida Processar validações

Validação padrãoValidação customizada:

Método de açãoClasse de validação customizadaValidação de método “inline”



Requisição

RestaurarView




Executaraplicação

RenderizarResposta

Resposta

Ciclo de Vida Atualizar valores do modelo

Os beans (model) são atualizados com os valores dos componentes



Requisição

RestaurarView




Executaraplicação

RenderizarResposta

Resposta

Ciclo de Vida Executar aplicação

Chamar os eventosexecutar os métodos (ações)Processar a navegação



Requisição

RestaurarView




Executaraplicação

RenderizarResposta

Resposta

Ciclo de Vida Renderizar resposta

Valores dos componentes são recuperados para renderização


Valor submetido=”10/11/2003”valor local = objeto tipo Date


Processo de conversão Dados lidos da requisição É setado no componente o atributo submitedValue É exetudado o metodo getAsObject do conversor

associado ao componente É feita validação (caso haja) método validate Modelo é atualizado (bean)

UIInput

DataNascimento = objeto tipo date

Modelo - Bean



Conversores padrão f:convertNumber

Atributo Tipo Descriçãotype String number (default), currency ou percentpattern String Padrão de formatação, conforme java.text.DecilmalFormatmaxFractionDigits Int Numero máximo de digitos na parte fracionáriaminFractionDigits Int Numero mínimo de digitos na parte fracionáriamaxIntegerDigits Int Numero máximo de digitos na parte inteiraminIntegerDigits Int Numero mínimo de digitos na parte inteiraintegerOnly Boolean Se verdadeiro, considera somente a parte inteira (default: false)groupingUsed Boolean Se usa separadores de grupos (default: true)locale java.util.Locale Variável de locale que sera usada na formatação e no parsingcurrencyCode String Código monetario isso 4217currencySymbol String Simbolo monetário a ser usado



Conversores padrão f:convertDateTime

Atributo Tipo Descriçãotype String date (default), time ou both dateStyle String default, short, medium, long ou full timeStylle String default, short, medium, long ou full Pattern Int Padrão de formatação de acordo com java.text.SimpleDateFormatlocale java.util.Locale Localização cujas preferências são usadas para parsing e formataçãotimeZone java.util.TimeZone Fuso horário a ser usado para parsing e formatação



Atributo Converter É possivel atribuir um conversor a um componente

sem a necessidade de usar a tag de conversão

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

<h:inputText id="limite" value="#{clienteInsert.limiteCredido}" converter="javax.faces.Double"/>



Erros de conversão Componente gera uma mensagem de erro sempre

que ocorrer um erro de conversão Deve-se usar h:message ou h:messages para exibir a

mensagem A página é exibida novamente Dica:

h:messages não é muito util para exibir mensagens para cada componente, é mais indicado para mensagens globais, mas caso esteja ocorrendo um erro na página que você não consegue identificar, use-o para exibir todas as mensagens (detail=true)



Erros de conversão Para alterar a mensagem padrão devemos criar

uma nova mensagem no nosso arquivo de mensagens, com o código abaixo

javax.faces.component.UIInput.CONVERSION=.... javax.faces.component.UIInput.CONVERSION_detail=....

Devemos incluir nosso arquivo de mensagens no arquivo de configuração da aplicação<application>

<message-bundle>cadastro.mensagens</message-bundle></application>



Exercício Na tela de inclusão de clientes

Incluir o campo para data de nascimento do cliente Na tela de consulta

Na tabela, incluir uma coluna com a data de nascimento



Validadores padrão

Tag JSP Classe do validador Atributos Validaf:validadteDoubleRange DoubleRangeValidator minimum, Valor double dentro de uma faixa

maximum f:validateLongRange LongRangeValidator minimum, Valor long dentro de uma faixa

maximum f:validateLength LengthValidator minimum, String com número máximo e mínimo

maximum de caracteres

<h:inputTextarea id="obs" value="#{clienteInsert.obs}" cols="50" rows="3"><f:validateLength maximum="400"/>

</h:inputTextarea>



Valores Obrigatórios Para obrigar o preenchimento de um componente,

basta usar o atributo required=“true”

<h:inputText id="nome" value="#{clienteInsert.nome}" maxlength="50" required="true"/>



Erros de validação São exibidos da mesma maneira que os erros de

conversão Mensagens padrão:

Mensagem simples javax.faces.component.UIInput.REQUIRED

Mensagem com parametros ( {0} max, {1} min) 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



Erros de validação Mensagens padrão (cont):

javax.faces.validator.DoubleRangeValidator.TYPE javax.faces.validator.LongRangeValidator.TYPE javax.faces.validator.LengthValidator.MAXIMUM javax.faces.validator.LengthValidator.MINIMUM

Estas mensagens tambem tem a opção detail javax.faces.component.UIInput.REQUIRED_detail javax.faces.validator.NOT_IN_RANGE_detail etc....



Ignorando a validação e a conversão Caso na tela exista um botão para cancelar a

entrada de dados, não desejaremos que seja feita uma validação dos dados entrados (não só validação, mas conversão tambem)

Para ignorarmos estes passos usamos o atributo immediate

<h:commandLink value="Cancelar" action="#{clienteInsert.cancelar}" immediate="true" />



Exercício No cadastro de clientes fazer a validação do campo

observação, para que este não ultrapasse 200 caracteres.



Conversores personalizados Devemos implementar a interface

javax.faces.convert.ConverterObject getAsObject(FacesContext context, UIComponent component, String newValue)

String getAsString(FacesContext context, UIComponent component, Object value)

Caso ocorra erro na execução deve ser lançada a exception javax.faces.convert.ConverterException



Exemplo: conversor de Data com suporte a GregorianCalendar

pakage converter;import java.text.SimpleDateFormat;import java.util.Date;import java.util.GregorianCalendar;import javax.faces.application.FacesMessage;import javax.faces.component.UIComponent;import javax.faces.context.FacesContext;import javax.faces.convert.Converter;import javax.faces.convert.ConverterException;

public class DateConverter implements Converter{

private String pattern="dd/MM/yyyy";

....

}



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

}



Exemplo: configuração FacesConfig.xml

<application> <message-bundle>mensagens</message-bundle> </application> <converter> <converter-id>dateConverter</converter-id> <converter-class>converter.DateConverter</converter-class> </converter>



Exemplo: mesagens mensagens.properties

DATECONVERTER.ERROR=Data inválidaDATECONVERTER.ERROR_detail=O valor {0} entrado no campo {1} é inválidoDATECONVERTER.FATAL=Tipo de dados inválidoDATECONVERTER.FATAL_detail=Tipo de dados {0} inválido no componente {1}



Exemplo: utilização

<h:inputText id="data" value="#{bean.campoData}"> <f:converter converterId="dateConverter" /></h:inputText>



Como ler mensagens: public static FacesMessage getMessage( String id, String idDetail,

Object[] parameters, Severity severity) { 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; }



Como ler Mensagens FacesContext – contexto faces

getViewRoot – view da requisição corrente getApplication – retorna uma instancia de Application

desta aplicação getApplication().getMessageBundle – retorna o nome do

arquivo de mensagens associado a aplicação 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.Validatorvoid validate(FacesContext context, UIComponent

component, Object value) Em caso de erro de validação deve ser lancaça a

exception javax.faces.validator.ValidatorException



Exemplo: validador de CPFpackage 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); } }(continua)



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)



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

}



Exemplo: configuração

Mensagens

Utilização

<validator> <validator-id>cpfValidator</validator-id> <validator-class>converter.CPFValidator</validator-class> </validator>

CPFVALIDATOR.ERROR=CPF InválidoCPFVALIDATOR.ERROR_detail=O valor {0} do campo {1} não é um CPF válido

<h:inputText id="cpf" value="#{bean.cpf}"> <f:validator validatorId="cpfValidator"/></h:inputText>



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 método createConverter Utilizar o super.createConverter para pegar o conversor

É nessesário 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; }

}

Exemplo: tag para nosso DataConverter


Conversores Validadores

Exemplo: tag para nosso DataConverter Salvar estados do conversor

Nossa classe de coversão deve implementar Serializable Ou implementar StateHolder (caso não possa ser usado

serializable) Deve ter um construtor padrão Implementar os métodos

Object saveState(FacesContext context) void restoreState(FacesContext context, Object state)

Object pode ser um array que irá armazenas as variávies que podem ser serializadas

Criar uma propriedade transient (setTransient e isTransient) do tipo boolean (aparentemente não tem efento nenhum (?))


Converores e Validadores

Exemplo: tag para nosso DataConverter Alterar classe do conversor

Implementar Serializable Incluir métodos 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; }



Exemplo: tag para nosso DataConverter 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 web-jsptaglibrary_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>



Exemplo: tag para nosso DataConverter Utilização

<%@taglib prefix="cv" uri="/WEB-INF/ConverterTag" %>

<h:inputText id="gdata" value="#{teste.data}"> <cv:dataConverter pattern="dd-MM-yyyy"/></h:inputText>



Tag para validadores personalizados Segue o mesmpo padrão 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 métodos saveState restoreState isTransiente setTransient



Passando atributos sem usar uma tag personalizada Utiliza-se a tag f:attribute

Deve-se pegar o atributo direto do componente

<h:inputText id="data" value="#{bean.data}"><f:converter converterId="dateConverter" /><f:attribute name="pattern" value="dd-mm-yyyy"/>

</h:inputText>

pattern = (String) component.getAttributes().get("pattern");



Exercícios Implementar o conversor de data com suporte a

GregorianCalendar Implementar a tag para receber o parâmetro pattern Implementar a classe FacesUtil

Implementar o validador de CPF


Eventos

Tipos de Eventos Eventos de ação Eventos de mudança de valor Eventos de Fase


Eventos

Ciclo de Vida

RestaurarVisão

Aplicar Valores

do request


AtualizarValores

do Modelo

InvocarAplicação

RenderizarResposta

ProcessarEventos

ProcessarEventos

ProcessarEventos

ProcessarEventos

Request

Response





Eventos de mudança de valor

Eventos de ação


Eventos

Ciclo de vida Restaurar visão

Recria a árvore de componentes server-side Aplicar valores de Requisição

Copia os parametros da requisição para valores submetidos

Processar Validações Converte os valores submetidos e valida o valor

convertido


Eventos

Ciclo de vida Atualizar valores do Modelo

Copia o valor convertido e validado para o modelo (através das expressões #{bean.atributo})

Invocar Aplicação Chama os listeners de ação e as ações, nessa ordem

Renderizar Resposta Salva o estado e carrega a visão seguinte


Eventos

Eventos de mudança de valor 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

Eventos de mudança de valor javax.faces.event.ValueChangeEvent

UIComponent getComponent() Componente que iniciou o evento

Object getNewValue() Retorna o novo valor

Object getOldValue() Retorna o valor anterior


Eventos

Eventos de Ação Ocorrem sempre que uma ação é disparada, usado

apenas com commandButton e commandLink É processada antes da ação

<h:commandButton type="submit" value="enviar" actionListener="#{bean.alteraLabel}"/>

public void alteraLabel(ActionEvent e) { UICommand c = (UICommand) e.getComponent(); c.setValue("novo label"); }


Eventos

Eventos de Ação Dica: devem ser utilizados para lógica da interface,

ficando as actions com a lógica de negócios

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 Mudança de valor

f:valueChangeListener

Ao invéz de um método ele faz referência a uma classe que implementa a interface ValueChangeListener

<h:selectOneMenu id="prod" value="#{bean.produto}" onchange="submit()"><f:valueChangeListener type="br.com.cadastro.ComboProdutoListener"/><f:selectItems value="#{bean.comboProdutos}" />

</h:selectOneMenu>

public class ComboProdutoListener implements ValueChangeListener{ public void processValueChange(ValueChangeEvent event) { .... }}


Eventos

Tags Event Listener Ação

f:actionListener

Ao invéz de um método ele faz referência a uma classe que implementa a interface ActionListener

<h:commandButton type="submit" value="enviar" > <f:actionListener type="br.com.cadastro.EnviarListener"/></h:commandButton>

public class EnviarListener implements ActionListener{ public void processAction(ActionEvent event) { .... }}


Eventos

Componentes Imediatos Quando é necessário que uma determinada ação

ou evento ocorra antes das fases de conversão e validação

Por exemplo cancelar uma entrada de dados Para habilitar usa-se o atributo immediate=true

CommandButton e commandLink para eventos de ação e actions

inputs em geral (select, inputText, etc...) para tratar eventos de valueChangeListener


Eventos

Componentes Imediatos

RestaurarVisão

Aplicar Valores

do request


AtualizarValores

do Modelo

InvocarAplicação

RenderizarResposta

ProcessarEventos

ProcessarEventos

ProcessarEventos

ProcessarEventos

Request

Response





Inputs imediatos

Ações imediatas


Eventos

Componentes Imediatos 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"/>


Eventos

Componentes Imediatos Dica: ir diretamente para a fase de renderização,

ignorando as vases de validação, atualização do modelo e execução da aplicação (actions)

Executar o método 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(); }


Eventos

Eventos de fase São 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>


Eventos

Eventos de fase Método 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 aplicação


Eventos

Eventos de fase

public class Trace implements PhaseListener {

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;

}

}


Eventos

Exercício 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) Exibição do preço do produto Exibição do total por linha e o total do pedido no rodape da coluna Botão para excluir item

Botões para Incluir item (incluir um novo item no list do dataModel) Salvar pedido Cancelar


Subvisões e Tiles

Subvisões f:subview

Utilizada para fazer inclusão de porções de código jsp nas páginas

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 são ignoradas Páginas incluídas não devem ter a tag f:view


Subvisões e Tiles

Subvisões Para incluir conteudo dentro de uma subview são

utilizadas: <%@ include file= “conteudo.jsp” %>

páginas são incluídas em tempo de compilação <jsp:include page= “conteudo.jsp” %>

páginas são incluídas em tempo de execução <c:import url= “conteudo.jsp” %>

páginas são incluídas em tempo de execução, pode acessar recursos/sites externos (depende da instalação da JSTL)


Subvisões e Tiles

Subvisões Utilização:

<f:subview id="cabecalho"> <jsp:include page="cabecalho.jsp" /></f:subview> Importante: apesar do acesso as páginas jsp serem

feitas melo mapeamento da servlet FacesServlet (*.jsf, /faces/* ou *.faces) a página incluida não deve usar o mapeamento

Exercício Criar uma página jsf contendo um cabeçalho e incluir

esta página nas páginas da nossa aplicação


Subvisões e Tiles

Tiles É um framworkd que permite ao desenvolvedor

criar modelos de páginas e de maneira fácil e declarativa incluir partes reutiliáveis de páginas

É distribuído 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 informações sobre o Tiles acesse http://www.lifl.fr/~dumoulin/tiles/


Subvisões e Tiles

Tiles Definindo o arquivo de configuracão do tiles

<contextparam> <paramname>tilesdefinitions</paramname> <paramvalue>/WEBINF/tiles.xml</paramvalue> </contextparam>


Subvisões e Tiles

Tiles MyFaces possúi um ViewHander que dá suporte ao

Tiles em aplicações JSF. para usá-lo basta configurá-lo no nosso arquivo de configuração da aplicação

<application> <viewhandler> org.apache.myfaces.application.jsp.JspTilesViewHandlerImpl </viewhandler></application>


Subvisões e Tiles

Tiles Pagina de layout

<table width="100%"> <tr ><td colspan="2"> <f:subview id="titulo"> <tiles:insert attribute="titulo" flush="false"/> </f:subview> </td> </tr> <tr><td width="10%"> <f:subview id="menu"> <tiles:insert attribute="menu" flush="false"/> </f:subview> </td> <td width="*"> <f:subview id="corpo"> <tiles:insert attribute="corpo" flush="false"/> </f:subview> </td></tr> <tr> <td colspan="2"> <f:subview id="rodape"> <tiles:insert attribute="rodape" flush="false"/> </f:subview> </td></tr></table>


Subvisões e Tiles

Tiles Definições do tiles

<tilesdefinitions> <definition name="layout" path="/layout.jsp" > <put name="titulo" value="/titulo.jsp" /> <put name="menu" value="/menu.jsp" /> <put name="rodape" value="/rodape.jsp" /> </definition> <definition name="inicio.tiles" extends="layout" > <put name="corpo" value="/inicio.jsp" /> </definition> <definition name="inserir.tiles" extends="layout" > <put name="corpo" value="/inserir.jsp" /> </definition> <definition name="consultar.tiles" extends="layout" > <put name="corpo" value="/consultar.jsp" /> </definition> <definition name="pedido.tiles" extends="layout" > <put name="corpo" value="/pedido.jsp" /> </definition></tilesdefinitions>


Subvisões e Tiles

Tiles Página de menu

Página de cabeçalho

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%><h:form> <h:panelGrid columns="1" styleClass="subtabela"> <h:commandLink value="Inserir" action="inserir"></h:commandLink> <h:commandLink value="Consultar" action="#{clienteInsert.consultar}"></h:commandLink> <h:commandLink value="Pedido" action="pedido"></h:commandLink> </h:panelGrid></h:form>

<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%><h:outputText value="Curso de JavaServerFaces" styleClass="titulos" />


Subvisões e Tiles

Tiles


Subvisões e Tiles

Tiles Exercício, incluir o tiles na nossa aplicação em

todas as paginas


Componentes Personalizados

Dicas para desenvolver um componente: Simule o resultado em HTML antes de implementar

Teste o visual, javascript, etc... Separe o JavaScript em funções e verifique se

estas não conflitam com outros componentes Teste seu componente com outros componentes

na mesma página Sendo filho deles Tendo eles como filhos (caso ele de suporte)

Verifique se ele funciona em diferentes browsers



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



Passos para o desenvolvimento de um componente Implementar a renderização

Pode ser implementada no próprio método encodeBegin e encodeEnd

void encodeBegin(FacesContext context) – inicio da geração de html (abrir tags: <div>)

void encodeEnd(FacesContext context) – fim da geração de html (fechar tags: </div>)

Implementar um renderizador externo Extender a classe Renderer



Passos para o desenvolvimento de um componente Implementar a Tag do componente

Estender a classe UIComponenteTag String getContentType() - nome simbólico do componente String getRendererType() - nome simbólico do renderizador void release() - setar os atributos para nulo void setProperties(UIComponent) - passa os parametros da tag

para o componente Verificar a utilização de expressões

Criar arquivo TLD para a tag Registrar o componente no faces-config.xml



Componente HelloWorld - HelloUIEstender UIComponenteBase

Família do componente

Método 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 (expressões) ou como atributos String



Componente HelloWorld - HelloUITagEstender UIComponenteTag

Tipo do componente (família)

Componente não tem renderizador separado

Passa os parametros para o componente

Verifica se o parametro é uma expressão ou se é uma String



Componente HelloWorld - HelloUITag

Atributos da tag

Limpa os atributos



Componente HelloWorld – arquivo TLD

Classe da tag

Atributos herdados

Atributos da tag



Componente HelloWorld – configuração no faces-config.xml

Familia do componente

Classe do componente



Componente HelloWorld – Utilização



Funcionamento do componente



Componente de Entrada - SpinnerUI

SetConverter define um conversor para o componente

Métodos criados no componente para simplificar o desenvolvimento

ClientID retorna o id gerado no cliente: “idform:idcampo”



Componente de Entrada - SpinnerUI

Método para criar o campo

Cria o botão para incrementar

Cria o botão para decrementar



Componente de Entrada – SpinnerUI Método decode responsável por ler os parametros

do request

Verifica se um dos botões foi pressionado

Caso o valor não seja um numero inteiro, deixa como responsabilidade do conversor exibir a mensagem de erro



Componente de Entrada – SpinnerTag



Componente de Entrada – Configuração Spinner Arquivo TLD

Faces-Config.xml



Componente de Entrada – Utilização



Exercício Crie um novo projeto no eclipse e tomo por base as

configurações do arquivo blank.war (está junto com os exemplos do MyEclipse)

Implemente o componente HelloWorld Implemente o componente Spinner Implemente um Bean e uma Página para testá-los


Dicas

Componentes do MyFaces Menu Tree NewsPaper Table Tabbed Pane Calendar Schedule DataScroller


Dicas

Componentes do MyFaces Menu


Dicas

Componentes do MyFaces 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>


Dicas

Componentes do MyFaces Tree

<t:tree2 value="TreeModel" var="String" varNodeToggler="String"> ...(anyComponent)...</t:tree2>


Dicas

Componentes do MyFaces 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>


Dicas

Componentes do MyFaces 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>


Dicas

Componentes do MyFaces 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

Componentes do MyFaces Schedule


Dicas

Componentes do MyFaces 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

Componentes do MyFaces 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

Paginação 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

Paginação 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(); }


Dicas


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


Dicas


//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) { }


Dicas


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


Dicas


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


Dicas

Paginação no Banco Utilização 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; } }


Dicas

Gerando dados binários (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);


Dicas

Gerando dados binários (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 possúi 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

Utilização

<%@ 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 Sessão

context.getExternalContext().getSession(); Atributos da sessão

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();


Dicas

Criando uma tela dinamicamente (binding) 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();

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}" />


Dicas

Links para mais informações 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

cursojsf

Documents

padro de encapsulamento

na opo windowpreferences

linguagem

curso javaserver

core javaserver

encadeamento

primeiro valor

exemplo de