Desenvolvimento de aplicações com GWT e GXT

Quem sou eu?

Professor da FJN (Faculdade de Juazeiro do Norte)

Especialista em Engenharia de Software

Especialização de Gestão de Projetos de TI

Estudante da Especialização de Desenvolvimento
Web na Plataforma J2EE

Agenda: (média de 5,2 min/slide)

Um pouco de historia

O que é o GWT ?

Instalação, configuração e primeiros passos

Alguns componentes GWT

Uma aplicação exemplo

Showcase

Estilos para GWT

GXT – O que é?

Ext JS

Algumas diferenças entre GXT e GWT

Refazendo o exemplo com GXT

O que pode ser feito com GWT?

A internet na era Web 2.0 (meados de 2005):

do lado do desenvolvedor:
▪ Preocupação com usabilidade;
▪ Busca por credibilidade;
▪ Maior interação com usuários;
▪ Internet como plataforma;
▪ Redução no tempo de resposta;
▪ Aumento das Aplicações sem fronteiras geográficas;
▪ Atualizações automáticas;
▪ Integração entre aplicações nas nuvens;
▪ Etc.

A internet na era Web 2.0 (cont.):

do lado do cliente:
▪ Busca por informações;
▪ Maior preocupações com segurança;
▪ Maior interação entre usuários;
▪ Busca por sites com maior credibilidade;
▪ Desejo de realizar tarefas na web;
▪ Aceitação maior por sites que se preocupam com a
experiência do usuário e com acessibilidade;
▪ Rejeição de sites com alto tempo de atualização;

Um dos responsaveis por este movimento foi o
surgimento, em 2005, da metodologia: AJAX

AJAX:

Acrônomo de: Asynchronous Javascript And XML

Significado: Javascript Assíncrono e XML

Atualmente AJAX ajuda, inclusive, a melhorar a
percepção do usuários sobre a performance das
aplicações. Exemplo:

Atualização parcial de páginas

Navegação interativa

Funcionamento do AJAX

Surgimento de Aplicações Web como Aplicações
Desktop;

Já pensado pela Microsoft, mas com pouca
aceitação:

através do Remote Scripting (1998) e

ASP.NET com callback (2003)

Implementado pela Macromedia e bem aceito,
em 2002:

através do Flash 5.0 (após evoluir de uma aplicação
para desenho e animação para um ambiente de
desenvolvimento multimidia);

Macromedia denominou este tipo de
aplicação como RIA:

Acrônimo de: Rich Internet Application

Significado: Aplicação de Internet Rica

O primeiro release da ferramenta que
revoluciona a maneira de programar Java
para web: o GWT

É uma ferramenta de desenvolvimento de
aplicações RIA:

Desenvolvido na linguagem JAVA;

Suporte a quase todos os browsers;

Multiplataforma;

Pode desenvolver aplicações independentes de
servidores (vide exemplos no Google Code);

Para este mini-curso usaremos:

Eclipse Ganymede 3.4

GWT 1.7

GXT 2.0

O que motiva a utilizar:

Redução da preocupação com design;

Facilidade de comunicação entre uma aplicação
cliente e uma aplicação servidora.

Redução ou eliminação de mistura de linguagens

É uma ferramenta testada e aprovada por uma das
maiores empresas do mundo de desenvolvimento
web

Possui muita da robustês do JAVA

Onde fazer download:

http://code.google.com/intl/pt-BR/webtoolkit/

Resultados esperados:

Redução da complexidade de desenvolvimento

Aumento de produtividade

Portabilidade

Escalabilidade

Alta interatividade em aplicações web

Aumento da usabilidade das aplicações

Simplicidade de distribuíção

Como desenvolver:

Nativamente, utilizando um utilitário distribuído
juntamente com o SDK

Utilizando uma IDE, como o Eclipse, com ou sem o
plug-in

No nosso caso:

Utilizaremos o Eclipse

Precisamos dos plug-ins:
▪ Gwt1.7 : http://code.google.com/intl/pt-BR/eclipse/
▪ SDK (Google app enginer) : http://code.google.com/intl/pt-
BR/appengine/downloads.html

Instalação do plugin no Eclipse... (ver vídeo)

Adicionar o site para download do plugin

Realizar o download

Realizar a instalação

Reiniciar o Eclipse

Fazer o download do GWT 1.7 (SDK)

Desempacotar o arquivo

Informar ao Eclipse a localização do SDK ou
desabilitar a opção

Criar um projeto “Web Application”

Para o GWT o nome do projeto, será o nome da
aplicação construída, logo o nome da classe que
será o ponto de entrada da aplicação

A estrutura básica de arquivos é:
▪ Cliente:
▪ <nome do pacote>.client
▪ Server:
▪ <nome do pacote>.server

Pasta “client”

Qualquer aquivo será analisado para depois ser
convertido em GWT, portanto, qualquer coisa que não
seja suportada no ato da compilação lançará um uma
exceção
▪ Ex.: anotações, classes derivadas de outros frameworks,
alguns recursos não implementados pelo GWT, etc.

