Sencha Touch 2.0

22 giugno 2012

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)

Screenshot della struttura completa

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)

Timeline Network

Se vuoi aggiornamenti su Sencha Touch 2.0 inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su 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