In questo articolo scopriremo le novità offerte dalla nuova versione del popolarissimo framework per lo sviluppo di applicazioni HTML5 mobile Senche Touch. Tra gli elementi di maggior risalto di questa release spiccano:
- un nuovo layout engine, costruito specificatamente per massimizzare la velocità di reazione delle applicazioni;
- un nuovo sistema per la gestione delle classi, mutuato direttamente da Ext.js 4.0;
- tutta una serie di nuovi componenti, tra cui l'attesissimo carosello per gestire infiniti elementi;
- alcune interessanti utility, come il comodo ComponentQuery per identificare con una sintassi simile ai selettori CSS i vari componenti che compongono le applicazioni.
Proveremo sul campo alcune di queste innovazioni costruendo una piccola applicazione che sappia interfacciarsi con Twitter e mostrare a video una lista di tweet.
Il nuovo sistema di classi
Scarichiamo l'ultima versione del framework disponibile dal sito ufficiale decomprimiamo l'ingombrante archivio e costruiamo una nuova struttura a cartelle all'interno della root del nostro progetto 'twitterbox'. Per prima cosa copiamo il file sencha-touchall.js in una cartella js, poi tutti i file della cartella resources/css in una cartella css.
Proseguiamo il setup creando una cartella app con all'interno tre cartelle: controller , model e view. Completiamo posizionando due file vuoti: application.js sempre nella cartella js e application.css in css. Definiamo infine un semplice index.html che diverrà il punto di accesso all'applicazione.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>TwitterBox</title>
<link rel="stylesheet" href="css/sencha-touch.css" type="text/css">
<link rel="stylesheet" href="css/application.css" type="text/css">
<script type="text/javascript" src="js/sencha-touch-all.js"></script>
<script type="text/javascript" src="js/application.js"></script>
</head>
<body></body>
</html>Figura 1. Screenshot della struttura completa
(clic per ingrandire)
Ora costruiamo la nostra prima classe, in una architettura MVC è importante definire il modello che, nel nostro caso, è rappresentato dal singolo Tweet. Sencha Touch 2.0 mette a disposizione un meccanismo interessante per definire nuove classi, molto più semplice del precedente.
Eccone un esempio, creiamo il file app/model/Tweet.js:
Ext.define('TwitterBox.model.Tweet', {
extend: 'Ext.data.Model',
config: {
fields: ['from_user', 'text', 'profile_image_url', 'created_at'],
proxy: {
type: 'jsonp',
url: 'http://search.twitter.com/search.json?q=html5',
reader: {
type: 'json',
rootProperty: 'results'
}
}
}
});
Ext.create('Ext.data.Store', {
id: 'TwitterStore',
model: 'TwitterBox.model.Tweet',
autoLoad: true
});Ext.define è il nuovo metodo per la definizione di una classe, in questo caso ereditiamo da Ext.data.Model, quindi stiamo creando un modello. Nella configurazione specifichiamo i campi di cui vogliamo la nostra classe sia composta ed impostiamo un proxy, ovverosia indichiamo che per questi oggetti esiste una sorgente remota; nella fattispecie l'output JSON reso disponibile direttamente da Twitter.
Successivamente definiamo uno Store, cioè un contenitore di istanze del nostro modello, comodissimo, in quanto poi potrà essere implementato da svariati componenti che si prenderanno l'onere di visualizzarne il contenuto. Con autoLoad: true chiediamo allo store di procedere con il recupero dei modelli appena questo sia possibile, attraverso il proxy specificato.
Ora per valutare il funzionamento del nostro modello dobbiamo richiamarlo all'interno dell'applicazione TwitterBox; applicazione che non abbiamo ancora ufficialmente definito, aggiungiamo quindi alcune righe a js/application.js:
new Ext.application({
name: 'TwitterBox',
models: ['Tweet'],
launch: function() {
// cosa eseguire al lancio dell'applicazione...
}
});Convenzioni
Grazie ad una interessante serie di convenzioni Sencha Touch 2.0 riesce ad effettuare il caricamento a run-time di app/model/Tweet.js partendo dalla dichiarazione models: ['Tweet'] che abbiamo appena fatto. Allo stesso modo anche i controller e le view saranno caricate a run-time usando dichiarazioni simili.
Ora, per verificare il buon funzionamento della nostra infrastruttura apriamo la console di Chrome e navighiamo su index.html, dovremmo notare nel tab 'Network' il caricamento del file Twitter.js, corrispondente al nostro modello insieme ad una chiamata verso search.json sul dominio search.twitter.com, segno che anche il caricamento dei tweet nello store è andato a buon fine.
Figura 2. Timeline Network
(clic per ingrandire)
DataView
Cosa c'è di meglio di un controllo DataView per visualizzare i tweet presenti nel nostro store? Con pochissimo codice possiamo costruirne uno, semplicemente estendendo e configurando in modo appropriato il componente messo a disposizione da Sencha Touch 2.0. Creiamo quindi un file app/view/Tlist.js:
Ext.define('TwitterBox.view.Tlist', {
extend: 'Ext.DataView',
alias: 'widget.tweetlist',
config: {
loadingText: 'Carico i tweet...',
store: Ext.data.StoreManager.get('TwitterStore'),
itemTpl: '<div class="tweet"><img src="{profile_image_url}" /><h2>{from_user}</h2><p>clicca per leggere »</p><div class="clear"></div></div>',
}
});Nel codice appena sviluppato abbiamo collegato, attraverso la proprietà 'store', lo store contenente i Tweet a questo componente, dopodiché abbiamo definito un template di visualizzazione usando i nomi dei campi specificati nel modello.
Ora dobbiamo modificare leggermente application.js per invocare il caricamento e l'inizializzazione di Tlist:
new Ext.application({
name: 'TwitterBox',
models: ['Tweet'],
views: ['Tlist'],
launch: function() {
Ext.create('Ext.viewport.Default',{
fullscreen: true,
items: [
{ xtype: 'tweetlist'},
]
});
}
});Bene, all'interno del metodo associato al parametro 'launch' abbiamo creato un'istanza di un componente Ext.viewport.Default, utilizzato per creare la base dell'applicazione, nel quale abbiamo richiamato una istanza di Tlist attraverso l'utilizzo del suo xtype, definito nel listato precedente sotto la chiave: alias.
Ora possiamo provvedere, con pochissimo CSS, a rendere più presentabile l'elenco; modifichiamo quindi il documento 'application.css' nella cartella 'css':
.tweet { padding: 20px 10px; }
.tweet img { float: left; clear: left; }
.tweet h2, .tweet p {
float: left; clear: right;
width: 200px; margin-left: 20px;
}
.tweet h2 { font-weight: bold; }
.tweet .clear { clear: both; }Per provare il tutto non ci resta che munirci di un simulatore iPhone o, in assenza, di un browser webkit come ad esempio Chrome o Safari:
Figura 3. Resa finale
(clic per ingrandire)
ComponentQuery
Con pochissime linee di codice abbiamo sperimentato la potenza della nuova versione di Sencha Touch. Purtroppo in questa demo non siamo riusciti ad utilizzare il componentQuery, che offre una sintassi molto intuitiva per recuperare dei componenti, se ad esempio avessimo avuto necessità di ottenere l'istanza di Tlist in esecuzione questo sarebbe stato il codice da utilizzare:
Ext.ComponentQuery.query('.tweetlist')Dove la particella .tweetlist corrisponde proprio all'xtype del componente.
In conclusione, grazie ad un interessante sistema di convenzioni, ad un loader dinamico e ad un
sistema di classi di molto più facile utilizzo, la nuova versione di Sencha Touch si conferma come
una scelta interessante per chiunque debba cimentarsi nello sviluppo di applicazioni web per device
mobile.
In ultimo dalla versione 2.0 è possibile beneficiare anche della possibilità di racchiudere quanto
sviluppato all'interno di un package nativo offerto sempre da Sencha , che può essere quindi distribuito attraverso i vari store come l' App
Store e il Google Play Market.
