JavaServer Faces

(1)

JavaServer Faces – JSF2

02. Primeiro projeto JSF2

1

Esp. Márcio Palheta

gtalk: [email protected]

(2)

Agenda

Motivação – HTTP Stateless;

O mundo desktop: pensando em componentes;

componentes;

O JavaServer Faces 2

Primeiro projeto JSF2

Criação de formulários

Managed beans

(3)

HTTP e o controle de estados

HTTP e sua característica stateless;

O servidor não guarda o estado da conversa com o cliente;

conversa com o cliente;

A cada requisição, TODOS os dados devem ser novamente enviados;

Uso de cookies e sessões;

3

(4)

O mundo desktop

Guarda os valores contidos nos componentes visuais;

Transição de telas;

Diferentes ações disparadas;

A cada componente, podemos associar

um conjunto de propriedades;

(5)

Desenvolvimento de aplicações Java Web utilizando componentes visuais;

O desenvolvedor não se preocupa com

O desenvolvedor não se preocupa com JavaScript e Html;

Adicionamos componentes: calendários, tabelas, formulários que são

renderizados em HTML;

5

(6)

JavaServer Faces – cont...

O estado de cada componente é salvo automaticamente – stateful;

View: baseada em Facelets – ciclo de vida diferente das JSPs

vida diferente das JSPs

Controle: baseada em classes do tipo Managed Beans;

Com o Java EE 6, foi lançada a versão

2.0 do JSF;

(7)

Primeira página

Baixe as bibliotecas do jsf;

Salve os arquivos em WEB-INF/lib

Configure a servlet do JSF no web.xml

Para trabalharmos com facelets, nossas páginas terão a extensão XHTML:

Página inicial: index.xhtml

Taglibs dos componentes JSF;

7

(8)

Atualização do web.xml

(9)

A página index.xhtml

File/New/Other/Web/HTML File.

9

(10)

Configuração do template

(11)

index.xhtml

11

(12)

Teste da página index.xhtml

Inicie o Tomcat e acesse a aplicação:

http://localhost:8080/notasfiscais/index.xhtml

(13)

Opção: Window/Preferences

13

(14)

Trabalhando com formulários

Vamos elaborar o cadastro de produtos

Composição com a tag <h:form>. Essa tag é equivalente à <form>

tag é equivalente à <form>

<h:inputText>: campo texto;

<h:outputLabel>: componente label;

<h:panelGrid>: tabela para layouts;

Crie a página produto.xhtml, conforme

código a seguir:

(15)

Formulário – produto.xhtml

15

(16)

Página produto.xhtml

(17)

Dados e comportamentos com Managed Beans

Precisamos recuperar os dados do formulário e gravá-los no BD;

Managed Bean - MB é um tipo de classe

Managed Bean - MB é um tipo de classe que recebe e armazena os valores das requisições;

Os métodos de MB são chamados a partir de comandos web;

17

(18)

Programação orientada a eventos na web

O JSF traz para web um estilo de programação similar ao desktop;

O clique de um botão invoca um

O clique de um botão invoca um método em seu Managed Bean;

Com isso, passamos a programar

pensando nos eventos gerados por

cada componente;

(19)

Usando um Managed Bean

Anotação: @ManagedBean;

Não é mais necessário atualizar o xml;

Convention Over Configuration - CoC:

Escopo: @RequestScoped – não guarda o estado após a requisição

Nome: Mesmo nome da classe ou

@ManagedBean(name=“NomeBean”)

E se tivermos Annotations e XML ?

19

(20)

Ligando o controle à visão

Os campos do formulários devem ser ligados a atributos do MB;

Binding é a ligação entre componentes

Binding é a ligação entre componentes da interface e atributos do MB;

O binding é feito usando Expression Language do JSF - #{...};

Com o binding, modificações na tela

geram alterações no atributo do MB e

(21)

Realização do binding

Ligação entre campo e atributo, com EL

<h:inputText value=“#{produtoBean.produto.nome}”/>

Método getProduto() no managed bean

Se o atributo não for inicializado, será gerado NullPointerException;

Ligar o botão salvar a um método do MB:

<h:commandButton value=“Salvar” action=“#{produtoBean.salvar}” />

21

(22)

Detalhes do binding

Componente e atributo ligados;

Após a invocação do método salvar(), o formulário continua preenchido

formulário continua preenchido

Para limpar o formulário, é necessário criar uma nova instância de produto:

Produto = new Produto();

(23)

ProdutoBean.java

23

(24)

Binding dos componentes de

produto.xhtml

(25)

Atividades

No console Mysql, execute o comando:

Create database notasfiscais;

Reinicie o servidor tomcat;

Acesse a página de produtos:

http://localhost:8080/notasfiscais/produto.xhtml

Preencha e salve os dados;

Consulte a base para confirmar o novo cadastro

25

(26)

Resultados alcançados

(27)

Listagem de produtos

O componente <h:dataTable>;

dataTable recebe uma coleção de

objetos a serem exibidos – List ou Set;

O método getProdutos() para acesso a Banco de Dados;

Invocar o BD a cada requisição?

Como fica a performance?

27

(28)

Listagem de produtos

Vamos tirar o acesso ao BD do método get, uma vez que o JSF o invoca N-Vezes

Vamos criar o método carregarProdutos()

Vamos criar o método carregarProdutos() que será executado apenas uma vez;

Anotação @PostConstruct – executado depois de instanciar o MB;

Métodos de callback;

(29)

Atualizações de ProdutoBean

29

(30)

Atualizações de produto.xhtml

(31)

Conferindo o resultado

Acesse a página produto.xhtml:

31

(32)

Removendo um produto aquii

Como eram as coisas sem JSF?

Request.getParamter();

Quando clicamos em um link, devemos

Quando clicamos em um link, devemos alterar o valor de um atributo do MB;

A tag f.setPropertyActionListener;

target: indica a propriedade do MB;

value : indica o novo valor do atributo;

(33)

Atualizações em ProdutoBean

Vamos alterar nosso Managed Bean

para declararmos o método de exclusão de produtos;

de produtos;

Observe que estamos excluindo o atributo do próprio MB:

33

(34)

Alterações em produto.xhtml

Novo formulário e coluna;

(35)

Alterando um produto

Para completar nosso cadastro, precisamos alterar os dados de produtos;

Como é a alteração sem JSF?

Crie um h:commandLink chamado Alterar;

Lembre-se que o form realiza binding com o atributo produto do MB;

De @RequestScoped para @ViewScoped;

35

(36)

Atualização do ProdutoBean

(37)

Atualização da produto.xhtml

Crie o campo id, acima do campo nome

37

(38)

Atualização da produto.xhtml

No componente dataTable, inclua a

coluna para alterar o registro:

(39)

Acesse produto.xhtml

39

(40)

Referências

http://www.caelum.com.br;

http://java.sun.com/

http://java.sun.com/j2ee/1.6/docs/tutorial/d

http://java.sun.com/j2ee/1.6/docs/tutorial/d oc/index.html

http://java.sun.com/products/jndi/docs.html

http://java.sun.com/blueprints/corej2eepatte

rns/Patterns/index.html

(41)

JavaServer Faces – JSF2

02. Primeiro projeto JSF2

41