DataView con Sencha Touch 2.0

22 giugno 2012

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)

Resa finale

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.

Se vuoi aggiornamenti su DataView con Sencha Touch 2.0 inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su DataView con Sencha Touch 2.0

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy