Share
I denne opplæringen lærer du hvordan du bygger et webOS-program for å vise alle nettstedene i tuts + nettverket. Dette er den andre delen av en serie på webOS mobilutvikling. Les del en av denne serien for en generell introduksjon til plattformen og å bli kjent med verktøyene du trenger for å utvikle webOS-applikasjoner.
For å komme i gang, åpne en kommandoprompt / terminal og skriv inn følgende:
palm-generere tutsplus
Dette vil lage katalogen "tutsplus" og den nødvendige katalogstrukturen for webOS-applikasjoner.
Last ned bildene for knappene + nettstedene som er vedlagt dette innlegget. Kopier filene til app / bilder katalogen, og kopier deretter tuts_icon.png til tutsplus-katalogen.
Nå ser vi nærmere på "tutsplus / appinfo.json." Åpne appinfo.json-filen i din favoritt tekstredigerer, og modifiser den for å lese som følger:
"id": "com.mycompany.tutsplus", "versjon": "1.0.0", "leverandør": "MyCompany", "type": "web", "main": "index.html" tittel ":" TutsPlus "," ikon ":" tuts_icon.png "
Gå videre og endre "id" og "leverandør" verdier til din egen også.
For å fylle vår scene med livet, går vi videre og oppretter den første eller "viktigste" scenen:
Palm-generere -t new_scene -p "name = main" tutsplus
Dette vil skape to filer: visningen i app / visninger / main / main-scene.html og assistenten for scenen på app / assistenter / main-assistant.js
Nå, åpne main-scene.html og legg til den første delen, overskriften:
Ferdigheter til å betale regningene
Klassen "Palmside-header multi-line" er en av mange som følger med Mojo Framework, men vi skal definere tilleggsklassene som finnes i HTML-koden over oss selv. Rediger stilark / tutsplus.css for det og legg til disse klassen definisjoner:
.tuts-header posisjon: fast; z-indeks: 1000; bredde: 100%; høyde: 35px; polstring: 10px 0 0; margin: 0; -webkit-palm-mouse-målet: ignorere; .title-image posisjon: fast; topp: 16px; igjen: 14px; .main-title posisjon: absolute; skriftstørrelse: 24px; venstre: 60px; toppen: -4px; bredde: 220px;
Som du kan se bruker vi standard CSS-egenskaper med ett unntak:
-Webkit-Palm-Mouse-målet: ignorere;
Denne ikke-standardegenskapen forteller toppteksten for å ignorere klikk.
MERK:
Hva om du vil se på DOM-elementene og CSS-stilene i søknaden din? Bruk palmeinspektøren.
Vi legger nå kjøttet i vår søknad til scenen, en liste-widget:
La oss dykke inn i lister et øyeblikk. Lister er trolig den mest brukte widgeten i webOS. De tillater oss å vise data i kolonner og mye mer. webOS lister inkluderer følgende funksjonalitet:
Vi går over til app / assistenter / main-assistant.js for å sette opp vår scene og listen den inneholder. Først definerer vi de nødvendige dataene for å fylle vår liste:
MainAssistant.prototype.setup = function () / * Denne funksjonen er for oppsettoppgaver som må skje når scenen er først opprettet * / / * bruk Mojo.View.render for å gjengi visningsmaler og legge dem til scenen, hvis trengte * / / * oppsett widgets her * / / * legg til hendelseshåndterere for å lytte til hendelser fra widgets * / this.myListModel = elementer: [title: 'Nettutsikt', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60', title: 'Vectortuts', titleImage: 'images / vectortuts.png', leftImage: 'images / tiny-vector.jpg', col: ' # 19487e ', title:' Psdtuts ', titleImage:' images / psdtuts.png ', leftImage:' images / tiny-psd.jpg ', col:' # a51500 ', tittel:' Activetuts ', titleImage : 'images / activetuts.png', leftImage: 'images / tiny-active.jpg', col: '# a5290a', tittel: 'Aetuts', titleImage: 'images / aetuts.png', leftImage: 'images /tiny-ae.jpg ', col:' # 4a3a57 ', tittel:' Cgtuts ', titleImage:' images / cgtuts.png ', leftImage:' images / tiny-cg.jpg ', col:' # 73434f ' , title: 'Phototuts', titleImage: 'images / phototuts.png', leftImage: 'images / tiny-photo.jpg', col: '# 2e92b2', title: 'Audiotuts', titleImage: 'images /audiotuts.png ', leftImage:' images / tiny-audio.jpg ', col:' # 3d6b00 ', tittel:' Mobiletuts ', titleImage:' images / mobiletuts.png ', leftImage:' images / tiny- mobile.png ', col:' # d19c00 '];
Legg merke til at myListModel har en eiendom som heter "elementer". List-widgeten forventer å finne en eiendom i dataModel som inneholder en rekke objekter. Dette egenskapsnavnet må være "elementer". I vårt tilfelle definerer vi informasjonen om tutsplus-nettverket. Hvert element inneholder egenskaper som representerer tittelen, bildene og fargen for hvert nettsted. Disse egenskapene kan brukes i listen ved å inkludere den i listemalen. En liste blir gjengitt ved hjelp av en mal, så la oss gå videre og opprett vårt: app / visninger / main / itemTemplate.html. Rediger den nye malen for å inneholde følgende:
#tittel
Vår mal forteller listen hvordan du viser hvert element fra modellen. Vi vil vise tittelen og bildet fra vår modell, så vi inkluderer spesialtegnene # leftImage og # title. De blir erstattet med dataene ut av modellen når raden blir gjengitt.
Deretter legger du til klassen "grid-celle" i stilarket stilark / tutsplus.css:
.grid-celle farge: # 000; .grid-cell.selected color: #fff; bakgrunn: #ccc; grense: 1px solid # 00f;
Disse to klassene definerer utseendet på en listerad i den valgte og valgte tilstanden.
Gå tilbake til app / assistenter / main-assistant.js og legg til den nødvendige setningen for å sette opp vår liste:
this.myListAttr = itemTemplate: "main / itemTemplate", renderLimit: 20,; this.controller.setupWidget ( "myList", this.myListAttr, this.myListModel); ;
I minListAttr forteller vi listen hvilken mal du skal bruke; Vi spesifiserer vår nettopp opprettede mal. Som du kan se i setupWidget-samtalen, passerer vi ID-en i listen, parametrene og modellen.
Vi må også redigere app / assistenter / scene-assistant.js for å vise hovedscenen når programmet starter:
funksjon StageAssistant () / * dette er skaperen funksjonen for scenen assistent objektet ditt * / StageAssistant.prototype.setup = function () / * Denne funksjonen er for oppsettoppgaver som må skje når scenen er først opprettet * / Mojo.Controller.stageController.pushScene ( "hoved"); ;
Alt gjort, la oss se hvordan vår søknad ser ut ... start emulatoren, pakk applikasjonen og installer den til emulatoren:
Palm-pakke Tutsplus Palm-installer com.mycompany.tutsplus_1.0.0_all.ipk
Ser du ganske bra, tror du ikke? Alt det med bare noen få linjer med kode. La oss legge til litt mer funksjonalitet. Hva med noe som skjer når brukeren klikker på rad på listen? OK, fortsett og legg til følgende til app / assistenter / main-assistant.js:
Accentsconagua
#tittelMainAssistant.prototype.activate = function (event) / * sett inn hendelseshåndterere her som bare skal være i kraft når denne scenen er aktiv. For eksempel, nøkkelbehandlere som observerer dokumentet * / this.tapHandler = this.handleTap.bindAsEventListener (dette); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; MainAssistant.prototype.handleTap = funksjon (hendelse) Mojo.Log.info ("Hendelseindeks er:" + event.index); Mojo.Log.info ("valgt:" + event.item.title); this.title = event.item.title; this.titleImage = event.item.titleImage; this.col = event.item.col; Mojo.Controller.stageController.pushScene ("liste", denne.titlen, this.titleImage, this.col); logging: Som du ser over, la vi til en Mojo.Log.info-setning til koden. Noen ganger vil ikke appen starte eller fungere, eller du vil bare skrive ut noen debuggin-informasjon. Mojo.Log.info hjelper deg med å gjøre det. For å se produksjonen produsert av Mojo.Log.info, bruk kommandoen:
palm-log
(com.mycompany.tutsplus for vår søknad)
Denne gangen legger vi til Mojo.Event.listen-anropet til aktiveringsmetoden til MainAssistant. Hver gang appen blir aktivert (scenen skyves eller en annen scene er poppet og vår scene vises igjen) koden i aktiveres kalles.
Vi lager en handler (this.taphandler) og kaller den når vi oppdager et trykk (Mojo.Event.listTap) på vår liste (this.controller.get ('MyList')
La oss se på vår handlerhåndtakTap-funksjon. Når listen er tappet, mottar funksjonen et jevnt objekt. Det vi er interessert i, er egenskapen event.index, som inneholder hvilken rad i listen som ble tappet. Heldigvis for oss inneholder hendelsesobjektet også egenskapene til det tappede radelementet tatt fra modellen. event.item.title som et eksempel vil inneholde "Mobiletuts" hvis vi klikker på den raden.
Vi samler alle dataene vi vil bruke ut av hendelsesobjektet og til slutt ringe til vår nye scene "liste". Legg merke til hvordan vi legger til dataene vi vil sende videre til denne scenen i pushScene-samtalen. Du kan legge til så mange parametere som du vil.
MainAssistant.prototype.deactivate = function (event) / * fjern eventuelle hendelseshåndterere du har lagt til i aktiver og gjør noe annet opprydding som skal skje før denne scenen er poppet eller en annen scene skyves på toppen * / Mojo.Event.stopListening (dette .controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; Legg merke til at vi også legger til en Mojo.Event.stopListening til deaktiveringsmetoden til MainAssistant. På den måten lytter vår App ikke på kraner på listen lenger når en annen scene skyves på toppen av den, og vi løper ikke inn i noen tilfeldige Eventhandlers når App er avsluttet.
Det som fortsatt må gjøres, er å lage den nye scenelisten:
Palm-generere -t new_scene -p "name = list" tutsplus
Deretter redigerer du app / visninger / liste / list-scene.html:
Rediger nå app / assistent / list-assistant.js:
funksjon ListAssistant (title, titleimage, col) / * dette er skaperen-funksjonen for sceneassistentobjektet ditt. Det vil bli bestått alle de ekstra parametrene (etter scenenavnet) som ble sendt til pushScene. Henvisningen til scenekontrolleren (this.controller) er ikke etablert ennå, så en initialisering som trenger scenkontrolleren, skal gjøres i oppsettfunksjonen nedenfor. * / this.title = title; this.titleimage = titleimage; this.col = col; ListAssistant.prototype.setup = function () / * Denne funksjonen er for oppsettoppgaver som må skje når scenen er først opprettet * / / * bruk Mojo.View.render for å gjengi visningsmaler og legge dem til scenen, hvis nødvendig * / / * sett inn widgets her * / / * legg til hendelseshåndterere for å lytte til hendelser fra widgets * / this.controller.get ('result'). innerHTML = "Du har valgt" + this.title + "på listen ." this.controller.get ( 'image'). innerhtml ="
" Legg merke til hvordan vi kopierer passet i parametere til nye variabler for senere bruk. Vi oppdaterer også vår scenes HTML for å vise de passerte parametrene.
Gjenta appen, installer og kjør den. Trykk på en listerad og se hvordan den nye scenen skyves og viser hvilken rad du valgte!
Gratulerer, vi dekket ganske mange emner i denne andre delen. Du lærte å lage en liste, fylle den med data, vise den, og deretter reagere på brukerinteraksjon. I neste del skal vi fylle vår listescene med funksjonalitet: Få de nyeste opplæringene og artiklene fra RSS-feeden til det valgte nettstedet, og vis dem i en liste. Vi håper du holder deg fast, og legger tilbakemelding i kommentarfeltet!
"