GWT - Crear aplicación

Como el poder de GWT reside en Write in Java, Run in JavaScript, usaremos Java IDE Eclipse para demostrar nuestros ejemplos.

Comencemos con una sencilla aplicación HelloWorld :

Paso 1: crear proyecto

El primer paso es crear un proyecto de aplicación web simple utilizando Eclipse IDE. Iniciar el asistente de proyectos usando la opciónGoogle Icon > New Web Application Project.... Ahora nombre su proyecto como HelloWorld usando la ventana del asistente de la siguiente manera:

Deseleccionar Use Google App Engine porque no lo estamos usando en este proyecto y dejamos otros valores predeterminados (mantenga Generate Sample project code opción marcada) como tal y haga clic en el botón Finalizar.

Una vez que su proyecto se haya creado con éxito, tendrá el siguiente contenido en su Explorador de proyectos:

Aquí hay una breve descripción de todas las carpetas importantes

No Señor.	Carpeta y ubicación
1	src Archivos de código fuente (clases java). Carpeta del cliente que contiene las clases java específicas del lado del cliente responsables de la visualización de la interfaz de usuario del cliente. Carpeta del servidor que contiene las clases de Java del lado del servidor responsables del procesamiento del lado del servidor. Carpeta compartida que contiene la clase de modelo Java para transferir datos del servidor al cliente y viceversa. HelloWorld.gwt.xml, un archivo descriptor de módulo necesario para que el compilador de GWT compile el proyecto HelloWorld.
2	test Archivos fuente de código de prueba (clases Java). Carpeta del cliente que contiene las clases de Java responsables de probar el código del lado del cliente de gwt.
3	war Esta es la parte más importante, representa la aplicación web implementable real. WEB-INF que contiene clases compiladas, bibliotecas gwt, bibliotecas de servlets. HelloWorld.css, hoja de estilo del proyecto. HelloWorld.html, hots HTML que invocará la aplicación GWT UI.

Paso 2: modificar el descriptor del módulo: HelloWorld.gwt.xml

El complemento GWT creará un archivo descriptor de módulo predeterminado src / com.tutorialspoint / HelloWorld.gwt.xml que se proporciona a continuación. Para este ejemplo, no lo estamos modificando, pero puede modificarlo según sus necesidades.

<?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>

Paso 3: modificar la hoja de estilo: HelloWorld.css

El complemento GWT creará un archivo de hoja de estilo predeterminado war / HelloWorld.css . Modifiquemos este archivo para mantener nuestro ejemplo en el nivel más simple de comprensión:

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;
}

Paso 4: modificar el archivo de host: HelloWorld.html

El complemento GWT creará un archivo host HTML predeterminado war / HelloWorld.html . Modifiquemos este archivo para mantener nuestro ejemplo en el nivel más simple de comprensión:

<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>

Puede crear más archivos estáticos como HTML, CSS o imágenes en el mismo directorio de origen o puede crear más subdirectorios y mover archivos en esos subdirectorios y configurar esos subdirectorios en el descriptor de módulo de la aplicación.

Paso 5: modificar el punto de entrada: HelloWorld.java

El complemento GWT creará un archivo Java predeterminado src / com.tutorialspoint / HelloWorld.java , que mantiene un punto de entrada para la aplicación.

Modifiquemos este archivo para mostrar "¡Hola, mundo!"

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!");
   }
}

Puede crear más archivos Java en el mismo directorio de origen para definir puntos de entrada o para definir rutinas auxiliares.

Paso 6: compilar la aplicación

Una vez que esté listo con todos los cambios realizados, es hora de compilar el proyecto. Usa la opciónGoogle Icon > GWT Compile Project... para iniciar el cuadro de diálogo Compilar GWT como se muestra a continuación:

Mantenga los valores predeterminados intactos y haga clic en el botón Compilar. Si todo va bien, verá el siguiente resultado en la consola de 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

Paso 7: ejecutar la aplicación

Ahora haga clic en el menú Ejecutar aplicación y seleccioneHelloWorld aplicación para ejecutar la aplicación.

Si todo está bien, debe ver el Modo de desarrollo de GWT activo en Eclipse que contiene una URL como se muestra a continuación. Haga doble clic en la URL para abrir la aplicación GWT.

Debido a que está ejecutando su aplicación en modo de desarrollo, deberá instalar el complemento GWT para su navegador. Simplemente siga las instrucciones en pantalla para instalar el complemento.

Si ya tiene el complemento GWT configurado para su navegador, debería poder ver el siguiente resultado

¡Felicidades! ha implementado su primera aplicación utilizando Google Web Toolkit (GWT).

↰ Previous page Next page ↱