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