Introdução a JavaServer Faces 2

(1)

Mini-curso Gratuito

(2)

Permitir que vocês tenham condições de decidir

pelo uso da tecnologia JavaServer Faces em

projetos Web com a linguagem Java

Objetivo

(3)

Introdução Arquitetura do JSF Configuração Principais componentes JSF Ferramentas Referências Perguntas e Respostas

Apresentação da Agenda

(4)

Agenda

(5)

Tecnologias de Apresentação

Conteúdo Estático HTTP HTML + Javascript + CSS + DOM Conteúdo Dinâmico CGI Servlets JSP

Classical Custom Tags Tag Files e Simple Tags Apache Struts

Web 2.0

(6)

Motivação

• MVC tornou-se um padrão de mercado (inúmeros frameworks); • As interfaces gráficas exigidas são muito complexas para

serem desenvolvidas somente com HTML exigindo muito JavaScript;

• Muitos componentes de UI sendo desenvolvidos com Custom Tags ou JavaScript sem padronização;

• Baixa produtividade no desenvolvimento de aplicações Web. • Web Apps sofisticadas - estado persistente entre requests

Por quê JSF?

(7)

O que é JavaServer Faces (JSF)?

• Paradigma de programação visual de User-interfaces baseado em componentes aplicado à Web

• É O framework Java padrão para user interfaces em Web applications

• É UM framework que permite a criação de aplicações Web com semântica de Swing implementando MVC;

• Uma especificação Java EE com múltiplas implementações (Mojarra / MyFaces)

(8)

Java EE Web Container Java EE EJB Container

Controller View Model

Servlet Java JavaBeans

Server Pages Custom Tag EJB JavaServer Faces

JSF e Java EE

Introdução

(9)

Benefícios com o uso

• “Toolability = Ferramentabilidade” (IDEs WYSIWYG); • Suporte a JSF na maioria dos IDEs;

• Portabilidade = Todo Web Container compatível com a especificação Java EE (5.0 ou superior) implementa JSF; • Aumento da produtividade de aplicações Java EE;

• Suporte à internacionalização;

Introdução

(10)

Benefícios com o uso

• Suporte a um modelo de eventos;

• Componentes de UI de terceiros compatíveis com JSF; • Mecanismo padrão de conversão e validação de dados; • Alta reusabilidade de componentes de tela e validadores;

• Flexibilidade com processo de renderização de componentes; • Fácil de aprender;

• Alta adoção no mercado.

Introdução

(11)

Implementação

Oracle

de Java EE • Servlets • JSP EJB • Custom Tags • JSF Java EE EJB Container Java EE Web Container

Glassfish - Oracle

Introdução

(12)

Implementação

Red Hat

de Java EE • Servlets • JSP EJB • Custom Tags • JSF Java EE EJB Container Java EE Web Container

WildFly – Red Hat

(13)

Agenda

(14)

• Arquitetura Client-Server baseada em HTTP;

• Dificuldade em prover o mesmo dinamismo

de uma aplicação desktop;

• Todo o processamento Java acontece no

servidor;

(15)

Listener - Validação

- Conversão de dados

- Integração com a camada Model

- Lógica de negócios, etc…

Java

Chamada a métodos GUI e Listener

são processados pela mesma máquina

(16)

Java EE Web Container

Java Servlet - Validação

- Conversão de dados

- Integração com a camada Model

- Lógica de negócios, etc…

Cliente – Browser: HTML + JavaScript

HTTP

REQUEST / RESPONSE

(17)

• Geralmente cód. 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 validação/conversão falha);

• Atualizar objetos server-side com os novos dados;

• Invocar código server-side que realize tarefas como acessar BD;

• Preparar estado que precise estar disponível em próximos requests;

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

(18)

1. Restore View

2. Apply Request Values

3. Process Validators

4. Update Model Values

5. Invoke Application

6. Render Response

• Criação da árvore de componentes de UI. • Se a página já foi visualizada na mesma session os dados são recuperados.

(19)

1. Restore View

2. Apply Request Values

3. Process Validators

4. Update Model Values

5. Invoke Application

6. Render Response

• Atualiza árvore componentes de UI com valores da request. • Dispara quaisquer

