Web App per iPhone con Html 5
Sencha Touch è un framework Javascript creato da Sencha per sviluppare applicazioni orientate ai moderni device dotati di schermo touch e multitouch. Le applicazioni scritte in Sencha sono una valida alternativa per chi non conosce l’Objective-C, il linguaggio Appe, e ha voglia di sviluppare su iPad e iPhone.
Il Sencha è compatibile con i browser Html 5 di iPhone, iPad e Android. Sencha Touch permette agli sviluppatori di sfruttare le proprie conoscenze per sviluppare applicazioni del tutto simili a quelle native, sfruttando tecnologie come HTML e CSS senza l’utilizzo di tool di sviluppo proprietari.
Indice
Web App per iPhone con Html 5
I vantaggi sono notevoli: tutti i device presenti e futuri compatibili con Html 5 potranno usare la nostra applicazione e non c’è bisogno di passare attraverso i marketplace ufficiali per pubblicare la nostra applicazione.
Sencha Touch è però ancora in versione beta e nononstante sia stabile e completo potrebbe anche variare prima del rilascio ufficiale. Al momento il framework permette di sfruttare tutte le feature disponibili sul telefono.
Setup dell’ambiente di sviluppo
Scegliemo l’editor di codice, un browser per lo sviluppo (Safari o Chrome), installiamo un webserver qualsiasi e scarichiamo il pacchetto Sencha Touch dal sito ufficiale. Il pacchetto è di 23 MB: oltre alla libreria ext-touch in versione debug e production è pieno di esempi e documentazione utile per cominicare a sviluppare in Sencha Touch.
Se abbiamo a disposizione un iPhone o un altro smartphone compatibile, carichiamo nel browser del nostro device uno degli esempi presenti nella cartella examples per cominciare ad esplorare il framework.
Creiamo il nostro primo file
Creiamo ora un file HTML 5 con Sencha Touch. Per lo sviluppo useremo la libreria in versione debug: cosa che ci permetterà di individuare da subito eventuali errori a scapito di un piccolo calo delle performance della nostra applicazione. Ecco il nostro file:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="Text/html; charset=utf-8"> <title>La mia prima Applicazione Sencha</title> <!--CSS Sencha Touch--> <link rel="stylesheet" href="sencha-touch/resources/css/ext-touch.css" type="text/css"> <!--Il tuo CSS--> <link rel="stylesheet" href="css/main.css" type="text/css"> <!--Javascript Sencha Touch--> <script type="text/javascript" src="sencha-touch/ext-debug.js"></script> <!--il Javascript della nostra applicazione--> <script type="text/javascript" src="js/index.js"></script> </head> <body> </body> </html>
Il body è e rimarrà vuoto: sarà Sencha a creare gli elementi della pagina grazie a Javascript. Notiamo anche l’Header HTML 5 e che, nell’ordine, abbiamo inserito il CSS di Sencha, un nostro eventuale Css (che dovrà sempre seguire quello Sencha), il Javascript della libreria e il nostro file Javascript dovere creeremo l’applicazione.
Ext.setup({
onReady: function(){
new Ext.TabPanel({
fullscreen: true,
type:'dark',
sortable:true,
items:[{
title:'Tab 1',
html:'Questa è la prima tab della nostra applicazione',
cls:'card card5'
},
{
title:'Tab 2',
html:'Questa è la seconda tab della nostra applicazione e al suo interno c\'è<a href="http://www.google.com">un link</a>',
cls:'card card4'
},
{
title:'Tab 3',
html:'<p>La terza tab contiene un\'immagine</p><img src="images/logo.png" />',
cls:'card card3'
}]
});
}
});Abbiamo creato un TabPanel con tre tab che possiamo popolare con l’HTML che più ci è utile. Sencha si occuperà di gestire la rotazione dello schermo in modo che la pagina sia sempre coerente con il display: le tab sono anche draggabili e riordinabili a seconda delle scelte dell’utente.
Esaminiamo il codice immesso: la funzione Ext.Setup() racchiude tutto il codice. E’ quella che viene eseguita per prima, e al suo interno contiene il codice che crea il nostro TabPanel. Il TabPanel è un oggetto che ha alcune proprietà e contiene degli items che, a loro volta, hanno attributi di cui uno è il codice HTML da visualizzare. Il codice di Sencha è tutto un annidarsi di elementi che andranno poi a creare il nostro layout.
A ogni elemento possono essere associati eventi, chiamati Ajax, e tutto l’insieme rappresenta la nostra applicazione. Vediamo un altro esempio che ci chiarisce meglio il funzionamento di questo “annidamento“:
Ext.setup({
onReady.function(){
new Ext.TabPanel({
fullscreen: true,
...All’interno del nostro TabPanel, le tab sono ora posizionate in basse e contengono bottoni. Una toolbar è inserita all’interno del TabPanel e sui bottoni possiamo inserire delle azioni oppure, come fatto per il pulsante della tab in basso, un’iconcina di notifica contenente un piccolo testo o anche solo un numero. Esaminiamo anche questo pezzo di codice per, poi, passare a qualcosa di più interessante.
Come possiamo vedere l’annidamento qui è più presente rispetto a sopra. La barra dockedItems contiene diversi bottoni. Al pulsante Home è associato un handler che lancia un alert() all’utente. Il codice delle tab è praticamente uguale all’esempio precedente, la differenza sta tutta in questo pezzetto di codice:
tabBar:{
dock:'bottom',
layout:{
pack:'center'
}
},Queste poche righe indicano al TabPanel di non usare lo stile di default, ma di posizionare il dock in basso e di raccogliere le icone al centro della barra. Come dicevamo in precedenza è importante unsare la documentazione per districarsi nel mare di opzioni presenti per ciascun componente. Partire dagli esempi inclusi nel download e studiarne il codice è un ottimo punto di partenza per chi vuole sviluppare in Sencha.
Twitter in palmo di mano
Vediamo come creare un piccolo client Twitter con Sencha e le Api Jsonp di Twitter. Il nostro esempio si occuperà di fare una ricerca e mostrare i tweet in una lista con avatar e nickname, usando qualche riga di Css personalizzato:
Ext.setup({
onReady.function(){
var toolbar=new Ext.Toolbar({
dock:'top',
xtype:'toolbar',
title:'Twitter'
});
var twitter=new Ext.Component({
title:'Twitter',
cls:'timeline',
scroll:'vertical',
tpl:[
'<tpl for=".">',
....L’esempio è di poche righe ma d’effetto. Sencha Touch arriva sui nostri computer già dotato di numerose utility per richiamare Ajax, tra cui Ext.util.JSONP. request che abbiamo usato in questo caso. La chiamata alle Api di Twitter è gestita in poche righe di codice. Aggiorneremo poi un Ext.Component(), un componente generico di cui dobbiamo creare il markup e fornire i segnaposto per le variabili ritornate dall’utility JSONP. Come possiamo vedere da questo piccolo pezzo di risultato tornato da Twitter:
{
"profile_image_url":"http://a0.twimg.com/profile_images/1015100480/avatar_normal.jpg",
"created_at":"Thu,26 Agu 2010 17:16:47+0000",
"from_user":"informarea",
"metadata":{
"result_type":"recent"
},
"to_user_id":null,
"text":"like disperato re:http://ff.im/pL2r6",
"id":22195095101,
"from_user_id":366099,
"geo":null,
"iso_language_code":"eo",
"source":"&It;a href="http://friendfeed.com"rel="nofollow">FriendFeed&It;/a>"
}Il tweet è composto da diverse variabili. Alcune di queste sono mappate nel nostro script, come possiamo facilmente vedere: sono l’avatar, il tweet stesso e l’autore. Vediamo ora altre pecularità di Sencha Touch da esaminare.
Geocoding e Mappe
Grazie a Sencha Touch e alle Alpi Html 5, possiamo recuperare la nostra posizione e mastrarla sulla mappa. Sencha mette a disposizione un componente dedicato all’uso delle mappe, ma dobbiamo comunque includere il file Javascript delle Api fornito da Google con il parametro ?sensor=true.
In questo modo comunichiamo a Google che stiamo richiamando le sue Api da un dispositivo dotato di sensore GPS o AGPS.
Ext.setup({
onReady: function(){
var toolbar=new Ext.Toolbar({
dock:'top',
xtype:'toolbar',
title:'Esempio Google Maps'
});
....La mappa creata è centrata sulla nostra posizione attuale. Possiamo zoomare e navigare la mappa con gli stessi eventi multitouch di Google Maps per iPhone e interagire con le mappe attraverso le Api Google Maps: la documentazione sul sito Google Maps Platform.
I Form
Aspetto cruciale delle applicazioni è permettere agli utenti di interagire con i nostri dati. Sencha Touch mette a disposizione component per form ottimizzati per i dispositivi touchscreen, che possiamo vedere in questo esempio:
var formBase={
scroll:'vertical',
url:'pagina.php',
standardSubmit: false,
items:[
{
xtype:'fieldset',
title:'Informazioni',instructions:'Compila il modulo',
defaults:{
required:true,
labelAlign:'left',
},
items:[{
xtype:'textfield',
name:'name',
label:'Nome',
autoCapitalize:false
},{
....E’ una panoramica di quello che possiamo realizzare: i component rispecchiano i classici componenti Html più quelli che possiamo vedere sull’iPhone.
Liste Annidate
Come ultimo componente daremo un’occhiata alle liste annidate. Si tratta di una specie di wizard presente in moltissime applicazioni iPhone. Permette di affinare la selezione di un particolare valore in base ai valori precedenti:
Ext.setup({
onReady:function(){
var nestedList=new Ext.NestedList({
fullscreen:true,
items:[{
text:'Opzione A',
items:[{
text:'Opzione A.1',
customAttribute:123,
items:[{
text:'Opzione A.1.a'
},{
text:'Opzione A.1.b'
}]
},{
text:'Opzione A.2',
customAttribute:389
}]
},{
text:'Opzione B',
items:[{
text:'Opzione B.1',
customAttribute:233
},{
text:'Opzione B.2',
customAttribute:2390
}]
},{
text:'Opzione C',
items:[{
text:'Opzione C.1',
customAttribute:903
},{
text:'Opzione C.2',
customAttribute:77
....Il componente è adatto per la navigazione orizzontale e quella verticale.
Creare App per iPAD
Sencha Touch è pensato anche per sviluppare applicazioni per il tablet Apple. Oltre ai classici, esistono specifici componenti per iPad: gli overlay, ossia box di testo che appaiono in posizioni predefinite. La sintassi per lo sviluppo di App iPad è identica in quanto il framework è pensato proprio per uniformare i dispositivi. Qualora però serva dover distinguere tra iPhone e iPad, si può fare affidamento sull’utility Ext.platform, che permette di distinguere tra i diversi dispositivi con metodi tipo Ext.platform.isIphone che torna true o false a seconda del dispositivo su cui ci si trova.
