Introdução a JavaServer Faces 2

Globalcode open4education 1

Mini-curso Gratuito

Introduo a JavaServer Faces 2


Permitir que vocs tenham condies de decidir

pelo uso da tecnologia JavaServer Faces em

projetos Web com a linguagem Java

Objetivo


Introduo

Arquitetura do JSF

Configurao

Principais componentes JSF

Ferramentas

Referncias

Perguntas e Respostas

Apresentao da Agenda


Introduo

Arquitetura do JSF

Configurao


Ferramentas

Referncias


Agenda


Tecnologias de Apresentao

Contedo Esttico HTTP

HTML + Javascript + CSS + DOM

Contedo Dinmico CGI

Servlets

JSP

Classical Custom Tags

Tag Files e Simple Tags

Apache Struts

Web 2.0

Histrico


Motivao

MVC tornou-se um padro de mercado (inmeros frameworks);

As interfaces grficas exigidas so muito complexas para serem desenvolvidas somente com HTML exigindo muito

JavaScript;

Muitos componentes de UI sendo desenvolvidos com Custom Tags ou JavaScript sem padronizao;

Baixa produtividade no desenvolvimento de aplicaes Web.

Web Apps sofisticadas - estado persistente entre requests

Por qu JSF?


O que JavaServer Faces (JSF)?

Paradigma de programao visual de User-interfaces baseado em componentes aplicado Web

O framework Java padro para user interfaces em Web applications

UM framework que permite a criao de aplicaes Web com semntica de Swing implementando MVC;

Uma especificao Java EE com mltiplas implementaes (Mojarra / MyFaces)

O que JSF?


Java EE Web Container Java EE EJB

Container

Controller

Model

View

Servlet

JavaBeans

Java

Server

Pages

Custom

Tag

EJB

JavaServer Faces

JSF e Java EE

Introduo


Benefcios com o uso

Toolability = Ferramentabilidade (IDEs WYSIWYG);

Suporte a JSF na maioria dos IDEs;

Portabilidade = Todo Web Container compatvel com a especificao Java EE (5.0 ou superior) implementa JSF;

Aumento da produtividade de aplicaes Java EE;

Suporte internacionalizao;

Gerenciamento de estado entre mltiplas requisies;

Introduo


Benefcios com o uso

Suporte a um modelo de eventos;

Componentes de UI de terceiros compatveis com JSF;

Mecanismo padro de converso e validao de dados;

Alta reusabilidade de componentes de tela e validadores;

Flexibilidade com processo de renderizao de componentes;

Fcil de aprender;

Alta adoo no mercado.

Introduo


Implementao Oracle de Java EE

Servlets JSP EJB Custom Tags JSF

Java EE EJB

Container Java EE Web Container

Glassfish - Oracle

Introduo


Implementao Red Hat de Java EE

Servlets JSP EJB Custom Tags JSF

Java EE EJB

Container Java EE Web Container

WildFly Red Hat

Introduo


Introduo

Arquitetura do JSF

Configurao


Ferramentas

Referncias


Agenda


Arquitetura Client-Server baseada em HTTP;

Dificuldade em prover o mesmo dinamismo de uma aplicao desktop;

Todo o processamento Java acontece no servidor;

Arquitetura Web


Listener

- Validao

- Converso de dados

- Integrao com a camada

Model

- Lgica de negcios, etc

Java

Chamada a mtodos

GUI e Listener

so processados pela

mesma mquina

Arquitetura Swing


Java EE Web Container

Java Servlet

- Validao

- Converso de dados

- Integrao com a camada

Model

- Lgica de negcios, etc

Cliente Browser: HTML + JavaScript

HTTP

REQUEST / RESPONSE

Arquitetura Web


Geralmente cd. para processar cada request envolve: Checar e carregar estado deixado por requests anteriores;

Validar e converter dados recebidos para tipos Java server-side (e gerar mensagens de erro se validao/converso falha);

Atualizar objetos server-side com os novos dados;

Invocar cdigo server-side que realize tarefas como acessar BD;