eventos gerados pela atualização

(20)

1. Restore View

2. Apply Request Values

3. Process Validators

4. Update Model Values

5. Invoke Application

6. Render Response

• Executa todas conversões de dados + validações associadas aos componentes de UI

(21)

1. Restore View

2. Apply Request Values

3. Process Validators

4. Update Model Values

5. Invoke Application

6. Render Response

• Cada componente de

UI atualiza o seu “backing model”

(22)

1. Restore View

2. Apply Request Values

3. Process Validators

4. Update Model Values

5. Invoke Application

6. Render Response

• Execução do ActionListener padrão, geralmente com execução de componentes de negócio

(23)

1. Restore View

2. Apply Request Values

3. Process Validators

4. Update Model Values

5. Invoke Application

6. Render Response

• Geração da Response

com a árvore de

componentes de UI

(24)

• Principais componentes:

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

– Managed Beans: classes Java que respondem por ações e dados de telas JSF;

– Expression Language: linguagem utilizada para declarar o vínculo entre telas JSF e managed beans;

– FacesController: Servlet provido pelo JSF que representa o núcleo administrativo do JSF;

– faces-config.xml: configurações

Arquitetura JSF

(25)

• Para criar um aplicativo Web com JSF devemos:

1) Criar a página JSF utilizando suas custom tags;

– Estrutura da tela e os componentes gráficos

2) Criar uma classe JavaBean;

– Receber os dados da tela e responder por eventos / ações

3) Configurar o FacesController no web.xml;

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

– É possível declarar com @ManagedBean no JSF 2

5) Configurar as bibliotecas (caso não haja suporte nativo Java EE);

(26)

Agenda

(27)

JARs necessários v1.x:

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

Configuração

JARs necessários v2.0:

• jsf-api.jar • jsf-impl.jar JSF 2

(28)

Deployment Descriptor: web.xml

• Fazer o mapeamento do FacesController

