Talk: Sencha Touch Articolo di riferimento: www.giuseppetoto.it/mobile/sencha-touch-2-build-mobile-web-apps-html5

1. Panoramica e Orientamento sul codice
Sencha Touch
Speaker: Giuseppe Toto

2. 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)

3. 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).

4. Panoramica su Sencha
Touch

5. E’ un framework
o Pattern architetturale:
• Model View Controller
o Basato su javascript
o Paradigma di programmazione
orientato ad oggetti

6. 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

7. 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

8. Temi nativi & Css

9. Temi nativi & Css

10. 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

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

12. Build for Mobile and Desktop
hJp://www.sencha.com/products/architect/
Un suo Ide di sviluppo

13. Si integra anche con altri ide:
(è pur sempre un framework javascript
open source)
o Webstorm
• http://www.jetbrains.com/webstorm

14. • 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

15. Sencha Market

16. Esperienze con
Sencha Touch

17. Configuriamo Sencha
Touch

18. Download Sencha
Touch
Clicca qui per la
versione
commerciale
Clicca qui per
la versione
open source

19. 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.

20. Di cosa abbiamo
bisogno?
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

21. Di cosa abbiamo
bisogno?
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.

22. Di cosa abbiamo
bisogno?
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.

23. Hello world
Quando il documento html è stato
caricato, il browser è pronto a lanciare le
istruzioni all’interno della funzione
launch

24. ORIENTIAMOCI

25. Modelliamo il conceJo di
“Carrello Virtuale”
Proprietà:
• prodoJi
• totale
Metodi:
• addProdoJo(…)
• stampaScontrino()

26. Definire e istanziare una
classe in
Sencha Touch

27. • Ext.define(…)
Per definire una classe:
Per istanziare un oggeJo di una classe:
• Ext.create(…)

28. Definiamo la classe “Carrello”
Apriamo un nuovo file e salviamolo in /class/
market/Carrello.js

29. 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

30. 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

31. 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

32. 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

33. 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

34. 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

35. 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

36. 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

37. Istanziare la classe

38. 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.

39. 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:

40. 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

41. 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:
Aggiungo i
prodoJi
{

42. 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:
Recupero il
totale
{

43. 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:
Verifico la
lista dei
prodoJi
ordinati
{

44. MODELLIAMO
ULTERIORMENTE IL
CARRELLO VIRTUALE
Creiamo la classe ProdoJo

45. Classe ProdoJo
ProdoJo
• id
• nome
• prezzo
• categoria

46. Classe ProdoJo
salviamo il file in class/market/ProdoJo.js

47. Istanziare la classe ProdoJo e aggiungerla al carrello

48. Istanziare la classe ProdoJo e aggiungerla al carrello

49. Istanziare la classe ProdoJo e aggiungerla al carrello
{

50. Istanziare la classe ProdoJo e aggiungerla al carrello

51. Istanziare la classe ProdoJo e aggiungerla al carrello

52. Istanziare la classe ProdoJo e aggiungerla al carrello
{

53. Istanziare la classe ProdoJo e aggiungerla al carrello

54. ..continua

55. ..continua

56. ..continua

57. ..continua
{

58. HELLO WORD 2

59. Hello world più avanzato

60. Hello world più avanzato
Container
• Html
xtype: “container”

61. Hello world più avanzato
Container
TitleBar
• html
• docked:”top”
• title:”Hello
World”
xtype:”titlebar”
xtype: “container”

62. Hello world più avanzato
Container
TitleBar
• html
• docked:”top”
• title:”Hello
World”
xtype:”titlebar”
xtype: “container”
Bu@on
• text:”change
color”
• align:”right”
listeners: {
tap:function(){
//istruzioni per cambiare sfondo colore
}
}

63. soluzione:

64. soluzione:

65. soluzione:

66. soluzione:

67. soluzione:

68. soluzione:

69. soluzione:

70. soluzione:

71. soluzione:

72. soluzione:

73. soluzione:

74. soluzione:

75. soluzione:

76. soluzione:

77. soluzione:

78. soluzione:
{

79. soluzione:
{

80. GESTIRE GLI EVENTI

81. 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”

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