Apostila LPIII 01 - JavaServer Faces

Prévia do material em texto

08/12/2015
1
Linguagem de Programação III
JavaServer Faces 
Joinvile Batista Junior
Referências
- livro: Java - how to program – 9ª edição – P.Deitel, H. Deitel – cap. 29 e 30
- http://netbeans.org/kb/docs/web/mysql-webapp_pt_BR.html
UFGD - LPIII 01 - Joinvile Batista Junior 2
JavaServer Faces : Framework para Aplicações Web
Aplicações multicamadas em Java
• são tipicamente implementadas utilizando Java Enterprise Edition
(Java EE)
JavaServer Faces (JSF)
• web-application framework: construção de aplicações web 
multicamadas pela extensão do framework com capacidades específica 
da aplicação desejada
• o framework manipula os detalhes de
– envio e recepção de requisitos do cliente 
– e de retorno de respostas
• enquanto o implementador foca nas funcionalidades da sua aplicação
2
08/12/2015
2
UFGD - LPIII 01 - Joinvile Batista Junior 3
JavaServer Faces : Framework para Aplicações Web
3
JSF : baseia-se nas troca de informações entre um navegador (web 
browser) e um servidor web (web server)
•elementos envolvidos na comunicação entre o navegador e o servidor web
•realizando uma requisição ao servidor web e recebendo resposta
Elementos envolvidos na comunicação entre o navegador e o servidor web
•página web: documento XHTML que descreve o conteúdo a ser mostrado 
no navegador
•documentos HTML contém hyperlinks para direcionar para diferentes 
páginas ou para outras partes da mesma página
UFGD - LPIII 01 - Joinvile Batista Junior 4
JavaServer Faces : Framework para Aplicações Web
4
Elementos envolvidos na comunicação entre o navegador e o servidor 
web
•quando o usuário clica em um hyperlink a página redicionada é 
carregada no navegador
• da mesma forma que quando a URL da página é digitada no campo 
de endereço do navegador
•computadores que executam software web Server
• disponibilizam recursos tais como
• páginas web, images, documentos PDF
• ou objetos que realizam tarefas (ex: buscas em bases de 
dados)
•HTTP (Hyper Text Transfer Protocol): protocolo usado para comunicação 
entre o navegador e o servidor webcom
08/12/2015
3
UFGD - LPIII 01 - Joinvile Batista Junior 5
JavaServer Faces : Framework para Aplicações Web
5
Elementos envolvidos na comunicação entre o navegador e o servidor 
web
•URL (Uniform Resource Locator): identificam as localizações de recursos 
na Internet
• http://www.deitel.com/books/dowlloads.html
• http: indica que o recurso será obtido a partir do uso do protocolo 
HTTP
• www.deitel.com: nome do servidor no qual o recurso reside 
(hostname: nome do hospedeiro)
• o nome do hospedeiro é traduzido para uma um endereço IP 
(Internet Protocol) por um servidor DNS (Domain Name System)
• DNS: mantém uma base de tradução hostname x endereço IP
• /books/: especifica o diretório virtual (por questões de segurança) 
do recurso no sistema de arquivos do servidor web
• o servidor web mapea o diretório virtual no diretório real
• downloads.html: especifica o recurso solicitado (documento HTML)
UFGD - LPIII 01 - Joinvile Batista Junior 6
Requisição ao Servidor Web e Resposta do Servidor
• o navegador realiza uma transação HTTP para recuperar e mostrar a 
página web a partir da URL informada pelo usuário
• o navegador solicita GET para o servidor web
• GET: método HTTP que indica que o cliente deseja obter um 
recurso do servidor web
• o servidor web responde OK ou Not found (não achado)
• servidor web envia um cabeçalho (HTTP header) informando o tipo 
de conteúdo que será enviado ao navegador
• text/html: texto cujo conteúdo indica como será visualizado
• text/plain: texto puro (sem interpretação de conteúdo)
• image/pjeg: imagem JPEG
• servidor envia o conteúdo do recurso solicitado (ex: 
downloads.html)
• navegador apresenta o documento HTML
66UFGD - LPIII 01 - Joinvile Batista Junior
08/12/2015
4
UFGD - LPIII 01 - Joinvile Batista Junior 7
Requisição ao Servidor Web e Resposta do Servidor
UFGD - LPIII 01 - Joinvile Batista Junior 8
Requisições HTTP mais comuns
• GET: utilizado para solicitar um recurso ao servidor web
• documento HTML, imagem ou pesquisa de resultados de termos 
submetidos pelo usuário a um motor de busca (search engine)
• envia dados para o servidor web: com lista de pares nome/valor 
(separados por: &)
• um par nome/valor: www.google.com/search?q=deitel
• páginas web retornadas pelo servidor web como requisições GET 
podem ser pelo navegador em cache para diminuir a comunicação 
entre ambos
• POST: utilizado para enviar dados para o servidor web
• enviar dados ou documentos para o servidor
• dados são enviados em uma mensagem HTTP, não como parte da 
URL
88UFGD - LPIII 01 - Joinvile Batista Junior
08/12/2015
5
UFGD - LPIII 01 - Joinvile Batista Junior 9
Arquitetura de Aplicações Multicamadas 
• camadas são grupamentos lógicos de funcionalidade
– camada do cliente: interface do usuário (tipicamente visualizada no 
navegador)
– camada intermediária
• lógica de controle: controla o direcionamento do serviço 
solicitado e as interações com a base de dados
• lógica de negócios: verificação da correção dos parâmetros e o 
processamento do serviço solicitado
• lógica de apresentação: formatação da página de resposta para 
retornar ao navegador
– camada de informação: mantém os dados da aplicação
• tipicamente armazena dados em um sistema gerenciador de 
base de dados relacional
• camadas podem estar localizadas no mesmo computador
– mas em geral residem em diferentes computadores 
99UFGD - LPIII 01 - Joinvile Batista Junior
UFGD - LPIII 01 - Joinvile Batista Junior 10
Arquitetura de Aplicações com 3 Camadas
08/12/2015
6
UFGD - LPIII 01 - Joinvile Batista Junior 11
Framework de Aplicações Web JSF
Executando um aplicação web
• quando uma aplicação é invocada no navegador
– o navegador requisita a página JSF default (padrão)da aplicação
• o servidor web recebe esta requisição e a repassa para o framework de 
aplicação web JSF processar
– este framework é disponível em qualquer servidor de aplicações 
compatível com Java EE 6
• ex: GlassFish
– ou em qualquer container compatível com JavaServer Faces 2.0
• ex: Apache Tomcat
• este framework inclui o Faces servlet
– um componente de software que executa em um servidor web 
– que processa cada página JSF requisitada
• retornando eventualmente uma resposta para o cliente
11
UFGD - LPIII 01 - Joinvile Batista Junior 12
Criando o projeto de aplicação web JSF no NetBeans
Escolher Projeto
• Categorias : selecione Java Web
• Projetos : selecione Aplicação Web
Nome e Localização
• Nome do Projeto : informar nome do projeto
• Localização do Projeto : informar diretório do projeto
Servidor e Definições
• Servidor : selecione Apache Tomcat ou GlassFish Server
• Versão do Java EE : Java EE 3 Web
Frameworks: JavaServer Faces
12
08/12/2015
7
UFGD - LPIII 01 - Joinvile Batista Junior 13
Aplicação 1 : Mostrando a Hora do Sistema
UFGD - LPIII 01 - Joinvile Batista Junior 14
Aplicação Web JSF
Uma aplicação web JSF contém pelo menos dois arquivos
• um documento JSF nomeado de forma padrão: index.xhtml
– Facelet: uma combinação de XHTML (Extensible HTML) e JSF
– o estilo da formatação é especificada em CSS (Cascading Style 
Sheets)
• e um arquivo de código fonte Java
– JavaBean: POJO (Plain Old Java Objects)
• não necessita extender nenhuma classe para criar um Bean
• página JDF inicial : arquivo index.xhtml (Páginas Web : WEB-INF)
14
08/12/2015
8
UFGD - LPIII 01 - Joinvile Batista Junior 15
Página JSF Inicial
• 1: declaração XML indicando que o documento JSF é expresso na 
sintaxe XML 1.0
• 2 e 3: declaração DOCTYPE indicando a versão do XHTML usada
• 4: raiz da árvore html
• Pode conter um ou mais atributosxmlns (espaço de nome utilizados)
• h : será usado para prefixar elementos da biblioteca JSF HTML
UFGD - LPIII 01 - Joinvile Batista Junior 16
Criando um Bean
Criar no diretório webtime a classe WebTimeBean
• selecionando a opção: Bean Gerenciado JSF
• e informando o diretório webtime a ser criado
– beans não devem ser criados no diretório default
Notações utilizadas no Bean
• @Named(value=“webTimeBean”)
– indica que o Bean está disponível para os componentes JSF
– nome do objeto: webTimeBean
• se não for especificado: o default será o nome da classe com a 
primeira letra minúscula
• @RequestScoped (escopo de Requisição: default)
– objeto existe requisição somente enquanto a requisição estiver 
sendo processada
16
08/12/2015
9
UFGD - LPIII 01 - Joinvile Batista Junior
17
Classe WebTimeBean
UFGD - LPIII 01 - Joinvile Batista Junior 18
Página JSF Inicial : Alteração para Mostrar Página a cada Minuto 
8: cabeçalho (h:head)
• título (title) : “Facelet Title”  “Web Time: a Simple Example”
• <meta http-equiv=“refresh” content=“60” />
9: corpo (h:body) : conteúdo da página a ser visualizado
• <h1>Current time on the web server: #{webTimeBean.time}</h1> 
08/12/2015
10
UFGD - LPIII 01 - Joinvile Batista Junior 19
Editando a Página Inicial JSF
h:head (cabeçalho)
• metadados opcionais
• <meta http-equiv=“refresh” content=“60” />
• mostrar a página JSF (refresh) a cada 60 s
• para informar o horário atualizado do sistema
• digite <meta e espaço e o NetBeans mostra opções de atributos
• após escolher http-equiv digite espaço para escolher atributo content
h:body (corpo)
• <h1>Current time on the web server: #{webTimeBean.time}</h1>
• mostrar o texto “Current time on the web server” no tamanho de fonte 
associado ao header nível 1 (h1)
• mostrar o valor da propriedade time do objeto webTimeBean da 
classe WebTimeBean (haverá chamada de: String getTime())
• ajuda do NetBeans: digitar “#{“ – digitar “.”
• framework JSF executa o método de leitura da propriedade time
19
UFGD - LPIII 01 - Joinvile Batista Junior 20
Página JSF Final
08/12/2015
11
UFGD - LPIII 01 - Joinvile Batista Junior 21
Executando a Aplicação
Execute o projeto
• o IDE NetBeans
– compila o código
– ativa a execução do servidor de aplicações (na primeira execução)
– implanta (deploy) a aplicação no servidor de aplicações
– ativa o navegador default
– requisita a página web default: index.xhtml
– no campo endereço do navegador aparecerá
• http://localhost:8080/WebTime/
– servidor de aplicações executa localmente: localhost
– porta do servidor: 8080
21
UFGD - LPIII 01 - Joinvile Batista Junior 22
Aplicação 2 : (a) Submetendo Dados preenchidos em um Formulário
08/12/2015
12
UFGD - LPIII 01 - Joinvile Batista Junior 23
Aplicação 2 : (b) Mensagens de Erro para Submissão de Formulário Vazio
UFGD - LPIII 01 - Joinvile Batista Junior 24
Aplicação 2 : (c) Mensagens de Erro para Submissão de Informação Inválida
08/12/2015
13
UFGD - LPIII 01 - Joinvile Batista Junior 25
Aplicação 2 : (d) Submissão Correta de Dados
UFGD - LPIII 01 - Joinvile Batista Junior 26
Classe WebComponentsBean 
• propriedades
– leitura/escrita: name, email, phone
• variável declarada
• par de métodos get e set associados
– somente leitura: result
• variável não é declarada
• somente método get associado
• método String getResult ()
– se os 3 campos e algum botão de rádio tiverem sido 
preenchidos
» formata e mostra informação
2626UFGD - LPIII 01 - Joinvile Batista Junior
08/12/2015
14
UFGD - LPIII 01 - Joinvile Batista Junior 27
Classe WebComponentsBean – 1/4
UFGD - LPIII 01 - Joinvile Batista Junior 28
Classe WebComponentsBean – 2/4
08/12/2015
15
UFGD - LPIII 01 - Joinvile Batista Junior 29
Classe WebComponentsBean – 3/4
UFGD - LPIII 01 - Joinvile Batista Junior 30
Classe WebComponentsBean – 4/4
08/12/2015
16
UFGD - LPIII 01 - Joinvile Batista Junior 31
Componentes JSF
Os componentes são mapeados pelo framework JSF
• para uma combinação de elementos XHTML e código JavaScript
h:form : formulário que engloba os componentes gráficos que interagem 
com o usuário
h:panelGrid : painel em grade (matriz) para organizar componentes gráficos 
em uma página
• columns : número de colunas do painel
– componentes são automaticamente colocados nas colunas do painel
• da esquerda para a direita
• na ordem que estão inseridos no painel
• style : formatação CSS do painel
– height : altura (em pixels) do painel
– width : largura (em pixels) do painel
UFGD - LPIII 01 - Joinvile Batista Junior 32
Componentes JSF
h:graphicImage : mostra uma imagem (GIF, JPG, etc) na página
– name : nome e extensão do arquivo com a imagem (ex: phone.png)
– library : diretório com os arquivo da imagem
• crie o subdiretório recursos (resources) no diretório Páginas Web
(Web Pages)
– crie o subdiretário imagens (images) para armazenar os 
arquivos de imagens
h:inputText : suporta a entrada de um texto pelo usuário
• id : identificador do componente
– para ser referenciado por outros componentes do formulário
– ou pelos Beans aplicação Web
32
08/12/2015
17
UFGD - LPIII 01 - Joinvile Batista Junior 33
Componentes JSF
h:selectOneMenu : suporta uma lista drop-down (equivalente a um 
ComboBox)
• id : identificador da lista
• f:selectItem : item selecionável da lista
– itemValue : valor retornado em função da seleção do item da lista
– itemLabel : string que será mostrado para representar o item da lista
h:outputLink : hyperlynk que redireciona para uma outra página
• value : URL da página ou arquivo xhtml da página JSF
– que será mostrada no navegador, em função da seleção do hyperlink
3333UFGD - LPIII 01 - Joinvile Batista Junior
UFGD - LPIII 01 - Joinvile Batista Junior 34
Componentes JSF
h:selectOneRadio : suporta um grupo de botões de rádio (somente o último 
botão selecionado é visualizado como selecionado)
• id : identificador do grupo de botões
• f:selectItem : item selecionável grupo de botões
– itemValue : valor retornado em função da seleção do item da grupo
– itemLabel : string que será mostrado para representar o item do grupo
h:commandButton : botão de comando que ativa a execução de uma ação
• value : string que será visualizado como nome do botão de comando
3434UFGD - LPIII 01 - Joinvile Batista Junior
08/12/2015
18
UFGD - LPIII 01 - Joinvile Batista Junior 35
Validadores JSF
f:validateLenght : valida a quantidade de caracteres do campo
• maximum : número máximo de caracteres
f:validateRegex : valida se a entrada combina com a expressão regular
• pattern : expressão regular de validação
f:validateDoubleRange : valida se a entrada pertence a um intervalo 
aceitável para double
f:validateLongRange : valida se a entrada pertence a um intervalo 
aceitável para long
f:validateRequired : valida se o campo contém um valor
f:validateBean : suporta validação customizada com a invocação do 
método de um Bean
35
UFGD - LPIII 01 - Joinvile Batista Junior 36
Componentes JSF do Cabeçalho
h:outputStylesheet : associa um folha de estilos (CSS) à página
• name : arquivo CSS
• library: diretório do arquivo CSS
Arquivo CSS referenciado pelo componente
• especifica regra que define a classe error (classe é prefixada por “.”)
• esta regra especifica que os elementos de texto ao qual a classe error 
é aplicada serão mostrados com cor vermelha
• regra CSS
.error
{
color:red;
}
36
08/12/2015
19
UFGD - LPIII 01 - Joinvile Batista Junior 37
Componentes JSF
h:inputText : suporta a entrada de um texto pelo usuário
• required : especifica se o campo é obrigatório (booleano)
• requiredMessage : mensagem que será mostrada se um campo 
obrigatório não for preenchido• validatorMessage : mensagem que será mostrada se um validador é 
associado ao campo e a informação digitada é inválida
• value : propriedade de um Bean na qual a informação será salva
• maxlength : cursor não avança a partir do número máximo de caracteres 
h:message : informa mensagens especificadas nas propriedades 
requiredMessage e validatorMessage do componente h:inputText
• for : nome do componente ao qual a mensagem é associada
• styleClass : nome da classe de estilo (definida no CSS) que será 
aplicada ao texto da mensagem
37
UFGD - LPIII 01 - Joinvile Batista Junior 38
Componentes JSF
h:outputText : mostra texto na página
• value : texto que será mostrado na página
– pode referenciar método de Bean: #{validationBean.result}
• escape : não foi definido (booleano)
h:commanButton : como ação default, submete o conteúdo dos campos do 
formulário para o servidor
38
08/12/2015
20
UFGD - LPIII 01 - Joinvile Batista Junior 39
Expressão Regular
Validação de email : \w+([-+.’]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
• notação
– \. : denota o próprio caracter .
• e não sua função de representar qualquer caracter
– [] : lista de caracteres opcionais
– +: uma ou vezes 
– * : zero ou mais vezes
– \w : [a-zA-Z_0-9] --- um caracter alfa numérico (ou “_”)
• exemplos válidos
– bob’s-personal.email@white.email.com
– bob-white@my-email.com
– bob.white@email.com
39
UFGD - LPIII 01 - Joinvile Batista Junior 40
Expressão Regular
Validação de número telefônico :
“((\(\d{2}\)?)|(\d{2}-))?(\d{5}|\d{4})-\d{4}”
• notação adicional
– \d{n} = n dígitos
– ? : uma vez ou nenhuma
– \( : denota o próprio caracter (
• e não sua função de agrupar elementos para aplicar 
repetições: +, *, ?
• exemplos válidos
– (67) 1234-5789
– 67-1234-5789
– 1234-5789
40
08/12/2015
21
UFGD - LPIII 01 - Joinvile Batista Junior 41
Formatação utilizada no método getResult()
• <p atributos>texto</p>parágrafo
• style=\”propriedades\”  definição de estilo (utilizada no parágrafo)
– “ precisa ser prefixado por \
• background-color:yellow  cor de fundo amarela
• width:200px  largura de 200 pixels
• <br/>  pula linha
41
41
UFGD - LPIII 01 - Joinvile Batista Junior
UFGD - LPIII 01 - Joinvile Batista Junior 42
Página JSF – 1/4
08/12/2015
22
UFGD - LPIII 01 - Joinvile Batista Junior 43
Página JSF – 2/4
UFGD - LPIII 01 - Joinvile Batista Junior 44
Página JSF – 3/4
08/12/2015
23
UFGD - LPIII 01 - Joinvile Batista Junior 45
Página JSF – 4/4
UFGD - LPIII 01 - Joinvile Batista Junior 46
Aplicação 3 : Salvando Preferências do Usuário – (a) Primeira Submissão
08/12/2015
24
UFGD - LPIII 01 - Joinvile Batista Junior 47
Aplicação 3 : (b) Segunda Submissão
UFGD - LPIII 01 - Joinvile Batista Junior 48
Aplicação 3 : (c) Seleção de Link para Recomendações
08/12/2015
25
UFGD - LPIII 01 - Joinvile Batista Junior 49
Aplicação 3 : (d) Visualizando as Recomendações
UFGD - LPIII 01 - Joinvile Batista Junior 50
Personalização
Aplicações Web são customizadas em função das preferências do cliente
• movimentos do cliente na Web são armazenados para posteriormente 
influenciar a personalização de informações que serão mostradas para o 
cliente
• websites mais sofisticados permitem que o cliente customize suas home 
pages para suas necessidades e preferências individuais
Suporte técnico
• o protocolo HTTP não armazena estados : necessários para reconhecer o 
cliente nas próximas seções de uso do site
– quando o usuário fecha o navegador a sessão desaparece
• técnicas de rastreamento de sessão
– cookie : dados armazenados por navegadores
– session Bean: objeto do Bean persiste durante a sessão de navegação
• demarcados pela notação: @SessionScoped
– em substituição ao escopo default: @RequestScoped
50UFGD - LPIII 01 - Joinvile Batista Junior
08/12/2015
26
UFGD - LPIII 01 - Joinvile Batista Junior 51
Rastramento de Sessão utilizando Cookies 
Utilizando Cookies para armazenando informações sobre o usuário
• a primeira vez que o usuário visita o website o navegador do usuário 
recebe um cookie do servidor
• este cookie é reenviado para o servidor, cada vez que o usuário 
revisita o website
• a informação dos cookies é utilizada para identificar o usuário e suas 
preferências
• o tempo de expiração atribuído ao cookie define seu tempo de 
armazenamento no navegador do usuário
– por default o tempo de expiração é a sessão
51UFGD - LPIII 01 - Joinvile Batista Junior
UFGD - LPIII 01 - Joinvile Batista Junior 52
Rastramento de Sessão utilizando Session Beans 
Utilizando Session Beans para armazenando informações sobre o 
usuário
• session Bean
– demarcados pela notação: @SessionScoped
• objeto do Bean persiste durante a sessão de navegação
– por default, a sessão expira após 30 minutos de 
inatividade
» ou quando o usuário fecha o navegador que iniciou a 
sessão
• todas as páginas da aplicação acessam as informações 
armazenadas nas variáveis do objeto do Bean durante a 
sessão
• servidor mantém uma cópia de objeto do Session Bean para 
cada usuário 
– em substituição ao escopo default: @RequestScoped
• objeto do Bean persiste somente durante a requisição
52UFGD - LPIII 01 - Joinvile Batista Junior
08/12/2015
27
UFGD - LPIII 01 - Joinvile Batista Junior 53
Session Bean da Aplicação
• utiliza a coleção template java.util.HashMap<T1, T2> para definir 
constante (final) estática do tipo HashMap<String, String>
– coleção que armazena pares: chave e valor
• chave: utilizada para indexar valor com função de hash
• valor: elemento indexado pela chave
– métodos
• T2 get (T1 chave): retorna valor indexado pela chave
• T2 put (T1 chave, T2 valor): insere o par na coleção
– retorna valor anterior associado à chave 
» ou null: se a chave ainda não está na coleção
• static { ... } : código de inicialização em variáveis estáticas
53UFGD - LPIII 01 - Joinvile Batista Junior
UFGD - LPIII 01 - Joinvile Batista Junior 54
Session Bean da Aplicação
• utiliza a coleção template java.util.TreeSet<T> para definir variável do 
tipo TreeSet<String>
– coleção que armazena elementos
• operações básicas (add, remove, contains) executam com log(n)
– métodos
• int size(): retorna o número de elementos da coleção
• boolean add (T element): armazena elemento no conjunto
– elemento já contido no conjunto não é armazenado: retorna 
false
• T[ ] toArray (T[ ] array): converte a coleção para uma array
– para array especificado no parâmetro: se ele é grande o 
suficiente
– retorna novo array: se array do parâmetro não é suficiente
54UFGD - LPIII 01 - Joinvile Batista Junior
08/12/2015
28
UFGD - LPIII 01 - Joinvile Batista Junior 55
Classe SelectionsBean – 1/2
UFGD - LPIII 01 - Joinvile Batista Junior 56
Classe SelectionsBean – 2/2
08/12/2015
29
UFGD - LPIII 01 - Joinvile Batista Junior 57
Componentes JSF
h:selectOneRadio : suporta um grupo de botões de rádio (somente o 
último botão selecionado é visualizado como selecionado)
• value : propriedade de um Bean na qual a informação será salva
h:outputLink : hyperlynk que redireciona para uma outra página
• value : arquivo xhtml da página JSF para a qual será redirecionada
– quando somente o nome do arquivo é especificado
• o navegador assume que a página está no mesmo servidor e na 
mesma localização da página index.xhtml
5757UFGD - LPIII 01 - Joinvile Batista Junior
UFGD - LPIII 01 - Joinvile Batista Junior 58
Página JSF Padrão (Submissão de Dados)
08/12/2015
30
UFGD - LPIII 01 - Joinvile Batista Junior 59
Formatação da Página com Componente ui:repeat
• ui  prefixa componentes da biblioteca JSF facelets
• <ul>itens da lista</ul> (unordered list)
– lista não ordenada: itensda lista mostrados com bullets
• ui:repeat loop sobre uma coleção (array, List, java.sql.ResultSet, Object)
– value expressão que neste caso retornará: String[ ]
– var : variável para qual cada item da coleção é assinalado
• pode ser usada para invocar métodos ou alterar propriedade (Bean)
• <li>texto</li> (list item)  item da lista utiliza a variável retornada no loop
5959UFGD - LPIII 01 - Joinvile Batista Junior
UFGD - LPIII 01 - Joinvile Batista Junior 60
Página JSF Adicional (Visualização das Recomendações)
08/12/2015
31
UFGD - LPIII 01 - Joinvile Batista Junior 61
Aplicação 4 : (a) Tabela mostrada na execução da Aplicação
61
UFGD - LPIII 01 - Joinvile Batista Junior 62
Aplicação 4 : (b) Formulário para Adicionar uma Entrada
62
08/12/2015
32
UFGD - LPIII 01 - Joinvile Batista Junior 63
Aplicação 4 : (c) Tabela Atualizada com a Entrada Adicionada
63
UFGD - LPIII 01 - Joinvile Batista Junior 64
Comunicação entre o servidor e o BD via Pool de Conexões
• A maneira mais eficiente de implementar a comunicação entre o servidor e 
o banco de dados é configurar um pool de conexões no BD
– a criação de uma nova conexão para cada solicitação do cliente pode 
ser muito demorada
• especialmente em aplicações que recebem continuamente um 
grande número de solicitações
• Uma solução eficiente é a criação de várias conexões que são mantidas 
em um pool de conexões
– todas as solicitações de entrada que requerem acesso à camada de 
dados da aplicação usam uma conexão já criada do pool
– quando uma solicitação é concluída, a conexão é fechada, retornando 
ao pool
• O servidor GlassFish contém bibliotecas de DBCP (Database Connection 
Pooling) que oferecem a funcionalidade de pool de conexões de forma 
transparente
– é necessário configurar uma fonte de dados JDBC no servidor para 
que a aplicação possa utilizar o pool de conexões
64UFGD - LPIII 01 - Joinvile Batista Junior
08/12/2015
33
UFGD - LPIII 01 - Joinvile Batista Junior 65
Ações para Criar a Comunicação Servidor/BD na Aplicação
• Para criar a comunicação entre o servidor GlassFish e o BD MySQL, na 
aplicação AddressBook, é necessário:
– criar a base de dados addressbook da aplicação no servidor MySQL
• e executar script SQL para criar a tabela Address e inserir alguns 
registros nesta tabela
– utilizar o Assistente de Recursos JDBC para criar o pool de conexões 
addressPool vinculado à base de dados addressbook
• após a criação: verificar que o registro dos recursos (base de dados 
e do pool de conexões) foi realizado no servidor GlassFish
– checar definições no Descritor de Recursos do GlassFish
– implantar projeto no servidor e localizar os recursos nos Serviços 
do GlassFish
– instruir a aplicação para utilizar a base de dados
• criando uma entrada no Descritor de Implantação web.xml da 
aplicação
– e verificando a inclusão da referência no recurso no Descritor
– garantir que o driver do BD (mySQL Connector/J JDBC) esteja acessível 
pelo servidor
65UFGD - LPIII 01 - Joinvile Batista Junior
UFGD - LPIII 01 - Joinvile Batista Junior 66
Criação da Base de Dados da Aplicação
66
• criar a base de dados addressbook no Servidor MySQL
08/12/2015
34
UFGD - LPIII 01 - Joinvile Batista Junior 67
Preenchimento da Base de Dados da Aplicação
67
• criar a tabela Addresses no BD
• inserir registros na tabela
UFGD - LPIII 01 - Joinvile Batista Junior 68
Seleção do Assistente de Recursos JDBC
68
• Projeto AddressBook  Novo Arquivo  GlassFish  Recurso JDBC
08/12/2015
35
UFGD - LPIII 01 - Joinvile Batista Junior 69
Assistente de Recursos JDBC – Etapa 2
69
• assinalar : Criar Novo Pool de Conexões JDBC
• preencher : Nome JNDI = jdbc/addressbook
UFGD - LPIII 01 - Joinvile Batista Junior 70
Assistente de Recursos JDBC – Etapa 4
70
• preencher : Nome do pool de conexão JDBC = addressPool
• selecionar URL da base de dados : jdbc:mysql://localhost:3306/addressbook
08/12/2015
36
UFGD - LPIII 01 - Joinvile Batista Junior 71
Assistente de Recursos JDBC – Etapa 5
71
• NetBeans extrai : Nome da classe do datasource -- Propriedades
UFGD - LPIII 01 - Joinvile Batista Junior 72
Verificação da Definição dos Recursos no Descritor de Recursos do GlassFish 
72
• Projeto AddressBook  Recursos do Servidor  glassfish-resources.xml
• observar definição dos recursos : base de dados e Pool de Conexões 
08/12/2015
37
UFGD - LPIII 01 - Joinvile Batista Junior 73
Confirmação : Registro da Base de Dados e Pool de Conexões
• Para confirmar se uma nova fonte de dados e um pool de conexões 
estão realmente registrados no GlassFish Server
– implantar o projeto no servidor
– e localizar os recursos na janela Serviços do NetBeans
• Implantação do projeto no Servidor GlassFish
– Projeto AddressBook  botão direito do mouse  Implantar
• o servidor será iniciado
– caso não esteja em execução
• e o projeto será compilado e implantado no servidor
• Confirmação da criação do registro da Base de Dados e do Pool de 
Conexões (ver próximo slide)
UFGD - LPIII 01 - Joinvile Batista Junior 74
Verificação da Criação do Recurso JDBC e do Pool de Conexões
74
• Serviços  Servidores  GlassFish Server  Recursos  JDBC 
Recursos JDBC - Pools de Conexões
08/12/2015
38
UFGD - LPIII 01 - Joinvile Batista Junior 75
Fazendo Referência à Base de Dados da Aplicação
• É necessário fazer referência ao recurso JDBC que foi configurado na 
aplicação Web
– criar uma entrada no descritor de implantação web.xml da aplicação
• Os descritores de implantação são arquivos XML que contêm 
informações que descrevem como uma aplicação deve ser implantada 
em um ambiente específico
– são usados normalmente para especificar
• os parâmetros de contexto da aplicação
• os padrões de comportamento
• as configurações de segurança
• os mapeamentos para servlets, filtros e listeners
UFGD - LPIII 01 - Joinvile Batista Junior 76
Referenciando Recurso da BD no Descritor de Implantação web.xml 
76
• Projeto AddressBook  Páginas Web  WEB-INF  web.xml 
Referências  Adicionar (em Referências de Recursos)  Nome do 
recurso = jdbc/addressbook
08/12/2015
39
UFGD - LPIII 01 - Joinvile Batista Junior 77
Inclusão da Referência ao Recurso
77
• referência ao recurso: jdbc/addressbook
UFGD - LPIII 01 - Joinvile Batista Junior 78
Verificação da Inclusão da Referência no Recurso no Descritor web.xml
78
08/12/2015
40
UFGD - LPIII 01 - Joinvile Batista Junior 79
Adicionando Driver do BD no Servidor GlassFish
• A adição do arquivo JAR do driver do banco de dados é necessária para 
a comunição entre o servidor e o BD.
– Normalmente, seria necessário localizar o diretório de instalação do 
driver do banco de dados
• e copiar o arquivo mysql-connector-java-5.1.6-bin.jar do diretório 
raiz do driver na pasta da biblioteca do servidor 
– No entanto, o gerenciamento de servidor do NetBeans é capaz de 
detectar, na implantação, se o arquivo JAR foi adicionado
• caso não tenha sido: ele o adiciona automaticamente
• Para confimar, verifique a ativação da opção de implantação do driver
JDBC  ver próximo slide
• Se a opção estiver ativada, ela iniciará uma verificação para determinar 
se serão necessários drivers para as aplicações implantadas do servidor
– no caso do MySQL, se o driver for necessário e não for encontrado
• o driver incorporado do NetBeans será implantado no local 
adequado do servidor
UFGD - LPIII 01 - Joinvile Batista Junior 80
Verificando Domínio criado no Servidor
80
• Ferramentas  Servidores  GlassFish Server  propriedades
• anotar o nome do domínio (neste caso: domain1)
08/12/2015
41
UFGD - LPIII 01 - Joinvile Batista Junior 81
Verificando Existência do Driver doConector MySQL no Servidor GlassFish
81
• conector MySQL é localizado no domínio criado no servidor 
• neste caso: domain1
UFGD - LPIII 01 - Joinvile Batista Junior 82
Bean Gerenciado: AddressBean
Injetando o DataSource na classe AddressBean
• a classe javax.sql.DataSource (package) é utilizada por uma aplicação 
web application para obter uma conexão com uma base de dados
• Para injetar um objeto DataSource na classe AddressBean para 
manipular a base de dados: addressbook
• Inserir Código – Utilizar banco de dados – Adicionar
• Nome da referência: addressDataSource
• Fonte de dados do projeto: jdbc/addressbook
• será inserido o seguinte código no Bean:
@Resource(name = "addressDataSource")
private DataSource addressDataSource;
• este código ativa o servidor a esconder toda a complexidade dos 
detalhes de localizar o pool de conexões que foi criado para interagir 
com a base de dados addressbook 
• o servidor cria um DataSource configurado para usar o pool de 
conexões e assinala um objeto DataSource para a variável 
declarada no Bean
• basta então obter uma conexão (Connection) para interagir com a 
base de dados
08/12/2015
42
UFGD - LPIII 01 - Joinvile Batista Junior 83
Verificando fonte de dados no WEB-INF/glassfish-web.xml
UFGD - LPIII 01 - Joinvile Batista Junior 84
Bean Gerenciado: AddressBean
Método getAddresses
• cria uma conexão (Connection) a partir da fonte de dados (DataSource)
• cria uma declaração parametrizada (PreparedStatement)
• utilizando um comando SQL para ler as colunas da tabela Addresses
• ordenando por sobrenome e nome
• cria um objeto para receber um conjunto de linhas de uma tabela 
(CachedRowSet)
• carrega as linhas da tabela, retornadas pela execução da declaração 
parametrizada (PreparedStatement), em um objeto da classe 
CachedRowSetImpl
• através do método populate que recebe como argumento o resultado 
da consulta à BD
• esta implementação suporta o retorno de um ResultSet 
correspondente à consulta SQL feita na BD 
08/12/2015
43
UFGD - LPIII 01 - Joinvile Batista Junior 85
Bean Gerenciado: AddressBean
Método save
• cria uma conexão (Connection) a partir da fonte de dados (DataSource)
• cria uma declaração parametrizada (PreparedStatement)
• utilizando um comando SQL para inserir um registro na tabela 
Addresses
• no qual os valores são parâmetros a serem definidos
• associa a cada parâmetro, através da sua ordem na declaração 
parametrizada, o valor de uma variável do Bean
• nome, sobrenome, rua, cidade, estado, CEP
• executa a declaração parametrizada
• retorna o string “index” para redirecionar para a página: index.xhtml
UFGD - LPIII 01 - Joinvile Batista Junior 86
Classe AddressBean – 1/5
08/12/2015
44
UFGD - LPIII 01 - Joinvile Batista Junior 87
Classe AddressBean – 2/5
UFGD - LPIII 01 - Joinvile Batista Junior 88
Classe AddressBean – 3/5
08/12/2015
45
UFGD - LPIII 01 - Joinvile Batista Junior 89
Classe AddressBean – 4/5
UFGD - LPIII 01 - Joinvile Batista Junior 90
Classe AddressBean – 5/5
08/12/2015
46
UFGD - LPIII 01 - Joinvile Batista Junior 91
Componentes JSF
h:commandButton : botão de comando que ativa a execução de uma ação
• action: tratamento do evento a ser realizado
• neste caso: nome de uma página da aplicação
– causa o redirecionamento para esta página
UFGD - LPIII 01 - Joinvile Batista Junior 92
Componentes JSF
h:dataTable : mostra dados em formato tabular
• value: coleção de dados que será mostrada na tabela
• var: variável para a qual será assinalado cada elemento da coleção
– neste caso receberá, a cada iteração do dataTable para 
preenchimento de suas linhas, uma linha da tabela do BD 
correspondente a uma iteração no ResultSet retornado
• rowClasses: classes de estilo das linhas da tabela, definidas no arquivo 
especificado no cabeçalho pelo componente h:outputStylesheet
– o atributo columnClasses (não utilizado neste exemplo) trabalha de 
forma similar para as colunas da tabela
• headerClass : classe de estilo do cabeçalho da coluna (onde aparecem 
os nomes das colunas)
– o atributo footerClass (não utilizado neste exemplo) trabalha de 
forma similar para o rodapé da tabela
• styleClass: classe de estilo para toda a tabela com um todo
• cellpadding: número de pixels de cada célula da tabela
• cellspacing: número de pixels de espaçamento entre células da tabela
08/12/2015
47
UFGD - LPIII 01 - Joinvile Batista Junior 93
Componentes JSF
h:column: define cada coluna da tabela 
f:facet: neste caso, utilizado para definir o cabeçalho da coluna
• name: utilizado como “header” para designar o cabeçalho da tabela
– pode ser utilizado como “footer”, para definir o nome rodapé da 
coluna
UFGD - LPIII 01 - Joinvile Batista Junior 94
Classes de Estilo do Arquivo style.css 
/* estilo das mensagens de erro */
.error {color:red;}
/* estilo do cabeçalho da coluna da tabela*/
.header {background-color: steelblue; color: white; text-align: left;}
/* estilo das linhas impares da tabela*/
.oddRows {padding-left: 5px; background-color: lightcyan;}
/* estilo das linhas pares da tabela*/
.evenRows {padding-left: 5px; background-color: lightskyblue;}
/* estilo da tabela */
.table {width: 750px;}
08/12/2015
48
UFGD - LPIII 01 - Joinvile Batista Junior 95
Página JSF Padrão – 1/3
UFGD - LPIII 01 - Joinvile Batista Junior 96
Página JSF Padrão – 2/3
08/12/2015
49
UFGD - LPIII 01 - Joinvile Batista Junior 97
Página JSF Padrão – 3/3
UFGD - LPIII 01 - Joinvile Batista Junior 98
Componentes JSF
h:commandButton : botão de comando que ativa a execução de uma ação
• action: tratamento do evento a ser realizado
• neste caso: nome de método do Bean a ser executado
08/12/2015
50
UFGD - LPIII 01 - Joinvile Batista Junior 99
Página JSF Adicional – 1/3
UFGD - LPIII 01 - Joinvile Batista Junior 100
Página JSF Adicional – 2/3
08/12/2015
51
UFGD - LPIII 01 - Joinvile Batista Junior 101
Página JSF Adicional – 3/3
UFGD - LPIII 01 - Joinvile Batista Junior 102
Compatibilidade com o AJAX
Ajax – Asynchronous JavaScript and XML
• tecnologias para desenvolver aplicações web dinâmicas (ex: GoogleMaps)
• cria um separação entre a interação do usuário de um aplicativo e sua 
interação com o servidor
– permitindo que ambos executem paralelamente
• realiza chamadas assíncronas ao servidor para trocar pequenas 
quantidades de dados a cada chamada
– onde uma página inteira seria enviada e recarregada a cada iteração 
do usuário em uma página Web
• somente partes necessárias da página são enviadas e 
recarregadas: poupando tempo e recursos
• aplicativos Web executam em velocidades que se aproximam dos 
aplicativos desktop
– a plataforma de aplicativos recomendada está começando a mudar de 
desktop para Web
– próxima fase de crescimento para empresas de Internet
• código fonte aberto abundante, computadores baratos, crescente 
largura de banda
102
08/12/2015
52
UFGD - LPIII 01 - Joinvile Batista Junior 103
Aplicativos Web Tradicionais
• cenário
– usuário preenche os campos do formulário
– o navegador envia uma solicitação com o formulário ao servidor
– o servidor processa a solicitação e responde com a página que o 
navegador exibirá
• processamento síncrono
– enquanto o servidor estiver processando a solicitação
– o usuário não pode interagir com a aplicação
103
UFGD - LPIII 01 - Joinvile Batista Junior 104
Aplicação Web Clássica : Recarrega a Página a Toda Iteração do Usuário
104
08/12/2015
53
UFGD - LPIII 01 - Joinvile Batista Junior 105
Aplicativos Web baseados em Ajax
• camada entre o cliente e o servidor para gerenciar a comunicação 
assíncrona entre ambos
– o cliente cria um objeto XMLHttpRequest para gerenciaruma 
solicitação
• cenário
– usuário preenche os campos do formulário
– objeto XMLHttpRequest envia solicitação ao servidor
– o servidor processa a solicitação e responde somente com os 
dados necessários para atualizar a página
– objeto XMLHttpRequest chama uma função do lado do cliente para 
processar a resposta e atualizar a página da aplicação
• processamento assíncrono
– o usuário pode interagir com a aplicação enquanto servidor 
processa
• gerando outras solicitações que serão tratadas 
concorrentemente pelo servidor
UFGD - LPIII 01 - Joinvile Batista Junior 106
Aplicação ativada pelo Ajax : Iteração Assíncrona com o Servidor 
106
08/12/2015
54
UFGD - LPIII 01 - Joinvile Batista Junior 107
Classe AjaxValidationBean – 1/2
UFGD - LPIII 01 - Joinvile Batista Junior 108
Classe AjaxValidationBean – 2/2
08/12/2015
55
UFGD - LPIII 01 - Joinvile Batista Junior 109
Aplicação 5 : (a) Submetendo Dados preenchidos em um Formulário
UFGD - LPIII 01 - Joinvile Batista Junior 110
Aplicação 5 : (b) Mensagens de Erro para Submissão de Formulário Vazio
08/12/2015
56
UFGD - LPIII 01 - Joinvile Batista Junior 111
Aplicação 5 : (c) Mensagens de Erro para Submissão de Informação Inválida
UFGD - LPIII 01 - Joinvile Batista Junior 112
Aplicação 5 : (d) Submissão bem sucedida
08/12/2015
57
UFGD - LPIII 01 - Joinvile Batista Junior 113
Aplicação 5 é uma Adaptação da Aplicação 2 
• A classe WebComponentsBean da aplicação 2 permanece inalterada
• As alterações na página index.xhtml
– Os componentes JSF que fazem parte de uma solicitação AJAX e 
da página parcial que será atualizada necessitam ser identicados 
por um atributo identificador
– Portanto, são acrescentados atributos id
• aos componentes h:message
• e ao componente h:outputText que sucede o componente 
h:commandButton
113
UFGD - LPIII 01 - Joinvile Batista Junior 114
Componentes JSF
f:ajax: intercepta a submissão do formulário quando o usuário clica no botão 
de comando (interno ao componente h:commandButton) e ativa uma 
solicitação AJAX
• execute: lista os identificadores dos componentes cujos valores serão 
submetidos ao servidor na solicitação AJAX
• render: lista os identificadores dos componentes que serão atualizados 
na atualização parcial
08/12/2015
58
UFGD - LPIII 01 - Joinvile Batista Junior 115
Página JSF – 1/3
UFGD - LPIII 01 - Joinvile Batista Junior 116
Página JSF – 2/3
08/12/2015
59
UFGD - LPIII 01 - Joinvile Batista Junior 117
Página JSF – 3/3