• Associação do controlador pode ser feita por extensão ou por diretório, ex. /faces/*

Configuração

<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>*.jsf</url-pattern>

(29)

faces-config.xml

Neste arquivo são feitas todas as configurações da aplicação JSF, como por exemplo:

• Regras de Navegação • Managed Beans

• Validators / Converters • i18n

(30)

Agenda

(31)

Página JSF Tags: JSF HTML Tags: JSF Core Request Managed Bean Session Managed Bean Application Managed Bean Expression Language: EL

Links, formulários, imagens, combo-box, tabelas, etc…

Através destas tags adicionamos validação,

conversão de dados, listeners

Dados para popular as tabelas, combo-box, textos.

(32)

• Bibliotecas de Tags

• Managed Beans

• Componentes de User-interface (UI)

• Navegação

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais Componentes JSF

(33)

• Páginas JSF geralmente utilizam duas

bibliotecas de Custom Tags do JSF:

• JSF Html: renderização de componentes de UI HTML • JSF Core: integração dos componentes de UI com

validadores, conversores

• JSF Facelets: composição de telas

• JSF Composite: criação de componentes

customizados

(34)

• JSP não é a única forma de construir interfaces JSF; • A integração é feita através de TagLibs;

• As TagLibs “ligam” os componentes server-side aos

client-side (tipicamente HTML)

(35)

• Configurações necessárias com JSP:

Integração JSF e JSP

• Configurações necessárias com XHTML:

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

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

<html xmlns=“http://www.w3.org/1999/xhtml”

xmlns:h=“http://java.sun.com/jsf/html” xmlns:f=“http://java.sun.com/jsf/core” >

(36)

• Core Tag Library: gerenciamento de listeners,

configuração de componentes, validação, entre outros; • HTML Tag Library: Definem o renderizador do

componente de UI, utilizam EL para integração com os Managed Beans;

• Existe uma tag para cada combinação entre renderizador e componente;

Por exemplo, um UIInput pode ser renderizado em forma de inputText ou de inputSecret;

(37)

Integração JSF e JSP

• Página JSF é similar a um formulário HTML. Porém: – Todas tags JSF estão contidas em uma tag <f:view> (só .JSP) – Ao invés de usar um <form> HTML, componentes devem ser

incluídos em uma tag <h:form>

– Ao invés de usar as tags de input HTML, utiliza-se <h:inputText>, <h:inputSecret> e <h:commandButton>

• Use, portanto:

– <h:form> ao invés de <form>

(38)

Exemplo Tags JSF

<%@ taglib uri=“http://java.sun.com/jsf/html” prefix=“h” %> <%@ taglib uri=“http://java.sun.com/jsf/core” prefix=“f” %> <html><head>...</head>

<h:body> <f:view> <h:form>

<h:graphicImage url="exemplo.png" /> <h:panelGrid columns="2">

<h:outputLabel for="textNome" value="Nome" /> <h:inputText id="textNome" value="..." />

<h:outputText value="Senha" /> <h:inputSecret value="" />

<h:outputText value="Observações" /> <h:inputTextarea value="" />

</h:panelGrid>

<h:commandButton value="Enviar" action="..." /> </h:form>

(39)

• Bibliotecas de Tags

• Managed Beans

• Componentes de User-interface (UI)

• Navegação

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais componentes JSF

(40)

Um Managed Bean é um JavaBean gerenciado pelo

framework JSF, ou seja, ele é instanciado, e colocado no escopo de acordo com as configurações encontradas no

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

Um ManagedBean também é chamado de backing bean, pois contém os dados e os métodos que serão executados quando algum dos componentes de UI da página JSF tiver

que executar uma ação.

Managed Beans

(41)

Chamamos de binding o vínculo entre um

componente de UI da página JSF e o seu backing model / managed bean.

(42)

Model – Sistema Legado

Managed Beans

(43)

• Utilizamos Taglibs e EL (Expression Language) para

associar (fazer o binding) de um componente de UI com um ManagedBean;

<h:outputText value="#{clienteBean.cliente.nome}"/>

A String clienteBean está associada a classe ClienteBean no

faces-config.xml (ou anotação).

(44)

Declaração de um ManagedBean no faces-config.xml:

Managed Beans

<managed-bean>

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

<managed-bean-class>ClienteBean</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

JSF 2:

@ManagedBean(name=“clienteBean")

@SessionScoped

(45)

Pá gina JS F faces -con fi g.xml Ma naged Bean

Managed Beans em JSF 1.x

(46)

Pá gina JS F Managed Bean <h:form>

<h:outputText value="e-mail">

<h:inputText value="#{olaMundoMB.email}"> <h:commandButton value="Chamar metodo no MB"

action="#{olaMundoMB.metodo}"> </h:form>

@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 -confi g. xml

Managed Beans em JSF 2.0

(47)

• Bibliotecas de Tags

• Managed Beans

• Componentes de User-interface (UI)

• Navegação

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais componentes JSF

(48)

Tecnicamente:

• Todos os componentes de UI são subclasses da classe abstrata UIComponent;

• A classe UIComponentBase já implementa os métodos necessários de UIComponent podendo ser estendida diretamente;

(49)

Custom Tag renderiza um

UICommand

em forma de

botão

ou

hyperlink

Componentes de User-Interface

(50)

Você cria o componente do “zero”

Indicado para construção de componentes compostos

Utilizado para customização

(51)

Principais Componentes de UI

• <f:view> e <h:form>

– Representa uma tela JSF e demarca a área onde utilizamos

componentes JSF. Uma página pode conter apenas uma view.

– O form é essencial para submissão dos dados

• <f:subview>

– Representa um fragmento de página. Utilizado com sistema de

páginas compostas para identificar os componentes incluídos na página como uma sub-view.

• <h:panelGrid> <h:panelGroup>

– Utilizado para criar tabelas, seu funcionamento é simples:

devemos indicar o número de colunas e adicionar componentes na ordem certa.

• <h:inputText>

(52)

Principais Componentes de UI

• <h:inputTextArea>

– Caixa de texto de múltiplas linhas

• <h:inputSecret>

– Normalmente usado para senhas

• <h:inputHidden>

– Para passagem de dados de aplicativo, pois não renderiza nada

visual.

• <h:outputLabel>

– O texto de título de um outro componente

• <h:outputText>

– Texto simples

• <h:graphicImage>

(53)

Principais Componentes de UI

• <h:message>

– Tag utilizada para componentes com validadores representa uma

mensagem relacionada a um componente da tela.

• <h:messages>

– Apresenta todas as mensagens de erro.

• <h:outputLink>

– Representa um hyperlink HTML convencional.

• <h:commandLink>

– Para chamar métodos / ações em managed beans com um link

HTML

• <h:commandButton>

(54)

Principais Componentes de UI

• <h:selectOneListbox>

– Uma lista de seleção de simples escolha.

• <h:selectOneMenu>

– Um combobox

• <h:selectOneRadio>

– Radio buttons para seleção de simples, de um elemento

• <h:selectBooleanCheckbox>

(55)

Principais Componentes de UI

<f:view> <h:form>

<h:graphicImage url="exemplo.png" /> <h:panelGrid columns="2">

<h:outputLabel for="textNome" value="Nome" />

<h:inputText id="textNome" value=“#{exemplo.nome}" /> <h:outputText value="E-mail" />

<h:inputText value=“#{exemplo.email}" /> <h:outputText value="Senha" />

<h:inputSecret value="" />

<h:outputText value="Observações" /> <h:inputTextarea value="" />

</h:panelGrid>

<h:commandButton value="Enviar" action="#{exemplo.lerDados}" /> </h:form>

(56)

Principais Componentes de UI

<h:selectOneListbox

value="#{exemplo.itemSelecionado}">

<f:selectItems value="#{exemplo.itemsLista}"

var=“estado“ itemValue="#{estado.sigla}“ itemLabel="#{estado.nome}“/>

</h:selectOneListbox>

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","São Paulo")); return r;

(57)

Mensagens

• Para gerar uma mensagem genérica que será apresentada com a tag <h:messages> na sua tela, devemos usar:

FacesMessage facesMsg =

new FacesMessage(FacesMessage.SEVERITY_INFO, "resumo", "mensagem detalhada"); FacesContext fc = FacesContext.getCurrentInstance(); fc.addMessage(null, facesMsg);

(58)

Tabela de Dados

• Para trabalhar com tabelas de dados que apresentam

coleções de objetos utilizamos o componente <h:dataTable>:

<h:dataTable value="#{categoriaMB.categorias}" var="categoria">

<h:column>

<f:facet name="header">ID</f:facet>

<h:outputText value="#{categoria.categoriaId}"/> </h:column>

<h:column>

<f:facet name="header">Descricao</f:facet>

<h:outputText value="#{categoria.descricao}"/> </h:column>

(59)

Tabela de Dados

• O código do managed bean deve apenas devolver a collection para a tabela:

private List<Categoria> categorias;

public List<Categoria> getCategorias() {

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

}

public void setCategorias(List<Categoria> cat){ this.categorias = cat;

(60)

Tabela de Dados

• O componente <h:dataTable> permite operarmos em uma das linhas da tabela, por exemplo:

<h:dataTable value="#{categoriaMB.categorias}" var="categoria">

<h:column>

<f:facet name="header">ID</f:facet>

<h:outputText value="#{categoria.categoriaId}"/> </h:column>

<h:column>

<f:facet name="header">Descricao</f:facet>

<h:outputText value="#{categoria.descricao}"/> </h:column>

<h:column>

<f:facet name="header">Comandos</f:facet> <h:commandButton value="Excluir Categoria"

value="#{categoriaMB.excluir(categoria)}"/> </h:column>

(61)

Tabela de Dados

• No managed bean executamos a ação desejada:

• Esta capacidade se deve ao fato de termos colocado o comando / ação na linha da tabela em questão!

public void excluir(Categoria categoria) {

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

(62)

• Bibliotecas de Tags

• Managed Beans

• Componentes

de User-interface (UI)

• Navegação

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais componentes JSF

(63)

• O fluxo de navegação do usuário entre telas/métodos do managed bean é configurado no faces-config.xml

• Vamos imaginar o seguinte menu para nosso sistema

<f:view> <h:form>

<h:panelGrid columns="1">

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

<h:commandButton action="incluir" value="Incluir categoria" /> </h:panelGrid>

</h:form>

<h:messages /> </f:view>

incluir / listar são nomes de navegações configuradas no

faces-config.xml

Navegação com JSF 1.x

(64)

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

<navigation-rule>

<from-view-id>/menu.xhtml</from-view-id> <navigation-case>

<from-outcome>incluir</from-outcome> <to-view-id>/incluir.xhtml</to-view-id> </navigation-case>

<navigation-case>

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

<to-view-id>/listar.xhtml</to-view-id> <redirect/> </navigation-case> </navigation-rule> Quando a regra de navegação for chamada a partir do menu.xhtml Se a String for ‘incluir’ Exiba como resposta a página incluir.xhtml

Navegação com JSF 1.x

(65)

• A navegação como foi exibida anteriormente com a String direto dentro da tag HTML é chamada de navegação

estática

• Também podemos utilizar a navegação dinâmica, ou seja acionar a navegação através de um método do managed bean

• Métodos de ação em managed beans podem retonar void ou String

(66)

• Para direcionar o usuário para uma navegação em um managed bean, basta retornar como String o nome da navegação configurada no faces-config.xml

public String salvar(){ String retorno = "listar"; try { // instruções } catch(Exception e) { retorno = "erro"; } return retorno; }

Navegação com JSF 1.x

(67)

• Para direcionar o usuário para uma navegação, basta retornar como String o nome da página para a qual se deseja navegar, sem a

extensão.

• Esse mecanismo de navegação é denominado navegação implícita e vale tanto para navegação dinâmica quanto estática.

• Para forçar um redirecionamento para a página de destino basta acrescentar um parâmetro ?faces-redirect=true

public String salvar(){ String retorno = "listar"; try {

// instruções

}

catch(Exception e) {

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

return retorno;

(68)

Hello World JSF usando componentes básicos

Demonstração

(69)

• Bibliotecas de Tags

• Managed Beans

• Componentes de User-interface (UI)

• Navegação

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais componentes JSF

(70)

• Todos os componentes de UI derivados de

UIInput

podem ser validados;

• Os dados são validados após a conversão;

• Uma validação simples em componentes de

entrada de dados é o parâmetro

required="true"

.

(71)

A validação pode ser feita das seguintes formas:

• Delegar a validação para um método 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

(72)

• Uma tag de validação pode ser aninhada em campos de entrada

• Para visualizar os erros de validação e/ou conversão, devemos utilizar <h:message> ou <h:messages>

• É possível customizar as mensagens de erro padrão criando um arquivo properties e configurando-o no faces-config.xml

<h:inputText id="textDescricao"

value="#{categoriaMB.categoria.descricao}"> <f:validateLength maximum="255" minimum="5" />

</h:inputText>

<h:message for="textDescricao"/>

(73)

Todas as implementações de JSF devem ter os

seguintes validadores (standard validators):

• f:validateDoubleRange (DoubleRangeValidator) • f:validateLength (LengthValidator) • f:validateLongRange (LongRangeValidator) • f:validateRegex (RegularExpression) • f:validateRequired (Required)

Validadores

JSF 2

(74)

• Bibliotecas de Tags

• Managed Beans

• Componentes de User-interface (UI)

• Navegação

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais componentes JSF

(75)

• A representação 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...)

(76)

• A conversão de dados pode ser implícita ou explícita • Para tipos primitivos e wrapper classes: implícita!!! • Para outros tipos: explícita

• O JSF dispõe de uma porção de conversores:

 Números: BigInteger, Double, Float, Long, double, int etc.  Booleanos

 Datas  Moedas  Caracteres

(77)

• Três tags foram disponibilizadas para conversão e formatação de dados:

<f:convertDateTime>: especializada em datas

<f:convertNumber>: diversas formas de converter números

<f:convert>: para associar o dado a um conversor específico / customizado

Conversão / Formatação

<h:outputText id="textDataCadastro"

value="#{movimentoMB.movimento.dataCadastro}"> <f:convertDateTime pattern="dd/MM/yy" />

</h:outputText>

<h:inputText id="textValor"

value="#{movimentoMB.movimento.valor}">

<f:convertNumber type="currency" currencySymbol="R$" /> </h:inputText>

(78)

• Os erros de conversão são colocados em mensagens, é importante o uso de <h:message> / <h:messages>;

• Podemos desenvolver nosso próprio conversor criando uma classe que implementa a interface:

javax.faces.convert.Converter • Esta interface define dois métodos:

public Object getAsObject(FacesContext ctx, UIComponent c, String s)

public String getAsString(FacesContext ctx, UIComponent c, Object o)

(79)

• Além dos conversores, todas as tags JSF disponibilizam o parâmetro rendered;

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

Conversão / Formatação

<h:column>

<f:facet name="header">Status</f:facet> <h:outputText value="Compensada"

rendered="#{movimento.status eq '1'}" /> <h:outputText value="Programada"

rendered="#{movimento.status eq '0'}" /> <h:outputText value="Cancelada"

rendered="#{movimento.status eq '9'}" /> </h:column>

(80)

• Bibliotecas de Tags

• Managed Beans

• Componentes de User-interface (UI)

• Navegação

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais componentes JSF

(81)

• Modelo de eventos muito parecido com AWT e Swing

• Os Eventos são responsáveis pela propagação das ações sobre a interface com o usuário;

• Ex: preenchimento de formulário, ação via link/botão • Cada componente de UI pode disparar quantos eventos

forem necessários; • Dois tipos de eventos:

• Eventos de mudança de valor; • Eventos de ação;

(82)

• O principal meio de comunicação entre uma página JSF e um managed bean são comandos vinculados a métodos:

Pági

na

JSF

Ma

na

ge

d

Bean

Eventos

(83)

• Uma outra forma de uma UI se comunicar com managed bean é através de eventos

• Um comando dispara um método no managed bean quando o usuário clica no botão ou link

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

• Um evento JSF é semelhante a um evento Swing, porém o listener se encontra em um servidor

(84)

• Exemplo de evento tipo ValueChange:

<h:selectOneRadio

valueChangeListener="#{loginMB.atualizaUI}" onchange="submit()">

<f:selectItem itemLabel="Ja tenho cadastro" itemValue="1" /> <f:selectItem itemLabel="Quero me cadastrar" itemValue="2" /> <f:selectItem itemLabel="Esqueci minha senha" itemValue="3" /> </h:selectOneRadio>

public void atualizaUI(ValueChangeEvent event) {

int valor = Integer.parseInt(event.getNewValue().toString()); if (valor == 1) { //regra de negócios

} else if (valor == 2) {//regra de negócios } else if (valor == 3) {//regra de negócios }

}

(85)

• Exemplo de evento do tipo ActionEvent:

<h:commandButton value="Login"

actionListener="#{loginMB.login}" />

public void login(javax.faces.event.ActionEvent event) { // regra de negócios

}

(86)

• Bibliotecas de Tags

• Managed Beans

• Componentes de User-interface (UI)

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais componentes JSF

(87)

• Bibliotecas de Tags

• Managed Beans

• Componentes de User-interface (UI)

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais componentes JSF

(88)

• Framework de templates de páginas

– Linguagem padrão para descrever telas no JSF 2

• Atua na camada view facilitando o reuso (herança)

de páginas e fragmentos

• v2 não requer mais configuração

(faces-config.xml)

• Vantagens do Facelets:

– Facilita o entendimento visual

– Componentiza mais suas páginas – Facilita mudanças

– Padrão a partir do Java EE 6 / JSF 2.0

Facelets

(89)

SOMENTE para uso de Facelets no JSF 1.x • Adicionar no WEB-INF/lib o jar jsf-facelets.jar;

• Adicionar a seguinte configuração no web.xml:

• Adicionar a seguinte configuração no faces-config.xml:

Configurando Facelets no

JSF 1.x

<view-handler>

com.sun.facelets.FaceletViewHandler <context-param>

<param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value>

(90)

• Vamos trabalhar com dois tipos diferentes de páginas: – Página template: não são visualizadas diretamente pelo usuário

Servem apenas para serem "herdadas". Nas páginas template usamos a tag <ui:insert> para definir áreas.

– Página client: são páginas efetivamente visualizadas

Usamos a tag <ui:composition> para indicar o template e <ui:define> para preencher as área pré-definidas no template em questão.

(91)

• Devemos fazer uma referência ao namespace das tags:

<html ..

xmlns:ui="http://java.sun.com/jsf/facelets">

• Criar template – as principais tags / parâmetros são: <ui:insert name="fragmento"> áreas de conteúdo

substituível

• Criar tela cliente – as principais tags / parâmetros são: <ui:composition template="arquivo.xhtml"> indica

que a página utiliza o arquivo.xhtml como template

<ui:define name="fragment"> redefine o conteúdo de cada área substituível do template.

<ui:include src="/menu.xhtml"> faz a inclusão de fragmentos.

(92)

• Exemplo de definição de um template:

<f:view>

<h:panelGrid columns="1" styleClass="table1"> <ui:insert name="menu">

<p>Area de menu padrao:</p> </ui:insert>

<ui:insert name="dados">

<p>Area de dados padrao:</p> </ui:insert> <h:messages /> </h:panelGrid> </f:view> template1.xhtml

Usando Facelets

(93)

• Exemplo de uso de um template:

Usando Facelets

<ui:composition template="/template1.xhtml"> <ui:define name="menu">

<f:subview id="menusSubView"> <h:form>

<h:panelGrid columns="4">

<h:commandButton action="Categorias" value… /> ... </h:panelGrid> </h:form> </f:subview> </ui:define> </ui:composition> PaginaComMenu.xhtml

(94)

• Outro exemplo com o uso de template:

Usando Facelets

<ui:composition template="/PaginaComMenu.xhtml"> <ui:define name="dados">

<f:subview id="categoriaForm"> <h:form>

<h:panelGrid columns="2">

<h:outputText for="textDescricao"

value="#{formCategoriaBundle.textoDescricao}" /> <h:inputText id="textDescricao"

value="#{categoriaMB.categoria.descricao}"/>

</h:panelGrid>

<h:commandButton value="#{formCategoriaBundle.botaoSalvar}" action="#{categoriaMB.salvarCategoria}" /> </h:form> </f:subview> </ui:define> </ui:composition> CategoriaForm.xhtml

(95)

• Bibliotecas de Tags

• Managed Beans

• Componentes de User-interface (UI)

• Validadores

• Conversores

• Eventos e Listeners

• Facelets

• Ajax

Principais componentes JSF

(96)

Suporte nativo a AJAX

• JSF 1.x

– Não existem componentes nativos com suporte a AJAX – Suporte a AJAX implementado através de bibliotecas de

terceiros como AJAX4JSF • JSF 2.0

– Adicionado suporte nativo a AJAX através do componente <f:ajax>

– O componente <f:ajax> é adicionado ao corpo do elemento que deve suportar requisições AJAX ao servidor

(97)

(98)

Suporte nativo a AJAX

• Atributos do tag <f:ajax>

– event: evento que irá gerar a requisição AJAX

– execute: lista de ids de componentes que serão processados na porção “execute” do ciclo de vida do JSF.

– render: lista de ids de componentes que serão processados na porção “render” do ciclo de vida do JSF.

– listener: elemento opcional que representa um método a ser executado em um ManagedBean quando a requisição AJAX é processada. O

método deve receber um AjaxBehaviorEvent como parâmetro e pode lançar AbortProcessingException.

– Além da lista de ids separados por espaço, também aceita os seguintes valores padrão

• @this: valor default, que simboliza o próprio componente • @form

• @all • @none

(99)

Suporte nativo a AJAX

<h:inputText value="#{clienteMB.cliente.nome}"> <f:ajax event="change" render="otTeste"

listener="#{clienteMB.tratadorAjax}" /> </h:inputText>

<h:outputText id="otTeste" value="#{clienteMB.mensagem}" />

(100)

Suporte nativo a AJAX

• Managed Bean vinculado ao trecho de página

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

(101)

Introdução Arquitetura JSF Configuração Principais componentes JSF Ferramentas Referências Perguntas e Respostas

Agenda

(102)

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

(103)

Agenda

(104)

Mais informações

• 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

(105)

Livros

JSF The Complete Reference

Ed Burns

Core JavaServer Faces

David Geary

JSF in Action

Kitto Mann

(106)

Agenda

(107)

(108)