Innhold
- Generer og kjør demo-applikasjonen
- Datapakken
- Visningskomponentene
- Lage skjemaer
- Bygg kontrolleren
- Sette opp butikker og statiske metoder
Hvis du er interessert i å lære å lage en app, gjør Sencha Touch-rammeverket det enkelt å lage fantastiske berøringsaktiverte applikasjoner med flere plattformer. Vi bruker den til å bygge 'Trenger jeg paraplyen min?' - en app som bruker værinformasjon fra http://api.worldweatheronline.com for å avgjøre om du trenger paraplyen.
Du kan se selve appen her, mens koden finnes i denne GitHub-repoen: den løsningsveiledning katalog inneholder rå kode, endelig katalogkoden pluss en Sass-mal. i tillegg godbiter-tutorial katalogen på repoen inneholder filene du trenger når du arbeider gjennom opplæringen.
Generer og kjør demo-applikasjonen
Start med å lage en sencha-mappe et sted på harddisken. Last ned Sencha Touch 2.2.1 rammeverket og trekk det ut i det nyopprettede sencha mappe. Opprett nå mappen for appen din. Jeg har ringt min dinmu siden det er kortere enn 'DoINeedMyUmbrella', men det er opp til deg.
Åpne nå kommandolinjen (MS-DOS Prompt eller Terminal), naviger til Sencha rammeverkmappe (cd sencha / touch-2.2.x mappe) og kjør følgende kommando for å generere Sencha Touch MVC-mappestrukturen:
sencha generere app-navn Dinmu -sti ../dinmu
Denne kommandoen genererer appens fulle MVC-struktur. Det tar et navneområde Dinmu, for å prefikse alle klassene dine. Gjennomgå mappestrukturen den har opprettet.
Nå er det på tide å starte webserveren din via kommandolinjen ved å bruke kommandoen nedenfor og erstatte filstien til slutt med stien til din egen sencha mappe. (Hvis du heller vil bruke din egen Apache-webserver, start den selv og hopp over dette trinnet.) På Mac OS X trenger du kanskje tillatelser for å utføre kommandoen: Hvis du får tillatelsesfeil, prefiks den med sudo.
sencha fs web -p 80 start -map / path / to / sencha / folder /
Dette starter den innebygde Jetty-webserveren. Du trenger CLI-vinduet ditt for å holde serveren i gang, så det er fornuftig å åpne et nytt CLI-vindu for den neste av kommandolinjekommandoer.
Test appen: i en moderne nettleser, kjør http: // localhost / dinmu. Du bør se Sencha demo-appgrensesnittet med et nederst fanepanel og to lysbilder.
Datapakken
I de neste trinnene genererer du modellen som definerer dataene dine. Det er et par innstillinger du vil lagre i appen din: id, by, land, enheter og geolokalisering. Du vil definere disse datainnstillingene som modellfelt. Sencha Cmd kan stillas denne modellen for deg. Kjør følgende kommando fra dinmu mappe på kommandolinjen:
sencha genererer modellnavn Innstilling –felt id, by, land, enheter, geo: boolsk
Denne kommandoen genererer modellen for appen din. Det tar kursnavnet Omgivelser og en streng med alle feltnavnene for å definere alle de forskjellige feltene. Gjennomgå mappestrukturen din på nytt.
Åpen app / modell / Setting.js med redaktøren din. Legg merke til navneområdet Dinmu. modell. innstilling er lik app / modell / Setting.js. Dette er implementeringen av innstillingsmodellen: Sencha Cmd definerte en innstillingsmodellklasse for deg. Den utvider en modellimplementering fra Sencha Touch-rammeverket, Ekstra data. Modell, og den inneholder alle felt og felttyper.
De id feltet vil definere ID-er for hver modellpost i applikasjonen din. For å la den oppføre seg som en unik ID, må du konfigurere den. Før Enger array, konfigurer en idEiendom og en identifikator:
idProperty: 'id', identifier: 'uuid',
Logikken for disse unike IDene er i en Sencha-klasse vi trenger å 'importere' til appen vår. Vi kan bruke en krever: det trenger klassen Ext.data.identifier.Uuid.
krever: [’Ext.data.identifier.Uuid’],
Neste trinn er å lage noen valideringer for modellen vår ved å lage en valideringer array etter Enger array. Dette inneholder to valideringsobjekter for å sjekke om dataene for disse feltene er til stede:
valideringer: [{type: ’tilstedeværelse’, felt: ’by’, melding: "Vennligst oppgi en by." }, {type: ’tilstedeværelse’, felt: ’land’, melding: "Oppgi et land." }],
Siden vi vil lagre dataene for lokale innstillinger på enheten, er det siste trinnet å legge til en klientproxy. Vi vil bruke lokal lagring for dette. De lokal lagring proxy vil sørge for at alle data fortsetter i nettleseren lokal lagring. Definer proxy-objektet direkte etter valideringsmatrisen:
proxy: {type: ’localstorage’, id: ‘weathersettings’}
Visningskomponentene
Standard-tabellpanelgrensesnittet som Sencha Cmd genererer, ser fint ut, men trenger jeg paraplyen min? trenger en karusell. Åpen app / view / Main.js i IDE eller teksteditor: Dinmu. Utsikt. Hoved strekker seg fra Sencha Touch Ekstra. Fane. Panel klasse. Den har en tabBarPosition egenskap for å legge til fanene nederst på skjermen.
Vi trenger ikke dette, så kan fjerne tabBarPosition: nederst og endre utvidelsen til Ekstra karusell, for å strekke seg fra Sencha Touch Karusell klasse. Åpne nettleseren din og kjør http: // localhost / dinmu. Du vil se Sencha demo-appen, med fane-grensesnittet erstattet av en karusell. Du kan skyve visningene horisontalt.
La oss fjerne flere standardkomponenter. Du trenger ikke demovideoen, så fjern Ekst. Video fra krever array. Tøm gjenstander fordi vi erstatter den for to nye elementer. Det første elementobjektet (en container som standard) inneholder bare html eiendom. Dette kan settes til en plassholdertekst (Innstillinger) slik at du vet at du kan kode det senere. Det andre elementobjektet har en eiendom itemId: ‘mainview’ og en cls egenskap (for styling) satt til verdien tekstvisning. Du må legge til en retningsegenskap, for å sette karusellretningen til vertikal:
Ext.define ('Dinmu.view.Main', {extension: 'Ext.Carousel', xtype: 'main', krever: ['Ext.TitleBar',], config: {direction: 'vertical', items: [ {html: 'Settings'}, {itemId: 'mainview', cls: 'textview'}]}});
Sett i en nettleser, ser appen grunnleggende ut. La oss legge til en topp tittellinje og en bunn verktøylinje. Før varen med Innstillinger plassholder, opprett et nytt objekt:
{xtype: 'titlebar', cls: 'title', docked: 'top', title: 'Do I need my Umbrella?'},
La oss gjøre det samme for den nederste verktøylinjen: xtype er verktøylinje ikke tittellinje, og i stedet for tittel eiendom vi bruker en html eiendom satt til en copyright streng som vi velger, med en ui eiendom satt til lys. Legge til Ekstra verktøylinje til krever array øverst i filen, slik at riktig rammeklasse lastes inn i minnet.
{xtype: 'verktøylinje', cls: 'bunntekst', ui: 'lys', forankret: 'bunn', html: 'span> Drevet av © Sencha Touch / span>'},
Deretter lager vi noen knapper i den øverste tittellinjen. Under tittel, legg til en matrise som inneholder en tilbake knappen, som vises når du er på innstillingsskjermen, og a innstillinger for å vises på standardskjermen. Du trenger ikke stille inn xtype til knapp, siden standardelementene til en Ext.TitleBar er knapper. De tilbake knappen er skjult som standard og er venstrejustert i tittellinjen. De innstillinger knappen viser et ikon for et innstillingsutstyr; den er høyrejustert:
items: [{cls: 'back', hidden: true, ui: 'back', action: 'back', align: 'left', text: 'back'}, {iconCls: 'settings', action: 'settings ', ui:' plain ', align:' right '}]
Åpne nettleseren din og kjør: http: // localhost / dinmu igjen. Du ser en knapp med tannhjul i høyre hjørne av Ext.TitleBar.
Lage skjemaer
Nå kan vi begynne med å lage et skjema. Naviger til dinmu mappen på kommandolinjen og kjør følgende for å generere Sencha Touch-skjemaet:
sencha generer skjema-navn SettingsView -fields geo: veksle, enheter: velg, by, land
Gjennomgå formklassen som er stillas. Åpen app / view / SettingsView.js. De Dinmu.view.SettingsView klasse har en xtype satt til innstillingsvisning. Du kan tilordne tilpassede klasser til elementarrays med xtype eiendom. La oss gjøre det nå.
Åpen Dinmu. Utsikt. Hoved (app / view / Main.js), og finn innstillingselementet i koden din. Som standard, hvis du ikke spesifiserer dens xtype, det er satt til container. Du må referere til det nye xtype, innstillingsvisning, så legg til xtype: ‘settingsview’ til koden. Plassholderstrengen er ikke nødvendig lenger: fjern html: innstillinger eiendom. Ikke glem å legge til Dinmu.view.SettingsView til array krever.
La oss legge til et for å få skjemaet til å se bedre ut feltsett til Ekst. Skjema. Dette inneholder de fire nye feltene og sende inn knapp. Feltet vil være et barn av formpanel, og har sine egne barn: skjemafeltene og knappen.
Tilbake i SettingsView.js, opprett en andre elementmatrise i config gjenstand (etter tittel eiendom.) Nest den nye varegruppen som barn. Foreldreelementene inneholder en fieldset xtype, med tittel (Posisjonen din), og en linje med instruksjoner; underordnet matrise inneholder alle feltene og knappen. Koden skal se slik ut:
Ext.define ('Dinmu.view.SettingsView', {extend: 'Ext.form.Panel', xtype: 'settingsview', config: {items: [{xtype: 'fieldset', title: 'Your location', instruksjoner : "I tilfelle du ikke vil at appen skal oppdage posisjonen din, kan du fylle byen og landet på forhånd.", Items: [// skjema felt her]}]}});
Åpne nettleseren din og kjør http: // localhost / dinmu. Du vil se at det valgte enhetsfeltet ikke har noen verdier. La oss legge til noen verdier i enheter selectfield. Opprett et alternativ array med to objekter med tekst Celsius og Fahrenheitog verdier c og f. Merkelappen GEO i togglefield gir liten mening. Endre den til Oppdage sted? Ettersom teksten på etiketten nå tar mye mer plass, setter vi inn labelWidth til 55%. Sett verdien til geofeltet til verdi: ’1’ for å aktivere geolokalisering som standard. Endre etikettene til alle de andre feltene til små bokstaver, og deaktiver by- og landsfeltene ved å legge til deaktivert: sant til begge felt. Knappeteksten skal være Forfriske i stedet for Sende inn. Endre dette i knappkomponent. Legg til en margin med verdien 10 5. Legg til en handling egenskapen til knappen og sett den til forfriske. På denne måten kan vi referere til knappen senere.
{xtype: 'button', ui: 'confirm', margin: '10 5 ', action:' refresh ', text:' Refresh '}
Du vil kanskje legge merke til at konsollen gir noen advarsler. De Ext.Lader, mekanismen som laster alle Sencha Touch rammeklasser i riktig rekkefølge i minnet, må laste klassene som brukes til skjemafeltene. Lage en krever array (over config objekt), og tildel det følgende strenger:
krever: ['Ext.form.FieldSet', 'Ext.field.Toggle', 'Ext.field.Select', 'Ext.field.Text', 'Ext.Button'],
Grensesnittet er ferdig. Men hva med hovedutsikten? Du fyller data dynamisk på denne siden. la oss begynne med å lage en kontroller.
Bygg kontrolleren
Kontrolleren vil være limet mellom innstillingsmodellen (appdataene) og innstillingsvisningen. Den inneholder referanser til alle visningskomponenter og sender hendelsene. Naviger til dinmu mappen og kjør følgende kommando:
sencha generere kontroller Main
Denne kommandoen genererer Hoved kontrolleren. Åpen app / controller / Main.js: du ser en kontroller med tomme referanser (ref) og kontrollere objekter.
La oss deretter lage referanser til alle visningskomponentene: hovedinnstillingsvisning, den tittellinje, innstillinger og tilbake knappene og til innstillingene skjema felt og forfriske knapp. Velgerne er litt CSS-lignende. Koden din kan se slik ut:
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]'},
Nå kan du legge til kontrollene:
kontroll: {'btnRefresh': {tap: 'onRefresh'}, 'btnSettings': {tap: 'onSettingsBtnTap'}, 'btnBack': {tap: 'onBackBtnTap'}, 'toggleGeo': {change: 'onToggle'} , 'mainView': {activeitemchange: 'onCarouselChange'}}
Før du tester disse hendelsene, må du koble kontrolleren til den app.js. Åpen app.js, lage en kontrollere array under krever array, og pass i strengen 'Hoved', kartlegger Hoved kontrolleren til app / controller / Main.js fil:
kontrollere: [’Main’],
Nå skal vi legge til litt logikk. Gå tilbake til Dinmu.controller. Hoved og legg til funksjonene jeg har skrevet for deg i godbiter-tutorial katalog på GitHub repo. Du kan finne dem i funksjoner.txt.
Sette opp butikker og statiske metoder
Butikker innkapsler en klientbuffer av modellobjekter. Butikker kan også ha en proxy, og har også funksjoner for sortering, filtrering, gruppering og spørring av modellforekomster (poster) som finnes i den.
Appen vår trenger en butikk for å lagre alle brukerinnstillingene. Dessverre kan du ikke generere butikker med Sencha Cmd. La oss i stedet lage en ny fil i app Store mappen som heter Settings.js. I den definerer vi en ny klasse, Dinmu.store. Innstillinger: denne klassen utvider alle metodene og egenskapene fra Ekstra data.Store klasse. I config objekt, vil vi lage en eiendom som kalles modell. Den skal koble seg til Setting-modellen. Innstillingsbutikken må også lastes inn automatisk:
Ext.define ('Dinmu.store.Settings', {utvide: 'Ext.data.Store', krever: ['Dinmu.model.Setting'], config: {model: 'Dinmu.model.Setting', autoLoad: sant}});
Åpen app / controller / Main.js. I config objekt, opprett et butikker array og legg til Dinmu.store. Innstillinger lagre til det:
butikker: ‘Dinmu.store.Settings’,
Noen ganger er det hyggelig å sette opp bedriftens logikk utenfor MVC-mappene. I appmappen oppretter du en mappe som heter utils. Opprett en fil med navnet i den Functions.js, og definer en klasse som heter Dinmu.utils.Funksjoner. Dette har en eiendom, singleton, satt til ekte. Nå er klassen din en singleton: du kan ikke lage noen forekomster av den, men kan kjøre de statiske metodene fra hvor som helst i koden din:
Ext.define (’Dinmu.utils.Functions’, {singleton: true, // statics methods here});
Legge til Dinmu.utils.Funksjoner til krever et utvalg av app.js. Legg nå til noen statiske funksjoner. Åpne funksjoner.txt utdrag fra godbiter-tutorial katalog på GitHub repo, og kopier alle funksjonene til app / utils / Functions.js fil.
Utdraget inneholder funksjonene du trenger for å be om værdata fra http://api.worldweatheronline.com. Hvis du helst vil bruke din egen API_KEY, kan du redigere den på Functions.js ved å endre strengen for API_KEY eiendom. Den inneholder også logikk for å be om geolokalisering på enheten og fylle ut malen i hovedvisningen (jeg har kommentert teksten for deg).
For å teste logikken, åpne Chrome DevTools, bytt til konsollfanen og skriv Dinmu.utils.Functions.getWeather (’Amsterdam’). Appen skal returnere et værobjekt for Amsterdam, og vise litt tekst i hovedvisningen. Appen er ferdig! Åpne nettleseren din og kjør http: // localhost / dinmu igjen.
Ord: Lee Boonstra
Denne artikkelen dukket opprinnelig opp i nettmagasinutgave 247.
