sencha touch: sviluppare un'app - 4° parte

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

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”

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

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   che  continuano  a  reclamare  la  nostra  a1enzione.

TO  DO  LIST

COSA  FAREMO  ?  

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

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  

COSA  AFFRONTEREMO  ?

•  Vedremo  come  poter  memorizzare  i  nostri  task: •  Analizzeremo  il  conce8o  di  Store  e  Proxy.

  •  Analizzeremo  il  conce8o  di  Model.

STORE

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.

•  Su  ogni  item    possiamo  ca1urare  l’evento  “itemtap”(e  tanti  altri)

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

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)

Ext.List:  array  di  ogge8i

•  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

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

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

MODEL

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

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  set

ESERCIZIO

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    

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

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 Data  Model

STORE

“WEB  SERVICES  API”

PROXY

Model

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

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

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  template  su  come  visualizzare  i  singoli  record  della  lista

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  Model  Task

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  principalmente  in:

•  Proxy  di  tipo  Client: •  I  dati  sono  memorizzati/interrogati  localmente

•  Proxy  di  tipo  Server: •  I  dati  sono  memorizzati/interrogati  sul  server

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

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)

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

ASSOCIARE  UN  PROXY  ALLO  STORE

•  Nella  ToolBox  cercare  il  componente  “Localstorage  Proxy”  e  trascinarlo  sul  “TaskStore”  presente  nel  Project  Inspector.

•  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

Generare  dati  di  test

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

Risultato:

Anteprima:

NAVIGATION  VIEW

h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.navigation.View  

Ext.navigation.View xtype:  navigationview

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)

ESEMPIO

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

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

Configuriamo  la  NavigationBar

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.

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  la  navigationBar

AGGIUNGERE  il  pulsante  ADD •  Cerchiamo  sulla  ToolBox  il  

componente  Bu1on  e  trasciniamolo  sulla  navigationBar.

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

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  

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.

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)  

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 •  emailfield •  passwordfield •  e  tanti  altri  (leggere  la  doc)

FIELD

•  All’interno  della  form  possiamo  definire  diversi  tipologie  di  field

h8p://docs-­‐‑origin.sencha.com/touch/2.3.1/#!/api/Ext.field.Field  

Creare  una  FORM  in   SENCHA  ARCHITECT

Creare  una  FORM  in  S.A. •  Aggiungiamo  un  componente  FORM  PANEL    nel  nostro  

proge8o  e  rinominiamolo  in  TaskForm  (userclassname  e  id)

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)

risultato

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)

Configuriamo  il  campo  Priority  (SelectField)

h8p://docs.sencha.com/touch/2.3.1/#!/api/Ext.field.Select-­‐‑cfg-­‐‑options  

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  

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  

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

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

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.

Configurare  il  generatore  di  id

Impostiamo  in  type  il  valore  “uuid”

1

2