MD Coads 2012 2 07

UNIVERSIDADE TECNOLGICA FEDERAL DO PARAN UTFPR
CURSO SUPERIOR DE TECNOLOGIA EM ANLISE E DESENVOLVIMENTO DE

SISTEMAS

RODOLFO SEFFRIN

COMPARATIVO ENTRE OS FRAMEWORKS DE DESENVOLVIMENTO WEB
VAADIN E GWT UTILIZANDO A BIBLIOTECA SMARTGWT.

TRABALHO DE DIPLOMAO

MEDIANEIRA
2013

RODOLFO SEFFRIN

VAADIN E UTILIZANDO A BIBLIOTECA SMARTGWT.

Trabalho de Diplomao apresentado
disciplina de Trabalho de Diplomao, do Curso
Superior de Tecnologia em Anlise e
Desenvolvimento de Sistemas COADS da
Universidade Tecnolgica Federal do Paran
UTFPR, como requisito parcial para obteno
do ttulo de Tecnlogo.

Orientador: Prof Fernando Schtz, M.Sc.

MEDIANEIRA
2013

Ministrio da Educao
Universidade Tecnolgica Federal do Paran
Diretoria de Graduao e Educao Profissional
Curso Superior de Tecnologia em Anlise e
Desenvolvimento de Sistemas

TERMO DE APROVAO

VAADIN E GWT UTILIZANDO A BIBLIOTECA SMARTGWT.
Por
Rodolfo Seffrin

Este Trabalho de Diplomao (TD) foi apresentado s 08:30 h do dia 27 de maro de 2013
como requisito parcial para a obteno do ttulo de Tecnlogo no Curso Superior de
Tecnologia em Anlise e Desenvolvimento de Sistemas, da Universidade Tecnolgica
Federal do Paran, Cmpus Medianeira. Os acadmicos foram arguidos pela Banca
Examinadora composta pelos professores abaixo assinados. Aps deliberao, a Banca
Examinadora considerou o trabalho aprovado com louvor e mrito.

Prof. Me. Fernando Schtz
UTFPR Cmpus Medianeira
(Orientador)

Prof. Me. Everton Coimbra de Araujo
(Convidado)

Prof. Me. Juliano Rodrigo Lamb
(Convidado)

Prof. Me. Juliano Rodrigo Lamb
(Responsvel pelas atividades de TCC)

RESUMO

SEFFRIN, Rodolfo. Comparativo entre os frameworks de desenvolvimento Web
Vaadin e GWT Utilizando a biblioteca SmartGWT. Trabalho de Diplomao do Curso
Superior de Tecnologia em Anlise e Desenvolvimento de Sistemas. Universidade
Tecnolgica Federal do Paran. Medianeira, 2012.

Com o crescimento da Internet nos ltimos anos e aplicativos Web cada vez mais
robustos, surgiu necessidade da utilizao de frameworks que auxiliam no
desenvolvimento de aplicaes Web RIA (Rich Internet Application). Assim, o
presente trabalho realizou uma anlise comparativa entre dois frameworks RIA de
desenvolvimento Web: Vaadin e GWT (Google Web Toolkit). Com GWT foi utilizado
a biblioteca de componentes SmartGWT para auxilio na construo da interface
grfica. Tanto Vaadin como GWT utilizam como elemento principal para
desenvolvimento da aplicao a linguagem Java, e se assemelham muito com o estilo
de desenvolvimento desktop. Para demonstrar o funcionamento de ambos foi
desenvolvida uma aplicao para acompanhamento no crescimento de uma criana,
em que o ciclo inicia no seu nascimento, terminando quando sua fase de crescimento
inicial estiver concluda. Os resultados da avaliao concluram que o Framework
Vaadin o mais indicado para a utilizao, devido a sua arquitetura de programao
ser produtiva e ter componentes agradveis para o usurio final.

Palavras-chaves: RIA, Aplicaes Webs, Java.

RESUMO EM LINGUA ESTRANGEIRA

SEFFRIN, Rodolfo. Comparative between Web frameworks Vaadin and GWT Using
The Library SmartGWT. Trabalho de Concluso do Curso Superior de Tecnologia em
Anlise e Desenvolvimento de Sistemas. Universidade Tecnolgica Federal do Paran.
Medianeira, 2012.

With the growth of the Internet in recent years, Web applications and increasingly
robust, the need arose the use of frameworks that help in developing web applications
RIA (Rich Internet Application)., This study conducted a comparative analysis
between two frameworks RIA Web Development: Vaadin and GWT (Google Web
Toolkit). With was used SmartGWT component library for assistance in building the
graphical interface. Vaadin uses GWT as far as the main element for application
development language Java, and closely resemble the style of desktop development.
To demonstrate the operation of both an application was developed for monitoring the
growth of a child, where the cycle begins at birth, when ending its initial growth phase
is complete. The evaluation results indicated that the Vaadin Framework is the most
appropriate for use, due to its programming architecture components to be productive
and have enjoyable for the end user.

Keywords: RIA, Applications Webs, Java.

LISTAS DE FIGURAS

Figura 1 - Modelo de interao de uma aplicao Web tpica .................................................. 16
Figura 2 - Modelo de aplicao Web utilizando AJAX ............................................................ 16
Figura 3 - Arquitetura de uma aplicao Web baseada em Frameworks ................................. 18
Figura 4 - Framework Horizontal ............................................................................................. 20
Figura 5 - Framework Vertical ................................................................................................. 20
Figura 6 - Arquitetura Geral do Vaadin.................................................................................... 22
Figura 7 - Arquitetura Vaadin .................................................................................................. 24
Figura 9 - Classe Exemplo ....................................................................................................... 26
Figura 10 - Aplicao sendo executada .................................................................................... 27
Figura 11 - Web.xml Vaadin .................................................................................................... 27
Figura 12 - Sada gerada pelo compilador ................................................................................ 30
Figura 13 - Estrutura Projeto GWT .......................................................................................... 33
Figura 14 - Mdulo GWT ......................................................................................................... 34
Figura 15 - Arquivo HTML ...................................................................................................... 35
Figura 16 - Classe EntryPoint ................................................................................................... 36
Figura 17 - Chamada Remota ................................................................................................... 37
Figura 18 - Interface Assncrona .............................................................................................. 38
Figura 19 - Interface no Lado do Servidor ............................................................................... 39
Figura 20 - Diagrama de Casos de Uso .................................................................................... 42
Figura 21 - Digrama de Sequncia Cadastrar Consulta ............................................................ 46
Figura 22 - Diagrama de Sequncia Editar Consulta ............................................................... 47
Figura 23 - Diagrama de Sequncia Excluir Consulta ............................................................. 47
Figura 24 - Diagrama de Classes .............................................................................................. 48
Figura 25 - Diagrama de Contedo .......................................................................................... 49
Figura 26 - NSU da aplicao................................................................................................... 50
Figura 27 - Wireframe Aplicao ............................................................................................. 51
Figura 28 - Estrutura Aplicao GWT ao lado esquerdo, ao lado direito estrutura da aplicao
no Vaadin .................................................................................................................................. 52
Figura 29 - BeanItem Classe Crianca ................................................................................... 54
Figura 30 - Formulrio de cadastro Criana ............................................................................. 54
Figura 31 - Formulrio Vaadin ................................................................................................. 55
Figura 32 - Formulrio SmartGWT .......................................................................................... 56
Figura 33 - Formulrio SmartGWT .......................................................................................... 57
Figura 34 - BeanItemContainer Vaadin.................................................................................... 58
Figura 35 - Formatando Campo Data Vaadin .......................................................................... 58
Figura 36 - Tabela de Consulta ................................................................................................ 59
Figura 37 - Exemplo Tabela Vaadin......................................................................................... 59
Figura 38 - Classe ListGridRecord ........................................................................................... 60
Figura 39 - Tabela de Consulta SmartGWT ............................................................................. 60
Figura 40 - Tabela SmartGWT ................................................................................................. 61
Figura 41 - Validao Usurio.................................................................................................. 61

Figura 42 - Validando e Customizando Campos Vaadin ......................................................... 62
Figura 43 - Validao Cadastro de Usurio.............................................................................. 63
Figura 44 - Validao SmartGWT............................................................................................ 64
Figura 45 - Validando Formulrio SmartGWT ........................................................................ 65
Figura 46 - Grfico Altura Vaadin ........................................................................................... 66
Figura 47 - Exemplo Grfico Vaadin ....................................................................................... 66
Figura 48 Exemplo de Cdigo SmartGWT ........................................................................... 67
Figura 49 - Grfico Altura SmartGWT .................................................................................... 67
Figura 50 - Classe Application Vaadin..................................................................................... 68
Figura 51 - Interface Sncrona .................................................................................................. 68
Figura 52 - Classe GreetingServiceImpl .................................................................................. 69
Figura 53 - Interface Assncrona .............................................................................................. 70
Figura 54 - Instalando Vaadin .................................................................................................. 78
Figura 55 - Selecionando o pluguin .......................................................................................... 78
Figura 56 - Criando um Projeto Vaadin ................................................................................... 78
Figura 57 - Configurao Projeto ............................................................................................. 79
Figura 58 - Web Module ........................................................................................................... 80
Figura 59 - Configurao Especfica ........................................................................................ 81
Figura 60 - Instalando GWT ..................................................................................................... 82
Figura 61 - Selecionando pluguin GWT................................................................................... 82
Figura 62 - Criando um Projeto GWT ...................................................................................... 83
Figura 63 - Configura a Aplicao GWT ................................................................................. 84
Figura 64 - Aplicao de Exemplo ........................................................................................... 85

LISTA DE QUADROS
Quadro 1 - Manter Usurio ....................................................................................................... 43
Quadro 2 - Manter Criana ....................................................................................................... 44
Quadro 3 - Manter Consulta ..................................................................................................... 45
Quadro 4 - Gerar Grfico Peso ................................................................................................. 45
Quadro 5 - Gerar Grfico Altura .............................................................................................. 46
Quadro 6 - Descrio dos Valores na Criao de um Projeto Vaadin ...................................... 79
Quadro 7 - Descrio dos Valores Web Module ...................................................................... 80
Quadro 8 - Configurao Especfica ........................................................................................ 81
Quadro 9 - Configurando a aplicao GWT ............................................................................. 84

SUMRIO

1 INTRODUO .................................................................................................................... 10
1.1 OBJETIVO GERAL ........................................................................................................... 11
1.2 OBJETIVOS ESPECFICOS ............................................................................................. 12
1.3 JUSTIFICATIVA ............................................................................................................... 12
1.4 ESTRUTURA DO TRABALHO ....................................................................................... 13
2 REFERENCIAL TERICO .............................................................................................. 14
2.1 APLICAES WEB .......................................................................................................... 14
2.2 FRAMEWORKS ................................................................................................................ 17
2.2.1 Definio .......................................................................................................................... 17
2.2.2 Construo ....................................................................................................................... 18
2.2.3 Classificao .................................................................................................................... 19
2.2.4 Vantagens e Desvantagens da Utilizao de Frameworks .............................................. 21
2.3 ESCOLHA DOS FRAMEWORKS ..................................................................................... 21
2.4 FRAMEWORK VAADIN .................................................................................................. 22
2.4.1 Arquitetura do Vaadin ..................................................................................................... 23
2.4.2 Criao de um Projeto que Utilize Vaadin ...................................................................... 26
2.4.3 Estrutura do Projeto ......................................................................................................... 26
2.5 FRAMEWORK GWT (GOOGLE WEB TOOLKIT) .......................................................... 28
2.5.1 Arquitetura GWT ............................................................................................................. 29
2.5.2 Criao de um Projeto que Utilize GWT ......................................................................... 32
2.5.3 Estrutura do Projeto ......................................................................................................... 32
2.5.4 SmartGWT ....................................................................................................................... 39
3 MATERIAL E MTODOS ................................................................................................ 41
3.1 DESCRIO DO PROJETO ............................................................................................. 41
3.2 REQUISITOS FUNCIONAIS ............................................................................................ 41
3.3 CASOS DE USO ................................................................................................................ 42
3.3.1 DESCRIO DOS CASOS DE USO ............................................................................ 42
3.4 DIAGRAMA DE SEQUNCIA ........................................................................................ 46
3.5 DIAGRAMA DE CLASSES .............................................................................................. 47
3.6 DIAGRAMA DE CONTEDO (RVORE DE DADOS) ................................................ 48
3.7 NSU .................................................................................................................................... 49

