Si è visto in un precedente articolo cosa sta dietro ad AJAX, e si è poi illustrato l‘utilizzo delle funzioni Javascript generalizzate (come ad esempio Sarissa) per semplificare la complessità di scrivere applicazioni web cross-browser.
In questo articolo verrà illustrato come utilizzare il framework Java Google Web Toolkit (GWT) per realizzare applicazioni web 2.0 con AJAX.

Introduzione

In questo articolo vedremo come il Google Web Toolkit (GWT) ci può aiutare a scrivere applicazioni AJAX in modo veloce, semplice e con un approccio totalmente diverso dagli altri, ossia utilizzando solo il linguaggio Java.

Google Web Toolkit 1.1.10 (GWT)

GWT è un framework Java per scrivere applicazione AJAX come ad esempio Google Reader, Google Maps, Gmail, etc.

Scrivere applicazioni web comporta un processo di sviluppo-test-correzione continuo che porta via moltissimo tempo. L‘approccio di GWT è quello di permettere di scrivere le applicazioni utilizzando sempre il linguaggio Java e solo alla fine convertire (tramite il compilatore di GWT) da classi Java a codice Javascript e HTML browser compliant (Internet Explorer, Firefox, Mozilla e Safari per ora).

Il ciclo di sviluppo con GWT si può riassumere nel modo seguente:

1. Utilizzo di un IDE Java (Eclipse, Netbeans, Junit, IntelliJ, Jprofiler, ecc.) per scrivere l‘applicazione scritta in linguaggio Java, con l‘ausilio di alcune librerie messe a disposizione da GWT.
2. Test dell‘applicazione (Hosted Mode) come codice Java compilato che gira all‘interno della JVM.
3. Utilizzo del compilatore GWT per convertire le classi Java in un‘applicazione web composta da files JavaScript e HTML.
4. Verifica dell‘applicazione (Web Mode) con i browser che si vuole supportare.

Architettura di Google Web Toolkit

Come mostrato in figura 1, GWT è composto principalmente da 4 componenti: un compilatore Java-to-JavaScript, un web browser “hosted” e 2 librerie Java:

Figura 1 – Architettura Google Web Toolkit

Vediamo nel dettaglio le singole componenti:

1. Compilatore GWT Java-to-JavaScript

Il compilatore GWT Java-to-JavaScript converte il codice Java in codice Javascript. Deve essere utilizzato quando si vuole eseguire l‘applicazione in modalità  “web mode”.

2. GWT Hosted Web Browser

Il GWT Hosted Web Browser permette di eseguire le applicazioni in modalità  “hosted mode”, ossia di eseguire il codice Java nella JVM senza convertire il codice in linguaggio JavaScript/HTML. Per fare questo, il browser GWT include speciali librerie per Internet Explorer su Windows e Gecko/Mozilla su Linux.

3. JRE emulation libraryGWT

Contiene le implementazioni in linguaggio Javascript delle librerie Java standard maggiormente utilizzate (package java.lang.* e java.util.*). Tutti gli altri package (ad es. java.io.*, java.net.*, ecc.) non sono supportati nativamente da GWT.

4. GWT Web UI class library

Questa è una libreria User Interface contenente un insieme di interfacce e classi che permettono di disegnare le pagine web (ad es. bottoni, text boxes, immagini, ecc.) . Questa è la libreria principale per creare applicazioni web-based basate su GWT.

GWT e Java

GWT compila i sorgenti Java compatibili con J2SE 1.4.2. Ovviamente, dovendo il compilatore fare una conversione da Java a Javascript, non è supportato tutto il linguaggio Java ma solo una parte; vediamo le caratteristiche principali.

• Tipi supportati

byte, char, short, int, float, double, Object, String, e arrays sono supportati. Il tipo long è supportatoma, non esistendo in Javascript, questo tipo viene convertito come numero floating point double-precision.

• Eccezioni

try, catch, finally ed eccezioni definite dall‘utente sono supportate, mentre, lo statement Throwable.getStackTrace() non è supportato nella modalità  web.

• Asserzioni

Il compilatore GWT accetta e compila le istruzioni di asserzioni ma non produce codice Javascript.

• Multithreading e Sincronizzazione

GWT accetta le istruzioni di sincronizzazione ma, essendo Javascript un linguaggio single-threaded, non ha effetti in esecuzione.

• Reflection

GWT, per rendere più efficiente il codice Javascript, compila i sorgenti Java in un unico file Javascript e, pertanto, non supporta il caricamento dinamico delle classi (reflection).

• Finalization

GWT non è in grado di utilizzare la finalizzazione degli oggetti durante il Garbage Collection in quanto non è supportato dal linguaggio Javascript.

• Strict Floating-Point (strictfp)

GWT non supporta i vari tipi di numeri floating-point (single-precision e double-precision) e lo statement strictfp.

Installazione di GWT

