introdução ao jsf 2

45
1 IFPA Curso de Tecnologia em Análise e Desenvolvimento de Sistemas Engenharia da Web - Introdução ao JavaServer Faces 2.0 Prof. Cláudio Martins [email protected]

Upload: claudio-martins

Post on 31-Jul-2015

223 views

Category:

Documents


4 download

DESCRIPTION

- Introdução ao JavaServer Faces 2.0Objetivos da Aula:a) Apresentar os conceitos da tecnologia JSF (Java Server Faces), versão 2.xb) Utilizar o IDE NetBeans para criar projeto Web com o framework JSF 2

TRANSCRIPT

Page 1: Introdução ao JSF 2

1

IFPACurso de Tecnologia em Análise e Desenvolvimento de Sistemas

Engenharia da Web

- Introdução ao JavaServer Faces 2.0

Prof. Cláudio [email protected]

Page 2: Introdução ao JSF 2

2

Objetivos da Aula

●Apresentar os conceitos da tecnologia JSF (Java Server Faces)

●Utilizar o IDE NetBeans para criar projeto Web com o framework JSF

Page 3: Introdução ao JSF 2

3

O que é JSF?

Page 4: Introdução ao JSF 2

4

JSF - Definição

● O JavaServer Faces (JSF) é uma framework para desenvolvimento web que utiliza um modelo de interfaces gráficas baseado em eventos (semelhante ao de “janelas” Swing).

● JSF é uma especificação de framework que segue o padrão arquitetural MVC e no padrão “Front Controller” para o desenvolvimento de interfaces de usuário (UI) baseadas em web (no caso, páginas web).

● JSF é um framework construído com componentes e para componentes, o que facilita o desenvolvimento baseado no reuso de software.

Page 5: Introdução ao JSF 2

5

MVC

●O padrão MVC divide uma aplicação em três tipos de componentes: ● Modelo: encapsula os dados e as

funcionalidades da aplicação.● Visão: é responsável pela exibição de

informações, cujos dados são obtidos do modelo.

● Controlador: recebe as requisições do usuário e aciona o modelo e/ou a visão.

Page 6: Introdução ao JSF 2

6

MVC em Arquitetura Web

Browser envia a solicitação (request)

Controlador interage com o modelo

Controlador chama a visão

Visão formata a resposta ao browser

Page 7: Introdução ao JSF 2

7

Padrão “Front Controller”

●No padrão Front Controller, todas as requisições do usuário são recebidas pelo mesmo componente.

●Dessa forma, tarefas que devem ser realizadas em todas as requisições podem ser implementadas por esse componente. Isso evita a repetição de código e facilita a manutenção do sistema.

Page 8: Introdução ao JSF 2

8

Exemplos de Front Controller● No cenário "a", o controlador utiliza um objeto Dispatcher

(despachante), solução que é usada para redirecionar /repassar para uma página de resposta.

● No cenário "b" (Figura 2), o Front Controller delega processamento a um objeto de apoio (Helper). Nessa solução, pode-se aplicar padrões como Command, Value Beans, e outros onde a competência para realizar a operação é decidida

Page 9: Introdução ao JSF 2

9

MVC no JSF

Page 10: Introdução ao JSF 2

10

Como funciona o MVC no JSF?

● Em JSF, o controle é realizado por um servlet chamado Faces Servlet, apoiado por configuração adequada e vários manipuladores de ações e observadores de eventos.

● O Faces Servlet recebe as requisições dos clientes (browsers na web), redireciona para o modelo e envia uma resposta. Os arquivos de configuração possuem informações sobre mapeamentos de ações e regras de navegação. Os manipuladores de eventos são responsáveis por receber os dados da camada de visualização, acessar o modelo e devolver o resultado para o usuário através do Faces Servlet.

Page 11: Introdução ao JSF 2

11

Como funciona o MVC no JSF?

● O modelo é representado por objetos de negócio, que executam uma lógica de negócio ao receber dados oriundos da camada de visualização.

● A esses objetos são chamados Managed Beans.

● A visualização é composta por uma hierarquia de componentes (component tree), o que torna possível unir componentes para construir interfaces mais ricas e complexas.

Page 12: Introdução ao JSF 2

12

JSF – Características Gerais

● O JSF possui as seguintes características:

● Facilita a construção de uma IU a partir de um conjunto de componentes reutilizáveis

● Simplifica o tratamento dos dados entre a aplicação e a IU