3.8 WIREFRAME .................................................................................................................... 50
3.9 ESTRUTURA DA APLICAO ...................................................................................... 51
4 RESULTADOS E DISCUSSES ....................................................................................... 53
4.1 FATORES ANLISADOS PARA O COMPARATIVO .................................................. 53
4.2 DESENVOLVIMENTO DO FORMULRIO ................................................................... 53
4.2.1 Vaadin .............................................................................................................................. 54
4.2.2 SmartGWT ....................................................................................................................... 55
4.3 DESENVOLVIMENTO DE TABELA .............................................................................. 57
4.3.1 Vaadin .............................................................................................................................. 57
4.3.2 SmartGWT ....................................................................................................................... 59
4.4 VALIDAO DE DADOS ............................................................................................... 61
4.4.1 Vaadin .............................................................................................................................. 61
4.4.2 SmartGWT ....................................................................................................................... 63
4.5 CRIAO DE GRFICO ................................................................................................. 65
4.5.1 Vaadin .............................................................................................................................. 65
4.5.2 SmartGWT ....................................................................................................................... 66
4.6 DIFERENAS ENTRE VAADIN E GWT ....................................................................... 67
4.7 LICENA DOS FRAMEWORKS ..................................................................................... 70
4.8 DOCUMENTAO E ATUALIZAES ....................................................................... 71
4.9 COMPONENTES DISPONIVEIS ..................................................................................... 71
5 CONSIDERAES FINAIS .............................................................................................. 73
5.1 CONCLUSO .................................................................................................................... 73
5.2 TRABALHOS FUTUROS/CONTINUAO DO TRABALHO ..................................... 73
6 REFERNCIAS BIBLIOGRFICAS............................................................................... 75
10

1 INTRODUO
O crescimento da Web nos ltimos anos criou a necessidade de servios mais rpidos e
instantneos, alm disso, as aplicaes desenvolvidas esto se tornando mais complexas e
geis devido as suas novas caractersticas de negcio. Com este crescimento surgiu o conceito
Web 2.0. Segundo a definio de O'Reilly (2004), Web 2.0
Web 2.0 a mudana para uma Internet como plataforma, e um entendimento das
regras para obter sucesso nesta nova plataforma. Entre outras, a regra mais
importante desenvolver aplicativos que aproveitem os efeitos de rede para se
tornarem melhores quanto mais so usados pelas pessoas, aproveitando a
inteligncia coletiva.
E uma das principais caractersticas desta nova mudana que as paginas Webs
passaram a se tornar interativas, e com a evoluo dos equipamentos de acesso a Internet,
torna-se possvel o processamento de certas informaes no prprio cliente, fazendo com que
a comunicao de requisio e resposta seja assncrona, ou seja, no mais necessrio
atualizar toda a aplicao para refletir uma pequena atualizao na pgina. (GONALVES e
VAHL, 2010)
Por Meio disto, as aplicaes Webs passaram a ter as mesmas funcionalidades que as
desktop. Surge ento o conceito de RIA (Rich Internet Application), que so Aplicaes
Ricas para Internet que descreve um novo conceito de interface para as aplicaes Web.
Macromedia, (2003), descreve algumas das principais caractersticas do termo RIA:
Alta performance em tempo de execuo, contedo e comunicao, fazendo
com que o contedo se torne mais dinmico, pois a comunicao entre o
cliente e o servidor acontece de forma assncrona, sem precisar atualizar toda
a pgina para se obter uma atualizao.
Integrao, em um mesmo ambiente de interface, comunicao e contedo.
Em aplicaes Web 1.0 era necessrio baixar o contedo para a mquina
cliente, sendo que na Web 2.0 executado na prpria pgina HTML,
utilizando plugins
1
para o navegador.
Multiplataforma: as aplicaes tem que ser desenvolvidas para suportar
interfaces de celulares, podcasts e smartphones, por exemplo.

1
Segundo PRADA, (2008) plug-in todo programa, ferramenta ou extenso que se encaixa a outro programa
principal para adicionar mais funes e recursos a ele.
11

Assim, muitos scripts
2
foram desenvolvidos para serem executados no lado cliente, no
intuito de melhorar o processamento e deixar mais geis os sistemas Webs. Outro fator que
facilitou no desenvolvimento de aplicaes Webs RIA, por utilizarem o melhor do conceito
da WEB 2.0, foram os frameworks. (GONALVES e VAHL, 2010)
Existem inmeros frameworks para serem usados na criao de aplicaes Webs, a
maioria com o objetivo de abstrair trabalhos repetidos, como a criao de componentes e
desenvolvimento da parte grfica da aplicao. Outro exemplo a facilidade de aplicar
padres de projeto, pois o framework j oferece uma estrutura pr-desenvolvida para isso.
Para a linguagem Java existem diversos Frameworks com este intuito, alguns exemplos so:
JSF (Java Server Faces), PrimeFaces, RichFaces, VRaptor, Vaadin, GWT (Google Web
Toolkit). A diferena entre eles o modo como trabalham. Por exemplo, Vaadin e GWT
utilizam um conceito diferente que os demais Frameworks citados, sua arquitetura de
programao baseada apenas na linguagem Java, no utilizam a maneira tradicional de
desenvolvimento de aplicaes Webs, se assemelham mais ao estilo de desenvolvimento
Desktop.
O framework Vaadin j vem com uma estrutura diferenciada de componentes para
serem utilizados no desenvolvimento da aplicao. GWT oferece varias extenses para serem
usadas, como: SmartGWT, GXT, GWT-EXT, todas com o mesmo objetivo oferecer
componentes para integrar na aplicao. No presente trabalho foi utilizado a biblioteca
SmartGWT que uma estrutura baseada em GWT que oferece diversos recursos para facilitar
e aperfeioar o processo de desenvolvimento. Assim esse trabalho tem o intuito de fazer uma
anlise comparativa entre os frameworks Vaadin e GWT. Nesta comparao pretende-se
destacar os principais elemento que diferenciam o desenvolvimento da aplicao em um e
outro framework, abstraindo assim o melhor de cada um.

1.1 OBJETIVO GERAL
Comparar os frameworks Vaadin e GWT (Google Web Toolkit), utilizando como
estudo experimental uma aplicao para acompanhar o desenvolvimento/crescimento de uma
criana.

2
Terra, (2007) Script uma lista de comandos que podem ser executados sem interao do usurio;
12

1.2 OBJETIVOS ESPECFICOS
Realizar um estudo bibliogrfico das tecnologias de desenvolvimento para
Web, frameworks e linguagens a serem utilizadas;
Modelar e desenvolver uma aplicao com o objetivo de controlar todo o
histrico de desenvolvimento de uma criana, com os frameworks Vaadin e
GWT (Google Web Toolkit);
Elaborar o comparativo com as vantagens e desvantagens da utilizao desses
frameworks, por intermdio de testes na aplicao e demonstrativo de cdigos;
1.3 JUSTIFICATIVA
Para acompanhar a evoluo dos sistemas Web, diversas tcnicas e tecnologias foram
desenvolvidas nos ltimos anos. Alguns exemplos so: HTML verso 5, XHTML, CSS
verso 3, XPath, Javascript, JQuery, JSF, JSP, Facelets, JSON, Ajax. Portanto o
desenvolvedor tem acesso a diversos processos de desenvolvimento, porm precisa realizar,
muitas vezes, o trabalho de vrios profissionais, pois envolve implementao de linguagens e
tecnologias diferentes.
Este trabalho pretende analisar quais so as vantagens de utilizar um framework com
conceito diferente no desenvolvimento de uma aplicao Web. Vaadin e GWT se assemelham
na maneira como trabalham, utilizam apenas a linguagem Java para a construo de toda a
aplicao, por este motivo foram escolhidos para a comparao.
E como parmetro para o comparativo ser desenvolvida uma aplicao que tem o
intuito de controlar o desenvolvimento de uma criana. Nesta aplicao o mdico informara
para o sistema o que foi abstrado da consulta, assim sendo ter o controle de todas as
informaes das consultas que foram realizadas pela criana, no qual poder observar como
foi sua evoluo, ter a opo de gerar grficos para saber como foi seu desenvolvimento no
seu nascimento at h ultima consulta realizada, podendo ento ter informaes importantes
durante o perodo de consultas que a criana realizou.
13

1.4 ESTRUTURA DO TRABALHO
O presente trabalho est dividido em cinco captulos:
No primeiro captulo ser abordada uma introduo e justificativa sobre o
assunto do trabalho proposto, alm de serem especificados os objetivos
especficos e gerais do projeto.
No segundo capitulo abordado o assunto por meio de um referencial terico.
No terceiro capitulo feita a documentao da aplicao a ser desenvolvida,
como: requisitos funcionais, diagramas e estrutura do trabalho.
No quarto capitulo ser abordado comparao entre os dois frameworks
estudados.
O quinto capitulo contm as consideraes finais do trabalho.

14

2 REFERENCIAL TERICO
Neste captulo ser abordado o referencial terico das tecnologias utilizadas no
trabalho.
2.1 APLICAES WEB
Inicialmente, a Internet era uma plataforma para que os usurios pudessem
compartilhar informaes. Por exemplo, publicar documentos e por meio de hiperlinks
3
fazer
referncia cruzada entre eles. A partir do momento que a Web foi se popularizando, os
usurios comearam a ter softwares em suas mquinas que permitiam interagir com toda esta
estrutura. (SMEETS, BONESS e BANKRAS, 2009)
Com sua popularizao, a Web deixou de apenas usar documentos HTML estticos, e
permitiu que fossem disponibilizados documentos dinmicos, assim sendo nasceu o conceito
de aplicao Web. Uma Aplicao Web a que est disponvel em um servidor central e
oferece servios para qualquer pessoa que tenha acesso Internet. (SMEETS, BONESS e
BANKRAS, 2009)
Com a Internet disponibilizando servios robustos, as aplicaes passaram a terem a
necessidade de desenvolver aplicaes RIA (Rich Internet Application). A razo disso, o
fato de dependerem de interaes assncronas com o servidor. Por exemplo, uma aplicao do
tipo planilha para Web se torna um problema se cada vez que o usurio modificar dados em
uma clula tenha que carregar toda a aplicao para refletir o calculo efetuado. Com isto a
Internet ganhou um novo termo, chamado de WEB 2.0. (SMEETS, BONESS e BANKRAS,
2009)
Segundo GONALVES E VAHL (2010) apud O'Relly, algumas caractersticas que
marcam os aplicativos na WEB 2.0 podem ser tidas como:
Web Como Plataforma: A WEB passou a ser vista como uma plataforma e no
apenas como meio de comunicao cliente e servidor. Ou seja, qualquer

3
Segundo Google (2010) Um hiperlink um link para uma publicao. Quando clica no link, o destino
vinculado aberto. O destino geralmente outra pgina da Web, mas tambm pode ser uma imagem, um
endereo de email ou um programa. O hiperlink propriamente dito pode ser um texto, uma imagem ou uma
forma. Hiperlink ou hiperligao qualquer elemento de um hiper texto (pginas web) que faam referncia a
outro texto ou a outra parte deste texto. Ou seja, qualquer rea clicvel de uma pgina web um hiperlink.
15

equipamento que tenha acesso a Internet pode acessar uma aplicao WEB,
independente de sistema operacional;
Uso da Inteligncia Coletiva: Os Usurios passaram a fazer parte das
aplicaes Webs. Um exemplo disso a Wikipdia, uma enciclopdia online
onde qualquer pessoa pode colocar e editar algum contedo;
Beta perptuo: Os softwares passam a ser disponibilizados como servios e no
mais como verses. Ou seja, no e mais preciso instalar um software na
mquina local. Basta acessar algum servio na Internet;
Modelo de programao mais leve: As aplicaes devem ser simples de ser
utilizadas;
Experincias ricas do usurio: Com a evoluo dos equipamentos de acesso a
Internet, parte do processamento das aplicaes pode ser feito no prprio
cliente. O modelo de comunicao das aplicaes passou a ser assncrona, no
sendo necessrio atualizar toda a aplicao para refletir uma pequena
atualizao. As pginas se assemelham com as aplicaes Desktop;
Uma das tecnologias que contriburam para que o modelo de comunicao cliente e
servidor passassem a ser assncrono, com maior interao entre o usurio e a pgina, tornado
as aplicaes Webs parecidas com as Desktop, foi o conjunto de tecnologias AJAX
(Asynchronous Javascript and XML). Para CAELUM (2011)
AJAX um conjunto de tcnicas de desenvolvimento Web para executar tarefas do
lado do cliente, por exemplo, modificar pedaos de uma pgina sem ter que carregar
ela inteira. Na verdade o mecanismo muito simples. De acordo com alguma ao
um Javascript envia uma requisio ao servidor como se fosse em background. Na
resposta dessa requisio vem um XML que o Javascript processa e modifica a
pgina segundo essa resposta.
A diferena entre as aplicaes AJAX com as que no fazem o seu uso, pode ser
ilustrada na Figura 1, o cliente faz uma requisio, o servidor processa essa requisio e
devolve o resultado para a pgina, sendo ento disponibilizada para o usurio. O problema
disso que o usurio s pode fazer um nmero limitado de interaes com a pgina, ou seja,
ele ter que esperar um tempo at o servidor devolver a resposta, nesse tempo, o usurio no
pode interagir com a aplicao, este o chamado modelo sncrono de interao com a pgina.
16

