GWT - Criar aplicativo

Como o poder do GWT está em Write in Java, Run in JavaScript, usaremos o Java IDE Eclipse para demonstrar nossos exemplos.

Vamos começar com um aplicativo HelloWorld simples -

Etapa 1 - Criar Projeto

A primeira etapa é criar um projeto de aplicativo da Web simples usando Eclipse IDE. Inicie o assistente de projeto usando a opçãoGoogle Icon > New Web Application Project.... Agora nomeie seu projeto como HelloWorld usando a janela do assistente da seguinte forma -

Desmarcar Use Google App Engine porque não o estamos usando neste projeto e deixamos outros valores padrão (manter Generate Sample project code opção marcada) como tal e clique no botão Concluir.

Assim que seu projeto for criado com sucesso, você terá o seguinte conteúdo em seu Project Explorer -

Aqui está uma breve descrição de todas as pastas importantes

Sr. Não.	Pasta e localização
1	src Arquivos de código-fonte (classes java). A pasta do cliente contendo as classes java específicas do lado do cliente responsáveis pela exibição da IU do cliente. Pasta do servidor contendo as classes java do lado do servidor responsáveis pelo processamento do lado do servidor. Pasta compartilhada que contém a classe do modelo java para transferir dados do servidor para o cliente e vice-versa. HelloWorld.gwt.xml, um arquivo descritor de módulo necessário para o compilador GWT compilar o projeto HelloWorld.
2	test Arquivos fonte de código de teste (classes java). Pasta do cliente que contém as classes java responsáveis por testar o código do lado do cliente gwt.
3	war Esta é a parte mais importante, ela representa o aplicativo da web implementável real. WEB-INF contendo classes compiladas, bibliotecas gwt, bibliotecas de servlet. HelloWorld.css, folha de estilo do projeto. HelloWorld.html, hots HTML que invocará o aplicativo GWT UI.

Etapa 2 - Modificar o descritor do módulo: HelloWorld.gwt.xml

O plugin GWT criará um arquivo descritor de módulo padrão src / com.tutorialspoint / HelloWorld.gwt.xml que é fornecido abaixo. Para este exemplo, não o estamos modificando, mas você pode modificá-lo de acordo com sua necessidade.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.  You can change       -->
   <!-- the theme of your GWT application by uncommenting          -->
   <!-- any one of the following lines.                            -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- <inherits name = 'com.google.gwt.user.theme.chrome.Chrome'/> -->
   <!-- <inherits name = 'com.google.gwt.user.theme.dark.Dark'/>     -->

   <!-- Other module inherits                                      -->

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Etapa 3 - Modificar folha de estilo: HelloWorld.css

O plugin GWT criará um arquivo de folha de estilo padrão war / HelloWorld.css . Vamos modificar este arquivo para manter nosso exemplo no nível mais simples de compreensão -

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Etapa 4 - Modificar o arquivo do host: HelloWorld.html

O plugin GWT criará um arquivo host HTML padrão war / HelloWorld.html . Vamos modificar este arquivo para manter nosso exemplo no nível mais simples de compreensão -

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

Você pode criar mais arquivos estáticos como HTML, CSS ou imagens no mesmo diretório de origem ou pode criar outros subdiretórios e mover arquivos nesses subdiretórios e configurar esses subdiretórios no descritor de módulo do aplicativo.

Etapa 5 - Modificar ponto de entrada: HelloWorld.java

O plugin GWT criará um arquivo Java padrão src / com.tutorialspoint / HelloWorld.java , que mantém um ponto de entrada para o aplicativo.

Vamos modificar este arquivo para exibir "Hello, World!"

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

Você pode criar mais arquivos Java no mesmo diretório de origem para definir pontos de entrada ou para definir rotinas auxiliares.

Etapa 6 - Compilar o aplicativo

Assim que estiver pronto com todas as alterações feitas, é hora de compilar o projeto. Use a opçãoGoogle Icon > GWT Compile Project... para abrir a caixa de diálogo GWT Compile como mostrado abaixo -

Mantenha os valores padrão intactos e clique no botão Compilar. Se tudo correr bem, você verá a seguinte saída no console do Eclipse

Compiling module com.tutorialspoint.HelloWorld
   Compiling 6 permutations
      Compiling permutation 0...
      Compiling permutation 1...
      Compiling permutation 2...
      Compiling permutation 3...
      Compiling permutation 4...
      Compiling permutation 5...
   Compile of permutations succeeded
Linking into C:\workspace\HelloWorld\war\helloworld
   Link succeeded
   Compilation succeeded -- 33.029s

Etapa 7 - Executar o aplicativo

Agora clique no menu Executar aplicativo e selecioneHelloWorld aplicativo para executar o aplicativo.

Se tudo estiver bem, você deve ver o modo de desenvolvimento GWT ativo no Eclipse contendo uma URL conforme mostrado abaixo. Clique duas vezes no URL para abrir o aplicativo GWT.

Como você está executando seu aplicativo em modo de desenvolvimento, será necessário instalar o plugin GWT para seu navegador. Basta seguir as instruções na tela para instalar o plugin.

Se você já tem o plugin GWT definido para o seu navegador, você deve ser capaz de ver o seguinte resultado

Parabéns! você implementou seu primeiro aplicativo usando o Google Web Toolkit (GWT).

↰ Previous page Next page ↱