0
SESSIONE  LIVE	
Sencha Touch
Speaker:  Giuseppe  Toto
Build for Mobile and Desktop
h8p://www.sencha.com/products/architect/  
•  E’  un  ambiente  di  sviluppo  visuale  che  perme8e  di  proge8are  
applicazioni  mobile  e  desktop  utilizzando  r...
DI  COSA  ABBIAMO  
BISOGNO  ?	
•  Prima  di  utilizzare  Sencha  Architect  bisogno  di  installare:	
•  Java  Se  7  	
•...
Tu1i   noi,   in   certi   momenti,   abbiamo   sentito  
l’esigenza   di   fare   una   lista   di   cose   da   fare,  
...
1°  PARTE	
CREARE  UNA  	
“TO  DO  LIST”
Una   to   do   list   ci   perme1e   di   dare   una   forma  
fisica   ai   mille   pensieri   che   ci   assillano   e  ...
COSA  FAREMO  ?  	
•  Il   nostro   prossimo   obie1ivo   è   creare   un’  
applicazione   mobile   “to   do   list”     ...
COSA  AFFRONTEREMO	
	
•  Vedremo  come  
creare  un  
componente  
LIST  per  
visualizzare  una  
lista  sia  dei  task  ...
COSA  
AFFRONTEREMO  ?	
	
•  Vedremo  come  poter  
memorizzare  i  nostri  
task:	
•  Analizzeremo  il  conce8o  
di  Sto...
COSA  
AFFRONTEREMO  ?	
	
•  Creare   una   form   per  
inserire   un   nuovo   task   e  
modificarlo
COSA  
AFFRONTEREMO  ?	
	
•  Creare   navigation   view  
per  tornare  alla  schermata  
precendete
COSA  
AFFRONTEREMO  ?	
	
•  Creare   tabPanel   per  
passare  da  una  sezione  
all’altra  
LIST	
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List      
Ext.List	
•  E’  utile  per  
renderizzare  una  
quantità  di  dati  
(items)  all’interno  di  
una  lista  scorrevole.	...
Creiamo  una  Lista  in  S.A.	
•  Cerchiamo  nella  Toolbox  il  componente  List  e  trasciniamolo  all’interno  
del  no...
Ext.List:  definire  i  dati	
•  I  dati,  all’interno  della  
lista,  possono  essere  
definiti  in  due  modi:	
1.  defin...
Ext.List:  array  di  ogge8i
•  data    è  un  ogge8o  di  tipo  
array  (parantesi  quadre)  
che  contiene  a  sua  volta  
una  lista  di  ogge8i  d...
Renderizzare  i  dati	
(Ext.XTemplate)	
h8p://docs.sencha.com/touch/2.3.0/#!/api/Ext.XTemplate  
Renderizzare  i  dati	
(Ext.XTemplate)	
•  Ogni  ogge8o  presente  nell’array  “data”  sarà  renderizzato  
all’interno  d...
ESEMPIO
Renderizzare  i  dati	
TEMPLATE	
Questa  è  la  stru8ura  html  che  sarà  applicata  ad  ogni  item  della  nostra  lista
COME  SALVARE  E  
RECUPERARE  I  
TASK?  	
MODEL  –  STORE  -­‐‑  PROXY
MODEL	
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.Model  
MODEL	
•  Un  Model  rappresenta  conce8ualmente  una  particolare  
entità,  un  ogge8o  che  spesso  fa  parte  del  nos...
MODEL	
	