Per prima cosa estrarre il file .tar.gz (.zip per Windows):

#cd /usr/local

#tar xvzf gwt-linux-1.1.10.tar.gz

L‘installazione è finita e possiamo iniziare ad utilizzare GWT con un piccolo esempio.

Creazione dell‘esempio

Entrare nella cartella “gwt-linux-1.1.10”:

#cd ./gwt-linux-1.1.10/

Prima di creare il progetto, creare una cartella “ajax3” che in seguito verrà  associata ad Eclipse come Workspace:

#mkdir ajax3

#cd ./ajax3

A questo punto creare il progetto “Hello”:

#../applicationCreator -eclipse Hello -out Hello -overwrite uk.co.marcoratto.Hello.client.Hello

Le opzioni che abbiamo utilizzato sono:

-eclipse

Crea una configurazione di default per lo sviluppo ed il debug con Eclipse

-out

La directory in cui verrà  creato il progetto

className

La classe Java di esempio da creare

Eseguendo il comando si vedrà  il seguente output a video:

Created directory Hello/src

Created directory Hello/src/uk/co/marcoratto/Hello

Created directory Hello/src/uk/co/marcoratto/Hello/client

Created directory Hello/src/uk/co/marcoratto/Hello/public

Created file Hello/src/uk/co/marcoratto/Hello/Hello.gwt.xml

Created file Hello/src/uk/co/marcoratto/Hello/public/Hello.html

Created file Hello/src/uk/co/marcoratto/Hello/client/Hello.java

Created file Hello/Hello.launch

Created file Hello/Hello-shell

Created file Hello/Hello-compile

E‘ anche possibile creare uno script ANT che ci permette di compilare il codice Java nel modo seguente:

#../projectCreator -ant Hello -eclipse Hello -out Hello

Le opzioni che abbiamo utilizzato sono:

-ant

Genera un buildfile per Ant (.ant.xml sarà  il suffisso)

-eclipse

Genera un progetto per Eclipse

-out

La directory in cui verrano creati i files

Eseguendo il comando si vedrà  il seguente output a video:

Created directory Hello/test

Created file Hello/Hello.ant.xml

Created file Hello/.project

Created file Hello/.classpath

Configurazione di Eclipse

Adesso possiamo lanciare Eclipse per completare la configurazione:

#eclipse

Impostare il nuovo Workspace come visualizzato in figura 2:

Figura 2 – Nuovo Workspace di Eclipse

Chiudere la finestra di benvenuto di Eclipse (figura 3):

Figura 3 – Welcome

Creare un nuovo progetto Java File –> New –> Project…. –> Java –> Java Project (figura 4).

Figura 4 – New Project

e poi premere il pulsante Next.

Digitare il nome del progetto “Hello” (figura 5).

Figura 5 – New Java Project 1

e poi premere il pulsante Next.

Non modificare le impostazioni e premere il pulsante Finish (figura 6).

Figura 6 – New Java Project 2

Proviamo subito a compilare con ANT:

Figura 7 – ANT

facendo un clic destro su “Hello.ant.xml” –> “Run As…” –> “Ant build”

Se non ci sono errori, dopo pochi secondi vengono compilati i sorgenti Java e visualizzato l‘output di ANT nella console di Ecplise (figura 7).

Adesso possiamo provare a lanciare l‘esempio in modalità  Hosted.

Scegliere la voce di menu “Run” –> “Run…”

Figura 8 – Run Java Application – Main

Impostare come main class “com.google.gwt.dev.GWTShell” (figura 8).

Passiamo alla voce “Arguments” (figura 9):

Figura 9 – Run Java Application – Arguments

Modificare la riga dei parametri nel modo seguente:

-logLevel ALL -out /usr/local/gwt-linux-1.1.10/ajax3/Hello/www

-whitelist "^http[:][/][/]localhost[:]8888,

^http[:][/][/]127[.]0[.]0[.]1[:]8888" "http://127.0.0.1:8888/uk.co.marcoratto.Hello.Hello/Hello.html"

Le opzioni della classe “com.google.gwt.dev.GWTShell” che abbiamo impostato sono le seguenti:

-whitelist

Elenco separato da virgole di espressioni regolari dei browser abilitati a quel determinato URL (nel nostro caso solo localhost e 127.0.0.1)

-logLevel

Livello di logging (ERROR, WARN, INFO, TRACE, DEBUG, SPAM oppure ALL)

-out

La directory in cui verranno creati i files

url

URL che verrà  aperto automaticamente

Esecuzione dell‘esempio

Lanciare la classe Java e dopo alcuni secondi appariranno due finestre.

La prima finestra (figura 10) è la shell di sviluppo di GWT in cui vengono inoltrate le richieste web.

Figura 10 – GWT Development Shell

La seconda finestra (figura 11) è il GWT Hosted Web Browser in cui è possibile testare il nostro esempio.

