Ext.js (http://extjs.com/) è un framework Javascript utile a realizzare GUI complesse per web application, ma non solo. Con Ext.js (da qui in avanti solo Ext) possiamo creare pagine con layout avanzati anche se non possediamo particolari competenze CSS; possiamo agganciare funzionalità AJAX di aggiornamento per le nostre interfacce; creare moduli wizard o textarea con testo enriched (formattato come lo formatterebbe un programma di videoscrittura); agganciare le nostre web application a ulteriori strumenti (MooTools, JQuery, Prototype, Google Gears e molti altri) in modo da avere rapidamente software decisamente vicini alle applicazioni desktop con cui lavoriamo quotidianamente.
L'elenco delle possibilità che ci apre la conoscenza di Ext potrebbe estendersi ben oltre le righe di questo articolo, pertanto lo scopo di queste pagine sarà ristretto a fornire una panoramica di tutte le potenzialità che questo tool ci offre. Cercherò di trasmettere l'entusiasmo che si prova nel completare in pochi semplici passi le prime interfacce applicative, andando ben oltre i consueti 'Hello World' d'esordio di un manuale, rendendo così i lettori capaci di leggere e interagire con le GUI Ext.
Creeremo insieme, in pochi minuti, una home completa per un prodotto o un sito, utilizzando Ext. Sfrutteremo poi lo stesso esempio per andare avanti nei prossimi articoli, in modo da arrivare a realizzare la nostra riserva applicativa personale. (ecco l'esempio).
Gli standard e la licenza
La programmazione delle pagine che utilizzano Ext segue gli standard ormai largamente diffusi nell'ambiente Web 2.0. Pertanto gli script Javascript seguono le tecniche dell'OOP (Object Oriented Programming), si fa largo uso di tecniche AJAX, di lettura e gestione DOM e di oggetti JSON. Ciò nonostante, per riuscire ad avere fin da subito risultati più che soddisfacenti, non è necessario avere delle profonde conoscenze di Javascript, ma basta procedere con una logica semplice nelle proprie interfacce. Una volta compresa la forma con cui vengono costruiti pannelli e finestre, si riuscirà facilmente a creare pagine e applicazioni complesse e pulite. Le conoscenze in ambito DHTML e CSS sono utili, ma non indispensabili, dato che Ext provvede da sé a collocare e gestire in maniera ordinata i diversi layer che compongono la nostra pagina.
Le varietà di GUI che possiamo realizzare è pressoché infinita, come abbiamo detto all'inizio di questo articolo. Possiamo comporre tra loro tutti gli elementi che siamo soliti utilizzare nelle applicazioni desktop, nessuno escluso, e forse qualcosa di più. Abbiamo: menu, tab, accordion, pannelli, finestre, form, griglie, barre di splitting, toolbar, slider, status bar, progress bar, message window, tree. Sfruttare layout, utilities sugli oggetti e molto altro ancora. Proseguendo nella lettura di questa introduzione a Ext, vedremo esempi che ci sorprenderanno per la loro semplicità e completezza.
Un tool indispensabile nella creazione di pagine HTML che sfruttano framework Javascript di ultima generazione è FireBug. Il codice che viene utilizzato negli script Ext è pulito, comprensibile e privo di eccezioni. Ext è (come MooTools e altri software simili) in grado di guidare il programmatore nella creazione di interfacce prive di errori che FireBug traccerebbe.
Un codice pulito, la ricchezza di interfacce proposte, la completa compatibilità con tutti i browser e con gran parte degli altri framework Javascript attualmente in distribuzione hanno reso Ext uno strumento adottato da grandi gruppi per fornire una rich client interface alle proprie componenti.
Vediamo quindi in circolazione ottime soluzioni PHP, Coldfusion, o per il recente e già largamente diffuso AIR di Adobe; ma soprattutto meritano menzione l'adozione di GWT di una interfaccia basata su Ext e la facilità con cui si possono integrare applicazioni Ext con Google Gears. Negli articoli che seguiranno questa prima introduzione entreremo nel dettaglio di ogni soluzione in modo da fornire il lettore di un bagaglio di conoscenze utili a scegliere la migliore delle soluzioni a seconda delle architetture che si troverà di fronte.
Prima di passare all'esempio pratico è buona norma leggere le licenze dei prodotti open source che si vanno ad utilizzare. Nella sua nuova release (la 2.1) , Ext è passato alla versione GPL 3. Bisogna pertanto pensare che per sviluppare prodotti open source o per scopi personali non si ha l'obbligo di acquisto del framework, ma basta citarne l'utilizzo. Per poter inserire Ext in prodotti che commercializziamo dobbiamo provvedere all'acquisto della libreria, tenendo comunque conto che il costo è veramente molto ridotto rispetto al servizio di assistenza e all'ausilio nello sviluppo che ci viene offerto.
Passiamo ai fatti
Ormai siamo curiosi di andare avanti e vedere quanto di ciò che abbiamo detto fino ad ora corrisponde al vero. Pertanto andremo sul sito Ext e visiteremo la sezione Download. Qui potremo decidere se scaricare subito Ext.js completo di sorgenti, esempi e documentazione (scelta che raccomando ai newbie), o se passare alla costruzione del nostro personale pacchetto Ext. In ogni caso consiglio di visionare quanto meno la possibilità di costruirsi il proprio pacchetto, in quanto è interessante vedere e lasciarsi ispirare dal wizard di download costruito tramite Ext stesso.
Oltre alle due versioni di download troviamo un terzo utile link: la documentazione Ext basata su AIR. Come anticipato prima, avremo modo di vedere più in profondità applicazioni complete basate su Ext, ma già questa documentazione da poter visionare offline fornirà ai lettori più curiosi e impazienti, la possibilità di vedere come risultano gradevoli le applicazioni Ext/AIR.
Ora abbiamo Ext sul nostro pc e, attenendoci ai limiti e ai propositi di questo articolo, vogliamo finalmente vedere quanto sia realmente semplice e quali sono le possibilità di questo tool senza, per il momento, considerare architetture complete di server side. Andiamo quindi a visionare la directory examples. Qui troviamo esempi che soddifano le nostre esigenze, in quanto partiamo da semplici pannelli a web os senza troppa difficoltà. Ma per prendere possesso dello strumento che abbiamo tra le mani dobbiamo cominciare a scrivere qualche riga che ci dia la soddisfazione iniziale di un'interfaccia di media complessità e ci induca a continuare.
Creiamo una cartella allo stesso livello di dove abbiamo posizionato la cartella 'ext'. Inseriamo una pagina di nome esempio.html e apriamo un qualsiasi editor di testo dove trascriveremo il codice HTML che segue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>EXAMPLE 1. SIMPLE EXT GUI...</title> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext/ext-all.js"></script> </head> <body> <div style="width:100%;height:100%;"> <div style="width:50%;background:#9e9efe;"> <h1>BANNER DEL MIO PRODOTTO</h1></div> <div id="content" ></div> </div> <script type="text/javascript" src="js/esempio.js"></script> </body> </html>
Se dovessimo pensare di costruire una home page senza scrivere una riga di CSS, che sia gradevole, che funzioni su ogni browser, che presenti quattro tab e una barra di navigazione o di news che goda di funzionalità di close and expand, potremmo pensare di impiegare almeno mezza giornata di sviluppo e debugging. Eppure nelle poche righe che abbiamo appena scritto abbiamo già messo tutto quello che serve. Gran parte del lavoro è infatti svolto da Ext e dalla sua capacità di gestire in maniera pulita il codice Javascript non intrusivo. Pertanto, aver incluso la terna minima per sviluppare con Ext (ext-all.css, ext-base.js, ext-all.js) ci aiuta ad impostare la nostra pagina perché possa usare a pieno le potenzialità del framework.
Nelle ultime righe del nostro codice HTML abbiamo istruito il browser perché vada a leggere il codice Javascript che si trova nel file js/esempio.js. Creiamo quindi una cartella 'js' dentro alla cartella in cui abbiamo inserito il file esempio.html, e inseriamo al suo interno un file esempio.js.
Il codice che scriveremo nella nostra pagina è reperibile qui. Le righe che, per questa volta, analizziamo a fondo, sono solo queste:
var tabs = new Ext.TabPanel({
region: 'center',
margins:'3 3 3 0',
activeTab: 0,
defaults:{autoScroll:true},
bodyStyle:"background:#efefff",
items:[
{
title: 'Primo tab',
bodyStyle:"background:#efefff",
layout:'fit',
html: '<div>contenuto primo pannello</div>'
},{
title: 'Secondo tab',
bodyStyle:"background:#efefff",
layout:'fit',
html: '<div>contenuto secondo pannello</div>'
},{
title: 'Terzo tab',
bodyStyle:"background:#efefff",
layout:'fit',
html: '<div>contenuto terzo pannello</div>'
},{
title: 'Quarto tab',
bodyStyle:"background:#efefff",
layout:'fit',
html: '<div>contenuto quarto pannello</div>'
}]
});
Come vedete questo è normalissimo codice JSON che Ext interpreta e rende in maniera piuttosto intuitiva. Andiamo a leggere quanto abbiamo descritto nell'oggetto tabs. La variabile tabs conterrà un pannello adatto a mostrare ogni suo elemento come una tab/scheda (Ext.TabPanel).
Questo contenitore di tab sarà posizionato nella regione centrale di un pannello che avrà un layout di tipo BorderLayout (analizzeremo nei prossimi articoli i layout). Abbiamo descritto i margini che dovrà mantenere tabs, nella pagina, e istruito il browser perché renderizzi la prima tab come attiva (activeTab:0).
Abbiamo descritto alcune caratteristiche grafiche delle nostre tab e poi abbiamo inserito direttamente nell'array items, le quattro schede e i relativi codici HTML, con layout 'fit', in modo che il contenuto della tab riempia tutta l'area a disposizione. Il risultato è il seguente.
Concludendo
Abbiamo rispettato il nostro obiettivo e realizzato fin da subito qualcosa che va oltre i classici Hello World degli inizi. Nei prossimi articoli impareremo a applicare diversi temi e colori alle nostre applicazioni, a leggere le API e usare la localizzazione, a sfruttare al meglio la community, i plugin e gli extra e a progettare le nostre GUI come fino ad ora il web non ci aveva mai concesso di fare.
