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


STORE

“WEB SERVICES API”

PROXY

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

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.


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.


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

Sencha touch: Sviluppare un'app - 4° parte

Technology

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