jsf com primefaces

58

Upload: fabio-noth

Post on 18-Dec-2014

15.299 views

Category:

Technology


11 download

DESCRIPTION

Curso de Jsf 2 com Primefaces, curso oferecido na semana acadêmica SEICOM 2011 em Foz do Iguaçu - PR

TRANSCRIPT

Page 1: JSF com Primefaces
Page 2: JSF com Primefaces

JavaServer Faces e

Primefaces

Palestrante:

Jean Paulo da Silva

Page 3: JSF com Primefaces

JavaServer Faces e PrimefacesINTRODUÇÃO

• Complexidade das aplicações web

• Enorme quantidade de recursos pra se gerenciar

• Aplicações corporativas

• Complexidade e desordem nos códigos, dificultando a

manutenção

• Pouca ou nenhuma dinamicidade e reusabilidade, diminuindo

a produtividade

• Problemas na utilização de lógicas de negócio mais

complexas

• Desempenho

• Segurança

Page 4: JSF com Primefaces

JavaServer FacesINTRODUÇÃO

• Framework para construção de interfaces web em Java

• Implementação de referência da especificação JSR-314

• Possui um conjunto de componentes pré-fabricados

• Programação orientada a eventos

• Permite a união entre apresentação visual, lógica da

aplicação e lógicas de negócio

Page 5: JSF com Primefaces

JavaServer FacesARQUITETURA

Page 6: JSF com Primefaces

JavaServer FacesCONFIGURAÇÃO

• Configuração do servidor (Tomcat)

• Criação do projeto: New/Dynamic Web Project

Page 7: JSF com Primefaces

JavaServer FacesCONFIGURAÇÃO

• Configuração do arquivo web.xml

• Inclusão das bibliotecas (WebContent)

Classes

Páginas/CSS/JavaScript/Imagens

Bibliotecas

Configurações

Page 8: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• Componentes UI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 9: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• Componentes UI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 10: JSF com Primefaces

Arquitetura MVCModel View Controller

Page 11: JSF com Primefaces

Arquitetura MVCModel View Controller

Page 12: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• Os componentes UI se mantém sincronizados com

objetos java do lado servidor

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 13: JSF com Primefaces

RADRapid Application Development

Características:

• Arquitetura fundamental de componentes

• Arquitetura extensível para geração de componentes de

terceiros

• Um conjunto de componentes padrão

• Infra-estrutura de aplicação

• É uma ferramenta

Page 14: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• Componentes UI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 15: JSF com Primefaces

ManagedBeans

• Coleta inputs dos usuários nos componentes de

formulários

• Manipulação dos componentes de forma dinâmica

• Intermediar a comumicação entre as páginas

(componentes JSF) e o modelo

• Trabalham com objetos do modelo para executar lógica

de negócio

• Manipulação de eventos de interface

• JSF 2.0 - @ManagedBean

• JSF 1.x – faces-config.xml

Page 16: JSF com Primefaces

ManagedBeansESCOPOS

• @RequestScoped – Escopo de requisição

– O managed bean é instanciado e permanece disponível durante

o tempo da requisição HTTP

– Recomendado quando o interesse é a economia de recursos do

servidor

– Quando os dados não precisam ser mantidos de uma requisição

pra outra

• @SessionScoped – Escopo de sessão

– O managed bean é instanciado no momento de uma requisição

e só finaliza quando a sessão é finalizada

– Recomendado quando o interesse é guardar os estados dos

objetos a medida em que se vai realizando a navegação, pois os

mesmos são mantidos mesmo em caso de uma nova requisição

– Exemplo: Carrinho de compras

Page 17: JSF com Primefaces

ManagedBeansESCOPOS

• @ApplicationScoped – Escopo de aplicação

– O managed bean é instanciado no momento em que a aplicação

é iniciada no servidor com o atributo eager setado em true, caso

contrário, é instanciado na primeira requisição feita ao bean

– Recomendado em caso de disponibilização de serviços que

precisam estar sempre disponíveis

• @ViewScoped – Escopo de visualização

– O managed bean é instanciado no momento em que é feita uma

requisição para uma página que use seus objetos e é destruído

quando os seus objetos não são mais utilizados pela página

– Meio termo entre @RequestScoped e @SessionScoped

– Recomendado em caso de utilização de aplicações que utilizem

AJAX, ou seja, que atualizam parte da página ou toda ela

Page 18: JSF com Primefaces

ManagedBeansESCOPOS

• @NoneScoped – Nenhum escopo

– Os objetos do managed bean não são instanciados pela

camada de visão, mas podem ser utilizados por outros managed

beans conforme a necessidade

– Recomendado quando os objetos ou métodos não tem ligação

direta com alguma página

• @CustomScoped – Escopo personalizado

– Escopo definido conforme a necessidade do desenvolvedor,