Figura 11 – Wrapper HTML for Hello 1

L‘URL associato è quello che abbiamo dichiarato come parametro precedentemente, ossia:

 "http://127.0.0.1:8888/uk.co.marcoratto.Hello.Hello/Hello.html"

Figura 12 – Wrapper HTML for Hello 2

Infatti, premendo il pulsante “Click me” si vedrà  la scritta “Hello World!”.

Modifica dell‘esempio

Vediamo adesso, come modificare il codice Java e verificare subito le modifiche fatte.

Andare sulla classe “Hello.java” (figura 13).

Figura 13 – Java – Hello.java – Eclipse SDK 1

Cambiare “Hello World!” con “Esempio per Mokabyte!” (figura 14).

Figura 14 – Java – Hello.java – Eclipse SDK 2

Salvare la classe e tornare sul GWT Hosted Web Browser:

Figura 15 – Wrapper HTML for Hello

E, premendo il pulsante “Click me”, si dovrà  vedere l‘output modificato.

Contenuto del file zip di esempio

Qui di seguito viene data una breve descrizione del contenuto del file ajax3.zip (workspace di Eclipse):

Hello/.classpath

Hello/.project

Hello/Hello.launch

Files di configurazione di Ecplise.

Hello/Hello-compile

File generato automaticamente da GWT per compilare i sorgenti Java e generare il codice Javascript e HTML.

Hello/Hello-shell

File generato automaticamente da GWT per aprire il Wrapper HTML.

Hello/Hello.ant.xml

Script di ANT per compilare le classi.

Hello/bin

Cartella che conterrà  le classe compilate.

Hello/src/uk/co/marcoratto/Hello/Hello.gwt.xml

Module XML file che referenzia una pagina “Hosted”.

I files devono avere estensione .gwt.xml, possono essere ereditabili ad altri moduli e devono essere inclusi nel classpath.

Hello/src/uk/co/marcoratto/Hello/client/Hello.java

Classe Java di esempio.

Hello/src/uk/co/marcoratto/Hello/public/Hello.html

Pagina HTML che contiene il codice creato con GWT e riferito ad una pagina “hosted”.

Utilizzo del file “ajax3.zip”

Estrarre il file “ajax3.zip”, lanciare Eclipse e puntare come workspace alla directory appena estratta.

Conclusioni

In questo articolo abbiamo visto come utilizzare il Google Web Toolkit (GWT) per creare applicazioni web 2.0 basate su AJAX.

Nella cartella “samples” ci sono altri esempi più complessi (come ad esempio DynaTable, I18N, JSON, KitchenSink, Mail, SimpleXML) che permettono di vedere altre potenzialità  di GWT.

Vediamo quali sono le caratteristiche più importanti di Google Web Toolkit:

• Componenti User Interface (UI) dinamici e riusabili

E‘ possibile creare per le interfacce utente dei Widget e riusarli in altri progetti come JAR files.

• RPC

GWT utilizza il meccanismo RPC per far comunicare l‘applicazione web con il server.

E‘ sufficiente definire le classi Java che si vogliono utilizzare nel colloquio come serializzabili ed è GWT che si preoccupa del trasporto.

• Gestione della history del browser

E noto che le applicazioni AJAX vengono compromesse dall‘utilizzo del pulsante di “Indietro”. GWT risolve il problema gestendo gli stati ed il pulsante “Indietro”.

• Debugging

In fase di sviluppo si scrive solo codice Java che può essere facilmente testato all‘interno di un IDE (come ad esempio Eclipse).

• Cross-Browser

Le applicazione scritte con GWT automaticamente supportano IE, Firefox, Mozilla, Safari e Opera.

• Integrazione con JUnit

GWT si integra facilmente con JUNIT per testare le interfacce utente (UI) ma anche i colloqui RPC.

• Internazionalizzazione (I18N)

Con GWT è possibile creare facilmente librerie multilingue.

• JavaScript Native Interface (JSNI)

GWT permette anche di unire codice Javascript proprietario con codice sorgente Java tramite JavaScript Native Interface (JSNI).

Riferimenti

[1] Marco Ratto, “Sviluppare Applicazioni AJAX. I parte: realizzare pagine web con un approccio tutto nuovo”, Mokabyte 107, maggio 2006

[2] Marco Ratto, “Sviluppare Applicazioni AJAX. II parte: realizzare applicazioni AJAX utilizzando il progetto Open Source Sarissa”, Mokabyte 108, giugno 2006

[3] Documentazione GWT, “file:///usr/local/gwt-linux-1.1.10/doc/html/gwt.html”

[4] JDK 1.4.2, http://java.sun.com/j2se/1.4.2/download.html

[5] Eclipse 3.1.2, http://www.eclipse.org/

[6] Google Web Toolkit 1.1.10, http://code.google.com/webtoolkit/download.html

[7] Workspace di Eclipse “ajax3.zip”