quinta-feira, 16 de maio de 2013

Primeira Aplicação GWT

Fala galera! Estou aqui mais uma vez para darmos continuidade aos nossos projetos em GWT. No primeiro post  Configurando GWT com Eclipse(Juno,Ganymede e Helios), ensinamos como configurar o IDE eclipse para utilizarmos a plataforma GWT. Agora, neste post, vamos desenvolver o primeiro projeto teste para aprendermos como utilizar esta tecnologia do Google. Lets go!

Veja um pouco da estrutura do GWT:




Criando o Projeto

Assim que reiniciarmos o Eclipse, um ícone do Google irá aparecer na barra de ferramentas da IDE. Para criar um novo projeto, clique na “seta para baixo” ao lado do ícone do Google e selecione “New Web Application Project”:
ext gwt gxt loiane 04 Començando com Ext GWT 3 / GXT 3: Hello World
Dê um nome para o projeto (neste tutorial dei o nome de ext-gwt-helloworl), informe o nome do pacote base que irá usar (neste caso escolhi com.loiane.gxt3). Depois deixe apenas a opção “Use Google Web Toolkit” selecionada. Assim vamos criar um projeto “zerado”:
ext gwt gxt loiane 05 Començando com Ext GWT 3 / GXT 3: Hello World
Pronto, o projeto foi gerado seguindo a estrutura de um projeto do GWT.

Adicionando as Bibliotecas

Como queremos criar um projeto usando o GXT 3, precisamos adicionar o jar correspondente da biblioteca ao projeto, já que este já contém as bibliotecas do GWT necessárias. Selecione o projeto, clique com o botão direito e escolha “Build Path” -> “Configure Build Path”:
ext gwt gxt loiane 06 Començando com Ext GWT 3 / GXT 3: Hello World
Uma nova janela irá se abrir. Escolha a tab “Libraries” e clique em “Add External JARs…”.
ext gwt gxt loiane 07 Començando com Ext GWT 3 / GXT 3: Hello World
Vá até o diretório onde descompactou o SDK do Ext GWT e selecione apenas o jar do gxt 3, como mostra o screenshot abaixo:
ext gwt gxt loiane 08 Començando com Ext GWT 3 / GXT 3: Hello World
Pronto, o GXT já está adicionado no classpath do projeto. Clique em OK:
ext gwt gxt loiane 09 Començando com Ext GWT 3 / GXT 3: Hello World

Desenvolvendo a Aplicação – Código

Agora que o projeto já está todo configurado, vamos começar com a diversão e implementar a nossa primeira aplicação com GXT 3. Para isso, selecione o projeto, clique com o botão direto e escolha “New” -> “Other”. Ache o folder do “Google Web Toolkit” e escolha “Module”:
ext gwt gxt loiane 10 Començando com Ext GWT 3 / GXT 3: Hello World
Escolha o pacote (que escolhemos quando criamos o projeto, lembra?) e dê um nome para o módulo. Como essa é a nossa primeira applicacação, chamei de “HelloWorl”:
ext gwt gxt loiane 11 Començando com Ext GWT 3 / GXT 3: Hello World
O plugin do Google vai criar um arquivo xml chamado “Hello World.gwt.xml” como mostrado abaixo. Mas como queremos criar uma aplicação com GXT, temos que fazer algumas mudanças.
ext gwt gxt loiane 12 Començando com Ext GWT 3 / GXT 3: Hello World
Para fazermos essas mudanças, temos que adicionar a seguinte linha no arquivo xml:
?
1
Vamos aproveitar e dar um alias para o módulo de “helloworld” para facilitar as chamadas que iremos fazer daqui a pouco. No final, seu arquivo xml deve ficar assim:
?
1
2
3
<!--?xml version="1.0" encoding="UTF-8"?-->
    <source path="client" />
