tutorial jsf 2.0 (2012)

Java Server Faces 2.0 Breve introdução prá0ca

Helder da Rocha [email protected]

16/02/2012

Obje0vos deste tutorial •  Introdução ao JSF 2

–  O que é, quando usar, como usar, para que serve, beneGcios, perfil de usuários

•  Introdução prá0ca –  Configuração do ambiente –  Criação e execução de uma aplicação simples

•  Breve visão geral da API e arquitetura –  APIs básica, componentes padrão e tags –  Arquitetura de aplicações JSF: ciclo de vida, 0pos de requisições e respostas, fases do processamento

–  Conversores, validadores, listeners, suporte a ajax –  Bibliotecas de componentes (ex: PrimeFaces) e JSR299 (CDI)

O que é Java Server Faces •  Um framework de interface do usuário (UI) para aplicações Web em Java

•  Arquitetura baseada em árvore de componentes com estado e comportamento mapeados a tags –  Facilita a criação de GUIs em HTML e o controle de ciclos de vida, estado e eventos em objetos Java

•  Arquitetura que promove a separação de camadas com baxíssimo acoplamento –  Facilita testes, desenvolvimento, manutenção, evolução

•  Tecnologia baseada em padrões e independente de ferramentas –  Permite tanto o desenvolvimento via ferramentas integradas, mas também sem essas ferramentas

Caracterís0cas

•  Transparência no gerenciamento do estado nas requisições

•  Encapsulamento de diferenças entre browsers •  Suporte a processamento mulC-‐página de formulários •  Plataforma extensível (através de bibliotecas de componentes criadas por terceiros)

•  Suporte na0vo e extensível a validação, eventos e conversão de 0pos (String ßà Objeto)

•  Controle declara0vo e condicional de navegação

A quem se des0na a especificação? •  Autores de página

–  Programadores Web que poderão construir páginas em HTML usando tags, facelets, bibliotecas de terceiros

•  Autores de componentes –  Programadores Java que poderão construir os componentes que

serão mapeados a tags, ou que irão suportar páginas e aplicações •  Desenvolvedores de aplicação

–  Programadores Java EE que irão u0lizar o JSF como interface para serviços e aplicações

•  Fornecedores de ferramentas e implementadores JSF –  Usam a especificação para construir ferramentas e containers/

servidores que irão suportar aplicações JSF

