Contenuto
- Genera ed esegui l'applicazione demo
- Il pacchetto dati
- I componenti della vista
- Creazione di moduli
- Costruire il controller
- Creazione di negozi e metodi statici
Se sei interessato a imparare come creare un'app, il framework Sencha Touch semplifica la creazione di fantastiche applicazioni multipiattaforma abilitate al tocco. Lo useremo per creare "Ho bisogno del mio ombrello?", Un'app che utilizza le informazioni meteorologiche da http://api.worldweatheronline.com per determinare se hai bisogno del suddetto ombrello.
Puoi vedere l'app stessa qui, mentre il codice può essere trovato in questo repository GitHub: il soluzione-tutorial directory contiene il codice grezzo, il finale directory il codice più un modello Sass. Inoltre, il goodies-tutorial la directory nel repository contiene i file necessari durante il tutorial.
Genera ed esegui l'applicazione demo
Inizia creando una cartella sencha da qualche parte sul tuo disco rigido. Scarica il framework Sencha Touch 2.2.1 ed estrailo nel file appena creato sencha cartella. Ora crea la cartella per la tua app. Ho chiamato mio dinmu dato che è più corto di "DoINeedMyUmbrella", ma dipende da te.
Ora apri la riga di comando (prompt di MS-DOS o terminale), vai alla cartella del framework Sencha (cd sencha / touch-2.2.x cartella) ed eseguire il seguente comando per generare la struttura delle cartelle Sencha Touch MVC:
sencha genera app -name Dinmu -path ../dinmu
Questo comando genera la struttura MVC completa della tua app. Ci vuole uno spazio dei nomi Dinmu, per aggiungere un prefisso a tutte le tue classi. Rivedi la struttura delle cartelle che ha creato.
Ora è il momento di avviare il tuo server web tramite la riga di comando, utilizzando il comando seguente e sostituendo il percorso del file alla fine con il percorso del tuo sencha cartella. (Se preferisci utilizzare il tuo server web Apache, avviarlo da solo e saltare questo passaggio.) Su Mac OS X, potresti aver bisogno delle autorizzazioni per eseguire il comando: se incontri errori di autorizzazione, anteponi sudo.
sencha fs web -p 80 start -map / percorso / a / sencha / cartella /
Questo avvierà il tuo server web Jetty integrato. È necessario che la finestra della CLI sia aperta per mantenere il server in esecuzione, quindi ha senso aprire una nuova finestra della CLI per il successivo dei nostri comandi della riga di comando.
Prova l'app: in un browser moderno, esegui http: // localhost / dinmu. Dovresti vedere l'interfaccia dell'app demo Sencha con un pannello a schede in basso e due diapositive.
Il pacchetto dati
Nei prossimi passaggi genererai il modello, che definirà i tuoi dati. Ci sono un paio di impostazioni che vuoi salvare nella tua app: id, città, paese, unità e geolocalizzazione. Definirai queste impostazioni dei dati come campi del modello. Sencha Cmd può impalcare questo modello per te. Esegui il seguente comando dal file dinmu cartella sulla riga di comando:
sencha genera il modello -name Setting -fields id, city, country, units, geo: boolean
Questo comando genera il modello per la tua app. Prende il nome della classe Ambientazione e una stringa con tutti i nomi dei campi per definire tutti i diversi campi. Rivedi nuovamente la struttura delle cartelle.
Aperto app / model / Setting.js con il tuo editore. Notare lo spazio dei nomi Dinmu. modello è uguale a app / model / Setting.js. Questa è la tua implementazione del modello Setting: Sencha Cmd ha definito una classe del modello Setting per te. Estende un'implementazione del modello dal framework Sencha Touch, Ext.data.Modele contiene tutti i campi e i tipi di campo.
Il id Il campo definirà gli ID per ogni record del modello nella tua applicazione. Affinché si comporti come un ID univoco, dovrai configurarlo. Prima di campi array, configura un file idProperty e un identificatore:
idProperty: ’id’, identificatore: ’uuid’,
Le logiche per questi ID univoci sono in una classe Sencha che dobbiamo "importare" nella nostra app. Possiamo usare un file richiede: ha bisogno della classe Ext.data.identifier.Uuid.
richiede: [’Ext.data.identifier.Uuid’],
Il passaggio successivo consiste nel creare alcune convalide per il nostro modello creando un file convalide array dopo il campi Vettore. Contiene due oggetti di convalida per verificare se i dati per questi campi sono presenti:
convalide: [{tipo: ’presenza’, campo: ’città’, messaggio: "Si prega di fornire una città." }, {tipo: ’presenza’, campo: ’paese’, messaggio: "Fornisci un paese." }],
Poiché vogliamo salvare i dati delle impostazioni locali sul dispositivo, l'ultimo passaggio consiste nell'aggiungere un proxy client. Noi useremo memoria locale per questo. Il memoria locale proxy farà in modo che tutti i dati persistano nel browser memoria locale. Definisci l'oggetto proxy direttamente dopo l'array di convalide:
proxy: {type: ’localstorage’, id: ’weathersettings’}
I componenti della vista
L'interfaccia standard del pannello a schede generata da Sencha Cmd sembra carina, ma ho bisogno del mio ombrello? ha bisogno di una giostra. Aperto app / view / Main.js nel tuo IDE o editor di testo: Dinmu.view.Main si estende dal Sencha Touch Ext.tab.Panel classe. Ha un tabBarPosition proprietà per aggiungere le schede nella parte inferiore dello schermo.
Non ne abbiamo bisogno, quindi possiamo rimuovere tabBarPosition: bottom e cambia l'estensione in Carosello esterno, per estendere dal Sencha Touch Giostra classe. Apri il browser ed esegui http: // localhost / dinmu. Vedrai l'app demo Sencha, con l'interfaccia a schede sostituita da un carosello. Puoi far scorrere le viste orizzontalmente.
Rimuoviamo più componenti predefiniti. Non avrai bisogno del video dimostrativo, quindi rimuovi il file Ext.Video dal richiede Vettore. Svuota il file elementi array, poiché lo sostituiremo con due nuovi elementi. Il primo oggetto item (un contenitore per impostazione predefinita) contiene solo il file html proprietà. Può essere impostato su un testo segnaposto (impostazioni) così sai che puoi codificarlo in seguito. Il secondo oggetto elemento ha una proprietà itemId: "mainview" e a cls proprietà (per lo stile) impostata sul valore textview. È necessario aggiungere una proprietà direction su cui impostare la direzione Carousel verticale:
Ext.define ('Dinmu.view.Main', {extended: 'Ext.Carousel', xtype: 'main', richiede: ['Ext.TitleBar',], config: {direction: 'vertical', items: [ {html: 'Impostazioni'}, {itemId: 'mainview', cls: 'textview'}]}});
Visto in un browser, l'app sembra semplice. Aggiungiamo un top barra del titolo e un fondo barra degli strumenti. Prima dell'articolo con l'estensione impostazioni segnaposto, crea un nuovo oggetto:
{xtype: ’titlebar’, cls: ’title’, docked: ’top’, title: ’Do I need my Umbrella?’},
Facciamo lo stesso per la barra degli strumenti in basso: il file xtype è barra degli strumenti non barra del titoloe invece di titolo proprietà utilizzeremo una proprietà html proprietà impostata su una stringa di copyright di nostra scelta, con estensione ui proprietà impostata su leggero. Inserisci Barra degli strumenti est al richiede array all'inizio del file, in modo che la classe del framework corretta venga caricata in memoria.
{xtype: ’toolbar’, cls: ’footer’, ui: ’light’, docked: ’bottom’, html: ’span> Powered by © Sencha Touch / span>’},
Successivamente creeremo alcuni pulsanti nella barra del titolo in alto. Di seguito il titolo, aggiungi un array contenente un file indietro pulsante, che verrà visualizzato quando ti trovi nella schermata delle impostazioni e un impostazioni pulsante, da visualizzare nella schermata di default. Non è necessario impostare il xtype per pulsante, poiché gli elementi predefiniti di un file Ext.TitleBar sono pulsanti. Il indietro Il pulsante è nascosto per impostazione predefinita ed è allineato a sinistra nella barra del titolo. Il impostazioni il pulsante mostra un'icona di un ingranaggio delle impostazioni; è allineato a destra:
elementi: [{cls: 'back', hidden: true, ui: 'back', action: 'back', align: 'left', text: 'back'}, {iconCls: 'settings', action: 'settings ', ui:' plain ', align:' right '}]
Apri il browser ed esegui di nuovo: http: // localhost / dinmu. Dovresti vedere un pulsante con un ingranaggio nell'angolo destro del Ext.TitleBar.
Creazione di moduli
Ora possiamo iniziare con la creazione di un modulo. Vai al file dinmu cartella sulla riga di comando ed esegui quanto segue per generare il tuo modulo Sencha Touch:
sencha genera form -name SettingsView -fields geo: toggle, units: select, city, country
Rivedi la classe del modulo che è stata sottoposta a scaffolding. Aperto app / view / SettingsView.js. Il Dinmu.view.SettingsView la classe ha un file xtype impostato settingsview. È possibile assegnare classi personalizzate agli array di elementi con l'estensione xtype proprietà. Facciamolo adesso.
Aperto Dinmu.view.Main (app / view / Main.js) e trova l'elemento delle impostazioni nel codice. Per impostazione predefinita, se non specifichi il suo xtype, è impostato su contenitore. Dovrai fare riferimento al nuovo xtype, settingsview, quindi aggiungi xtype: "settingsview" al codice. La stringa segnaposto non è più necessaria: rimuovi il file html: impostazioni proprietà. Non dimenticare di aggiungere Dinmu.view.SettingsView all'array richiede.
Per migliorare l'aspetto del modulo, aggiungiamo un file fieldset per Ext.form.Panel. Contiene i quattro nuovi campi e il file Invia pulsante. Il fieldset sarà un figlio di formpanele ha i propri figli: i campi del modulo e il pulsante.
Di nuovo dentro SettingsView.js, crea un secondo array di elementi nel file config oggetto (dopo il titolo proprietà.) Nidifica il nuovo array di elementi come un bambino. L'array degli elementi padre ne contiene uno fieldset xtype, con un titolo (La tua posizione) e una riga con le istruzioni; l'array figlio contiene tutti i campi e il pulsante. Il codice dovrebbe assomigliare a questo:
Ext.define ('Dinmu.view.SettingsView', {extended: 'Ext.form.Panel', xtype: 'settingsview', config: {items: [{xtype: 'fieldset', title: 'Your location', instructions : "Nel caso in cui non desideri che l'app rilevi la tua posizione, puoi precompilare la città e il paese.", Items: [// form fields here]}]}});
Apri il browser ed esegui http: // localhost / dinmu. Vedrai che il campo dell'unità di selezione non ha valori. Aggiungiamo alcuni valori a unità selectfield. Crea un array di opzioni con due oggetti con testo Centigrado e Fahrenheite valori c e f. L'etichetta GEO nel togglefield non ha molto senso. Cambia in Rileva posizione? Poiché il testo dell'etichetta ora occupa molto più spazio, imposteremo il labelWidth per 55%. Imposta il valore del campo geografico su valore: ’1’ per abilitare la geolocalizzazione per impostazione predefinita. Cambia le etichette di tutti gli altri campi in lettere minuscole e disabilita i campi della città e del paese aggiungendo disabilitato: vero in entrambi i campi. Il testo del pulsante dovrebbe essere ricaricare invece di Invia. Cambia questo nel file componente pulsante. Aggiungere un margine con il valore 10 5. Aggiungi un file azione proprietà sul pulsante e impostarlo su ricaricare. In questo modo, possiamo fare riferimento al pulsante in un secondo momento.
{xtype: ’button’, ui: ’confirm’, margin: ’10 5 ’, action:’ refresh ’, text:’ Refresh ’}
Potresti notare che la console emette alcuni avvisi. Il Ext.Loader, il meccanismo che carica tutte le classi del framework Sencha Touch nell'ordine corretto in memoria, deve caricare le classi utilizzate per i campi del modulo. Creare un richiede array (sopra config oggetto) e assegnargli le seguenti stringhe:
richiede: [’Ext.form.FieldSet’, ’Ext.field.Toggle’, ’Ext.field.Select’, ’Ext.field.Text’, ’Ext.Button’],
L'interfaccia è terminata. Ma per quanto riguarda la vista principale? Precompilerai dinamicamente questa pagina con i dati; iniziamo con la creazione di un controller.
Costruire il controller
Il controller farà da collante tra il modello delle impostazioni (i dati dell'app) e la visualizzazione delle impostazioni. Conterrà riferimenti a tutti i componenti della vista e invierà i suoi eventi. Vai al file dinmu cartella ed eseguire il seguente comando:
sencha genera controller Main
Questo comando genera il file Principale controller. Aperto app / controller / Main.js: vedrai un controller con riferimenti vuoti (rif) e oggetti di controllo.
Quindi creiamo riferimenti a tutti i componenti della vista: principale, settingsview, il barra del titolo, impostazioni e indietro pulsanti e alle impostazioni modulo campi e ricaricare pulsante. I selettori sono un po 'CSS-like. Il tuo codice potrebbe assomigliare a questo:
refs: {mainView: 'main', settingsView: 'settingsview', btnSettings: 'main button [action = settings]', btnRefresh: 'settingsview button [action = refresh]', btnBack: 'main button [action = back]' , toggleGeo: 'settingsview togglefield', fieldCity: 'settingsview textfield [name = city]', fieldCountry: 'settingsview textfield [name = country]'},
Ora puoi aggiungere i controlli:
control: {'btnRefresh': {tap: 'onRefresh'}, 'btnSettings': {tap: 'onSettingsBtnTap'}, 'btnBack': {tap: 'onBackBtnTap'}, 'toggleGeo': {change: 'onToggle'} , 'mainView': {activeitemchange: 'onCarouselChange'}}
Prima di eseguire il test del browser su questi eventi, è necessario associare il controller a app.js. Aperto app.js, creare un controllori matrice sotto il file richiede array e passare la stringa 'Principale', mappando il file Principale controller al app / controller / Main.js file:
controller: [’Main’],
Ora aggiungeremo alcune logiche. Tornare a Dinmu.controller.Main e aggiungi le funzioni che ho scritto per te nel file goodies-tutorial directory nel repository GitHub. Puoi trovarli dentro functions.txt.
Creazione di negozi e metodi statici
I negozi incapsulano una cache lato client degli oggetti del modello. Anche i negozi possono avere un proxy e fornire anche funzioni per ordinare, filtrare, raggruppare e interrogare le istanze del modello (record) contenute al suo interno.
La nostra app ha bisogno di un negozio per salvare tutte le impostazioni dell'utente. Sfortunatamente, non puoi generare negozi con Sencha Cmd. Creiamo invece un nuovo file in app Store cartella chiamata Settings.js. In esso definiremo una nuova classe, Dinmu.store.Settings: questa classe estende tutti i metodi e le proprietà da Ext.data.Store classe. Nel config oggetto, creeremo una proprietà chiamata modello. Dovrebbe connettersi al modello Setting. Anche l'archivio delle impostazioni deve essere caricato automaticamente:
Ext.define ('Dinmu.store.Settings', {extended: 'Ext.data.Store', richiede: ['Dinmu.model.Setting'], config: {model: 'Dinmu.model.Setting', autoLoad: vero } });
Aperto app / controller / Main.js. Nel config oggetto, crea un file I negozi array e aggiungi il file Dinmu.store.Settings memorizzare su di esso:
negozi: "Dinmu.store.Settings",
A volte è bello impostare le logiche aziendali al di fuori delle cartelle MVC. Nella cartella dell'app, crea una cartella chiamata utils. In esso, crea un file denominato Functions.jse definire una classe chiamata Dinmu.utils.Functions. Questo ha una proprietà, singleton, impostato vero. Ora la tua classe è un singleton: non puoi crearne alcuna istanza, ma puoi eseguire i metodi statici da qualsiasi punto del tuo codice:
Ext.define (’Dinmu.utils.Functions’, {singleton: true, // statics methods here});
Inserisci Dinmu.utils.Functions al richiede matrice di app.js. Ora aggiungi alcune funzioni statiche. Apri il functions.txt snippet dal file goodies-tutorial nel repository GitHub e copia tutte le funzioni nel file app / utils / Functions.js file.
Lo snippet contiene le funzioni necessarie per richiedere i dati meteo da http://api.worldweatheronline.com. Se preferisci usare il tuo API_KEY, puoi modificarlo sopra Functions.js cambiando la stringa per il file API_KEY proprietà. Contiene anche le logiche per richiedere la geolocalizzazione sul dispositivo e precompilare il template nella vista principale (ho commentato il testo per te).
Per testare le logiche, apri Chrome DevTools, passa alla scheda Console e digita Dinmu.utils.Functions.getWeather ('Amsterdam'). L'app dovrebbe restituire un oggetto meteo per Amsterdam e visualizzare del testo nella vista principale. L'app è terminata! Apri il browser ed esegui di nuovo http: // localhost / dinmu.
Parole: Lee Boonstra
Questo articolo è apparso originariamente nel numero 247 di net magazine.
