Caderno de Referncia de Contedo

APRESENTAO

Seja bem-vindo(a) ao estudo de Projeto de Interfaces para Aplicaes Web

Java. Nesta disciplina, voc aprender os principais conceitos relativos ao projeto e
construo de interfaces ricas para internet.

As aplicaes ricas para internet (do ingls Rich Internet Applications RIAs)
tm alcanado grande destaque no cenrio do desenvolvimento de aplicaes. A principal
caracterstica destas a semelhana com as aplicaes desktop tanto em termos visuais
quanto nas funcionalidades.

Os frameworks web tm se tornado muito atrativos para os programadores,

uma vez que fornecem um arcabouo de funcionalidades implementadas por meio de um
conjunto de classes. Essas classes podem ser facilmente utilizadas ao longo da aplicao.
Nesta disciplina, voc conhecer o principal framework para desenvolvimento de aplicaes
Web na plataforma Java, denominado JavaServer Faces (JSF).

Alm disso, voc ter a oportunidade de compreender o conceito de servios

Web e de entender como essa tecnologia pode ser utilizada na construo de aplicaes
para Web.

Por fim, voc conhecer a metodologia Ajax, a qual utilizada para realizar
chamadas assncronas por meio da internet. Para demonstrar essa metodologia, voc
conhecer o framework ICEFaces, que uma extenso do framework JSF e que prov
suporte ao Ajax.

Aproveite o contedo e bons estudos!

Anotaes
 Unidade
INTRODUO AO PROJETO
DE INTERFACES PARA
APLICAES WEB
1
Objetivo
Identificar as principais caractersticas do projeto de aplicaes para
web.

Contedos
Desenvolvimento de software e de interfaces grficas.

Frameworks para desenvolvimento web.

 UNIDADE 1
Especializao em Plataforma de Desenvolvimento Web Java

ATENO!

1 INTRODUO
Ao iniciar seus estudos, procure
ter mo todos os recursos
de que ir necessitar, tais
como: dicionrio, caderno para
anotaes, canetas, lpis, Nesta primeira unidade, voc ter a oportunidade de estudar os principais
obras etc. Desse modo, voc
poder evitar as interrupes aspectos relacionados ao desenvolvimento de software e a importncia das interfaces
e aproveitar seu tempo para grficas na construo de aplicaes.
ampliar sua compreenso. Pense
nisso...
Voc aprender, ainda, a respeito da evoluo dos paradigmas para
desenvolvimento de software desde as aplicaes desktop at as aplicaes Web.

Por fim, voc encontrar informaes sobre os frameworks. Um framework

formado por um conjunto de classes, com as mais variadas funcionalidades, que pode ser
utilizado pelo programador para a construo de aplicaes Web, objetivando auxili-lo na
elaborao das interfaces.

Bom estudo!

2 DESENVOLVIMENTO DE SOFTWARE E DE INTERFACES

GRFICAS
Nos ltimos anos, voc deve ter notado que os modelos de desenvolvimento de
software passaram por grandes mudanas. Estas foram ocasionadas, especialmente, pela
alterao dos paradigmas e pela evoluo dos computadores.

Pensando um pouco no passado, a dcada 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 comunicao
e permitiram a realizao das mais variadas tarefas. Vale lembrar que esses tipos de
sistemas computacionais so, comumente, conhecidos como aplicaes desktop.

Para a construo 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 ingls Integrated Development Environment (IDE).

Esses ambientes fornecem todos os requisitos necessrios para o desenvolvimento

dos sistemas computacionais desde a codificao e a construo das interfaces at a
compilao e os testes. Talvez voc nunca tenha utilizado nenhum desses ambientes, mas
os mais conhecidos da dcada de 1990 foram:

Microsoft Visual Basic.

Borland Delphi.
Borland C++ Builder.

14 CRC Projeto de Interfaces para Aplicaes Web Java

Claretiano Batatais
 UNIDADE 1
Especializao em Plataforma de Desenvolvimento Web Java

Fonte: acervo pessoal.

Figura 1 Ambiente de desenvolvimento Visual Basic.

