In questo articolo vedremo come sviluppare un'applicazione mobile sfruttando Dojo Toolkit nella versione 1.7. Già affermato come alternativa ad altri toolkit per la gestione di tecnologie come HTML5, CSS3 e manipolazione del DOM e di contenuti con Ajax, questo toolkit fornisce una serie di widget e componenti già pronti per smartphone e tablet, completamente personalizzabili con temi che consentono di adattare la grafica ai diversi device.
Con Dojo possiamo quindi realizzare app per iOS, Android e Blackberry, contando sul fatto che queste piattaforme mettono a disposizione browser di ultima generazione capaci di renderizzare correttamente markup e codice all'ultimo grido.
A parte l'enorme quantità di funzioni disponibili, ci sono alcune differenze architetturali rispetto alla maggior parte delle altre librerie, Dojo utilizza i namespace. Ciò significa che Dojo include sempre i nomi dei pacchetti in un riferimento all'oggetto.
Per utilizzare un semplice foreach, ad esempio, bisogna far riferimento al suo namespace in questo modo:
dojo.lang.forEach (listOfThings, myFunc)invece di
foreach (listOfThings, myFunc);Setup del progetto
Una volta scaricato il toolkit, troviamo tre cartelle distinte:
Dijit, contenente la libreria UI di DojoDojo, contenente il core della libreriaDojoX, contenente le estensioni
Dojo Toolkit e Dojo Mobile
Lo sviluppo di applicazioni mobile si sta evolvendo troppo rapidamente per mantenere la stabilità delle API Dojo, quindi il team di sviluppo ha sviluppato una vera e propria estensione capace di superare alcuni limiti strutturali.
Da qui, Dojo Mobile, basato sempre su Dojo, con la quale è possibile sviluppare soluzioni leggere ad alte prestazioni, con codice ottimizzato ed efficiente. Iniziamo lo sviluppo, basta una semplice pagina HTML.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1 ,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta name="apple-mobie-web-app-capable" content="yes">
<title>Dojo Mobile for HTML.it</title>
<link href="dojo1.7/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet" />
<script src="dojo-toolkit/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
</head>
<body>s
</body>
</html>Viene caricato il core, dojo.js, i temi CSS specifici per smartphone e i META tag. Nel core tra le altre cose viene definita la funzione dojo.require, che sarà interessante utilizzare più avanti.
Dojo permette di sovrascrivere alcune variabili globali che contrallano come opera il framework, da qui l'utilizzo di djConfig nella dichiarazione dello script.
Veniamo alla nostra applicazione di esempio. Vogliamo farle ricevere dal server un elenco di libri da mostrare a schermo, l'utente potrà selezionarne uno e ottenere alcune informazioni di dettaglio. Vediamo quali widget e metodi ci fornisce Dojo Toolkit per realizzare la nostra idea:
| Libreria | Descrizione |
|---|---|
Dojox.mobile.ScrollableView |
rappresenta lo schermo del dispositivo mobile |
Dojox.mobile.Heading |
rappresenta una barra di navigazione |
Dojox.mobile.RoundRectList |
contenitore per gli elementi |
Dojox.mobile.ListItem |
rappresenta un elemento di elenco |
Aggiorniamo ora il corpo della pagine HTML in modo che possa ospitare i dati:
<body>
<!-- Barra di navigazione -->
<div id="appPatterns" dojoType="dojox.mobile.ScrollableView" >
<h1 dojoType="dojox.mobile.Heading" label="HTML.it" ></h1>
</div>
<!-- Contenitore -->
<div id="appPatternsInfo" dojoType="dojox.mobile.ScrollableView" >
<h1 dojoType="dojox.mobile.Heading" label="Dettaglio libro" back="Lista" moveTo="appPatterns"></h1>
<ul id="patternInfoList" dojoType="dojox.mobile.RoundRectList"></ul>
</div>
</body>Ora esaminiamo la logica che serve ad ottenere i dati dal server, sfruttiamo il metodo dojo.xhrGet per effettuare la richiesta, poi la nostra applicazione analizzerà la risposta e popolerà la nostra lista dei libri:
dojo.xhrGet({ url :"https://www.html.it/resources/getListBook",
handleAs : "json",
headers : { 'X-Deployer-API-Version': '3.0',
'Content-Type': 'application/json',
'Accept': 'application/json'},
load : function(response) { var sdata = response; },
error : function(e) { }
});Esaminiamo i parametri:
| Parametro | Descrizione |
|---|---|
handleAs |
specifica come trattare i dati che arriveranno dal server, solitamente è impostato a text, ma accetta anche valori come xml |
headers |
è una collezione di coppie di chiave-valore, con le quali costruire la richiesta al server, in questo caso abbiamo specificato che sia la richiesta sia la risposta siano in formato json |
load |
contiene il riferimento all'event handler che sarà invocato una volta che la richiesta è completata, il formato dei dati che la funzione riceve da parametro dipende da quanto impostato in handleAs |
error |
indica la funzione da invocare in caso di errore nella richiesta, alla callback viene passato un oggetto JavaScript Error, dal quale estrarre le informazioni dell'eccezione |
Dopo aver salvato la response in una variabile, è necessario creare un contenitore lista per i titoli e ciclare il risultato affinché la lista si popoli:
var appPatternListContainer = new dojox.mobile.RoundRectList({id:"applicationPatternsList"});
for(var i in sdata) {
var name = sdata[i].titolo_libro
var appPatternListItem = new dojox.mobile.ListItem({ label: name,
moveTo: "appPatternsInfo"
});
appPatternListContainer.addChild(appPatternListItem);
}Dopo aver popolato la lista, il passo successivo è gestire il click sull'elemento della lista per visualizzare il dettaglio. Sfruttando ancora una volta il toolkit utilizziamo dojo.connect. Questo metodo connette appunto gli eventi ai metodi, sfruttando le delegazioni. Come parametro invochiamo anche il metodo hitch, che eseguirà la funzione getPatternInfo con paramentro l'elemento della lista.
dojo.connect(appPatternListItem, "onclick", dojo.hitch(null, getPatternInfo(sdata[i])));Inserendo questa istruzione nel ciclo, ci assicuriamo la gestione del click per ogni elemento della lista. Infine non resta che associare tutto questo alla vista, sfruttando la libreria dijit:
dijit.byId("appPatterns").addChild(appPatternListContainer);La realizzazione del dettaglio non necessita di codice particolare, in forza del fatto che il parametro in input è l'oggetto completo dell'elemento selzionato dalla lista, che contiene già tutte le informazioni. Non rimane altro che leggerne le proprietà.
Quindi, dopo esserci assicurati che la lista sia vuota, impostiamo un array contenente le intestazioni delle colonne, mentre il secondo array conterrà i valori da visualizzare. Ecco il codice:
// Dettaglio
function getPatternInfo(elementoLista) {
// Svuoto la lista per eventuali resti di precedenti dettagli
dijit.byId("patternInfoList").destroyDescendants();
// Lista delle informazioni che verranno lette
var listItemLabels= ["Titolo libro", "Autore", "Editore", "Prezzo"];
// Lista dei valori estratti
var listItemInfo = [ elementoLista.titolo_libro,
elementoLista.autore,
elementoLista.editore,
elementoLista.prezzo];
// Creo e popolo la lista
for(var j in listItemLabels) {
// Popolo il contenitore
var list = dijit.byId("patternInfoList");
var appPatternInfo = new dojox.mobile.ListItem({
label: listItemLabels[j] ,
rightText: listItemInfo[j]
});
list.addChild(appPatternInfo);
}
}Come promesso, abbiamo sviluppato un'applicazione mobile servendoci di una semplice pagina HTML e del codice JavaScript, potete vederla in esecuzione negli esempi che abbiamo preparato, stessa base dati, ma con gli stili per diverse piattaforme:
- stile iPhone
- stile BlachBerry
- stile Android
In questa breve introduzione abbiamo esaminato una piccola parte del toolkit che, grazie alla sua nutrita libreria, risulta semplice e piuttosto completo di strumenti a supporto dello sviluppo. È senz'altro interessante approfondire e scoprire i vantaggi dell'interazione di Dojo con framework come PhoneGap o TypoScript.
Link utili
- Dojo Toolkit Web Site
- Imparare i META tag Apple specifici per i dispositivi mobili
