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)


Bruno Balint de Andrade - Consultor de Sistemas

7 anos desenvolvendo com Java

Certificações Java : OCJA , SCJP, OCWCD

Apresentação

JSF


Eclipse Kepler com plugin Jboss Tools

Apache Tomcat 6 e 7

JDK 6.0

Ambiente de Desenvolvimento

JSF


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

Desenvolvimento Web

JSF


Desenvolvimento Web (Timeline Java)

lJSF


Desenvolvimento Web (Arquitetura Centrada em Páginas)

lJSF


Desenvolvimento Web (Arquitetura Centrada em Páginas)

lJSF


Desenvolvimento Web (Model 2 - MVC)

lJSF


Struts 1 e 2

Spring MVC

Tapestry

E muitos outros...

• E ainda continuam surgindo mais

Surgiram diversos frameworks MVC baseado no Model 2

JSF


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

Surgiram diversos frameworks MVC baseado no Model 2(Problemas)

JSF


E a solução foi?

JAVA SERVER FACES

JSF


Mas o que é JAVA SERVER

FACES?

JSF


… 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)

JavaServer Faces é:

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


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


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


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


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,...)


JSF


Porque usar JavaServer

Faces?

JSF


É 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

Porque usar JavaServer Faces?

JSF


Richfaces


Richfaces


Richfaces


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


JSF



JSF


Criando Projeto Web

JSF


JSF


JSF


JSF


JSF


JSF

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

projeto

Adicionando as bibliotecas do JSF


JSF


1

2


JSF



JSF



JSF



JSF



JSF



JSF



JSF



JSF



JSF



JSF



JSF



JSF



lwww.primeinformatica.com.br

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>


JSF

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


JSF

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


JSF

Criar o arquivo index.jsp dentro de WebContent


JSF



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>


JSF



JSF

Adicionar o servidor tomcat no Eclipse


JSF



JSF



JSF



JSF

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


JSF

Conceitos chave do JSF

Componentes

Renderers

Managed-beans

Converters

Validators

Navegação

Ciclo de Vida(Request LifeCycle)


JSF

Componentes

Separa a lógica de negócio da apresentação

Cada view é composta por uma hierarquia de componentes


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>


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” />


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


JSF

Managed Beans

Controllers, “Linkam” a view ao modelo

Funciona como representação da view

São acessadas via Expression Language (EL) na jsp


JSF

Managed Beans

Como representaríamos esse formulário do exercício anterior

através de uma classe Java?


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.


JSF

Managed Beans

A configuração de um Managed Bean se resume basicamente ao

código abaixo:


JSF

Managed Beans

Um Managed Bean vive de acordo com seu escopo de

conversação.

Application, Session, Request, None


JSF

Managed Beans

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



JSF

Managed Beans


JSF

Managed Beans

Lembra da Expression Language(EL) ?


JSF

Managed Beans

Detalhando uma EL


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()


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


JSF

Analisando o padrão MVC


JSF


Os atributos deveriam ser

declarados em uma classe de modelo


JSF


Endereço.java EndereçoBean.java


JSF

Acesso via EL:

#{endereçoBean.endereco.rua}

enderecoBean.getEndereco().getRua()


JSF

JSF Expression Language


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


JSF

Alguns Exemplos


JSF

Sintaxe:


JSF

Sintaxe:


JSF

Escopos e variáveis:


JSF

Escopos e variáveis:


JSF


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.


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}

.


JSF

JSF EL(Bindings)

Em JSF nós temos 3 tipos de bindings:

Value Binding

Method Binding

Component Binding


JSF

JSF EL(Bindings)

Value Binding

Ligamos a propriedade de um bean como valor do componente


JSF

JSF EL(Bindings)

Method binding

Ligamos o método como uma “ação” do componente


JSF

JSF EL(Bindings)

Component Binding

Ligamos a propriedade de um bean como representação do

componente na view


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


JSF

Controle de Navegação


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


JSF

Navegação


JSF

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


JSF

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


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.


JSF

Modelo de componentes


JSF

Modelo de Componentes

Mensagens

Converters

Validators

Eventos e Listeners

Componentes Básicos


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)


JSF

Mensagens

Mensagens da aplicação


JSF

Mensagens

Mensagens dos inputs:


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.


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


JSF

Converters


JSF

Exercício

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

que está no diretório do treinamento( treinamento_jsf/artigos/

converters.docx ).


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



JSF

Implementando seu próprio converter: Exemplo


JSF

Implementando seu próprio converter: Exemplo : faces-config.xml – Mapeando o Converter

Aplicando o Converter em um componente:


JSF

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


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


JSF

Desafio Implementar um converter para o caso a seguir:

Saída:

Entrada


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.


JSF

Validator padrão para length


JSF

Validators

Devemos implementar a interface javax.faces.validator.Validator

Registrar o nosso validador no faces-config.xml.

Informar ao componente qual validador utilizar



JSF

Exemplo :Validator

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

atributo.


JSF

Exemplo :Validator


atributo. faces-config.xml


JSF

Exemplo :Validator


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


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


JSF

Desafio:

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


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


JSF

Eventos e Listeners – Exemplo Value Change Listener


JSF

Eventos e Listeners – Exemplo Action Listener


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


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 http://www.arquiteturadesistemas.com.br 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 http://www.arquiteturadesistemas.com.br 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 http://www.arquiteturadesistemas.com.br 128

JSF

DAO(Data Access Object) + JSF


JSF

Referências sobre PhaseListener

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


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


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










JSF

Obrigado

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

Site: • http://arquiteturadesistemas.com.br Pagina Facebook: • https://www.facebook.com/ArquiteturaDeSistemas.com.br Email : • [email protected]


http://br.linkedin.com/in/brunobalintdeandrade



http://arquiteturadesistemas.com.br/

http://arquiteturadesistemas.com.br/

https://www.facebook.com/?q=/ArquiteturaDeSistemas.com.br

https://www.facebook.com/?q=/ArquiteturaDeSistemas.com.br

mailto:[email protected]

Documents

Apresentação jsf 1_2