Figura 1 - Modelo de interao de uma aplicao Web tpica
Fonte: (SMEETS, BONESS e BANKRAS, 2009)
Dependendo do tipo da aplicao, utilizar este modelo de programao invivel.
nesse sentido que entra o modelo de programao assncrono, permitindo que o usurio possa
interagir com a aplicao de maneira agradvel, enquanto alguma ao feita anteriormente
processada no servidor, este modelo pode ser visto na Figura 2.

Figura 2 - Modelo de aplicao Web utilizando AJAX
Fonte: (SMEETS, BONESS e BANKRAS, 2009)
Com este novo modelo de programao foi quebrado o modelo clssico da Web de
solicitao da pgina por HTTP pelo HTML. A maneira que feito isso com o AJAX
engine, que uma camada de interao entre o usurio e o servidor, isso tudo roda dentro do
17

navegador e gerencia as aes ao servidor enquanto realiza a manipulao dos resultados, a
grande vantagem disso tudo que o usurio pode continuar interagindo com a aplicao
enquanto o servidor processa as informaes. (SMEETS, BONESS e BANKRAS, 2009)
2.2 FRAMEWORKS
Um dos pontos principais da Engenharia de Software o reuso, pois atravs do uso
desta tcnica adquirida maior qualidade e reduo do esforo no desenvolvimento (Gimenes
& Huzita, 2005). Pelo fato da orientao a objetos fazer com que as classes possam ser
reutilizadas, assim como os mtodos por meio de herana e polimorfismo (Lundberg &
Mattsson 1996). Componentes de softwares fazem com que unidades reutilizveis sejam
definidas para oferecer servios atravs de interfaces bem definidas (Gimenes & Huzita,
2005).
Alm da reutilizao, a tecnologia de frameworks torna possvel que os produtos
sejam gerados atravs de uma estrutura que utiliza os conceitos mais conhecidos da famlia de
aplicaes (Pinto, 2000).
Neste capitulo sero contextualizadas as principais definies de frameworks
encontrados na literatura. Tambm ser abordado todo o processo de construo de um
framework e a classificao em que so divididos, alm das vantagens e desvantagens da sua
utilizao.
2.2.1 Definio
A necessidade de desenvolver aplicaes cada vez mais robustas e a exigncia de
produtos com qualidade e confiana, fez com que o processo de desenvolvimento de software
passou a utilizar estruturas j desenvolvidas, os frameworks.
O objetivo principal de um framework auxiliar em todo o processo de
desenvolvimento de um software, fazendo com que as aplicaes sejam produzidas de forma
mais rpida e gil. Na Figura 3, um exemplo tpico da arquitetura de um framework para
aplicaes Web. (MOTA, 2010)
18

Figura 3 - Arquitetura de uma aplicao Web baseada em Frameworks
Fonte: (MOTA, 2010)
Segundo Buschmann et al. (1996), Preesmann (1995) e Pinto (2000):
um framework definido como um software parcialmente completo projetado para
ser instanciado. O framework define uma arquitetura para uma famlia de
subsistemas e oferece os construtores bsicos para cri-los. Tambm so
explicitados os lugares ou pontos de extenso (hot-spots) nos quais adaptaes do
cdigo para um funcionamento especfico de certos mdulos devem ser feitas.
Para Johnson (1991) e Gamma et al (1995),
um framework um conjunto de objetos que colaboram com o objetivo de atender
a um conjunto de responsabilidades para uma aplicao especfica ou um domnio
de aplicao.
J Segundo Mattsson (1996, 2000),
um framework uma arquitetura desenvolvida com o objetivo de atingir a mxima
reutilizao, representada como um conjunto de classes abstratas e concretas, com
grande potencial de especializao.
2.2.2 Construo
A construo de um framework feita a partir da observao de um problema ocorrido
durante o desenvolvimento de uma aplicao, e que este problema se repete vrias vezes e a
soluo utilizada para resolv-lo pode futuramente se tornar um framework, tornando
produtivo o desenvolvimento quando se deparado com esta mesma situao.
A construo de um framework envolve trs passos: anlise das funcionalidades
comuns, definio dos hot-spots e projeto do framework. Segundo Fiorini (2001 apud Souza,
2004, p. 7), o primeiro passo realizar uma observao das aplicaes que j foram ou esto
sendo desenvolvidas e que tiveram alguma situao em comum, a partir desta anlise verificar
quais componentes so reusveis. Utilizando o conceito de programao orientada a objetos,
criam-se classes abstratas para a utilizao em alguma aplicao que tiver o mesmo problema.
(SOUZA, 2004).
19

