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:
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”:
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”:
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”:
Uma nova janela irá se abrir. Escolha a tab “Libraries” e clique em “Add External JARs…”.
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:
Pronto, o GXT já está adicionado no classpath do projeto. Clique em OK:
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”:
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”:
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.
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”:
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:
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”:
Dê um nome para a página HTML. Geralmente damos o mesmo nome do módulo:
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):
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.
Se você nunca executou um projeto GWT no seu browser antes, vai pedir para instalar o plugin do Google. Instale.
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.
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:
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.
Até mais!
Gostou? Curta nossa página:
https://www.facebook.com/Javanamente?bookmark_t=page
Parceiros:
Rota Urbana:https://www.facebook.com/RotaUrbana
Execute TI: http://www.executeti.com.br/
TaLegal: http://mastalegal.com.br/
Gostou? Curta nossa página:
https://www.facebook.com/Javanamente?bookmark_t=page
Parceiros:
Rota Urbana:https://www.facebook.com/RotaUrbana
Execute TI: http://www.executeti.com.br/
TaLegal: http://mastalegal.com.br/
Comentários
Postar um comentário