Java Server Faces

thickbugSoftware and s/w Development

Oct 28, 2013 (3 years and 9 months ago)

79 views

Java Server Faces

Itamir de Morais Barroca Filho

Mario V. Andrade de Melo Neto

Conteúdo


MVC


O que é JSF?


Instalando o JSF


Serviços JSF


Rendering


Navegação de Páginas


Managed
-
Bean


JSF Expression Language


Tratamento de Eventos


Tags JSF


Data tables


Componentes MyFaces

MVC


Model
-
View
-
Controller


Programação orientada a objetos


Padrão de Projeto que possui as
características:


Divisão de responsabilidades;


Separação de camadas;


Reusabilidade;


Três camadas: modelo, visualização e controle.


MVC


Model
-
View
-
Controller



Camada de Apresentação

JSP, Swing, SWT

Camada de Aplicação

Façades, Bussines Delegates, Actions

Camada de Domínio

Objetos de domínio, lógica de negócio

Camada de Persistência

DAOs, JDBC, Hibernate

Java Server Faces


Framework MVC que permite:


Manipulação de eventos


Implementação flexível de controladores


Chamada de métodos controladores diretamente a
partir da visualização.


Independente de visualização


Pode
-
se utilizar JSF para gerar views que não sejam
HTML


Framework padrão JEE (Java Enterprise Edition)

Instalando o Java Server Faces


Para utilização do JSF em um projeto é
necessário:


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


jsf
-
api.jar


jsf
-
impl.jar


libs comons


JSTL libs


Criar um arquivo de configuração:


faces
-
config.xml


Instalando o Java Server Faces


Para utilização do JSF em um projeto é
necessário:


Definir no web.xml:


<servlet>


<servlet
-
name>Faces Servlet</servlet
-
name>


<servlet
-
class>


javax.faces.webapp.FacesServlet</servlet
-
class>


<load
-
on
-
startup>1</load
-
on
-
startup>


</servlet>


<servlet
-
mapping>


<servlet
-
name>Faces Servlet</servlet
-
name>