Projeto de Interfaces para Aplicaes Web Java

Claretiano Batatais CRC 15
UNIDADE 1
Especializao em Plataforma de Desenvolvimento Web Java

Fonte: acervo pessoal.

Figura 2 Ambiente de desenvolvimento Borland Delphi.

Como muitas vezes a tarefa do programador no nada fcil, as caractersticas

embutidas nesses ambientes tornaram o desenvolvimento de sistemas computacionais
uma tarefa rpida e descomplicada. Esses fatos se devem, especialmente, maneira da
construo das interfaces grficas, a qual utilizava uma metodologia de criao baseada
no modelo arrastar e soltar do ingls drag-and-drop.

Nesse tipo de metodologia, o programador constri a interface grfica do sistema

computacional apenas arrastando e soltando os componentes desejados. Por exemplo:
para adicionar um boto a uma interface (ou a um formulrio), basta o programador
selecionar o boto na paleta de componentes, isto , arrastar o boto para o formulrio,
e soltar. Pronto. A interface est criada.

A paleta de componentes foi outro fator importante na construo das interfaces.

Essa paleta formada por um conjunto de componentes visuais pr-definidos e com
comportamentos prprios, os quais podem ser utilizados a qualquer momento pelo
programador. Com isso, a criao de uma interface grfica pode ser realizada com apenas
alguns cliques.

Fonte: acervo pessoal.

Figura 3 Paleta de componentes do ambiente Borland Delphi.

16 CRC Projeto de Interfaces para Aplicaes Web Java

Claretiano Batatais
 UNIDADE 1
Especializao em Plataforma de Desenvolvimento Web Java

Embora essa metodologia tenha dominado o cenrio do desenvolvimento de

softwares na dcada de 1990, com a evoluo dos meios de comunicao especialmente
da internet , esse modelo sofreu grandes mudanas.

Uma evoluo natural das aplicaes desktop foram as aplicaes Web, as

quais necessitam de um navegador para apresentao do contedo. Esse progresso tem
se tornado cada vez mais evidente devido popularizao da internet e navegao em
velocidades aceitveis. Alm disso, o desenvolvimento de sistemas baseados em web
minimiza diversos problemas encontrados nas aplicaes desktop, como por exemplo, a
manuteno do software.

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

desafios a construo de interfaces grficas to intuitivas quanto as interfaces desktop.
Alm disso, algumas perguntas ainda precisam ser respondidas: a construo de interfaces
para aplicaes Web pode ser to fcil e rpida quanto a criao de interfaces desktop?
Essa construo produtiva? possvel reutilizar componentes e interfaces j criadas?

Conforme estudado na disciplina Desenvolvimento de Aplicaes

Web com Java, o desenvolvimento de sistemas web dinmicos teve incio com a
tecnologia CGI (Common Gateway Internet), juntamente com o HTML (HyperText
Markup Language). A combinao dessas tecnologias permitiu os primeiros
modelos de interatividade entre usurios e aplicaes Web. Alm da tecnologia
CGI, outras linguagens foram desenvolvidas para a construo de aplicaes
Web, como: PHP, ASP, JSP etc.

Nesse primeiro momento, as interfaces eram criadas por meio de um conjunto

de componentes de formulrios disponveis no HTML. Esses componentes contm diversos
controles de interao, tais como campos de texto, botes, caixas de seleo etc. Com o
desenvolvimento de uma especificao mais padronizada e robusta, o XHTML (Extensible
HyperText Markup Language) e o CSS (Cascading Style Sheets) tornaram-se referncia
na elaborao de pginas web com qualidade.

Uma caracterstica importante das aplicaes desktop a possibilidade que o

programador tem de tratar os eventos do usurio com a interface grfica. No caso das
interfaces desktop, diversos eventos podem ser tratados, tais como cliques e movimentao
do mouse, acionamento das teclas, redimensionamento das janelas etc. Em sistemas
baseados web, essa caracterstica tambm possvel, mas com algumas restries.
Essas restries so impostas, especialmente, devido aos diversos tipos de navegadores
existentes hoje em dia e a uma falta de padronizao desse procedimento.