Preparar estado que precise estar disponvel em prximos requests;

Gerar um response de volta ao cliente (images, scripts, e CSS).

Ciclo vicioso de uma requisio


1.Restore View

2.Apply Request Values

3.Process Validators

4.Update Model Values

5. Invoke Application

6.Render Response

Criao da rvore de componentes de UI.

Se a pgina j foi visualizada na mesma

session os dados so

recuperados.

Ciclo de vida da requisio JSF


1.Restore View





6.Render Response

Atualiza rvore componentes de UI

com valores da

request.

Dispara quaisquer eventos gerados pela

atualizao



1.Restore View





6.Render Response

Executa todas converses de dados +

validaes associadas

aos componentes de UI



1.Restore View





6.Render Response

Cada componente de UI atualiza o seu

backing model



1.Restore View





6.Render Response

Execuo do ActionListener padro,

geralmente com

execuo de

componentes de

negcio



1.Restore View





6.Render Response

Gerao da Response com a rvore de

componentes de UI



Principais componentes:

TagLibraries: JSF Core / HTML - cujas tags representam componentes de tela fundamentais.

Managed Beans: classes Java que respondem por aes e dados de telas JSF;

Expression Language: linguagem utilizada para declarar o vnculo entre telas JSF e managed beans;

FacesController: Servlet provido pelo JSF que representa o ncleo administrativo do JSF;

faces-config.xml: configuraes

Arquitetura JSF


Para criar um aplicativo Web com JSF devemos:

1) Criar a pgina JSF utilizando suas custom tags;

Estrutura da tela e os componentes grficos

2) Criar uma classe JavaBean;

Receber os dados da tela e responder por eventos / aes

3) Configurar o FacesController no web.xml;

4) Criar um faces-config.xml e declarar o JavaBean;

possvel declarar com @ManagedBean no JSF 2

5) Configurar as bibliotecas (caso no haja suporte nativo

Java EE);

Arquitetura JSF


Introduo

Arquitetura do JSF

Configurao


Ferramentas

Referncias


Agenda


JARs necessrios v1.x:

jsf-api.jar jsf-ri.jar jstl.jar standard.jar commons-beansutils.jar commons-digester.jar commons-collections.jar commons-logging.jar

Configurao

JARs necessrios v2.0:

jsf-api.jar jsf-impl.jar

JSF 2


Deployment Descriptor: web.xml Fazer o mapeamento do FacesController Associao do controlador pode ser feita por extenso