Uso `pico: papéis de desenvolvimento

•  Autor de página –  Constrói views em XHTML, imagens, CSS, etc – Declara namespaces para bibliotecas de tags e widgets

•  Autor de componentes –  Cria conversores, managed beans, event handlers; –  Eventualmente escreve componentes novos.

•  Desenvolvedores de aplicação –  Configuram a integração de aplicações JSF com dados e serviços (EJBs, JPA, MDB, Web-‐Services)

Criação de aplicações simples

•  Obje0vos –  Configurar os ambientes de desenvolvimento e de execução

–  Familiarizar-‐se com a sintaxe e estrutura de aplicações JSF e processo de desenvolvimento

•  Aplicações de exemplo 1.  Aplicação mínima (apenas uma tela com facelets) 2.  Aplicação mínima com managed bean 3.  Aplicação simples usando bean, navegação,

componentes de formulário e resources 4.  Aplicação mínima usando CDI (JSR 299)

O que é preciso •  Versão mínima: JSF 2.0, JDK 6 ou superior •  Dependências (JARs necessários)

–  JARs do API JSF, da implementação JSF e JSTL –  O JAR da implementação de referência (Mojarra) já inclui todos os arquivos necessários; baixar em javaserverfaces.java.net

–  PrimeFaces 3.0 (www.primefaces.org -‐ opcional)

•  Ambiente de execução –  Tomcat 7 ou servidor de aplicações com suporte a Java EE 6; baixar em tomcat.apache.org

•  Ambiente de desenvolvimento –  Usaremos o mínimo: editor de texto (EditPad, TextWrangler, etc.), acesso ao prompt da linha de comando e Apache Ant; baixar o Ant em ant.apache.org.

Diagrama do ambiente de desenvolvimento

jsnasico

src

web intro.xhtml

WEB-‐INF

lib

javax.faces-‐2.x.jar

resources

build.xml

build.proper0es

myapp

IntroBean.java

css

myapp.css

Ant build script do projeto

Pasta raiz do projeto (use dentro de uma pasta de workspace) Pasta dist contendo WAR será criada durante o build

Contém estrutura do WAR (contexto Web)

Pasta classes será criada durante o build

Contém código-‐fonte Java que será compilado para WEB-‐INF/classes

Desenvolvimento com JSF

Bibliotecas de tags XHTML

Linguagem de expressões

API Java javax.faces.*

Páginas XHTML

Tags

Expressões

Managed beans Event handlers Conversores Validadores

Componentes UI

Usadas para escrever à

Usada para escrever à

Usadas em

Transferem

dados de/para

ßMapeados a à

Usada para escrever à

JSF

Estrutura, comportamento e apresentação da interface do usuário

Dados, controle de navegação e integração com serviços

faces-‐config.xml

Configuração

@An

otaçõe

s

Configuração

Página web mínima <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi0onal//EN" "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi0onal.dtd"> <html xmlns="hwp://www.w3.org/1999/xhtml" xmlns:h="hTp://java.sun.com/jsf/html"> <h:head> <0tle>Introducao a JSF</0tle> </h:head> <h:body> <h:outputText value="Esta funcionando!"/> </h:body> </html>

Facelets: tags mapeados a componentes HTML naCvos do JSF

Mapeamento XML de namespace de biblioteca de tags JSF HTML a prefixo padrão (tags com prefixo “h” fazem parte desta biblioteca)

Mapeamento XML do namespace da biblioteca padrão XHTML a tags sem prefixo (tags sem prefixo são XHTML)

Tags XHTML

basicapp.war

Arquitetura: aplicação mínima

WEB-‐INF

lib


intro.xhtml

web.xml faces-‐config.xml

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi0onal//EN" "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi0onal.dtd"> <html xmlns="hwp://www.w3.org/1999/xhtml" xmlns:h="hwp://java.sun.com/jsf/html" xmlns:f="hwp://java.sun.com/jsf/core" xmlns:ui="hwp://java.sun.com/jsf/facelets"> <h:head> <Ctle>Introducao a JSF</Ctle> </h:head> <h:body> <h:outputText value="Esta funcionando!"/> </h:body> </html> intro.xhtml

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi0onal//EN" "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi0onal.dtd"> <html xmlns="hTp://www.w3.org/1999/xhtml"> <head> <Ctle>Introducao a JSF</Ctle> </head> <body>Esta funcionando!</body> </html>

hTp://localhost:8080/basicapp/intro.faces

Facelets

HTML gerado

web.xml é opcional em aplicações simples como esta faces-‐config.xml é opcional em muitas aplicações `picas

Ant: build.xml e build.proper0es

•  Executar ant na pasta raiz do projeto •  Compilar conteúdo de src para a pasta

WEB-‐INF/classes ant ou ant compile

•  Reinciar ambiente (apagar pastas classes e dist) e recompilar ant clean compile

•  Construir WAR e gravar em dist/basicapp.war ant war

<project name="JSF Basico" default="compile"> <property file="build.properCes" /> <property name="web.dir" value="web" /> <property name="webinf.dir" value="${web.dir}/WEB-‐INF" /> <property name="classes.dir" value="${webinf.dir}/classes" /> <property name="src.dir" value="src" /> <property name="lib.dir" value="${webinf.dir}/lib" /> <property name="dist.dir" value="dist" />

<property name="war.file" value="${dist.dir}/${app.name}.war" />