•  Ad  esempio  una  Persona,  una  Macchina,  un  Prodo1o  
sono  entità  che  vorremmo  modellare  nel  nostro ...
ESEMPIO  
ESEMPIO  	
Definiamo  una  classe  User  che  estende  
la  classe  Model  (Ext.data.Model)
ESEMPIO	
•  Vengono  definiti  i  campi  che  costituiscono  la  nostra  
entità.  
ESEMPIO	
•  Eventuali  metodi  di  supporto
ISTANZIARE  UN  MODEL	
•  N.B:  Per  recuperare  e  se8are  il  valore  di  un  field  si  
utilizza  la  funzione  get  e ...
ESERCIZIO
TO  DO  LIST:  MODEL  TASK	
Task	
•  id  (int)	
•  name  (string)	
•  description  (string)	
•  createDate(date)	
•  compl...
Definire  un  MODEL  in  Sencha  
Architect	
1	
2
Definire  un  MODEL  in  Sencha  
Architect	
Cambiamo  il  nome  della  classe  in  
“Task”	
3
TYPE  FIELDS	
•  Per  ogni  campo  definiamo  il  tipo  di  valore  che  potrà  essere  
contenuto:	
•  Da  “Project  Inspe...
Task  Model:	
codice  generato
STORE	
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.Store  
STORE	
Model	
Data  Model	
 Data  Model	
 Data  Model	
Data  Model	
Data  Model	
Data  Model	
Data  Model	
Data  Model	
Da...
STORE	
“WEB  SERVICES  API”	
PROXY	
Model	
Data  Model	
 Data  Model	
 Data  Model	
Data  Model	
Data  Model	
Data  Model	...
STORE	
•  Uno  Store  perme8e  di  memorizzare,  interrogare  e  sincronizzare  i  
nostri  dati	
•  I  dati  possono  ess...
STORE	
•  Lo  store  può  essere  associato  a  un  componente  di  Sencha  come  ad  
esempio  una  Lista  (Ext.List).	
•...
ESEMPIO:	
•  Definiamo  un  
Model  per  
rappresentare  
l’entità  “utente”
ESEMPIO:	
•  Definiamo  lo  store  
“userStore”  
associando  il  Model  
e  un  insieme  di  dati.
ESEMPIO:	
•  Definiamo  un  
componente  
“lista”  a  cui  è  
associato  lo  store  
“userStore”	
•  Definiamo  anche  
un ...
CREARE  UNO  STORE  IN  
SENCHA  ARCHITECT
CREARE  UNO  STORE  IN  
SENCHA  ARCHITECT
CREARE  UNO  STORE  IN  
SENCHA  ARCHITECT	
Assegniamo  il  nome  della  classe
Associare  un  Model  allo  Store	
In  questo  modo  lo  store  potrà  memorizzare  e  interrogaretante  istanze  di  tipo...
PROXY	
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.Proxy  
PROXY	
•  I  proxy  sono  usati  dagli  Stores  per  caricare  e  
salvare  i  Model  data.	
•  I  proxy  si  dividono  pr...
CLIENT  PROXY	
	
•  Local  Storage  Proxy:	
Salva  i  dati  nel  localstorage  del  Browser  (se  lo  supporta)	
	
•  Memo...
SERVER  PROXY	
	
•  Proxy  Ajax	
Invia  richieste  (GET  &  POST)  al  server  dello  stesso  
dominio	
•  Proxy  JSonP	
 ...
PROXY  
LOCALSTORAGE	
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage  
PROXY  LOCALSTORAGE	
h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage  	
•  Sfru8a  il  loca...
ASSOCIARE  UN  PROXY  ALLO  STORE	
•  Nella  ToolBox  cercare  il  
componente  “Localstorage  
Proxy”  e  trascinarlo  su...
•  Da  ora  in  poi  tu8i  i  task  
(Model  Task)  che  andremo  a  
memorizzare  all’interno  del  
TaskStore  saranno  ...
Generare  dati  di  
test
Generiamo  dei  dati  di  test  
all’interno  dello  Store	
•  Selezioniamo  TaskStore  dal  Project  Inspector	
•  Selezi...
Risultato:
Anteprima:
NAVIGATION  
VIEW	
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.navigation.View  	
Ext.navigation.View	
xtype:  navigation...
Ext.navigation.View	
•  Perme8e  di  navigare  tra  diverse  view	
•  Possiede  principalmente    due  funzione:	
•  “push...
ESEMPIO
Aggiungere  una  Navigation  
View  al  nostro  proge8o	
•  La  navigationView  ci  servirà  affinchè  l’utente,  dopo  aver...
Aggiungere  una  Navigation  
View  al  nostro  proge8o	
•  Cerchiamo  dalla  Toolbox  il  
componente  Navigation  
Vie” ...
Configuriamo  la  NavigationBar
Configuriamo  la  NavigationBar:  
il  Titolo	
•  Per  far  apparire  il  titolo  sulla  NavigatoBar  in  base  alla  View ...
OVERRIDE
COME  SALVARE  UN  
TASK  ?
CREARE  IL  PULSANTE  CHE  APRIRA’  LA  FORM  
CREARE  LA  FORM
CATTURARE  L’EVENTO  TAP  PER  APRIRE  LA  FORM
CATTURARE  L’EVENTO  TAP  E  SALVARE  
IL  TASK  NELLO  STORE
 	
