Loading...
In questo articolo vedremo come utilizzare il framework JavaScript Ext JS, per costruire GUI (Graphical User interface) complesse per web application e per abilitare la tecnologia Ajax nelle nostre applicazioni Java o PHP. Il framework inoltre può essere utilizzato per modificare lo stile di una pagina web senza manipolare i file CSS e si integra perfettamente con altri framework JavaScript quali JQuery, Mootols e tanti altri.
In questo articolo vedremo come utilizzare il framework JavaScript Ext JS 4 per costruire GUI (Graphical User interface) complesse per web application e per abilitare la tecnologia Ajax nelle nostre applicazioni Java o PHP. Il framework inoltre può essere utilizzato per modificare lo stile di una pagina web senza manipolare i file CSS e si integra perfettamente con altri framework JavaScript quali JQuery, Mootols e tanti altri.
Il framework Ext JS è Open Source con licenza GPLv3.
Scarichiamo il framework Ext JS, giunto alla versione 4 nel momento in cui scriviamo all’indirizzo:
http://www.sencha.com/products/extjs/download/ext-js-4/173
Per i nostri esempio utilizzeremo come di consueto l’IDE Eclipse, di conseguenza la prima cosa dare è creare un progetto di tipo Web.
Dalla barra dei menu di Eclipse clicchiamo su File -> New -> Project…, nel wizard per il New Project, selezioniamo Web -> Dynamic Web Project:
Clicchiamo su Next si aprirà questo pannello:
Inseriamo in nome del nostro progetto e lasciamo il resto da Default
Diamo un nome al nostro progetto, scegliamo in Configuration lasciamo Default e clicchiamo su Next fino ad arrivare al tasto Finish (non dobbiamo includere alcuna libreria jar o Runtime particolare).
Creiamo una cartella js all’interno di WebContent e vi copiamo i file ext-all.js, ext-all-debug.js e bootstrap.js che sono presenti nel pacchetto ext-4.0.0-gpl.zip che abbiamo scaricato in precedenza.
Copiamo poi la cartella resources all’interno di WebContent, possiamo copiarci anche la cartella locale (che contiene le stringhe per la localizzazione) anche se al momento non la usiamo.
Otteniamo queste cartelle nel notro progetto:
La struttura del nostro progetto
Creiamo ora una pagina HTML5 nel nostro progetto, cliccando col tasto destro sulla cartella WebContent dello stesso e scegliendo poi New -> Other…, nella categoria Web selezioniamo HTML File e clicchiamo Next. Digitiamo ora il nome della pagina e continuiamo con Next, nella prossima schermata, tra i vari template, scegliamo New HTML5 Page.
La pagina viene ora aperta all’interno del nostro editor e mostra il seguente codice:
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </head> <body> </body> </html>
Come prima cosa da fare è includere i file necessaria al framework, essi sono essenzialmente due: un file css per lo stile della pagina e un file JavaScript che rappresenta la nostra libreria:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<!-- Includiamo il file CSS di Ext
questo deve venire prima di ogni altra inclusionde di file CSS -->
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<!-- Includiamo la libreria Ext, la versione di debug (ext-all-debug.js)
o quella di produzione (ext-all.js)-->
<script type="text/javascript" src="./js/ext-all-debug.js"></script>
<!-- Oppure includiamo la libreria Ext utilizzando il file bootstrap.js -->
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript">
//l'entry point della nostra applicazione
Ext.onReady(function(){
//creiamo un pannello con un titolo statico
Ext.create('Ext.panel.Panel', {
title: 'Hello World',
renderTo: Ext.getBody(),
width: 350,
height: 400
});
});
</script>
<title>Insert title here</title>
</head>
<body>
</body>
</html>
In primis includiamo le intestazioni css e JavaScript che servono al framework Ext JS.
Nell’esempio abbiamo dato due alternative: utilizzare il file ext-all-debug.js se siamo ancora in fase di sviluppo oppure ext-all.js se siamo in produzione.
Esiste una comoda soluzione che prevede di includere un altro file di nome bootstrap.js il quale caricherà automaticamente il file ext-all-debug.js se sono verificate una di queste 3 condizioni:
- l’hostname corrente è localhost
- l’hostname corrente è un indirizzo IP v4
- il protocollo corrente è “file:”
altrimenti viene caricata la libreria di produzione ext-all.js.
Successivamente abbiamo creato un pannello utilizzando le API di Ext JS, con titolo ‘Hello World’ e posizionato nel tag body (utilizzando la funzione getBody()).
Questo pannello è creato dopo la chiamata ad Ext.onReady, dove Ext è il namespace globale che incapsula tutte le classi del framework (oggetto globale), questa chiamata assicura tutti gli script sono stati caricati, prevenendo eventuali errori di dipendenza (classi non caricate).
Subito dopo creiamo il pannello, utilizzando la funzione create della classe Ext.ClassManager, la quale crea degli oggetti utilizzando il nome della Classe base, nel nostro caso Ext.panel.Panel. Nelle precedenti versioni del framework veniva invece utilizzato il meccanismo del new.
Nel prossimo articolo vedremo come far dialogare una nostra applicazione Ext JS con un componente lato Server di tipo Java, utilizzando il protocollo Ajax.
Riferimenti:
Sito web di Ext JS 4: http://www.sencha.com/products/extjs/
COMMENTS