Dopo aver visto come aggiungere una validazione javascript ad una form esistente utilizzando extjs vediamo adesso come eseguire la stessa operazione usando jquery, un framework javascript molto semplice ma anche molto potente. In particolare sfrutteremo alcune funzionalità base di jquery di selezione/manipolazione del dom della pagina ed alcuni plugin. In questo post vedremo che jquery è il framework ideale da usare quando si vuole aggiungere funzionalità ai vari elementi di una pagina in base alle classi css associate.

Da quando extJs ha cambiato licenza ho iniziato a guardarmi intorno per trovare un framework javascript alternativo. Una valida alternativa è sicuramente jquery, un framework javascript open source (ma utilizzabile anche in applicazioni commerciali grazie alla doppia licenza mit e gpl) molto semplice ma anche molto potente. Infatti mentre extjs mette a disposizione una serie completa di componenti per poter creare una rich internet application jquery permette solamente di eseguire facilmente manipolazione del dom della pagina, chiamate ajax e altre operazioni tipiche del javascript. Quindi più che un framework completo jquery può essere visto come una base su cui costruire cose più complesse. Per fortuna già molta gente ha costruito librerie di componenti riusabili sfruttando come base jquery, una lunga lista di queste librerie (in gergo chiamati plugin) è disponibile qui.

In questo post vediamo come usare una grid di extjs per creare una pagina html che mostra una lista di dati paginati, ordinabili e filtrabili in base a dei criteri di ricerca. La tabella di dati viene popolata con chiamate ajax verso il server sfruttando dwr (vedi il precedente tutorial per i dettagli sull'utilizzo di dwr con spring). La parte di vista è composta da una pagina html quindi gran parte del codice mostrato può essere usato anche in progetti non java (per esempio php o python). I sorgenti dell'esempio sono disponibili qui, lo zip contiene un dynamic web project di eclipse in cui devono essere aggiunti i jar di spring, dwr e commons-logging.

Dopo aver visto come gestire gli oggetti di business di una applicazione con spring vediamo adesso come richiamare da codice javascript un metodo di uno di questi oggetti. Per ottenere questo risultato usiamo dwr, un framework java che crea dinamicamente oggetti javascript che permettono di interagire con oggetti java tramite chiamate ajax.

I sorgenti dell'esempio sono disponibili qui, lo zip contiene un dynamic web project di eclipse in cui devono essere aggiunti i jar di spring, dwr e commons-logging.

Lightbox è un ottimo esempio di javascript non intrusivo, permette di trasformare in un attimo una pagina web con una serie di immagini in una galleria di immagini in stile web 2.0. In pratica è uno script javascript che cerca tutti i link a immagini all'interno di una pagina che contengono l'attributo rel="lightbox" e ci aggiunge una chiamata javaascript che mostra l'immagine in un popup. Il sito di Lightbox contiene un esempio dettagliato di come installarlo e configurarlo.

Un altro progetto simile (anche nel nome) è jquery lightbox plugin, il funzionamento è molto simile a quello di lightbox ma è un po' più leggero in termini di kb in quanto si basa su jquery e non su prototype.

Con la scusa di mostrare un esempio di utilizzo di lightbox eccovi un po' di foto del viaggio fatto a Maggio a New York:

Manca poco all'uscita di Eclipse Ganymede, programmata per il 25 giugno. Come le precedenti release Callisto e Europa anche Ganymede comprenderà sia la nuova versione di Eclipse che le nuove versioni dei principali plugin. Le novità introdotte non stravolgono lo sviluppo in java ma Ganymede rappresenta un notevole passo avanti nel supporto javascript, vediamo perchè.

Jawr è una libreria open source che permette di gestire in modo inteligente i file javascript e css usati all'interno di una web app java. In pratica fa quello che molti sviluppatori fanno con un task di ant: permette di creare bundle (ovvero insiemi di file) da utilizare all'interno di una pagina web. Mette a disposizione una tag library jsp per referenziare all'interno di una pagina direttamente il bundle e non i singoli file js o css. In base a delle impostazioni specificate in un file di properties è possibile riunire più file in uno solo, minimizzare i file javascript e addirittura comprimerli con gzip. I principali vantaggi nell'utilizzo di jawr sono:

• minor peso delle pagine dovuto alla minimizzazione e compressione dei dati
• minor numero di richieste da effettuare verso il server in quanto più file vengono raggruppati in un unico bundle
• controllo della cache del browser: jawr inserisce in automatico un parametro dell'url dei file in modo da non avere problemi di cache del browser. Tale parametro dipende, dalla versione 2.0 di jawr, da un codice hash generato a partire dal file

Dopo anni in cui javascript era considerato (almeno da me!) più che un linguaggio di programmazione un giocattolino con l'avvento di ajax javascript è diventato fondamentale per costruire siti interattivi. In questo tutorial vedremo come entrare nel mondo javascript (avendo comunque un background di programmazione) per poterlo usare in modo strutturato (anche object oriented) e per avere una base per utilizzare i vari framework tipo extJs, dojo, jquery, prototype e scriptaculous. Scopriremo che javascript non è un java in miniatura utilizzabile in una pagina html (sono l'unico che era convinto di questo?). Per provare i vari esempi di questo tutorial è consigliata l'installazione del plugin di firefox firebug che, oltre a un debugger javascript e a tante altre funzionalità utlissime, mette a disposizione una shell interattiva in cui è possibile eseguire codice javascript.

ExtJs (o qualunque altra libreria javascript) può essere usata in due modi diversi:

• usando poco codice html (per esempio un solo div) e aggiungendo i vari componenti direttamente in javascript
• in modo non intrusivo, ovvero definendo una normale pagina html e trasformando i vari componenti presenti nella pagina (campi di testo, combo, ...) in componenti ext

Il primo approccio è quello utilizzato solitamente in extJs, in questo tutorial vedremo invece un esempio di utilizzo non intrusivo di extJs per aggiungere la validazione lato client ad una form esistente.