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

1. SESSIONE LIVE
Sencha Touch
Speaker: Giuseppe Toto

2. Build for Mobile and Desktop
h8p://www.sencha.com/products/architect/

3. • E’ un ambiente di sviluppo visuale che perme8e di proge8are
applicazioni mobile e desktop utilizzando rispe8ivamente i
framework Sencha Touch 2 e Sencha ExtJs 4
• E’ disponibile per Windows, Mac e Linux
• E’ disponibile a pagamento con una versione di prova di 30 giorni
(rinnovabile)
• La licenza costa a8ualmente 294,00€ circa.

4. DI COSA ABBIAMO
BISOGNO ?
• Prima di utilizzare Sencha Architect bisogno di installare:
• Java Se 7
• Test Command: “java –version”
• Ruby
• Test Command: “ruby –v”
• Apache Ant (per fare il building per dispositivi android)
• Test Command: “ant – version”

5. Tu1i noi, in certi momenti, abbiamo sentito
l’esigenza di fare una lista di cose da fare,
ovvero una to do list.
TO DO LIST

6. 1° PARTE
CREARE UNA
“TO DO LIST”

7. Una to do list ci perme1e di dare una forma
fisica ai mille pensieri che ci assillano e che
continuano a reclamare la nostra a1enzione.
TO DO LIST

8. COSA FAREMO ?
• Il nostro prossimo obie1ivo è creare un’
applicazione mobile “to do list” multi-­‐‑
pia1aforma tramite Sencha Architect.

9. COSA AFFRONTEREMO
• Vedremo come
creare un
componente
LIST per
visualizzare una
lista sia dei task
a1ivi e sia di
quelli completati.
h8p://docs.sencha.com/touch/2.3.0/#!/api/Ext.dataview.List

10. COSA
AFFRONTEREMO ?
• Vedremo come poter
memorizzare i nostri
task:
• Analizzeremo il conce8o
di Store e Proxy.
• Analizzeremo il conce8o
di Model.
STORE

11. COSA
AFFRONTEREMO ?
• Creare una form per
inserire un nuovo task e
modificarlo

12. COSA
AFFRONTEREMO ?
• Creare navigation view
per tornare alla schermata
precendete

13. COSA
AFFRONTEREMO ?
• Creare tabPanel per
passare da una sezione
all’altra

14. LIST
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List

15. Ext.List
• E’ utile per
renderizzare una
quantità di dati
(items) all’interno di
una lista scorrevole.
• Su ogni item
possiamo ca1urare
l’evento “itemtap”(e
tanti altri)

16. Creiamo una Lista in S.A.
• Cerchiamo nella Toolbox il componente List e trasciniamolo all’interno
del nostro proge8o
• Assegniamo il valore “TaskList” a userClassName

17. Ext.List: definire i dati
• I dati, all’interno della
lista, possono essere
definiti in due modi:
1. definendo un
array di ogge1i
all’interno della
variabile data del
componente
2. Specificando uno
Store (vedremo
più avanti)

18. Ext.List: array di ogge8i

19. • data è un ogge8o di tipo
array (parantesi quadre)
che contiene a sua volta
una lista di ogge8i da noi
definiti, ovvero una lista
di task.
Ext.List: array di ogge8i

20. Renderizzare i dati
(Ext.XTemplate)
h8p://docs.sencha.com/touch/2.3.0/#!/api/Ext.XTemplate

21. Renderizzare i dati
(Ext.XTemplate)
• Ogni ogge8o presente nell’array “data” sarà renderizzato
all’interno della lista.
• Possiamo personalizzare la stru8ura grafica di ogni
elemento della lista definendo l’html all’interno della
proprietà itemTpl.
• Nel definire il template possiamo far uso dei tag html/css
e di tag sostitutivi. Questi ultimi perme8ono di rendere
il template dinamico sostituendo i tag con i valori delle
variabili dell’ogge8o.

22. ESEMPIO