BUTTON	
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.Bu8on  	
Ext.Bu8on	
xtype:  bu8on
Abilitare  la  navigationBar	
•  Per  far  aggiungere  il  pulsante  ADD  sulla  Navigation  View  
dobbiamo  abilitare  l...
AGGIUNGERE  il  pulsante  ADD	
•  Cerchiamo  sulla  ToolBox  il  
componente  Bu1on  e  trasciniamolo  
sulla  navigationB...
Bu8on  ADD:  Allineamento	
•  Per  allineare  il  pulsante  sulla  destra  facciamo  click  con  il  
mouse  sul  pulsante...
FORM  PANEL	
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.form.Panel  	
Ext.form.Panel	
xtype:  formpanel	
h8p://docs-­‐‑o...
FORM  PANEL	
•  Il  Form  panel  rappresenta  un  insieme  di  campi,  de8i  
anche  fields.  	
•  Fornisce  una  serie  di...
FORM  PANEL:  FIELD  SET	
•  All’interno  di  una  form  possiamo  inserire  più  “gruppi”  di  
campi.  	
•  Un  gruppo  ...
FORM  PANEL  in  S.T.	
•  Istanziamo  la  classe  
FORM  PANEL  in  S.T.	
•  Definiamo    un  
component  fieldset  
che  raggruppa  i  
campi  della  form
FORM  PANEL  in  S.T.	
•  Possiamo  avere  
diverse  tipologie  di  
campi  da  inserire  
nella  form:	
•  textfield	
•  e...
FIELD	
•  All’interno  della  form  possiamo  definire  diversi  tipologie  di  
field	
h8p://docs-­‐‑origin.sencha.com/touc...
Creare  una  FORM  in  	
SENCHA  ARCHITECT
Creare  una  FORM  in  S.A.	
•  Aggiungiamo  un  componente  FORM  PANEL    nel  nostro  
proge8o  e  rinominiamolo  in  T...
Aggiungiamo  i  CAMPI  nella  
form	
1.  Aggiungiamo  all’interno  
della  form  un  
componente  fieldset.	
2.  All’intern...
risultato
Aggiungiamo  i  CAMPI  nella  
form	
	
•  Ogni  field    all’interno  della  form  è  
accompagnato  da  una  label  e  dal...
Configuriamo  il  campo  Priority  
(SelectField)	
h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Select-­‐‑cfg-­‐‑optio...
Field  Priority  (selectedField)	
•  priority  è  un  campo  di  tipo  select,  ovvero  l’utente  deve  poter  
selezionar...
Field  Priority  (selectedField)	
	
•  Ogni  record  presente  nell’array  options  deve  avere  2  campi:	
•  text:  è  i...
ALIAS	
•  Per  istanziare  una  classe  invece  di  utilizzare  il  suo  nome  
completo  possiamo  far  uso  di  un  alia...
ALIAS:  esempio	
	
associamo  un  alias  alla  classe  TaskFormEdit  dal  config:	
	
