Projeto de Interfaces para Aplicações Web405096 PDF

PROJETO DE INTERFACES PARA APLICAÇÕES WEB
JAVA
CURSO: ESPECIALIZAÇÃO EM PLATAFORMA DE DESENVOLVIMENTO WEB – EAD
Disciplinas:
Desenvolvimento de ASP.Net - Prof. Dr. Rodrigo de Oliveira Plotze

Desenvolvimento de Aplicações Web com Java – Prof. Dr. Rodrigo de Oliveira Plotze
Didática do Ensino Superior – Profª. Drª. Noeli Prestes Padilha Rivas, Profª. Ms. Karina de Melo Conte e
Profª. Ms. Hilda Maria Gonçalves da Silva
Metodologia da Pesquisa Científica – Prof. Ms. Carlos Alberto Marinheiro
Projeto de Interfaces para Aplicações Web utilizando Web Frameworks .Net - Prof. Dr. Rodrigo de Oliveira
Plotze
Projeto de Interfaces para Aplicações Web Java – Prof. Dr. Rodrigo de Oliveira Plotze
Web Semântica – Prof. Ms. Alexandre Leite Rangel
Meu nome é Rodrigo de Oliveira Plotze. Sou doutor em Ciência da Computação

e Matemática Computacional pelo Instituto de Ciências Matemáticas e de
Computação (ICMC-USP/São Carlos). Além disso, desenvolvo pesquisas na
área de Visão Computacional Aplicada à Biologia e à Medicina, na qual
tenho diversos trabalhos científicos publicados em periódicos nacionais e
internacionais. Atuo como professor universitário nos cursos de graduação
em Ciência da Computação e em Sistemas de Informação da Universidade
Paulista (UNIP) e como tutor no curso de graduação em Sistemas de
Informação da Universidade Federal de São Carlos (UAB-UFSCar). Também
atuo como professor no Centro Universitário Claretiano em cursos de
graduação presencial e a distância e nos cursos de Pós-graduação em Java
e em .NET. Trabalho, ativamente, com pesquisa e ensino de tecnologias
para desenvolvimento web tanto com a plataforma Java quanto com o
framework .NET da Microsoft.
E-mail: rodrigoplotze@gmail.com
Prof. Dr. Rodrigo de Oliveira Plotze
PROJETO DE INTERFACES PARA APLICAÇÕES WEB

JAVA
Guia de Disciplina
Caderno de Referência de Conteúdo
© Ação Educacional Claretiana, 2010 – Batatais (SP)
Trabalho realizado pelo Centro Universitário Claretiano de Batatais (SP)
Curso: Especialização em Plataforma de Desenvolvimento Web

Disciplina: Projeto de Interfaces para Aplicações Web Java
Versão: ago./2012
Reitor: Prof. Dr. Pe. Sérgio Ibanor Piva

Vice-Reitor: Prof. Ms. Pe. Ronaldo Mazula
Pró-Reitor Administrativo: Pe. Luiz Claudemir Botteon
Pró-Reitor de Extensão e Ação Comunitária: Prof. Ms. Pe. Ronaldo Mazula
Pró-Reitor Acadêmico: Prof. Ms. Luís Cláudio de Almeida
Coordenador Geral de EAD: Prof. Artieres Estevão Romeiro
Coordenador do Curso de Especialização em Plataforma de Desenvolvimento Web: Prof. Luciano

Bérgamo
Coordenador de Material Didático Mediacional: J. Alves
Preparação Revisão
Aline de Fátima Guedes Felipe Aleixo
Camila Maria Nardi Matos Marcela Fonseca Ferreira
Carolina de Andrade Baviera Rodrigo Ferreira Daverni
Cátia Aparecida Ribeiro Talita Cristina Bartolomeu
Dandara Louise Vieira Matavelli Vanessa Vergani Machado
Elaine Aparecida de Lima Moraes
Josiane Marchiori Martins Projeto gráfico, diagramação e capa
Lidiane Maria Magalini Eduardo de Oliveira Azevedo
Luciana A. Mani Adami Joice Cristina Micai
Luciana dos Santos Sançana de Melo Lúcia Maria de Sousa Ferrão
Patrícia Alves Veronez Montera Luis Antônio Guimarães Toloi
Rita Cristina Bartolomeu Raphael Fantacini de Oliveira
Rosemeire Cristina Astolphi Buzzelli Renato de Oliveira Violin
Simone Rodrigues de Oliveira Tamires Botta Murakami de Souza
Viviane Fernanda Zanotin Wagner Segato dos Santos
Todos os direitos reservados. É proibida a reprodução, a transmissão total ou parcial

por qualquer forma e/ou qualquer meio (eletrônico ou mecânico, incluindo fotocópia,
gravação e distribuição na web), ou o arquivamento em qualquer sistema de banco
de dados sem a permissão por escrito do autor e da Ação Educacional Claretiana.
Centro Universitário Claretiano

Rua Dom Bosco, 466 - Bairro: Castelo
Batatais SP – CEP 14.300-000
cead@claretiano.edu.br
Fone: (16) 3660-1777 – Fax: (16) 3660-1780 – 0800 941 0006
www.claretiano.edu.br
Sumário
GUIA DE DISCIPLINA
1 APRESENTAÇÃO ...............................................................................................7
2 DADOS GERAIS DA DISCIPLINA .........................................................................7
3 CONSIDERAÇÕES .............................................................................................8
4 BIBLIOGRAFIA BÁSICA ......................................................................................9
5 BIBLIOGRAFIA COMPLEMENTAR ..........................................................................9
CADERNO DE REFERÊNCIA DE CONTEÚDO

APRESENTAÇÃO.............................................................................................11
UNIDADE 1 – INTRODUÇÃO AO PROJETO DE INTERFACES PARA APLICAÇÕES WEB

1 INTRODUÇÃO ..................................................................................................14
2 DESENVOLVIMENTO DE SOFTWARE E DE INTERFACES GRÁFICAS ...........................14
3 FRAMEWORKS PARA DESENVOLVIMENTO WEB .....................................................20
4 CONSIDERAÇÕES .............................................................................................21
5 SUGESTÕES BIBLIOGRÁFICAS ...........................................................................22
6 E-REFERÊNCIAS ...............................................................................................22
UNIDADE 2 – JAVASERVER FACES (JSF) – INTRODUÇÃO, ARQUITETURA,

COMPONENTES E VALIDAÇÃO
1 INTRODUÇÃO ..................................................................................................24
2 O FRAMEWORK JSF ...........................................................................................24
3 COMPONENTES ................................................................................................25
4 EXEMPLO PRÁTICO E DETALHADO DE UMA APLICAÇÃO COM JSF .............................27
5 OUTROS COMPONENTES PARA CRIAÇÃO DE INTERFACES ......................................37
6 VALIDAÇÃO DE DADOS .....................................................................................45
7 CONSIDERAÇÕES .............................................................................................54
9 REFERÊNCIAS BIBLIOGRÁFICAS .........................................................................54
10 E-REFERÊNCIAS ............................................................................................54
UNIDADE 3 – JAVASERVER FACES (JSF) – INTEGRAÇÃO COM BANCO DE DADOS

1 INTRODUÇÃO ..................................................................................................56
2 UTILIZANDO JSF COM JDBC ...............................................................................56
3 UTILIZANDO JSF COM MAPEAMENTO OBJETO-RELACIONAL (HIBERNATE) ................71
4 CONSIDERAÇÕES .............................................................................................76
6 E-REFERÊNCIAS ...............................................................................................77
UNIDADE 4 – JAVASERVER FACES (JSF) E SERVIÇOS WEB

1 INTRODUÇÃO ..................................................................................................80
2 SERVIÇOS WEB ................................................................................................80
3 CONSTRUINDO E PUBLICANDO O SERVIÇO “BUSCA CEP” ......................................81
4 CONSUMINDO UM SERVIÇO WEB POR MEIO DE UMA APLICAÇÃO COM JSF ..............85
Sumário
5 CONSUMINDO UM SERVIÇO WEB POR MEIO DE UMA APLICAÇÃO DESKTOP..............89
6 CONSIDERAÇÕES .............................................................................................92
8 REFERÊNCIAS BIBLIOGRÁFICAS .........................................................................92
UNIDADE 5 – JAVASERVER FACES (JSF) E AJAX

1 INTRODUÇÃO ..................................................................................................94
2 INSTALANDO E CONFIGURANDO O FRAMEWORK ICEFACES ....................................94
3 CONSTRUINDO UMA APLICAÇÃO WEB COM O FRAMEWORK ICEFACES .....................95
4 CONSIDERAÇÕES .............................................................................................105
6 E-REFERÊNCIAS ...............................................................................................106
7 CONSIDERAÇÕES FINAIS...................................................................................106
1 APRESENTAÇÃO
Seja bem-vindo(a) ao estudo da disciplina Projeto de Interfaces para Aplicações
Web jAVA, que faz parte do curso de Especialização em Plataforma de Desenvolvimento
Web.
Inicialmente, vamos estudar a evolução das tecnologias para construção de

interfaces gráficas desde os ambientes de desenvolvimento integrados para criação de
aplicações desktop até os frameworks para desenvolvimento de aplicações Web.
Em seguida, iniciaremos o estudo do framework para construção de interfaces,

denominado “JavaServer Faces”. Esse framework fornece ao desenvolvedor um arcabouço
completo de componentes para criação de interfaces além de disponibilizar técnicas
específicas para validação de conversão de informações das interfaces.
Além disso, você estudará aspectos relacionados a uma nova tendência

para construção de aplicações Web, denominada “serviços Web”. Essa tecnologia tem
demonstrado grande aplicabilidade para o desenvolvimento de sistemas, especialmente,
por facilitar a portabilidade e a reutilização dos componentes.
GUIA DE DISCIPLINA
Por fim, estudaremos a construção de interfaces Web utilizando chamadas
assíncronas por meio do Ajax. Para isso, serviremo-nos de um framework chamado
“ICEfaces”.
Bons estudos!
2 DADOS GERAIS DA DISCIPLINA
Ementa
Introdução ao projeto de interfaces. Frameworks para desenvolvimento web.

JavaServer Faces (JSF). Arquitetura e componentes do JSF. Integração do JSF ao banco
de dados. JavaServer Faces e Ajax. Construção de aplicações Web baseadas em serviços
e na integração às interfaces.
Objetivo geral
Os alunos da disciplina Projeto de Interfaces para Aplicações Web Java, do

curso de Especialização em Plataforma de Desenvolvimento Web na modalidade EAD
do Claretiano, dado o Sistema Gerenciador de Aprendizagem e suas ferramentas, serão
capazes de desenvolver aplicações para internet com base nas mais avançadas tecnologias
para criação de interfaces “ricas” (do inglês Rich Internet Applications – RIAs). Essas
interfaces oferecem recursos e funcionalidades que se aproximam às aplicações desktop,
tornando a experiência do usuário da internet muito mais agradável. Para isso, contarão
com referencial em Material Didático Mediacional complementado por debates no Fórum
e por troca de mensagens na Lista. Ao final da disciplina, sob a orientação do tutor,
serão capazes de desenvolver aplicações para internet utilizando a plataforma Java com
as tecnologias JavaServer Faces e ICEfaces. Além disso, os alunos estarão aptos para
a construção de interfaces ricas, a criação de serviços Web e a utilização de Ajax. Para
complementar a formação, os alunos serão estimulados a produzir resumos (ou sínteses)
ou outras atividades sobre os temas estudados ao longo da disciplina.
GUIA DE DISCIPLINA
Especialização em Plataforma de Desenvolvimento Web Java
Objetivos específicos
a) Identificar os conceitos fundamentais relacionados à construção de inter-

faces para aplicações Web.
b) Produzir aplicações web utilizando o framework de desenvolvimento Ja-

vaServer Faces.
c) Descrever e integrar as informações disponibilizadas nas interfaces Web

com um sistema de gerenciamento de banco de dados.
d) Identificar e utilizar o mapeamento objeto-relacional, por meio do frame-

work Hibernate, no desenvolvimento de aplicações ricas para internet.
e) Interpretar o funcionamento dos serviços Web.
f) Produzir aplicações para internet baseadas no conceito de serviços Web.
g) Descrever e integrar o framework JavaServer Faces aos serviços Web.
h) Descrever e interpretar as chamadas “assíncronas” (Ajax) na internet por

meio do framework ICEFaces.
i) Desenvolver aplicações Web utilizando o framework ICEFaces.
Competências
Ao final deste estudo, os alunos do curso de Especialização em Plataforma de

Desenvolvimento Web contarão com uma sólida base teórica e prática para fundamentar,
criticamente, sua atuação profissional. Adquirirão as habilidades necessárias não somente
para cumprir seu papel de profissional nesta área do saber, mas também para agir com
ética e responsabilidade social, contribuindo, assim, para o respeito integral do ser
humano.
Duração e carga horária
A carga horária da disciplina Projeto de Interfaces para Aplicações Web Java

é de 60 horas, nas quais realizaremos atividades presenciais e a distância. O conteúdo
programático para o estudo das cinco unidades que a compõem está desenvolvido no
Caderno de Referência de Conteúdo.
ATENÇÃO!
Na Sala de Aula Virtual – SAV, ferramenta “cronograma”, será disponibilizado
para você um quadro com instruções referentes ao modo como deverá proceder
nesta disciplina, bem como nas interatividades e atividades. O intuito é facilitar
a visualização de informações importantes e, com isso, possibilitar um melhor
aproveitamento em seus estudos.
3 CONSIDERAÇÕES
Nesta disciplina, você aprenderá ao longo das unidades os principais conceitos
a respeito da construção de interfaces para aplicações Web.
Durante o estudo das unidades, você compreenderá aspectos relacionados ao

framework JavaServer Faces, o qual fornece ao programador uma gama de componentes
para criação de interfaces. Além disso, estudará conceitos sobre armazenamento de
informações, utilizando mapeamento objeto-relacional, e sobre serviços Web.
8 GUIA © Projeto de Interfaces para Aplicações Web Java

Claretiano – Batatais
GUIA DE DISCIPLINA Especialização em Plataforma de Desenvolvimento Web Java
Por fim, a disciplina abordará a construção de interfaces com chamadas

assíncronas utilizando Ajax. Desse modo, você aprenderá o desenvolvimento de aplicações
utilizando o framework ICEfaces.
Aproveite o conteúdo e bons estudos!
4 BIBLIOGRAFIA BÁSICA
HORSTMANN, C. S.; GEARY, D. M. Core JavaServer Faces. Rio de Janeiro: Alta Books,
2007.
5 BIBLIOGRAFIA COMPLEMENTAR
DEITEL, P. J.; DEITEL, H. M. Ajax, Rich Internet Applications e desenvolvimento web para
programadores. São Paulo: Pearson Prentice Hall, 2008.
FALLOWS, R. J.; JACOBI, J. Pro JSF and Ajax: building Rich Internet components. New
York: Apress, 2006.
© Projeto de Interfaces para Aplicações Web Java

Claretiano – Batatais GUIA 9
Anotações
CADERNO DE REFERÊNCIA DE CONTEÚDO
APRESENTAÇÃO
Seja bem-vindo(a) ao estudo de Projeto de Interfaces para Aplicações Web

Java. Nesta disciplina, você aprenderá os principais conceitos relativos ao projeto e à
construção de interfaces ricas para internet.
As aplicações ricas para internet (do inglês Rich Internet Applications – RIAs)
têm alcançado grande destaque no cenário do desenvolvimento de aplicações. A principal
característica destas é a semelhança com as aplicações desktop tanto em termos visuais
quanto nas funcionalidades.
Os frameworks web têm se tornado muito atrativos para os programadores,

uma vez que fornecem um arcabouço de funcionalidades implementadas por meio de um
conjunto de classes. Essas classes podem ser facilmente utilizadas ao longo da aplicação.
Nesta disciplina, você conhecerá o principal framework para desenvolvimento de aplicações
Web na plataforma Java, denominado “JavaServer Faces” (JSF).
Além disso, você terá a oportunidade de compreender o conceito de serviços

Web e de entender como essa tecnologia pode ser utilizada na construção de aplicações
para Web.
Por fim, você conhecerá a metodologia Ajax, a qual é utilizada para realizar
chamadas assíncronas por meio da internet. Para demonstrar essa metodologia, você
conhecerá o framework ICEFaces, que é uma extensão do framework JSF e que provê
suporte ao Ajax.
Aproveite o conteúdo e bons estudos!

Anotações
Unidade
INTRODUÇÃO AO PROJETO
DE INTERFACES PARA
APLICAÇÕES WEB
1
Objetivo
• Identificar as principais características do projeto de aplicações para
web.
Conteúdos
• Desenvolvimento de software e de interfaces gráficas.
• Frameworks para desenvolvimento web.

UNIDADE 1
ATENÇÃO!
Ao iniciar seus estudos, procure
ter à mão todos os recursos
de que irá necessitar, tais
1 INTRODUÇÃO
como: dicionário, caderno para
anotações, canetas, lápis, Nesta primeira unidade, você terá a oportunidade de estudar os principais
obras etc. Desse modo, você
poderá evitar as interrupções aspectos relacionados ao desenvolvimento de software e a importância das interfaces
e aproveitar seu tempo para gráficas na construção de aplicações.
ampliar sua compreensão. Pense
nisso...
Você aprenderá, ainda, a respeito da evolução dos paradigmas para
desenvolvimento de software desde as aplicações desktop até as aplicações Web.
Por fim, você encontrará informações sobre os frameworks. Um framework é

formado por um conjunto de classes, com as mais variadas funcionalidades, que pode ser
utilizado pelo programador para a construção de aplicações Web, objetivando auxiliá-lo na
elaboração das interfaces.
Bom estudo!
2 DESENVOLVIMENTO DE SOFTWARE E DE INTERFACES

GRÁFICAS
Nos últimos anos, você deve ter notado que os modelos de desenvolvimento de
software passaram por grandes mudanças. Estas foram ocasionadas, especialmente, pela
alteração dos paradigmas e pela evolução dos computadores.
Pensando um pouco no passado, a década de 1990 foi marcada, essencialmente,

pelo desenvolvimento de sistemas computacionais voltados para computadores pessoais.
Esses sistemas, em geral, utilizaram as redes locais como meios de comunicação
e permitiram a realização das mais variadas tarefas. Vale lembrar que esses tipos de
sistemas computacionais são, comumente, conhecidos como aplicações desktop.
Para a construção desse tipo de sistema, diversas tecnologias para

desenvolvimento foram criadas, o que forneceu aos programadores uma infinidade de
ferramentas. Essas ferramentas foram agrupadas em ambientes de desenvolvimentos
integrados – em inglês Integrated Development Environment (IDE).
Esses ambientes fornecem todos os requisitos necessários para o desenvolvimento