23. Renderizzare i dati
TEMPLATE
Questa è la stru8ura html che sarà applicata ad ogni item della nostra lista

24. COME SALVARE E
RECUPERARE I
TASK?
MODEL – STORE -­‐‑ PROXY

25. MODEL
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.Model

26. MODEL
• Un Model rappresenta conce8ualmente una particolare
entità, un ogge8o che spesso fa parte del nostro mondo
reale e che vogliamo essere in grado di modellare.
• Contiene principalmente “l’informazione” espressa
mediante le sue variabili (fields).
• Per recuperare un field si utilizza la funzi
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.Model

27. MODEL
• Ad esempio una Persona, una Macchina, un Prodo1o
sono entità che vorremmo modellare nel nostro sistema.

28. ESEMPIO

29. ESEMPIO
Definiamo una classe User che estende
la classe Model (Ext.data.Model)

30. ESEMPIO
• Vengono definiti i campi che costituiscono la nostra
entità.

31. ESEMPIO
• Eventuali metodi di supporto

32. ISTANZIARE UN MODEL
• N.B: Per recuperare e se8are il valore di un field si
utilizza la funzione get e set

33. ESERCIZIO

34. TO DO LIST: MODEL TASK
Task
• id (int)
• name (string)
• description (string)
• createDate(date)
• completedDate(date)
• priority (int)
• isCompleted (boolean)
L’ogge8o Task rappresenta le informazioni che saranno memorizzate per ogni
task che andremo a creare

35. Definire un MODEL in Sencha
Architect
1
2

36. Definire un MODEL in Sencha
Architect
Cambiamo il nome della classe in
“Task”
3

37. TYPE FIELDS
• Per ogni campo definiamo il tipo di valore che potrà essere
contenuto:
• Da “Project Inspector-­‐‑>Models-­‐‑>Task” selezioniamo un field e
nella sezione “Config” clicchiamo su “type” selezionando uno
dei valori disponibile all’interno della select.
Esempio:
Task
• id (int)
• name (string)
• description (string)
• createDate(date)
• completedDate(date)
• priority (int)
• isCompleted (boolean)

38. Task Model:
codice generato

39. STORE
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.Store

40. STORE
Model
Data Model
Data Model
Data Model
Data Model
Data Model
Data Model
Data Model
Data Model
Data Model

41. STORE
“WEB SERVICES API”
PROXY
Model
Data Model
Data Model
Data Model
Data Model
Data Model
Data Model
Data Model
Data Model
Data Model

42. STORE
• Uno Store perme8e di memorizzare, interrogare e sincronizzare i
nostri dati
• I dati possono essere caricati o salvati tramite un “Proxy” (vedremo
tra poco che cosa si intende per Proxy)
• Lo store fornisce funzioni di ordinamento, di filtro e di
interrogazione.
• Ogni record dello store non è altro che un’istanza di un Model
(data model) che abbiamo precedentemente definito
• Uno Store incapsula un insieme di Model.

43. STORE
• Lo store può essere associato a un componente di Sencha come ad
esempio una Lista (Ext.List).
• La lista interrogherà automaticamente lo store visualizzando i
dati al suo interno.
Task Model
taskStore

44. ESEMPIO:
• Definiamo un
Model per
rappresentare
l’entità “utente”

45. ESEMPIO:
• Definiamo lo store
“userStore”
associando il Model
e un insieme di dati.

46. ESEMPIO:
• Definiamo un
componente
“lista” a cui è
associato lo store
“userStore”
• Definiamo anche
un template su
come visualizzare i
singoli record
della lista

47. CREARE UNO STORE IN
SENCHA ARCHITECT

48. CREARE UNO STORE IN
SENCHA ARCHITECT

49. CREARE UNO STORE IN
SENCHA ARCHITECT
Assegniamo il nome della classe

50. Associare un Model allo Store
In questo modo lo store potrà memorizzare e interrogaretante istanze di tipo Model
Task

51. PROXY
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.Proxy