● Associa os eventos do lado cliente (da UI) com os manipuladores dos eventos do lado do servidor

– os componentes de entrada possuem um valor local representando o estado no lado servidor

● Permite personalizar os componentes de UI para que sejam facilmente construídos e reutilizados

Page 13: Introdução ao JSF 2

13

Características técnicas do JSF

● Utiliza Ajax em alguns de seus componentes tornando alguns processos mais rápidos e eficientes

● Suporte a internacionalização e acessibilidade;

● Possibilita validação padronizada via os componentes de UI;

● Utilização de bibliotecas de tags ("tag libraries") especiais do JavaServer Pages (JSP) para expressar a interface do JavaServer Faces

● Um modelo de eventos do lado servidor ("server-side event model");

● Gerência de estados (a partir do escopo de sessão, request, etc);

● Managed Beans;

● Linguagem de Expressão Unificada ("Unified Expression Language") para JSP 2.0 e JSF 1.2

Page 14: Introdução ao JSF 2

14

Componentes visuais no JSF

● JSF oferece um rico modelo de componentes de interface do usuário para representar:

● Formulário● Campos de entrada de texto● Campo de entrada de senha● Rótulos com textos● Textos de uma única linha● Links● Botões

– e muito mais.

● Além dos componentes originais do JSF há a possibilidade de usar componentes de terceiros, como o Rich Faces, IceFaces, PrimeFaces, etc.

Page 15: Introdução ao JSF 2

15

Exemplos de Componentes JSF

Page 16: Introdução ao JSF 2

16

Exemplos de Componentes JSF (usando RichFaces)

Page 17: Introdução ao JSF 2

17

Independência da Renderização

● JSF é capaz “renderizar” os componentes em diferentes tipos de cliente, sem mudança no código.

● Ex: Um componente de tabela de dados sendo renderizado para clientes WML e HTML

Page 18: Introdução ao JSF 2

18

Arquitetura JSF e outros componentes

Relação entre as tecnologias de aplicação java web

Page 19: Introdução ao JSF 2

19

Estrutura de um projeto com JSFUm projeto usando JSF contém:

● Objetos JavaBeans ● Métodos para Event Listener● Páginas JSP● Classes auxiliares do lado do servidor● Biblioteca de componentes UI● Biblioteca de event handlers, validators, e etc...● Managed Beans (classes que gerenciam

dados)● Arquivo de configuração da aplicação

Page 20: Introdução ao JSF 2

20

Classe ManagedBean

●São classes simples (estilo POJO, Java Bean).

●Possuem os métodos de acesso (getters e setters) seguindo a convenção JavaBean

●Possuem os métodos relacionados às ações para as regras de navegação

●Podem conter métodos validadores dos dados (Validation methods: métodos de validação :)

Page 21: Introdução ao JSF 2

21

Managed Beans

●Em resumo, as principais funções dos Managed Beans são:

1.Fornecer dados que serão exibidos nas telas.

2.Receber os dados enviados nas requisições.

3.Executar tarefas de acordo com as ações dos usuários

Page 22: Introdução ao JSF 2

22

Criando uma classe Managed Bean

● Na versão JSF 2, use a anotação @ManagedBean.

● Por padrão, o JSF assumirá que o nome do managed bean é o nome da classe com a primeira letra minúscula.

● Para o exemplo, o nome padrão do managed bean é testeBean. Além disso, o escopo request será assumido como padrão.

● Para acessar o valor dos atributos, precisamos definir métodos de acesso. Tais métodos devem seguir a convenção de um Java Bean (com gets e set´s).

