Sencha touch: Sviluppare un'app - 4° parte
0 likes1,684 views
Il documento descrive Sencha Architect, un ambiente di sviluppo visuale per creare applicazioni mobili e desktop utilizzando i framework Sencha Touch e ExtJS. Viene presentato un progetto per sviluppare un'app 'to do list' e vengono trattati vari aspetti come la creazione di componenti, gestione dei dati tramite store e proxy, e l'implementazione di funzionalità come la navigazione e i moduli per l'inserimento dei task. Si discutono anche le pratiche per garantire che i task siano salvati in modo efficace utilizzando l'archiviazione locale e strategie di generazione di identificatori univoci.
Sencha touch: Sviluppare un'app - 4° parte
- 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
- 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
- 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
- 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)
- 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
- 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
- 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
- 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