Apresentação jsf 1_2

Desenvolvimento Web com Java Server
Faces
Bruno Balint de Andrade

http://www.arquiteturadesistemas.com.br

1

AGENDA

Apresentação
Histórico Desenvolvimento Web com Java

O que é JSF?
Porque usar JSF?

Conceitos JSF
Exercícios com JSF 1.2 (RichFaces,MyFaces)
Novos Recursos do JSF 2
Exercícios com JSF2 (PrimeFaces)

2

JSF
Apresentação

Bruno Balint de Andrade - Consultor de Sistemas

7 anos desenvolvendo com Java
Certificações Java : OCJA , SCJP, OCWCD


3

JSF
Ambiente de Desenvolvimento

Eclipse Kepler com plugin Jboss Tools

Apache Tomcat 6 e 7
JDK 6.0


4

JSF
Desenvolvimento Web

Aplicações web tornam-se mais e mais importantes no nosso mercado
Maior complexidade para desenvolver
•

•

•

•

•

•

Javascript
CSS
Ajax
Validação
Efeitos, usabilidade

Etc

Exigência mais elevada do cliente durantes os anos
•

•

Interfaces ricas (fácil de usar)
Prazos cada vez mais curtos


5

lJSF
Desenvolvimento Web (Timeline Java)


6

lJSF
Desenvolvimento Web (Arquitetura Centrada em Páginas)


7

lJSF
Desenvolvimento Web (Arquitetura Centrada em Páginas)


8

lJSF
Desenvolvimento Web (Model 2 - MVC)


9

JSF
Surgiram diversos frameworks MVC baseado no Model 2
Struts 1 e 2
Spring MVC
Tapestry
E muitos outros...
•

E ainda continuam surgindo mais


10

JSF
Surgiram diversos frameworks MVC baseado no Model 2(Problemas)

Ainda assim continuavamos com alguns problemas
•

A plataforma Java não nos fornecia recursos para desenvolver aplicações
web com produtividade

•

•

•

Tinhamos dificuldade para integrar diversos frameworks
Falta de um padrão para um framework Web na platafoma Java
Ausência de uma API padrão para um framework Web


11

JSF

E a solução foi?

JAVA SERVER FACES


12

JSF

Mas o que é JAVA SERVER
FACES?


13

JSF
JavaServer Faces é:
… uma especificação
JSR 127 (JSF 1.0 e JSF 1.1) – 2004
JSR 252 (JSF 1.2) – 2006 (JAVA EE 5)
JSR 314 (JSF 2.0 e 2.1) – 2008 (JAVA EE 6 e JAVAEE 7)
… um framework MVC
… um framework baseado em componentes de interface com o usuário
… um framework dirigido a eventos
… padrão de mercado
… RAD (Rapid Application Development)


14

JSF

… um framework MVC
Um conjunto de APIs para:

Representar

componentes

UI

e

gerenciar

os

estados

destes

componentes
Manipular eventos e validação de entrada do usuário
Dar suporte a internacionalização e acessibilidade

Um conjunto de tags JSP para representar componentes JSF em uma
página JSP


15

JSF

… um framework baseado em componentes de interface com
o usuário
Construído sob o conceito de componentes
Os componentes são a base para construção da interface com o usuário
Existem componentes padrões equivalentes a quase todas as tags HTML e
diversos componentes auxiliares


16

JSF

… um framework baseado em componentes de interface com
o usuário
Existem diversas bibliotecas de componentes disponíveis comerciais e
open sources
Os componentes são expressos através de tags numa página JSP e
posteriormente transformados em HTML


17

JSF

… um framework dirigido a eventos
Possui um modelo para manipulação de eventos

Componentes geram determinados eventos
Efetua uma chamada à um método (ação no servidor)
O estado da aplicação web muda devido a um evento disparado pelo
usuário

Um evento pode ser um click de um botão, focar sobre um input ou
mesmo alterar o valor de uma combo-box


18

JSF

… um padrão de mercado
JAVA EE 5,6,7

Suporte a big players:
Sun,Apache,Oracle,IBM,BEA,JBoss,Borland etc
IDEs (Netbeans,Eclipse, Jdeveloper,etc)
Implementações (Sun,Apache,IBM,Oracle, …)

Conjunto de Componentes (RichFaces,PrimeFaces,Apache MyFaces,...)


19

JSF

Porque usar JavaServer
Faces?


20

JSF
Porque usar JavaServer Faces?

É um padrão de mercado
Presente nas especificações JAVA EE 5,6,7

Fácil de usar, e produtivo também
Abstração para desenvolvimento de aplicações Web
Modelo de programação dirigido a eventos (oposto ao modelo HTTP
request/response)

Baixa de curva de aprendizagem
Componentes já prontos


21

Richfaces


22