dos sistemas computacionais desde a codificação e a construção das interfaces até a
compilação e os testes. Talvez você nunca tenha utilizado nenhum desses ambientes, mas
os mais conhecidos da década de 1990 foram:
• Microsoft Visual Basic.

• Borland Delphi.
• Borland C++ Builder.
14 CRC © Projeto de Interfaces para Aplicações Web Java

UNIDADE 1
Fonte: acervo pessoal.

Figura 1 Ambiente de desenvolvimento Visual Basic.

Claretiano – Batatais CRC 15
UNIDADE 1

Figura 2 Ambiente de desenvolvimento Borland Delphi.
Como muitas vezes a tarefa do programador não é nada fácil, as características

embutidas nesses ambientes tornaram o desenvolvimento de sistemas computacionais
uma tarefa rápida e descomplicada. Esses fatos se devem, especialmente, à maneira da
construção das interfaces gráficas, a qual utilizava uma metodologia de criação baseada
no modelo “arrastar e soltar” – do inglês drag-and-drop.
Nesse tipo de metodologia, o programador constrói a interface gráfica do sistema

computacional apenas arrastando e soltando os componentes desejados. Por exemplo:
para adicionar um botão a uma interface (ou a um formulário), basta o programador
selecionar o botão na paleta de componentes, isto é, arrastar o botão para o formulário,
e soltar. Pronto. A interface está criada.
A paleta de componentes foi outro fator importante na construção das interfaces.

Essa paleta é formada por um conjunto de componentes visuais pré-definidos e com
comportamentos próprios, os quais podem ser utilizados a qualquer momento pelo
programador. Com isso, a criação de uma interface gráfica pode ser realizada com apenas
alguns cliques.

Figura 3 Paleta de componentes do ambiente Borland Delphi.

UNIDADE 1
Embora essa metodologia tenha dominado o cenário do desenvolvimento de

softwares na década de 1990, com a evolução dos meios de comunicação – especialmente
da internet –, esse modelo sofreu grandes mudanças.
Uma evolução natural das aplicações desktop foram as aplicações Web, as

quais necessitam de um navegador para apresentação do conteúdo. Esse progresso tem
se tornado cada vez mais evidente devido à popularização da internet e à navegação em
velocidades aceitáveis. Além disso, o desenvolvimento de sistemas baseados em web
minimiza diversos problemas encontrados nas aplicações desktop, como por exemplo, a
manutenção do software.
No entanto, com o crescimento de sistemas baseados em web, um dos principais

desafios é a construção de interfaces gráficas tão intuitivas quanto as interfaces desktop.
Além disso, algumas perguntas ainda precisam ser respondidas: a construção de interfaces
para aplicações Web pode ser tão fácil e rápida quanto a criação de interfaces desktop?
Essa construção é produtiva? É possível reutilizar componentes e interfaces já criadas?
Conforme estudado na disciplina Desenvolvimento de Aplicações

Web com Java, o desenvolvimento de sistemas web dinâmicos teve início com a
tecnologia CGI (Common Gateway Internet), juntamente com o HTML (HyperText
Markup Language). A combinação dessas tecnologias permitiu os primeiros
modelos de interatividade entre usuários e aplicações Web. Além da tecnologia
CGI, outras linguagens foram desenvolvidas para a construção de aplicações
Web, como: PHP, ASP, JSP etc.
Nesse primeiro momento, as interfaces eram criadas por meio de um conjunto

de componentes de formulários disponíveis no HTML. Esses componentes contêm diversos
controles de interação, tais como campos de texto, botões, caixas de seleção etc. Com o
desenvolvimento de uma especificação mais padronizada e robusta, o XHTML (Extensible
HyperText Markup Language) e o CSS (Cascading Style Sheets) tornaram-se referência
na elaboração de páginas web com qualidade.
Uma característica importante das aplicações desktop é a possibilidade que o

programador tem de tratar os eventos do usuário com a interface gráfica. No caso das
interfaces desktop, diversos eventos podem ser tratados, tais como cliques e movimentação
do mouse, acionamento das teclas, redimensionamento das janelas etc. Em sistemas
baseados web, essa característica também é possível, mas com algumas restrições.
Essas restrições são impostas, especialmente, devido aos diversos tipos de navegadores
existentes hoje em dia e a uma falta de padronização desse procedimento.
O modelo de objeto de documento – do inglês Document Object Model –, ou

simplesmente DOM, permite ao programador ter acesso a todos os elementos de uma
página web. Assim, utilizando a linguagem JavaScript, é possível criar, modificar e remover,
dinamicamente, os elementos da página. Além disso, permite ao programador tratar
interações do usuário da mesma maneira que isto é realizado em sistemas desktop.
Diversos programas ou plugins permitem ao programador visualizar os elementos

de uma página web; dentre eles, podemos destacar o FireBug, que é uma solução bastante ATENÇÃO!
Para saber mais sobre o FireBug,
eficiente. acesse o site disponível em:
<http://getfirebug.com/>. Acesso
em: 2 fev. 2010.

UNIDADE 1

Figura 4 Visualização dos elementos de uma página web (http://www.google.com) por meio
do FireBug.
Embora as diversas tecnologias para desenvolvimento de sistemas web permitam

ao programador construir aplicações semelhantes aos sistemas desktop, o principal desafio
está relacionado à produtividade. A utilização de tecnologias como o XHTML, o CSS e o
DOM pode ser eficiente; no entanto, torna a tarefa do programador lenta e complexa.
Além disso, o conceito de reusabilidade é pouco empregado.
Nesse sentido, tecnologias têm surgido com o objetivo de agilizar o

desenvolvimento das aplicações Web. Essas tecnologias seguem os mesmos moldes para
o desenvolvimento rápido de aplicação – do inglês Rapid Application Development (RAD).
Esse termo é muito comum em desenvolvedores de aplicações desktop, e o principal
objetivo do RAD é a construção de aplicações com componentes reutilizáveis de maneira
rápida e fácil. Além disso, as novas tecnologias fornecem mecanismos capazes de integrar
essas aplicações aos banco de dados de forma descomplicada e prática.
Entretanto, a pergunta que fica é:
É possível utilizar RAD no desenvolvimento de aplicações Web?
Para responder a essa pergunta, vamos focar o desenvolvimento de aplicações

na plataforma Java. Quando desenvolvemos aplicações desktop, a API Swing é um
padrão para construção de interfaces gráficas, pois, por meio dela, é possível desenvolver
interfaces de maneira rápida e fácil. Em aplicações Web, o desenvolvimento é realizado,
especialmente, por meio da tecnologia JavaServer Pages (JSP), que permite incorporar
todo o dinamismo necessário às páginas web.

UNIDADE 1
Apesar da tecnologia JavaServer Pages e dos servlets fornecerem todos os

requisitos necessários para construção de aplicações Web, as interfaces com o usuário
ainda são o problema. Isso não significa que essas tecnologias não permitem a criação de
RIAs – Rich Internet Applications (em português: aplicações ricas para internet).
O termo RIAs é muito utilizado para denominar aplicações Web que oferecem
sensibilidades, recursos e funcionalidades ricas parecidas com as das aplicações
desktop. No entanto, a criação de interfaces ricas utilizando simplesmente JSP
é uma tarefa pouco produtiva.
Para minimizar esses problemas diversos, frameworks têm surgido para auxiliar
o desenvolvimento de aplicações Web. Dentre eles, o principal destaque na plataforma
Java é o JavaServer Faces (JSF).
O JSF tem como foco principal a construção de interfaces para aplicações Web,
e, pensando de forma prática, podemos associar a ele uma versão web da biblioteca
Swing. O JSF possui um conjunto de componentes de interfaces pré-desenvolvidos, os
quais podem ser programados utilizando o paradigma orientado a eventos, como ocorre
nas aplicações desktop. Além disso, ambientes de desenvolvimentos integrados atuais,
como por exemplo o NetBeans, incorporaram a possibilidade de construção de interfaces
gráficas para web utilizando a filosofia drag-and-drop.
A figura a seguir apresenta um projeto utilizando o ambiente Visual Web

JavaServer Faces no ambiente NetBeans 6.7.

Figura 5 Desenvolvimento visual de aplicações Web utilizando o ambiente NetBeans.

UNIDADE 1
3 FRAMEWORKS PARA DESENVOLVIMENTO WEB

Como discutido anteriormente, o principal problema em desenvolvimento de
aplicações Web está relacionado à produtividade e à reusabilidade de código. Além disso, a
complexidade da construção de interfaces gráficas torna essa tarefa um verdadeiro desafio.
Para auxiliar o desenvolvimento, diversos frameworks vêm surgindo com o

objetivo de minimizar o trabalho do programador. Esses frameworks têm características
específicas e podem ser escolhidos pelo desenvolver de acordo com as necessidades do
projeto.
Vale ressaltar que esta disciplina tem como foco principal o framework JavaServer
Faces; todavia, outros frameworks também merecem destaque, como o Spring e o Struts,
por exemplo.
Spring
O Spring é um framework completo, baseado na arquitetura Model-View-

Controller (MVC), que suporta diversas funcionalidades, tais como:
a) transações;
b) persistência de dados;
c) acesso remoto por meio de RMI;
d) serviços Web etc.
Uma das características interessantes do framework Spring é o fato de ele ser

desenhado para não ser intrusivo. Isso significa que os códigos da lógica de negócio
da aplicação não dependem do framework. Para que isso seja possível, o framework
possui uma camada específica de integração, na qual o programador pode codificar as
funcionalidades da aplicação.
O framework é muito bem organizado e está divido em vários módulos, os quais

podem ser visualizados na figura a seguir.
ATENÇÃO!
Para obter informações
detalhadas sobre o framework Fonte: acervo pessoal.
Spring, acesse o site
disponível em: <http://www. Figura 6 Visão geral do framework Spring.
springframework.org/>. Acesso
em: 2 fev. 2010.

UNIDADE 1
Struts
O Struts é outro framework para desenvolvimento de aplicações Web que merece

destaque. Ele é desenhado para auxiliar o desenvolvedor na construção de aplicações Web
baseadas na arquitetura MVC. O framework tem como foco principal o controlador da
arquitetura MVC.
A segunda versão do framework, denominada “Struts 2”, foi criada por meio
da junção da primeira versão (Struts 1) e do framework WebWork. Dentre as diversas
características, ele possui suporte à Ajax, fácil integração com o framework Spring, rápida
inicialização etc. A figura a seguir demonstra a visão geral da arquitetura Struts:

Figura 7 Visão geral do framework Struts.
4 CONSIDERAÇÕES
Nesta unidade, você pôde compreender os conceitos fundamentais do projeto
de interfaces, bem como os aspectos relacionados às interfaces para aplicações desktop
e web. Além disso, você também pôde compreender conceitos referentes aos frameworks
para desenvolvimento web.
Na próxima unidade, você iniciará o estudo do framework JavaServer Faces (JSF).

Vale lembrar que este é o principal framework para construção de interfaces para web na
plataforma Java e que ele fornece ao programador uma infinidade de funcionalidades para
o desenvolvimento de aplicações.

UNIDADE 1
ATENÇÃO!
Para ampliar seus 5 SUGESTÕES BIBLIOGRÁFICAS
conhecimentos a respeito do
tema abordado nesta unidade, DEITEL, P. J.; DEITEL, H. M. Ajax, Rich Internet Applications e desenvolvimento web para
sugerimos que você leia as obras
apresentadas neste tópico, bem
programadores. São Paulo: Pearson Prentice Hall, 2008.
como acesse o site indicado,
pois ele contém informações que
FALLOWS, R. J.; JACOBI, J. Pro JSF and Ajax: building Rich Internet components. New
podem muito acrescentar em sua York: Apress, 2006.
prática profissional.
6 E-REFERÊNCIAS
Lista de Figuras
Figura 5 – Visão geral do framework Spring: Disponível em: <http://www.

springframework.org/>. Acesso em: 2 fev. 2010.
Figura 6 – Visão geral do framework Struts: Disponível em: <http://struts.apache.

org/>. Acesso em: 2 fev 2010.

Unidade
JAVASERVER FACES (JSF) –
INTRODUÇÃO, ARQUITETURA,
COMPONENTES E VALIDAÇÃO
2
Objetivos
• Descrever o framework JavaServer Faces (JSF).
• Desenvolver aplicações utilizando o framework JSF.
• Definir a arquitetura e os principais componentes do JSF.
Conteúdos
• Componentes.
• Exemplo prático e detalhado de uma aplicação com JSF.
• Outros componentes para criação de interfaces.
• Validação de dados.
UNIDADE 2
ATENÇÃO!
Ao longo desta unidade, procure
realizar as reflexões sugeridas.
Faça seu cronograma e não se
1 INTRODUÇÃO
apresse em prosseguir seus
estudos, pois, afinal, essas Na unidade anterior, você estudou os aspectos da construção de interfaces para
reflexões são importantes para
possibilitar que você se envolva aplicações Web.
por inteiro na aprendizagem.
Pense nisso... Nesta unidade, começaremos nosso aprendizado a respeito do framework
JavaServer Faces ou, simplesmente, JSF.
Bom estudo!
2 O FRAMEWORK JSF
O framework JSF fornece aos desenvolvedores um conjunto extenso de
bibliotecas para a construção de interfaces gráficas para aplicações Web. Suas principais
características são:
• Componentes visuais predefinidos e reutilizáveis.

• Orientação a eventos.
• Incorporação das características do modelo MVC (Model-View-Controller). O
objetivo principal desse framework é tornar o desenvolvimento web rápido e
fácil. Para isso, o programador pode pensar na construção da aplicação em
termos de componentes e de eventos em vez do tradicional fluxo de requisição
e resposta. A Figura 1 apresenta uma visão geral do desenvolvimento de
aplicações utilizando JSF.
Fonte: adaptado de FALLOWS; JACOBI, 2006.

Figura 1 Visão geral do desenvolvimento de aplicações com JSF.
Um fato importante é o de que uma aplicação JSF pode ser construída para
vários tipos de clientes. Essa característica de tal framework permite a separação entre
a apresentação e o processamento da aplicação. Em outras palavras, dependendo do
cliente (navegador, celular etc.), uma aplicação pode ser apresentada de várias maneiras;
todavia, o processamento é realizado de uma única forma. Esse ponto faz que o tempo
de desenvolvimento seja reduzido e, além disso, minimiza o processo de manutenção da
aplicação.

UNIDADE 2
Como descrito anteriormente, o framework JSF é baseado na arquitetura MVC.

Desse modo, observe a Figura 2, que ilustra como os componentes desse framework estão
organizados na arquitetura MVC.
Fonte: adaptado de FALLOWS; JACOBI, 2006

Figura 2 Aplicações JSF organizadas na arquitetura MVC.
3 COMPONENTES
O framework JavaServer Faces possui um conjunto vasto de componentes para
a criação de interfaces com o usuário. Além disso, ele possui outras funcionalidades para
gerenciamento de estados dos componentes, para associação de eventos, para validação
de informações, conversão, definição de fluxo de navegação e acessibilidade.
Para facilitar o entendimento, faremos uma comparação entre os componentes

de formulário da linguagem HTML e os componentes do JSF. Considere uma página web
na qual o usuário poderá entrar com informações. Para isso, foi utilizado um componente
de formulário do tipo input, e sua declaração é apresentada como se segue:
<input type=“text” id=“id1” value=“Digite seu nome aqui.” />
Essa mesma declaração, utilizando os componentes do framework JSF, pode ser

escrita da seguinte maneira:
<h:inputText value=“#{form.id1}” />
Pensando de forma mais detalhada, o processo de criação e exibição de

componentes JSF é realizado em três etapas:
• Codificação: na qual o componente é escrito utilizando a sintaxe específica

do JSF.

UNIDADE 2
<h:form>
<h:outputText value=“#{msg.lblNome}”/>
<h:inputText value=“#{usuario.nome}”/>
<h:commandButton action=“#{usuario.exibir}”
value=“#{msg.lblBotao}”
</h:form>
• Árvore de componentes: é uma estrutura de dados que contém objetos Java

para todos os elementos da interface do usuário presente na página.
• Renderização: responsável pela conversão dos componentes JSF em tags

HTML.
Quando trabalhamos com os componentes JSF, duas propriedades são

importantes: value e action.
A propriedade value é utilizada para associar um atributo de uma classe a um

componente JSF. Considere uma classe Java, denominada “Pessoa”, contendo um atributo
intitulado “nome”. Para exibir o conteúdo desse atributo, utilizando um componente do
tipo outputText, do JSF, basta usar o seguinte código:
<h:inputText value=“#{pessoa.nome}” />

UNIDADE 2
A propriedade action permite que métodos sejam disparados a partir de eventos

ocorridos na página web. Imagine que a classe Pessoa contém um método denominado
“gravarPessoa”. Para chamarmos esse método por meio de um componente commandButton
do JSF, utilizamos o seguinte código:
<h:commandButton action=“#{pessoa.gravarPessoa}” />
4 EXEMPLO PRÁTICO E DETALHADO DE UMA APLICAÇÃO COM

JSF
Para demonstrar os conceitos fundamentais do desenvolvimento de aplicações
Web utilizando JavaServer Faces, criaremos uma aplicação para login de usuários. Para
isso, vamos considerar uma aplicação responsável pelo login fictício de usuários, como
pode ser visualizado na Figura 3.

Figura 3 Exemplo da aplicação Web para login de usuário com JSF.
Para codificação do exemplo, utilizaremos o ambiente NetBeans. Com o

ambiente iniciado, clique em Arquivo à Novo Projeto. Selecione a categoria Java Web e
em Projeto escolha a opção Aplicação Web e, em seguida, clique no botão Próximo.
Defina o nome do projeto como “JSF_Exemplo01” e clique em Próximo. Na sequência,
selecione o servidor web de sua preferência e clique, novamente, no botão Próximo.
Na próxima tela, é possível selecionar os frameworks que serão utilizados na

aplicação Web; nesse momento, selecione o framework JavaServer Faces e, em seguida,
clique no botão Finalizar.

UNIDADE 2

Figura 4 Criação de uma aplicação Web no ambiente NetBeans utilizando o framework JavaServer
Faces.
Para essa aplicação, serão utilizados quatro componentes visuais do framework

JavaServer Faces:
a) outputText;
b) inputText;
c) inputSecret;
d) commandButton.
O componente outputText é utilizado para exibição de informações na tela. Ele

pode ser comparado ao componente JLabel, do Swing.
O componente inputText, semelhante ao JTextField, é empregado para entrada

de informações.
O inputSecret é utilizado para entrada de informações do tipo senha assim como

o componente do Swing, JPasswordField.
Por fim, o componente commandButton cria um botão como o componente

JButton.
Para codificação do conteúdo JSF da página de login, você pode renomear

