Sviluppare applicazioni AJAX in java

Utilizzando un framework Java, DWR, vediamo cos’è AJAX e come poter creare applicazioni che adottano questa tecnologia

AJAX è un termine molto in voga tra gli sviluppatori web, così tanto che potreste essere annoiati da introduzioni ad AJAX (in questo caso passate al paragrafo “Web Chat”). AJAX è la tecnologia che è stata dibattuta in maniera animata per molti versi, ma ha conquistato il pubblico perchè ha qualcosa che è una nuova prospettiva per l’utente.

La nuova funzionalità per tutti gli utenti web è quella relativa al cambiamento all’interno della pagina: l’abilità di una pagina web di cambiare usando informazioni che arrivano da un server senza avere la necessità di essere ricaricata completamente. Questa funzionalità è stata disponibile per Mozilla e Internet Explorer inizialmente, solo recentemente gli utenti di Safari e Konqueror hanno avuto modo di utilizzarla.

E’ questa abilità di avere pagine che si aggiornano da sole che sta cambiando il modo in cui gli utenti interagiscono con il web. Ad esempio:

Operazione Vecchia maniera AJAX Style
Scrolling in un sito di mappe Cliccare su una freccia a sinistra per ricaricare l’intera pagina Spostare l’area della mappa a sinistra e guardare lo scrolling (Google Maps)
Cercare un parola in un dizionario Inserire la parola e cliccare su Cerca per vedere la definizione di una parola Iniziare a scrivere la parola, vedendo i possibili match che vengono proposti mentre scriviamo e la definizione appena abbiamo finito di scrivere, come ObjectGraph Dictonary
Interagire in un forum online Scrivere un messaggio, cliccare su invia e aggiornare la pagina nell’attesa di nuovi messaggi Scrivere un messaggio e aspettare la risposta, senza dover ricaricare. Creeremo un sito come questo nel resto dell’articolo
Riempire un form con una serie di campi Visitare una serie di pagine, a mò di wizard, ricevendo un errore per ogni campo errato Riempire un form che ti dice gli errori appena scrivi e aggiungere dinamicamente dati (l’indirizzo dopo il CAP) senza dover attendere il caricamento di un’altra pagina lenta.

AJAX non è il miglior acronimo che esista: sta per Asynchronous JavaScript and XML.

Questo non descrive i benefici per l’utente: la tecnologia che c’è dietro non deve essere asincrona e le migliori implementazioni non usano necessariamente l’XML. Comunque questo termine ha ormai presopiede quindi non possiamo far altro che seguire il trend.

Il problema per gli sviluppatori web è che AJAX è un modo molto interessante per creare siti web e permette di non dover iniziare con un enorme sforzo, ci sono una serie di “tranelli” che possono rendere la vita molto difficile. Tutti i browser hanno differenti stranezze, così voi potete semplicemente scoprire, per esempio, che avete lasciato fuori dal gioco gli utenti Mac.

DWR, che trovate su java.net, è una libreria Java OpenSource che aiuta gli sviluppatori a scrivere siti che hanno la tecnologia AJAX. Il suo motto è Easy Ajax for Java. Permette al codice all’interno di un browser di utilizzare delle funzioni Java funzionanti su un web server, come se fossero locali.

Questo articolo dimostra l’uso di DWR nel creare un sito di chat multiutente. Viene mostrato quanto è semplice integrare Javascript del browser con Java sul server. Lo scopo è di avere un sistema pienamente funzionante in appena 100 righe di codice tra client e server. L’enfasi non sarà sulla grafica stravagante o su feature riguardanti la chat, perchè ciò ci distrarrebbe dall’obiettivo centrale, ovvero scrivere codice AJAX senza troppo sforzo.

 

Web Chat

La pagina web è divisa in due parti: un’area dove potrete vedere i messaggi che gli altri scrivono e un campo di input dove scriverete i messaggi. La figura 1 mostra come dovrebbe essere

20051118193614328_1

 

L’html è veramente semplice:

Vedremo il codice Javascript in un momento, ma adesso iniziamo a vedere il codice del server. Quanto codice vi serve per un sistema web di chat multiutente?

 

Codice Java Server

Abbiamo due classi per compiere il lavoro lato server. La prima è la classe Message, che rappresenta il singolo stringa inserita dall’utente. Message ha anche un ID univoco come proprietà. Per il momento ci arrangiamo usando il tempo in millisecondi come ID

Il costruttore fa un paio di semplici cose: riduce il messaggio a 256 caratteri e sostituisce finora. L’altra classe del server è la classe Chat, che tiene traccia dei messaggi inviati al server (anche questa molto semplice)

Questo è tutto per il codice lato server! Due di questi metodi sono importanti dal punto di vista del browser: addMessage che viene chiamato in risposta alla scrittura dell’utente, e getMessages che è richiamata in polling per vedere se qualcuno ha scritto qualcosa.

 

Configurazione di DWR

Adesso dobbiamo rendere disponibili questi due metodi al browser. Il primo passo è copiare dwr.jar nella vostra web application. Potete scaricare dwr.jar dal suo progetto java.net. In seguito avete bisogno di configurare il web.xml per inserire DWR. La porzione di codice da inserire è la seguente