Aps realizar a anlise, o prximo passo definir o hot-spots. Depois de saber quais
pontos sero fixos, preciso identificar as situaes que variam em todo o contexto da
aplicao, e que vo precisar de adaptaes para ser utilizada. (SOUZA, 2004).
O ultimo passo para a construo do framework o projeto. Nesta fase, so amarradas
as atividades de todos os passos realizados anteriormente, procurando aplicar padres de
projeto para que o produto se torne reusvel e cumpra seu objetivo; nesta etapa tambm so
feitas as correes de determinados problemas e remoo de componentes no utilizados,
alm de modificar alguns componentes para terem novas funcionalidades. Estas observaes
surgem a partir do uso do framework em vrios projetos. (SOUZA, 2004).
Segundo Johnson (1992 apud Souza 2004, p , um framework deve ser uma soluo
reusvel, estvel e possuir uma boa documentao. Caso essa documentao no esteja
presente, corre-se o risco de o framework nunca ser usado. A documentao deve ser feita
com o intuito de facilitar a aplicao do framework em outros projetos, sendo que alguns
aspectos que a documentao deve possuir so:
Propsito: Define para que serve e quais os problemas o framework soluciona;
Utilizao: Descreve como construir uma aplicao utilizando os componentes
j prontos;
Detalhes: Define como os objetos participantes se relacionam.
Depois de documentado o framework j est pronto para ser utilizado por
desenvolvedores que se depararem com o mesmo problema.
2.2.3 Classificao
Segundo Sauv (2004 apud Souza 2004), existem trs classificaes para frameworks:
Middleware: comumente utilizado em sistemas distribudos, tambm prov a
integrao entre sistemas.
Suporte: Auxilia no desenvolvimento da infraestrutura da aplicao, no
resolvem o problema por completo. So chamados de frameworks Horizontais,
a Figura 4, demonstra como so esses tipos de frameworks, nota-se que
existem uma pequena parte disponvel, e restante da aplicao deve ser
implementada.
20

Figura 4 - Framework Horizontal
Fonte: (UFCG, 2010)
Aplicao: voltado para aplicaes, seu objetivo principal construir
aplicaes para usurios finais. So chamados de frameworks Verticais, a
Figura 5 representa a composio deste tipo de framework. Nota-se que grande
parte da aplicao j est construda, e que apenas uma pequena parte tem que
ser implementada, exemplos desses tipos de frameworks so: Editores de
desenho estruturado, frameworks para jogos e monitorao de riscos
financeiros.

Figura 5 - Framework Vertical
Fonte: (UFCG, 2010)

A Figura 4 ilustra a arquitetura dos frameworks que sero comparados neste trabalho,
como pode ser visto uma pequena parte est pronta para ser utilizado, o restante preciso ser
desenvolvido.
21

2.2.4 Vantagens e Desvantagens da Utilizaes de Frameworks
As vantagens da utilizao de um Framework, de acordo com SOUZA, (2004) so:
Ganho de tempo no desenvolvimento do projeto, pois j existe uma estrutura
semi pronta, e vrias funcionalidades j existem;
Conforme mais pessoas vo utilizando, melhor fica o funcionamento do
Framework, pelo fato de possveis problemas j serem sido descobertos e
arrumados, alm de adicionado novas funcionalidades;
Acaba sendo necessrio implementar o que realmente preciso, evitando a
codificao de toda a aplicao, pois usado os componentes existentes;
Como j existe uma estrutura pronta e testada, a probabilidade de erros no
cdigo bem menor.
Por outro lado, a utilizao de um Framework tem suas desvantagens, de acordo com
SOUZA, (2004) so:
Requer pessoas especializadas: isso acarreta que a equipe faa treinamentos
para entendimento do produto, aumentando o prazo para trmino do projeto;
A depurao dos programas mais complicada: Se no a disponibilidade de
acesso ao cdigo-fonte, fica difcil resolver possveis erros;
Mudana no foco do desenvolvimento: Os desenvolvedores passam a ter que
entender ideias que no foram proposta pela sua equipe de desenvolvimento;
Implementao em linguagem especifica: Como so implementados em uma
linguagem, perde a portabilidade de poder utilizar outras linguagens em
conjunto com o framework;
2.3 ESCOLHA DOS FRAMEWORKS
Para a realizao do estudo comparativo, foram escolhidos os frameworks Vaadin e
GWT (Google Web Toolkit), por possurem um estilo de programao muito parecido com a
programao para Desktop, e utilizarem a linguagem Java como elemento principal para o
desenvolvimento.
Vaadin um framework de desenvolvimento de aplicaes Web, que permite aos
desenvolvedores criar interfaces de alta qualidade utilizando a linguagem Java. Fornece uma
biblioteca pronta para utilizar seus componentes, e tambm permite a criao de novos
22

componentes. O objetivo principal a facilidade de uso, reutilizao, extensibilidade, e
atender a necessidade de aplicaes coorporativas de grandes empresas. (VAADIN, 2012)
O GWT um conjunto de ferramentas para desenvolvimento Web em Java, usado para
o desenvolvimento de aplicativos RIA (Rich Internet Application). O objetivo principal do
GWT fazer com que o desenvolvimento se torne mais produtivo, simples, com qualidade,
diminuindo a incidncia de eventuais erros. O GWT possui um conjunto de componentes
visuais rico, o desenvolvedor passa a no se preocupar com Javascript para utilizar Ajax, pois
o cdigo feito em Java transformado em Javascript pelo GWT. (MAGALHES, 2009)
2.4 FRAMEWORK VAADIN
O mecanismo central do framework Vaadin a biblioteca Java projetada para o
desenvolvimento e manuteno de interface grfica de alta qualidade. Tendo como ideia
principal de programao desenvolver interface Web muito parecida com desktop, seu modelo
de desenvolvimento se baseia no estilo de programao Swing, SWT e AWT. (VAADIN,
2012)
O Vaadin trabalha com a ideia de modelo de programao ao lado do servidor, ou seja,
o gerenciamento da interface do usurio feita no navegador, e a comunicao Ajax ocorre
entre o navegador e o servidor. Como Vaadin trabalha apenas com a linguagem Java, o
desenvolvedor no precisa se preocupar com HTML ou Javascript, facilitando a depurao no
desenvolvimento da aplicao. (VAADIN, 2012)

Figura 6 - Arquitetura Geral do Vaadin
Fonte: (VAADIN, 2012)
A Figura 6, ilustra a arquitetura bsica da aplicao Web Vaadin. Exemplificando, a
interface da aplicao no Vaadin feita no Servidor e enviada para o cliente que
responsvel pela criao dos widget
4
informados, ou seja, se for preciso mostrar uma lista

4
Componente utilizado na interface grfica.
23

contendo informaes de uma tabela em um Combo Box, o Vaadin cria esta lista no servidor
e envia ao cliente. (VAADIN, 2012)
Como no lado do cliente executado Javascript, no h necessidade de o navegador
conter pluguins para aplicaes feitas com o Vaadin. Outro fator importante, que o Vaadin
conta com o apoio do GWT, por utiliza-lo internamente ao lado do cliente, de modo que o
desenvolvedor no precisa se preocupar com o suporte ao navegador. (VAADIN, 2012)
Atrs do modelo de desenvolvimento ao lado do servidor, Vaadin faz o melhor uso do
conjunto de tecnologias AJAX
5
(Asynchronous Javascript e XML), tcnicas que tornam
possvel a criao de Rich Internet Applications (RIA), que transformam a aplicao
interativa como uma feita para desktop. (VAADIN, 2012)
O Framework Vaadin faz uso internamente do GWT (Google Web Toolkit) como
mecanismo de exibio ao lado do cliente. No GWT a aplicao construda em Java, e
compilada em Javascript, liberando a necessidade de o desenvolvedor ter conhecimento nessa
linguagem. (VAADIN, 2012) A diferena entre o funcionamento do GWT e Vaadin est na
forma de comunicao entre o cliente e servidor. No GWT feita uma chamada AJAX para a
comunicao entre o cliente e o servidor, criado classes especificas para gerenciar este
modelo de comunicao. No Vaadin, tambm a comunicao AJAX com o cliente, s que a
interface do usurio construda no prprio servidor, ou seja, no existem classes que
separam a lgica de programao cliente e servidor.
2.4.1 Arquitetura do Vaadin
Vaadin consiste em uma aplicao Web API, contm uma variedade de componentes
de interface para o usurio, temas para controlar a aparncia, e um modelo de dados que
permite que os seus componentes de interface sejam ligados direto com os dados. (VAADIN,
2012).
Uma aplicao que utiliza Vaadin executada como um servlet em um servidor Web
Java, atendendo as solicitaes HTTP. O adaptador de terminal recebe requisies dos
clientes atravs do servidor Web Java Servlet
6
API, e interpreta a eventos do usurio para uma

6
A tecnologia Java Servlet fornece aos desenvolvedores Web um mecanismo simples e consistente para estender
funcinalidades de um Servidor Web. Um servlet pode ser quase considerado um applet que executado no
servidor. (ORACLE, 2010)
24

sesso particular. As sesses so controladas por Cookies
7
. Os eventos esto associados com
os componentes de interface e entregues para a aplicao, que os trata como listeners
8
. Se
ocorrer alterao de algum componente no lado do servidor, o terminal de adaptador
comunica o navegador que houve uma modificao, gerando uma resposta, aps isso o cliente
recebe a resposta e realiza a alterao na pgina do navegador. (VAADIN, 2012)

Figura 7 - Arquitetura Vaadin
Fonte: (VAADIN, 2012)

O nvel mais alto da aplicao consiste da classe que herda
com.vaadin.Application. Ela cria os componentes de interface, recebe os eventos, e
faz as alteraes nos componentes.
As partes principais da arquitetura e suas funes demonstradas na Figura 7 so:
User Interface Components: Consiste nos componentes de interface com o
usurio criado pela aplicao, na imagem representado pelo UI Component.

7
Cookies so uma forma de armazenamento de dados no lado do cliente. (ORACLE, 2010)
25

Client-side Engine: Gerencia a renderizao do navegador usando Google Web
Toolkit (GWT). Ele comunica a interao do usurio com a interface,
utilizando o adaptador de terminal (Terminal Adaptater) com a User Interface
Definition Language (UILD), que um sistema de comunicao baseado na
linguagem JSON. As Comunicaes so feitas com solicitaes assncronas
HTTP ou HTTPS.
Terminal Adapter: Os componentes na interface do usurio no se processam
automaticamente, precisam de um Terminal Adapter. Essa camada permite aos
usurios utilizarem as aplicaes vaadin em qualquer navegador Web. Quando
o usurio realiza alguma ao na pgina Web, esse evento repassado para o
Terminal Adapter como solicitaes assncronas AJAX. O Terminal Adapter
devolve os eventos que o usurio realizou para o componente, aps isso
atualizada a pgina com as modificaes ocorridas.
Themes: A interface do usurio faz a separao entre a apresentao e lgica.
Enquanto a lgica da interface do usurio tratada como cdigo Java, a
apresentao definida como temas CSS. Vaadin fornece alguns temas
padres. Pode ser definidas folhas de estilo, modelos HTML que definem
layouts personalizados e outros recursos, como imagens.
UIDL: O Terminal Adapter quando invocado utiliza a linguagem User
Interface Definition Language (UIDL). A Comunicao UIDL feita
utilizando JSON (Javascript Object Notation), que um formato de
intercmbio de dados leve que especialmente eficaz para comunicao
AJAX.
Events: Toda interao do usurio com a interface, so primeiramente
processados no lado do cliente com Javascript, sendo ento passado para o
Servidor HTTP, Terminal Adapter e para o componente na camada de
aplicao.
Data Model: Utilizando o Data Model os componentes de interface podem ser
ligados diretamente com uma fonte de dados, sem a necessidade de um cdigo
de controle para atualizar os dados, por exemplo, pode-se vincular um
componente Table diretamente com uma resposta SQL.

8
um processo separado que executado no servidor. Ele recebe as requisies do cliente e gerencia o trfego
dessas solicitaes no servidor. (ORACLE, 2010)
26

2.4.2 Criao de um Projeto que Utilize Vaadin
O apndice A demonstra como instalar e criar um projeto no Vaadin, ser
exemplificada passo a passo a criao, foi utilizado para este exemplo a IDE Eclipse SDK.
2.4.3 Estrutura do Projeto
Depois de criado o projeto, necessrio efetuar a configurao das bibliotecas a serem
utilizadas no desenvolvimento. Assim, deve-se configurar as bibliotecas do Vaadin no
diretrio WebContent/WEB-INF/lib. Para exemplificar a criao do projeto, foi criado
um esqueleto da classe de exemplo no diretrio src, e tambm foi criado o arquivo
web.xml j configurado no diretrio WebContent/WEB-INF/Web.xml. A Figura 8
exemplifica a estrutura do projeto na IDE Eclipse.

Figura 8 - Estrutura da Aplicao
O cdigo da classe de exemplo da aplicao apresentado na figura 9.

Figura 9 - Classe Exemplo
27

A primeira observao que toda aplicao Vaadin estende da classe Application.
E cada instancia desta classe criada uma sesso com o usurio que invocou, no contexto da
aplicao de exemplo, quando o usurio chamar a pagina de Meu primeiro exemplo, ser
chamado o mtodo init e executado o que estiver implementado nele.
Quando invocado o mtodo init ser mostrado o contedo da janela principal, que
nesse exemplo tem o nome de mainWindow, uma aplicao Vaadin pode ter varias janelas,
mais sempre ser redirecionada para a janela principal.
Aps criar a janela, foi criado o componente Label com o texto Bem Vindo ao
Vaadin, e adicionado na janela principal, quando executada a aplicao ser mostrada uma
pgina conforme a Figura 10.

Figura 10 - Aplicao sendo executada
A Figura 11 o exemplo do arquivo web.xml, que define o Vaadin Framework
servlet, a classe de aplicao, e o mapeamento do servlet.

Figura 11 - Web.xml Vaadin
28

O arquivo Web.xml um componente padro em Java EE que descreve as
funcionalidades e caractersticas da aplicao Web para o servidor. Na figura 11, o cdigo da
linha 14 responsvel pelo gerenciamento da implantao da aplicao, pois a classe da
aplicao especificada informando seu nome para o servlet, o servlet ento ligado a uma
URL em um caminho padro para servlets Java.
Portanto, o arquivo Web.xml um descritor que informa para o servidor como ele
deve gerenciar a aplicao Web, sendo obrigatrio em qualquer aplicao Vaadin
2.5 FRAMEWORK GWT (GOOGLE WEB TOOLKIT)
O GWT um framework de cdigo aberto, com foco no desenvolvimento de
aplicaes RIAs para desenvolvedores Java. Estas aplicaes so muito parecidas com as
desenvolvidas em desktop, normalmente so escritas em Javascript. Mas o Javascript no
nem um pouco parecido com a linguagem Java, portanto, seu modelo e pratica de
desenvolvimento diferente. (SMEETS, BONESS e BANKRAS, 2009).
Entretanto, o GWT faz com que seja desenvolvida aplicaes Javascript em Java. Isto
realizado pelo compilador de Java para Javascript. Este compilador tem o trabalho de fazer
com que todo o cdigo desenvolvido em Java seja traduzido para Javascript, com isso, o
GWT consegue lidar com a quase todos os quirks
9
dos navegadores, permitindo que o
desenvolvedor se concentre apenas com a linguagem Java, e no perdendo tempo codificando
para diferentes tipos de navegadores. (SMEETS, BONESS e BANKRAS, 2009).
Segundo (SMEETS, BONESS e BANKRAS, 2009), existem algumas consideraes
gerais antes de iniciar o desenvolvimento com GWT, so:
No indexado pelo mecanismo de busca: aplicaes em Ajax
(consequentemente as aplicaes em GWT) no so bem indexadas por
mecanismos de busca. Pelo fato do mecanismo de busca no aceitar Javascript,
s conseguem enxergar a pgina bsica que faz a hospedagem da aplicao
Ajax, no conseguem ter uma viso dinmica dos elementos que dependem do
Javascript.
No degradam de forma suave: Isso reflete o fato de quando os usurios das
aplicaes desabilitam o Javascript, eles s conseguem visualizar a pgina

9
Quirks: o modo como os navegadores interpretam o CSS. (PEREIRA, 2005)

29

bsica, se tornando obrigatrio habilita-lo para que sua aplicao possa ser
utilizada.
Falta de transparncia na separao entre o cdigo e estilo/layout: isso,
objetivamente, o fato dos estilos e aparncias estarem sendo utilizado no
cdigo Java, ou seja, o GWT no serve para designers, pois estes preferem
utilizar em suas aplicaes HTML puro, com locais de insero de contedos
dinmico.
2.5.1 Arquitetura GWT
Segundo (SMEETS, BONESS e BANKRAS, 2009), o GWT pode ser divido em trs
partes principais, sendo que a ultima tem vrias subdivises:
Compilador de Java para Javascript: Essa parte a mais importante do GWT,
o mecanismo principal de sua existncia. Isso faz com que o GWT se torne
uma ferramenta poderosa para desenvolvimento de aplicaes RIAs. O
compilador faz com que todo cdigo desenvolvido em Java seja traduzido para
Javascript.
Biblioteca de emulao JRE: Trabalhar com Javascript totalmente diferente
do processo de desenvolver em Java, portanto, para que o processo de
compilao de Java para Javascript funcione, preciso emular os construtores
e classes do ncleo Java, da maneira que isso tudo possa ser traduzido para um
cdigo que consiga executar Javascript.
Biblioteca de gerao UI: Essa parte do GWT dividida em vrias partes. Isso
todo o cdigo base fornecido pelo GWT, incluindo os componentes UI,
suporte RPC, e gerenciamento do histrico entre outros.
Quanto aos itens, o primeirose refere ao elemento principal do GWT, que o
compilador Javascript, a histria sobre o desenvolvimento do GWT, comeou quando a
Google iniciou o desenvolvimento de aplicaes RIA, e acabou por ter alguns problemas ao
decorrer do desenvolvimento. Acabaram por fazer uma anlise de qual seria a melhor maneira
de desenvolver aplicaes RIAs e acabaram por decidir em fazer o GWT, sendo que a ideia
principal seria que a aplicao fosse desenvolvida com a linguagem Java. O maior desafio foi
desenvolver um compilador que conseguisse transformar Java em Javascript, e tambm que o
desenvolvedor no se preocupasse com os diferentes navegadores. No final, acabaram
30

conseguindo desenvolver o GWT com todos esses requisitos fundamentais para sua
utilizao. (SMEETS, BONESS e BANKRAS, 2009)
O compilador um programa Java que pode ser iniciado rodando a classe
com.google.gwt.dev.GWTCompiler. Uma das partes fundamentais do compilador, que ao
contrario do compilador Java normal, ele s compilar o cdigo que realmente utilizado
dentro do mdulo, evitando gerar para o cliente cdigo Javascript no utilizado. O problema
disto que no permitido o carregamento das classes em tempo de execuo, por no serem
compiladas para Javascript, por isso necessrio que o cdigo seja referenciado de alguma
forma para que possa ser includo em tempo de execuo. (SMEETS, BONESS e
BANKRAS, 2009)
Para finalizar, a Figura 12 um exemplo do que gerado pelo compilador quando
cdigo Java traduzido para Javascript.

Figura 12 - Sada gerada pelo compilador
O principal fator a se notar que nesta sada os resultados da compilao so vrios
arquivos Javascript, que so um para cada plataforma suportada. O
exemplogwt.nocache.js tem a responsabilidade de carregar o arquivo correto para
cada plataforma.
A segunda parte se refere a biblioteca de emulao JRE, que dividida em duas partes,
a primeira lidar com o suporte da linguagem Java para saber o que pode e o que no pode
utilizar para a compilao para Javascript, j a segunda parte se refere as classes que so
emuladas pelo GWT.
31

Sobre o suporte a linguagem, pode-se utilizar toda extenso Java para desenvolver
aplicaes que sero compiladas para Javascript pelo GWT, mais existem algumas diferenas
que so importantes no desenvolvimento da aplicao, a baixo a lista dessas observaes:
Suporte a Long: O Javascript no tem representao de Long nas suas
especificaes de linguagem, portanto no ter como passar um cdigo Long
do cdigo Java para os mtodos Javascript Native Interface (JSNI).
Tratamento de excees: funcionam como em todas aplicaes Java, mais
existem duas excees que precisam ser informadas, primeiro, o mtodo
getStackTrace no retorna nada de til quando est rodando como
Javascript, segundo, as excees default, como Null Pointer Execept e
OutOfMemoryError no ser incluso no cdigo, ou seja, o desenvolvedor
ter de fazer uma verificao de Null por conta prpria.
Thread nico: os interceptadores do Javascript so mono-thread, ento a
aplicao tambm ser. Portanto, os mtodos que so relacionado a thread e
palavras chaves (exemplo synchronized), no tero utilidade nenhuma, e
ser ignorado pelo compilador GWT.
Sem reflexo: No existe a possibilidade de carregar classes dinamicamente
por reflexo, pelo fato do compilador GWT ter que saber sobre cada classe e
mtodo desenvolvido na aplicao, para poder criar um arquivo Javascript para
cada plataforma.
Em relao s classes emuladas, pode-se utilizar quase toda a linguagem Java para
desenvolver a aplicao, mais como Javascript trabalha de maneira diferente de Java, existem
algumas observaes. (SMEETS, BONESS e BANKRAS, 2009)
Para saber quais classes podem ser usadas, basta verificar se as classes utilizadas so
emuladas pelo GWT, e mesmo para estas classes emuladas, s pode usar os mtodos que
tambm so emulados pelo GWT. Os exemplos das classes que podem ser usadas so as dos
pacotes Java.lang e Java.util, alm de algumas do subconjunto Java.io e
Java.sql. (SMEETS, BONESS e BANKRAS, 2009)
At agora foi mostrado as restries que o desenvolvedor enfrente utilizando GWT,
mais a ltima parte referente a Biblioteca UI, possui vrios subconjuntos, como dito
anteriormente, esses subconjuntos facilitam o trabalho, abaixo exemplos dos subconjuntos:
Widgets e Layout: Grande parte no desenvolvimento de uma aplicao RIA
na verdade a criao da interface. No nvel mais bsico, isso se reflete na
32

utilizao de widgets e criando a interface referente a cada um. Portanto, uma
grande parte do GWT consiste de componentes e classes relacionadas a layout.
Comunicao com Servidor: Quase todas as aplicaes GWT, precisam de
algum tipo de back end para buscar e armazenar dados, e tambm processar
alguma ao. Para isso, o GWT utiliza um mecanismo de RPC para
comunicao com o servidor Java.
Suporte a Testes: Uma das vantagens no desenvolvimento de uma aplicao
GWT em relao a aplicaes normais do Ajax, que o cdigo escrito pode ser
facilmente testado. Pode ser usado as melhores prticas em relao a testes
unitrios, e tambm para alguns casos, o GWT fornece testes com o framework
de testes JUnit.
2.5.2 Criao de um Projeto que Utilize GWT
O apndice B demonstra como instalar e criar um projeto com GWT ser
exemplificado passo a passo a criao, foi utilizado para este exemplo a IDE Eclipse SDK.
2.5.3 Estrutura do Projeto
Uma aplicao desenvolvida em GWT consiste de um conjunto de mdulos, que um
pacote GWT constitudo por cdigo Java, Javascript, arquivos HTML, imagens, definio de
dados e o que preciso para um aplicativo Web. Quando criado a estrutura de diretrio GWT
no eclipse, ela baseada na estrutura do mdulo GWT que ele implementa. (CHU-CARROL,
2012)
Inicialmente, pode-se analisar a estrutura do projeto criado como exemplo da Figura
13, que se trata de uma aplicao onde o usurio manda uma mensagem para o servidor, e este
responde com informao enviada pelo cliente. No Projeto, h um conjunto de bibliotecas
GWT, um diretrio fonte com o nome de src e tambm um diretrio de destino com o nome
de war.
33

Figura 13 - Estrutura Projeto GWT
O diretrio fonte dividido em trs partes: a declarao do mdulo, o pacote de
cdigo Java ao lado do cliente, e tambm o pacote Java ao lado do servidor.
O pacote do lado do servidor identificado com o nome com.exemplo.
projetoGWT.server, ilusoriamente simples, pelo fato do GWT gerar a parte interna
no servidor.
O cliente constitudo por trs arquivos. A CriandoProjetoGWT classe
principal da aplicao, as outras duas classes chamada de GreetingService e
GreetingServiceImpl fazem parte da configurao para a chamada de procedimento
remoto GWT, essas duas classes definem as declaraes necessrias que o GWT precisa para
permitir que seja desenvolvido aplicativos cliente/servidor AJAX sem precisar configurar
explicitamente o XMLHttpRequests.
A maneira que essas trs parte se juntam configurada na declarao do modulo, que
neste exemplo est no pacote com.exemplo.projetoGWT com o nome de
CriandoProjetoGWT.gwt.xml. A Figura 14 o exemplo do mdulo.
34

Figura 14 - Mdulo GWT
O elemento rename faz a manipulao da URL do GWT, por exemplo o
GWT informara o servidor que a URL terminara com o nome
criandoprojetogwt.
Os mdulos podem herdar propriedades de outros mdulos, sendo semelhante
com herana em orientao a objetos. O aplicativo um submdulo de
com.google.gwt.user.User, que um mdulo padro para interface de
usurio. A grande parte dos componentes, o mecanismo de chamada de
procedimento remotos e tambm a infraestrutura bsica dos servlets no
servidor, herdada com est declarao.
Parte do motivo que o GWT possui herana e tambm mdulos, fato do
GWT poder criar herana com arquivos CSS que definem a aparncia dos
componentes da aplicao, ou seja, pode-se alterar a aparncia do aplicativo
herdando de um mdulo de estilo diferente.
Toda aplicao GWT precisa de um ponto inicial que semelhante a uma
funo main. Neste exemplo, a classe CriandoProjetoGwt. No mdulo
precisa ser informado qual o ponto inicial da aplicao.
Em um mdulo GWT, a parte de interface do usurio definida em um arquivo
HTML, este arquivo no considerado cdigo fonte, por isso no colocado no diretrio src,
e sim no war. um recurso esttico que ter informaes que sero utilizadas pelo cdigo. A
Figura 15 o arquivo HTML deste exemplo.
35

Figura 15 - Arquivo HTML
Como pode ser visto, um arquivo HTML padro, comeando com a declarao da
tag HTML padro, e tambm do doctype, alm dos blocos de cabealho com os rtulos
comuns. A tag <script> a parte mais importante do arquivo HTML, nela que
referenciado o arquivo Javascript gerado pelo compilador, neste caso o arquivo chamado de
criandoprojetogwt.nocache.js.
Todo o cdigo Java gerado na classe inicial que pode ser visto da Figura 16, ser
retornado dento da tag <body>, poderia tambm colocar algum componente com um id
especifico e referencia-lo na classe EntryPoint Java.
36

Figura 16 - Classe EntryPoint

A classe de ponto inicial seria equivalente a uma funo main, definindo,
como um programa principal em um programa no GUI. A funo main
retratada no mtodo onModuleLoad, como o prprio nome reflete, o mtodo
chamado quando o mdulo GWT invocado pelo cliente, neste mtodo que
criado a interface grfica da aplicao, e tambm a configurao de eventos
dos componentes.
A primeira coisa a fazer no mtodo onModuleLoad criar os widgets da
interface grfica. A maneira de se trabalha no parece nem um pouco com o
desenvolvimento de aplicaes Web comuns, se identificando com
programao estilo Desktop.
O GWT oferece para o desenvolvedor um contexto GUI que o contedo da
pgina HTML, chamado de rootpanel. Neste exemplo, foi acessado o
37

diretrio raiz do arquivo, invocando RootPanel.get(), passando o
componente VerticalPanel populado com um label e um button. Se
acontecer da pgina da aplicao conter elementos e estes estejam identificados
por um id, ento basta utilizar a chamada com get(id).
At agora foi mostrado toda a estrutura bsica para a criao da interface grfica em
GWT, o que falta demonstrar como funciona a parte de cliente/servidor em GWT.
O cdigo Ajax utilizado na comunicao cliente/servidor no escrito explicitamente
em GWT, em vez disso feito uma chamada de procedimento remoto (RPC). (CHU-
CARROL, 2012)
O RPC se parece com uma chamada normal de mtodo, mais quando invocada
traduzida pelo GWT em uma solicitao do cliente para o servidor, o valor do retorno do RPC
a resposta do servidor para o cliente. Como em qualquer outra aplicao RPC, existe um
lado cliente e outro servidor em GWT. (CHU-CARROL, 2012)
Tradicionalmente, o RPC tenta se parecer com uma chamada ao uma funo local, ou
seja, se fosse chamar uma funo fatorial, por exemplo, seria parecido como uma declarao
tradicional de uma funo, o mesmo se repete para a sua chamada. (CHU-CARROL, 2012)
Para a aplicao desenvolvida de exemplo, h uma chamada remota, onde o cliente
envia uma mensagem para o servidor, e este retorna a mesma como resposta. Inicialmente
criada uma interface sncrona para os mtodos do servio, conforme a Figura 17. De modo um
pouco estranho, a interface escrita no pacote ao lado do cliente, pois o GWT sempre
focado no cliente, e este ser o usurio da interface, de maneira que fica localizada no cliente.

Figura 17 - Chamada Remota
A anotao RemoteServiceRelativePath, se refere ao caminho do
servio em relao a URL raiz, ou seja, se o aplicativo estiver no endereo
http://gwt.exemplo.com/CriandoProjetoGWT, ento o servio estar disponvel
no endereo http://gwt.exemplo.com/CriandoProjetoGWT/greet;
38

Toda a interface de servio deve estender a interface GWT
com.google.gwt.user.client.rpc.RemoteService, quando
estendido, est sendo informado que a interface desenvolvida e para servios
GWT, e assim sendo o GWT sabe que o cdigo Java criado deve ser traduzido
para Javascript;
Uma observao importante que qualquer parmetro utilizado em mtodo de
servio deve estender de java.lang.Serializable ou tambm a
variante especfica de GWT
com.google.gwt.user.client.rpc.IsSerializable;
Alm de criar uma interface sncrona, precisa ser criado uma assncrona. Para isto
basta criar outra interface, que seria uma traduo direta da interface sncrona, os mtodos
contidos nela devem estar exatamente com o mesmo nome e tipo de retorno, alm de
adicionado um parmetro final, que um AsynCallback, a Figura 18 o exemplo da
interface assncrona.

Figura 18 - Interface Assncrona
A interface assncrona no tem ligao alguma com a sncrona, e tambm no precisa
usar nenhuma anotao ou herdar alguma classe especial, ela usada apenas no cliente, os
mecanismos de ligao entre as interfaces so feitas pelo GWT, o nico propsito desta
fornecer ao cliente uma interface de chamada.
No lado do servidor em GWT apenas implementado a interface sncrona feita no
cliente, isto feito estendendo RemoteServiceServlet, a Figura 19 o exemplo da
interface RPC no lado do servidor.
39

Figura 19 - Interface no Lado do Servidor
A anotao @SuppressWarnings existe porque a serializao posteriores da
mquina virtual Java usa identificadores para cada verso de classe, por exemplo, se existir
alguma classe que implemente de java.lang.Serializable, e esta classe no tiver um
identificador de verso, na execuo do programa o Java retornara um aviso, por isso, est
anotao impede que o compilador retorne uma mensagem confusa de advertncia. Na parte
ao lado do servidor apenas isto que deve ser implementado.
2.5.4 SmartGWT
Ao longo dos ltimos anos bibliotecas de componentes foram surgindo e melhorando
significativamente as aplicaes Web, SmartGWT uma biblioteca baseada em GWT(Google
Web Toolkit) que fornece um conjunto amplo e avanado de componentes para interface de
usurio, licenciado pelos termos comercias LGPL, SmartGWT tambm oferece recursos
DataSources para utilizar com seus componentes. DataSource so a base da arquitetura
SmartGWT. Um DataSource descreve seu modelo de dados de uma maneira muito
semelhante a SQL. No DataSource definido os campos, seus tipos, validaes, mascara para
os valores, ente outros.
Alm da biblioteca de componente, o SmartGWT oferece tambm um conjunto de
bibliotecas no lado do servidor que o SmartGWT Enterprise Edition (EE), que so varias
ferramentas para construir uma aplicao completa em uma arquitetura Web moderna. O
SmartGWT Enterprise Edition (EE) pode ser integrado com qualquer aplicao pr-existente.
(SMARTCLIENT, 2008)
40

No desenvolvimento da aplicao foi utilizado a biblioteca de componentes
SmartGWT. No estudo ser desenvolvido um comparativo entre o modo de desenvolvimento
GWT utilizando a biblioteca de componentes SmartGWT.

41

3 MATERIAL E MTODOS
As duas aplicaes foram desenvolvidas com a plataforma IDE Eclipse SDK na verso
Helios Release 3. Foi utilizada a verso 6 do Java Development Kit (JDK), e como Servidor
Web foi usado Apache Tomcat na sua verso 7.
A criao dos diagramas de casos de uso, diagrama de atores, diagrama de sequncia,
foram realizados com a ferramenta Astah Community 6.2.1.
A elaborao do banco de dados das aplicaes foi feito com a Ferramenta Mysql
Workbench 5.2. E o banco de dados utilizado foi MySql Server 5.0.
Para o desenvolvimento da aplicao com GWT, foi utilizada a biblioteca SmartGWT
3.1, que possui vrios componentes para a construo de interface grficas.
3.1 DESCRIO DO PROJETO
O projeto desenvolvido tem o objetivo de realizar uma anlise comparativa entre os
dois frameworks. Consiste em uma aplicao que tem o intuito de controlar o histrico do
desenvolvimento de uma criana. Este histrico ter todas as informaes que foram obtidas
nas consultas realizadas pelo mdico. Alguns exemplos do que vai ser armazenado nas
consultas so: peso, altura, presso arterial, batimentos cardacos.
A aplicao tambm ter dois grficos para apresentar as informaes da evoluo da
altura e peso da criana.
3.2 REQUISITOS FUNCIONAIS
O sistema ter os seguintes requisitos funcionais:
Realizar a manuteno do cadastro de usurios.
Realizar a manuteno do cadastro de crianas.
Registrar consultas.
Gerar grficos para anlise do desenvolvimento das crianas. Este grfico ser
um demonstrativo de como a criana est evoluindo, os pontos a serem
analisados so: peso e a altura.
42

3.3 CASOS DE USO
O diagrama de casos de uso da aplicao pode ser visto na Figura 20.

Figura 20 - Diagrama de Casos de Uso
O diagrama de caso de uso do sistema tem dois usurios: Administrador que pode
realizar qualquer operao no sistema, e o usurio Mdico que s pode gerenciar os cadastros
das crianas que responsvel, e tambm as consultas realizadas por ele com as crianas no
qual est vinculado.
Para gerar o grfico de peso ou altura necessrio identificar qual criana vai ser
analisada no grfico, por isso a existncia da ligao include, (NOGUEIRA, 2011) define
include como: essa notao usada para representar sub-fluxos complexos e comuns a vrios
casos de uso, sempre usados, isto , necessrios.
3.3.1 DESCRIO DOS CASOS DE USO
Neste capitulo ser exibido s descries de cada caso de uso representado na Figura
20, sendo possvel ter uma melhor anlise do funcionamento da aplicao.
Caso de uso: Manter Usurio
Atores: Administrador
Fluxo Principal:
1 O Administrador faz login no Webapp;
43

2 Acessa o menu de cadastro de usurios;
3 Caso pesquisar:
3.1 Acessa a aba de pesquisa;
3.2 Informa os parmetros da pesquisa;
3.3 Clica em pesquisar.
4 Caso incluir:
4.1 Preenche o formulrio de cadastro;
4.2 Clica em gravar.
5 Caso editar:
5.1 Pesquisa o usurio (item 3);
5.2 Clica no boto editar;
5.3 Altera os dados necessrios;
6 Caso excluir:
6.1 Pesquisa o usurio (item 3);
6.2 Clica no boto excluir;
Tratamento de excees:
4 Login j existente.
4.1 O sistema apresenta uma mensagem avisando que o login j est em uso;
4.2 O funcionrio informa outro login;
4.3 Volta-se ao fluxo normal.
5 Registro utilizado.
5.1 O sistema apresenta uma mensagem avisando que o registro no pode ser
excludo pois est sendo utilizado em outra parte do sistema;
5.2 Encerra-se o fluxo.
Quadro 1 - Manter Usurio
Caso de uso: Manter Criana
Atores: Administrador, Mdico
Fluxo Principal:
1 O usurio faz login no Webapp;
2 Acessa o menu de cadastro de crianas;
3 Caso pesquisar:
44

4 Caso incluir:
4.1 Pesquisa o mdico responsvel e a me da criana;
4.2 Preenche o restante das informaes;
5 Caso editar:
5.1 Pesquisa a criana (item 3);
6 Caso excluir:
6.1 Pesquisa a criana (item 3);
4 Me no cadastrada.
4.1 O usurio registra a me da criana;
6 Registro utilizado.
6.1 O sistema apresenta uma mensagem avisando que o registro no pode ser
excludo, pois est sendo utilizado em outra parte do sistema;
6.2 Encerra-se o fluxo.
Quadro 2 - Manter Criana
Caso de uso: Manter Consulta
Fluxo Principal:
2 Acessa o menu de cadastro de consulta;
3 Caso pesquisar:
4 Caso incluir:
45

4.1 Pesquisa a criana que vai ser consultada;
4.2 Preenche o restante das informaes;
5 Caso editar:
5.1 Pesquisa a consulta (item 3);
6 Caso excluir:
6.1 Pesquisa a consulta (item 3);
5 Criana no cadastrada.
5.1 O usurio registra criana;

Quadro 3 - Manter Consulta
Caso de uso: Gerar Grfico Peso
Pr-condies: Criana identificada
Ps-condies: Grfico gerado
Fluxo Principal:
2 Acessa a aba para gerar grfico peso;
3 Seleciona a criana a ser analisada;
4 Clica no boto para gerar o grfico;
5 aberta uma subpgina com o grfico gerado;
Quadro 4 - Gerar Grfico Peso
Caso de uso: Gerar Grfico Altura
Pr-condies: Criana identificada
46

Ps-condies: Grfico gerado
Fluxo Principal:
7 Acessa a aba para gerar grfico Altura;
8 Seleciona a criana a ser analisada;
9 Clica no boto para gerar o grfico;
10 aberta uma subpgina com o grfico gerado;
Quadro 5 - Gerar Grfico Altura
3.4 DIAGRAMA DE SEQUNCIA
Aps analisar a definio dos atores do sistema, os requisitos funcionais e o digrama
de casos de uso da Figura 20, possvel se ter uma ideia de como o sistema vai funcionar. O
diagrama de sequncia deste captulo vai dividir em trs cenrios a funcionalidade manter
consulta.
UFCG, (2010), define o digrama de sequncia como:
Consiste em um diagrama que tem o objetivo de mostrar como as mensagens entre
os objetos so trocadas no decorrer do tempo para a realizao de uma operao.
Os trs cenrios a serem demonstrados no caso de uso manter consulta so:
Registrar Consulta: Ilustra os passos a serem executados para realizar o
cadastro de uma consulta;

Figura 21 - Digrama de Sequncia Cadastrar Consulta
47

Editar Consulta: Demonstra como o usurio realiza a edio de uma consulta;

Figura 22 - Diagrama de Sequncia Editar Consulta
Excluir Consulta: Detalha os passos a serem seguidos para excluir uma
consulta;

Figura 23 - Diagrama de Sequncia Excluir Consulta
3.5 DIAGRAMA DE CLASSES
O diagrama de classes tem o objetivo de demonstrar a estrutura da aplicao, por
meio de suas classes e relaes. A Figura 24 o exemplo do diagrama de classe da aplicao
48

Figura 24 - Diagrama de Classes
3.6 DIAGRAMA DE CONTEDO (RVORE DE DADOS)
A Figura 25 retrata o diagrama de contedo do sistema na viso do usurio
administrador, que tem o objetivo de demonstrar todas as informaes que podem ser
acessadas na aplicao.
49

Figura 25 - Diagrama de Contedo
3.7 NSU
O NSU (Navigation Semantic Unit) pode ser entendido como um conjunto de
informaes e estrutura de navegao que auxiliam no entendimento de todo o processo de
navegao da aplicao pelos usurios do sistema, no exemplo da figura 26 existem dois
usurios no sistema, cada um com determinado nvel de acesso, o usurio administrador pode
acessar todas as informaes na rea administrativa da aplicao, j o usurio Mdico no
pode ter acesso manuteno usurio, a figura tambm demonstra como est estrutura de
acesso das paginas da aplicao, informando atravs das setas o relacionamento entre o
acesso.
50

Figura 26 - NSU da aplicao
3.8 WIREFRAME
O Wireframe um desenho bsico que ilustra como ser o design da aplicao quando
desenvolvida, tem o intuito de demonstrar apenas o essencial. Segundo PINHEIRO, (2011)
Os wireframes tm como funo simular visualmente a estrutura organizacional
das informaes de uma interface, sem a preocupao de apresentar uma interface
grfica final.
A Figura 27 retrata o Wireframe da aplicao desenvolvida na viso do usurio
administrador:
51

Figura 27 - Wireframe Aplicao
3.9 ESTRUTURA DA APLICAO
As duas aplicaes desenvolvidas tem sua estrutura muito parecidas conforme Figura
28, apresentam praticamente s mesmas classes e estrutura de pacotes, a grande diferena se
encontra na maneira como o GWT trabalha. No GWT criado um pacote client onde contm
toda a estrutura de cdigo referente parte de visualizao, exemplos como: formulrios,
tabelas, validaes e entre outros, e o pacote server que contm todas as classes e mtodos de
persistncia da aplicao, necessrio criar classes especificas para comunicao do cliente
com o servidor.
52

Figura 28 - Estrutura Aplicao GWT ao lado esquerdo, ao lado direito estrutura da aplicao no Vaadin
No Vaadin no preciso criar classes para a comunicao e ter essa diviso lgica
entre cliente e servidor, pois sua programao se baseia ao lado do servidor, ou seja, toda a
interface do Vaadin construda no servidor e enviada para o cliente.

53

4 RESULTADOS E DISCUSSES
Neste captulo sero analisados os principais fatores no desenvolvimento da aplicao
em cada um dos frameworks avaliados.
Quando escolhido um framework para desenvolver alguma aplicao so levados em
considerao vrios aspectos, alguns so produtividade e a qualidade que estes frameworks
levam ao desenvolvedor no decorrer do processo de desenvolvimento, por isso, se torna
essencial uma anlise desses pontos antes de se iniciar um projeto.
4.1 FATORES ANLISADOS PARA O COMPARATIVO
Os fatores analisados para realizar a anlise comparativa entre os frameworks foram
separados em dois aspectos: parte prtica e parte terica.
Na parte prtica os pontos levados foram os que causaram maior trabalho e estudo dos
frameworks durante o desenvolvimento da aplicao, que so:
Desenvolvimento de Formulrios;
Desenvolvimento de Tabelas;
Validao de dados;
Criao de grficos para a anlise de desenvolvimento da criana;
Diferenas entre o modo de desenvolvimento GWT e Vaadin;
Em relao parte terica foram levados em considerao os seguintes requisitos:
Licena dos Frameworks;
Documentao e Atualizaes;
Quantidade de componentes disponveis para utilizao;
4.2 DESENVOLVIMENTO DO FORMULRIO
O exemplo a seguir demonstra como foi desenvolvido o formulrio de cadastro de
criana utilizado o Framework Vaadin e a biblioteca SmartGWT.
54

4.2.1 Vaadin
O Vaadin oferece uma maneira muito simples e produtiva para a criao. No Vaadin
os campos do formulrio podem ser criados a parir dos atributos de uma classe, necessrio
encapsular o objeto da classe em um Data Model e atribu-lo para o formulrio, a vantagem
disso que o desenvolvedor no precisa criar todos os campos do formulrio, necessrio
apenas vincular o objeto da classe no qual quer criar o formulrio no adaptador BeanItem
(Data Model), conforme a Figura 29. Outra vantagem que o prprio formulrio gerencia os
campos, no sendo necessrio ter o controle de cada um deles.

Figura 29 - BeanItem Classe Crianca
A Figura 30 demonstra como foi desenvolvido o formulrio de cadastro da classe
criana. Alguns aspectos interessantes na criao foram possibilidade de posicionar os
campos no formulrio conforme o desejado, atribuir espaamento entre eles, incluir uma
classe responsvel por validados os dados de cada campo e tambm escolher quais campos
sero exibidos no formulrio.

Figura 30 - Formulrio de cadastro Criana
A Figura 31 ilustra como ficou o formulrio de cadastro de crianas da aplicao
utilizando o Framework Vaadin.
55

Figura 31 - Formulrio Vaadin
4.2.2 SmartGWT
Com a biblioteca SmartGWT a maneira de desenvolver bem diferente comparando
com Vaadin, preciso utilizar mais cdigo para a criao do formulrio. SmartGWT no
oferece uma opo para poder vincular a classe com um Data Model e liga-lo com o
formulrio, necessrio criar todos os campos, existe tambm uma opo para criar todos os
campos e vincula-lo com um DataSource e liga-lo com o formulrio, mas neste exemplo no
foi utilizado esse mtodo de desenvolvimento, foram criados todos os campos desejveis e
adicionados direto no formulrio, a diferena que agora no mais o formulrio que
gerencia os campos da aplicao, preciso validar diretamente o campo. A Figura 32 ilustra
como foi criado uma parte do formulrio com SmartGWT.
56

Figura 32 - Formulrio SmartGWT
Como pode ser analisado, com SmartGWT utilizado muito mais cdigo, a Figura 32
representa apenas uma parte do formulrio criado, faltaram a criao de alguns campos e
detalhes da criao do formulrio, outra opo que Vaadin oferece em seus ShowCases o
componente de layout para ajustar os campos no formulrio de maneira produtiva, o
SmartGWT no oferece nenhum componente produtivo para este tipo de problema.
A biblioteca SmartGWT oferece alguns componentes interessantes para seus campos,
que o caso de poder colocar cones ao lado dos campos, no formulrio desenvolvido foi
utilizado um cone de pesquisa para selecionar o mdico responsvel pela criana, a Figura 33
mostra como ficou o formulrio com a biblioteca SmartGWT.
57

Figura 33 - Formulrio SmartGWT
4.3 DESENVOLVIMENTO DE TABELA
Neste exemplo demonstrado como foi implementado a parte de pesquisa da tela de
consulta.
4.3.1 Vaadin
A maneira de se trabalhar com o componente do tipo tabela utilizando o Framework
Vaadin se assemelha com o modo como feito o formulrio do exemplo anterior. Os dados
contidos na tabela so gerenciados por um Data Model, ou seja, a tabela ligada diretamente
com o Data Model. No exemplo da Figura 34 foi criado um container
BeanItemContainer (Data Model) da classe Consulta, este container contm todos os
atributos da classe, que so identificados pelo seus nomes. O container sabe os tipos de cada
atributo atravs dos mtodos getters e setters da classe, tornando obrigatria a classe ser
publica para conseguir enxergar o tipo dos atributos.
58

Figura 34 - BeanItemContainer Vaadin
Uma das vantagens de utilizar a classe BeanItemContainer para gerenciar os
campos que ele aceita receber uma lista com os valores da consulta pesquisada, tornando
sua utilizao muito produtiva. Outro fator importante que no componente da tabela aceita
que os valores de seus campos sejam formatados atravs de seu tipo, conforme Figura 35.

Figura 35 - Formatando Campo Data Vaadin
A Figura 36 ilustra como foi desenvolvida a tabela com o framework Vaadin. Uma
observao importante a possibilidade de escolher quais campos sero exibidos, informando
a descries de suas respectivas colunas.
59

Figura 36 - Tabela de Consulta
A Figura 37 retrata como ficou a tabela desenvolvida com o framework Vaadin:

Figura 37 - Exemplo Tabela Vaadin
4.3.2 SmartGWT
A maneira de criar tabela com a biblioteca SmartGWT muito diferente comparando
com o Framework Vaadin. Com SmartGWT no existe uma opo para criar um container
com as propriedade de uma classe e liga-lo com a tabela. No SmartGWT obrigatrio criar
campo a campo com suas caractersticas, gerando maior esforo e menos produtividade na
criao da tabela.
60

Existem varias maneiras de desenvolver tabelas com SmartGWT, o modo usado foi
utilizando a classe ListGridRecord que um objeto contendo valores para cada
ListGridField que adicionado na tabela, a Figura 38 ilustra a classe
ListGridRecord utilizada.

Figura 38 - Classe ListGridRecord
O objeto ListGridField o que vai ser adicionado como coluna na tabela,
obrigatoriamente tem que ser identificado com o mesmo nome de propriedade do objeto da
classe ListGridRecord para ser identificado e exibido os valores na tabela, a Figura 39
retrata como foi criada a tabela de consulta com SmartGWT.

Figura 39 - Tabela de Consulta SmartGWT
Um mecanismo interessante que a biblioteca SmartGWT oferece para os componentes
grid em seus ShowCases o de filtro automtico das informaes contidas na tabela, no qual
61

no foi utilizado, pois a pesquisa era realizada diretamente no banco de dados no nas
informaes que tinha na tabela.
A Figura 40 ilustra como ficou a tabela desenvolvida com SmartGWT.

Figura 40 - Tabela SmartGWT
4.4 VALIDAO DE DADOS
Neste exemplo ser mostrado como foi desenvolvido a parte de validao dos dados
no cadastro de usurio.
4.4.1 Vaadin
O Framework Vaadin disponibiliza uma classe para customizar e validar todos os
campos do formulrio. A Classe se chama DefaultFieldFactory, atravs da
propriedade do campo na qual pertence o formulrio adicionado a validao desejada e
customizado conforme o necessrio, por exemplo, possvel criar campos TextField,
ComboBox, DateFiel, PasswordField, entre outros. A classe ligada ao formulrio conforme
a Figura 41.

Figura 41 - Validao Usurio
A classe UsuarioValidacoes da Figura 41 estende a classe
DefaultFieldFactory. As validaes e customizaes dos campos realizado na classe
62

UsuarioValidacoes, a Figura 42 retrata a customizao e validao de alguns campos
do formulrio.

Figura 42 - Validando e Customizando Campos Vaadin
O framework Vaadin disponibiliza vrios tipos de validao, alguns exemplos so:
campo obrigatrio, validao no tamanho do campo, mscara e permitir apenas nmero
inteiro, entre outros. Um dos benefcios poder colocar mensagem para as validaes
tornando intuitivo para o usurio, a Figura 43 exemplo do formulrio de cadastro de Usurio
sendo validado.
63

Figura 43 - Validao Cadastro de Usurio
4.4.2 SmartGWT
Com a biblioteca SmartGWT a maneira de realizar a customizao e validao das
informaes diferente. Existem varias maneiras de validar itens com a biblioteca, isso
depende de como foi criado o formulrio, no caso deste exemplo a validao foi colocada a
cada campo criado e adicionado customizao desejada, conforme o exemplo da Figura 44,
a biblioteca oferece uma maneira muito produtiva para validar alguns tipos de campo, um
exemplo permitir apenas o usurio a digitar nmeros em campos numricos, no permitindo
outro tipo de informao.
64

Figura 44 - Validao SmartGWT
Um ponto negativo da biblioteca so os componentes utilizados para validar dados,
por exemplo, com o Framework Vaadin possvel colocar mensagens intuitivas e retornar
mensagens ao lado do campo validado conforme a Figura 43, a biblioteca SmartGWT no
possui este tipo de validao, a sua maneira de validar retornando apenas um cone ao lado
do campo, conforme Figura 45.
65

Figura 45 - Validando Formulrio SmartGWT
4.5 CRIAO DE GRFICO
Neste exemplo ser abordado como foi desenvolvido o grfico de desenvolvimento da
altura da criana.
4.5.1 Vaadin
O Framework Vaadin disponibiliza uma biblioteca muito produtiva para o
desenvolvimento de grfico. A biblioteca chamada de DChart e est disponvel para a
verso 6.8 em diante, est biblioteca baseada no plugin jqPlot.
O plugin jqPlot licenciado pela GPL e MIT, este plugin disponibiliza vrios tipo de
grfico com layout extremamente intuitivo, alm de ser de fcil entendimento para o
desenvolvimento.
No exemplo desenvolvido com o Framework Vaadin, foi criado um grfico de linhas,
a biblioteca oferece vrios recursos e modelos interessantes para a criao de grficos, basta
analisar e escolher qual se encaixa melhor para o uso. O interessante da biblioteca os
recursos que ela oferece, um deles o efeito visual no tracejado informando em qual valor
aquele ponto se encaixa, e tambm uma linha no grfico que demonstra a mdia de
desenvolvimento no geral, facilitando a anlise do mdico, demonstrando como a criana est
evoluindo perante determinado perodo comparando com a mdia, conforme Figura 46.
66

Figura 46 - Grfico Altura Vaadin
Outro ponto interessante na biblioteca o fato de seus recursos de efeito da Figura 56
ser de fcil entendimento ao desenvolvedor, alm de permitir que os nmeros e datas sejam
formatados conforme o desejado, a Figura 47 ilustra como foram colocados os efeitos e
formatados os valores do grfico.

Figura 47 - Exemplo Grfico Vaadin
4.5.2 SmartGWT
A biblioteca SmartGWT tambm oferece recursos para o desenvolvimento de grficos.
Comparando com o framework Vaadin oferece menos recursos visuais para se trabalhar, por
exemplo, a biblioteca SmartGWT no possui nenhum recurso de efeito para melhor
67

visualizao, e tambm menos diversidade em seus ShowCases, mais seus componentes so
amigveis para o usurio, e fcil implementao para o desenvolvedor, em poucas linhas de
cdigo possvel se desenvolver um grfico com a biblioteca, a Figura 48 demonstra como
foi criado o grfico com SmartGWT.

Figura 48 Exemplo de Cdigo SmartGWT
O exemplo de como ficou o grfico na aplicao Web pode ser visto na Figura 49.

Figura 49 - Grfico Altura SmartGWT
4.6 DIFERENAS ENTRE VAADIN E GWT
Vaadin e GWT tm uma arquitetura de funcionamento diferente, a programao no
Vaadin voltada para o servidor, por exemplo, quando criado uma tela com o Framework,
est tela montada no servidor e enviada para o cliente que exibe a mesma, existe um
mecanismo no Vaadin para que a interao entre cliente e servidor seja em AJAX, tornando a
interao assncrona e intuitiva para o usurio.
Esta maneira de programao do Vaadin torna o framework muito produtivo
comparando com GWT, pelo fato de no se preocupar com a criao de classes para a
comunicao cliente e servidor, pois com Vaadin tudo feito no servidor. A classe que
estende de Application o que da inicio a aplicao com o framework Vaadin, aps criar
68

esta classe j possvel iniciar o desenvolvimento de toda a aplicao no mtodo init, sem
se preocupar com outra linguagem alm de Java, tornado o desenvolvimento muito parecido
com Desktop, a Figura 50 o exemplo da classe Application da aplicao no Vaadin.

Figura 50 - Classe Application Vaadin
O GWT tem uma arquitetura voltada para o cliente, toda a estrutura de cdigo
desenvolvida no cliente e compilada em Javascript, o GWT abstrai o possvel a programao
no lado do servidor. Para a comunicao entre cliente e servidor, o GWT utiliza RPC, que
traduzindo significa chamada de procedimento remoto, ou seja, o cliente faz uma requisio
para um servio situado em outro endereo.
A maneira que o GWT trabalha com RPC vista do seguinte modo:
Primeiramente declarada a interface sncrona no cliente com os mtodos que
devem ser implementados no servidor, a interface GreetingService da
Figura 51 o exemplo na aplicao;

Figura 51 - Interface Sncrona
69

A interface RemoteService utilizada para identificar quais so os servios
GWT. Com isso o GWT sabe que o cdigo Java criado deve ser traduzido para
Javascript;
A Classe GreetingServiceImpl a implementao da interface
GreetingService que est situada no cliente. Nela contm a
implementao de todos o servios declarados na interface
GreetingService. A Figura 52 o exemplo de uma parte da classe
GreetingServiceImpl implementada no Servidor.

Figura 52 - Classe GreetingServiceImpl
A classe RemoteServiceServlet da Figura 52 um HttpServlet
portanto contm todos os mtodos doGet e doPost, todo servio implementado
em GWT deve ser uma subClasse de RemoteServiceServlet;
Alm de criar uma interface sncrona, precisa ser criado uma assncrona, que
serve como um mecanismo de chamada na requisio dos servios. Para isto
basta criar outra interface, que seria uma traduo direta da interface sncrona,
os mtodos contidos nela devem estar exatamente com o mesmo nome e tipo
de retorno, alm de adicionado um parmetro final, que um
AsynCallback. Est interface assncrona serve para que a aplicao no
fique congelada a espera da reposta quando um servio for invocado, desta
maneira o cliente pode executar outras tarefas na aplicao, a Figura 53 o
exemplo da interface assncrona da aplicao;

70

Figura 53 - Interface Assncrona
Como pode ser visto desenvolver com GWT muito mais trabalhoso. Com Vaadin
no necessrio declarar interfaces e implementar classes para a comunicao cliente e
servidor, pois sua arquitetura de programao voltada para o servidor, basta iniciar o
desenvolvimento da aplicao no mtodo init da classe que estende de Application,
tornando o desenvolvimento da aplicao muito mais produtivo comparando com GWT.
4.7 LICENA DOS FRAMEWORKS
Uma das consideraes que so levadas adiante e podem decidir para a escolha de um
framework, a questo de seu licenciamento. Alm disso, importante analisar se sua licena
gratuita oferece recursos necessrios para desenvolver uma aplicao de grande porte.
Tanto Vaadin como GWT so gratuitos e licenciados pela Apache 2.0. No Vaadin
existem alguns componentes de terceiros que so gratuitos e podem ser utilizados com o
framework. O GWT apresenta vrias extenses para se utilizar, uma delas a biblioteca
SmartGWT, na qual foi utilizado seus componentes durante o desenvolvimento da aplicao.
A Biblioteca SmartGWT possui licenas pagas, e uma gratuita a LGPL Edition, na
qual apresenta um conjunto completo de componentes, todas as licenas possuem a mesma
quantidade de componentes no lado do cliente, o que muda so os recursos a serem usados no
lado do servidor, no qual no houve necessidade de uso.
71

Como dito acima, os frameworks utilizados na aplicao possuem licena gratuita, na
qual oferecem recursos necessrios para se desenvolver uma aplicao, sem se preocupar em
comprar alguma extenso ou mesmo a licena.
4.8 DOCUMENTAO E ATUALIZAES
Outro fator levado em extrema considerao para a boa escolha de um framework se
ele possui atualizaes constantes e uma boa documentao para se trabalhar. Pois se no
possui mais investimento para atualizaes, a partir do momento que o mercado passar a
oferecer solues modernas e novas tcnicas, o framework utilizado na aplicao no vai
oferecer esses novos recursos. Outra questo se o framework possui uma boa documentao
para se trabalhar, pois quando tiver alguma duvida ou problema no decorrer do processo de
desenvolvimento necessrio se ter algum material, ou mesmo, uma documentao para
apresentar exemplos com recursos no uso do framework.
Neste quesito, os frameworks Vaadin e GWT apresentam atualizaes constantes, e
uma tima documentao, no site do Vaadin possvel baixar o livro com toda sua
documentao, e exemplos de como funciona sua arquitetura e seus componentes. A nica
desvantagem do Vaadin em relao ao GWT o fato de apresentar pouco material em
portugus. A Biblioteca SmartGWT tambm possui atualizaes constantes, alm de
apresentar uma comunidade ativa e uma boa documentao.
4.9 COMPONENTES DISPONIVEIS
Um dos fatores importantes para a escolha de um determinado framework se o
mesmo possui uma vasta quantidade de componentes para o uso, ou seja, se sua biblioteca
consegue resolver todos os problemas encontrados no decorrer do processo de
desenvolvimento da aplicao. Outra questo se esses componentes so customizados de
uma maneira produtiva ao desenvolvedor.
O framework Vaadin apresenta diversos componentes, a grande vantagem do seu uso
que os componentes so customizados de uma maneira agradvel, apresentam uma arquitetura
de se trabalhar produtiva.
Com o framework GWT, foi utilizado a biblioteca SmartGWT para desenvolver toda a
parte grfica da aplicao, pois utilizar GWT puro no traz vantagem alguma, tornando o
72

desenvolvimento muito trabalhoso. A Biblioteca SmartGWT tambm possui uma diversidade
de componentes para se trabalhar. A diferena que seus componentes no so produtivos
comparando com os do framework Vaadin, e so menos agradveis para o usurio final
comparando com Vaadin.

73

5 CONSIDERAES FINAIS
O trabalho desenvolvido foi baseado no estudo de dois frameworks para
desenvolvimento Web. Foram desenvolvidas duas aplicaes, na qual apresentam as mesmas
funcionalidades e com aparncia muito semelhante, os frameworks utilizados foram Vaadin e
GWT com a biblioteca SmartGWT.
5.1 CONCLUSO
Com o desenvolvimento dessas duas aplicaes foi possvel realizar uma anlise
comparativa entre os dois frameworks. Nesta anlise, foram demonstradas as partes mais
importantes enfrentadas no decorrer do processo de desenvolvimento, apontando quais as
vantagens e desvantagens de cada um.
Atravs da anlise dos fatores, chega-se concluso de que o framework Vaadin
melhor em vrios aspectos comparando com GWT e a extenso SmartGWT. No
desenvolvimento de formulrios, tabelas e validao de dados, possui uma arquitetura de
programao muito mais produtiva, com Vaadin permitido criar tabelas e formulrios
atravs de um Data Model que ligado com a classe criando todos os campos
automaticamente. Com SmartGWT preciso criar todos os campos tornando o processo de
desenvolvimento muito trabalhoso, utilizando muito mais classes e cdigo para criar uma
simples formulrio ou uma simples tabela.
Outra desvantagem do GWT o fato de apresentar uma arquitetura robusta, ou seja, se
precisar fazer uma pequena tarefa com o framework, se torna muito trabalhoso e pouco
produtivo comparando com Vaadin. Com GWT preciso criar classes e interfaces para a
comunicao cliente e servidor, j com Vaadin isso no necessrio.
5.2 TRABALHOS FUTUROS/CONTINUAO DO TRABALHO
O presente trabalho demonstrou como se trabalhar com um framework para
desenvolvimento web que foca apenas na linguagem Java, para trabalhos no futuro abriu as
consideraes para pesquisar mais frameworks que trabalham dessa maneira, outra questo
74

que o GWT possui diversas extenses para se utilizar, um ponto importante seria realizar um
comparativo entre estas extenses. Outra questo adicionar mais funcionalidades para
aplicao desenvolvida, por exemplo, a me da criana ter acesso ao sistema e verificar como
foram as consultas de seu filho.

75

6 REFERNCIAS BIBLIOGRFICAS
BALZER, C. E.; BATALHA, G.; FERRASA, A. ESTUDO COMPARATIVO ENTRE
FRAMEWORKS PARADESENVOLVIMENTO DE RIAs. ESTUDO COMPARATIVO
ENTRE FRAMEWORKS PARADESENVOLVIMENTO DE RIAs, 2010.
CAELUM. Desenvolvimento gil para a. In: CAELUM Desenvolvimento gil para a.,
2011. p. 85-86.
CSAR EDENIR BALZER, G. B. A. F. ESTUDO COMPARATIVO ENTRE
FRAMEWORKS PARADESENVOLVIMENTO DE RIAs. ESTUDO COMPARATIVO
ENTRE FRAMEWORKS PARADESENVOLVIMENTO DE RIAs, 2010.
CHU-CARROL, M. C. Cdigo na Nuvem Programao do Google App Engine. [S.l.]:
Cincia Moderna, 2012.
GONALVES, D. B.; VAHL, J. C. J. Web 2.0 Frameworks de desenvolvimento. Web 2.0
Frameworks de desenvolvimento, 2010.
MAGALHES, . Globalcode. Globalcode, 07 jul. 2009. Disponivel em:
<http://www.globalcode.com.br/noticias/EntrevistaGWT>. Acesso em: 12 dez. 2012.
MELLO, M. PUCPR. PUCPR, 2010. Disponivel em:
<http://www.las.pucpr.br/mcfmello/BD/BD-Aula02-MER.pdf>. Acesso em: 18 fev. 2013.
MOTA, L. C. frameworkdemoiselle. frameworkdemoiselle, 05 maio 2010. Disponivel em:
<http://www.frameworkdemoiselle.gov.br/menu/framework/sobre/>. Acesso em: 12 dez.
2012.
NOGUEIRA, A. Linha de Cdigo. Linha de Cdigo, 2011. Disponivel em:
<http://www.linhadecodigo.com.br/artigo/987/uml-unified-modeling-language-esteriotipo-
include-esteriotipo-extend-esteriotipo-realize.aspx>. Acesso em: 17 fev. 2013.
ORACLE. Oracle. Oracle, 2010. Disponivel em:
<http://www.oracle.com/technetwork/java/index-jsp-135475.html>. Acesso em: 06 dez. 2012.
PEREIRA, H. C. Revolucao. Revolucao, 31 ago. 2005. Disponivel em:
<http://revolucao.etc.br/archives/o-que-e-quirks-mode/>. Acesso em: 12 dez. 2012.
PINHEIRO, G. UOL. UOL, 18 mar. 2011. Disponivel em:
<http://webinsider.uol.com.br/2011/03/18/cinco-ferramentas-para-a-producao-de-
wireframes/>. Acesso em: 19 fev. 2013.
PRADA, R. tecmundo. tecmundo, 2008. Disponivel em:
<http://www.tecmundo.com.br/hardware/210-o-que-e-plugin-.htm>. Acesso em: 01 mar.
2013.
76

SMARTCLIENT. SmartClient. SmartClient, 2008. Disponivel em:
<http://www.smartclient.com/technology/>. Acesso em: 20 fev. 2013.
SMEETS, B.; BONESS, U.; BANKRAS, R. Programando Google Web Toolkit Do
Iniciante ao Profissional. [S.l.]: ALTA BOOKS, 2009.
SOUZA, M. V. B. D. Estudo Comparativo entre Frameworks Java. In: SOUZA, M. V. B. D.
Estudo Comparativo entre Frameworks Java. [S.l.]: [s.n.], 2004. p. 6-11.
TERRA. Terra. Tera, 2007. Disponivel em:
<http://www.terra.com.br/informatica/ajuda/seguranca/tipos_script.htm>. Acesso em: 01 fev.
2013.
UFCG. http://www.dsc.ufcg.edu.br. http: //www.dsc.ufcg.edu.br, 2010. Disponivel em:
<http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/uml/diagramas/interacao/sequencia.ht
m>. Acesso em: 18 fev. 2013.
ULLMAN, C. Site da wrox. Disponivel em:
<http://www.wrox.com/WileyCDA/Section/What-is-Ajax-.id-303217.html>. Acesso em: 01
dez. 2012.
VAADIN. Book of Vaadin: 4th Edition. [S.l.]: [s.n.], 2012.

77

APNDICES

78

APNDICE A
Para instalar o framework Vaadin no eclipse, acesse o menu Help/Install new software
coloque a URL http://vaadin.com/eclipse, conforme Figura 54.

Figura 54 - Instalando Vaadin
Aps isso selecione o pluguin do Vaadin e finalize a instalao, conforme Figura 55.

Figura 55 - Selecionando o pluguin
Para criar um projeto no Vaadin preciso:
Primeiramente, selecione o menu File, new Project.
Aps ir a new Project, pesquise a pasta Vaadin e selecione Vaadin Project.

Figura 56 - Criando um Projeto Vaadin
79

Na parte de criar o projeto Vaadin, preciso definir as configuraes bsicas
do projeto Web. No Quadro 6, explicao do que serve cada campo da Figura
57.

Figura 57 - Configurao Projeto
Valor Descrio
Project Name Informa o nome desejado para o Projeto
Use Default
Define o diretrio padro para o Projeto, normalmente se deixa com o
valor pr-estabelecido.
Target runTime Define qual servidor de aplicao ser utilizado no projeto.
Configuration
Define a configurao a utilizar, normalmente deve-se usar a
configurao padro do servidor de aplicao.
Deployment
Configuration
Define o ambiente no qual o aplicativo ser implantado
Vaadin Version
Selecione a verso do vaadin a utilizar, pode ser realizado o download
da ultima verso
Quadro 6 - Descrio dos Valores na Criao de um Projeto Vaadin
A prxima etapa configurar o Web Module, que as configuraes
relacionada estrutura do projeto Web. Normalmente, deve-se aceitar as
configuraes padres estabelecidas, no Quadro 7 uma breve descrio de cada
valor da Figura 58.
80

Figura 58 - Web Module
Valor Descrio
Context Root Identifica qual URL a aplicao vai acessar quando executada,
por padro o nome da URL o mesmo que o nome do projeto.
Content Diretory Diretrio que contm todo o contedo a ser includo no servlet e
servido pelo servidor Web
Generate Web.xml
deployment descriptor
Informa se deseja que seja criado o arquivo Web.xml, descritor
necessrio para executar o servlet
Quadro 7 - Descrio dos Valores Web Module
A ultima etapa so as configuraes especficas da aplicao, essas
configuraes podem ser mudadas no decorrer do desenvolvimento do projeto,
exceto a configurao de portlet. O Quadro 8 descreve os valores da Figura 59.
81

Figura 59 - Configurao Especfica
Valor Descrio
Create Project
Template
Define se quer ou no que crie a aplicao com um exemplo.
Application Name Nome para ser exibido no navegador quando a aplicao for executada,
por padro selecionado o mesmo nome do projeto.
Base Package
name
O nome do pacote em que a classe de exemplo ser criada.
Application class
name
Nome da classe de exemplo a ser criada
Portlet Quando essa opo for selecionada, o assistente criar
os arquivos necessrios para executar o aplicativo em um
Portlet.
Quadro 8 - Configurao Especfica
Quando terminado todas essas configuraes, clique em finish e ser criada toda a
estrutura do projeto, e tambm um pequeno exemplo de uma aplicao.

82

APNDICE B

Para instalar o framework GWT no eclipse, verifique qual a verso do eclipse est
sendo utilizado, no caso desse exemplo a IDE Eclipse SDK na verso Helios Release 3.
Acesse o menu Help/Install new software coloque a URL
http://dl.google.com/eclipse/plugin/3.6, conforme Figura 60.

Figura 60 - Instalando GWT
Aps isso selecione o pluguin do GWT e finalize a instalao, conforme Figura 61.

Figura 61 - Selecionando pluguin GWT
Para criar um projeto com GWT realize os seguintes passos:
Para criar um novo projeto, primeiramente, acesse o menu File >> new;
Pesquise a pasta Google, e clique em Web Application Project.
83

Figura 62 - Criando um Projeto GWT
A prxima etapa a configurao da aplicao, a Figura 63 o exemplo da
criao do projeto, no Quadro 9 descreve os valores da Figura 63;
84

Figura 63 - Configura a Aplicao GWT
Valor Descrio
Project Name Nome do Projeto
Package Pacote onde estar a classe raiz da aplicao
Location Localizao do Projeto
Google SDKs Define qual GWT ser utilizado e qual engine dever ser usado
Sample Code Ser criado uma aplicao de exemplo
Quadro 9 - Configurando a aplicao GWT
Aps isso, clique em finish e ser criada uma aplicao de exemplo, para
executa-la basta clicar com o boto direito ao lado do projeto e acessar run >>
Web application, a Figura 64 o exemplo da aplicao.
85

Figura 64 - Aplicao de Exemplo

MD Coads 2012 2 07

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

MD Coads 2012 2 07

Diunggah oleh

Hak Cipta:

Format Tersedia

UNIVERSIDADE TECNOLGICA FEDERAL DO PARAN UTFPR

CURSO SUPERIOR DE TECNOLOGIA EM ANLISE E DESENVOLVIMENTO DE

Anda mungkin juga menyukai