introdução ao jsf 2
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 2TRANSCRIPT
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]
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
3
O que é JSF?
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.
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.
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
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.
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
9
MVC no JSF
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.
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.
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
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
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.
15
Exemplos de Componentes JSF
16
Exemplos de Componentes JSF (usando RichFaces)
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
18
Arquitetura JSF e outros componentes
Relação entre as tecnologias de aplicação java web
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
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 :)
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
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}
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.
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.
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.
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():
27
Criando um projeto JSF no Netbeans
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...
29
Definindo o nome do projeto e local
30
Escolha do Servidor Web
31
Escolha do Framework JSF (JavaServer Faces)
32
Resultado (projeto e página index.xhtml)
33
Projeto exemplo
index
cadastro
«Managed Bean» nome sobrenome
CadastroBean
34
Criando o componente bean gerenciável (Managed Bean)
35
Definindo o nome e o local do bean
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)
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
38
Criando a página “benvindo.xhtml”
39
Criando a página “benvindo.xhtml” (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.
41
Exercício prático
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.
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.
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.
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