Sencha touch: panoramica e orientamento sul codice

Panoramica e Orientamento sul codice

Sencha Touch Speaker: Giuseppe Toto

Cos’è Sencha Touch •  E’ un framework javascript per lo sviluppo multipiattaforma di

applicazioni mobile ad alte prestazioni.

•  E’ possibile utilizzare Sencha Touch per produrre un’esperienza nativa all’interno di un browser o di un imbrido.

•  Sencha Touch supporta dispositivi o  Android, iOS o  Windows Phone o  Microsoft Surface Pro e Rt o  BlackBerry

•  Licenza commerciale (free) e Licenza Open Source (free)

ST basato su Webkit engine

•  Sencha Touch è progettato per funzionare solo su browser webkit. Questo implica che la scelta per gli ambienti di testing desktop è limitato a 2 browser: Safari e Google Chrome (entrambi sono basati su webkit engine).

Panoramica su Sencha Touch

E’ un framework o Pattern architetturale: • Model View Controller

o Basato su javascript

o Paradigma di programmazione orientato ad oggetti

Widget • Comprende una serie di

widget da poter utilizzare e personalizzare nei propri progetti •  Esempi: o  http://docs.sencha.com/touch/

2.3.0/#!/example/kitchen-sink

Manipolare i dati o E’ possibile immagazzinare i dati

all’interno degli “Store”. I store possono sincronizzarsi tramite un webservice (api restful) oppure possono sfruttare il localstorage del browser.

o Gli store possono essere interrogati, filtrati, ordinati, etc.

o Validazione dei campi delle form automatizzato

Temi nativi & Css

Building automatizzato (sencha cmd)

•  Ottimizzato per app native o Supporto framework Cordova o Comprime i file javascript e file css

•  Dispositivi supportati o Apple o Window Phone o Blackberry o Android

Documentazione accurata hJp://docs-‐‑origin.sencha.com/touch/2.3.1/

Build for Mobile and Desktop

hJp://www.sencha.com/products/architect/

Un suo Ide di sviluppo

Si integra anche con altri ide: (è pur sempre un framework javascript

open source)

o Webstorm •  http://www.jetbrains.com/webstorm

•  Permette di sviluppare applicazioni desktop

•  Simile in certi versi a Sencha Touch

•  Stesso ambiente di sviluppo (sencha architect)

Due piccioni con una fava: Sencha Ext Js

Sencha Market

Esperienze con Sencha Touch

Configuriamo Sencha Touch

Download Sencha Touch

Clicca qui per la versione

commerciale

Clicca qui per la versione open source

Di cosa abbiamo bisogno?

1.  Ripple Emulator •  E’ un plugin per il browser Chrome che ci permette di

visualizzare la nostra “pagina web” all’interno di una cover mobile. Le dimensioni della cover possono essere regolate.


2.  Sencha Cmd •  E’ uno strumento a linea di comando che permette

di gestire il ciclo di vita per compilare i vostri progetti in sencha: •  Inizializza, comprime e distribuisce il vostro

progetto


3.  Web server •  Sencha Cmd

Con la linea di comando “sencha web start” (stop per fermarlo)è possibile avviare un web server in pochi istanti sulla directory corrente all’indirizzo http://localhost:1841/

•  XAMPP Un webserver apache che supporta php e mysql

4.  Java Runtime Environment •  Version 1.7 JRE is required for Sencha Cmd features

and for Cordova and PhoneGap access.


5.  Ruby version 1.9.3 – •  Utilizzato per comprimere i file CSS/SASS. (Ruby

version 2.0 doesn't work correctly with Sencha Cmd.) •  Windows: Download Ruby 1.9.3.n from

rubyinstaller.org. Download the RubyInstaller .exe file and run it.

•  Mac: Ruby is pre-installed. You can test which version you have with the ruby -v command. If you have version 2.0, download the Ruby version manager (rvm) and use this command to download and install Ruby: rvm install 1.9.3 --with-gcc=clang Set your PATH variable to point to the Ruby 1.9.3 install directory.

•  Ubuntu: Use sudo apt-get install ruby1.9.3 to download and install Ruby 1.9.3.

Hello world

Quando il documento html è stato caricato, il browser è pronto a lanciare le

istruzioni all’interno della funzione launch

ORIENTIAMOCI

Modelliamo il conceJo di “Carrello Virtuale”

Proprietà: •  prodoJi •  totale

Metodi: •  addProdoJo(…) •  stampaScontrino()

Definire e istanziare una classe in

Sencha Touch

•  Ext.define(…) Per definire una classe:

Per istanziare un oggeJo di una classe:

•  Ext.create(…)

Definiamo la classe “Carrello”

Apriamo un nuovo file e salviamolo in /class/market/Carrello.js

N.B: •  prodoJi.push è un metodo della classe Array di javascript e

permeJe di accodare un elemento all’interno dello stesso array.

•  Ricorda: per ogni variabile definita nel config il framework definisce automaticamente le funzioni set e get

Istanziare la classe

Istanziare la classe •  Per utilizzare la classe Carrello dobbiamo istanziare l’oggeJo aJraverso il metodo Ext.Create(…)

•  Ricordiamoci di salvare la classe nel file di percorso class/market/Carrello.js all’interno della cartella del nostro progeJo.

ESEMPIO COMPLETO: •  Ricordiamoci di salvare la classe nel file di percorso /class/market/Carrello.js •  Per utilizzare la classe Carrello dobbiamo istanziare un oggeJo di tipo Carrello:


Istanzio la classe


Aggiungo i prodoJi {


Recupero il totale {


Verifico la lista dei prodoJi ordinati {

MODELLIAMO ULTERIORMENTE IL CARRELLO VIRTUALE

Creiamo la classe ProdoJo

Classe ProdoJo ProdoJo •  id •  nome •  prezzo •  categoria

Classe ProdoJo

salviamo il file in class/market/ProdoJo.js

Istanziare la classe ProdoJo e aggiungerla al carrello


{

..continua

..continua

{

HELLO WORD 2

Hello world più avanzato

Hello world più avanzato Container •  Html

xtype: “container”

Hello world più avanzato Container

TitleBar

•  html

•  docked:”top”

•  title:”Hello World”

xtype:”titlebar”


Hello world più avanzato Container

TitleBar

•  html

•  docked:”top”

•  title:”Hello World”

xtype:”titlebar”


Bu@on •  text:”change color”

•  align:”right” listeners: {

tap:function(){ //istruzioni per cambiare sfondo colore

} }

soluzione:

soluzione:

{

GESTIRE GLI EVENTI

listeners •  Per caJurare un evento bisogna meJersi in“ascolto” (listern).

•  Sui componenti su cui vogliamo caJurare determinati eventi specifichiamo un listeners (gestore di eventi) in cui definiamo principalmente uno o più eventi da caJurare: •  il tipo di evento da ca@urare (es. tap) •  la funzione da eseguire quando questo evento viene caJurato.

•  Sulla documentazione è possibile consultare l’elenco completo degli eventi che possono essere ascoltati su un determinato componente. •  Ad esempio sul componente “buJon” è possibile caJurare l’evento “tap”

Lista eventi sul componente BuJon hJp://docs.sencha.com/touch/2.3.0/#!/api/Ext.BuJon

Sencha touch: panoramica e orientamento sul codice

Technology

Transcript of Sencha touch: panoramica e orientamento sul codice