Agora vamos criar uma classe Entry Point. Para quem nunca trabalhou com GWT antes, a classe que extende um EntryPoint funciona como uma espécie de classe Main, que será executada quando executarmos a aplicação. Novamente, selecione o projeto, clique com o botão direto e escolha “New” -> “Other”. Ache o folder do “Google Web Toolkit” e escolha “Entry Point Class”:
ext gwt gxt loiane 13 Començando com Ext GWT 3 / GXT 3: Hello World
O nome da nossa EntryPoint class será HelloWorld. Clique em Finish – um detalhe: depois de criar essa classe, note que o plugin automaticamente adicionou uma linha no arquivo de configuração do xml:
ext gwt gxt loiane 14 Començando com Ext GWT 3 / GXT 3: Hello World
Agora que a classe está criada, vamos abrir a classe e adicionar o código do GXT:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package com.loiane.gxt3.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.widget.core.client.box.MessageBox;
public class HelloWorld implements EntryPoint {
    @Override
    public void onModuleLoad() {
        MessageBox messageBox = new MessageBox("First GXT 3 App", "Hello, World!");
        RootPanel.get().add(messageBox);
        messageBox.show();
    }
}
O código acima irá mostrar uma MessageBox (componente muito parecido com o do ExtJS) com um título e uma mensagem de “Hello, World!”.
Agora precisamos criar uma página HTML. Novamente, selecione a pasta “war” do projeto, clique com o botão direto e escolha “New” -> “Other”. Ache o folder do “Google Web Toolkit” e escolha “HTML Page”:
ext gwt gxt loiane 15 Començando com Ext GWT 3 / GXT 3: Hello World
Dê um nome para a página HTML. Geralmente damos o mesmo nome do módulo:
ext gwt gxt loiane 16 Començando com Ext GWT 3 / GXT 3: Hello World
Pronto, a página HTML será criada. Precisamos fazer uma modificação para adicionar o css do GXT 3. No final, o código HTML deve ficar parecido com o código abaixo:
?
1
2
3
4
5
6
7
    HelloWorld
<script type="text/javascript" language="javascript" src="helloworld/helloworld.nocache.js"></script>
</pre>
<iframe id="__gwt_historyFrame" style="position: absolute; width: 0; height: 0; border: 0;" src="javascript:''" width="320" height="240"></iframe>
<pre>

Executando

Pronto, nosso Hello World está implementado e agora vamos executar o projeto pela primeira vez. Como estamos usando o GWT, não precisamos nos preocupar em instalar nenhum webserver, pois o plugin do Google já vem com um especialmente projetado para executar projetos GWT. Para isso, vamos clicar novamente com o botão direito no projeto, e escolher a opção “Run As” -> “Web Application” (repare no ícone do plugin do Google):
ext gwt gxt loiane 17 Començando com Ext GWT 3 / GXT 3: Hello World
O console do “Development Mode” vai abrir e se tudo estiver OK, vai mostrar um link. Dê um duplo clique no link e o seu browser default irá abrir.
ext gwt gxt loiane 18 Començando com Ext GWT 3 / GXT 3: Hello World
Se você nunca executou um projeto GWT no seu browser antes, vai pedir para instalar o plugin do Google. Instale.
ext gwt gxt loiane 19 Començando com Ext GWT 3 / GXT 3: Hello World
Dê um duplo clique novamente na url e agora que já temos o plugin do Google para app GWT instalado no browser, a seguinte tela deve aparecer.
ext gwt gxt loiane 21 Començando com Ext GWT 3 / GXT 3: Hello World
Parabéns! Criamos e executamos nossa primeira aplicação GXT 3 juntos!

Estrutura Final do Projeto

No final, a estrutura do projeto deve ficar assim:
ext gwt gxt loiane 20 Començando com Ext GWT 3 / GXT 3: Hello World

Então é isso galera! espero que tenham gostado e se quiserem o código fonte:
Você pode fazer download do código fonte completo desse tutorial no meu repositório do github: https://github.com/loiane/ext-gwt3-helloworld
Créditos do fonte: Loiane Groner.



Nenhum comentário:

Postar um comentário

Admin: Bruno

Olá Galera! muito grato por estarem acessando nosso blog. Espero que seja possível transmitir de forma compreensível um pouco de meus conhecimentos em programação, para esta comunidade de desenvolvedores que cresce cada vez mais! Espero que Gostem! Abraço! E meu enorme obrigado à Renato Simões, Átila Soares,Wanderson Quinto, Emerson e a toda galera que sempre ajudou meu sincero obrigado....
Especialmente a Natalia Failache e Rita de Cassia que sempre apoiaram este sonho....

De seu amigo Bruno Rafael.