GWT - Applicazioni

Prima di iniziare con la creazione di un'applicazione "HelloWorld" effettiva utilizzando GWT, vediamo quali sono le parti effettive di un'applicazione GWT:

Un'applicazione GWT consiste nel seguire quattro parti importanti di cui l'ultima parte è facoltativa ma le prime tre parti sono obbligatorie.

  • Descrittori del modulo
  • Risorse pubbliche
  • Codice lato client
  • Codice lato server

Posizioni di esempio di parti diverse di una tipica applicazione gwt HelloWord sarà come mostrato di seguito -

Nome Posizione
Radice del progetto Ciao mondo/
Descrittore del modulo src / com / tutorialspoint / HelloWorld.gwt.xml
Risorse pubbliche src / com / tutorialspoint / war /
Codice lato client src / com / tutorialspoint / client /
Codice lato server src / com / tutorialspoint / server /

Descrittori del modulo

Un descrittore del modulo è il file di configurazione sotto forma di XML che viene utilizzato per configurare un'applicazione GWT.

L'estensione di un file descrittore del modulo è * .gwt.xml, dove * è il nome dell'applicazione e questo file dovrebbe risiedere nella radice del progetto.

Di seguito sarà un descrittore di modulo predefinito HelloWorld.gwt.xml per un'applicazione 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>

Di seguito è riportato un breve dettaglio sulle diverse parti utilizzate nel descrittore del modulo.

Sr.No. Nodi e descrizione
1

<module rename-to = "helloworld">

Fornisce il nome dell'applicazione.
2

<inherits name = "logical-module-name" />

Questo aggiunge un altro modulo gwt nell'applicazione proprio come l'importazione fa nelle applicazioni java. Qualsiasi numero di moduli può essere ereditato in questo modo.
3

<entry-point class = "classname" />

Specifica il nome della classe che inizierà a caricare l'applicazione GWT. È possibile aggiungere un numero qualsiasi di classi di punti di ingresso e vengono chiamate in sequenza nell'ordine in cui appaiono nel file del modulo. Quindi, quando l'onModuleLoad () del primo punto di ingresso finisce, il punto di ingresso successivo viene chiamato immediatamente.
4

<source path = "path" />

Specifica i nomi delle cartelle di origine che il compilatore GWT cercherà per la compilazione di origine.
5

<public path = "path" />

Il percorso pubblico è il punto del progetto in cui vengono archiviate le risorse statiche a cui fa riferimento il modulo GWT, come CSS o immagini. Il percorso pubblico predefinito è la sottodirectory pubblica in cui è archiviato il file XML del modulo.
6

<script src="js-url" />

Inserisce automaticamente il file JavaScript esterno situato nella posizione specificata da src.
7

<stylesheet src="css-url" />

Inserisce automaticamente il file CSS esterno situato nella posizione specificata da src.

Risorse pubbliche

Questi sono tutti file a cui fa riferimento il tuo modulo GWT, come la pagina HTML dell'host, CSS o immagini.

La posizione di queste risorse può essere configurata utilizzando l'elemento <public path = "path" /> nel file di configurazione del modulo. Per impostazione predefinita, è la sottodirectory pubblica sottostante in cui è archiviato il file XML del modulo.

Quando compili la tua applicazione in JavaScript, tutti i file che possono essere trovati sul tuo percorso pubblico vengono copiati nella directory di output del modulo.

La risorsa pubblica più importante è la pagina host che viene utilizzata per richiamare l'applicazione GWT effettiva. Una tipica pagina host HTML per un'applicazione potrebbe non includere alcun contenuto del corpo HTML visibile, ma ci si aspetta sempre che includa l'applicazione GWT tramite un tag <script ... /> come segue

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

Di seguito è riportato il foglio di stile di esempio che abbiamo incluso nella nostra pagina 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;
}

Codice lato client

Questo è il codice Java effettivo scritto implementando la logica di business dell'applicazione e che il compilatore GWT traduce in JavaScript, che alla fine verrà eseguito all'interno del browser. La posizione di queste risorse può essere configurata utilizzando l'elemento <source path = "path" /> nel file di configurazione del modulo.

Per esempio Entry Point il codice verrà utilizzato come codice lato client e la sua posizione verrà specificata utilizzando <source path = "path" />.

Un modulo entry-point è qualsiasi classe a cui è assegnabile EntryPointe che può essere costruito senza parametri. Quando viene caricato un modulo, viene creata un'istanza di ogni classe del punto di ingresso e il relativo fileEntryPoint.onModuleLoad()metodo viene chiamato. Un esempio di classe HelloWorld Entry Point sarà il seguente:

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

Codice lato server

Questa è la parte lato server della tua applicazione ed è molto facoltativa. Se non stai eseguendo alcuna elaborazione di backend all'interno della tua applicazione, non hai bisogno di questa parte, ma se è necessaria un'elaborazione nel backend e l'applicazione lato client interagisce con il server, dovrai sviluppare questi componenti.

Il prossimo capitolo farà uso di tutti i concetti sopra menzionati per creare un'applicazione HelloWorld utilizzando Eclipse IDE.