Primi passi con Sencha GXT

Sencha GXT è un framework che si avvale del Google Web Toolkit per creare applicazioni web di tipo RIA (Rich Internet Application). Sencha Gxt prevede la stesura di codice Java, che il compilatore si preoccuperà di tradurre in HTML 5 e Javascript, ottimizzato per i browser più diffusi sul mercato. Sono disponibili per questo framework diversi widget avanzati che permettono di soddisfare le principali esigenze dello sviluppatore web. In questo articolo verrà mostrato come configurare il nostro primo progetto e verranno date le prime nozioni base.

Nella nostro esempio useremo Maven. Per chi non lo conoscesse Maven è un prodotto realizzato da Apache Foundation, che consente di gestire tutto il ciclo di vita di un progetto, dalla compilazione alla generazione della reportistica e della documentazione da allegare. Per maggiori dettagli e per recuperare i sorgenti di maven visitate il sito http://maven.apache.org/.  Nel momento in cui scrivo è disponibile la versione 3.0.5.

Una volta che Maven è installato e configurato correttamente, possiamo creare il progetto avvalendoci del plugin gwt-maven-plugin, aprendo una shell e lanciando la direttiva

Tale direttiva creerà un progetto in linea con lo standard di GWT versione 2.5.1. Durante la creazione sarà richiesta l’interazione dell’utente che dovrà stabilire il nome del modulo.

Il modulo costituisce l’entry point, ovvero il punto di accesso alla nostra web application.  Di norma è presente un solo entry point,  presente in una pagina html, detta Host-page. Tramite un solo entry point è possibile gestire la navigazione gestendo da codice gli oggetti Layout e Widget innestati nelle pagine html. Nella figura seguente è mostrata l’interazione richiesta con l’utente

Sencha1

Nel mio caso ho scelto il nome modulo. Al termine dell’elaborazione Maven mi avvisa della conclusione delle operazioni.

Sencha2

La procedura ha generato una cartella gxt con la seguente alberatura

Sencha3

Il file pom.xml contiene tutte le informazioni fondamentali per la compilazione e gestione del progetto. Nel caso in cui dovessimo aggiungere nuove librerie o nuove feature dobbiamo modificare questo file. I restanti file sono generati automaticamente da Maven per la configurazione. La directory src contiene i sorgenti del progetto suddivisi nelle directory

  • java
  • resources
  • webapp

 
Nella cartella webapp , così rinominata secondo la convention del maven-war-plugin, troviamo le risorse statiche, come pagine html, css e immagini. In particolare è presente il file modulo.html, che è la nostra host page, generata dal plugin maven. Come anticipato la host page è la pagina html che include il file javascript generato da GWT.

Non si tratta necessariamente di una pagina html, potrebbe anche essere una jsp o una servlet purchè essa includa il riferimento al sorgente javascript generato. Nella directory java saranno presenti i sorgenti java suddivisi in 3 package

  • client
  • server
  • shared

 
Nella cartella client troveremo i sorgenti eseguiti dal client che verranno tradotti in javascript, nella cartella server i sorgenti eseguiti dal server che verranno compilati in bytecode e nella cartella shared i sorgenti condivisi da client e server, compilati in javascript e byte code.

Nella cartella resources sono presenti i file xml che definiscono i moduli e altre risorse a disposizione dei plugin di Maven che andremo a utilizzare. I moduli sono file .gwt.xml  che contengono tutte le informazioni  per la configurazione dell’entry point. In particolare in essi  troviamo definiti i moduli da ereditare, il class name dell’entry point associato al file e il path dei sorgenti che vanno compilati in javascript.

L’entry point è la classe Java associata al modulo. Questa implementa l’interfaccia EntryPoint e viene instanziata automaticamente al caricamento del modulo tramite la pagina html. Nel caricamento viene eseguito in automatico il metodo EntryPoint.onModuleLoad(). Qui di seguito viene riportato il file xml del nostro modulo d’esempio

A questo punto lanciamo la direttiva mvn gwt:run che esegue il modulo in console

Sencha4

La direttiva crea una web application attiva su Jetty e avvia la console di sviluppo GWT che consente di lanciare le host page definite nel nostro progetto

Sencha5

Tramite la funzione launch default browser è possibile accedere al modulo appena creato, che mostra un form con un text input e un button interattivo, che apre una popup con i dati di connessione dell’utente.

Sencha6

Introduciamo quindi la dipendenza da Gxt, che ci permette di accedere ad un set di widget più complessi. Nella sezione delle dependency del pom.xml aggiungiamo la dipendenza da gxt con il seguente tag

Nel momento in cui scrivo gxt è arrivato alla versione 3.0.1.

Con Maven abbiamo finito, non resta che importare il progetto nel nostro IDE. L’ambiente di riferimento per lo sviluppo è Eclipse, versione Juno. In questo ambiente installiamo il plugin maven m2eclipse (disponibile al link http://eclipse.org/m2e/) e il plugin google per Eclipse (disponibile al link https://developers.google.com/eclipse/).

Tramite il plugin m2 importiamo il progetto nel nostro workspace e il gioco è fatto. Resta da risolvere un messaggio di errore accedendo alle proprietà Google del progetto e rimuovendo la spunta da launch e deploy, come si può notare nella figura successiva.

Sencha7

A questo punto l’ambiente è pronto per le vostre sperimentazioni. Buon lavoro.
 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *