Introduzione
ExtJS è un prodotto JavaScript che può avere una doppia definizione. È infatti catalogabile all'interno di queste due categorie di software:
- libreria grafica: in quanto presenta notevoli componenti grafici (griglie di dati, finestre, alberi, bottoni, form) che permettono di arricchire sia dal punto di vista delle funzionalità offerte che del look&feel le nostre applicazioni web;
- framework: in quanto sono presenti una moltitudine di funzionalità che arricchiscono Javascript offrendo sia un supporto cross-browser sia l'utilizzo di tecniche di programmazione altrimenti impensabili (programmazione ad oggetti, programmazione ad eventi in primis).
Data questa premessa, mi riferirò a ExtJS sia utilizzando il termine "libreria" sia "framework" proprio per non dimenticare questa doppia natura del progetto. L'ultima versione di questa libreria attualmente è la 3.0.3 ed è stata rilasciata il 6 luglio 2009. Sul sito ufficiale è possibile scaricare i sorgenti dell'applicazione, visitare l'attivissimo forum, navigare tra le API della piattaforma e leggere interessanti articoli sul blog ufficiale.
Sulla questione della scelta della licenza d'uso si è molto discusso all'interno del forum. Attualmente ExtJS è fornito con una doppia licenza:
- GPL 3.0: il framework è scaricabile liberamente ma dovrà essere utilizzato in applicazioni rilasciate con la stessa licenza;
- Commerciale: a fronte di un pagamento di una cifra (variabile sulla base del numero di sviluppatori coinvolti) sarà possibile utilizzare ovunque il framework, accedere ad un'area riservata del forum ed ottenere subito eventuali bugfix tramite l'accesso diretto al server subversion (cosa altrimenti non possibile). Con la versione commerciale sarà possibile accedere a un insieme di servizi di consulenza, acquistabili anche separatamente.
Per chi inizia a lavorare con questa libreria è consigliabile affidarsi alla licenza GPL, almeno per i primi approcci e lo studio, per poi passare alla versione commerciale soprattutto per l'accesso al repository SVN e per avere "in anteprima" eventuali correzioni di problemi.
I principali vantaggi
ExtJS è senza dubbio una delle più conosciute librerie grafiche presenti nel panorama Web. Esaminiamo alcuni dei fattori che ne hanno facilitato il successo. Sembrerà banale ma ExtJS presenta un'interfaccia gradevole alla vista, molto usabile e personalizzabile (sono molti i temi di terze parti scaricabili): fattori per nulla trascurabili quando si ha a che fare con persone esterne all'ambito strettamente informatico.
Inoltre è una libreria completamente orientata agli oggetti. Tutto in ExtJS è un oggetto con propri attributi e metodi richiamabili come qualsiasi altro linguaggio con queste caratteristiche. Questo permette di avere codice ordinato, pacchettizzato e di non perdersi tra il disordine che Javascript spesso genera data la sua alta flessibilità.
Come ultimo punto di forza segnaliamo la gestione degli eventi: grazie alla presenza di eventi personalizzati, abbiamo la possibilità di avere componenti grafici tra loro indipendenti, ma che riescono ad interagire semplicemente con il resto dell'applicazione permettendo un'integrazione dei dati e delle informazioni.
I principali svantaggi
Tutto questo non è però tutto oro colato: ExtJS ha delle pecche per il momento non completamente trascurabili che possono in qualche modo limitare, anche se di poco, la sua crescita.
L'elevata curva di apprendimento del framework è sicuramente un ostacolo notevole che spesso può frenare sviluppatori alle prime armi. Una volta però entrati nella logica dello sviluppo, ExtJS sarà senza dubbio in grado di far togliere non poche soddisfazioni.
Il secondo e ultimo difetto è quello per il quale ci si può fare ben poco, soprattutto vista la situazione attuale degli strumenti di navigazione del web. ExtJs è un framework pesante, che occupa molte risorse e che alla lunga può risultare frustrante soprattutto utilizzato in browser non più recenti e con motori JavaScript non altamente performanti. La speranza è quella di vedere sempre di più limarsi questo difetto grazie ai futuri rilasci di nuovi browser con motori di scripting sempre più performanti. La stessa applicazione su Google Chrome e su Internet Explorer 6 presenta differenze dal punto di vista delle performance a dir poco notevoli.
Progetti alternativi
ExtJS è attualmente affiancato da 2 progetti, sempre sviluppati dallo stesso team, che si occupano di offrire un prodotto il più completo possibile.
Ext Core
Ext Core integra tutte quelle funzionalità che permettono ad ExtJS di essere definito anche come una libreria: strumenti per la comunicazione AJAX, per modificare il DOM della pagina, per arricchire gli oggetti base Javascript come Array e Date e ulteriori facilità. Il progetto è scaricabile ed utilizzabile liberamente ed indipendentemente dalle componenti strettamente grafiche di ExtJS.
A differenza del framework principale, Ext Core è liberamente utilizzabile grazie alla licenza MIT. Il sito ufficiale del progetto è http://www.extjs.com/products/extcore/.
Ext GWT
Ext GWT è una libreria Java sviluppata sulla piattaforma Google Web Toolkit. Essa permette di creare interfacce web sfruttando la potenza di ExtJS utilizzando però il diffusissimo linguaggio di programmazione Java. Supporta la versione 1.5 del linguaggio e, come per il framework principale scritto in Javascript, presenta due diverse licenze: open source e commerciale.
Il sito ufficiale della libreria è: http://www.extjs.com/products/gwt/.
JSBuilder
JSBuilder è uno strumento a linea di comando disponibile per qualsiasi piattaforma in quanto sviluppato anch'esso in Java. Configurabile tramite file JSB, permette di minimizzare e deployare direttamente le risorse web necessarie (principalmente file JS e CSS). Si appoggia alla famosa libreria YUI Compressor.
Il sito ufficiale del progetto è http://www.extjs.com/products/jsbuilder.
HelloWorld!
Dopo una prima piccola parte teorica, introduciamo brevemente alcune funzionalità del framework per ingolosire maggiormente il lettore curioso che non conosce ancora niente del framework ExtJS.
I due esempi che seguiranno presenteranno una fondamentale differenza. Il primo definirà un'interfaccia web utilizzando solamente ExtJS quindi senza usare particolari tag HTML ma sfruttando solamente la potenza di Javascript. Il secondo invece permetterà di integrare la libreria in una pagina la cui struttura è stata precedentemente definita in HTML.
ExtJS come libreria stand-alone
In questo piccolo esempio creeremo la struttura base dell'applicazione all'interno della quale inseriremo tutti i nostri componenti. Lo scheletro dell'applicazione viene definito come un oggetto Viewport. Ciascuna applicazione realizzata in ExtJS non potrà avere più di un Viewport.
La struttura sarà simile a quella riportata da questo screenshot:
Ecco ora il codice:
<html>
<head>
<script src="../ext-base.js" type="text/javascript"></script>
<script src="../ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/ext-all.css"></link>
<script type="text/javascript">
var viewport;
Ext.onReady(function() {
viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
title: 'Nome dell'applicazione',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Menu',
width: 200
}, {
region: 'south',
title: 'Informazioni sullo stato',
html: 'Applicazione avviata alle ore 10.00',
split: true,
height: 100,
minHeight: 100
}, {
region: 'east',
title: 'Pannello laterale',
collapsible: true,
split: true,
width: 200,
html :"Contenuto del pannello laterale"
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab:0,
items: [{
title: 'Tab1',
html: 'Contenuto del tab 1'
},{
title: 'Tab2',
html: 'Contenuto del tab 2'
},{
title: 'Tab3',
html: 'Contenuto del tab 3'
}]
}]
});
});
</script>
</head>
<body></body>
</html>Innanzitutto vengono importati i file necessari (ext-base.js, ext-all.js ed ext-all.css) e successivamente definiamo una funzione generica da passare al metodo Ext.onReady che si occuperà di eseguire il codice al completamento del rendering della pagina.
Il codice eseguito non è che una semplice instanziazione di un oggetto Ext.Viewport a partire da una serie di parametri tra di loro indentati in più oggetti di configurazione. Alcune di queste sono comprensibili anche a chi non mastica l'inglese mentre altre sono più complesse. Approfondiremo questi aspetti successivamente, per ora accontentiamoci di aver configurato ed avviato la prima applicazione con ExtJS.
ExtJS partendo dall'HTML
Non sempre è possibile riscrivere un intero prodotto da zero; spesso ci troviamo nella situazione di dover integrare un nuovo componente in un'architettura già pronta e funzionante. ExtJS è in grado di fare anche questo: basta renderizzare un particolare componente grafico realizzato con il framework all'interno di un elemento HTML esistente tramite il metodo render.
Nell'esempio realizzeremo un semplice form (per ora senza bottoni di submit) all'interno di un div già presente nel markup della pagina.
Anche in questo presentiamo uno screenshot:
Ecco il codice:
<html>
<head>
<script src="../ext-base.js" type="text/javascript"></script>
<script src="../ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/ext-all.css"></link>
<script type="text/javascript">
var formPanel;
Ext.onReady(function() {
formPanel = new Ext.form.FormPanel({
title: "Il mio primo form",
frame: true,
items: [{
xtype: 'textfield',
name: 'nome',
width: 300,
fieldLabel: "Nome"
},{
xtype: 'textfield',
name: 'cognome',
width: 300,
fieldLabel: "Cognome"
},{
xtype: 'textfield',
name: 'email',
width: 300,
fieldLabel: "Email"
}],
buttons: [{
text: 'show',
handler: function() {
alert("Il tuo nome: "+formPanel.getForm().getValues().nome);
}
}]
});
formPanel.render("form-container");
});
</script>
</head>
<body>
<div id="form-container" style="width: 600px; height: 400px;position:absolute;top:100px;left:200px;"></div>
</body>
</html>Anche in questo caso all'interno della funzione passata come parametro a Ext.onReady definiamo un oggetto di tipo Ext.form.FormPanel configurandolo tramite un oggetto di tipo complesso contenente tra i suoi attributi items (che contiene l'elenco dei campi del form) e buttons (con la relativa funzione handler). Una volta istanziato l'oggetto invochiamo il metodo render passandogli come parametro l'id dell'elemento HTML che dovrà contenere il componente.
Rispetto all'esempio di prima, ora dobbiamo manualmente forzare il render (tramite appunto il metodo render). Questo perché per gli oggetti di tipo Viewport, in quanto particolari e unici per l'applicazione, il render avviene in automatico in fase di instanziazione all'interno del body della pagina.
Conclusioni
Per ora è tutto. Spero di avervi incuriosito riguardo al framework ExtJS. In questo primo articolo sono stato appositamente abbastanza sintetico nella spiegazione degli esempi per il semplice fatto che dovevano essere semplicemente un antipasto dei prossimi articoli e una sorta di dimostrazione delle potenzialità di ExtJS.
I sorgenti delle prove realizzate in questo articolo li trovate in questo pacchetto zip.
Come al solito se qualcuno è interessato a studiare meglio o modificare gli esempi non posso che segnalare la documentazione ufficiale disponibile sul sito del framework.
