UX e Web Development

Guida a Sencha Touch

Una Guida a Sencha Touch 1.1 per muovere i primi passi 

Oggi mi rendo conto di quanto sia veloce l’informatica, scrissi questa guida ben 4 anni fa, nel 2012.

Pensare che Sencha Touch 1.1 è ormai sorpassato in così poco tempo surclassato dalle versioni 2.x e l’ultima release – Sencha complete – mi fa capire sempre più quanto il mondo del codice viaggia a velocità prossime a quelle delle luce.

Quando conobbi Sencha Touch, nel 2012, rimasi sicuramente sorpreso dalla scalabilità con cui è stato pensato e dalla quantità sorprendente di funzionalità. Sencha ha puntato tutto sul fornire una UX veramente curata!

Sencha Touch è tutt’ora un framework veloce e funzionale, che ti permette di fare veramente tutto in ambiente HTML5+JS, creando delle applicazioni smooth e molto gradevoli graficamente.

Derivando da ExtJS è anche famoso, però, per la sua poca facilità di utilizzo;
la curva di apprendimento iniziale si rivela infatti abbastanza ripida.

Hai bisogno di un po’ di tempo e di smanettarci un po’ sopra, ma non è nulla  di impossibile.

Ti fornirò in questo articolo soltanto una breve ma utile introduzione a come “ragionare” la sintassi.

AGGIORNAMENTO: Oggi Sencha Touch utilizza un sistema MVC.

MVC: non farti spaventare da questa sigla: è soltanto un modo di ragionare la costruzione di un programma o di un software, e seppure è molto semplice da spiegare a parole, si rivela invece confusionario nella pratica… ma solo inizialmente.

Tieni conto che nell’ MVC il programmatore ragiona tutta l’applicazione su 3 punti:

  • Model: è lo schema con il quale accediamo e manipoliamo i dati che dovremo fornire
  • View: si occupa di visualizzare i dati del model, è la “vista” dell’applicazione
  • Controller: tutta la serie di funzioni che “controllano” come e dove i dati devono uscire sulle viste

Se vuoi iniziare a capire qualcosa di questi framework javascript avanzati può tornarti molto più utile un approccio MVC, che è un approccio sicuramente più serio ed accademico – ormai nel 2016.

FINE AGGIORNAMENTO

Chiaramente sei qui perché vuoi creare la tua prima applicazione , quindi oggi tralasceremo il discorso MVC e vediamo insieme solo le basi di Sencha Touch versione 1.1 , che è fortunatamente è ancora supportata. Let’s Go:

Sencha touch si basa, come tutto il javascript, su oggetti predefiniti. Gli oggetti di questa fantastica libreria sono già ottimizzati per l’ambiente mobile, quindi hai a disposizione tutto quello che ti serve per gestire la tua applicazione sia a livello grafico che a livello tecnico.
Te ne accorgi subito, dai primi test che farai! Già soltanto dagli eventi touch che sono pienamente supportati a meraviglia. Ma vediamo come approcciare la sua sintassi, che è molto vicina ad Ext.JS , una sorta di fratellastro di jQuery.

Primi Passi

Ti serve innanzitutto un server xAMP (quindi Apache, Mysql, PHP), quindi lo spazio di sviluppo “solito”, che puoi installare senza troppi sbattimenti con Wamp o mamp (per MAC).

Passo numero 2: Sencha Touch funziona in locale, ma ti conviene configurare subito il server Apache correttamente se devi fare uso di dati caricati in asincrono con PHP e json.

Insomma.. per chi è pratico almeno di sviluppo web:

Ti basta lo stesso ambiente server locale che utilizzi per programmare l’HTML5 il CSS e il PHP..
niente programmi complicati o sistemi particolari, basta caricare il framework (così come viene proposto sul sito internet) oppure questo che trovi qui http://cdn.sencha.io/touch/sencha-touch-1.1.1.zip ( è il CDN ufficiale! ).