@ManagedBeanpublic class TesteBean {

private int numero ;

// gets e setters dos atributos}

Page 23: Introdução ao JSF 2

23

Managed Bean nomeado

● Todo managed bean possui um nome único que é utilizado para acessá-lo dentro dos trechos escritos com expression language. Quando utilizamos a anotação @ManagedBean, por padrão, o JSF assume que o nome do managed bean é o nome da classe com a primeira letra em caixa baixa. Porém, podemos alterar esse nome acrescentado umargumento na anotação.

Page 24: Introdução ao JSF 2

24

Utilizando um Managed Bean na página

●Com o Managed Bean implementado, podemos exibir o valor dos atributos utilizando expression language (#{ }). Veja o exemplo a seguir.

Page 25: Introdução ao JSF 2

25

Ações (métodos) no Managed Bean

● Para implementar lógicas que devem ser executadas assim que o usuário clicar em um botão ou link, basta criar métodos nas classes dos managed beans.

● Seguindo o exemplo, podemos criar um método que incrementa o valor do atributo numero, como no código abaixo.

Page 26: Introdução ao JSF 2

26

Como chamar um método do Managed Bean?

● Os métodos podem ser void quando desejamos manter os usuários na mesma tela ou devolver String quando desejamos realizar uma navegação entre telas.

● Ex: Para incrementar o valor do atributo numero do managed bean testeBean, podemos criar uma página que possui um botão para executar essa ação e associá-lo ao método incrementaNumero():

Page 27: Introdução ao JSF 2

27

Criando um projeto JSF no Netbeans

Page 28: Introdução ao JSF 2

28

Passos para criar um projeto JSF

●Os passos (recomendados) para definir e implementar um projeto web com JSF são:

1) Defina o projeto web no IDE (Netbeans)

2) Projete a aplicação web

3) Crie as classes Managed Beans

4) Crie as páginas JSF

5) Teste, teste, teste, teste...

Page 29: Introdução ao JSF 2

29

Definindo o nome do projeto e local

Page 30: Introdução ao JSF 2

30

Escolha do Servidor Web

Page 31: Introdução ao JSF 2

31

Escolha do Framework JSF (JavaServer Faces)

Page 32: Introdução ao JSF 2

32

Resultado (projeto e página index.xhtml)

Page 33: Introdução ao JSF 2

33

Projeto exemplo

index

cadastro

«Managed Bean» nome sobrenome

CadastroBean

Page 34: Introdução ao JSF 2

34

Criando o componente bean gerenciável (Managed Bean)

Page 35: Introdução ao JSF 2

35

Definindo o nome e o local do bean

Page 36: Introdução ao JSF 2

36

Código do Managed Bean

@ManagedBean (name="cadastro")@RequestScopedpublic class CadastroBean {

private String nome; private String sobrenome;

public CadastroBean() { }

public String cadastrar() { if (nome.trim().equals("") || sobrenome.trim().equals("")) { return ("index"); } else { return ("benvindo"); } } // fim do método

// gets e setts

Método “cadastrar” - usado como manipulador do evento de submissão

do formulário

Nome do objeto “managed bean” (como é chamado nas páginas

JSF)

Page 37: Introdução ao JSF 2

37

Código da página “index”

<h:body> Hello from Facelets <h:form> Nome: <h:inputText value="#{cadastro.nome}"/> <BR/> Sobrenome: <h:inputText value="#{cadastro.sobrenome}"/> <BR/>

<h:commandButton value="Cadastrar Dados"

action="#{cadastro.cadastrar}"/>

</h:form>

</h:body>

Nome do objeto “managed bean” declarado na classe CadastroBean

Page 38: Introdução ao JSF 2

38

Criando a página “benvindo.xhtml”

Page 39: Introdução ao JSF 2

39

Criando a página “benvindo.xhtml” (2)

Page 40: Introdução ao JSF 2

40

Código da página “benvindo”

<h:body> <f:view> <br/> USANDO JSF: <br/> Benvindo, <h:outputText value="#{cadastro.nome}" /> / <h:outputText value="#{cadastro.sobrenome}" /> </f:view>

</h:body>

Nome do objeto “managed bean”

USANDO JSP Cadastro do usuário ${cadastro.nome} / ${cadastro.sobrenome} aceito. Parabéns.

Page 41: Introdução ao JSF 2

41

Exercício prático

Page 42: Introdução ao JSF 2

42

Atividade Prática

● Implemente uma aplicação que mostra o funcionamento básico do JSF.

●Essa aplicação deverá receber um texto do usuário e exibi-lo em letras maiúsculas.

Page 43: Introdução ao JSF 2

43

O Managed Bean● Vamos começar criando um managed bean para

armazenar o texto enviado pelo usuário e a lógica para transformá-lo.

Page 44: Introdução ao JSF 2

44

A página JSF● Uma vez que o managed bean foi criado, podemos

associá-lo a um formulário que receberá o texto do usuário.

Page 45: Introdução ao JSF 2

45

Referências bibliográficas

● Site oficial do JEE: http://www.oracle.com/technetwork/java/javaee/overview/index.html

● Apostila do curso K19: http://www.k19.com.br/downloads/apostilas/java/k19-k12-

desenvolvimento-web-com-jsf2-e-jpa2