O modelo de objeto de documento do ingls Document Object Model , ou

simplesmente DOM, permite ao programador ter acesso a todos os elementos de uma
pgina web. Assim, utilizando a linguagem JavaScript, possvel criar, modificar e remover,
dinamicamente, os elementos da pgina. Alm disso, permite ao programador tratar
interaes do usurio da mesma maneira que isto realizado em sistemas desktop.

Diversos programas ou plugins permitem ao programador visualizar os elementos

de uma pgina web; dentre eles, podemos destacar o FireBug, que uma soluo bastante ATENO!
Para saber mais sobre o FireBug,
eficiente. acesse o site disponvel em:
<http://getfirebug.com/>. Acesso
em: 2 fev. 2010.

Projeto de Interfaces para Aplicaes Web Java

Claretiano Batatais CRC 17
UNIDADE 1
Especializao em Plataforma de Desenvolvimento Web Java

Fonte: acervo pessoal.

Figura 4 Visualizao dos elementos de uma pgina web (http://www.google.com) por meio
do FireBug.

Embora as diversas tecnologias para desenvolvimento de sistemas web permitam

ao programador construir aplicaes semelhantes aos sistemas desktop, o principal desafio
est relacionado produtividade. A utilizao de tecnologias como o XHTML, o CSS e o
DOM pode ser eficiente; no entanto, torna a tarefa do programador lenta e complexa.
Alm disso, o conceito de reusabilidade pouco empregado.

Nesse sentido, tecnologias tm surgido com o objetivo de agilizar o

desenvolvimento das aplicaes Web. Essas tecnologias seguem os mesmos moldes para
o desenvolvimento rpido de aplicao do ingls Rapid Application Development (RAD).
Esse termo muito comum em desenvolvedores de aplicaes desktop, e o principal
objetivo do RAD a construo de aplicaes com componentes reutilizveis de maneira
rpida e fcil. Alm disso, as novas tecnologias fornecem mecanismos capazes de integrar
essas aplicaes aos banco de dados de forma descomplicada e prtica.

Entretanto, a pergunta que fica :

possvel utilizar RAD no desenvolvimento de aplicaes Web?

Para responder a essa pergunta, vamos focar o desenvolvimento de aplicaes

na plataforma Java. Quando desenvolvemos aplicaes desktop, a API Swing um
padro para construo de interfaces grficas, pois, por meio dela, possvel desenvolver
interfaces de maneira rpida e fcil. Em aplicaes Web, o desenvolvimento realizado,
especialmente, por meio da tecnologia JavaServer Pages (JSP), que permite incorporar
todo o dinamismo necessrio s pginas web.

18 CRC Projeto de Interfaces para Aplicaes Web Java

Claretiano Batatais
 UNIDADE 1
Especializao em Plataforma de Desenvolvimento Web Java

Apesar da tecnologia JavaServer Pages e dos servlets fornecerem todos os

requisitos necessrios para construo de aplicaes Web, as interfaces com o usurio
ainda so o problema. Isso no significa que essas tecnologias no permitem a criao de
RIAs Rich Internet Applications (em portugus: aplicaes ricas para internet).

O termo RIAs muito utilizado para denominar aplicaes Web que oferecem
sensibilidades, recursos e funcionalidades ricas parecidas com as das aplicaes
desktop. No entanto, a criao de interfaces ricas utilizando simplesmente JSP
uma tarefa pouco produtiva.

Para minimizar esses problemas diversos, frameworks tm surgido para auxiliar

o desenvolvimento de aplicaes Web. Dentre eles, o principal destaque na plataforma
Java o JavaServer Faces (JSF).

O JSF tem como foco principal a construo de interfaces para aplicaes Web,
e, pensando de forma prtica, podemos associar a ele uma verso 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 aplicaes desktop. Alm disso, ambientes de desenvolvimentos integrados atuais,
como por exemplo o NetBeans, incorporaram a possibilidade de construo de interfaces
grficas 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.

Fonte: acervo pessoal.

Figura 5 Desenvolvimento visual de aplicaes Web utilizando o ambiente NetBeans.

Projeto de Interfaces para Aplicaes Web Java

Claretiano Batatais CRC 19
 UNIDADE 1
Especializao em Plataforma de Desenvolvimento Web Java

3 FRAMEWORKS PARA DESENVOLVIMENTO WEB

Como discutido anteriormente, o principal problema em desenvolvimento de
aplicaes Web est relacionado produtividade e reusabilidade de cdigo. Alm disso, a
complexidade da construo de interfaces grficas torna essa tarefa um verdadeiro desafio.

Para auxiliar o desenvolvimento, diversos frameworks vm surgindo com o

objetivo de minimizar o trabalho do programador. Esses frameworks tm caractersticas
especficas 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 tambm 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) transaes;