Pasta “server”

Classes de serviço extendidas de
RemoteServiceServlet

Todos os outros recursos da aplicação

GWT “pensa” em todas as tag html como
componentes.

Alguns exemplo:

Widgets;

Imagens;

Paineis;

Textos HTML;

Java Script nativo;

Todos os componentes visuais do GWT são
descendentes da classe Widget

Existem 5 categorias básicas de
compontentes:

Widgets básicos (TextBox, ListBox, Buttom,
TextArea, Label etc);

Paneis (HorizontalPanel, VerticalPanel, etc)

Popups (Basic Popup, Dialog Box)

Tables( FlexTable, Grid)

Alguns widgets:

TextBox: renderiza um input do tipo texto;

PasswordBox: renderiza um input do tipo
password;

Button: renderiza um input do tipo button;

Label: renderiza um texto dentro de um div;

ListBox: renderiza um elemento do tipo select;

Alguns paineis:

HorizontalPanel: renderiza um elemento <table>
e adiciona uma linha (<tr>) para cada Widget
incluído;

VerticalPanel: renderiza um elemento <table> e
adiciona uma coluna para cada Widget incluído;

FlowPanel: renderiza um elemento <div> e
adiciona cada elemento no layout HTML natural.

Muitos dos componentes podem adicionar
textos HTML ou textos comuns através dos
métodos:

setText(String text);

setHTML(String html);

Existe um componente chamado HTML,
descendente de Widget que renderiza texto
HTML nativo;

É possível utilizar-se de JS nativo para
resolver questões que o GWT não trata ou
quando o desenvolvedor achar conveniente

O módulo do GWT que produz esta
funcionalidade é chamado de JSNI

Utiliza-se um método marcado como nativo:

Exemplo:
public native void alertNativo(String msg) /*{
alert(msg);
}*/;

Criando um exemplo (ver vídeo)

Criar um projeto do tipo Web Application Project

Nomear o projeto e o pacote

(Na primeira vez) Definir o caminho do SDK

Pronto...

Projeto exemplo:

O GWT vem com um projeto exemplo que você
utilizar para testar se está tudo instalado
corretamente

Testando:
▪ Execute o projeto no mode Hosted

Executando o projeto no modo Hosted:

Clique em executar com o botão direito;

Depois em Web Application (icone do GWT)

Deverá aparecer um browser com a
possivbilidade de adicionar seu nome e, ao
clicar no botão, uma mensagem.

O exemplo demonstra:

Como construir alguns componentes;

A colaboração entre eles

A comunicação entre aplicação cliente e aplicação
servidora

A configuração básica de uma aplicação GWT

E principalmente, a facilidade de construção de
uma interface gráfica

Limpando o projeto:

No arquivo web.xml (/WEB-INF/web.xml):
▪ Apagar as descrições de servlet (<servlet>...</servlet> e
<servlet-mapping>... </servlet-mapping>)

No arquivo <AppName>.html (/
<AppName>.html):
▪ Dentro de “body”, apagar tudo, exceto as tags de script
que se referem a chamada da aplicação

No arquivo <AppName>.java
(/src/<PackName>.<AppName>:
▪ Remover todos os textos que estão dentro do método
onModuleLoad
▪ Remover todas as variáveis de instâncias e
▪ Remover todas as anotações e comentários
▪ Remover todos os pacotes que não estão sendo
utilizados nas clausulas de importação

Contruindo uma tela ( ver vídeo):

Tela de formulário com os campos:
▪ Nome do usuário
▪ Email do usuário
▪ Senha do usuário e
▪ Validação da senha do usuário

Estruturação do Formulário em:
▪ Inicialização dos componentes
▪ Configuração dos componentes

Adicionando o Formulário ao RootPanel

Executando nosso primeiro projeto

O que é possível aprender com este projeto:
▪ Facilidade de construção de uma GUI (-Web)
▪ Validação de campos com facilidade
▪ O suporte ao controle de “eventos” de uma aplicação
Web
▪ A similaridade com Swing

Mais informações sobre construção de projetos:

http://code.google.com/intl/pt-
BR/webtoolkit/gettingstarted.html

http://www.gwt.com.br/

http://e-tinet.com/ajax/como-aprender-google-web-
toolkit-gwt-com-eclipe/

Notícias recentes sobre GWT

http://blog.globalcode.com.br/2009/07/gwt-e-o-
desenvolvimento-web.html

Demonstração de vários componentes
visuais, sua programação e seus estilos.

Link:

http://gwt.google.com/samples/Showcase/Showcase.html

GWT possui os seguintes métodos para
manipular estilos:

addPrimaryStyle - adiciona um novo estilo e
abandona os outros

addDependentStyle – adiciona um estilo
dependente de outros

Construido sobre o GWT

Utiliza a experiência do Framework ExtJS

Alterou a maneira de com os componentes
são renderizados:

GWT – ao adicionar ao container

GXT – quando o container for renderizado na tela

Gráficos (suporte a SVG):

http://gwt-widget.sourceforge.net/

GWt Designer