implementado em uma classe auxiliar que define as

características do escopo como ciclo de vida, acessibilidade,

estrutura de dados e outros

Page 19: JSF com Primefaces

ManagedBeansEXEMPLO

Page 20: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• ComponentesUI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 21: JSF com Primefaces

Componentes UI

• Componentes que gerenciam a interação com o usuário

• São armazenados numa árvore no servidor (view)

• Tags interpretadas para apresentação (html)

• Tag Libraries h e f

• h: tags de componentes que combinam tags HTML

com objetos UIComponent definidos na

especificação JSF

• f : tags com ações independentes do HTML

Page 22: JSF com Primefaces

Componentes UI

• Sujeito a estilização (css)

• Interação com funções JavaScript e com objetos e

métodos do lado servidor (ManagedBean)

Page 23: JSF com Primefaces

Componentes UIEXEMPLOS

• Componentes:

• <h:body/> <h:head/> <h:form/>

• <h:ouptutText value="Texto estático" />

• <h:ouptutText

value="#{contatoBean.txtDinamico}"/>

• <h:ouptutLabel /> //atributo for

• <h:graphicImage value="/images/img1.jpg"

width="400" height="150"/>

• <h:panelGrid columns="3"

Page 24: JSF com Primefaces

Componentes UIEXEMPLOS

• Entrada de dados:

• <h:inputText id="itNome"

value="#{contatoBean.nome}"

size="40" maxlength="40"

style="font-size: 15px;"/>

• <h:inputHidden/>

• <h:inputTextArea cols="150"

rows="4" />

• <h:inputSecret />

Page 25: JSF com Primefaces

Componentes UIEXEMPLOS

• Selects:• <h:selectBooleanCheckbox value="true" />

• <h:selectOneRadio value="#{contatoBean.tipo}">

<f:selectItem id="item1" itemLabel="Amigo"

itemValue="Amigo" />

<f:selectItem id="item2" itemLabel="Conhecido"

itemValue="Conhecido" />

<f:selectItem id="item3" itemLabel="Trabalho"

itemValue="Trabalho" />

<f:selectItem id="item4" itemLabel="Família"

itemValue="Família" />

</h:selectOneRadio>

Page 26: JSF com Primefaces

Componentes UIEXEMPLOS

• Selects:• <h:selectOneListBox value="#{contatoBean.tipo}">

<f:selectItem id="item1" itemLabel="Amigo"

itemValue="Amigo" />

<f:selectItem id="item2" itemLabel="Conhecido"

itemValue="Conhecido" />

<f:selectItem id="item3" itemLabel="Trabalho"

itemValue="Trabalho" />

<f:selectItem id="item4" itemLabel="Família"

itemValue="Família" />

</h:selectOneListBox>

Page 27: JSF com Primefaces

Componentes UIEXEMPLOS

• Selects:• <h:selectOneMenu value="#{contatoBean.tipo}">

<f:selectItem id="item1" itemLabel="Amigo"

itemValue="Amigo" />

<f:selectItem id="item2" itemLabel="Conhecido"

itemValue="Conhecido" />

<f:selectItem id="item3" itemLabel="Trabalho"

itemValue="Trabalho" />

<f:selectItem id="item4" itemLabel="Família"

itemValue="Família" />

</h:selectOneMenu>

Page 28: JSF com Primefaces

Componentes UIEXEMPLOS

• Tabela:• <h:dataTable value="#{contatoBean.contatos}"

var="con" border="1">

<h:column>

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

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

</h:column>

<h:column>

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

<h:outputText value="#{con.telefone}"/>

</h:column>

</h:dataTable>

Page 29: JSF com Primefaces

Componentes UIEXEMPLOS

• Actions e Listeners:

• <h:commandButton value="Executar“

action="#{contatoBean.executar}"

alt="Executa uma ação"

image="../images/executar.png"/>

• <h:commandLink value="Executar“

action="#{contatoBean.executar}"/>

• <h:outputLink value="www.b3informatica.com">

B3 Informática

</h:outputLink>

• <h:button outcome="page.xhtml" value="Contato"/>

• <h:link outcome="page.xhtml" value="Contato"/>

Page 30: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• ComponentesUI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 31: JSF com Primefaces

Validators

• Validadores padrão e validadores customizados

• Impedem as ações e exibem mensagens

• Atributo “required”

• Ex.: <h:inputText id="itNome"

value="#{contatoBean.nome}"

required="true"

requiredMessage="Deu erro!"/>

Page 32: JSF com Primefaces

Validators

• Validadores implícitos (padrão)

• Ex.:

• <f:validateLength maximum="10" />

• <f:validateDoubleRange

minimum="10" maximum="100" />

• <f:validateLongRange

minimum="10" maximum="100" />

• <f:validateRegex pattern=" ^[0-9]" />