b) persistncia de dados;

c) acesso remoto por meio de RMI;

d) servios Web etc.

Uma das caractersticas interessantes do framework Spring o fato de ele ser

desenhado para no ser intrusivo. Isso significa que os cdigos da lgica de negcio
da aplicao no dependem do framework. Para que isso seja possvel, o framework
possui uma camada especfica de integrao, na qual o programador pode codificar as
funcionalidades da aplicao.

O framework muito bem organizado e est divido em vrios mdulos, os quais

podem ser visualizados na figura a seguir.

ATENO!
Para obter informaes
detalhadas sobre o framework Fonte: acervo pessoal.
Spring, acesse o site
disponvel em: <http://www. Figura 6 Viso geral do framework Spring.
springframework.org/>. Acesso
em: 2 fev. 2010.

20 CRC Projeto de Interfaces para Aplicaes Web Java

Claretiano Batatais
 UNIDADE 1
Especializao em Plataforma de Desenvolvimento Web Java

Struts

O Struts outro framework para desenvolvimento de aplicaes Web que merece

destaque. Ele desenhado para auxiliar o desenvolvedor na construo de aplicaes Web
baseadas na arquitetura MVC. O framework tem como foco principal o controlador da
arquitetura MVC.

A segunda verso do framework, denominada Struts 2, foi criada por meio

da juno da primeira verso (Struts 1) e do framework WebWork. Dentre as diversas
caractersticas, ele possui suporte Ajax, fcil integrao com o framework Spring, rpida
inicializao etc. A figura a seguir demonstra a viso geral da arquitetura Struts:

Fonte: acervo pessoal.

Figura 7 Viso geral do framework Struts.

4 CONSIDERAES
Nesta unidade, voc pde compreender os conceitos fundamentais do projeto
de interfaces, bem como os aspectos relacionados s interfaces para aplicaes desktop
e web. Alm disso, voc tambm pde compreender conceitos referentes aos frameworks
para desenvolvimento web.

Na prxima unidade, voc iniciar o estudo do framework JavaServer Faces (JSF).

Vale lembrar que este o principal framework para construo de interfaces para web na
plataforma Java e que ele fornece ao programador uma infinidade de funcionalidades para
o desenvolvimento de aplicaes.

Projeto de Interfaces para Aplicaes Web Java

Claretiano Batatais CRC 21
 UNIDADE 1
Especializao em Plataforma de Desenvolvimento Web Java

ATENO!
Para ampliar seus 5 SUGESTES BIBLIOGRFICAS
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 tpico, bem
programadores. So Paulo: Pearson Prentice Hall, 2008.
como acesse o site indicado,
pois ele contm informaes que
FALLOWS, R. J.; JACOBI, J. Pro JSF and Ajax: building Rich Internet components. New
podem muito acrescentar em sua York: Apress, 2006.
prtica profissional.

6 E-REFERNCIAS
Lista de Figuras

Figura 5 Viso geral do framework Spring: Disponvel em: <http://www.

springframework.org/>. Acesso em: 2 fev. 2010.

Figura 6 Viso geral do framework Struts: Disponvel em: <http://struts.apache.

org/>. Acesso em: 2 fev 2010.

22 CRC Projeto de Interfaces para Aplicaes Web Java

Claretiano Batatais