52. PROXY
• I proxy sono usati dagli Stores per caricare e
salvare i Model data.
• I proxy si dividono principalmente in:
• Proxy di tipo Client:
• I dati sono memorizzati/interrogati
localmente
• Proxy di tipo Server:
• I dati sono memorizzati/interrogati sul
server

53. CLIENT PROXY
• Local Storage Proxy:
Salva i dati nel localstorage del Browser (se lo supporta)
• Memory Proxy:
Salva in dati in memoria. Qualsiasi dato è perso quando la
pagina verrà effe1uato il refresh

54. SERVER PROXY
• Proxy Ajax
Invia richieste (GET & POST) al server dello stesso
dominio
• Proxy JSonP
Perme8e di effe8uare richieste su altri server remoti
(cross-­‐‑domain request)

55. PROXY
LOCALSTORAGE
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage

56. PROXY LOCALSTORAGE
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage
• Sfru8a il localstorage del Browser per memorizzare
localmente i data Model sul client browser.
• Il localstorage è una nuova feature introdo8a con HTML5
che immagazzina coppie di “chiave-­‐‑valore”.
• Nel localstorage non possono essere memorizzate stru8ure
complesse, così il proxy localstorage sfru8a
automaticamente la tecnica della serializzazione/
deserializzazione per salvare e recuperare i dati

57. ASSOCIARE UN PROXY ALLO STORE
• Nella ToolBox cercare il
componente “Localstorage
Proxy” e trascinarlo sul
“TaskStore” presente nel
Project Inspector.

58. • Da ora in poi tu8i i task
(Model Task) che andremo a
memorizzare all’interno del
TaskStore saranno
memorizzati
automaticamente nella
memoria locale del nostro
browser.
• N.B: questo tipo di proxy funziona
solo se il browser supporta il
localhostare
ASSOCIARE UN PROXY ALLO STORE

59. Generare dati di
test

60. Generiamo dei dati di test
all’interno dello Store
• Selezioniamo TaskStore dal Project Inspector
• Selezioniamo “data” dal Config
• L’opzione mock
up only fa si che
i dati di test non
saranno caricati
al momento
della
pubblicazione
dell’app

61. Risultato:

62. Anteprima:

63. NAVIGATION
VIEW
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.navigation.View
Ext.navigation.View
xtype: navigationview

64. Ext.navigation.View
• Perme8e di navigare tra diverse view
• Possiede principalmente due funzione:
• “push” per passare alla successiva view
• “pop” tornare a quella precedente.
• Si occupa di creare effe8i di animazione di transizione
(gli effe8i possono essere personalizzati)

65. ESEMPIO

66. Aggiungere una Navigation
View al nostro proge8o
• La navigationView ci servirà affinchè l’utente, dopo aver
cliccato su un task e visualizzato la scheda de8aglio (push)
potrà tornare indietro tramite il pulsante BACK (pop).

67. Aggiungere una Navigation
View al nostro proge8o
• Cerchiamo dalla Toolbox il
componente Navigation
Vie” e trasciniamolo sul
Project Inspector
• Assegniamo il componente
TaskList all’interno di
MyNavigationView

68. Configuriamo la NavigationBar

69. Configuriamo la NavigationBar:
il Titolo
• Per far apparire il titolo sulla NavigatoBar in base alla View
corrente, bisogna assegnare,alla view, il valore della proprietà
title.

70. OVERRIDE

71. COME SALVARE UN
TASK ?

73. CREARE IL PULSANTE CHE APRIRA’ LA FORM

74. CREARE LA FORM

75. CATTURARE L’EVENTO TAP PER APRIRE LA FORM

76. CATTURARE L’EVENTO TAP E SALVARE
IL TASK NELLO STORE

77.
BUTTON
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.Bu8on
Ext.Bu8on
xtype: bu8on

78. Abilitare la navigationBar
• Per far aggiungere il pulsante ADD sulla Navigation View
dobbiamo abilitare la navigationBar