ou por diretrio, ex. /faces/*

Configurao

Faces Servlet

javax.faces.webapp.FacesServlet

1

Faces Servlet

*.jsf


faces-config.xml

Neste arquivo so feitas todas as configuraes da aplicao

JSF, como por exemplo:

Regras de Navegao Managed Beans Validators / Converters i18n

Configurao


Introduo

Arquitetura do JSF

Configurao


Ferramentas

Referncias


Agenda


Pgina JSF

Tags: JSF HTML

Tags: JSF Core

Request

Managed

Bean

Session

Managed

Bean

Application

Managed

Bean

Expression Language: EL

Links, formulrios, imagens,

combo-box, tabelas, etc

Atravs destas tags

adicionamos validao,

converso de dados, listeners

Dados para popular as tabelas,

combo-box, textos.

Criao de pginas JSF

...


Bibliotecas de Tags Managed Beans Componentes de User-interface (UI) Navegao Validadores Conversores Eventos e Listeners Facelets Ajax

Principais Componentes JSF


Pginas JSF geralmente utilizam duas bibliotecas de Custom Tags do JSF:

JSF Html: renderizao de componentes de UI HTML JSF Core: integrao dos componentes de UI com

validadores, conversores

JSF Facelets: composio de telas JSF Composite: criao de componentes

customizados

Bibliotecas de Tags


JSP no a nica forma de construir interfaces JSF;

A integrao feita atravs de TagLibs;

As TagLibs ligam os componentes server-side aos client-side (tipicamente HTML)

Integrao JSF e JSP


Configuraes necessrias com JSP:

Integrao JSF e JSP

Configuraes necessrias com XHTML:


Core Tag Library: gerenciamento de listeners, configurao de componentes, validao, entre outros;

HTML Tag Library: Definem o renderizador do componente de UI, utilizam EL para integrao com os

Managed Beans;

Existe uma tag para cada combinao entre renderizador e componente;

Por exemplo, um UIInput pode ser renderizado em forma

de inputText ou de inputSecret;

Integrao JSF e JSP


Integrao JSF e JSP

Pgina JSF similar a um formulrio HTML. Porm:

Todas tags JSF esto contidas em uma tag (s .JSP)

Ao invs de usar um HTML, componentes devem ser includos em uma tag

Ao invs de usar as tags de input HTML, utiliza-se , e

Use, portanto:

ao invs de

ao invs de


Exemplo Tags JSF

...


Um Managed Bean um JavaBean gerenciado pelo

framework JSF, ou seja, ele instanciado, e colocado no

escopo de acordo com as configuraes encontradas no

faces-config.xml ou por annotations (v2.0).

Um ManagedBean tambm chamado de backing bean,

pois contm os dados e os mtodos que sero executados

quando algum dos componentes de UI da pgina JSF tiver

que executar uma ao.

Managed Beans


Chamamos de binding o vnculo entre um

componente de UI da pgina JSF e o seu backing

model / managed bean.

Managed Beans


Model Sistema Legado

Managed Beans


Utilizamos Taglibs e EL (Expression Language) para associar (fazer o binding) de um componente de UI com

um ManagedBean;

A String clienteBean est associada a

classe ClienteBean no faces-

config.xml (ou anotao).

Managed Beans


Declarao de um ManagedBean no faces-config.xml:

Managed Beans

clienteBean

ClienteBean

session

JSF 2:

@ManagedBean(name=clienteBean") @SessionScoped

public class ClienteBean { ... }


Pg

ina J

SF

fa

ces-c

on

fig

.xm

l

Ma

na

ged

Bean

Managed Beans em JSF 1.x


Pg

ina J

SF

Ma

nag

ed

Be

an

@ManagedBean(name="olaMundoMB")

@RequestScoped

public class OlaMundoMB {

private String email;

public void metodo() {}

public String getEmail() {

return this.email;

}

public void setEmail(String email) {

this.email = email;

}

}

fac

es-c

on

fig

.xm

l Managed Beans em JSF 2.0


Tecnicamente:

Todos os componentes de UI so subclasses da classe

abstrata UIComponent;

A classe UIComponentBase j implementa os mtodos necessrios de UIComponent podendo ser estendida

diretamente;

Componentes de User-Interface


Custom Tag renderiza um UICommand

em forma de boto

ou hyperlink


HTML Render Kit


Voc cria o componente

do zero

Indicado para construo de

componentes compostos

Utilizado para customizao

de componentes



Principais Componentes de UI

e Representa uma tela JSF e demarca a rea onde utilizamos

componentes JSF. Uma pgina pode conter apenas uma view.

O form essencial para submisso dos dados

Representa um fragmento de pgina. Utilizado com sistema de

pginas compostas para identificar os componentes includos na pgina como uma sub-view.

Utilizado para criar tabelas, seu funcionamento simples:

devemos indicar o nmero de colunas e adicionar componentes na ordem certa.

Caixa de entrada de texto.



Caixa de texto de mltiplas linhas

Normalmente usado para senhas

Para passagem de dados de aplicativo, pois no renderiza nada

visual.

O texto de ttulo de um outro componente

Texto simples

Apresentar imagens na pgina



Tag utilizada para componentes com validadores representa uma mensagem relacionada a um componente da tela.

Apresenta todas as mensagens de erro.

Representa um hyperlink HTML convencional.

Para chamar mtodos / aes em managed beans com um link HTML

Tambm chama mtodos em managed beans, mas representado por um boto HTML.



Uma lista de seleo de simples escolha.

Um combobox

Radio buttons para seleo de simples, de um elemento

Representa um checkbox que ser armazenado um boolean



public String getItemSelecionado() {

return itemSelecionado;

}

public void setItemSelecionado(String itemSelecionado) {

this.itemSelecionado = itemSelecionado;

}

public ArrayList getItemsLista() {

ArrayList r =new ArrayList();

r.add(new Estado("SP","So Paulo"));

return r;

}


Mensagens

Para gerar uma mensagem genrica que ser apresentada com a tag na sua tela, devemos usar:

FacesMessage facesMsg =

new FacesMessage(FacesMessage.SEVERITY_INFO,

"resumo", "mensagem detalhada");

FacesContext fc = FacesContext.getCurrentInstance();

fc.addMessage(null, facesMsg);


Tabela de Dados

Para trabalhar com tabelas de dados que apresentam colees de objetos utilizamos o componente :

ID

Descricao


Tabela de Dados

O cdigo do managed bean deve apenas devolver a collection para a tabela:

private List categorias;

public List getCategorias() {

categorias = CategoriaDAO().getInstance().getAll();

return categorias;

}

public void setCategorias(List cat){

this.categorias = cat;

}


Tabela de Dados

O componente permite operarmos em uma das linhas da tabela, por exemplo:

ID

Descricao

Comandos


Tabela de Dados

No managed bean executamos a ao desejada:

Esta capacidade se deve ao fato de termos colocado o comando / ao na linha da tabela em questo!

public void excluir(Categoria categoria) {

CategoriaDAO().getInstance().remove(categoria);

}


O fluxo de navegao do usurio entre telas/mtodos do managed bean configurado no faces-config.xml

Vamos imaginar o seguinte menu para nosso sistema

incluir / listar so

nomes de

navegaes

configuradas no

faces-config.xml

Navegao com JSF 1.x


Supondo que o arquivo de menu chame menu.xhtml, a seguinte configurao deve ser feita no faces-config.xml

/menu.xhtml

incluir

/incluir.xhtml

listar

/listar.xhtml

Quando a regra de

navegao for

chamada a partir

do menu.xhtml

Se a String for

incluir

Exiba como

resposta a pgina

incluir.xhtml

Navegao com JSF 1.x


A navegao como foi exibida anteriormente com a String direto dentro da tag HTML chamada de navegao

esttica

Tambm podemos utilizar a navegao dinmica, ou seja acionar a navegao atravs de um mtodo do managed

bean

Mtodos de ao em managed beans podem retonar void ou String

Navegao com JSF 1.x


Para direcionar o usurio para uma navegao em um managed bean, basta retornar como String o nome da

navegao configurada no faces-config.xml

public String salvar(){

String retorno = "listar";

try {

// instrues

}

catch(Exception e) {

retorno = "erro";

}

return retorno;

}

Navegao com JSF 1.x


Para direcionar o usurio para uma navegao, basta retornar como String o nome da pgina para a qual se deseja navegar, sem a

extenso.

Esse mecanismo de navegao denominado navegao implcita e vale tanto para navegao dinmica quanto esttica.

Para forar um redirecionamento para a pgina de destino basta acrescentar um parmetro ?faces-redirect=true

public String salvar(){

String retorno = "listar";

try {

// instrues

}

catch(Exception e) {

retorno = "erro?faces-redirect=true"; //redirecionamento

}

return retorno;

}

Navegao com JSF 2.x


Hello World JSF usando componentes bsicos

Demonstrao


Todos os componentes de UI derivados de UIInput podem ser validados;

Os dados so validados aps a converso;

Uma validao simples em componentes de entrada de dados o parmetro required="true".

Validadores


A validao pode ser feita das seguintes formas:

Delegar a validao para um mtodo de um JavaBean que estiver no escopo;

Utilizar um Standard Validator (facilmente via tags);

Criar um Validator que implemente a interface javax.faces.validator.Validator

Validadores


Uma tag de validao pode ser aninhada em campos de entrada

Para visualizar os erros de validao e/ou converso, devemos utilizar ou

possvel customizar as mensagens de erro padro criando um arquivo properties e configurando-o no faces-config.xml

Validadores


Todas as implementaes de JSF devem ter os

seguintes validadores (standard validators):

f:validateDoubleRange (DoubleRangeValidator)

f:validateLength (LengthValidator)

f:validateLongRange (LongRangeValidator)

f:validateRegex (RegularExpression)

f:validateRequired (Required)

f:validateBean (Bean Validation)

Validadores

JSF 2


A representao de dados universal da Web String:

"1/1/2007" = java.util.Date

"20.05" = double

"true" = boolean

Sem o uso de um framework devemos converter os dados manualmente usando parsers do Java SE (NumberFormat,

DateFormat...)

Converso / Formatao


A converso de dados pode ser implcita ou explcita

Para tipos primitivos e wrapper classes: implcita!!!

Para outros tipos: explcita

O JSF dispe de uma poro de conversores:

Nmeros: BigInteger, Double, Float, Long, double, int etc.

Booleanos

Datas

Moedas

Caracteres

Converso / Formatao


Trs tags foram disponibilizadas para converso e formatao de dados: : especializada em datas

: diversas formas de converter nmeros

: para associar o dado a um conversor especfico / customizado

Converso / Formatao


Os erros de converso so colocados em mensagens, importante o uso de / ;

Podemos desenvolver nosso prprio conversor criando uma classe que implementa a interface:

javax.faces.convert.Converter

Esta interface define dois mtodos: public Object getAsObject(FacesContext ctx,

UIComponent c, String s)

public String getAsString(FacesContext ctx,

UIComponent c, Object o)

Converso / Formatao


Alm dos conversores, todas as tags JSF disponibilizam o parmetro rendered;

Com EL, podemos configurar o rendered para retornar um booleano que indicar se a tag deve ou no ser renderizada:

Converso / Formatao

Status

-> Mais sobre EL apostila AW2, captulo 12


Modelo de eventos muito parecido com AWT e Swing

Os Eventos so responsveis pela propagao das aes sobre a interface com o usurio;

Ex: preenchimento de formulrio, ao via link/boto

Cada componente de UI pode disparar quantos eventos forem necessrios;

Dois tipos de eventos: Eventos de mudana de valor; Eventos de ao;

Eventos


O principal meio de comunicao entre uma pgina JSF e um managed bean so comandos vinculados a mtodos:

P

gin

a

JS

F

Man

ag

ed

Be

an

Eventos


Uma outra forma de uma UI se comunicar com managed bean atravs de eventos

Um comando dispara um mtodo no managed bean quando o usurio clica no boto ou link

Um evento acionado no managed bean quando algo acontece em um componente da tela

Um evento JSF semelhante a um evento Swing, porm o listener se encontra em um servidor

Eventos


Exemplo de evento tipo ValueChange:

public void atualizaUI(ValueChangeEvent event) {

int valor = Integer.parseInt(event.getNewValue().toString());

if (valor == 1) { //regra de negcios

} else if (valor == 2) {//regra de negcios

} else if (valor == 3) {//regra de negcios

}

}

Eventos


Exemplo de evento do tipo ActionEvent:

public void login(javax.faces.event.ActionEvent event) {

// regra de negcios

}

Eventos


Bibliotecas de Tags Managed Beans Componentes de User-interface (UI) Validadores Conversores Eventos e Listeners Facelets Ajax



Framework de templates de pginas Linguagem padro para descrever telas no JSF 2

Atua na camada view facilitando o reuso (herana) de pginas e fragmentos

v2 no requer mais configurao (faces-config.xml)

Vantagens do Facelets: Facilita o entendimento visual Componentiza mais suas pginas Facilita mudanas Padro a partir do Java EE 6 / JSF 2.0

Facelets


SOMENTE para uso de Facelets no JSF 1.x

Adicionar no WEB-INF/lib o jar jsf-facelets.jar;

Adicionar a seguinte configurao no web.xml:

Adicionar a seguinte configurao no faces-config.xml:

Configurando Facelets no JSF 1.x

com.sun.facelets.FaceletViewHandler

javax.faces.DEFAULT_SUFFIX

.xhtml


Vamos trabalhar com dois tipos diferentes de pginas:

Pgina template: no so visualizadas diretamente pelo usurio Servem apenas para serem "herdadas". Nas pginas template usamos a tag para definir reas.

Pgina client: so pginas efetivamente visualizadas

Usamos a tag para indicar o template e para preencher as rea pr-definidas no template em questo.

Usando Facelets


Devemos fazer uma referncia ao namespace das tags:

Criar template as principais tags / parmetros so: reas de contedo

substituvel

Criar tela cliente as principais tags / parmetros so: indica

que a pgina utiliza o arquivo.xhtml como template

redefine o contedo de cada rea substituvel do template.

faz a incluso de fragmentos.

Usando Facelets


Exemplo de definio de um template:

Area de menu padrao:

Area de dados padrao:

template1.xhtml

Usando Facelets


Exemplo de uso de um template:

Usando Facelets

...

PaginaComMenu.xhtml


Outro exemplo com o uso de template:

Usando Facelets

CategoriaForm.xhtml


Suporte nativo a AJAX

JSF 1.x

No existem componentes nativos com suporte a AJAX

Suporte a AJAX implementado atravs de bibliotecas de terceiros como AJAX4JSF

JSF 2.0

Adicionado suporte nativo a AJAX atravs do componente

O componente adicionado ao corpo do elemento que deve suportar requisies AJAX ao servidor


Diviso do ciclo de vida de JSF

Fonte: especificao JSR-314



Atributos do tag event: evento que ir gerar a requisio AJAX execute: lista de ids de componentes que sero processados na

poro execute do ciclo de vida do JSF. render: lista de ids de componentes que sero processados na poro

render do ciclo de vida do JSF. listener: elemento opcional que representa um mtodo a ser executado

em um ManagedBean quando a requisio AJAX processada. O mtodo deve receber um AjaxBehaviorEvent como parmetro e pode lanar AbortProcessingException.

Alm da lista de ids separados por espao, tambm aceita os seguintes valores padro

@this: valor default, que simboliza o prprio componente @form @all @none



Trecho de pgina com uso de



Managed Bean vinculado ao trecho de pgina apresentado

@ManagedBean(name="clienteMB")

@RequestScoped

public class ClienteMB {

private Cliente cliente;

private String mensagem;

//getters e setters omitidos

public void tratadorAjax(AjaxBehaviorEvent e) {

mensagem = "executando tratamento Ajax";

}

}


Introduo

Arquitetura JSF

Configurao


Ferramentas

Referncias


Agenda


Ferramentas

Gratuitos

Eclipse 6 - Helios (com JBoss Tools 3 timo suporte a Facelets) NetBeans 7

Oracle JDeveloper 11

Red Hat Developer Studio

Pagos

MyEclipse Enterprise Workbench 9.x

JetBrains IntelliJ IDEA 10.x


Introduo

Arquitetura JSF

Configurao


Ferramentas

Referncias


Agenda


Mais informaes

Sites http://docs.oracle.com/javaee/7/tutorial/jsf-intro.htm http://weblogs.java.net/blog/edburns/ http://www.jsfcentral.com/

Java Specification Requests JSF 1.0 e 1.1: http://www.jcp.org/en/jsr/detail?id=127 JSF 1.2: http://www.jcp.org/en/jsr/detail?id=252 JSF 2.0 e 2.1: http://www.jcp.org/en/jsr/detail?id=314 JSF 2.2: http://www.jcp.org/en/jsr/detail?id=344


Livros

JSF The Complete Reference Ed Burns

Core JavaServer Faces David Geary

JSF in Action Kitto Mann

Mastering JavaServer Faces Bill Dudney e outros


Introduo

Arquitetura JSF

Configurao


Ferramentas

Referncias


Agenda


Agradecemos a presena!

Introdução a JavaServer Faces 2

Documents

Transcript of Introdução a JavaServer Faces 2