GWT - Aplicaciones

Antes de comenzar con la creación de una aplicación "HelloWorld" real usando GWT, veamos cuáles son las partes reales de una aplicación GWT:

Una solicitud de GWT consta de las siguientes cuatro partes importantes, de las cuales la última parte es opcional, pero las tres primeras son obligatorias.

Descriptores de módulo
Recursos públicos
Código del lado del cliente
Código del lado del servidor

Muestras de ubicaciones de diferentes partes de una aplicación típica de gwt HelloWord será como se muestra a continuación -

Nombre	Ubicación
Raíz del proyecto	Hola Mundo/
Descriptor de módulo	src / com / tutorialspoint / HelloWorld.gwt.xml
Recursos públicos	src / com / tutorialspoint / war /
Código del lado del cliente	src / com / tutorialspoint / client /
Código del lado del servidor	src / com / tutorialspoint / server /

Descriptores de módulo

Un descriptor de módulo es el archivo de configuración en forma de XML que se utiliza para configurar una aplicación GWT.

Una extensión de archivo descriptor de módulo es * .gwt.xml, donde * es el nombre de la aplicación y este archivo debe residir en la raíz del proyecto.

A continuación se muestra un descriptor de módulo predeterminado HelloWorld.gwt.xml para una aplicación HelloWorld:

<?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.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

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

   <!-- specify the paths for translatable code                    -->
   <source path = '...'/>
   <source path = '...'/>

   <!-- specify the paths for static files like html, css etc.     -->
   <public path = '...'/>
   <public path = '...'/>

   <!-- specify the paths for external javascript files            -->
   <script src = "js-url" />
   <script src = "js-url" />

   <!-- specify the paths for external style sheet files            -->
   <stylesheet  src = "css-url" />
   <stylesheet  src = "css-url" />
</module>

A continuación se muestra un breve detalle sobre las diferentes partes utilizadas en el descriptor del módulo.

No Señor.	Nodos y descripción
1	<module rename-to = "helloworld"> Esto proporciona el nombre de la aplicación.
2	<inherits name = "logical-module-name" /> Esto agrega otro módulo gwt en la aplicación al igual que lo hace la importación en las aplicaciones Java. De esta manera se puede heredar cualquier número de módulos.
3	<entry-point class = "classname" /> Esto especifica el nombre de la clase que comenzará a cargar la aplicación GWT. Se puede agregar cualquier cantidad de clases de punto de entrada y se llaman secuencialmente en el orden en que aparecen en el archivo del módulo. Entonces, cuando el onModuleLoad () de su primer punto de entrada termina, el siguiente punto de entrada se llama inmediatamente.
4	<source path = "path" /> Esto especifica los nombres de las carpetas de origen que el compilador de GWT buscará para la compilación de origen.
5	<public path = "path" /> La ruta pública es el lugar de su proyecto donde se almacenan los recursos estáticos a los que hace referencia su módulo GWT, como CSS o imágenes. La ruta pública predeterminada es el subdirectorio público debajo de donde se almacena el archivo XML del módulo.
6	<script src="js-url" /> Inyecta automáticamente el archivo JavaScript externo ubicado en la ubicación especificada por src.
7	<stylesheet src="css-url" /> Inyecta automáticamente el archivo CSS externo ubicado en la ubicación especificada por src.

Recursos públicos

Todos estos son archivos a los que hace referencia su módulo GWT, como la página HTML del host, CSS o imágenes.

La ubicación de estos recursos se puede configurar usando el elemento <public path = "path" /> en el archivo de configuración del módulo. De forma predeterminada, es el subdirectorio público debajo de donde se almacena el archivo XML del módulo.

Cuando compila su aplicación en JavaScript, todos los archivos que se pueden encontrar en su ruta pública se copian en el directorio de salida del módulo.

El recurso público más importante es la página de host, que se utiliza para invocar la aplicación GWT real. Es posible que una página de host HTML típica para una aplicación no incluya ningún contenido de cuerpo HTML visible, pero siempre se espera que incluya la aplicación GWT a través de una etiqueta <script ... /> de la siguiente manera

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

A continuación se muestra la hoja de estilo de muestra que hemos incluido en nuestra página de host:

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

Código del lado del cliente

Este es el código Java real escrito implementando la lógica comercial de la aplicación y que el compilador GWT traduce a JavaScript, que eventualmente se ejecutará dentro del navegador. La ubicación de estos recursos se puede configurar usando el elemento <source path = "path" /> en el archivo de configuración del módulo.

Por ejemplo Entry Point el código se usará como código del lado del cliente y su ubicación se especificará usando <source path = "path" />.

Un modulo entry-point es cualquier clase que se pueda asignar a EntryPointy que se puede construir sin parámetros. Cuando se carga un módulo, se crea una instancia de cada clase de punto de entrada y suEntryPoint.onModuleLoad()se llama al método. Una clase de ejemplo de HelloWorld Entry Point será la siguiente:

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

Código del lado del servidor

Esta es la parte del lado del servidor de su aplicación y es muy opcional. Si no está realizando ningún procesamiento de backend dentro de su aplicación, entonces no necesita esta parte, pero si se requiere algún procesamiento en el backend y su aplicación del lado del cliente interactúa con el servidor, entonces tendrá que desarrollar estos componentes.

El próximo capítulo hará uso de todos los conceptos mencionados anteriormente para crear la aplicación HelloWorld usando Eclipse IDE.

↰ Previous page Next page ↱