79. AGGIUNGERE il pulsante ADD
• Cerchiamo sulla ToolBox il
componente Bu1on e trasciniamolo
sulla navigationBar.

80. Bu8on ADD: Allineamento
• Per allineare il pulsante sulla destra facciamo click con il
mouse sul pulsante e cambiamo il valore della proprietà
align su “right”.

81. FORM PANEL
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.form.Panel
Ext.form.Panel
xtype: formpanel
h8p://docs-­‐‑origin.sencha.com/touch/2.3.0/#!/guide/forms

82. FORM PANEL
• Il Form panel rappresenta un insieme di campi, de8i
anche fields.
• Fornisce una serie di metodi che perme8ono il
recupero e il salvataggio dei dati.

83. FORM PANEL: FIELD SET
• All’interno di una form possiamo inserire più “gruppi” di
campi.
• Un gruppo di campi è rappresentato dal componente
“FIELDSET”.
• La particolarità del FieldSet e che possiamo impostare un titolo
generale (title) e una label subito so8o i campi (instructions)

84. FORM PANEL in S.T.
• Istanziamo la classe

85. FORM PANEL in S.T.
• Definiamo un
component fieldset
che raggruppa i
campi della form

86. FORM PANEL in S.T.
• Possiamo avere
diverse tipologie di
campi da inserire
nella form:
• textfield
• emailfield
• passwordfield
• e tanti altri
(leggere la doc)

87. FIELD
• All’interno della form possiamo definire diversi tipologie di
field
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.field.Field

88. Creare una FORM in
SENCHA ARCHITECT

89. Creare una FORM in S.A.
• Aggiungiamo un componente FORM PANEL nel nostro
proge8o e rinominiamolo in TaskForm (userclassname e id)

90. Aggiungiamo i CAMPI nella
form
1. Aggiungiamo all’interno
della form un
componente fieldset.
2. All’interno del fieldset
aggiungiamo i seguenti
“field”:
• name (textfield)
• description (textfield)
• priority (selectfield)

91. risultato

92. Aggiungiamo i CAMPI nella
form
• Ogni field all’interno della form è
accompagnato da una label e dal
campo input.
• Per ogni field
• se8iamo il corrispe8ivo nome
nella proprietà “name”
• definiamo la larghezza della
label a 40% (widthlabel)

93. Configuriamo il campo Priority
(SelectField)
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Select-­‐‑cfg-­‐‑options

94. Field Priority (selectedField)
• priority è un campo di tipo select, ovvero l’utente deve poter
selezionare il suo valore da una lista di valori predefiniti.
• Per se8are l’elenco dei valori bisogna configurare la proprietà
“options” e definire un array.
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Select-­‐‑cfg-­‐‑options

95. Field Priority (selectedField)
• Ogni record presente nell’array options deve avere 2 campi:
• text: è il valore testuale che l’utente vedrà nella select
• value: è il valore che viene inviato dalla form quando l’utente
seleziona la voce corrispondente.
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Select-­‐‑cfg-­‐‑options

96. ALIAS
• Per istanziare una classe invece di utilizzare il suo nome
completo possiamo far uso di un alias (nomigliolo).

97. ALIAS: esempio
associamo un alias alla classe TaskFormEdit dal config:
Da questo in momento poi possiamo istanziare
la classe usando l’alias : widget.TaskFormEdit
Tu1i gli alias che definiamo per le classi view finiscono so1o il namespace
“widget.*”

98. Generare id univoci
Quando salviamo il task model nello storage nella
console del browser può uscire questo warning:
Your identifier generation strategy for the
model does not ensure unique id'ʹs. Please
use the UUID strategy, or implement your
own identifier strategy with the flag
isUnique.
Di default sencha utilizza un generatore di id semplificato che
potrebbe però portare a dei confli8i quando si memorizzano molti
dati.
Per eliminare il problema dobbiamo usare un altro sistema generatore
di id chiamato: uuid.

99. Configurare il
generatore di id
Impostiamo in type il valore “uuid”
1
2