Page 33: JSF com Primefaces

Validators

• Validadores customizados:

• implements javax.faces.validator.Validator

• public void validate(FacesContext context,

UIComponent component,

Object value)

Page 34: JSF com Primefaces

Validators

Page 35: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• ComponentesUI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 36: JSF com Primefaces

Converters

• Conversão de valores de entrada e de saída

• Conversores implícitos para tipos primitivos

• Disparam mensagens que podem ser configuradas

(converterMessage)

• Impedem as ações

• Conversores padrão e customizados

Page 37: JSF com Primefaces

Converters

• Conversores padrão:

Page 38: JSF com Primefaces

Converters

• Conversores padrão:

Page 39: JSF com Primefaces

Converters

• Conversores customizados:

• implements Converter

• @FacesConverter

• Métodos:

• public Object getAsObject(FacesContext context,

UIComponent component, String valor);

• public String getAsString(FacesContext context,

UIComponent component, String valor);

Page 40: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• ComponentesUI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 41: JSF com Primefaces

Eventos e Listeners

• Eventos

• Atributo action aponta para um método no bean

• Retorno void ou String apontando para próxima

página

• Exemplo:

Page 42: JSF com Primefaces

Eventos e Listeners

• Listeners

• Retorno void e parâmetro referente ao listener

utilizado

• Exemplo:

Page 43: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• ComponentesUI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 44: JSF com Primefaces

Controle de Navegação

• JSF 1.x

• faces-config.xml

• navigation-rule

• JSF 2

• Retorno dos métodos através de chamadas

declaradas no atributo action

• Não há necessidade de retorno das extensões

• ?faces-redirect=true para redirecionamento de url

Page 45: JSF com Primefaces

Controle de Navegação

• Exemplos:

Page 46: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• ComponentesUI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 47: JSF com Primefaces

Mensagens

• Globais:

• <h:messages showDetail=“true”/>

• Locais:

• <h:message for=“id_do_componente”/>

• Disparadas no managedBean:

• FacesMessage msg =

new FacesMessage(mensagem, detalhes);

• FacesContext.getCurrentInstance().addMessage(

clientId, msg);

Page 48: JSF com Primefaces

Mensagens

• FacesMessage msg = new FacesMessage(severity,

mensagem, detalhes);

• Severity = Tipos de Mensagem

• FacesMessage.SEVERITY_ERROR

• FacesMessage.SEVERITY_FATAL

• FacesMessage.SEVERITY_INFO

• FacesMessage.SEVERITY_WARN

Page 49: JSF com Primefaces

JavaServer FacesCARACTERÍSTICAS

• Arquitetura MVC

• RAD

• ManagedBeans

• ComponentesUI

• Validators

• Converters

• Eventos e Listeners

• Controle de Navegação

• Mensagens

• Internacionalização

Page 50: JSF com Primefaces

Internacionalização

• O JavaServer Faces oferece suporte à

internacionalização, possibilitando que a aplicação seja

visível em vários idiomas

• Configuração:

• faces-config.xml (global)

• <f:loadBundle/> (local)

Page 51: JSF com Primefaces

InternacionalizaçãoPASSO A PASSO

• Criação do arquivo nomeArquivo_abreviacao.properties

• Exemplos:

Page 52: JSF com Primefaces

InternacionalizaçãoPASSO A PASSO

• faces-config.xml

• teste

Page 53: JSF com Primefaces

PrimefacesINTRODUÇÃO

• Biblioteca de componentes para JSF de código aberto

• Possui um rico conjunto com mais de 100 componentes

de interface

• Suporte nativo a Ajax

• Mais de 30 temas pré-definidos, oferecendo a

possibilidade de criação de temas

• Documentação de fácil acesso e demonstração do uso

dos componentes disponíveis no site

http://www.primefaces.org/showcase

Page 54: JSF com Primefaces

PrimefacesSHOWCASE

Page 55: JSF com Primefaces

PrimefacesINTRODUÇÃO

• Download do jar

http://www.primefaces.org/downloads.html

• WebContent/WEB-INF/lib

• Utilização da tag

Page 56: JSF com Primefaces

PrimefacesINTRODUÇÃO

• Ajax – atributo update

• Sintaxe: update="id_form1:id_comp1 id_form2:id_comp2

id_formn:id_compn"

• Exemplo:

• Atributo ajax=“false” (padrão ajax=“true”)

Page 57: JSF com Primefaces

PrimefacesCOMPONENTES

• Showcase - http://www.primefaces.org/showcase

• Alteração de temas:

• Download jar - http://www.primefaces.org/themes.html

• WebContent/WEB-INF/lib

• web.xml

Page 58: JSF com Primefaces

Contato:

Telefone: (45) 3576-7064

E-mail: [email protected]

Site: www.b3informatica.com