Da  questo  in  momento  poi  possiamo...
Generare  id  univoci	
Quando  salviamo  il  task  model  nello  storage  nella  
console  del  browser  può  uscire  ques...
Configurare  il  
generatore  di  id	
Impostiamo  in  type  il  valore  “uuid”	
1	
2
Sencha touch: Sviluppare un'app - 4° parte
Upcoming SlideShare
Loading in...5
×

Sencha touch: Sviluppare un'app - 4° parte

857

Published on

Talk:
Sencha Touch

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
857
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Sencha touch: Sviluppare un'app - 4° parte"

  1. 1. SESSIONE  LIVE Sencha Touch Speaker:  Giuseppe  Toto
  2. 2. Build for Mobile and Desktop h8p://www.sencha.com/products/architect/  
  3. 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. 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. 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. 6. 1°  PARTE CREARE  UNA   “TO  DO  LIST”
  7. 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. 8. COSA  FAREMO  ?   •  Il   nostro   prossimo   obie1ivo   è   creare   un’   applicazione   mobile   “to   do   list”     multi-­‐‑ pia1aforma  tramite  Sencha  Architect.
  9. 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. 10. COSA   AFFRONTEREMO  ? •  Vedremo  come  poter   memorizzare  i  nostri   task: •  Analizzeremo  il  conce8o   di  Store  e  Proxy.   •  Analizzeremo  il  conce8o   di  Model. STORE
  11. 11. COSA   AFFRONTEREMO  ? •  Creare   una   form   per   inserire   un   nuovo   task   e   modificarlo
  12. 12. COSA   AFFRONTEREMO  ? •  Creare   navigation   view   per  tornare  alla  schermata   precendete
  13. 13. COSA   AFFRONTEREMO  ? •  Creare   tabPanel   per   passare  da  una  sezione   all’altra  
  14. 14. LIST h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.dataview.List      
  15. 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. 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. 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. 18. Ext.List:  array  di  ogge8i
  19. 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. 20. Renderizzare  i  dati (Ext.XTemplate) h8p://docs.sencha.com/touch/2.3.0/#!/api/Ext.XTemplate  
  21. 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. 22. ESEMPIO
  23. 23. Renderizzare  i  dati TEMPLATE Questa  è  la  stru8ura  html  che  sarà  applicata  ad  ogni  item  della  nostra  lista
  24. 24. COME  SALVARE  E   RECUPERARE  I   TASK?   MODEL  –  STORE  -­‐‑  PROXY
  25. 25. MODEL h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.Model  
  26. 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. 27. MODEL •  Ad  esempio  una  Persona,  una  Macchina,  un  Prodo1o   sono  entità  che  vorremmo  modellare  nel  nostro  sistema.
  28. 28. ESEMPIO  
  29. 29. ESEMPIO   Definiamo  una  classe  User  che  estende   la  classe  Model  (Ext.data.Model)
  30. 30. ESEMPIO •  Vengono  definiti  i  campi  che  costituiscono  la  nostra   entità.  
  31. 31. ESEMPIO •  Eventuali  metodi  di  supporto
  32. 32. ISTANZIARE  UN  MODEL •  N.B:  Per  recuperare  e  se8are  il  valore  di  un  field  si   utilizza  la  funzione  get  e  set
  33. 33. ESERCIZIO
  34. 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. 35. Definire  un  MODEL  in  Sencha   Architect 1 2
  36. 36. Definire  un  MODEL  in  Sencha   Architect Cambiamo  il  nome  della  classe  in   “Task” 3
  37. 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. 38. Task  Model: codice  generato
  39. 39. STORE h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.Store  
  40. 40. STORE Model Data  Model Data  Model Data  Model Data  Model Data  Model Data  Model Data  Model Data  Model Data  Model
  41. 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. 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. 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. 44. ESEMPIO: •  Definiamo  un   Model  per   rappresentare   l’entità  “utente”
  45. 45. ESEMPIO: •  Definiamo  lo  store   “userStore”   associando  il  Model   e  un  insieme  di  dati.
  46. 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. 47. CREARE  UNO  STORE  IN   SENCHA  ARCHITECT
  48. 48. CREARE  UNO  STORE  IN   SENCHA  ARCHITECT
  49. 49. CREARE  UNO  STORE  IN   SENCHA  ARCHITECT Assegniamo  il  nome  della  classe
  50. 50. Associare  un  Model  allo  Store In  questo  modo  lo  store  potrà  memorizzare  e  interrogaretante  istanze  di  tipo  Model   Task
  51. 51. PROXY h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.Proxy  
  52. 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. 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. 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. 55. PROXY   LOCALSTORAGE h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.data.proxy.LocalStorage  
  56. 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. 57. ASSOCIARE  UN  PROXY  ALLO  STORE •  Nella  ToolBox  cercare  il   componente  “Localstorage   Proxy”  e  trascinarlo  sul   “TaskStore”  presente  nel   Project  Inspector.
  58. 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. 59. Generare  dati  di   test
  60. 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. 61. Risultato:
  62. 62. Anteprima:
  63. 63. NAVIGATION   VIEW h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.navigation.View   Ext.navigation.View xtype:  navigationview
  64. 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. 65. ESEMPIO
  66. 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. 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. 68. Configuriamo  la  NavigationBar
  69. 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. 70. OVERRIDE
  71. 71. COME  SALVARE  UN   TASK  ?
  72. 72. CREARE  IL  PULSANTE  CHE  APRIRA’  LA  FORM  
  73. 73. CREARE  LA  FORM
  74. 74. CATTURARE  L’EVENTO  TAP  PER  APRIRE  LA  FORM
  75. 75. CATTURARE  L’EVENTO  TAP  E  SALVARE   IL  TASK  NELLO  STORE
  76. 76.   BUTTON h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.Bu8on   Ext.Bu8on xtype:  bu8on
  77. 77. Abilitare  la  navigationBar •  Per  far  aggiungere  il  pulsante  ADD  sulla  Navigation  View   dobbiamo  abilitare  la  navigationBar
  78. 78. AGGIUNGERE  il  pulsante  ADD •  Cerchiamo  sulla  ToolBox  il   componente  Bu1on  e  trasciniamolo   sulla  navigationBar.
  79. 79. 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”.
  80. 80. 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  
  81. 81. 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.
  82. 82. 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)  
  83. 83. FORM  PANEL  in  S.T. •  Istanziamo  la  classe  
  84. 84. FORM  PANEL  in  S.T. •  Definiamo    un   component  fieldset   che  raggruppa  i   campi  della  form
  85. 85. FORM  PANEL  in  S.T. •  Possiamo  avere   diverse  tipologie  di   campi  da  inserire   nella  form: •  textfield •  emailfield •  passwordfield •  e  tanti  altri   (leggere  la  doc)
  86. 86. FIELD •  All’interno  della  form  possiamo  definire  diversi  tipologie  di   field h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.field.Field  
  87. 87. Creare  una  FORM  in   SENCHA  ARCHITECT
  88. 88. Creare  una  FORM  in  S.A. •  Aggiungiamo  un  componente  FORM  PANEL    nel  nostro   proge8o  e  rinominiamolo  in  TaskForm  (userclassname  e  id)
  89. 89. 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)
  90. 90. risultato
  91. 91. 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)
  92. 92. Configuriamo  il  campo  Priority   (SelectField) h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Select-­‐‑cfg-­‐‑options  
  93. 93. 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  
  94. 94. 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  
  95. 95. ALIAS •  Per  istanziare  una  classe  invece  di  utilizzare  il  suo  nome   completo  possiamo  far  uso  di  un  alias  (nomigliolo).
  96. 96. 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.*”
  97. 97. 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.
  98. 98. Configurare  il   generatore  di  id Impostiamo  in  type  il  valore  “uuid” 1 2
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×