Richfaces


23

Richfaces


24

JSF

Suporte cross-browser
Segurança

Cross-site scripting, session hijacking
OWASP(Open Web Application Security Project)
Grande atividade da comunidade em fóruns, listas de discussão, blogs,
portais, revistas etc.

Integração com diversos frameworks
Templating
Facelets, Sitemesh
JSF Templating, Tiles


25

JSF


26

JSF

Criando Projeto Web


27

JSF


28

JSF


29

JSF


30

JSF


31

JSF
Adicionando as bibliotecas do JSF

Selecione o projeto e pressione alt+enter para acessar as propriedades do
projeto


32

JSF

1
2


33

JSF


34

JSF


35

JSF


36

JSF


37

JSF


38

JSF


39

JSF


40

JSF


41

JSF


42

JSF


43

JSF


44

JSF


45

JSF
Adicionar o FacesServlet no web.xml

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>


46

lwww.primeinformatica.com.br

JSF
Adicionar o arquivo no faces-config.xml dentro de WEB-INF


47

JSF
Adicionar o arquivo no faces-config.xml dentro de WEB-INF


48

JSF
Criar o arquivo index.jsp dentro de WebContent


49

JSF


50

JSF
Index.jsp : Adicionar taglibs do JSF

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
Index.jsp : Adicionar trecho de código abaixo no corpo do
arquivo
<body>
<f:view>
<h:outputText value="HelloWorld"/>
</f:view>
</body>


51

JSF


52

JSF
Adicionar o servidor tomcat no Eclipse


53

JSF


54

JSF


55

JSF


56

JSF
Acessar http://localhost:8080/helloworld/index.faces


57

JSF
Conceitos chave do JSF
Componentes
Renderers
Managed-beans
Converters
Validators
Navegação
Ciclo de Vida(Request LifeCycle)


58

JSF
Componentes

Separa a lógica de negócio da apresentação
Cada view é composta por uma hierarquia de componentes


59

JSF
Componentes
• Componentes podem ser adicionados na view programaticamente ou
via template (JSP por default, ou Facelets para melhor desempenho
e fácil desenvolvimento)
• Componentes são expressos em tags em uma página JSP e em sua
maioria são de interface com o usuário
• Os componentes padrões são divididos em dois grupos
Faces Core <f:view>, <f:loadBundle>, <f:param>
HTML wrappers <h:dataTable>, <h:selectOneMenu>


60

JSF
Renderers
Responsável por exibir o componente no cliente
São agrupados em render kits
Efetua o encode (gera o HTML do componente)
Efetua o decode (seta o componente com os dados da URL query
string e do formulário )
Resumindo
<h:inputText id=“login” size=“16” />

<input type=“text” id=“myForm:login” name=“myForm:login” size=“16” />


61

JSF

Exercício: Desenhe um formulário conforme a imagem abaixo.
Dica: para deixar componentes na mesma linha utilize os componentes
h:panelGrid com o atributo columns


62

JSF
Managed Beans
Controllers, “Linkam” a view ao modelo
Funciona como representação da view
São acessadas via Expression Language (EL) na jsp


63

JSF
Managed Beans
Como representaríamos esse formulário do exercício anterior
através de uma classe Java?


64

JSF
Managed Beans

No JSF 1.2 , é necessário registrarmos um Managed Bean para que o
framework saiba que ele existe
Um Managed Bean é registrado (configurado) no arquivo de

configurações do JSF, faces-config.xml.


65

JSF
Managed Beans

A configuração de um Managed Bean se resume basicamente ao
código abaixo:


66

JSF
Managed Beans
Um

Managed

Bean

vive

de

acordo

conversação.

Application, Session,
Request, None


67

com

seu

escopo

de

JSF
Managed Beans
Mas como “linkar” nosso MB aos componentes do nosso formulário?


68

JSF
Managed Beans


69


JSF
Managed Beans
Lembra da Expression Language(EL) ?


70

JSF
Managed Beans

Detalhando uma EL


71

JSF
Exercício
Utilizando o formulário do exercício anterior, verificar no Managed
Bean

se

os

dados

foram

preenchidos

corretamente.

Utilizar System.out.println(<nome_atributo>) no método logar()


72

JSF
Exercício
Criar um formulário de cadastro de endereço, com os seguintes
campos: Rua, Complemento, Cidade ,Bairro e CEP.
Utilizar o componente h:inputTextarea para representar o campo
“Complemento”
Criar o Managed Bean e dentro dele criar todos os campos a serem
referenciados nos componentes
Submeter o formulário e imprimir os valores no Console


73

JSF
Analisando o padrão MVC


74

JSF

Os atributos
deveriam ser
declarados em uma
classe de modelo


75

JSF

Endereço.java


EndereçoBean.java

76

