Java Server Faces

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


Independente de visualização


Chamada de métodos controladores diretamente a
partir da 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
Uma 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
index
index
listar
listar.jsp
cadastrar
listar
cadastrar.jsp
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
estática:



anterior
temos
navegação
A navegação estática não é muito interessante
pois se as identificadores são fixos, não há
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:
over-booking
Formulário
Classe Java
Exemplo:
Reservar
Passagem
String processar()
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étodos
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




Validação Automática Implícita



Adiciona required na entrada
Usar h:message para informar erros
Validação automática explícita



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
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 getErros() {
String message;
if (erros.size() == 0) {
message = "";
} else {
message = "<FONT COLOR=RED><B><UL>\n";
for(int i=0; i<erros.size(); i++) {
message = message + "<LI>" +
(String)erros.get(i) + "\n";
}
message = message + "</UL></B></FONT>\n";
}
return message ;
}
Tags JSF

Cont. ex. de Validação Manual: na jsp
<h:form>
<h:outputText value="#{funcioanrio.erros}“ 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" styleClass="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
Tree2
TabbedPane
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?