Sencha touch: applicazioni mobile HTML5 senza sforzo

28 giugno 2011

Sencha Touch è un framework JavaScript che introduce un nuovo modo di sviluppare applicazioni Web per il mondo mobile. Tramite una sintassi ed una logica un po’ particolari, ed in qualche modo ispirate al mondo Swing di Java, Sencha Touch ci consente di descrivere interfacce web attraverso istruzioni JavaScript e tecniche di templating.

Il framework si prende poi in carico l’onere di generare il documento HTML finale e nel farlo applica al descrittore di interfaccia un tema che può ricalcare quello delle applicazioni native di un particolare modello di smartphone (iPhone, Android, BlackBerry) o può essere originale e sviluppato da noi.

Ma c’è di più, le animazioni di transizione tra i vari pannelli che compongono la nostra applicazione sono anch’esse gestite in maniera naturale da Sencha Touch consentendoci con poco sforzo di sviluppare interfacce complesse che ricalcano molto fedelmente quelle delle applicazioni native.

Un mondo di dati

Come ogni buon framework che si rispetti anche Sencha Touch contiene una corposa libreria per la manipolazione, l’interpretazione e la memorizzazione di dati. Fanno parte di questa libreria oggetti per interagire con webservice remoti attraverso AJAX ma anche metodi per salvare le informazioni beneficiando delle nuove capacità offerte dall’HTML5.

HTML5? Si, grazie!

Sencha Touch trae vantaggio dalle nuove specifiche HTML5 e consente di memorizzare informazioni direttamente sul device dell’utente utilizzando le API localStorage. Sono inoltre a disposizione dello sviluppatore componenti Audio e Video che basano le loro funzionalità sui corrispettivi elementi HTML5.

Alla scoperta di Sencha:

Per meglio sperimentare le potenzialità offerte da questo framework creiamo una piccola applicazione da utilizzare per mostrare a video una serie di appunti. Non è necessario possedere uno smartphone per seguire questo tutorial, è sufficiente infatti utilizzare Chrome che condivide lo stesso layout engine (WebKit) dei browser installati sia su Android, che su iOs che su BlackBerry 6+.

Per prima cosa effettuiamo il download dell’archivio da questo indirizzo e decomprimiamolo, poi identifichiamo le cartelle resources/css e resources/css-debug ed insieme ai file sencha-touch-debug.js e sencha-touch.js copiamole all’interno di una cartella creata appositamente per il nostro progetto, appunti, in modo da ottenere una struttura come la seguente:

Figura 1. Struttura cartelle Sencha
(clic per ingrandire)

Struttura cartelle Sencha

Ora impostiamo le basi del documento HTML5 che conterrà l’applicazione: creiamo un file index.html con questo contenuto:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Appunti</title>
	<link rel="stylesheet" href="css-debug/sencha-touch.css" type="text/css">
	<script type="text/javascript" src="js/sencha-touch-debug.js"></script>
	<script type="text/javascript" src="js/application.js"></script>
	</head>
	<body></body>
</html>

Oltre alle classiche informazioni, come il charset ed il titolo, notiamo che abbiamo incluso il foglio di stile del tema da applicare alla nostra creazione.Inoltre è necessario richiamare il file Javascript che contiene l’intero framework. Il prefisso -debug, applicato ad entrambi, denota che stiamo scegliendo dei file non compressi, utilissimi per curiosare nel codice del framework.

Chiude l’elenco dei file application.js, in questo file scriveremo l’applicazione; creiamolo quindi come documento vuoto all’interno della cartella js ed inseriamoci quanto segue:

new Ext.Application({
	name: 'appunti',
	launch: function() {
		this.views.viewport = new Ext.Panel({
			fullscreen: true,
			html: 'Hello World!'
		});
	}
});

In queste poche righe abbiamo:

  • definito una nuova applicazione con l’istruzione: new Ext.Application. In Sencha Touch un’applicazione non è nient’altro che il contenitore all’interno del quale risiede la logica, la parte di dati e quella di interfaccia del progetto su cui stiamo lavorando;
  • dato un nome all’applicazione con l’istruzione name: 'appunti'. Come possiamo notare Sencha Touch fa largo utilizzo di array associativi per definire proprietà e funzioni all’interno dei propri componenti. I nomi da usare per le chiavi, come ‘name’ o ‘launch’, sono elencati all’interno delle API del framework.
  • specificato con la chiave ‘launch‘ una funzione che verrà eseguita una singola volta contestualmente al lancio dell’applicazione. All’interno di questa funzione impostiamo come ‘viewport‘, il box nel quale verrà visualizzata tutta l’interfaccia, un singolo pannello al quale chiediamo di riempire l’intera finestra del browser (‘fullscreen: true‘) e di mostrare a video l’html ‘Hello World!’ (html: 'Hello World!').

Eseguendo nel browser otteniamo questo risultato:

Figura 2. Risulato pagina di prova

Risulato pagina di prova

Avevamo parlato di MVC?

Sencha Touch adotta il paradigma MVC come fondamenta sulle quali costruire le applicazioni. Per chi non lo conoscesse, questo acronimo indica una tecnica che identifica in una applicazione tre distinte sezioni, suddivise per responsabilità:

  • model, trattano della parte legata alla persistenza del dato ed operano su di esso esponendo le logiche di business definite dall’applicazione,
  • view, sono responsabili della generazione dell’interfaccia e della corretta formattazione del dato,
  • controller, agiscono da registi e coordinano model e view per ottenere il risultato voluto.

Procediamo quindi con il creare all’interno della nostra struttura dati tre cartelle, una per sezione: ‘js/models‘, ‘js/views‘, ‘js/controllers‘.

Se vuoi aggiornamenti su Sencha touch: applicazioni mobile HTML5 senza sforzo inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Sencha touch: applicazioni mobile HTML5 senza sforzo

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