o arquivo welcomeJSF.jsp para index.jsp. Para garantir que o projeto funcionará
adequadamente, verifique o conteúdo do arquivo web.xml. Este deve ser semelhante ao
conteúdo a seguir:

UNIDADE 2
Código 1
1 <?xml version=”1.0” encoding=”UTF-8”?>
<web-app version=”2.5” xmlns=”http://java.sun.com/xml/ns/
javaee” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
2
xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.
com/xml/ns/javaee/web-app_2_5.xsd”>
3 <context-param>
4 <param-name>com.sun.faces.verifyObjects</param-name>
5 <param-value>false</param-value>
6 </context-param>
7 <context-param>
8 <param-name>com.sun.faces.validateXml</param-name>
9 <param-value>true</param-value>
10 </context-param>
11 <context-param>
12 <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
13 <param-value>client</param-value>
14 </context-param>
15 <servlet>
16 <servlet-name>Faces Servlet</servlet-name>
17 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
18 <load-on-startup>1</load-on-startup>
19 </servlet>
20 <servlet-mapping>
21 <servlet-name>Faces Servlet</servlet-name>
22 <url-pattern>/faces/*</url-pattern>
23 </servlet-mapping>
24 <session-config>
25 <session-timeout>
26 30
27 </session-timeout>
28 </session-config>
29
30 <welcome-file-list>
31 <welcome-file>faces/index.jsp</welcome-file>
32 </welcome-file-list>
33 </web-app>
Fim Código 1
Observe que, como estamos utilizando o ambiente NetBeans, todas as

configurações do framework JavaServer Faces foram incluídas automaticamente, como
expressos nas linhas de 3 à 23. Além disso, é importante verificar o arquivo de boas-
vindas definido na linha 31 como “index.jsp”.
O código JSF que produz a página de login é apresentado como se segue e deve
ser codificado no arquivo index.jsp:
Código 2
1 <%@page contentType=”text/html” pageEncoding=”UTF-8”%>

2
3 <%@taglib prefix=”f” uri=”http://java.sun.com/jsf/core”%>
4 <%@taglib prefix=”h” uri=”http://java.sun.com/jsf/html”%>
5
6 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
7 “http://www.w3.org/TR/html4/loose.dtd”>
8

UNIDADE 2
9 <f:view>
10 <html>
11 <head>
12 <meta http-equiv=”Content-Type”
13 content=”text/html; charset=UTF-8”/>
14 <title>Login</title>
15 </head>
16 <body>
17 <h1><h:outputText value=”Login”/></h1>
18 <h:form>
19 <h2>
20 <h:outputText value=”Usuário:” />
21 <h:inputText value=”#{login.usuario}”/>
22 </h2>
23
24 <h2>
25 <h:outputText value=”Senha:” />
26 <h:inputSecret value=”#{login.senha}”/>
27 </h2>
28 <h:commandButton action=”#{login.logarUsuario}”
29 value=”ok” />
30 </h:form>
31
32 </body>
33 </html>
34 </f:view>
Fim Código 2
Você poderá notar que as páginas criadas com o framework JSF são muito semelhantes
às páginas JSP. As principais mudanças estão nas linhas 3 e 4, que incorporam as bibliotecas
de tags do framework JSF. Todas as páginas JSF devem obrigatoriamente incorporar essas
taglibs.
Os principais comandos disponíveis nas taglibs core e HTML são listados na

Tabela 1.
Tabela 1 Principais comandos disponíveis nas taglibs core e HTML.
JSF Core JSF HTML

actionListener column
atribute commandButton
convertDateTime commandLink
converter dataTable
convertNumber form
facet graphicImage
loadBundle inputHidden
param inputSecret
selectItem inputText

UNIDADE 2
JSF Core JSF HTML

selectItems inputTextArea
subview message
validateDoubleRange messages
validateLength outputFormat
validateLongRange outputLabel
validator outputLink
valueChangeListener outputText
verbatim panelGrid
view panelGroup
selectBooleanCheckbox
selectManyCheckbox
selectManyListbox
selectManyMeu
selectOneListBox
selectOneMenu
selectOneRadio
Continuando a aplicação de login de usuário, o próximo passo é adicionar uma

classe JavaBean, que será responsável pelo gerenciamento do comportamento da interface.
Nessa classe, são adicionados os atributos que fazem referência aos componentes JSF da
página index.jsp, bem como às ações que são disparadas com as interações dos usuários.
Essa classe é comumente denominada BackingBeans.
Na prática, você poderá criar diferentes beans para um ou mais componentes de

uma página. No entanto, é recomendado que seja adotado um relacionamento “um para
um” entre as páginas e as beans da sua aplicação. Assim, para uma aplicação contendo
três páginas web, é ideal que sejam criadas três beans, sendo uma para cada página.
Para a criação dessa classe, clique com o botão direito do mouse sobre o nome
do seu projeto (JSF_Exemplo01). Em seguida, selecione Novo à Outro. Nas categorias,
selecione JavaServer Faces e, em tipos de arquivos, selecione Bean gerenciado JSF,
conforme ilustrado na Figura 5.

UNIDADE 2

Figura 5 Criação de Bean gerenciado para aplicação Web de login.
Na próxima tela, você poderá definir o nome da classe como “LoginBean”;

ela será armazenada no pacote como “beans”. Você pode também definir como a classe
LoginBean será referenciada nas aplicações Web, e essa configuração é definida no campo
Nome. Para facilitar, utilizaremos o nome login.
Outro ponto importante é a especificação do escopo da bean LoginBean no

contexto da aplicação Web. Em outras palavras, o escopo define a visibilidade de uma
bean dentro da sua aplicação Web. Nesse caso, três escopos podem ser definidos:
• request: começa quando uma requisição HTTP é submetida ao servidor e

termina quando a resposta é enviada de volta ao cliente;
• session: é visível durante toda a navegação do usuário pela aplicação e
análogo às variáveis de sessão do JSP;
• application: persiste por toda duração da aplicação Web e é compartilhado por
todas as requisições e sessões.
As configurações do bean LoginBean são apresentadas na Figura 6, para concluir

a criação do bean clique no botão Finalizar.

UNIDADE 2

Figura 6 Criação de um novo bean gerenciado JSF no ambiente NetBeans.
O código da classe LoginBean segue os mesmos modelos das classes JavaBeans.

Nessa classe, foram declarados os atributos “usuario” e “senha”, bem como os métodos
manipuladores (getters e setters). Além disso, um método fictício foi codificado para
representar a validação do usuário.
Código 3
1 package beans;
2
3 public class LoginBean {
4
5 private String usuario;
6 private String senha;
7
8 public LoginBean() {
9 }
10
11 public String getUsuario() {
12 return usuario;
13 }
14 public void setUsuario(String usuario) {
15 this.usuario = usuario;
16 }
17 public String getSenha() {
18 return senha;
19 }
20 public void setSenha(String senha) {
21 this.senha = senha;

UNIDADE 2
22 }
23
24 public String logarUsuario(){
25 if (usuario.equals(“joao”) && senha.equals(“123”))
26 return “sucesso”;
27 else
28 return “erro”;
29 }
30 }
Fim Código 3
Todas as aplicações criadas com o framework JSF possuem um arquivo de

configuração no qual são especificados todos os recursos das beans pertencentes à
aplicação. Além disso, é possível definir regras de navegação entre as páginas da aplicação
em função dos eventos ocorridos no decorrer do processamento das requisições. Esse
arquivo é chamado faces-config.xml e fica armazenado dentro da pasta WEB-INF.
Para demonstrar a utilização das regras de navegação em aplicação Web com

JSF, você deve adicionar duas outras páginas JSF ao seu projeto atual. Para isso, clique com
o botão direito do mouse sobre o nome do projeto, selecione Novo à Outro. Em seguida,
clique em JavaServer Faces e em Página JSF JSP. Crie duas páginas: uma denominada
“sucesso.jsp” e outra chamada “erro.jsp”. Ao final, a estrutura do projeto deverá ser
semelhante à Figura 7.

Figura 7 Estrutura da aplicação Web.
O usuário da aplicação será encaminhado para a página sucesso.jsp sempre que

as informações de login estiverem corretas; caso contrário, ele será encaminhado para a
página erro.jsp. O conteúdo das páginas é apresentado da seguinte forma:

UNIDADE 2
sucesso.jsp
Código 4

2
5
8
9 <f:view>
10 <html>
11 <head>
<meta http-equiv=”Content-Type” content=”text/html;
12
charset=UTF-8”/>
14 </head>
15 <body>
16 <h1>
17 Olá,
18 <h:outputText value=”#{login.usuario}”/>
19 seja bem-vindo ao sistema.
20 </h1>
21 </body>
22 </html>
23 </f:view>
Fim Código 4
erro.jsp
Código 5
2
5
8
9 <f:view>
10 <html>
11 <head>
12
charset=UTF-8”/>
14 </head>
15 <body>
16 <h1>
<h:outputText value=”Os dados informados são
17
inválidos.”/>
18 </h1>
19 </body>
20 </html>
21 </f:view>
Fim Código 5
Para concluir a construção da aplicação, vamos configurar as regras de navegação

no arquivo faces-config.xml. O resultado do arquivo é apresentado da seguinte forma:

UNIDADE 2
Código 6
1 <?xml version=’1.0’ encoding=’UTF-8’?>

2
3 <faces-config version=”1.2”
4 xmlns=”http://java.sun.com/xml/ns/javaee”
5 xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.
6
sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd”>
7
8 
9 <managed-bean>
10 <managed-bean-name>login</managed-bean-name>
11 <managed-bean-class>beans.LoginBean</managed-bean-class>
12 <managed-bean-scope>session</managed-bean-scope>
13 </managed-bean>
14
15 
16 <navigation-rule>
17 <from-view-id>/index.jsp</from-view-id>
18 <navigation-case>
19 <from-outcome>sucesso</from-outcome>
20 <to-view-id>/sucesso.jsp</to-view-id>
21 </navigation-case>
22 <navigation-case>
23 <from-outcome>erro</from-outcome>
24 <to-view-id>/erro.jsp</to-view-id>
25 </navigation-case>
26 </navigation-rule>
27
28 </faces-config>
Fim Código 6
No arquivo de configuração, dois blocos merecem destaque. O primeiro é a

configuração do LoginBean. Observe que, na configuração, são descritos o nome da bean,
a classe de referência e a regra de escopo, como pode ser observado desde a linha 9 até
a 13.
Outro bloco importante é o que descreve as regras de navegação (linha 16 à

26). O conteúdo é bastante intuitivo e demonstra que, a partir da página de apresentação
(view) index.jsp, dois caminhos podem ser seguidos:
• caso o resultado seja sucesso, a aplicação exibirá o conteúdo da página

sucesso.jsp;
• caso o resultado seja erro, será apresentada a página erro.jsp.
Para facilitar o desenvolvimento, é possível utilizar o editor visual disponível no

NetBeans, o qual produz o seguinte resultado:]

UNIDADE 2

Figura 8 Configuração do arquivo faces-config.xml por meio do editor visual.
Você já pode executar e testar sua primeira aplicação Web utilizando o framework
JavaServer Faces.
5 OUTROS COMPONENTES PARA CRIAÇÃO DE INTERFACES

Para demonstrar a utilização dos diversos componentes para criação de
interfaces disponíveis nas bibliotecas do JavaServer Faces, vamos desenvolver um novo
exemplo. O objetivo deste será criar um formulário de cadastro que contenha os principais
componentes do JSF. Então, mãos à obra!
Para isso, crie um novo projeto para aplicação Web no NetBeans, denominado
“JSF_Exemplo02”, e selecione o framework JavaServer Faces. Adicione ao projeto três
páginas web clicando com o botão direito do mouse sobre o nome do projeto e selecionando
a opção “Novo”. Em seguida, escolha a opção “Página JSF JSP”.
O projeto terá uma bean denominada “PessoaBean”, que deve ser colocada no
pacote bean. A estrutura do projeto é apresentada da seguinte forma:

UNIDADE 2

Figura 9 Estrutura do projeto de aplicação Web com JSF.
Vamos começar codificando o arquivo index.jsp, que contém alguns dos

principais componentes do JSF. Nesse arquivo, são utilizados os seguintes componentes
JSF:
a) Commandbutton: é utilizado para criar o botão de envio de formulário. Esse

botão está associado a um evento (ou a uma ação) codificado na bean
Pessoabean.
b) Inputhidden: esse componente é muito comum em aplicações Web e permite

que campos ocultos sejam colocados no formulário.
c) Inputtext: utilizado para a entrada de dados do tipo texto.
d) Inputtextarea: utilizado para a entrada de uma grande quantidade de texto.

Esse componente representa o elemento textarea do HTML.
e) Outputtext: utilizado para exibir informações na página.
f) Panelgrid: utilizado para a criação de tabelas nas aplicações Web. O número

de colunas da tabela pode ser configurado com a propriedade columns,
e as linhas são determinadas, automaticamente, durante a renderização
da página. Selectoneradio: esse componente faz parte de um conjunto de
elementos de seleção mutuamente exclusiva. Nesse caso, o usuário pode
selecionar apenas uma opção dentre as possíveis. Além desse componente,
também é possível utilizar o selectOneListBox e selecOneMenu. Os itens
de seleção são adicionados por meio do componente selectItem, da taglib
core.
g) Selectmanycheckbox: neste componente, o usuário pode selecionar um

ou vários itens. Os itens desse componente podem ser apresentados
horizontalmente (lineDirection), ou verticalmente (pageDirection). Para
isso, basta configurar a propriedade layout. Outros dois componentes
fazem parte desse conjunto: selectManyListBox e selectManyMenu.

UNIDADE 2
O conteúdo do arquivo index.jsp é apresentado da seguinte forma:
Código7
2
5
8
9 <f:view>
10 <html>
11 <head>
12
charset=UTF-8”/>
13 <title>Formulário de Cadastro</title>
14 </head>
15 <body>
16 <h1>
17 <h:outputText value=”Informe seus dados”/>
18 </h1>
19
20 <h:form>
21 <h:panelGrid border=”0” columns=”2”>
22 <h:outputText value=”Nome:” />
23 <h:inputText value=”#{pessoa.nome}” size=”30”/>
24
25 <h:outputText value=”Sexo:” />
26 <h:selectOneRadio id=”sexo” value=”#{pessoa.sexo}”>
<f:selectItem itemLabel=”Masculino”
27
itemValue=”Masculino” />
<f:selectItem itemLabel=”Feminino”
28
itemValue=”Feminino” />
29 </h:selectOneRadio>
30
31 <h:outputText value=”Interesse:” />
<h:selectManyCheckbox id=”interesse”
32
value=”#{pessoa.interesse}” layout=”pageDirection”>
<f:selectItem itemLabel=”Notícias”
33
itemValue=”Notícias” />
<f:selectItem itemLabel=”Esportes”
34
itemValue=”Esportes” />
<f:selectItem itemLabel=”Tecnologia”
35
itemValue=”Tecnologia”/>
36 </h:selectManyCheckbox>
37
38 <h:outputText value=”Observações:” />
<h:inputTextarea value=”#{pessoa.observacoes}”
39
cols=”30” rows=”5” />
40
41 </h:panelGrid>
<h:commandButton value=”cadastrar”
42
action=”#{pessoa.cadastrar}” />
43 <h:inputHidden value=”pessoa.dataatual” />
44 </h:form>
45 </body>
46 </html>
47 </f:view>
Fim Código 7

UNIDADE 2
Neste momento, podemos testar a aplicação, e o resultado deve ser semelhante

à Figura 10.

Figura 10 Aplicação demonstrando os diversos componentes do JSF.
Continuando o desenvolvimento do projeto, vamos codificar a bean PessoaBean.

Essa classe contém diversos atributos que realizam o mapeamento das informações do
formulário de apresentação (view) com a lógica de negócios da aplicação. O código é
descrito da seguinte forma:
Código 8
1 package bean;
2
3 import java.util.List;
4
5 public class PessoaBean {
6
7 private String nome;
8 private String sexo;
9 private List<String> interesse;
10 private String observacoes;
11 private String data;
12
13 public PessoaBean() {
14 setData(String.valueOf(new java.util.Date()));
15 }
16
17 public String cadastrar(){
18 return !nome.equals(“”) ? “sucesso”: “erro”;

UNIDADE 2
19 }
20
21 //MÉTODOS SET e GET
22 public String getData() {…}
23 public void setData(String data) {…}
24 public String getObservacoes() {…}
25 public void setObservacoes(String observacoes) {…}
26 public List<String> getInteresse() {…}
27 public void setInteresse(List<String> interesse) {…}
28 public String getNome() {…}
29 public void setNome(String nome) {…}
30 public String getSexo() {…}
31 public void setSexo(String sexo) {…}
32
33 }
Fim Código 8
Um ponto importante que merece destaque é o construtor da classe. Percebe-

se que ocorre uma chamada do método setData e, como parâmetro, é passada a data
atual. O atributo “data” está relacionado ao componente inputHidden do formulário;
assim, esse componente receberá a data e a hora atuais sempre que o formulário for
processado.
O projeto também contém duas outras páginas que são utilizadas para navegação
da aplicação. Vamos iniciar descrevendo o código da página erro.jsp.
Código 9
2
5
8
9 <f:view>
10 <html>
11 <head>
12 <meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8”/>
14 </head>
15 <body>
16 <h1><h:outputText value=”O campo nome não foi preenchido”/></h1>
17 <h:outputLink value=”index.jsp”>
18 <h:outputText value=”voltar” />
19 </h:outputLink>
20 </body>
21 </html>
22 </f:view>
Fim Código 9
Nesta página, é demonstrada a utilização de mais um componente JSF HTML,

denominado “outputLink”. Esse componente é utilizado para criação de âncoras na
aplicação Web e, quando renderizado, representa a tag <a> ... </a> do HTML. Note
que, para utilizar esse componente, também é necessário utilizar o outputText, o qual
representa o link que será exibido ao usuário. Para criação de âncoras a partir de imagens,
você pode utilizar o componente graphicImage.

UNIDADE 2
Como já discutido anteriormente, o atributo value é utilizado para vincular

um componente JSF a um atributo de uma classe. Essa vinculação é utilizada durante a
entrada de informações (input), ou na apresentação de informações (output). Há outra
forma de realizar essa vinculação, na qual o componente JSF é acoplado a um atributo
de classe do mesmo tipo do componente. Considere, por exemplo, um componente JSF
do tipo outputText; é possível vincular esse componente a um atributo denominado
“HtmlOutputText”.
A principal vantagem desse tipo de vinculação é a possibilidade da utilização de

todos os métodos e atributos disponíveis na classe do componente durante a programação
do bean. Para isso, é necessário adicionarmos o pacote javax.faces.component.html.
A página sucesso.jsp demonstra a utilização desse tipo de vinculação. Observe

que esse tipo de vinculação é realizado por meio do atributo binding (linha 20), e não
com o atributo value como estamos acostumados. O código é apresentado da seguinte
forma:
Código 10
2
5
8
9 <f:view>
10 <html>
11 <head>
12 <meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8”/>
14 </head>
15 <body>
16 <h1>
17 <h:outputText value=”Informações cadastradas com
sucesso”/>
18 </h1>
19 <h2>
20 <h:outputText binding=”#{pessoa.dados}” escape=”false” />
21 </h2>
22 </body>
23 </html>
24 </f:view>
Fim Código 10
Os componentes utilizados para apresentação de informações (do tipo output)

possuem uma propriedade denominada “escape”. Esse atributo é definido por padrão
como verdadeiro (true) e tem como objetivo a exibição de tags HTML. Assim, quando for
necessário exibir conteúdo HTML renderizado, o atributo escape deve ser definido como
false.
Para completar a codificação da página sucesso.jsp, é necessário adicionar um

método responsável pela exibição dessas informações. Esse método é vinculado (por
binding), como representado na linha 20. Assim, adicione o seguinte método na bean
PessoaBean:

UNIDADE 2
Código 11
1 public HtmlOutputText getDados(){
2
3 String info = “Nome: “ + getNome() + “<br/>”
4 + “Sexo: “ + getSexo() + “<br/>”
5 + “Interesse: “ + getInteresse() + “<br/>”
6 + “Observações: “ + getObservacoes() + “<br/><br/>”
7 + “Data: “ + getData();
8
9 HtmlOutputText dados = new HtmlOutputText();
10 dados.setValue(info);
11 return dados;
12 }
Fim Código 11
IMPORTANTE:
Não se esqueça de adicionar o pacote javax.faces.component.html.
As regras de navegação desse exemplo, definidas no arquivo faces-config.
xml, seguem o mesmo modelo do exemplo anterior. Você pode utilizar o editor
visual do NetBeans para a criação da regra, cujo resultado é apresentado na
Figura 11.

Figura 11 Regras de navegação da aplicação contendo o formulário de cadastro.
Pronto. Você já pode executar sua aplicação! Realize um teste na sua aplicação,
deixando o campo “nome” vazio e clicando no botão “cadastrar”. Como resultado, você
visualizará a página de erro:

UNIDADE 2

Figura 12 Resultado da execução da aplicação.
Você pode testar, também, o preenchimento do formulário. O resultado é

apresentado na Figura 13.

Figura 13 Resultado da execução da aplicação demonstrando as informações que foram preenchidas
na interface.

UNIDADE 2
6 VALIDAÇÃO DE DADOS
Quando criamos interfaces gráficas tanto em aplicações desktop quanto em
aplicações Web, é imprescindível garantir a confiabilidade dos dados. Para isso, podemos
realizar checagem dos campos com o intuito de verificar se as informações foram digitadas
corretamente. Podemos também determinar se campos obrigatórios foram devidamente
preenchidos. Além disso, caso seja encontrado algum tipo de problema nos dados de
entrada, podemos informar o usuário e solicitar a alteração.
Com o framework JavaServer Faces, podemos utilizar três tipos de metodologias

para validação de dados, denominadas:
• Validação Manual.
• Validação Automática Implícita.
• Validação Automática Explícita.
O método de validação manual utiliza métodos encapsulados nas classes

JavaBeans para garantir a integridade das informações. Nesse tipo de abordagem, todo
trabalho de validação é de responsabilidade do programador.
Para exemplificar as metodologias de validação de dados, vamos criar um novo

projeto de aplicação Web, denominado “JSF_Exemplo03”. Não se esqueça de selecionar o
framework JavaServer Faces. Na sequência, construa uma página para entrada de dados
de acordo com a Figura 14, nomeada “validacaomanual.jsp”. O código completo é
apresentado em seguida.

Figura 14 Aplicação Web para demonstrar a validação dos dados.
validacaomanual.jsp
Código 12
2

UNIDADE 2
5
8
9 <f:view>
10 <html>
11 <head>
12
charset=UTF-8”/>
13 <title>Validação Manual</title>
14 </head>
15 <body>
16 <h1><h:outputText value=”Cadastro de Funcionários”/></h1>
17 <h:form>
<h:outputText style=”color:#FF0000”
18
value=”#{func.erros}” escape=”false”/>
19 <h:panelGrid columns=”2” border=”0”>
20 <h:outputText value=”Nome: “/>
21 <h:inputText value=”#{func.nome}” />
22
23 <h:outputText value=”Salário “/>
24 <h:inputText value=”#{func.salario}” />
25
26 <h:outputText value=”Idade: “/>
27 <h:inputText value=”#{func.idade}” />
28 </h:panelGrid>
29 <h:inputHidden binding=”#{func.tipo}” value=”1” />
30
action=”#{func.cadastrar}”/>
31 </h:form>
32 </body>
33 </html>
34 </f:view>
Fim Código 12
O formulário foi criado com os componentes tradicionais do JSF; no entanto, é

importante destacar a linha 18, que será utilizada para exibição das mensagens de erro, e
a linha 29, que possui um atributo oculto utilizado para identificar qual o tipo de validação
que será realizada.
Adicione ao projeto o bean FuncionarioBean dentro do pacote bean e, em

seguida, declare os atributos e seus respectivos métodos get’s e set’s:
Código 13
1 private String nome
2 private String idade
3 private String salario
4 private String erros
5 private HtmlInputHidden tipo
Fim Código 13
O formulário de cadastro está vinculado ao método cadastrar, cujo código é

definido a seguir:

UNIDADE 2
Especialização em Desenvolvimento de Projeto em Java com Banco de Dados
Código 14
1 public String cadastrar() {
2
3 String t = getTipo().getValue().toString();
4 if (t.equals(“1”)) {
5 return validacaoManual();
6 }
7 return null;
8 }
Fim Código 14
Além disso, é necessário realizar a codificação do método validacaoManual,

como descrito a seguir:
Código 15
1 public String validacaoManual() {
2 ArrayList<String> msg = new ArrayList<String>();
3
4 if (getNome().equals(“”)) {
5 msg.add(“Nome do funcionário não preenchido.”);
6 }
7 try {
8 if (Double.parseDouble(getSalario()) < 500.00) {
msg.add(“O salário de ser maior que o piso salarial
9
(R$ 500,00).”);
10 }
11 } catch (NumberFormatException e) {
msg.add(“O valor informado no campo salário é
12
inválido”);
13 }
14
15 try {
16 if (Integer.parseInt(getIdade()) < 18) {
msg.add(“A idade do funcionário deve ser no mínimo
17
18 anos.”);
18 }
19 } catch (NumberFormatException e) {
20 msg.add(“O valor informado no campo idade é inválido”);
21 }
22
23 if (msg.size() > 0) {
24 erros = “<ul>”;
25 for (int i = 0; i < msg.size(); i++)
26 erros += “<li>” + msg.get(i) + “</li>”;
27 erros += “</ul>”;
29 } else {
31 }
32 }
Fim Código 15
Lembre-se de que, nesse tipo de validação, todo o trabalho para garantir a

confiabilidade dos dados é do programador. As regras de validação para esse projeto são
descritas conforme a Figura 15.

UNIDADE 2

Figura 15 Regra de validação para o projeto de cadastro de funcionários.
Você já pode executar a aplicação. Clique no botão “cadastrar” sem preencher

os campos para visualizar os erros. Esse procedimento é demonstrado na Figura 16:

Figura 16 Validação manual do formulário para cadastro de funcionários.
Outra maneira de verificar os dados informados pelo usuário é a validação

automática implícita. Esse tipo de validação utiliza um componente message do framework
JSF para apresentar a mensagem de erro de um campo específico.

UNIDADE 2
Para demonstrar a metodologia de validação automática implícita, vamos realizar

uma cópia do arquivo validacaomanual.jsp e alterar o nome desse novo arquivo para
validacaoimplicita.jsp. A estrutura do projeto pode ser visualizada na Figura 17:

Figura 17 Estrutura do projeto JSF_Exemplo03.
Realize, então, as alterações necessárias no código conforme demonstrado na

listagem a seguir. As linhas em destaque ilustram as alterações que foram realizadas.
Código 16
2
5
8
9 <f:view>
10 <html>
11 <head>
12
charset=UTF-8”/>
13 <title>Validação Implícita</title>
14 </head>
15 <body>
17 <h:form>
<h:inputText id=”nome” value=”#{func.nome}” required=”true”
20
/>
21 <h:message for=”nome” style=”color:#FF0000;” />
22

UNIDADE 2
<h:inputText id=”salario” value=”#{func.salario}”

24
required=”true”/>
25 <h:message for=”salario” style=”color:#FF0000;” />
26
<h:inputText id=”idade” value=”#{func.idade}”
28
required=”true”/>
29 <h:message for=”idade” style=”color:#FF0000;” />
30
31 </h:panelGrid>
<h:commandButton value=”cadastrar” action=”#{func.
33
ATENÇÃO! cadastrar}”/>
É importante observar que esse 34 </h:form>
método de validação utiliza
mensagens predefinidas para as 35 </body>
mensagens de erro. Informações 36 </html>
a respeito da tradução dessas 37 </f:view>
mensagens para o português
brasileiro podem ser encontradas Fim Código 16
no site: <https://javaserverfaces.
dev.java.net/issues/show_bug.
cgi?id=935>. Acesso em: 2 fev. O método “cadastrar”, do bean FuncionarioBean, foi alterado conforme
2010. demonstrado a seguir. As linhas em destaque indicam as alterações.
Código 17
2
6 }else if (t.equals(“2”)) {
8 }
9 return null;
10 }
Fim Código 17
Finalmente, altere o arquivo web.xml substituindo o arquivo de boas-vindas

para <welcome-file>faces/validacaoimplicita.jsp</welcome-file>. Em seguida,
você já pode visualizar sua aplicação em funcionamento.

Figura 18 Resultado da validação do formulário utilizando o método implícito.

UNIDADE 2
O método de validação explícita é outra maneira utilizada para garantir a

integridade dos dados dos formulários. Esse tipo de validação pode ser empregado para
verificar se as informações de um campo são de um determinado tipo, ou seja, se os
dados estão entre um valor mínimo e um valor máximo ou, ainda, se os dados possuem
uma determinada quantidade de caracteres. Vamos codificar um exemplo para demonstrar
essa metodologia. Para isso, crie uma cópia do arquivo validacaoimplicita.jsp e altere
seu nome para validacaoexplicita.jsp.
O código da página validacaoexplicita.jsp é apresentado da seguinte forma:
Código 18
2
5
8
9 <f:view>
10 <html>
11 <head>
12
charset=UTF-8”/>
13 <title>Validação Explícita</title>
14 </head>
15 <body>
17 <h:form>
<h:inputText id=”nome” value=”#{func.nome}”
20
required=”true” >
21 <f:validateLength minimum=”5” maximum=”16” />
22 </h:inputText>
23 <h:message for=”nome” style=”color:#FF0000;” />
24
<h:inputText id=”salario” value=”#{func.salario}”
26
required=”true”>
27 <f:validateDoubleRange minimum=”500.00” />
28 </h:inputText>
29 <h:message for=”salario” style=”color:#FF0000;” />
30
<h:inputText id=”idade” value=”#{func.idade}”
32
required=”true”>
33 <f:validateLongRange minimum=”18” />
34 </h:inputText>
35 <h:message for=”idade” style=”color:#FF0000;” />
36
37 </h:panelGrid>
39
action=”#{func.cadastrar}”/>
40 </h:form>
41 </body>
42 </html>
43 </f:view>
Fim Código 18

UNIDADE 2
A classe FuncionarioBean também necessita de algumas alterações. Nos dados

a seguir, é possível visualizar o código alterado do método cadastrar:
Código 19
9 }
11 }
Fim Código 19
Por fim, é necessário definir as regras de navegação da aplicação conforme

apresentado na Figura 19.

Figura 19 Regras de navegação da aplicação.
Altere a página de boas-vindas do seu projeto para validacaoexplicita.jsp e

teste-o.

Figura 20 Aplicação para validação de informações utilizando o método explícito.

UNIDADE 2
Agora, vamos aprender como é possível traduzir as mensagens de validação

do framework JSF para o português-brasil. Para isso, é preciso criar um arquivo de
propriedades clicando com o botão direito do mouse sobre o nome do projeto (JSF_
Exemplo03). Selecione as opções Novo à Outro à Outro e, em seguida, escolha “Arquivo
de Propriedade”.
Especifique o nome do arquivo como “Mensagens” e o pacote como “bean”. A

estrutura do projeto será semelhante à Figura 21.

Figura 21 Estrutura do projeto.
No arquivo Mensagens.properties, adicione a linha seguinte e não se esqueça

de salvar o arquivo.
1 javax.faces.component.UIInput.REQUIRED=O campo é requerido.
Para finalizar, adicione ao arquivo de configuração faces-config.xml uma

referência às mensagens personalizadas, como apresentado a seguir:
1 <application>
2 <message-bundle>bean.Mensagens</message-bundle>
3 </application>
Execute a aplicação e clique no botão “cadastrar” sem preencher os campos.

Você poderá visualizar as mensagens traduzidas para o português-brasil:

UNIDADE 2

Figura 22 Tradução das mensagens de validação de dados do framework JSF.
7 CONSIDERAÇÕES
Nesta unidade, foram apresentados os conceitos introdutórios a respeito do
framework JavaServer Faces.
Além disso, você estudou os principais conceitos e viu como realizar a validação
de dados nos formulários web.
Na próxima unidade, você continuará o estudo sobre o framework JavaServer

Faces e terá a oportunidade de compreender como é possível integrar esse framework a
um banco de dados.
INFORMAÇÃO:
Para ampliar seus
tema abordado nesta unidade,
8 SUGESTÕES BIBLIOGRÁFICAS
podem muito acrescentar em sua HORSTMANN, C. S.; GEARY, D. M. Core JavaServer Faces. Rio de Janeiro: Alta Books,
prática profissional. 2007.
9 REFERÊNCIAS BIBLIOGRÁFICAS
FALLOWS, R. J.; JACOBI, J. Pro JSF and Ajax: building rich internet components. New
York: Apress, 2006.
10 E-REFERÊNCIAS
JAVA SERVER FACES. Glass fish: Project Mojarra. Disponível em: <https://javaserverfaces.
dev.java.net/issues/show_bug.cgi?id=935>. Acesso em: 2 fev. 2010.

Unidade
JAVASERVER FACES (JSF) –
INTEGRAÇÃO COM BANCO DE
DADOS
3
Objetivos
• Descrever e integrar as interfaces construídas com o framework JSF e
com banco de dados.
• Aplicar o Java Database Connectivity (JDBC) na construção de aplicações

Web com JSF.
• Desenvolver aplicações Web associando os frameworks JSF ao

Hibernate.
Conteúdos
• Utilizando JSF com JDBC.
• Utilizando JSF com mapeamento objeto-relacional (Hibernate).

UNIDADE 3
ATENÇÃO!
Ao iniciar seus estudos, lembre-
se de que a autodisciplina poderá
auxiliá-lo a monitorar seus
1 INTRODUÇÃO
pensamentos, sua imaginação,
suas emoções e seus impulsos Na unidade anterior, você estudou os principais conceitos do framework JSF
canalizando-os para a
aprendizagem dos conteúdos desde seus componentes até a validação de informações.
aqui tratados. Pense nisso...
Vale ressaltar que os exemplos apresentados até o momento utilizavam apenas
informações simples, as quais eram adicionadas por meio dos formulários.
Nesta unidade, você aprenderá como integrar o framework JSF a um banco de

dados relacional. Para demonstrar a versatilidade do framework, você estudará como é
possível utilizar JDBC com JSF e, também, como trabalhar com o mapeamento objeto-
relacional Hibernate.
Bom estudo!
2 UTILIZANDO JSF COM JDBC

Para demonstrar a integração do JSF com banco de dados utilizando JDBC,
vamos criar um exemplo completo. Nesse exemplo, teremos as principais operações para
manipulação de informações no banco de dados: inserção, exclusão, alteração e listagem.
Vale lembrar que essa aplicação tem como objetivo controlar os funcionários de uma
empresa.
O primeiro passo é criar um novo projeto para aplicação Web, denominado

“JSF_Exemplo04”, lembrando-se de que é necessário selecionar o framework JavaServer
Faces.
Nesse exemplo, utilizaremos o banco de dados MySQL para o armazenamento

das informações, mas você pode utilizar o banco de dados de sua preferência. Entretanto,
é importante respeitar as seguintes configurações:
• nome do banco: bdfuncionario.

• nome da tabela: funcionário.
O script SQL para a criação da tabela para o banco de dados MySQL é apresentado
na listagem a seguir:
Código 1
1 CREATE TABLE IF NOT EXISTS `funcionario` (
2 ìd` int(11) NOT NULL auto_increment,
3 `nome` varchar(45) NOT NULL,
4 èndereco` varchar(60) NOT NULL,
5 `bairro` varchar(40) NOT NULL,
6 `cidade` varchar(40) NOT NULL,
7 `cep` varchar(9) NOT NULL,
8 `salario` double NOT NULL,
9 PRIMARY KEY (ìd`)
10 ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Fim Código 1
Para facilitar os testes da aplicação, você pode inserir alguns dados na tabela
como no exemplo:

UNIDADE 3
id nome endereço bairro cidade CEP salário

1 João da Silva Rua Caxambu, 83 Vila Madalena São Paulo 11022-322 625,00
2 Carlos Antônio Rua Guaxupé, 123 Tatuapé São Paulo 10234-889 880,00
Vamos iniciar a codificação da aplicação criando uma classe Java, denominada

“Funcionario”, dentro do pacote modelo. O código é apresentado da seguinte forma:
Código 2
1 package modelo;
2
3 public class Funcionario {
4
5 private int id;
7 private String endereco;
8 private String bairro;
9 private String cidade;
10 private String cep;
11 private double salario;
12
13 public Funcionario() {
14 }
15
16 //Métodos GETs e SETs
17 }
Fim Código 2
Continuando o desenvolvimento da aplicação, vamos criar dois pacotes Java

para a organização do código:
• controle;
• controle.dao.
No pacote controle.dao, adicione a classe Java Conexao, que será responsável

pela configuração e pela conexão da aplicação com o banco de dados. O código para
conexão com o banco de dados MySQL é descrito a seguir:
Código 3
1 package controle.dao;
2
3 import java.sql.Connection;
4 import java.sql.DriverManager;
5
6 public class Conexao {
7
8 private static final String DRIVER = “com.mysql.jdbc.Driver”;
private static final String URL =
9
“jdbc:mysql://localhost/bdfuncionario”;
10 private static final String USUARIO = “root”;
11 private static final String SENHA = “root”;
12
13 public static Connection Conectar(){
14
15 try {
16 Class.forName(DRIVER);
17 return DriverManager.getConnection(URL,USUARIO,SENHA);
18 } catch (Exception e) {
19 System.out.println(“Erro na conexão com banco”);
20 return null;
21 }
22 }
23 }
Fim Código 3

UNIDADE 3
Neste momento, é importante verificar se o driver JDBC, do banco de dados

escolhido, foi adicionado ao projeto. Para isso, verifique, nas bibliotecas do projeto, se
existe o MySQL JDBC Driver.
O próximo passo será codificar a classe Java responsável pelas operações com
o banco de dados. Então, crie uma classe Java no pacote controle.dao, denominada
FuncionarioDAO. As operações da classe são autoexplicativas e os códigos são
apresentados da seguinte forma:
• inserir:
Código 4
1 public boolean inserir(Funcionario f){
2
3 String sql = “INSERT INTO bdfuncionario.funcionario “
4 + “(nome,endereco,bairro, cidade, cep, salario) “
5 + “VALUES (?,?,?,?,?,?)”;
6 try {
7 con = Conexao.Conectar();
8 PreparedStatement p = con.prepareStatement(sql);
9 p.setString(1, f.getNome());
10 p.setString(2, f.getEndereco());
11 p.setString(3, f.getBairro());
12 p.setString(4, f.getCidade());
13 p.setString(5, f.getCep());
14 p.setDouble(6, f.getSalario());
15 p.executeUpdate();
16 con.close();
17 return true;
19 System.out.println(“Erro ao inserir os dados.”);
20 }
21 return false;
22 }
Fim Código 4
• excluir:
Código 5
1 public boolean excluir(Funcionario f){
2 try{
PreparedStatement p = con.prepareStatement(“
4
DELETE FROM funcionario WHERE id = ?”);
5 p.setInt(1, f.getId());
6
8 con.close();
9 }catch (SQLException e) {
10 System.out.println(“Erro ao excluir os dados.”);
11 return false;
12 }
13 return true;
14 }
Fim Código 5

UNIDADE 3
• atualizar:
Código 6
1 public boolean atualizar(Funcionario f){
2 try{
3
4 String sql = “UPDATE funcionario SET nome = ?,”
5 + “endereco=?,bairro=?,cidade=?,cep=?,”
6 + “salario=? WHERE id = ?”;
8 PreparedStatement p = con.prepareStatement(sql);
9 p.setString(1, f.getNome());
10 p.setString(2, f.getEndereco());
11 p.setString(3, f.getBairro());
12 p.setString(4, f.getCidade());
13 p.setString(5, f.getCep());
14 p.setDouble(6, f.getSalario());
15 p.setInt(7, f.getId());
17 con.close();
19 System.out.println(“Erro ao atualizar os dados.”);
20 return false;
21 }
22 return true;
23 }
Fim Código 6
• exibir:
Código 7
1 public Funcionario exibir(int id){
2 Funcionario f = new Funcionario();
3 try{
PreparedStatement p = con.prepareStatement(“
5
“SELECT * FROM funcionario WHERE id = ?”);
6 p.setInt(1, id);
7 ResultSet rs = p.executeQuery();
8 while (rs.next()){
9 f.setId(rs.getInt(1));
10 f.setNome(rs.getString(2));
11 f.setEndereco(rs.getString(3));
12 f.setBairro(rs.getString(4));
13 f.setCidade(rs.getString(5));
14 f.setCep(rs.getString(6));
15 f.setSalario(rs.getDouble(7));
16 }
17 con.close();
19 System.out.println(“Erro ao exibir os dados.”);
20 }
21 return f;
22 }
Fim Código 7

UNIDADE 3
• listar:
Código 8
1 public List listar(){
2 List lista = new ArrayList();
3 try{
PreparedStatement p = con.prepareStatement(
5
“SELECT * FROM funcionario ORDER BY id”);
7
8 while (rs.next()){
9 Funcionario f = new Funcionario();
10 f.setId(rs.getInt(1));
11 f.setNome(rs.getString(2));
12 f.setEndereco(rs.getString(3));
13 f.setBairro(rs.getString(4));
14 f.setCidade(rs.getString(5));
15 f.setCep(rs.getString(6));
16 f.setSalario(rs.getDouble(7));
17 lista.add(f);
18 }
20 System.out.println(“Erro ao listar os dados.”);
21 }
22 return lista;
23 }
Fim Código 8
O próximo passo é criar uma bean, que será responsável por controlar toda
a lógica da sua aplicação. Para isso, crie uma Bean gerenciado JSF, dentro do pacote
controle, com as seguintes configurações:
a) Nome da classe: FuncionarioBean.
b) Pacote: controle.
c) Nome: func.
d) Escopo: session.
A listagem a seguir apresenta a configuração da bean FuncionarioBean no arquivo

faces-config.xml:
Código 9
1 <managed-bean>
2 <managed-bean-name>func</managed-bean-name>
3 <managed-bean-class>
4 controle.FuncionarioBean
5 </managed-bean-class>
6 <managed-bean-scope>session</managed-bean-scope>
7 </managed-bean>
Fim Código 9
Pensando na arquitetura de desenvolvimento MVC, a classe FuncionarioBean

funciona como controladora da aplicação. Todas as requisições e respostas processadas
pela aplicação são processadas por essa classe. O código é apresentado da seguinte
forma:

UNIDADE 3
Código 10
1 package controle;
2
3 import controle.dao.FuncionarioDAO;
4 import javax.faces.context.FacesContext;
5 import javax.faces.model.*;
6 import javax.servlet.http.HttpServletRequest;
7 import modelo.Funcionario;
8
9 public class FuncionarioBean {
10
11 private Funcionario dados;
12 private FuncionarioDAO dao;
13 private DataModel lista;
14
15 public FuncionarioBean() {
16 dados = new Funcionario();
17 dao = new FuncionarioDAO();
18 }
19
20 public String inserir(){
21 dados = new Funcionario();
22 return “confirmarinserir”;
23 }
24 public String executeInserir() {
25 return dao.inserir(dados) ? “sucesso” : “erro”;
26 }
27
28 public String excluir() {
29 dados = dao.exibir(getId());
30 return “confirmarexcluir”;
31 }
32 public String executeExcluir() {
33 return dao.excluir(dados) ? “sucesso” : “erro”;
34 }
35
36 public String atualizar() {
37 dados = dao.exibir(getId());
38 return “confirmaratualizar”;
39 }
40 public String executeAtualizar() {
41 return dao.atualizar(dados) ? “sucesso” : “erro”;
42 }
43
44 public DataModel getLista() {
45 lista = new ListDataModel(dao.listar());
46 return lista;
47 }
48
49 public Funcionario getDados() {…}
50 public void setDados(Funcionario dados) {...}
51
52 public int getId() {
53 FacesContext contexto = FacesContext.getCurrentInstance();
HttpServletRequest req = (HttpServletRequest)
54
contexto.getExternalContext().getRequest();
55 return Integer.parseInt(req.getParameter(“pid”));
56 }
57 }
Fim Código 10

UNIDADE 3
A classe possui três atributos, utilizados para manipulação das informações e do

comportamento da aplicação. O atributo dados realiza a vinculação entre as informações
contidas nos componentes de interação do usuário e a lógica da aplicação. Já o atributo
dao fornece à aplicação todas as funcionalidades referentes à integração com banco de
dados. Com esse objeto, é possível inserir, excluir, alterar, exibir e listar os funcionários no
banco de dados. As operações de manipulação com banco de dados estão descritas desde
a linha 20 até a 40.
O atributo lista armazena um tipo específico do framework JSF, denominado

“DataModel”; ele é utilizado para apresentar as informações por meio de um componente
JSF, chamado “dataTable”, o qual será estudado em breve. Como é possível notar na
linha 43, esse atributo recebe o conteúdo do método dao.listar().
A classe FuncionarioBean possui um método específico, denominado “getId()”,

cujo objetivo é receber um parâmetro enviado por meio do formulário (view). Esse
parâmetro é passado por meio de um componente chamado “param” e, como apresentado
nas linhas de 50 a 54, essa informação pode ser tratada na lógica da aplicação. Com isso,
esse método apresenta outra maneira para a troca de informações entre a camada de
apresentação de dados e a lógica de negócios da aplicação.
Terminada a codificação do controlador, toda a lógica de negócios da aplicação

Web está pronta. Vamos, agora, começar a codificação da apresentação (view). Para isso,
crie uma página JSF JSP denominada “index.jsp”. Nessa página, você aprenderá novos
conceitos do framework JSF.
Vamos começar codificando o cabeçalho da página conforme apresentado a

seguir. Note que um novo componente foi utilizado, denominado “loadBundle”. Esse
componente permite o carregamento de um arquivo contendo um conjunto de mensagens
(strings) que podem ser utilizadas na aplicação. Esse tipo de abordagem é muito empregado
em aplicações Web, uma vez que, com isso, é possível centralizar todas as mensagens do
sistema. Ademais, esse processo facilita a manutenção da aplicação e permite a troca de
idiomas de forma rápida e eficiente.
Código 11
1 <head>
2 <f:loadBundle basename=”util.configuracoes” var=”conf” />
3 <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”/>
4 <title><h:outputText value=”#{conf.Titulo}”/></title>
5 <link rel=”stylesheet” type=”text/css” href=”estilo.css”>
6 </head>
Fim Código 11
Quando utilizamos o componente loadBundle, devemos definir o arquivo que

contém as mensagens por meio da propriedade basename, bem como o nome da
variável que será utilizada ao longo da página na propriedade var. Na linha 4, é possível
visualizar como as mensagens são utilizadas. Assim, no lugar de conf.Titulo, será exibida
a mensagem “Titulo”, especificada no arquivo “util.configuracoes”. Note que o arquivo de
configurações está armazenado dentro de um pacote denominado “util”.
Para criar o arquivo de mensagens, clique com o botão direito do mouse sobre
o pacote “util”, selecione Novo à Outro à Outro e prossiga até alcançar a opção “Arquivo
de Propriedades”. O conteúdo do arquivo é apresentando a seguir.

UNIDADE 3
Código 12
1 Titulo=Controle de Funcionários
2 Id=Código
3 Nome=Nome
4 Endereco=Endereço
5 Bairro=Bairro
6 Cidade=Cidade
7 Cep=CEP
8 Salario=Salário
Fim Código 12
Observe, também, que, no cabeçalho da página, é incluído um arquivo de estilos

em cascata denominado “estilo.css”. O conteúdo é descrito a seguir:
Código 13
1 body{
2 font-family: Tahoma;
3 font-size: 14px;
4 }
5
6 table{
7 width:100%;
8 }
9 .cabecalho {
10 font-weight: bold;
11 color: white;
12 background-color: #3D77C0;
13 text-align: center;
14 }
15
16 .linhaPar {
17 color: black;
18 background-color: beige;
19 }
20
21 .linhaImpar {
22 color: black;
23 background-color: #E1ECF7;
24 }
Fim Código 13
O corpo principal da página index.jsp contém um componente dataTable, que

é utilizado para exibir as informações dos funcionários. Esse componente está associado ao
atributo lista, da classe FuncionarioBean, considerando que essa vinculação é realizada
por meio da propriedade var. Além disso, o componente dataTable permite a utilização
de estilos em cascata para alterar a apresentação da tabela, como pode ser notado nas
propriedades headerClass e rowClasses.
Para a construção da tabela, é necessária a utilização de um componente

denominado “column”, com o qual é possível definir as colunas da tabela. Note que,
nas duas últimas colunas da tabela, são utilizados componentes do tipo commandLink
associados ao componente param. Lembre-se de que esse componente param está
associado ao método getId() da classe FuncionarioBean. O código do corpo principal
da página index.jsp é apresentado a seguir.

UNIDADE 3
Código 14
1 <h1><h:outputText value=”#{conf.Titulo}”/></h1>
2 <h:form>
3 <h:dataTable id=”TabFuncionarios” value=”#{func.lista}” var=”lista”
4 headerClass=”cabecalho” rowClasses=”linhaPar,linhaImpar”>
5 <h:column >
6 <f:facet name=”header”>
7 <h:outputText value=”#{conf.Id}” />
8 </f:facet>
9 <h:outputText value=”#{lista.id}”/>
10 </h:column>
11 <h:column >
13 <h:outputText value=”#{conf.Nome}” />
14 </f:facet>
15 <h:outputText value=”#{lista.nome}”/>
16 </h:column>
17 <h:column >
19 <h:outputText value=”#{conf.Endereco}” />
20 </f:facet>
21 <h:outputText value=”#{lista.endereco}”/>
22 </h:column>
23 <h:column >
25 <h:outputText value=”#{conf.Bairro}” />
26 </f:facet>
27 <h:outputText value=”#{lista.bairro}”/>
28 </h:column>
29 <h:column >
31 <h:outputText value=”#{conf.Cidade}” />
32 </f:facet>
33 <h:outputText value=”#{lista.cidade}”/>
34 </h:column>
35 <h:column >
37 <h:outputText value=”#{conf.Cep}” />
38 </f:facet>
39 <h:outputText value=”#{lista.cep}”/>
40 </h:column>
41 <h:column >
43 <h:outputText value=”#{conf.Salario}” />
44 </f:facet>
45 <h:outputText value=”#{lista.salario}”>
46 <f:convertNumber pattern=”R$ ###,###.00 “/>
47 </h:outputText>
48 </h:column>
49 <h:column >
50 <h:commandLink action=”#{func.atualizar}” value=”atualizar”>
51 <f:param name=”pid” value=”#{lista.id}” />
52 </h:commandLink>
53 </h:column>
54 <h:column >
55 <h:commandLink action=”#{func.excluir}” value=”excluir”>
56 <f:param name=”pid” value=”#{lista.id}” />
57 </h:commandLink>
58 </h:column>
59 </h:dataTable>
60 <h:commandLink action=”=”#{func.inserir}” value=”Inserir Funcionário” />
61 </h:form>
Fim Código 14

UNIDADE 3
Apesar de todas as funcionalidades da aplicação ainda não estarem funcionando,

você já pode visualizar como está seu projeto. Clique no botão para executar a aplicação
e veja o resultado conforme a figura.

Figura 1 Aplicação Web para controle de funcionários utilizando JSF.
O próximo passo é a codificação da funcionalidade Inserir Funcionário. Para

isso, crie uma nova página, denominada “inserir.jsp”. O conteúdo é apresentado da
seguinte forma:
Código 15
2
5
8
9 <f:view>
10 <html>
11 <head>
16 </head>
17 <body>
19 <h2>Adicionar Funcionário</h2>
20 <h:form>
<h:inputText id=”nome” size=”45” maxlength=”45”
23
value=”#{func.dados.nome}” />
24
25 <h:outputText value=”Endereço:” />
<h:inputText id=”endereco” size=”60” maxlength=”60”
26
value=”#{func.dados.endereco}” />
27
28 <h:outputText value=”Bairro:” />
<h:inputText id=”bairro” size=”40” maxlength=”40”
29
value=”#{func.dados.bairro}” />

UNIDADE 3
30
31 <h:outputText value=”Cidade:” />
<h:inputText id=”cidade” size=”30” maxlength=”30”
32
value=”#{func.dados.cidade}” />
33
34 <h:outputText value=”CEP:” />
<h:inputText id=”cep” size=”9” maxlength=”9”
35
value=”#{func.dados.cep}” />
36
37 <h:outputText value=”Salário:” />
<h:inputText id=”salario”
38
value=”#{func.dados.salario}”>
39 <f:convertNumber pattern=”#,###.##” />
40 </h:inputText>
41 </h:panelGrid>
<h:commandButton value=”inserir” action=”#{func.executeInserir}”
42
/>
43 <h:commandButton value=”cancelar” action=”inicio” />
44 </h:form>
45 </body>
46 </html>
47 </f:view>
Fim Código 15
Você pode executar sua aplicação para visualizar a interface de inserção de

funcionários. O resultado é apresentado a seguir.

Figura 2 Aplicação Web com interface para inserir funcionários.
A interface para atualização de informações dos funcionários é muito semelhante

à página de inserção. Para facilitar a codificação, você pode fazer uma cópia do arquivo
inserir.jsp e renomeá-la para atualizar.jsp. O código é apresentado da seguinte
forma:

UNIDADE 3
Código 16
2
5
8
9 <f:view>
10 <html>
11 <head>
16 </head>
17 <body>
19 <h2>Atualizar Funcionário</h2>
20 <h:form>
<h:inputText id=”nome” size=”45” maxlength=”45”
23
value=”#{func.dados.nome}” />
24
25 <h:outputText value=”Endereço:” />
<h:inputText id=”endereco” size=”60” maxlength=”60”
26
value=”#{func.dados.endereco}” />
27
28 <h:outputText value=”Bairro:” />
<h:inputText id=”bairro” size=”40” maxlength=”40”
29
value=”#{func.dados.bairro}” />
30
31 <h:outputText value=”Cidade:” />
<h:inputText id=”cidade” size=”30” maxlength=”30”
32
value=”#{func.dados.cidade}” />
33
34 <h:outputText value=”CEP:” />
<h:inputText id=”cep” size=”9” maxlength=”9”
35
value=”#{func.dados.cep}” />
36
37 <h:outputText value=”Salário:” />
<h:inputText id=”salario”
38
value=”#{func.dados.salario}”>
39 <f:convertNumber pattern=”#,###.##” />
40 </h:inputText>
41 </h:panelGrid>
<h:commandButton value=”atualizar”
42
action=”#{func.executeAtualizar}” />
44 </h:form>
45 </body>
46 </html>
47 </f:view>
Fim Código 16
Você pode visualizar a interface de atualização de informações clicando no

item “atualizar” de um dos funcionários previamente cadastrados. Com isso, a seguinte
interface será exibida:

UNIDADE 3

Figura 3 Interface web para atualização das informações do funcionário.
Para exclusão de funcionários, você deve criar uma nova página, denominada
“excluir.jsp”. Nessa página, o usuário poderá confirmar a exclusão de um determinado
funcionário. O código é apresentado da seguinte forma:
Código 17
2
5
8
9 <f:view>
10 <html>
11 <head>
16 </head>
17 <body>
18 <h:form>
20 <h2>Excluir Funcionário</h2>
21 <h3>
22 Tem certeza que deseja excluir o funcionário <b>
23 <h:outputText id=”nome” value=”#{func.dados.nome}” />
24 </b> ?
25 </h3>
26 <h:commandButton value=”excluir” action=”#{func.executeExcluir}”/>
28 </h:form>
29 </body>
30 </html>
31 </f:view>
Fim Código 17

UNIDADE 3
Para visualizar a interface de exclusão, clique no item “excluir” de um dos

funcionários da página inicial. Você visualizará a seguinte figura:

Figura 4 Interface web utilizada para confirmação da exclusão de um funcionário.
Concluindo a construção da aplicação, crie um arquivo denominado “sucesso.

jsp”. Todas as operações realizadas e executadas corretamente serão encaminhadas para
esse arquivo. O conteúdo é apresentado a seguir:
Código 18
2
5
8
9 <f:view>
10 <html>
11 <head>
16 </head>
17 <body>
19 <h2><h:outputText value=”Operação realizada com sucesso.”/></h2>
20 <h:form>
21 <h:commandButton value=”página inicial” action=”inicio” />
22 </h:form>
23 </body>
24 </html>
25 </f:view>
Fim Código 18
Você pode criar, também, um arquivo para exibir mensagens de erro aos
usuários. O conteúdo do arquivo erro.jsp é apresentado da seguinte forma:

UNIDADE 3
Código 19
2
5
8
9 <f:view>
10 <html>
11 <head>
16 </head>
17 <body>
19 <h2><h:outputText value=”Erro ao realizar operação.”/></h2>
20 <h:form>
21 <h:commandButton value=”página inicial” action=”inicio” />
22 </h:form>
23 </body>
24 </html>
25 </f:view>
Fim Código 19
Para finalizar a construção da aplicação, vamos criar as suas regras de navegação.

Essas regras podem ser criadas por meio do editor visual ou mediante a codificação do
arquivo faces-config.xml.

Figura 5 Regras de navegação da aplicação.

UNIDADE 3
Finalmente, você pode testar todas as funcionalidades da sua aplicação Web

para controle de funcionários. A estrutura final do seu projeto é semelhante à Figura 6.

Figura 6 Estrutura do projeto para controle de funcionários.
3 UTILIZANDO JSF COM MAPEAMENTO OBJETO-RELACIONAL

(HIBERNATE)
Quando criamos aplicações integradas a banco de dados, uma das tarefas mais
dispendiosas é a codificação das classes responsáveis pela comunicação da aplicação com
o banco. Como demonstrado no exemplo anterior, as aplicações utilizando JDBC funcionam
adequadamente, mas podem ser pouco produtivas do ponto de vista do desenvolvimento,
uma vez que demandam muitas linhas de código.
Nos últimos anos, grandes esforços têm sido empregados no desenvolvimento

de frameworks para facilitar a comunicação das aplicações com os bancos de dados.
Esses frameworks buscam, além de agilizar o desenvolvimento, auxiliar na persistência de
dados quando se desenvolvem aplicações utilizando o paradigma orientado a objetos.
Dentre os diversos frameworks, o Hibernate tem demonstrado grande

aplicabilidade no mapeamento entre objetos e bancos de dados relacionais. A principal

UNIDADE 3
ATENÇÃO! utilização desse framework é com a linguagem Java; no entanto, outras soluções também
Para saber mais sobre o
Hibernate, acesse o site
estão disponíveis, como por exemplo, para o framework .NET, da Microsoft.
disponível em: <http://www.
hibernate.org/>. Acesso em: 2
fev. 2010. Para demonstrar a utilização do mapeamento objeto-relacional em aplicações
Web e como é possível integrar essa tecnologia ao framework JavaServer Faces, vamos
criar uma nova versão da aplicação Controle de Funcionários.
Realize uma cópia do seu projeto JSF_Exemplo04 e altere seu nome para
JSF_Exemplo05 para facilitar o desenvolvimento. Em seguida, adicione ao projeto as
bibliotecas do framework Hibernate. Se você estiver utilizando o ambiente NetBeans,
clique com o botão direito do mouse sobre o item do projeto Bibliotecas e selecione
Adicionar Bibliotecas. Para que o projeto funcione adequadamente, adicione as seguintes
bibliotecas:
• Hibernate.
• Hibernate JPA.
Quando trabalhamos com o framework Hibernate, é comum a criação de uma

classe para gerenciar as sessões de manipulação com o banco de dados. Essa classe é
denominada “HibernateUtil”. Ela substitui o papel da classe Conexão, a qual pode ser
removida do projeto. Em nosso projeto, você pode adicioná-la ao pacote “util”, e o código
é apresentado da seguinte forma:
Código 20
1 package util;
2
3 import org.hibernate.cfg.AnnotationConfiguration;
4 import org.hibernate.SessionFactory;
5
6 public class HibernateUtil {
7 private static final SessionFactory sessionFactory;
8
9 static {
10 try {
sessionFactory = new
11
AnnotationConfiguration().configure().buildSessionFactory();
12 } catch (Throwable ex) {
System.err.println(“Initial SessionFactory creation failed.”
13
+ ex);
14 throw new ExceptionInInitializerError(ex);
15 }
16 }
17 public static SessionFactory getSessionFactory() {
18 return sessionFactory;
INFORMAÇÃO:
19 }
O ambiente NetBeans possui
um template que gera, 20 }
automaticamente, a classe
HibernateUtil. Para isso, clique Fim Código 20
com o botão direito do mouse
sobre o projeto, selecione Novo
à Outro à Hibernate e, em O próximo passo é a criação de um arquivo de configuração contendo todas as
seguida, HibernateUtil.java. propriedades de acesso ao banco de dados, bem como as classes que serão mapeadas.
ATENÇÃO! Esse arquivo é chamado hibernate.cfg.xml.
Para que sua aplicação funcione
adequadamente, o arquivo
de configuração do Hibernate
(hibernate.cfg.xml) deve ser
colocado na pasta-base da
aplicação (src/java). Na estrutura
do projeto, ele deve ser disposto
em pacote padrão.

UNIDADE 3
Código 21
<!DOCTYPE hibernate-configuration PUBLIC “-//Hibernate/Hibernate
2 Configuration DTD 3.0//EN” “http://hibernate.sourceforge.net/hibernate-
configuration-3.0.dtd”>
3 <hibernate-configuration>
4 <session-factory>
5 <property name=”hibernate.dialect”>
6 org.hibernate.dialect.MySQLDialect
7 </property>
8 <property name=”hibernate.connection.driver_class”>
9 com.mysql.jdbc.Driver
10 </property>
11 <property name=”hibernate.connection.url”>
12 jdbc:mysql://localhost:3306/bdfuncionario
13 </property>
14 <property name=”hibernate.connection.username”>root</property>
15 <property name=”hibernate.connection.password”>root</property>
16 <property name=”hibernate.show_sql”> true</property>
17 <mapping class=”modelo.Funcionario” />
18 </session-factory>
19 </hibernate-configuration>
Fim Código 21
Lembre-se de que essa aplicação utiliza o banco de dados MySQL, como

demonstrado na linha 8 (com.mysql.jdbc.Driver). Caso você esteja utilizando outro banco,
é necessário alterar as configurações. Além disso, verifique as configurações de usuário e
a senha utilizadas para acesso ao banco (linhas 14 e 15).
A próxima tarefa que deve ser realizada no projeto é a criação da classe de

persistência. Essa classe é responsável pelo mapeamento entre os objetos da classe Java
e as tabelas do banco de dados. Nesse projeto, vamos aproveitar a classe previamente
codificada Funcionario, disponível no pacote modelo.
A vinculação entre a classe Java e as tabelas do banco de dados é realizada

por meio de Anotações (do inglês Anotattions). Para utilização dessas anotações no
mapeamento da classe, é necessário importar o pacote javax.persistence*.
A primeira anotação que deve ser adicionada à classe é a especificação de

entidade, a qual é realizada com @Entity. Em seguida, é necessário definir um identificador
único para a classe; assim, utilizamos a anotação @Id. As classes definidas como entidade
devem implementar a interface Serializable.
Para realizar o mapeamento entre a classe e as tabelas do banco de dados,

vamos utilizar a anotação @Table, com a qual podemos fazer a ligação entre a classe
Funcionario e a tabela funcionario. As anotações também podem ser empregadas nos
atributos da classe para vinculação com os campos da tabela. Para isso, utilizamos a
propriedade @Column.
Outra propriedade importante é a @GeneratedValue, utilizada para definir um

atributo com autoincremento. A definição da estratégia (strategy) como GenerationType.
AUTO indica que o banco de dados será responsável pelo incremento dos valores.
O código completo da classe Funcionário, com suas respectivas anotações, é

apresentado da seguinte forma:

UNIDADE 3
Código 22
1 package modelo;
2
3 import java.io.Serializable;
4 import javax.persistence.*;
5
6 @Entity
7 @Table(name=”funcionario”)
8 public class Funcionario implements Serializable {
9 @Id
10 @GeneratedValue(strategy=GenerationType.AUTO)
11 private int id;
12
13 @Column(name=”nome”,nullable=false,length=45)
15
16 @Column(name=”endereco”,nullable=false,length=60)
18
19 @Column(name=”bairro”,nullable=false,length=40)
21
22 @Column(name=”cidade”,nullable=false,length=40)
24
25 @Column(name=”cep”,nullable=false,length=9)
26 private String cep;
27
28 @Column(name=”salario”,nullable=false)
29 private double salario;
30
31 // CONSTRUTOR
32 public Funcionario() {
33 }
34
35 //MÉTODOS GETs e SETs
36 ...
37 }
Fim Código 22
Para especificar o mapeamento entre a classe e a tabela do banco de dados,

é necessário adicionar uma declaração no arquivo de configuração (hibernate.cfg.
xml). Verifique se o mapeamento da classe foi corretamente definido no arquivo de
configuração.
1 <mapping class=”modelo.Funcionario” />
Por fim, vamos alterar o conteúdo da classe FuncionarioDAO para trabalharmos

com a metodologia do framework Hibernate. O código completo da classe FuncionarioDAO
é apresentado a seguir.
Código 23
2
4 import modelo.Funcionario;
5 import org.hibernate.Session;
6 import util.HibernateUtil;
7

UNIDADE 3
8 public class FuncionarioDAO {

9
10 private Session session;
11
12 public FuncionarioDAO() {
13 }
14
15 public boolean inserir(Funcionario f) {
16 session = HibernateUtil.getSessionFactory().openSession();
17 session.beginTransaction();
18 session.save(f);
19 session.getTransaction().commit();
20 session.close();
21 return true;
22 }
23
24 public boolean excluir(Funcionario f) {
27 session.delete(f);
29 session.close();
30 return true;
31 }
32
33 public boolean atualizar(Funcionario f) {
36 session.update(f);
38 session.close();
39 return true;
40 }
41
42 public Funcionario exibir(int id) {
Funcionario f = (Funcionario)session.get(Funcionario.class,
44
new Integer(id));
45 session.close();
46 return f;
47 }
48
49 public List listar() {
List lista =
52
session.createQuery(“from Funcionario order by id”).list();
54 session.close();
55 return lista;
56 }
57 }
Fim Código 23
Você pode observar a simplicidade da manipulação dos dados com o banco

utilizando o Hibernate. Por exemplo, para inserir um novo funcionário no banco de dados,
abrimos, inicialmente, uma nova sessão (linha 16), a qual, na prática, abre uma conexão
com o banco. Em seguida, é iniciada uma nova transação, cujo objetivo é garantir que
os dados sejam inseridos corretamente; caso contrário, podemos cancelar a operação. A
inserção dos dados ocorre na linha 18 com o comando session.save(f). Esse comando

UNIDADE 3
é traduzido pelo framework Hibernate para uma instrução SQL do tipo INSERT INTO.
Finalmente, é realizada a confirmação dos dados no banco (commit), e a sessão é
finalizada.
Esse padrão de manipulação de informações é adotado para todas as outras

operações, inclusive para a listagem dos funcionários.
Por fim, a estrutura do seu projeto deve ser semelhante à Figura 7.
Fonte: acervo pessoal..

4 CONSIDERAÇÕES
Nesta unidade, você aprendeu como integrar o framework para construção de
interfaces JavaServer Faces a um banco de dados. Aqui, uma aplicação Web foi desenvolvida
demonstrando todas as funcionalidades associadas à manipulação de informações na
web.

UNIDADE 3
Para apresentar a versatilidade do framework JSF, duas abordagens para

comunicação com o banco de dados foram descritas: JDBC e Hibernate.
Na primeira abordagem, você estudou como agregar a manipulação de dados

via JDBC à sua aplicação Web. Já na segunda abordagem, você trabalhou com persistência
de dados baseada no mapeamento objeto-relacional, considerando que, nesse segundo
momento, foi apresentado um novo framework, denominado “Hibernate”.
ATENÇÃO!
Para ampliar seus
5 SUGESTÕES BIBLIOGRÁFICAS sugerimos que você leia as obras
HORSTMANN, C. S.; GEARY, D. M. Core JavaServer Faces. Rio de Janeiro: Alta Books, pois ele contém informações que
2007. podem muito acrescentar em sua
FALLOWS, R. J.; JACOBI, J. Pro JSF and Ajax: building rich internet components. New
York: Apress, 2006.
6 E-REFERÊNCIAS
HIBERNATE. Homepage. Disponível em: <http://www.hibernate.org/>. Acesso em: 2 fev.
2010.

Anotações
Unidade
JAVASERVER FACES (JSF) E
SERVIÇOS WEB
Objetivos
4
• Identificar os conceitos fundamentais relativos aos serviços Web.
• Desenvolver aplicações baseadas em serviços Web e integrá-las ao

framework JSF.
• Descrever, publicar e consumir serviços Web.
Conteúdos
• Serviços Web.
• Construindo e publicando o serviço busca CEP.
• Consumindo um serviço Web por meio de uma aplicação com JSF.
• Consumindo um serviço Web por meio de uma aplicação desktop.

UNIDADE 4
ATENÇÃO!
Lembre-se de que a organização
de um horário de estudo é útil
para estabelecer hábitos e,
1 INTRODUÇÃO
assim, possibilitar que você
utilize o máximo de seu tempo e Na unidade anterior, você pôde compreender como é possível integrar o framework
de sua energia. Pense nisso...
Não se esqueça de consultar as JSF ao banco de dados e desenvolver uma aplicação completa para a manipulação de
informações contidas no Guia informações.
de disciplina e na página inicial
desta unidade.
Nesta unidade, você estudará os serviços Web e como essa tecnologia pode ser
empregada no desenvolvimento de aplicações.
Para demonstrar os conceitos dos serviços Web, você desenvolverá uma aplicação
cujo objetivo é consultar códigos postais. Esse serviço é semelhante aos oferecidos pelos
correios para a busca do CEP.
Bom estudo!
2 SERVIÇOS WEB
Os serviços Web (do inglês Web Service) representam uma tecnologia muito
importante para o desenvolvimento de aplicações baseadas na internet.
Segundo Deitel e Deitel (2008), um serviço Web pode ser definido como um
componente de software, armazenado em um computador, que pode ser acessado
por uma aplicação ou, também, por outro serviço Web. As tecnologias empregadas na
comunicação entre serviços Web são XML e HTTP. Com a linguagem Java, é possível
utilizar o protocolo Simple Object Access Protocol (SOAP), que representa um padrão
XML para comunicação e envio de dados entre serviços Web e aplicações clientes.
Uma característica importante de um serviço Web é que ele não possui interface
gráfica. Esse fato permite que qualquer tipo de aplicação (desktop, web, móvel etc.)
acesse o conteúdo do serviço Web. Além disso, os serviços podem ser oferecidos para
aplicações remotas sem interações imediatas de usuários.
Um serviço Web é formado por um componente denominado “serviço de diretório”,

que armazena as descrições dos serviços. Esse serviço obedece ao padrão “integração,
descoberta e descrição universal” (do inglês Universal Description, Discovery and
Integration – UDDI).
Os serviços Web são descritos por meio de uma linguagem de definição

denominada “WSDL” (do inglês Web Service Definition Language). Essa descrição
contém todas as informações a respeito dos serviços, tais como: operações, parâmetros,
localização etc.
A Figura 1 ilustra o funcionamento dos serviços Web.

UNIDADE 4
Fonte: adaptado de COULOURIS; DOLLIMORE; KINDBERG, 2007.

Figura 1 Funcionamento de um serviço Web.
3 CONSTRUINDO E PUBLICANDO O SERVIÇO “BUSCA CEP”

A plataforma Java fornece diversas tecnologias para o desenvolvimento de
serviços Web. Para ilustrar o funcionamento, será desenvolvido um serviço utilizando a
Java API for XML Web Services – JAX-WS. Essa API é parte integrante do J2EE e
simplifica a tarefa do programador no desenvolvimento de serviços Web.
O NetBeans oferece suporte completo para desenvolvimento de serviços Web, e

o exemplo a seguir será implementado nesse ambiente.
Para construção do serviço Web, inicialmente é necessária a criação de um novo

projeto do tipo aplicação Web. Desse modo, defina o nome do projeto como BuscaCEPWS,
considerando que não é necessário selecionar nenhum framework.
O próximo passo é a criação do serviço Web; para isso, clique com o botão
direito do mouse sobre o projeto, selecione Novo à Outro à Serviços Web e selecione
Serviço Web. Clique no botão próximo e especifique o nome do serviço como BuscaCEP
e o do pacote como controle. Por fim, clique no botão “finalizar”.
Em seguida, adicione as bibliotecas da API ao projeto:
• JAXB.
• JAX-WS.
Para manipulação das informações, crie uma classe, denominada “cep”, e

armazene-a no pacote nomeado “modelo”. O conteúdo da classe é apresentado como se
segue:
Código 1
1 package modelo;
2
3 public class Cep {
4
5 private String tipo;
6 private String logradouro;

UNIDADE 4
9 private String uf;

10
11 public Cep() {
12 }
13
14 //Métodos GETs e SETs
15
16 }
Fim Código 1
Para armazenamento das informações dos códigos postais, é necessária a criação

de um banco de dados e de uma tabela. Assim, escolha o banco de sua preferência e crie
uma base, denominada “bdcep”, e uma tabela, denominada “cep”. O script para criação
da tabela no MySQL é apresentado da seguinte forma:
Código 2
1 CREATE TABLE IF NOT EXISTS `cep` (
2 ìd` int(11) NOT NULL,
3 `cep` varchar(8) NOT NULL,
4 `tipo` varchar(20) NOT NULL,
5 `logradouro` varchar(80) NOT NULL,
6 `bairro` varchar(80) NOT NULL,
7 `cidade` varchar(50) NOT NULL,
8 ùf` varchar(2) NOT NULL,
9 PRIMARY KEY (ìd`)
10 ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Fim Código 2
É importante adicionar algumas informações na tabela para facilitar o teste da

aplicação.
Para comunicação do serviço Web com o banco de dados, utilizaremos JDBC.

Note que essa escolha se deve ao fato de a complexidade do serviço ser simples; em
aplicações mais complexas, é possível utilizar o Hibernate.
Adicione ao pacote controle uma classe para conexão (Conexao.java). Essa

classe é a mesma apresentada na unidade anterior; no entanto, por conta da mudança do
banco, a URL de conexão foi alterada. Além disso, não se esqueça de adicionar o driver
MySQL JDBC ao projeto.
Código 3
1 package controle;
2
3 import java.sql.Connection;
4 import java.sql.DriverManager;
5
6 public class Conexao {
7
8 private static final String DRIVER = “com.mysql.jdbc.Driver”;
9 private static final String URL = “jdbc:mysql://localhost/bdcep”;
10 private static final String USUARIO = “root”;
11 private static final String SENHA = “vertrigo”;
12
13 public static Connection Conectar(){
14
15 try {
16 Class.forName(DRIVER);

UNIDADE 4
17 return DriverManager.getConnection(URL,USUARIO,SENHA);
19 System.out.println(“Erro na conexão com banco”);
20 return null;
21 }
22 }
23 }
Fim Código 3
Adicione, também, uma classe ao pacote controle, denominada CepDAO. Essa

classe contém o método responsável pela consulta dos CEPs na base de dados.
Código 4
1 package controle;
2
3 import java.sql.*;
4 import modelo.Cep;
5
6 public class CepDAO {
7
8 public CepDAO() {
9 }
10
11 public Cep Buscar(String num){
12 Cep c = new Cep();
13 try {
14 Connection con = Conexao.Conectar();
PreparedStatement p = con.prepareStatement(
15
“SELECT * FROM cep WHERE cep = ?”);
16 p.setString(1, num);
18 if (rs.next()){
19 c.setTipo(rs.getString(“tipo”));
20 c.setLogradouro(rs.getString(“logradouro”));
21 c.setBairro(rs.getString(“bairro”));
22 c.setCidade(rs.getString(“cidade”));
23 c.setUf(rs.getString(“uf”));
24 }
25 return c;
27 System.out.println(“Erro ao consultar CEP.”);
28 }
29 return null;
30 }
31 }
Fim Código 4
Para terminar a codificação do serviço Web, vamos especificar a operação visível

pelas aplicações que acessarão o serviço. Para isso, abra a classe BuscaCEP do pacote
controle. Vamos adicionar uma operação denominada “buscar”, que recebe, como
parâmetro, um número, que será o CEP a ser consultado, e que retorna um objeto da
classe cep. Caso o CEP pesquisado não exista na base de dados, esse método retornará
null.

UNIDADE 4
Código 5
1 package controle;
2
3 import javax.jws.WebMethod;
4 import javax.jws.WebParam;
5 import javax.jws.WebService;
6 import modelo.Cep;
7
8 @WebService()
9 public class BuscaCEP {
10
11 @WebMethod(operationName = “buscar”)
12 public Cep buscar(@WebParam(name = “cep”)
13 String num) {
14 CepDAO dao = new CepDAO();
15 return dao.Buscar(num);
16 }
17
18 }
Fim Código 5
É importante notar que todas as operações disponibilizadas por um serviço Web

são precedidas pela anotação @WebMethod. Essa anotação determina que o método
é do serviço e, além disso, especifica como as aplicações poderão chamar esse método.
Nesse caso, o operationName foi definido como “buscar”. Os parâmetros do método são
especificados pela anotação @WebParam.
Os serviços Web precisam de um servidor web para funcionar. Assim, para

publicar nosso serviço Web, é necessário implantá-lo no servidor. Para isso, clique com o
botão direito do mouse sobre o projeto e selecione a opção implantar. Você pode testar o
serviço selecionando o item do projeto, denominado “Serviços Web”, e, em seguida, ainda
clicando com o botão direito, sobre BuscaCEP, selecionando Testar serviço Web.

Figura 2 Teste do serviço Web.

UNIDADE 4
Caso você esteja utilizando o servidor Tomcat, o resultado será o seguinte:

Figura 3 Resultado do teste de um serviço Web.
Com isso, o serviço Web para consulta de códigos postais está pronto.
4 CONSUMINDO UM SERVIÇO WEB POR MEIO DE UMA

APLICAÇÃO COM JSF
Para demonstrar a funcionalidade do serviço Web BuscaCEP, vamos criar uma
interface web com o framework JSF que acessará o serviço. Para isso, crie uma aplicação
Web denominada “JSF_Exemplo06” e selecione o framework JSF.
Vamos começar a construção da aplicação codificando a interface que o usuário

utilizará para acessar o serviço. O código a seguir apresenta o conteúdo da página index.
jsp.
Código 6
2
5
8
9 <f:view>
10 <html>
11 <head>
13 <title>Busca CEP</title>
14 </head>
15 <body>
16 <h1>
17 <h:outputText value=”Busca CEP”/>
18 </h1>
19 <h:form>
20 <h2>
21 <h:outputLabel value=”CEP: “ />
22 <h:inputText id=”cep” value=”#{cep.numero}” maxlength=”8” />

UNIDADE 4
23 <h:commandButton value=”buscar” action=”#{cep.buscar}” />

24 <h:outputLabel binding=”#{cep.msg}” style=”color:#FF0000;” />
25 </h2>
26 <h2>
28 <h:outputLabel value=”Endereço: “/>
29 <h:inputText value=”#{cep.endereco}” size=”50” />
30
31 <h:outputLabel value=”Bairro: “/>
32 <h:inputText value=”#{cep.bairro}” size=”30” />
33
34 <h:outputLabel value=”Cidade: “/>
35 <h:inputText value=”#{cep.cidade}” size=”30”/>
36
37 <h:outputLabel value=”UF: “/>
38 <h:inputText value=”#{cep.uf}” size=”2”/>
39 </h:panelGrid>
40 </h2>
41 </h:form>
42 </body>
43 </html>
44 </f:view>
Fim Código 6
Você já pode executar a aplicação para verificar como ficou a interface; o

resultado é apresentado na Figura 4. Não se esqueça de alterar o nome da página de
boas-vindas do arquivo web.xml para index.jsp.

Figura 4 Aplicação Web para busca de códigos postais.

UNIDADE 4
IMPORTANTE:
Quando construímos aplicações clientes para acessar serviços Web, é necessário
adicionar uma referência desse serviço ao projeto. Entretanto, para isso, é
necessário que o serviço esteja implantado e em funcionamento no servidor
Web (certifique-se!).
Para adicionar uma referência ao serviço Web BuscaCEP no projeto atual, clique
com o botão direito do mouse sobre o projeto, selecione Novo à Outro à Serviços Web e
escolha Cliente para serviço Web. Em seguida, clique no próximo botão.
Na tela Novo Cliente para serviço Web, você deve informar o endereço do
arquivo WSDL que descreve as funcionalidades do serviço. Essa localização pode ser
facilmente obtida realizando o teste do serviço Web. Informe tal endereço no item WSDL
URL e clique no botão “finalizar”.

Figura 5 Adicionando uma referência a um serviço Web.
Observe que foi adicionada à estrutura do seu projeto um novo item denominado
“Referências de serviços Web”.
Para finalizar o projeto, adicione um novo Bean gerenciado JSF, denominado

“CepBean”, e armazene-o no pacote bean. Essa classe será responsável pelo tratamento
das informações recebidas pelo formulário e por chamar o serviço BuscaCEP. O conteúdo
do arquivo é apresentado a seguir:
Código 7
1 package bean;
2
3 import javax.faces.component.html.HtmlOutputLabel;
4
5 public class CepBean {
6
7 private String numero;

UNIDADE 4

11 private String uf;
12 private HtmlOutputLabel msg;
13
14 public CepBean() {
15 msg = new HtmlOutputLabel();
16 }
17
18 public String buscar() {
19
20 try {
controle.BuscaCEPService service =
21
new controle.BuscaCEPService();
22 controle.BuscaCEP port = service.getBuscaCEPPort();
23 controle.Cep cep = port.buscar(getNumero());
24
25 if (cep.getLogradouro() == null) {
26 msg.setValue(“CEP não encontrado”);
27 setEndereco(“”);
28 setBairro(“”);
29 setCidade(“”);
30 setUf(“”);
31 } else {
32 msg.setValue(“”);
33 setEndereco(cep.getTipo() + “, “ + cep.getLogradouro());
34 setBairro(cep.getBairro());
35 setCidade(cep.getCidade());
36 setUf(cep.getUf());
37 }
38 } catch (Exception ex) { }
39
40 return “”;
41 }
42
43 // Métodos SETs e GETs
44 …
45
46 }
Fim Código 7
Finalmente, você já pode testar sua aplicação.

UNIDADE 4

Figura 6 Testes realizados na aplicação para busca de códigos postais.

Figura 7 Testes realizados na aplicação para busca de códigos postais.
5 CONSUMINDO UM SERVIÇO WEB POR MEIO DE UMA

APLICAÇÃO DESKTOP
Para demonstrar a versatilidade dos serviços Web, vamos criar uma aplicação
desktop que consumirá o serviço BuscaCEP. Esse exemplo tem como objetivo demonstrar
que o desenvolvimento de aplicações com serviços Web torna o trabalho muito produtivo
e, além disso, reutilizável.

UNIDADE 4
Crie uma aplicação Java desktop, denominada “Desktop_BuscaCEP”, e

construa um formulário JFrame, conforme as figuras 8 e 9.

Figura 8 Aplicação desktop para acesso ao serviço BuscaCEP.

Figura 9 Aplicação desktop para acesso ao serviço BuscaCEP.
Adicione uma referência ao serviço BuscaCEP conforme descrito na seção

anterior. Não se esqueça de que, para isso, o serviço deve ser implantado no servidor.
A única codificação necessária a esse projeto é o evento associado ao botão

buscar. O código do evento é apresentado como se segue. Foram realizadas apenas
algumas modificações, devido às características da interface desktop, mas, em geral, o
método é muito semelhante ao descrito na aplicação Web com JSF.

UNIDADE 4
Código 6
1 private void btnBuscarActionPerformed(java.awt.event.ActionEvent evt) {
2
3 try {
4 controle.BuscaCEPService service =
new controle.BuscaCEPService();
5
controle.BuscaCEP port = service.getBuscaCEPPort();
6
controle.Cep cep = port.buscar(txtNumero.getText());
7
8
if (cep.getLogradouro() == null) {
9
txtMsg.setText(“CEP não encontrado”);
10
txtEndereco.setText(“”);
11
txtBairro.setText(“”);
12
txtCidade.setText(“”);
13
txtUF.setText(“”);
14
} else {
15
txtMsg.setText(“”);
16 txtEndereco.setText(cep.getTipo() + “, “ +
cep.getLogradouro());
17
txtBairro.setText(cep.getBairro());
18
txtCidade.setText(cep.getCidade());
19
txtUF.setText(cep.getUf());
20
}
21 } catch (Exception ex) {
22
JOptionPane.showMessageDialog(null,
23
“Não foi possível acessar o serviço de busca CEP.”,
24 “Busca CEP”,
25
JOptionPane.ERROR_MESSAGE);
26 }
27 }
Fim Código 6
Com esse exemplo, foi possível demonstrar que o acesso aos serviços Web
sempre é realizado da mesma maneira. As únicas diferenças estão relacionadas à
construção da interface.

UNIDADE 4
6 CONSIDERAÇÕES
Nesta unidade, você estudou os serviços Web e como essa tecnologia pode ser
integrada na construção de aplicações Web.
Além disso, você teve a oportunidade de desenvolver um serviço Web para

busca de códigos postais. Esse serviço foi acessado por uma aplicação construída com o
framework JSF e por uma aplicação desktop.
Na próxima unidade, você estudará as chamadas assíncronas por meio da

internet utilizando a metodologia Ajax.
ATENÇÃO!
Para ampliar seus
7 SUGESTÕES BIBLIOGRÁFICAS
pois ele contém informações que HORSTMANN, C. S.; GEARY, D. M. Core JavaServer Faces. Rio de Janeiro: Alta Books,
podem muito acrescentar em sua 2007.
8 REFERÊNCIAS BIBLIOGRÁFICAS
COULOURIS, G.; DOLLIMORE, J.; KINDBERG, T. Sistemas distribuídos: conceitos e
projetos. 4. ed. Porto Alegre: Bookman, 2007.
DEITEL, P.J.; DEITEL, H.M. Ajax, Rich Internet Aplications e Desenvolvimento Web Para
Programadores. São Paulo: Prentice-Hall, 2008.

Unidade
JAVASERVER FACES (JSF) E
AJAX
Objetivos
5
• Identificar e interpretar a metodologia para chamadas assíncronas pela
internet – Ajax.
• Descrever o framework ICEFaces.
• Desenvolver aplicações Web utilizando o framework ICEFaces.
Conteúdos
• Instalando e configurando o framework ICEfaces.
• Construindo uma aplicação Web com o framework ICEfaces.

UNIDADE 5
ATENÇÃO!
Um estudo organizado
com sentido é facilmente
compreendido e interiorizado.
1 INTRODUÇÃO
Para que isso ocorra, você
precisa se dedicar a descobrir os Nesta unidade, você aprenderá como aprimorar a interatividade das aplicações
princípios e as leis que ligam as
várias partes do conteúdo a ser desenvolvidas com o framework JSF por meio de chamadas assíncronas do AJAX
estudado nesta unidade. Lembre- (Asynchronous Javascript and XML).
se de que essa visão global
facilitará o entendimento dos
detalhes e da aplicação prática Há várias maneiras de se incluir Ajax em aplicações Web; desde implementações
do assunto aqui tratado. utilizando JavaScript puro para enviar as solicitações assíncronas ao servidor até a
utilização de frameworks como Prototype e Script.aculo.us.
Os componentes nativos do framework JSF não executam solicitações utilizando

Ajax. Assim, a cada interação do usuário, há a necessidade de atualização da página. Para
agregar essa funcionalidade as aplicações Web, diversos frameworks foram desenvolvidos
com o objetivo de integrar as tecnologias JSF e Ajax de forma nativa.
O ICEfaces representa um conjunto de componentes para construção de interfaces

gráficas para aplicações Web que estende o framework JSF adicionando a funcionalidade
das chamadas assíncronas com Ajax. Todos os componentes do framework ICEfaces estão
habilitados para trabalhar com Ajax, permitindo, com isso, o rápido desenvolvimento de
aplicações ricas com alto grau de interatividade. Portanto, você também aprenderá como
trabalhar com o framework ICEfaces em suas aplicações Web.
Vale lembrar que o intuito da unidade não é descrever, detalhadamente, aspectos

da arquitetura do framework, mas, sim, demonstrar de maneira prática e objetiva o
desenvolvimento de aplicações utilizando essas tecnologias.
Bom estudo!
2 INSTALANDO E CONFIGURANDO O FRAMEWORK ICEFACES

A maneira mais simples de trabalhar com o framework ICEfaces é integrá-lo ao
ambiente de desenvolvimento NetBeans.
Para isso, você deve acessar o endereço <http://www.icefaces.org/> e, no item

Downloads, procurar em Tools Support e, em seguida, NetBeans.
Atualmente, a versão mais recente desse framework disponível no site é 1.8.2

para o ambiente NetBeans 6.7. É importante verificar qual é a versão do NetBeans que
você está utilizando antes de fazer o download do módulo.
Concluído o download do módulo, descompacte seu conteúdo em uma pasta,

abra o ambiente NetBeans, clique no menu Ferramentas e, depois, na opção Plug-ins.
Para a instalação, você deve selecionar a aba Baixados e clicar no botão Adicionar
plug-ins... Por fim, selecione os arquivos descompactados que possuem a extensão NBM
(NetBeans Module), clique no botão abrir e aceite os termos de licença, clique no botão
instalar Pronto! O módulo ICEfaces já está instalado.

UNIDADE 5
3 CONSTRUINDO UMA APLICAÇÃO WEB COM O FRAMEWORK

ICEFACES
Para demonstrar a utilização do framework, vamos criar uma aplicação completa
que integre as tecnologias: ICEfaces + JSF e Hibernate. Nessa aplicação, você terá a
oportunidade de conhecer as principais funcionalidades do ICEfaces.
Nesse exemplo, vamos criar uma aplicação de catálogo de endereços, que, a

princípio, armazenará nome, e-mail e telefone de pessoas, mas que você poderá adaptar
para outros propósitos.
O primeiro passo no desenvolvimento do projeto é criar uma aplicação Web

denominada “JSF_Exemplo07” e selecionar o framework ICEfaces como ilustrado na
Figura 1.

Figura 1 Seleção do framework ICEfaces.
Na estrutura padrão do projeto, você pode remover o arquivo denominado

“welcomeICEfaces.xhtml” e renomear o arquivo welcomeICEfaces.jspx para index.
jsp. Além disso, clique com o botão direito do mouse sobre o nome do projeto, selecione
propriedades e, em Executar, altere o item URL relativo para index.face. Em seguida,
clique no botão OK.
É necessário, também, alterar a página de boas-vindas no arquivo web.xml.

Procure pelo item welcome-file-list e faça as alterações necessárias para que fique
semelhante à listagem a seguir. Você pode notar, no arquivo web.xml, que todas as
configurações do framework ICEfaces já foram automaticamente realizadas.

UNIDADE 5
Código 1
1 <welcome-file-list>
2 <welcome-file>index.html</welcome-file>
3 <welcome-file>index.iface</welcome-file>
4 </welcome-file-list>
Fim Código 1
Para que a aplicação funcione adequadamente, você precisa adicionar as

seguintes bibliotecas ao projeto:
• Hibernate.
• Hibernate JPA.
• MySQL JDBC Driver.
Além disso, crie uma base de dados, denominada “bdcatalogo”, e uma tabela,
nomeada “endereço”. O script SQL para criação é apresentado como se segue:
Código 2
1 CREATE TABLE `bdcatalogo`.èndereco` (
2 ìd` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
3 `nome` VARCHAR( 60 ) NOT NULL ,
4 èmail` VARCHAR( 50 ) NOT NULL ,
5 `telefone` VARCHAR( 14 ) NOT NULL
6 ) ENGINE = MYISAM
Fim Código 2
Para o mapeamento objeto-relacional, crie uma classe denominada “Endereco”

no pacote “modelo”, cujo código é apresentado a seguir:
Código 3
1 package modelo;
2
3 import java.io.Serializable;
4 import javax.persistence.*;
5
6 @Entity
7 @Table(name=”endereco”)
8 public class Endereco implements Serializable {
9
10 @Id
11 @GeneratedValue(strategy=GenerationType.AUTO)
12 private int id;
13 @Column(name=”nome”,nullable=false,length=60)
15
16 @Column(name=”email”,nullable=false,length=50)
17 private String email;
18
19 @Column(name=”telefone”,nullable=false,length=14)
20 private String telefone;
21
22 public Endereco() {
23 }
24
25 //Métodos GETs and SETs
26
}
27

UNIDADE 5
Fim Código 3
Não se esqueça de criar o arquivo HibernateUtil no pacote util. Caso tenha

dúvidas, você tem a possibilidade de consultar a unidade anterior. Também adicione ao
projeto o arquivo de configuração do Hibernate, denominado hibernate.cfg.xml, cujo
conteúdo é descrito a seguir:
Código 4
<!DOCTYPE hibernate-configuration PUBLIC “-//Hibernate/Hibernate
2 Configuration DTD 3.0//EN” “http://hibernate.sourceforge.net/hibernate-
configuration-3.0.dtd”>
3 <hibernate-configuration>
4 <session-factory>
5 <property name=”hibernate.dialect”>
6 org.hibernate.dialect.MySQLDialect
7 </property>
8 <property name=”hibernate.connection.driver_class”>
9 com.mysql.jdbc.Driver
10 </property>
11 <property name=”hibernate.connection.url”>
12 jdbc:mysql://localhost:3306/bdcatalogo
13 </property>
14 <property name=”hibernate.connection.username”>root</property>
15 <property name=”hibernate.connection.password”>root</property>
16
17 <property name=”hibernate.show_sql”> true</property>
18 <mapping class=”modelo.Endereco” />
19 </session-factory>
20 </hibernate-configuration>
Fim Código 4
Você também deve adicionar ao projeto uma classe denominada “EnderecoDAO”

e armazená-la no pacote controle.dao. Essa classe é muito semelhante à implementada
na unidade anterior, e o conteúdo é apresentado a seguir:
Código 5
2
4 import modelo.Endereco;
5 import org.hibernate.Session;
6 import util.HibernateUtil;
7
8 public class EnderecoDAO {
9 private Session session;
10 public EnderecoDAO() {
11 }
12
13 public boolean inserir(Endereco e) {
14 try {
15
session = HibernateUtil.getSessionFactory().
openSession();
17 session.save(e);
19 session.close();
20 return true;

UNIDADE 5
21 } catch (Exception ex) {return false; }

22 }
23
24 public boolean atualizar(Endereco e) {
25 try {
26
openSession();
28 session.update(e);
30 session.close();
31 return true;
32 } catch (Exception ex) {return false; }
33 }
34
35 public boolean excluir(Endereco e) {
36 try {
37
openSession();
39 session.delete(e);
41 session.close();
42 return true;
43 } catch (Exception ex) {return false;}
44 }
45
46 public Endereco exibir(int id) {
48 Endereco f = (Endereco) session.get(Endereco.class,
49 new Integer(id));
50 session.close();
51 return f;
52 }
53
54 public List listar() {
57 List lista =
session.createQuery(“from Endereco order by nome”).
58
list();
60 session.close();
61 return lista;
62 }
63 }
Fim Código 5
O próximo passo é adicionar ao projeto um Bean gerenciado JSF denominado

“CatalogoBean”; você pode armazená-lo no pacote controle. Essa classe deve ser
configurada no arquivo faces-config.xml conforme o bloco de código a seguir:
Código 6
1 <managed-bean>
2 <managed-bean-name>catalogo</managed-bean-name>
<managed-bean-class>controle.CatalogoBean</managed-bean-
3
class>
4 <managed-bean-scope>request</managed-bean-scope>
5 </managed-bean>

UNIDADE 5
Fim Código 6
A classe CatalogoBean é responsável por gerenciar todas as interações do

usuário com a aplicação. Com isso, cada método representa uma funcionalidade específica
do projeto. O código da classe é apresentado da seguinte forma:
Código 7
1 package controle;
2
3 import controle.dao.EnderecoDAO;
4 import java.util.*;
5 import javax.faces.event.ValueChangeEvent;
6 import javax.faces.model.SelectItem;
7 import modelo.Endereco;
8 import com.icesoft.faces.component.ext.HtmlInputText;
9
10 public class CatalogoBean {
11
12 private String msg;
13 private Endereco end = new Endereco();
14 private EnderecoDAO dao = new EnderecoDAO();
15 private List listaEnderecos = new ArrayList();
16 private List tabela = new ArrayList();
17 private Endereco endSelecionado = new Endereco();
18
19 private HtmlInputText selNome = new HtmlInputText();
20 private HtmlInputText selEmail = new HtmlInputText();
21 private HtmlInputText selTelefone = new HtmlInputText();
22
23 public CatalogoBean() {
24 init();
25 }
26
27 private synchronized void init(){
28 if ( listaEnderecos.size() >=1 ){
29 listaEnderecos.clear();
30 }
31
32 List tmp = dao.listar();
33 tabela = tmp;
34 for (int i = 0; i < tmp.size(); i++) {
35 Endereco e = (Endereco)(tmp.get(i));
listaEnderecos.add(new SelectItem(e.getId(),e.
36
getNome()));
37 }
38 endSelecionado = (Endereco)tmp.get(0);
39 selNome.setValue(endSelecionado.getNome());
40 selEmail.setValue(endSelecionado.getEmail());
41 selTelefone.setValue(endSelecionado.getTelefone());
42 }
43
44 public void inserir() {
45
msg = dao.inserir(end)?”Inserido com sucesso.”:”Erro ao
inserir.”;
46 }
47
48 public void atualizar() {
49 endSelecionado.setNome(selNome.getValue().toString());
50 endSelecionado.setEmail(selEmail.getValue().toString());

UNIDADE 5
51
endSelecionado.setTelefone(selTelefone.getValue().
toString());
msg = dao.atualizar(endSelecionado) ? “Atualizado com sucesso.”
52
: “Erro ao atualizar.”;
53 init();
54 }
55
56 public void excluir() {
msg = dao.excluir(endSelecionado) ? “Excluído com sucesso.” :
57
“Erro ao excluir.”;
58 init();
59 }
60
61 public void enderecoSelecionado(ValueChangeEvent event){
62 if(event.getNewValue() != null){
63 int id = ((Integer)event.getNewValue()).intValue();
64 endSelecionado = dao.exibir(id);
65 selNome.setValue(endSelecionado.getNome());
66 selEmail.setValue(endSelecionado.getEmail());
67 selTelefone.setValue(endSelecionado.getTelefone());
68 }
69 }
70
71 public void limpar() {
72 end.setNome(“”);
73 end.setEmail(“”);
74 end.setTelefone(“”);
75 setMsg(“”);
76 }
Fim Código 7
A classe contém um atributo denominado “listaEnderecos”, que armazena

um conjunto de elementos do tipo SelectItem. Esses elementos são utilizados para
preencher um componente do selectOneMenu da interface. Da mesma forma, o atributo
tabela é utilizado para preencher um componente do tipo dataTable. O método de init
é responsável por preencher esses componentes.
Os métodos inserir, atualizar e excluir são autoexplicativos, os quais utilizam

as funcionalidades disponíveis na classe CatalogoDAO. O método enderecoSelecionado
é utilizado para recuperar, em tempo de execução, qual endereço da lista foi selecionado
pelo usuário. É importante notar que esse método tem como parâmetro o evento
ValueChangeEvent, que é disparado quando o usuário interage com um componente do
tipo select.
Finalmente, para concluir o projeto, você deve escrever o código da interface.

Esse código contém os componentes ICEfaces com suporte a Ajax. Antes disso, é importante
verificar a estrutura do projeto, que deve ser parecida com a Figura 2.

UNIDADE 5

O conteúdo da interface deve ser codificado no arquivo index.jsp, e é

apresentado da seguinte forma:
Código 8
2
<jsp:root version=”2.1” xmlns:f=”http://java.sun.com/jsf/core”
3 xmlns:h=”http://java.sun.com/jsf/html” xmlns:jsp=”http://java.sun.com/
JSP/Page” xmlns:ice=”http://www.icesoft.com/icefaces/component”>
<jsp:directive.page contentType=”text/html;charset=UTF-8”
4
pageEncoding=”UTF-8”/>
5 <f:view>
6 <html>
7 <head>
8 <title>Catálogo de Endereços</title>
9 <ice:outputStyle href=”./xmlhttp/css/xp/xp.css” />
10 </head>
11 <body>
12 <h1>
13 <ice:outputText value=”Catálogo de Endereços” />
14 </h1>
15 <ice:form id=”form1”>

UNIDADE 5
16 <ice:panelTabSet>
17
18 <ice:panelTab label=”Adicionar”>
19 <ice:panelGrid columns=”2”>
20 <ice:outputText value=”Nome:”/>
21 <ice:inputText value=”#{catalogo.end.nome}” size=”50”/>
22 <ice:outputText value=”Email:”/>
23 <ice:inputText value=”#{catalogo.end.email}” size=”30”/>
24 <ice:outputText value=”Telefone:”/>
<ice:inputText value=”#{catalogo.end.
25
telefone}”size=”20”/>
<ice:commandButton value=”salvar”
26
action=”#{catalogo.inserir}”/>
<ice:commandButton value=”limpar”
27
action=”#{catalogo.limpar}”/>
28 </ice:panelGrid>
29 </ice:panelTab>
30
31 <ice:panelTab label=”Editar”>
32 <ice:panelGrid columns=”2”>
33 <ice:outputText value=”Selecione o nome desejado:”/>
34 <ice:selectOneMenu value=”#{catalogo.endSelecionado.id}”
35 partialSubmit=”true”
36 valueChangeListener=”#{catalogo.enderecoSelecionado}”
37 style=”width:200px;”>
38 <f:selectItems value=”#{catalogo.listaEnderecos}”/>
39 </ice:selectOneMenu>
40 <ice:outputText value=”Nome:”/>
41 <ice:inputText binding=”#{catalogo.selNome}” size=”50” />
42 <ice:outputText value=”Email:”/>
43 <ice:inputText binding=”#{catalogo.selEmail}”size=”30”/>
44 <ice:outputText value=”Telefone:”/>
<ice:inputText binding=”#{catalogo.selTelefone}”
45
size=”20” />
46 </ice:panelGrid>
<ice:commandButton value=”salvar”
47
action=”#{catalogo.atualizar}”/>
<ice:commandButton value=”excluir”
48
action=”#{catalogo.excluir}”/>
49 </ice:panelTab>
50
51 <ice:panelTab label=”Listar”>
52 <ice:dataTable
53 value=”#{catalogo.tabela}”
54 var=”item”>
55 <ice:column>
57 <ice:outputText value=”ID”/>
58 </f:facet>
59 <ice:outputText value=”#{item.id}”/>
60 </ice:column>
61 <ice:column>
63 <ice:outputText value=”Nome”/>
64 </f:facet>
65 <ice:outputText value=”#{item.nome}”/>
66 </ice:column>
67 <ice:column>
69 <ice:outputText value=”Email”/>
70 </f:facet>

UNIDADE 5
71 <ice:outputText value=”#{item.email}”/>
72 </ice:column>
73 <ice:column>
75 <ice:outputText value=”Telefone”/>
76 </f:facet>
77 <ice:outputText value=”#{item.telefone}”/>
78 </ice:column>
79 </ice:dataTable>
80 </ice:panelTab>
81 </ice:panelTabSet>
82 <ice:outputLabel value=”#{catalogo.msg}” />
83 </ice:form>
84 </body>
85 </html>
86 </f:view>
87 </jsp:root>
Fim Código 8
É importante observar que não há muita diferença entre a programação nativa,

com o framework JSF, e o ICEfaces. Em linhas gerais, os componentes são os mesmos; no
entanto, os componentes ICEfaces oferecem suporte a Ajax. Outro fato interessante é que
o desenvolvedor não precisa realizar nenhum tipo de configuração para realizar chamadas
assíncronas, pois essa é uma característica intrínseca ao framework ICEfaces.
Com isso, você já pode executar a aplicação e visualizar o resultado. As interfaces

do projeto são apresentadas nas Figuras 3, 4 e 5.

Figura 3 Aplicação Web para manipular um catálogo de endereços – interface para adicionar
contatos.

UNIDADE 5

Figura 4 Aplicação Web para manipular um catálogo de endereços – interface para editar contatos.

Figura 5 Aplicação Web para manipular um catálogo de endereços – interface para listar contatos.
O framework ICEfaces possui um conjunto de estilos em cascata predefinidos

que podem ser utilizados para configurar a apresentação dos componentes. Nesse projeto,
foi utilizado o estilo xp.css, o qual pode ser visualizado na linha 9 da página index.jsp.
Para alterar o estilo, troque essa linha para:

UNIDADE 5
9 <ice:outputStyle href=”./xmlhttp/css/rime/rime.css” />
O resultado é apresentado na Figura 6.

Figura 6 Utilização de estilos predefinidos do framework ICEFaces.
IMPORTANTE:
Informações detalhadas a respeito dos estilos dos componentes podem ser
obtidas em: <http://www.icefaces.org/docs/latest/htmlguide/devguide/
references7.html>. Acesso em: 3 fev. 2010.
Finalmente, terminamos a construção da aplicação Web com o framework

ICEfaces!
4 CONSIDERAÇÕES
Nesta unidade, você praticou o desenvolvimento de aplicações Web utilizando o
framework ICEfaces. Esse framework contém um conjunto de componentes de interface
que possuem suporte nativo as chamadas assíncronas com Ajax.Com a construção da
aplicação, foi possível notar a importância desses componentes no desenvolvimento de
aplicações, uma vez que eles tornam a interatividade da aplicação Web muito semelhante à
encontrada nas aplicações desktop. O projeto desenvolvido utilizou tecnologias avançadas
de desenvolvimento tanto na construção de interfaces quanto no mapeamento objeto-
relacional.

UNIDADE 5
ATENÇÃO!
Para ampliar seus 5 SUGESTÕES BIBLIOGRÁFICAS
tema abordado nesta unidade, HORSTMANN, C. S.; GEARY, D. M. Core JavaServer Faces. Rio de Janeiro: Alta Books,
2007.
podem muito acrescentar em sua
6 E-REFERÊNCIAS
ICEFACES.ORG. Homepage. Disponível em: <http://www.icefaces.org/>. Acesso em: 3
fev. 2010.
______. ICEfaces component suite. Disponível em: <http://www.icefaces.org/docs/latest/

htmlguide/devguide/references7.html>. Acesso em: 3 fev. 2010.
7 CONSIDERAÇÕES FINAIS
Finalmente, chegamos ao término da disciplina Projeto de Interfaces para
Aplicações Web Java. Você estudou desde a construção de aplicações utilizando o
framework JavaServer Faces, passando pela criação de serviços Web, até a utilização de
chamadas assíncronas com Ajax por meio do framework ICEfaces ao longo desta disciplina.
Não deixe de pesquisar e de estudar mais a respeito dos assuntos abordados;

eles serão muito importantes em sua carreira profissional.
Sucesso!

Projeto de Interfaces para Aplicações Web405096 PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Projeto de Interfaces para Aplicações Web405096 PDF

Caricato da

Copyright:

Formati disponibili

PROJETO DE INTERFACES PARA APLICAÇÕES WEB

Desenvolvimento de ASP.Net - Prof. Dr. Rodrigo de Oliveira Plotze

Web Semântica – Prof. Ms. Alexandre Leite Rangel

Meu nome é Rodrigo de Oliveira Plotze. Sou doutor em Ciência da Computação

PROJETO DE INTERFACES PARA APLICAÇÕES WEB

Curso: Especialização em Plataforma de Desenvolvimento Web

Reitor: Prof. Dr. Pe. Sérgio Ibanor Piva

Coordenador do Curso de Especialização em Plataforma de Desenvolvimento Web: Prof. Luciano

Todos os direitos reservados. É proibida a reprodução, a transmissão total ou parcial

Centro Universitário Claretiano

CADERNO DE REFERÊNCIA DE CONTEÚDO

UNIDADE 1 – INTRODUÇÃO AO PROJETO DE INTERFACES PARA APLICAÇÕES WEB

UNIDADE 2 – JAVASERVER FACES (JSF) – INTRODUÇÃO, ARQUITETURA,

UNIDADE 3 – JAVASERVER FACES (JSF) – INTEGRAÇÃO COM BANCO DE DADOS

UNIDADE 4 – JAVASERVER FACES (JSF) E SERVIÇOS WEB

UNIDADE 5 – JAVASERVER FACES (JSF) E AJAX

Inicialmente, vamos estudar a evolução das tecnologias para construção de

Em seguida, iniciaremos o estudo do framework para construção de interfaces,

Além disso, você estudará aspectos relacionados a uma nova tendência

2 DADOS GERAIS DA DISCIPLINA

Introdução ao projeto de interfaces. Frameworks para desenvolvimento web.

Os alunos da disciplina Projeto de Interfaces para Aplicações Web Java, do

a) Identificar os conceitos fundamentais relacionados à construção de inter-

b) Produzir aplicações web utilizando o framework de desenvolvimento Ja-

c) Descrever e integrar as informações disponibilizadas nas interfaces Web

d) Identificar e utilizar o mapeamento objeto-relacional, por meio do frame-

e) Interpretar o funcionamento dos serviços Web.

f) Produzir aplicações para internet baseadas no conceito de serviços Web.

g) Descrever e integrar o framework JavaServer Faces aos serviços Web.

h) Descrever e interpretar as chamadas “assíncronas” (Ajax) na internet por

i) Desenvolver aplicações Web utilizando o framework ICEFaces.

Ao final deste estudo, os alunos do curso de Especialização em Plataforma de

Duração e carga horária

A carga horária da disciplina Projeto de Interfaces para Aplicações Web Java

Durante o estudo das unidades, você compreenderá aspectos relacionados ao

8 GUIA © Projeto de Interfaces para Aplicações Web Java

Por fim, a disciplina abordará a construção de interfaces com chamadas

Aproveite o conteúdo e bons estudos!

© Projeto de Interfaces para Aplicações Web Java

Seja bem-vindo(a) ao estudo de Projeto de Interfaces para Aplicações Web

Os frameworks web têm se tornado muito atrativos para os programadores,

Além disso, você terá a oportunidade de compreender o conceito de serviços

Aproveite o conteúdo e bons estudos!

• Frameworks para desenvolvimento web.

Por fim, você encontrará informações sobre os frameworks. Um framework é

2 DESENVOLVIMENTO DE SOFTWARE E DE INTERFACES

Pensando um pouco no passado, a década de 1990 foi marcada, essencialmente,

Para a construção desse tipo de sistema, diversas tecnologias para

Esses ambientes fornecem todos os requisitos necessários para o desenvolvimento

• Microsoft Visual Basic.

14 CRC © Projeto de Interfaces para Aplicações Web Java

Fonte: acervo pessoal.

© Projeto de Interfaces para Aplicações Web Java

Fonte: acervo pessoal.

Como muitas vezes a tarefa do programador não é nada fácil, as características

Nesse tipo de metodologia, o programador constrói a interface gráfica do sistema

A paleta de componentes foi outro fator importante na construção das interfaces.

Fonte: acervo pessoal.

16 CRC © Projeto de Interfaces para Aplicações Web Java

Embora essa metodologia tenha dominado o cenário do desenvolvimento de

Uma evolução natural das aplicações desktop foram as aplicações Web, as

No entanto, com o crescimento de sistemas baseados em web, um dos principais

Conforme estudado na disciplina Desenvolvimento de Aplicações