JSF
Acesso via EL:

#{endereçoBean.endereco.rua}

enderecoBean.getEndereco().getRua()


77

JSF

JSF Expression Language


78

JSF
JSF EL
Semelhante ao JSTL porém usa-se #{} no lugar de ${}
Pode-se executar métodos no modelo através de expressões
Não é processada imediatamente como JSP EL
A partir da JSF 1.2 utiliza-se Unified Expression Language (JSP 2.1)
que resolve problemas de incompatibilidade entre a JSF-EL e JSP-EL


79

JSF
Alguns Exemplos


80

JSF
Sintaxe:


81

JSF
Sintaxe:


82

JSF
Escopos e variáveis:


83

JSF
Escopos e variáveis:


84

JSF


85

JSF
Exercícios:
• Adicionar um atributo List (ArrayList) e inserir 5 elementos. Acessar o elemento
da última posição na lista

• Adicionar um atributo Map(HashMap) e inserir 5 elementos. Acessar o
elemento dado uma chave.


86

JSF
Exercícios:
• Criar uma classes de modelo chamada Usuario com os atributos
(nome,sobrenome e idade), o construtor do bean deverá iniciar seus atributos.
Criar um Managed Bean chamado UsuarioBean que deverá ter um atributo do
tipo Usuario. Esse atributo deve ser inicializado no Construtor.
Ex: usuario = new Usuario(“bruno”,”andrade”,18)
• Criar dois componentes do tipo <h:outputText /> na página com os valores.
1. É maior de 18 anos
2. É menor de 18 anos
O primeiro deve ser exibido apenas se o usuario.idade >=18
O segundo deve ser exibido apenas se o usuario.idade <18

Dica: colocar uma condição no atributo rendered do componente visual.
Ex : #{usuarioBean.idade > 18}

87

JSF
JSF EL(Bindings)
Em JSF nós temos 3 tipos de bindings:
Value Binding
Method Binding
Component Binding


88

JSF
JSF EL(Bindings)
Value Binding
Ligamos a propriedade de um bean como valor do componente


89

JSF
JSF EL(Bindings)
Method binding
Ligamos o método como uma “ação” do componente


90

JSF
JSF EL(Bindings)
Component Binding
Ligamos a propriedade de um bean como representação do
componente na view


91

JSF
Exercício
Criar uma página com dois componentes, um input (HtmlInputText) e
um botão (HtmlCommandButton)(“OK”). Se o valor do input for maior que
1000, o nome do botão deve mudar para “tente novamente”
Altere o exercício anterior para desabilitar o botão caso o valor
entrado pelo usuário seja igual a 171


92

JSF

Controle de Navegação


93

JSF
Navegação
Navegação de uma página para outra
Simples e poderoso
Pode ser disparado através de um evento
Resultado (outcome) de uma Action
As regras de navegação são registradas no faces-config.xml


94

JSF
Navegação


95

JSF

É possível também navegar entre as páginas sem a necessidade de um
Managed Bean, de maneira estática:


96

JSF
Na navegação do JSF, é possível utilizar wildcard(*) para páginas de
origem(from-view-id) :


97

JSF
Exercício

Voltando ao formulário de login: Efetue uma lógica de autenticação
no método loginBean.logar() : Caso o login seja igual a senha entrada
pelo usuário, então você deve encaminha-lo para um página de

sucesso, caso contrário, limpe os campos e o usuário deve tentar logar
novamente na aplicação.


98

JSF

Modelo de componentes


99

JSF
Modelo de Componentes

Mensagens
Converters
Validators

Eventos e Listeners
Componentes Básicos


100

JSF
Mensagens

São as mensagens de informação ou erro exibidas ao usuário da
aplicação. Qualquer parte da aplicação ( Managed Beans, Converters,
Validators etc) poderá gerar mensagens quando necessário
Basicamente existem dois tipos de mensagens de erro
Aplicação (lógica de negócios, banco de dados, conexão etc)
Inputs (conversão, validação de campos , etc)


101

JSF
Mensagens

Mensagens da aplicação


102

JSF
Mensagens

Mensagens dos inputs:


103

JSF
Exercícios

Voltando ao formulário de login: Adicione mensagens de erro aos
inputs de login, e torne-os obrigatórios.

Ainda no formulário de login, no método loginBean.logar() : Caso o
login seja diferente da senha entrada pelo usuário, exiba uma
mensagem de erro da aplicação.


104

JSF
Converters

Tem por finalidade converter e/ou formatar objetos do tipo Java para
String e vice-versa
O JSF já nos fornece converters padrões para date / time , inteiros,

números e moeda.
O JSF nos permite implementar nosso próprio converter


105

JSF
Converters


106

JSF
Exercício

Faça alguns testes com os converters padrões do JSF, utilize o artigo
que

