JavaScript amplia il campo di applicazione: dalle pagine Web tradizionali, si passa allo sviluppo di applicazioni mobile e lato server e non è detto che le esigenze nei diversi ambiti non possano essere soddifatte da un solo framework.
È quanto si propone di fare qooxdoo, un progetto attivo da diversi anni, ma che non ha goduto della risonanza mediatica di altre librerie, probabilmente perché richiede competenze più da sviluppatore che da Web designer.
Si tratta di un framework completo per lo sviluppo sia di pagine Web tradizionali, sia di applicazioni con interfacce grafiche in stile desktop, applicazioni mobile compatibili con le più diffuse piattaforme e applicazioni server per Node.js e Rhino.
In questo articolo esamineremo le principali funzionalità offerte dal framework nei quattro ambiti applicativi.
Struttura del framework
Il framework è organizzato in modo da fornire funzionalità selettive per ciascuno dei quattro ambiti applicativi citati: pagine Web, applicazioni con interfaccia di tipo desktop, applicazioni mobile e applicazioni server. È possibile scaricare dal sito del sito il pacchetto adeguato al tipo di applicazione che vogliamo realizzare. Ciò consente di minimizzare il peso del pacchetto da includere nell'applicazione evitando di portarsi dietro codice non strettamente necessario.
I quattro pacchetti previsti dal framework sono:
Pacchetto | Descrizione |
---|---|
qx.Website | adatto per realizzare pagine Web tradizionali: fornisce funzionalità di manipolazione del DOM e di astrazione del browser come le più diffuse librerie JavaScript |
qx.Desktop | questo pacchetto consente lo sviluppo di rich client basati su tecnologie Web ma con un aspetto grafico simile alle applicazioni desktop; oltre a contenere le funzionalità presenti in qx.Website , esso contiene un sistema per la creazione di temi grafici ed un ricco insieme di widget come pulsanti, menu, toolbar, finestre di dialogo, etc. |
qx.Mobile | con questo pacchetto è possibile realizzare applicazioni ottimizzate per il mobile, grazie a widget specifici e un sistema per la creazione di temi grafici |
qx.Server | è il pacchetto per realizzare applicazioni lato server in ambienti come Node.js e Rhino, ma può essere utilizzato in altri contesti come ad esempio per realizzare Web Worker HTML5 |
Insieme al codice, rilasciato con doppia licenza LGPL ed EPL, sono disponibili un insieme di tool di supporto allo sviluppo come un ambiente di unit test integrato, un ambiente di simulazione dell'interazione utente, utility per la compilazione e compressione del codice e per il deployment delle applicazioni. Il tutto costituisce un vero e proprio SDK pensato per
sviluppare applicazioni in maniera professionale e standardizzata.
Nel seguito esploreremo singolarmente ciascun pacchetto e vedremo alcuni esempi di utilizzo delle funzionalità messe a disposizione per ciascun ambito applicativo.
Iniziamo questo percorso esaminando la creazione di pagine Web Con Qooxdoo
Creare pagine Web con Qooxdoo
Il pacchetto qx.Website è pensato per semplificare la creazione di pagine Web fornendo
funzionalità per la manipolazione del DOM ed un supporto cross-browser per la gestione degli eventi.
Il suo utilizzo richiede il riferimento ad un singolo file JavaScript come nel seguente esempio:
<script type="text/javascript" src="js/q-2.0.2.min.js"></script>
L'inclusione della libreria mette a disposizione l'oggetto globale q che consente l'accesso agli elementi del DOM della pagina corrente. Così, ad esempio, il seguente codice
q("#divMessage")
.setHtml("Hello World!")
.setStyle("color", "red");
individua un elemento con id
uguale a divMessage
, imposta la stringa "Hello
" come suo contenuto assegnandole il colore rosso. Internamente
World!qooxdoo
utilizza lo stesso selector engine
di jQuery, quindi l'approccio sintattico è abbastanza comune e non dovrebbe porre particolari complessità.
Come in jQuery, anche qooxdoo presenta l'evento ready da utilizzare per avviare il nostro codice solo ad avvenuto caricamento del documento e della libreria:
q.ready(function()
{
//inizializzazione
});
Le funzionalità di qx.Website
sono suddivise in moduli
che offrono supporto per diversi tipi di attività: dalla creazione di effetti di animazione all'accesso alle informazioni sul browser,
dalla gestione di template allo scambio di dati con il server alla gestione dei cookie.
Un modulo è accessibile come un namespace dipendente dall'oggetto globale, così ad esempio per accedere alle funzionalità di comunicazione con il server facciamo riferimento a q.io mentre se abbiamo necessità di accedere alle caratteristiche del browser faremo riferimento a q.env.
q.io, gestire la comunicazione con il server
Per rendere l'idea del tipo di funzionalità disponibili facciamo qualche semplice esempio, come quello mostrato di seguito che individua le informazioni principali sul browser e dispositivo corrente:
q("#divEnvData")
.setHtml("Engine name: " + q.env.get("engine.name") + "<br>" +
"Engine version: " + q.env.get("engine.version") + "<br>" +
"Browser name: " + q.env.get("browser.name") + "<br>" +
"Browser version: " + q.env.get("browser.version") + "<br>" +
"Device type: " + q.env.get("device.type") + "<br>" +
"Device name: " + q.env.get("device.name") + "<br>");
Il seguente esempio mostra come utilizzare il metodo xhr() del modulo q.io
per inviare una richiesta HTTP al server:
q.io.xhr('data.json')
.on("loadend", function(data) {alert(data.responseText)})
.send();
});
Il modulo q.io
fornisce anche metodi per effettuare richieste cross-domain via JSONP e via script.
q.template, il template engine di qooxdoo
Come la maggior parte delle recenti librerie e framework JavaScript, anche qooxdoo supporta i template per il rendering dinamico di stringhe. Il meccanismo di templating è implementato nel modulo q.template ed usa mustache.js come motore interno. Ad esempio, il seguente codice visualizza genera la stringa "Il mio nome è James
Bond":
var template = "Il mio nome è {{name}} {{surname}}!";
var view = {name: "James", surname: "Bond"};
q("#divTemplateMessage")
.setHtml(q.template.render(template,
view));
È inoltre supportata la possibilità di sviluppare plugin accessibili all'interno del framework con lo stesso meccanismo dei moduli, ma rimandiamo l'approfondimento di queste funzionalità ad un altro articolo. Scopriamo invece come utilizzare l'SDK
Utilizzare l'SDK
Come abbiamo potuto vedere, l'utilizzo di qooxdoo per la creazione di pagine Web tradizionali è abbastanza simile a quello della maggior parte delle librerie JavaScript disponibili oggi. Tuttavia, per lo sviluppo di applicazioni con interfaccia grafica in stile desktop e mobile occorre utilizzare un ambiente più complesso della semplice libreria qx.Website
.
Il framework prevede un vero e proprio SDK che contiene il codice necessario per implementare interfacce grafiche avanzate e un insieme di strumenti per la gestione del progetto.
Innanzitutto occorre evidenziare che gli strumenti dell'SDK utilizzano script Python, quindi è necessario installare sulla propria piattaforma di sviluppo (Windows, Linux o Mac) un interprete di questo linguaggio.
Da sottolineare che l'SDK è necessario esclusivamente per lo sviluppo delle applicazioni, mentre esso non è necessario sul server di pubblicazione, in particolare non è necessaria la presenza di Python.
Una volta scaricato e decompresso l'SDK per il tipo di applicazione che vogliamo implementare, è opportuno impostare il percorso alla cartella tool/bin
nella variabile di sistema PATH. In questo modo avremo accesso diretto agli strumenti per la creazione, compilazione e debug delle applicazioni.
Ad esempio, il seguente comando lanciato dalla shell di sistema creerà la struttura di un progetto qooxdoo per un'applicazione di nome myApp
:
create-application.py --name=myApp
Il risultato sarà una cartella denominata myApp
con una struttura di file e sottocartelle analoga a quella mostrata nella seguente figura:
La cartella source
contiene un file index.html
rappresentante una pagina HTML vuota che fa riferimento ad un file JavaScript, myapp.js
, presente nella cartella source/script
. Questo è uno script generato e gestito automaticamente dall'SDK che ha il compito di caricare a runtime gli script dell'applicazione.
Tra le altre cose generate dal SDK per la nostra applicazione c'è lo script Python generate.py
. È questo lo script che dovremo lanciare per generare la versione di sviluppo o di produzione della nostra applicazione. Le seguenti istruzioni eseguite dalla shell di sistema, infatti, generano il codice necessario allo sviluppo della nostra applicazione:
cd myApp
./generate.py
In una nuova applicazione esso crea una semplice pagina con un pulsante cliccando il quale viene visualizzato il classico messaggio Hello world!
Sostanzialmente questo comando ha il compito di analizzare le classi che costituiscono l'applicazione e generare il codice e i moduli di qooxdoo
necessari per la relativa esecuzione.
L'applicazione vera e propria viene creata andando ad estendere la classe definita nel file Application.js
sotto la cartella source/class/myapp
, come vedremo tra un po'.
Una volta creata la nostra applicazione lanciamo la seguente istruzione dalla shell di sistema per generare la sua versione pubblicabile:
cd myApp
./generate.py build
Verrà creata una cartella build
contenente la versione ottimizzata e compressa della nostra applicazione, pronta per essere pubblicata.
Oltre a quanto sinteticamente descritto, l'SDK mette a disposizione altri elementi interessanti che non possiamo approfondire in questa sede, come uno schema per gli Unit test, uno schema per le interazione simulate tra utente e applicazione, il supporto per la localizzazione, etc.
Supporto OOP
Mentre l'approccio allo sviluppo supportato dal pacchetto qx.Website è sostanzialmente analogo a quello della maggior parte delle librerie JavaScript, per la realizzazione di applicazioni con interfaccia di tipo desktop o mobile, l'approccio proposto da qooxdoo è alquanto diverso. L'utilizzo dei pacchetti qx.Desktop
e qx.Mobile
propongono un approccio incentrato quasi esclusivamente su JavaScript, sminuendo di molto il compito di HTML e CSS, che si limitano a rappresentare un aggancio tra l'applicazione JavaScript ed il browser.
Questo è il motivo principale per cui in qooxdoo
la programmazione orientata agli oggetti ha un ruolo così importante, tanto da offrire un supporto molto avanzato molto vicino a quello dei linguaggi di programmazione più evoluti.
In qooxdoo possiamo definire una classe tramite il metodo define()
del modulo Class
, come mostrato nel seguente esempio:
qx.Class.define("myApp.cerchio",
{
members:
{
raggio: VALUE,
circonferenza: function() {...},
area: function() {...}
}
});
Il codice definisce una classe indicando come primo argomento il nome e come secondo argomento la definizione vera e propria. Nel caso specifico abbiamo definito la classe myApp.cerchio
con un membro che rappresenta il raggio e due metodi che calcolano la circonferenza e l'area. Il seguente codice è un esempio di utilizzo della nostra classe:
var cerchio = new myApp.cerchio;
cerchio.raggio = 3;
alert("La circonferenza di un cerchio di raggio 3 è " + cerchio.circonferenza());
Le possibilità di definizione di una classe sono diverse. È possibile, ad esempio, derivare una classe da un'altra come mostrato di seguito:
qx.Class.define("myApp.cerchioColorato",
{
extend: myApp.cerchio,
members: {
raggio: VALUE,
circonferenza: function() {...},
area: function() {...}
}
});
Definire un costruttore e un distruttore:
qx.Class.define("myApp.cerchioColorato",
{
construct: function() {...},
destruct: function() {...}
...
});
Invocare il costruttore della classe base:
qx.Class.define("myApp.cerchioColorato",
{
construct: function() {
this.base(arguments);
...
}
...
});
Creare proprietà impostando dei vincoli sui valori che può assumere:
qx.Class.define("myApp.cerchioColorato",
{
properties:
{
raggio: {init:0, check: "Integer"}
}
...
})
La definizione del raggio come proprietà genera automaticamente due metodi con cui potervi accedere, getRaggio()
e setRaggio()
, imposta il valore iniziale a zero e vincola il
tipo di dato a intero.
La possibilità di sfruttare la programmazione ad oggetti è molto ampia. È possibile creare classi statiche e astratte, singleton, interfacce e mixin per creare applicazioni con un'architettura strutturata. Per l'approfondimento di questi argomenti si rimanda alla documentazione ufficiale.
Nella parte successiva dell'articolo vedremo come creare un Web client in stile desktop con Qooxdoo.
Creazione di Web client in stile desktop
Come abbiamo più volte accennato, il pacchetto qx.Desktop consente di realizzare applicazioni JavaScript con una interfaccia utente simile a quella dell'ambiente desktop. L'approccio utilizzato da qooxdoo prevede la definizione di ogni aspetto dell'applicazione tramite l'implementazione di classi, senza fare affidamento sull'HTML.
Per comprendere i principi di base per la realizzazione di un'applicazione qooxdoo
creeremo una semplice pagina Web che prende in input il valore del raggio di un cerchio e fornisce in output il valore della relativa circonferenza e dell'area.
Dopo aver generato lo scheletro della nostra applicazione tramite i comandi create-application.py
e generate.py
dell'SDK, apriamo con un editor di testo il file Application.js
sotto la cartella myApp/source/class/myapp
. Il suo contenuto sarà analogo a quanto mostrato di seguito:
qx.Class.define("myapp.Application", {
extend : qx.application.Standalone,
members :
{
main : function()
{
this.base(arguments);
if (qx.core.Environment.get("qx.debug"))
{
qx.log.appender.Native;
qx.log.appender.Console;
}
// Il nostro codice inizia da qui
...
}
}
});
Esso definisce la classe myapp.Application
derivante dalla classe predefinita qx.application.Standalone. Questa classe base rappresenta proprio il tipo di applicazione che non fa uso di codice HTML.
L'unico membro implementato nella nostra classe è il metodo main() che viene automaticamente eseguito in fase di inizializzazione del framework. Esso presenta una serie di istruzioni che preparano l'ambiente per l'eventuale debug a cui seguiranno le istruzioni specifiche della nostra applicazione. Normalmente il metodo main()
viene utilizzato per inizializzare l'interfaccia utente e per caricare i dati di cui ha bisogno l'applicazione.
q.ui, l'interfaccia utente i Widget
Iniziamo quindi ad inserire le istruzioni che ci consentono di creare l'interfaccia utente:
var lblMessage = new qx.ui.basic.Label();
var txtRaggio = new qx.ui.form.TextField();
var lblCirconferenza = new qx.ui.basic.Label();
var lblArea = new qx.ui.basic.Label();
var btnCalcola = new qx.ui.form.Button("Calcola");
var doc = this.getRoot();
Queste dichiarazioni creano le istanze dei vari widget da visualizzare sulla pagina dell'applicazione.
I widget sono gli elementi di base per la realizzazione di interfacce grafiche in
qooxdoo. Ciascun componente dell'interfaccia, come un pulsante, una casella di testo o una finestra rappresenta un widget che, nella gerarchia di oggetti prevista dal pacchetto qx.Desktop
, è una sottoclasse della classe base Widget
. Questo implica naturalmente che è possibile creare un widget personalizzato derivandolo da questa classe base.
I widget sono accessibili tramite il modulo qx.ui e sono organizzati in sottomoduli. Ad esempio, il sottomodulo qx.ui.basic
contiene alcuni widget
di base come etichette (Label
) e immagini (Image
).
Il sottomodulo qx.ui.form contiene i classici elementi presenti in un form, come caselle di testo (TextField
), pulsanti (Button
), caselle per la selezione di date (DateField
), ecc.; qx.ui.menu
contiene elementi per la creazione di menu e così via.
Tornando al nostro esempio, abbiamo creato tre etichette, una casella di testo e un pulsante con la scritta Calcola
. L'ultima istruzione, invece, acquisisce la radice del DOM corrente che ci serve per disporre i widget
sulla pagina Web, come mostrato dal seguente codice:
doc.add(lblMessage, {left: 100, top: 100});
doc.add(txtRaggio, {left: 250, top: 100});
doc.add(lblCirconferenza, {left: 100, top: 150});
doc.add(lblArea, {left: 100, top: 200});
doc.add(btnCalcola, {left: 380, top: 100});
lblMessage.setValue("Inserire la misura del raggio");
Tramite il metodo add()
posizioniamo ciascun widget
sulla pagina specificando le
coordinate in pixel a partire dall'angolo superiore sinistro. L'ultima istruzione imposta il valore della stringa visualizzata sulla prima etichetta.
A questo punto lanciamo il comando generate.py
dell'SDK che analizza il codice della nostra classe e seleziona i moduli di qooxdoo
necessari all'esecuzione. Aprendo quindi il file index.html
in un browser otterremo il seguente risultato:
Completiamo la nostra semplice applicazione definendo la classe myApp.cerchio
nel seguente modo:
qx.Class.define("myApp.cerchio",
{
extend:Object,
members:
{
raggio: 0,
circonferenza: function()
{
return(this.raggio * 2 * 3.14)
},
area: function()
{
return(this.raggio*this.raggio*3.14)
}
}
});
La classe prevede un membro che rappresenta la misura del raggio e due metodi che calcolano rispettivamente la circonferenza e l'area del cerchio.
Gli eventi
Ritorniamo quindi nel main()
della nostra applicazione ed aggiungiamo in fondo il seguente codice:
btnCalcola.addListener("click", function()
{
var myCerchio = new myApp.cerchio;
var valoreRaggio = txtRaggio.getValue();
if (valoreRaggio)
{
myCerchio.raggio = valoreRaggio;
lblCirconferenza.setValue("Il valore della circonferenza e' " +
myCerchio.circonferenza().toString());
lblArea.setValue("Il valore dell'area e' " +
myCerchio.area().toString());
}
else
{
alert("Inserire un valore per il raggio!");
}
});
Esso specifica la funzione che gestisce l'evento click
sul pulsante btnCalcola
.
La funzione crea un'istanza della classe cerchio e, sfruttando i suoi metodi per calcolare la relativa circonferenza e area, li visualizza sulle corrispondenti label
. Questo è un esempio del risultato finale.
Pur nella sua estrema semplicità, la nostra applicazione dà l'idea dell'approccio predisposto da qooxdoo
per lo sviluppo di interfacce grafiche, un approccio che si ispira a quello dei linguaggi di programmazione ad oggetti coma Java o C#, approccio del tutto opposto a quello tipico dello sviluppo di pagine Web che tende ad utilizzare JavaScript come manipolatore dell'HTML.
Sul sito del progetto sono presenti una serie di applicazioni dimostrative basate su qx.Desktop
con accesso al relativo codice sorgente.
Nella prossima parte dell'articolo vedremo come creare applicazioni mobile con Quooxdoo.
Creare applicazioni mobile con qooxdoo
Come abbiamo detto, qooxdoo è un framework che permette di sviluppare applicazioni ottimizzate per i dispositivi mobili tramite il pacchetto qx.Mobile. Allo stato attuale le piattaforme testate riguardano i browser nativi di iOS, Android e Blackberry in versione PlayBook. Questo non vuol dire che su altri sistemi operativi le pagine non vengano visualizzate, ma qualche funzionalità potrebbe non essere pienamente fruibile.
Così come avviene per qx.Desktop
, anche qx.Mobile
richiede l'utilizzo dell'SDK. Per creare la struttura di un progetto mobile occorre lanciare il seguente comando dalla shell di sistema:
create-application.py --type=mobile --name=mobileApp
L'unica differenza rispetto alla creazione dell'applicazione in stile desktop è la specifica del tipo di applicazione. Anche in questo caso, per selezionare i moduli qooxdoo
strettamente necessari e generare i sorgenti dell'applicazione di base è necessario lanciare il comando generate.py
.
L'approccio allo sviluppo dell'applicazione mobile è del tutto analogo a quella desktop. Troveremo quindi un file index.html
che serve semplicemente da aggancio per il codice JavaScript e ci concentreremo sul file Application.js
che troviamo nella cartella class/mobileapp
.
Se diamo uno sguardo al codice generato dal SDK ci accorgeremo che lo schema di massima è identico a quello desktop:
qx.Class.define("mobileapp.Application",
{
extend : qx.application.Mobile,
members :
{
main : function()
{
this.base(arguments);
if (qx.core.Environment.get("qx.debug"))
{
qx.log.appender.Native;
qx.log.appender.Console;
}
// Il nostro codice inizia da qui
...
}
}
});
L'unica differenza riguarda la classe base da cui viene derivata la classe principale della nostra applicazione, cioè qx.application.Mobile.
Widget per mobile
Lo sviluppo di un'applicazione mobile fa riferimento ad uno specifico modulo di widget
: qx.ui.mobile. Esso contiene un insieme di widget
ottimizzati per la visualizzazione su dispositivi mobili e per l'interazione tramite touch screen. Un widget
fondamentale è Page
, contenuto nel modulo qx.ui.mobile.page
, che rappresenta un'area dello schermo con cui l'utente può interagire e sui cui generalmente sono presenti altri widget
come pulsanti, liste, toolbar, etc.
Mentre Page rappresenta una pagina generica, NavigationPage rappresenta una pagina specializzata che prevede automaticamente una barra di navigazione ed una barra di scorrimento. Infine, il Manager consente la gestione delle pagine controllandone la navigazione e le
modalità di visualizzazione in base al tipo di dispositivo.
Analizziamo un esempio per comprendere come organizzare una semplice applicazione che presenta due pagine collegate. Il codice andrà inserito all'interno del metodo main()
subito dopo l'inizializzazione
del debug.
var page1 = new qx.ui.mobile.page.NavigationPage();
page1.setTitle("Prima pagina");
page1.addListener("initialize", function()
{
var button = new qx.ui.mobile.form.Button("Pagina successiva");
page1.getContent().add(button);
button.addListener("tap", function()
{
page2.show();
}, this);
},this);
Questo codice crea una NavigationPage
impostando il titolo ed assegnandole un gestore dell'evento di inizializzazione. In corrispondenza dell'evento initialize
, che si verifica prima della visualizzazione della pagina, viene creata un'istanza di un pulsante, viene inserito sulla pagina e gli si assegna la visualizzazione della seconda pagina in corrispondenza dell'evento tap.
La seconda pagina verrà creata dal seguente codice:
var page2 = new qx.ui.mobile.page.NavigationPage();
page2.setTitle("Seconda pagina");
page2.setShowBackButton(true);
page2.setBackButtonText("Indietro");
page2.addListener("initialize", function()
{
var label = new qx.ui.mobile.basic.Label("Contenuto della seconda pagina");
page2.getContent().add(label);
},this);
page2.addListener("back", function() {
page1.show({reverse:true});
},this);
Anche in questo caso viene creata un'istanza di una NavigationPage
e viene impostato un titolo. In questo caso, però, si imposta la visualizzazione del pulsante che consente di tornare alla pagina
precedente tramite il metodo setShowBackButton()
e si specifica il testo da visualizzare sul pulsante tramite setBackButtonText()
.
Il contenuto della seconda pagina sarà un'etichetta con una descrizione, mentre in corrispondenza dell'evento back
verrà visualizzata la pagina precedente.
Dopo aver creato le pagine occorre attivarne la gestione da parte del framework. Questo si ottiene assegnandole al page manager
come mostrato nel seguente codice:
var manager = new qx.ui.mobile.page.Manager(false);
manager.addDetail([
page1,
page2
]);
L'ultima istruzione che manca perché l'applicazione possa partire correttamente è la visualizzazione della pagina iniziale della nostra applicazione:
page1.show();
Il risultato finale è analogo a quello mostrato nella seguente figura:
Anche in questo caso, pur nella semplicità dell'esempio, dovrebbe essere chiaro l'approccio proposto da qooxdoo
nello sviluppo di applicazioni mobile.
Nel seguito dell'articolo vedremo come creare applicazioni server con Qooxdoo
Creazione di applicazioni server
Lo sviluppo di applicazioni server si basa sul pacchetto qx.Server. Esso fornisce essenzialmente il supporto per la programmazione orientata agli oggetti ed è possibile utilizzarlo in quegli
ambienti che non sono basati sul DOM, come ad esempio Node.js, Rhino o in un Web Worker HTML5.
Per avere un'idea dell'utilizzo, facciamo un semplice esempio creando un web server in Node.js che visualizza il classico Hello world!
Per utilizzare qx.Server
è possibile sfruttare il SDK per generare la struttura del progetto e i sorgenti di base utilizzando i seguenti comandi dalla shell di sistema:
create-application.py --type=server name=serverApp
cd serverApp
generate.py
Tuttavia questo approccio genera una certa quantità di codice che si occupa di individuare l'ambiente corrente e preparare altre funzioni di utilità che distoglierebbe l'attenzione dai concetti fondamentali che
vogliamo illustrare in questa sede. D'altronde le funzionalità del pacchetto qx.Server
sono concentrate nel file qx-oo-2.0.2.min.js
e possiamo quindi limitarci a far semplicemente riferimento ad esso nella nostra applicazione. Ecco il codice dell'applicazione:
var qx = require('./qx-oo-2.0.2.min.js');
var http = require('http');
qx.Class.define("serverApp.Message",
{
extend: Object,
members:
{
showMessage: function(msg)
{
return msg;
}
}
});
http.createServer(function (request, response)
{
var msg = new serverApp.Message;
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end(msg.showMessage('Hello world!'));
}).listen(8124);
console.log('Server running at http://127.0.0.1:8124/');
Esso include qx.Server
ed il modulo nativo http
di Node.js. Quindi definisce una classe il cui unico metodo si limita a restituire il messaggio passato come argomento. Infine viene utilizzato il metodo createServer()
di http per inviare il messaggio Hello World!
generato invocando il metodo della nostra classe. È sufficiente puntare un browser all'indirizzo http://127.0.0.1:8124
per verificare il risultato.
Conclusioni
qooxdoo
va oltre il classico concetto di libreria JavaScript. Esso è un vero e proprio framework per lo sviluppo di applicazioni JavaScript a 360 gradi coprendo i principali ambiti di utilizzo del linguaggio. Il supporto della programmazione orientata agli oggetti e il ricco insieme di widget
contribuisce a rendere JavaScript quasi un vero e proprio linguaggio di programmazione ad alto livello. Inoltre l'organizzazione in SDK consente di generare applicazioni con struttura standardizzata e di ottimizzarle per la pubblicazione.
Naturalmente nello spazio ridotto di questo articolo non è stato possibile esplorare nel dettaglio tutte le funzionalità offerte da qooxdoo
. Molte sono infatti le altre funzionalità offerte dal SDK: dal
debug delle applicazioni al supporto di unit test, dalla definizione del layout a quella dei temi grafici. La documentazione sul sito del progetto è comunque esaustiva e ricca di esempi interattivi.