<target name="init"> <mkdir dir="${classes.dir}" /> <mkdir dir="${dist.dir}" />

</target>

<target name="clean"> <delete dir="${classes.dir}" /> <delete dir="${dist.dir}" />

</target> <target name="compile" depends="init"> <javac destdir="${classes.dir} srcdir="${src.dir}"> <classpath> <fileset dir="${lib.dir}" includes="**/*.jar" /> </classpath> </javac> </target> <target name="war" depends="compile"> <jar des~ile="${war.file}"> <fileset dir="${web.dir}" /> </jar> </target> </project>

app.name=basicapp

build.properCes

build.xml

Opcional: web.xml •  Um web.xml com a configuração default já é fornecido no JAR da

implementação de referência (Mojarra 2.x) •  Não é preciso criar um a menos que se deseje configurar o ambiente

(adicionando listeners e outros recursos) •  Se criado, web.xml deve ter a configuração mínima abaixo

<?xml version='1.0' encoding='UTF-‐8'?> <web-‐app version="2.5" xmlns="hwp://java.sun.com/xml/ns/javaee" xmlns:xsi="hwp://www.w3.org/2001/XMLSchema-‐instance" xsi:schemaLoca0on="hwp://java.sun.com/xml/ns/javaee hwp://java.sun.com/xml/ns/javaee/web-‐app_2_5.xsd"> <servlet> <servlet-‐name>Faces Servlet</servlet-‐name> <servlet-‐class>javax.faces.webapp.FacesServlet</servlet-‐class> </servlet> <servlet-‐mapping> <servlet-‐name>Faces Servlet</servlet-‐name> <url-‐pawern>*.faces</url-‐pawern> </servlet-‐mapping> </web-‐app>

2.5 ou superior!

Deve ser colocado na raiz da pasta WEB-‐INF/

Opcional faces-‐config.xml •  O faces-‐config.xml é usado para configurar mapeamentos de componentes,

navegação, conversores, validadores, beans e outros recursos do JSF –  Tudo isto pode ser feito via comportamento default e anotações –  Às vezes é mais prá0co, legível e eficiente fazer via XML (quando se usa

ferramentas gráficas que geram XML, por exemplo) –  A configuração faces-‐config.xml tem precedência e sobrepõe a configuração via

anotações •  Se usado, deve ter a seguinte configuração mínima

<?xml version="1.0"?> <faces-‐config xmlns="hwp://java.sun.com/xml/ns/javaee" xmlns:xsi="hwp://www.w3.org/2001/XMLSchema-‐instance" xsi:schemaLoca0on="hwp://java.sun.com/xml/ns/javaee hwp://java.sun.com/xml/ns/javaee/web-‐facesconfig_2_0.xsd" version="2.0"> </faces-‐config>

Deve ser colocado na raiz da pasta WEB-‐INF/

2.0 ou superior!

Implantação (deploy) e execução •  Inicie o Tomcat

–  $TOMCAT_HOME/bin/startup.sh •  Implantação (via hot-‐deployment – pode também ser via Manager)

–  Com o Tomcat executando, copie dist/basicapp.war para pasta $TOMCAT_HOME/webapps/ do Tomcat

–  Espere Tomcat criar automa0camente uma pasta basicapp/ dentro de sua pasta webapps/

•  Execução –  Acesse hTp://localhost:8080/basicapp/intro.faces

•  Se houver erros, corrija-‐os e faça redeploy (remova WAR e diretório gerado em webapps/ e copie o novo WAR para webapps/)

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi0onal//EN" "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi0onal.dtd"> <html xmlns="hwp://www.w3.org/1999/xhtml"><head> <0tle>Introducao a JSF</0tle></head><body> <p>Hello!</p> </body> </html>

Arquitetura: aplicação mínima com managed bean

basicapp.war

WEB-‐INF

lib


intro.xhtml

classes

myapp

IntroBean.class


<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi0onal//EN" "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi0onal.dtd"> <html xmlns="hwp://www.w3.org/1999/xhtml" xmlns:h="hwp://java.sun.com/jsf/html" xmlns:f="hwp://java.sun.com/jsf/core" xmlns:ui="hwp://java.sun.com/jsf/facelets"> <h:head> <Ctle>Introducao a JSF</Ctle> </h:head> <h:body> <p>#{introBean.mensagem}</p> </h:body> </html>

package myapp; import javax.faces.bean.*; @ManagedBean public class IntroBean { public String getMensagem() { return "Hello!”; } }

intro.xhtml


IntroBean.java

Facelets

HTML gerado

Java

Com managed bean

•  Propriedades de leitura são derivadas de métodos geTer iniciados em get ou is

•  Propriedades de gravação são derivadas de métodos seTer iniciados em set

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi0onal//EN" "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi0onal.dtd"> <html xmlns="hwp://www.w3.org/1999/xhtml" xmlns:h="hTp://java.sun.com/jsf/html"> <h:head> <0tle>Introducao a JSF</0tle> </h:head> <h:body> <p>#{introBean.mensagem}</p> </h:body> </html>

package myapp; import javax.faces.bean.ManagedBean; @ManagedBean public class IntroBean { public String getMensagem() { return "Hello!”; } } @ManagedBean (name="introBean")

public class NomeDoBean { … } Expressão EL

IdenCficador (nome) do bean é derivado do nome da classe se não for declarado atributo name em

@ManagedBean ou em faces-‐config.xml

Derivação de nomes de beans e propriedades usados em EL segue regras de JavaBeans

Expression language •  Usada para comunicação entre componente e página

–  Ler ou gravar propriedades do bean –  Transformar dados, executar expressões, usar resultados –  Executar métodos no bean ou componente

•  Geralmente usada em atributos –  Atributos definem como resultados da expressão serão usados (leitura, leitura-‐gravação, métodos)

–  Expressões de leitura podem ser usadas diretamente na página •  Exemplos

#{iden0ficadorDoBean.propriedade} #{iden0ficadorDoBean.metodo} #{iden0ficadorDoBean.prop1.prop2.prop3} #{iden0ficadorDoBean.colecao[5].value + 20}

Navegação •  Alguns tags recebem métodos que retornam

idenCficadores de navegação –  Ex: tags de submissão de formulários e links que causam eventos de ação (ac0on events)

•  Métodos de ação devolvem iden0ficadores de navegação na forma de strings –  Iden0ficadores retornados podem ser mapeados a nomes de páginas no faces-‐config.xml

–  Na ausência de mapeamentos explícitos, o string retornado é interpretado como nome de uma página *.xhtml

… public String processarResposta() {

// processar resposta if (erro) { return "erro"; } return "sucesso"; }

<h:form> <h:commandBuwon ac0on="#{bean.processarResposta}" /> </h:form>

erro.xhtml

sucesso.xhtml

Exemplo com mapeamento implícito •  Jogo de cara e coroa •  Três páginas: play.xhtml, heads.xhtml, tails.xhtml •  Managed bean: coinBean (coinsgame.CoinBean) •  Método de ação (coinFlip) gera número aleatório e retorna String com nome da página a exibir

package coinsgame; import javax.faces.bean.*; @ManagedBean public class CoinBean {

public String coinFlip() { int side = (int)(Math.random() * 2); if (side == 0) return "heads"; return "tails"; }

}

<!DOCTYPE …> <html xmlns="hwp://www.w3.org/1999/xhtml" xmlns:h="hwp://java.sun.com/jsf/html"> <h:head><0tle>Coin Game</0tle></h:head> <h:body> <h:form> <h:commandBuwon value="Flip a coin!" ac0on="#{coinBean.coinFlip}"/> </h:form> </h:body> </html>

Crie páginas heads.xhtml e tails.xhtml

Aplicação mínima com resources basicapp.war

WEB-‐INF

lib


intro.xhtml

classes

myapp

IntroBean.class

web.xml

faces-‐config.xml

META-‐INF

resources

i18n.proper0es

resources

css

myapp.css

Resources no classpath carregados pelo ClassLoader (em classes Java)

Resources da aplicação Web carregados através de Faces Requests * <h:outputStylesheet library="css" name=”myapp.css"/>

Arquivo carregado através de Non-‐Faces Requests <link rel="stylesheet" type="text/css" href="other.css” />

other.css

* Esta é a forma recomendada de carregar CSS

Resources •  Arquivos que não são processados durante a requisição

–  Imagens, scripts JavaScript, CSS, etc. •  Se referenciados em tags XHTML, devem ser colocados em

local relaCvo ao contexto Web –  Arquivo CSS: <link rel="stylesheet" name=”resources/css/default.css"/>

–  Imagem JPG <img src =resources/images/badfish.jpg"/>

•  Se referenciados em tags JSF, devem ser colocados em pasta resources dentro do contexto Web –  Arquivo CSS: <h:outputStylesheet library="css" name="default.css"/>

–  Imagem JPG <h:graphicImage library="images" name="badfish.jpg"/>

Principais APIs do JSF •  javax.faces •  javax.faces.applica0on •  javax.faces.bean •  javax.faces.component •  javax.faces.context •  javax.faces.convert •  javax.faces.lifecycle •  javax.faces.event •  javax.faces.render •  javax.faces.validator •  javax.faces.webapp

Anotações para managed beans (@ManagedBean, @SessionScoped, etc.)

Componentes gráficos (hierarquia de UIComponent) e componentes renderizáveis (subpacote html.*)

API para conversores de dados (interface Converter)

API para eventos (FacesEvent, FacesListener)

API para validação

API para acesso ao estado da requisição (via FacesContext)

API para renderização gráfica (RenderKit)

javax.faces.component e javax.faces.component.html

•  Pacote component contém hierarquia fundamental de componentes UI

•  Pacote component.html contém componentes associados a renderer HTML que são mapeados aos tags da biblioteca padrão HTML

javax.faces.component.UIForm

javax.faces.component.html.HtmlForm

javax.faces.Form

<h:form>

Componente UI Tipo

Tag

Componente HTML

Árvore de componentes padrão do

JSF

4-2 JavaServer Faces Specification • June 2009

FIGURE 4-1 The javax.faces.component package

Fonte: especificação JSF 2, capítulo 4

Arquitetura JSF: requisições •  Uma aplicação pode ter

combinações de –  Requisições e respostas JSF

(Faces Requests e Responses) –  Requisições e respostas não-‐JSF

•  Faces Requests e Faces Responses são interceptadas pelo Faces run0me e tratadas de forma diferenciada

•  Faces RunCme processa dois 0pos de Faces requests: –  Faces Resource Request (para

transferir imagens, CSS, etc.) –  Faces Request (para processar

uma página JSF)

Cliente Faces RunCme

Outro Endpoint

Faces Request

Faces Response

Faces Resource Request

Faces Resource Response

Non-‐Faces Request

Non-‐Faces Response

Fonte: especificação JSF 2

Ciclo de vida Execute & Render GET index.faces

Processar req e devolver bytes GET img.jpg

GET img.jpg

Tipos de requisições e respostas •  Faces Response (FRs)

–  Resposta criada pela execução da fase Render Response •  Faces Request (FRq)

–  Requsição iniciada a par0r de uma FRs prévia –  Faces Resource Request (FRRq): um FRq para um resource (imagem,

CSS, etc.) •  Non-‐Faces Request (NFRq)

–  Requisição não iniciada a par0r de FRs prévia •  Non-‐Faces Response (NFRs)

–  Resposta que não passou pelo Faces Run0me, ou –  Faces Resource Response (FRRs): um NFRs para um resource iniciado

por um FRRq •  Cenários relevantes para JSF

1.  NFRq gerando FRs (requisição inicial) 2.  FRq gerando FRs (requisição que causa ciclo execute & render) 3.  FRq (FRRq) gerando NFRs (FRRs)

Dois 0pos de Faces requests

Processar Faces Resource Request

Enviar bytes Processar Faces Request: Ciclo “execute and render”

É Faces Resource Request?

Localizar resource

Não

Sim

Ciclo de vida: execute & render

Restaurar view

Aplicar valores da requisição

Processar validações

Atualizar valores do modelo

Executar aplicação

Renderizar resposta

Faces request Faces response

Execute

Render

Processar eventos

Processar eventos

Processar eventos

Processar eventos

Erros de conversão ou resposta

Erros de validação ou resposta

Precisa validar

Precisa converter

Precisa executar aplicação

Leia descrição detalhada de cada fase na especificação JSF 2, capítulo 2

Conversores •  São objetos que realizam a conversão entre dados em uma view

(formato String) para um 0po de dados usado em propriedade do managed bean (int, Date, objetos, etc.) –  Conversores encapsulam a lógica necessária para converter um dado, e

podem ser usados, reusados e configurados via facelets (tags e atributos) •  Há vários conversores prontos. Exemplo:

<h:inputText converter="javax.faces.convert.IntegerConverter" />, ou <h:inputText ... /> ! <f:converter converterId="Integer" /> !</h:inputText> !

•  Pode-‐se escrever novos conversores (objeto anotado com @FacesConverter que implementa javax.faces.convert.Converter) e usar os mesmos atributos ou tags para configurá-‐los

•  Muitas vezes não é necessário configurar um conversor (se a conversão default resolver). Ex: idade é int no managed bean <h:inputText value=”#{bean.idade}" /> !

Listeners •  Listeners são objetos usados para tratar eventos

–  São chamados através de noCficações –  Podem ser uma classe específica que implementa uma interface ou

método implementado no managed bean •  Há duas interfaces

–  AcConListener para eventos de ação, registrados por <f:acConListener…>

–  ValueChangeListener para eventos de mudança de valor (que não causam a submissão do formulário), registrados por <f:valueChangeListener…>

•  Pode-‐se escrever o handler no próprio bean –  Componentes de ação podem associar um método ao atributo acCon,

que é implementado no próprio bean •  PhaseListeners podem ser criados para interceptar eventos nas

diferentes fases de uma requisição/resposta JSF

Validadores •  JSF oferece várias alterna0vas para validação, que são realizadas em

uma ordem pré-‐determinada –  Checagem de campos vazios em componentes (falha, se for campo

required e vazio) –  Conversão de 0pos (falha se conversão não puder ser realizada) –  Validação explícita, se houver

•  Erros de validação geram mensagens que podem ser apresentadas via facelets (<h:message> e <h:messages>) e/ou atributos (requiredMessage)

•  Validação explícita pode –  Via facelets existentes: <f:validateLength>, <f:validateRegEx>, etc. –  Ou usando <f:validator> para registrar validadores customizados

(anotados com @FacesValidator, implementando javax.faces.validator.Validator)

–  Também pode-‐se usar a API Bean ValidaCon.

Ajax •  JSF 2.0 inclui bibliotecas JavaScript que possibilitam o uso

transparente de Ajax •  Qualquer componente pode receber a tag <f:ajax /> e sua ação

default ganha comportamento assíncrono: –  <h:inputText value="#{bean.message}"> !

<f:ajax render=“tabela1”/> !</h:inputText> !

–  O atributo render informa qual componente vai processar e exibir a resposta

•  Há vários outros atributos que permitem determinar qual evento dispara a ação, uma lista de componentes a serem noCficados, listeners, funções JavaScript e outros mecanismos para controle da requisição e resposta

Templa0ng •  TemplaCng permite que

segmentar uma view e processá-‐la em separado –  Uma view que age como

template define uma estrutura de página e carrega views auxiliares para compor a página

–  Cabeçalhos, rodapés, etc. podem ser repe0dos em várias páginas e seu processamento pode ser o0mizado (cache)

–  Promove o reuso!

<h:body>Conteúdo compar0lhado <h2><ui:insert name=”Ctulo">Título default</ui:insert></h2> Conteúdo compar0lhado <ui:insert name=”conteudo">Conteúdo default</ui:insert> </h:body> ...

Template: /templates/basico.xhtml

<ui:composi0on xmlns=“..” template="/templates/basico.xhtml"> <ui:define name=”Ctulo">Texto de arquivo1</ui:define> <ui:define name=”conteudo”>Conteúdo de arquivo1</ui:define> </ui:composi0on>

Página que usa o template: arquivo1.xhtml

<body>Conteúdo compar0lhado <h2>Texto de arquivo1</h2> Conteúdo compar0lhado Conteúdo de arquivo1 </body> ...

Resultado ao chamar /arquivo1.faces

Bibliotecas de componentes

•  Os componentes do JSF focam em funcionalidade –  Implementações (Mojarra, Apache, etc.) fornecem apenas componentes padrão

–  Skins, componentes extensíveis, pré-‐configurados, compostos, etc. devem ser fornecidos por uma biblioteca de componentes

•  As mais populares bibliotecas de componentes que suportam o JSF 2.0 são: –  RichFaces –  ICEFaces –  PrimeFaces

PrimeFaces 3.0

•  Uma das mais populares bibliotecas de componentes para o JSF –  Subs0tui componentes JSF 2.0 (também podem ser usados juntos)

–  Conecta widgets de várias bibliotecas populares (YUI, JQuery, Google, etc.)

–  Suporte integrado a Ajax e WebSockets

Como usar •  Baixe e inclua no projeto (WEB-‐INF/lib) e depois declare em cada

view que usar os componentes, o namespace: –  xmlns:p="hwp://primefaces.org/ui

•  Alguns exemplos –  <p:ajax> (sempre use este em vez de f:ajax quando usar componentes

PrimeFaces) –  <p:commandBuwon> e <p:commandLink> –  <p:dataTable> e <p:column> –  <p:message> e <p:messages> –  <p:outputLabel> –  <p:panelGrid> –  <p:fieldset> –  <p:inputText>, <p:inputTextArea>, <p:password> –  <p:selectOneMenu>, etc.

Também permite configuração de look & feel através de temas e CSS

Mais em www.primefaces.org

CDI (JSR 299) •  Se o seu ambiente 0ver suporte a CDI (Contexts and Dependendy

Injec0on), você deve usá-‐lo para registrar os beans –  CDI é um mecanismo universal que será usado para registrar

componentes gerenciados em qualquer 0po de aplicação Java EE –  Inclua um arquivo beans.xml padrão (use o IDE) no WEB-‐INF –  Registre os beans usando @Named (no lugar de @ManagedBean) e

use escopos de javax.enterprise.context (em vez de escopos JSF)

•  CDI será parte integrante do Java EE 7, portanto @ManagedBean no futuro será deprecated.

•  Se seu ambiente não 0ver suporte a CDI (ex: Tomcat 7) você pode –  Usar @ManagedBean normalmente como foi mostrado neste tutorial –  Acrescentar uma implementação de CDI e registrá-‐la no web.xml

<beans xmlns="hwp://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="hwp://www.w3.org/2001/XMLSchema-‐instance" xsi:schemaLoca0on="hwp://xmlns.jcp.org/xml/ns/javaee hwp://xmlns.jcp.org/xml/ns/javaee/beans_1_1.xsd" bean-‐discovery-‐mode="annotated"> </beans>

Managed bean com CDI

•  Inclua o JAR do Weld: a implementação de referência do CDI e registre o listener

•  (isto pode não ser necessário se você es0ver usando um ambiente que tenha suporte na0vo a CDI)

<?xml version='1.0' encoding='UTF-‐8'?> <web-‐app version="2.5" … > <servlet>…</servlet> <servlet-‐mapping> … </servlet-‐mapping> <listener> <listener-‐class> org.jboss.weld.environment.servlet.Listener </listener-‐class> </listener> </web-‐app>

package myapp; import javax.inject.Named; import javax.enterprise.context.RequestScoped; @Named @RequestScoped public class IntroBean { public String getMensagem() { return "Hello!”; } }

beans.xml web.xml

Use @Named ou @Named(“introBean”) para registrar o bean com o id “introBean”

Verifique se está importando os pacotes corretos

Inclua beans.xml no WEB-‐INF

intro.xhtml

No Tomcat 7

<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi0onal//EN" "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi0onal.dtd"> <html xmlns="hwp://www.w3.org/1999/xhtml"><head> <0tle>Introducao a JSF</0tle></head><body> <p>Hello!</p> </body> </html>

Aplicação com managed bean e CDI basicapp.war

WEB-‐INF

lib


intro.xhtml

classes

myapp

IntroBean.class


<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transi0onal//EN" "hwp://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transi0onal.dtd"> <html xmlns="hwp://www.w3.org/1999/xhtml" xmlns:h="hwp://java.sun.com/jsf/html" xmlns:f="hwp://java.sun.com/jsf/core" xmlns:ui="hwp://java.sun.com/jsf/facelets"> <h:head> <Ctle>Introducao a JSF</Ctle> </h:head> <h:body> <p>#{introBean.mensagem}</p> </h:body> </html>

package myapp; import javax.inject.Named; @Named public class IntroBean { public String getMensagem() { return "Hello!”; } }

intro.xhtml


IntroBean.java

Facelets

HTML gerado

Java

weld-‐servlet.jar

beans.xml

Tomcat 7

Resumo

•  Este tutorial apresentou uma breve introdução ao JSF e os principais componentes da sua arquitetura –  Demonstração: configuração do ambiente, criação de views e beans, deployment, execução

–  Facelets, managed beans, expression language –  Arquitetura de componentes –  Navegação –  Ciclo de vida –  Conversores, listeners, validadores –  Uso de bibliotecas de componentes (PrimeFaces) –  Integração com CDI (JSR 299)

Referências 1.  Ed Burns, Roger Kitain. JavaServer Faces SpecificaCon. Version 2.0. Sun

Microsystems. 2009. 2.  Emmanuel Bernard. JSR 303: Bean ValidaCon. Version 1.0. Red Hat, 2009. 3.  Gavin King. JSR-‐299: Contexts and Dependency InjecCon for the Java EE

Plaxorm. Red Hat. 2009. 4.  Eric Jendrock et al. The Java EE 6 Tutorial. 2010.

hwp://docs.oracle.com/javaee/6/tutorial/doc/ 5.  Mojarra. Mojarra DocumentaCon hwps://javaserverfaces.java.net/docs/2.1/ 6.  JBoss. Weld – JBoss.org documentaCon. hwp://docs.jboss.org/weld 7.  PrimeFaces. Manual do PrimeFaces. hwp://primefaces.org/documenta0on.html 8.  David Geary & Cay Horstmann. Core JavaServer Faces 2.0. Pren0ce-‐Hall, 2010. 9.  Marty Hall. JSF 2.0 Tutorial Series.

hwp://www.coreservlets.com/JSF-‐Tutorial/jsf2/ 10.  Marty Hall. PrimeFaces Tutorial Series.

hwp://www.coreservlets.com/JSF-‐Tutorial/primefaces/ 11.  M. Kyong. JSF 2.0 Tutorials. hwp://www.mkyong.com/tutorials/jsf-‐2-‐0-‐tutorials/

Atualizado em Janeiro/2013

tutorial jsf 2.0 (2012)

Documents