<url
-
pattern>/faces/*</url
-
pattern>


</servlet
-
mapping>

Serviços JSF


Arquitetura MVC


JSF conecta view e model


Um
a view

pode ser conectado diretamente ao
modelo

<h:inputTextvalue="#{user.name}"/>


JSF opera como controller quando faz com que o
clique de um botão invoque um método no lado
servidor

<h:commandButton value="Login" action="#{user.check}"/>




Serviços JSF


Conversão de Dados


Usuários entram dados em formato String


Objetos de negócio necessitam de Strings, inteiros,
decimais e datas


JSF faz a conversão automática dos dados


Validação e Tratamento de Erros


JSF torna fácil a inclusão de validações como: “valor
requerido”, “valor deve ser inteiro”


Ao entrar com dados inválidos, faz
-
se necessário mostrar
os dados errados


JSF trata da maior parte da tarefa tediosa de converter
dados e validar/tratar erros



Serviços JSF


Componentes Customizados


Desenvolvedores podem desenvolver
componentes sofisticados e podem utilizar
arrastando para as páginas


Exemplo:




<acme:calendar







value="#{flight.departure}"



startOfWeek="Mon"/>



Serviços JSF


Renders Alternativos


Por default, o componente é gerado para HTML


Mas, é fácil estender o framework JSF para gerar
outras saídas: XML, WML, etc.


Suporte a ferramentas


JSF é ideal para ser utilizado em IDEs


Estilo drag
-
and
-
drop



Serviços JSF


Fluxo Geral



Rendering

<h:form>


Nome: <h:inputText/>


Telefone: <h:inputText/>


<h:commandButton/>

</h:form>




Rendering


Todo

o

texto

que

não

é

JSF

tag

é

simplesmente

passado

adiante


As

tags

h
:
form,

h
:
inputText,

h
:
inputSecret

são

convertidas

para

HTML


Cada

uma

das

tags

é

associada

com

um

determinado

componente



Cada

classe

tem

um

renderer

que

gera

a

saída

(HTML

por

padrão)


O

processo

de

gerar

saída

da

árvore

de

componentes

gráficos

é

chamado

encode


Navegação de Páginas


A

navegação

de

páginas

em

JSF

é

baseado

em

regras

de

navegação


Navegação

Estáticas


Apenas

um

link

estaticamente

definido


Navegações Dinâmicas


O

link

é

dinamicamente

descoberto

Navegação de Páginas

index.jsp

listar.jsp

cadastrar.jsp

index

listar

cadastrar

index

listar

Navegação de Páginas


Exemplo: index.jsp



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

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


<f:view>

<h1>Página Principal</h1>

<br/>


<h:form>


<h:commandButton value=“Listar" action=“listar"/>


<h:commandButton value=“Cadastrar" action=“cadastrar"/>


</h:form>

</f:view>

Navegação de Páginas


Cont. do ex.: configuração de navegação


<navigation
-
rule>


<from
-
view
-
id>/index.jsp</from
-
view
-
id>


<navigation
-
case>


<from
-
outcome>listar</from
-
outcome>


<to
-
view
-
id>/listar.jsp</to
-
view
-
id>


</navigation
-
case>


<navigation
-
case>


<from
-
outcome>cadastrar</from
-
outcome>


<to
-
view
-
id>/cadastrar.jsp</to
-
view
-
id>


</navigation
-
case>

</navigation
-
rule>

Navegação de Páginas


No

exemplo

anterior

temos

navegação

estática
:


A

navegação

estática

não

é

muito

interessante

pois

se

as

identificadores

são

fixos,

não



necessidade

de

tanta

“infra
-
estrutura”


Uma

navegação

dinâmica

necessitaria

escolher

o

from
-
outcome

em

tempo

de

execução


Para

isso,

necessitamos

chamar

um

código

Java

para

fazer

esta

decisão


Navegação de Páginas


Navegação

dinâmica
:


Formulário

Formulário

Exemplo:
Reservar
Passagem

Classe Java

String processar()

over
-
booking

sucesso

lotado

Navegação de Páginas


Navegação

dinâmica
:


<navigation
-
rule>


<from
-
view
-
id>/
psssagem
.jsp</from
-
view
-
id>


<navigation
-
case>


<from
-
outcome>
lotado
</from
-
outcome>


<to
-
view
-
id>/
lotado
.jsp</to
-
view
-
id>


</navigation
-
case>



<navigation
-
case>


<from
-
outcome>
overbooking
</from
-
outcome>


<to
-
view
-
id>/
over.
jsp</to
-
view
-
id>


</navigation
-
case>



<navigation
-
case>


<from
-
outcome>
sucesso
</from
-
outcome>


<to
-
view
-
id>/
sucesso.
jsp</to
-
view
-
id>


</navigation
-
case>

</navigation
-
rule>

Managed
-
Bean


Um Managed
-
Bean é uma classe definida no
faces
-
config que é identificada através de um
alias


Permite
ligar

um formulário diretamente a um
ou mais
método
s


Funciona como elemento de controle


Chamando o modelo


Escolhendo a visualização


Utilizado para navegação dinâmica (através
do retorno do método)


Managed
-
Bean


Definição no faces
-
context

<faces
-
config>


<managed
-
bean>


<managed
-
bean
-
name>
nome
</managed
-
bean
-
name>


<managed
-
bean
-
class>
classe
</managed
-
bean
-
class>


<managed
-
bean
-
scope>


request|session|application


</managed
-
bean
-
scope>


</managed
-
bean>

</faces
-
config>

Managed
-
Bean


Para chamar um bean:


Usa
-
se a chamada ao Managed Bean





<h:commandLink value="Voltar“




action=“#{beanName.metodo}"/>



A declaração do método deve ser





public String metodo() { .... }

Managed
-
Bean


Exemplo:
Uma página com um formulário
que recebe um valor


Caso o valor digitado seja ímpar, redirecionar
para uma página


Caso o valor seja par, redirecionar para outra
página

Managed
-
Bean


Cont. do ex.: definição do bean

package curso.jsf;

public class Valor {


private int valor;


public void setValor(int valor) {



this.valor = valor;


}


public int getValor() {



return valor;


}



public String processar() {



if ( valor % 2 == 0 ) {




return “par”;



} else {




return “impar”;



}


}

}

Managed
-
Bean


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

<faces
-
config>


<managed
-
bean>


<managed
-
bean
-
name>
bean
</managed
-
bean
-
name>


<managed
-
bean
-
class>
curso.jsf.Valor
</managed
-
bean
-
class>


<managed
-
bean
-
scope>request</managed
-
bean
-
scope>


</managed
-
bean>

</faces
-
config>

Managed
-
Bean


Cont. do ex.: configurações de navegação

<navigation
-
rule>


<from
-
view
-
id>/index.jsp</from
-
view
-
id>


<navigation
-
case>


<from
-
outcome>par</from
-
outcome>


<to
-
view
-
id>/par.jsp</to
-
view
-
id>


</navigation
-
case>


<navigation
-
case>


<from
-
outcome>impar</from
-
outcome>


<to
-
view
-
id>/impar.jsp</to
-
view
-
id>


</navigation
-
case>

</navigation
-
rule>

Managed
-
Bean


Cont. do ex.: formulário

<f:view>

<h:form>


Valor: <h:inputText value="#{bean.valor}"/><BR>


<h:commandButton value=“Enviar“action="#{bean.
processar
}"/>

</h:form>

</f:view>

Managed
-
Bean


Explicação do exemplo:


Quando o formulário é enviado, os dados são
preenchidos no managed Bean e o método
escolher é chamado



Baseado no retorno do método a escolha de
navegação é feita


Baseada nos navigation
-
rules.



Managed
-
Bean


Cenários de utilização do JSF:


Uma aplicação JSF suporta dois tipos de respostas e dois
tipos de requisições:



Faces Response:

Uma resposta que foi criada a partir da
renderização de componentes JSF.


Non
-
Faces Response:

Uma página JSP qualquer que não
incorpora componentes JSF.



Faces Request:

Uma requisição que é enviada a partir de
uma resposta JSF anterior.


Non
-
faces Request:

Uma requisição vinda de uma página
que não possuiu uma prévia geração de componentes JSF.




JSF Expression Language


O JSF possui uma linguagem de expressões
para simplificar a sintaxe de acesso a
informações:


Ex.:


#{cliente.nome}


#{cliente.endereco.rua}


#{aluno.disciplinas[3].ementa}


#{x > 0 ? “Positivo” : “Negativo”}



Tratamento de Eventos


Existem dois tipos de eventos


Eventos que iniciam um processamento no back
-
end


Eventos que apenas alteram a interface do usuário


JSF categoriza esses códigos como:


Action Controllers


Disparado depois do bean populado e validado


Retorna uma String como navegação


Event Listeners


Frequentemente disparado antes do bean ser populado e
validado


Nunca afeta diretamente a navegação de página

Tratamento de Eventos


Action Listeners


Disparado por botões, links, etc.


<h:commandButton value=“...”/>


<h:commandButton image=“...”/>


<h:commandLink .../>


ValueChangeListener


Disparado por Caixas de Combinação (Combo Box),
checkbox, radio button, textfield, etc


<h:selectOneMenu .../>


<h:selectBooleanCheckBox .../>


<h:selectOneRadio ../>


<h:inputText .../>


Não submetem o formulário automaticamente


Tratamento de Eventos


Action Listeners


Quando desejamos que o botão submeta o botão e inicie
um processamento de backend, usamos:


<h:commandButton action=“...”/>


Quando desejamos apenas afetar a interface
gráfica


<h:commandButton actionListener=“...”/>


Usualmente, desejamos que isso ocorra antes da
validação e população


Pois os formulários frequentemente estão incompletos


Use o atributo immediate para informar que o evento será
chamado antes do bean ser populado e validado


<h:commandButton actionListener=“...” immediate=“true”/>



Tratamento de Eventos


Criando um Tratador de um Evento


Criamos um ActionEvent com as seguintes
regras:


Sem tipo de retorno (void)


ActionEvent está em javax.faces.event.


O ActionEvent possui a referência para o objeto
modificado


Exemplo

public void trataEvento(ActionEvent event) {


// acao()

}





Tratamento de Eventos


ValueChangeListener


Action é ligado a um botão Sem tipo de retorno
(void)


Formulário é submetido quando clicado


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


O formulário não é submetido automáticamente


Necessário adicionar javascript para submeter o
formulário:


Onclick=“submit()” e onchange=“submit()”






Tratamento de Eventos


Implementando um ValueChangeListener


Método que possui um ValueChangeEvent como
argumento


ValueChangeEvent


getComponent: Retorna o componente alterado


getOldValue(): Valor anterior


getNewValue(): Valor alterado


Necessário pois provavelmente o Bean ainda não foi
populado


Valor para um checkbox é Boolean


Valor para um radio button ou textfield é o parametro de
request







Tags JSF


As aplicações JSF fazem uso extensivos de
Tag Libraries



As Tags JSF não são simplesmente tags
HTML, e sim, classes que geram
(renderizam) HTML



Existem mais de 43 tags no JSF Padrão






Tags JSF


Validação da Entrada do Usuário


Duas tarefas que são quase que essenciais em
aplicações Web:


Checar se toda a informação necessária está presente
no formato correto


Reexibir a informação quando algo estiver incorreto ou
mal
-
formado


Com mensagens de erros mostrando problemas


Com informações corretas mantidas


Isto é extremamente chato na maioria das
tecnologias de desenvolvimento WEB



Tags JSF


Validação da Entrada do Usuário


Validação Manual


Faz a validação nos métodos sets e gets


Programador faz código de validação


Validação no método de ação


Validação Automática Implícita


Adiciona required na entrada


Usar h:message para informar erros


Validação automática explícita


f:convertNumber, f:convertDateTme, f:validateLength,
f:validateDoubleRange, f:validateLongRange


Sistema reexibe caso erro


Validadores customizáveis


Herdam Validador, sobrescrevem o validate e são registrados no
faces
-
config.xml







Tags JSF


Exemplo de Validação Manual: no bean


private ArrayList erros;


public String processar() {



if ( idade <= 0 || idade > 120 ) {



erros.add(“Idade inválida, por favor, redigite
-
a”);


}



if ( erros.size() > 0 ) {



return null;


} else {



return “navegacao”;


}


}








Tags JSF


Cont. ex. de Validação Manual: no bean


public String getErro
s
() {


String message;


if (erro
s
.size() == 0) {



message = "";


} else {



message = "<FONT COLOR=RED><B><UL>
\
n";




for(int i=0; i<erro
s
.size(); i++) {





message = message + "<LI>" +





(String)erro
s
.get(i) + "
\
n";



}




message = message + "</UL></B></FONT>
\
n";



}



return

message

;


}








Tags JSF


Cont. ex. de Validação Manual: na jsp


<h:form>

<h:outputText value="#{
funcioanrio
.erro
s
}“

escape="false"/>


...

</h:form>







Tags JSF


Exemplo de validação implícita

<h:form>

<TABLE> <TR>

<TD>Nome:

<h:inputText value="#{funcionario.nome}"


required="true“
id=“
nome
"/>

</TD>

<TD>

<h:message for=“
nome
" styleClass="RED"/>

</TD></TR>

<TR>

<TD>
Telefone
:

<h:inputText value="#{funcionario.
telefone
}"


required="true“

id=“
telefone
"/></TD>

<TD>
<h:message for=“
telefone
"
s
tyleClass="RED"/>

</TD></TR>

…</TABLE>…</h:form>







Tags JSF


Exemplo de validação explícita


<h:form>


<TABLE>

<TR>


<TD>User ID:

<h:inputText value="#{bidBean2.userID}“

id="userID">


<f:validateLength minimum="5" maximum="6"/>


</h:inputText></TD>


<TD><h:message for="userID"


styleClass="RED"/></TD></TR>

</form>



Data Tables


JSF possui uma estrutura para exibir tabelas


Realiza iteração automática sob os elementos da
coleção


<h:dataTable
value="#{someBean.someCollection}“

var="rowVar"
>

<h:column>


<h:outputText value="#{
rowVar
.col1Data}"/>

</h:column>

<h:column>


<h:outputText value="#{
rowVar
.col2Data}"/>

</h:column>

</h:dataTable>

Data Tables


value: Uma coleção (lista de bens)


Array


List


ResultSet


DataModel (javax.faces.model)


var


Variável de cada item da coleção


Outros atributos


Atributos padrões de tabelas


border, bgcolor, width, cellpadding, cellspacing, frame, ...


Informações de Estilo


rowClasses, headerClass, footerClass


Data Tables


Exemplo



Escalação da seleção brasileira (copa 2006)


Managed
-
Bean: Elenco


Classe: Jogador


Páginas


brasil.jsp: Datatable com a lista dos jogadores





Data Tables


Exemplo




public class Jogador {


private int numero;


private String nome;


private boolean escalado;




}

public class
Elenco

{


private Collection timeBrasil;

}

Data Tables


Cont. do exemplo: listagem




<f:view>


<h:dataTable value="#{elenco.brasil}" var="canarinho"

border="1">


<h:column>


<h:outputText value="#{canarinho.numero}"/>


</h:column>


<h:column>


<h:outputText

value="#{canarinho.nome}"/>


</h:column>


</h:dataTable>

</f:view>

Data Tables


Cont. do exemplo: listagem




Componentes MyFaces

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

Componentes MyFaces

TabbedPane

Tree2


Componentes MyFaces

Calendário/Date

Componentes MyFaces

HTML/Editor

Componentes MyFaces

Schedule

Exercício


Nível I


Crie

uma

jogo

com

JSF

para

adivinhar

um

número

secreto
.

Esse

jogo

deve

possuir

duas

JSPs
:

uma

onde

o

usuário

digitará

um

número

e

outra

onde

será

exibido

uma

mensagem

de

sucesso

e

número

de

tentativas

para

o

acerto,

caso

o

usuário

acerte

o

número

secreto
.

-
O

objetivo

desse

exercício

é

entender
:


a

estrutura

do

faces
-
config
.
xml
;


criação

de

um

bean
;


criação

de

JSPs

com

JSTL
.

Exercício


Nível II


Crie

uma

aplicação

com

JSF

para

cadastro

de

veículos

(use

quantos

atributos

forem

necessários)
.

Deverá

existir

duas

JSPs
:

uma

onde

serão

informados

os

dados

do

veículo

e

outra

onde

serão

listados

os

veículos

cadastrados
.

Durante

o

cadastro

devem

ser

validadas

as

entradas

do

usuário
.

Objetivo

do

exercício

é

estudar
:


validações

de

entradas

do

usuário
.




Exercício


Nível III


Crie

uma

aplicação

com

JSF

para

cadastro

de

veículos

(use

quantos

atributos

forem

necessários)
.

Deverá

existir

duas

JSPs
:

uma

onde

serão

informados

os

dados

do

veículo

e

outra

onde

serão

listados

os

veículos

cadastrados
.

Os

veículos

cadastrados

deverão

ser

persistidos

em

um

banco

de

dados
.

-
Objetivo

do

exercício

é

estudar
:


integração

de

tecnologias

(hibernate)
.




Fim

Dúvidas?