Una volta scaricato, il file zip va scompattato sul vostro webserver in una cartella che rinomini a tua preferenza.

Ora puoi iniziare a creare l’HTML della tua prima app con Sencha Touch.

Il file HTML principale | (index.html) -> copia e edita questo file sul tuo webserver nella cartella

<html>
<head>
<title> Hello World :) </title>
<link rel =”stylesheet” href “../../sencha touch/sencha-touch.css” type=”text/css”/>
<script src=”../../sencha-touch/sencha-touch.js” type=”text/javascript” </script>
<script src=”myapp.js” type=”text/javascript” </script>
</head>
<body>
</body>
</html>

Un html vuoto? no.. hai appena importato tutte le librerie necessarie; occhio soltanto ai percorsi url delle risorse esterne che stai caricando 🙂 . Controlla che sia tutto corretto e che stai importando correttamente i sorgenti dalla cartella zip che hai appena clonato sul tuo spazio di sviluppo.

E myapp.js cosa è? Semplice è proprio lì dentro quel file che scriverai il codice dell’ applicazione, che in questo caso sarà un semplice “Hello World”, giusto per capire le sintassi.

Come fare un semplice messaggio di benvenuto in Sencha Touch

Come già detto, inserirai tutto il codice dell’applicazione nel file myapp.js. Fallo con notepad++ o qualsiasi altro editor che supporta javascript e copia incolla il codice qui sotto.

Vediamolo insieme:
FILE: myapp.js


Ext.Setup({
onReady:function(){
Ext.Msg.alert(“messaggio di benvenuto!”, “Ciao!”)
}
});



Ok è chiaro..  la sintassi è diversa, ma se conosci Javascript o jQuery capisci al volo che non ci sono differenze estreme.

Ext.Setup({

La graffa { significa che inseriremo dei parametri all’ interno del metodo
La tonda ( è quella classica dei metodi in JS
Setup è un metodo dell’oggetto Ext in pratica fa partire il programma
Ext è l’oggetto principale – esattamente come il $ (dollaro) di jQuery.

Stai quindi, banalmente, utilizzando il metodo Setup dell’oggetto Ext. Facile no?

continuiamo:

onReady: function(){

E’ il parametro che dice alla nostra applicazione di partire con una funzione, non appena la pagina è caricata.
Ad ‘ onReady  ‘  hai appena vincolato l’esecuzione di una funzione della tua applicazione che potrà contenere quello che preferisci.

Ovviamente il metodo Setup ha tanti altri parametri (come tutti i metodi nella programmazione) puoi consultarli qui,

Terminiamo questo piccolo e breve tutorial su Sencha Touch 1.1 con un bellissimo “Hello World!”

Ext.msg.alert(‘messaggio di benvenuto!’ , ‘ciao!’);

oggetto ext , oggetto msg , metodo dell’oggetto msg (parametro1, parametro2)

E’ chiaro che invece del semplice “Hello World” possiamo inserire qualsiasi metodo o funzionalità, ma l’intento dell’articolo era solo di sciogliere un pochino la sintassi e mostrarti che non è poi tanto differente da JS o jQuery.

Quindi se già hai dimestichezza con Javascript e i suoi framework principali, puoi farcela!

Ti consiglio, se vuoi  fare le tue prime applicazioni con Sencha Touch 1 di leggere la documentazione ufficiale che ti ho linkato sopra e di cominciare ad inserire i componenti che ti servono, e di base ragionare la sintassi come ti ho suggerito.

 

PS. Se invece non hai capito un tubo di quello che ho scritto è perché probabilmente non hai un infarinatura di javascript minima, ma ti aiuto subito consigliandoti questo testo molto completo:

Javascript Guida completa lo sviluppatore

 

Comments

comments

Share on Facebook Share on Google+ Tweet about this on Twitter Share on LinkedIn