está

no

diretório

do

treinamento(

converters.docx ).


107

treinamento_jsf/artigos/

JSF
Implementando seu próprio converter

Devemos implementar a interface javax.faces.convert.Converter
Registar nosso converter no faces-config.xml
Informar ao componente JSF qual converter utilizar


108

JSF
Implementando seu próprio converter: Exemplo


109


JSF
Implementando seu próprio converter: Exemplo : facesconfig.xml – Mapeando o Converter

Aplicando o Converter em um componente:


110

JSF
Implementando seu próprio converter: Exibindo o resultado no
Bean


111

JSF
Exercício

Implementar um converter que formate um CPF entrado pelo
usuário, ou seja, formatar um CPF como “646557720321” entrado pelo
usuário para “646.577.203-21” por exemplo.

Dica: Utilizar a classe NumberFormat


112

JSF
Desafio
Implementar um converter para o caso a seguir:

Entrada

Saída:

113

JSF
Validators

Tem a responsabilidade de garantir que o valor entrado pelo
usuário seja válido

Você pode validar tantos objetos como Strings

O JSF já nos fornece validadores padrões como required, length e ranges

O JSF nos permite implementar nosso próprio validador.


114

JSF
Validator padrão para length


115

JSF
Validators

Devemos implementar a interface javax.faces.validator.Validator

Registrar o nosso validador no faces-config.xml.

Informar ao componente qual validador utilizar


116

JSF
Exemplo :Validator

Criação de um validador que impede o envio de caracteres especiais para um
atributo.


117


JSF
Exemplo :Validator

atributo. faces-config.xml


118

JSF
Exemplo :Validator

atributo. Utilizar a tag <f:validator> para vincular o validador a um componente.


119

JSF
Exercícios:

Implementar um validador que não permita que uma data entrada pelo usuário seja
maior que a data atual

Implementar um validador que valide se o usuário entrou com um email válido


120

JSF
Desafio:

Implementar um validador que validade se o CPF digitado está correto


121

JSF
Eventos e Listeners

O JSF usa o modelo JavaBeans event/listener (também utilizado no Swing).
Componentes geram eventos, e listeners podem ser registrados para manipular esses
eventos

Os listeners mais comuns do JSF são:
Value-change listener
Action Listener


122

JSF
Eventos e Listeners – Exemplo Value Change Listener


123

JSF
Eventos e Listeners – Exemplo Action Listener


124

JSF
Exercício
• Criar um componente do tipo <h:inputText> para armazenar um nome e um
botão do tipo <h:commandButton>. Caso o usuário digite um nome com mais de
8 caracteres , o botão deve ser habilitado, caso contrário o mesmo deve ser
desabilitado. Utilize o evento valueChangeListener para fazer essas verificações


125

JSF
Plus: Detalhando os escopos do JSF 1.2
• Request Scope: todos os objetos armazenados no escopo
request, sobrevivem apenas a uma submissão ao ciclo de vida do
JSF. Exemplo:

A cada requisição é
criada uma nova
instância do bean

126

JSF
• Session Scope: todos os objetos e atributos vinculados ao
ManagedBean, sobreviverão durante toda a sessão do usuário. A
sessão é definida pelo vinculo do navegador do usuário com o
servidor. Desta forma, se o usuário abrir dois navegadores, ele
estará criando duas sessões com o servidor.Exemplo:

A cada sessão é criada
uma nova instância do
bean

127

JSF
• Application Scope: tudo armazenado neste escopo permanece
enquanto a aplicação estiver executando e é compartilhado entre todos os
usuários. É recomendado sempre que for necessário guardar informações
que podem ser utilizada por diversas partes da aplicação como parâmetros
e também implementar funcionalidades para prover comunicação entre
usuários. Exemplo:

É criado apenas uma
instância do bean na
Aplicação

128

JSF
DAO(Data Access Object) + JSF


129

JSF
Referências sobre PhaseListener

http://hslife.com.br/2010/12/18/controle-de-acesso-com-phaselistener/


130

JSF
Referências sobre Facelets
• http://www.slideshare.net/drspockbr/justjava2008-facelets-presentation
• http://jsftutorials.net/jsf1.2-and-Facelets.html
• http://pt.slideshare.net/cejug/anatomia-do-jsf-javaserver-faces


131

JSF
Obrigado
LinkedIn
• http://br.linkedin.com/in/brunobalintdeandrade

Site:
• http://arquiteturadesistemas.com.br
Pagina Facebook:
• https://www.facebook.com/ArquiteturaDeSistemas.com.br
Email :
• bruno.balint@arquiteturadesistemas.com.br


132

Apresentação jsf 1_2

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Apresentação jsf 1_2

Similaire à Apresentação jsf 1_2 (20)

Apresentação jsf 1_2