Infine dovete dire al DWR del server di chat che avete creato. Nello specifico gli dovete comunicare due parametri:

  • La classe Chat è sicura per essere trasferita al browser
  • La classe Message è ammessa come parametro

 

DWR può fare la seconda cosa al posto tuo, ma in questo caso lo faremo noi per evitare di dare per errore l’accesso a una qualsiasi cosa. Il file di configurazione di DWR, dwr.xml, è posizionato nella cartella WEB-INF insieme al web.xml. Per la vostra applicazione di chat, dwr.xml dovrebbe essere così (chiaramente sostituite [your-package] con il package che avete utilizzato nel codice visto sopra):

Stiamo dicendo a DWR di creare le classi chat da trasferire al browser e che in Javascript saranno denominate “Chat”. Il file stabilisce anche che la classe Message è sicura per essere usata come parametro.

 

Scripting lato client

L’ultimo pezzo riguarda il codice Javascript, che viene richiamato dall’HTML, per effettuare le chiamate verso il codice Java. La buona notizia è che DWR ci permette di fare ciò in maniera semplice.

Di solito il codice Javascript che effettua questo tipo di operazioni conterrebbe codice complesso come XMLHttpRequest, DOM e confronto di parametri. Con DWR non ci dobbiamo preoccupare di nessuna di queste cose. Prima includiamo il Javascript che comunica al browser il codice di Chat. Qui di seguito trovate linee di codice da utilizzare

Lo script engine.js contiene la parte centrale di DWR. Generalmente voi dovete soltanto includerlo così com’è ed ignorarlo.All’interno ci sono alcuni metodi utili talvolta, ma per capirli vi rimando alla documentazione presente nel sito di DWR.

Lo script util.js contiene delle funzioni d’utilità che sono totalmente opzionali, ma vi potrebbero aiutare molto nell’utilizzo di DWR. Chat.js è generato dinamicante da DWR come la versione remota di Chat.java. Se ci date un’occhiata vedrete qualcosa di simile

DWR fà qualsiasi cosa per rendere il codice Javascript più semplice possibile, ma ci sono alcune cose alle quali dovete fare attenzione.

La più ovvia è che la “A” in AJAX sta per asincrono; così per definizione il metodo remoto non viene eseguito nel momento in cui viene eseguito il codice Javascript. Questo non sarebbe un problema, tranne per la complessità di sapere cosa fare con i valori ritornati al browser dal metodo Java.

DWR risolve il problema, richiedendo un metodo di callback, al quale verranno passati i dati di risposta. Il primo parametro di ogni funzione generata da DWR è sempre il metodo di callback. Sopra abbiamo creato una pagina con una funzione Javascript che non abbiamo implementato fino adesso: l’evento sendMessage è richiamato dal browser ogni volta che viene premuto il tasto invia. Come potete immaginare questo richiamerà Chat.addMessage:

La prima linea prende il valore dal campo d’input. DWRUtil.getValue funziona con la maggior parte degli elementi HTML, dei quali deve avere un attributo id (in questo caso l’elemento di input ha id=”text”).

Successivamente usiamo il metodo setValue per cancellare l’input; setValue è molto svelto a fare il suo lavoro e aggiornare la pagina. Infine richiamiamo Chat.addMessage e chiediamo al DWR di ritornare la lista dei messaggi che sono presenti e passarla come parametro alla funzione gotMessages. Questa dovrebbe essere fatta così:

Qui è dove DWR eccelle. Il metodo Java Chat.addMessage ritorna una List di oggetti Message.

DWR ha automaticamente convertito la lista in un array di oggetti Javascript. Tutto quello che dobbiamo fare in gotMessages è ciclare sull’array di messaggi, prendere il testo da ogni oggetto nell’array, e costruire un pò di HTML da questo. Alla fine inseriamo la stringa creata all’interno del div, utilizzando il versatile metodo setValue. Ed ecco tutto!

Abbiamo un semplice sistema di web chat multiuser in circa 100 righe di codice, tra client e server. Ci sono una serie di cose mancanti per far diventare questo sistema utile: un metodo che va in polling richiamando setTimeout per invocare Chat.getMessages farebbe funzionare tutto meglio.

Il codice scaricato contiene altre sei righe Javascript per fare ciò. Potremmo anche aggiungere del codice per modificare il display solo nel caso arrivino nuovi messaggi; questo dovrebbe essere fatto per non avere effetti di sfarfallio sul display.

Infine avere un meccanismo dove i browser interrogano di meno il server quando non succede niente, potrebbe prevenire problemi relativi alle troppe connessioni per il server.

 

Conclusioni

Usando DWR è possibile creare siti AJAX per tutti i browser in una maniera molto semplice e introdurre una maniera precisa per far dialogare Javascript del browser con Java sul server. E’ facile iniziare ad utilizzarlo ed integrarlo bene con il vostro sito.

Risorse

WAR dell’esempio, con tutto il codice sorgente
Il sito di DWR
Pagine di download
L’articolo originale che ha coniato il termine
Autore: Joe Walker, sviluppatore e consulente che lavora su tecniche avanzate di sviluppo web come AJAX
Traduzione a cura di Federico Paparoni

Lascia un commento

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