Share
Dette er den fjerde delen av vår webOS introduksjonsserie. I denne opplæringen lærer du hvordan du bruker webview-widgeten i webOS for å vise et nettsted som er innebygd i appen din. Vi legger også til funksjonalitet for å tillate omordning og sletning av artikkelen.
For å begynne, fortsett og generer en ny scene som heter artikkel:
Palm-generere -t new_scene -p "name = article" tutsplus
Deretter redigerer du app / visninger / artikkel / article-scene.html å inneholde følgende:
Ferdigheter til å betale regningene
Vi bruker samme overskrift som i vår hovedscene. Nedenfor legger vi til webview-widgeten. Legg merke til at vi pakker inn webvisningen til en wrapper-div på den måten
Vi kan skyve webvisningen ned under overskriften.
Legg til tilleggsklassen til stilark / tutsplus.css.
#webWrapper padding-top: 48px;
Neste rediger app / assistenter / artikkel-assistant.js og legg til oppsettet for webvisning-widgeten:
Accentsconagua
ArticleAssistant.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.controller.setupWidget ("myWebView", this.attributes = url: this.url,, this.model = ); ; Legg også til den nødvendige koden for å sende URLen til scenen:
funksjon ArticleAssistant (url) / * dette er skaperen funksjonen for scene assistent objektet. 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.url = url;
Så snart artikkelscenen blir kalt med en URL, begynner webview-widgeten å laste inn innholdet på nettstedet.
Vi må også endre listescenen vår for å ringe til den nye artikkelscenen når vi trykker på ett element. Redigere app / assistenter / liste assistant.js for det
og legg til funksjonen handleTap:
ListAssistant.prototype.handleTap = funksjon (hendelse) Mojo.Log.info ("Hendelseindeks er:" + event.index); Mojo.Log.info ("valgt:" + event.item.guid); Mojo.Controller.stageController.pushScene ("artikkel", event.item.guid); Listen modell inneholder eiendomsveiledningen, som er en URL til nettstedet. Ved hjelp av hendelsesobjektet får vi guidet av den tappede
liste element og send det til artikkelen scenen.
Legg også til en liste taphandler til aktivitetsfunksjonen til ListAssistant:
this.tapHandler = this.handleTap.bindAsEventListener (dette); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); Ikke glem å rydde opp lytteren i deaktiveringsfunksjonen:
ListAssistant.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); ; Det er det for webvisningen. Pakke, installer og kjør appen:
Ville det ikke vært fint om du kunne endre rekkefølgen på tutsplus-nettstedene i den første scenen? Si at du vil ha Mobiletuts + først i stedet for nett, eller hva hvis du vil slette et nettsted du ikke er interessert i? Jeg skal vise hvordan jeg gjør det med noen innebygd listefunksjonalitet og informasjonskapsler.
Hvis du leser del 2 i denne serien, ga vi dataene til listen fra en statisk modell. La oss endre det for å bruke en dynamisk modell. Åpen app / assistenter / main-assistant.js:
i oppsettfunksjonen, erstatt:
this.myListModel = items: [title: 'Nettutsikt', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60',
med
this.myListModel = elementer: [];
Dette vil levere en tom liste modell ved oppsett tid for listen. Endre også listeattributtene:
this.myListAttr = itemTemplate: "main / itemTemplate", swipeToDelete: true, renderLimit: 20, reorderable: true;
Som du kan se, la vi til swipeToDelete og reorderable egenskaper og satte dem til ekte. Dette gjør det mulig å endre rekkefølgen og gjenopprettingen av elementet.
Deretter la vi redigere aktiveringsfunksjonen og legge til noen funksjoner for å lagre sorteringsordre og viste tuts-nettsteder. For å gjøre det, må vi legge til en informasjonskapsel i appen. Først er cookien 'TutsPlusCookie' definert og lastet:
MainAssistant.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 * / var myCookie = ny Mojo.Model.Cookie ('TutsPlusCookie'); var cookieData = myCookie.get () || "; Hvis cookien ikke eksisterer ennå, definerer vi sitt innledende innhold og lagrer. Hvis informasjonskapselen allerede eksisterer, laster vi dataene fra den:
hvis (cookieData == ") myCookie.put (tutsdata: '| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |'); var tutsdata =" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "; else var tutsdata = cookieData.tutsdata;
La meg forklare innholdet i informasjonskapsel et øyeblikk. Hvert tutsplus-område har et definert id (fra 1 til 9). Tegnet "|" brukes som en avgrensning mellom disse ids. De tutsdata variabel definerer sorterings rekkefølgen på nettstedene også hvilke nettsteder som vises. Standardverdien viser den første sorteringsrekkefølgen og definerer også at alle 9 nettstedene vil bli vist. Du vil se senere hvordan omorganiserings- og slettingsfunksjonene vil manipulere den data og lagre den tilbake i informasjonskapselen.
Vi må også definere og legge til to ekstra lyttere, en for ListReorder og en for ListDelete Event. Vi legger også til en funksjon for å laste dataene inn i listemodellen.
this.loadData (tutsdata); this.tapHandler = this.handleTap.bindAsEventListener (dette); this.reorderHandler = this.handleReorder.bindAsEventListener (dette); this.deleteHandler = this.handleDelete.bindAsEventListener (dette); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listReorder, this.reorderHandler); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listDelete, this.deleteHandler); Ikke glem å stoppe alle lyttere når scenen er deaktivert:
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); Mojo.Event.stopListening (this.controller.get ('MyList'), Mojo.Event.listReorder, this.reorderHandler); Mojo.Event.stopListening (this.controller.get ('MyList'), Mojo.Event.listDelete, this.deleteHandler); ; La oss ta en titt på den nye this.loadData-funksjonen:
MainAssistant.prototype.loadData = funksjon (tutsdata) var newData = []; var k = 0; this.data = elementer: [id: 1, tittel: 'Nettuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60', id: 2, tittel: 'Vectortuts', titleImage: 'images / vectortuts.png', leftImage: 'images / tiny-vector.jpg', col: '# 19487e', id: 3, tittel: 'Psdtuts' , titleImage: 'images / psdtuts.png', leftImage: 'images / tiny-psd.jpg', col: '# a51500', id: 4, tittel: 'Activetuts', titleImage: 'images / activetuts.png ', leftImage:' images / tiny-active.jpg ', col:' # a5290a ', id: 5, tittel:' Aetuts ', titleImage:' images / aetuts.png ', leftImage:' images / ae.jpg ', col:' # 4a3a57 ', id: 6, tittel:' Cgtuts ', titleImage:' images / cgtuts.png ', leftImage:' images / tiny-cg.jpg ', col:' # 73434f ', id: 7, tittel:' Phototuts ', titleImage:' images / phototuts.png ', leftImage:' images / tiny-photo.jpg ', col:' # 2e92b2 ', id: tittel: 'Audiotuts', titleImage: 'images / audiotuts.png', leftImage: 'images / tiny-audio.jpg', col: '# 3d6b00', id: 9, tittel: 'Mobiletut s ', titleImage:' images / mobiletuts.png ', leftImage:' images / tiny-mobile.png ', col:' # d19c00 '];
Først definerer vi de 9 tutsplus-nettstedene, dette er uendret fra del 2, da vi definerte en statisk liste. En endring: Vi la iden som nevnt ovenfor. Vi slår da gjennom passet i streng av hvilke nettsteder som skal vises og hvordan de bestilles. Hver side som skal vises, legges til et nytt utvalg, dette vil være vårt nye innhold for listemodellen:
var temp = tutsdata.split ('|'); for (var i = 1; i < temp.length-1;i++) for (var j=0;j < this.data.items.length;j++) if (this.data.items[j].id==temp[i]) newData[k] = id: this.data.items[j].id, title: this.data.items[j].title, titleImage: this.data.items[j].titleImage, leftImage: this.data.items[j].leftImage, col: this.data.items[j].col ; k++; Endelig sender vi de nye dataene til vår (tomme ved oppsett) listemodell og forteller modellen at dataene har endret seg (modellendret). Dette er den samme teknikken som vi brukte i del 3:
this.myListModel ["items"] = newData; this.controller.modelChanged (this.myListModel, dette);
De to siste sakene er funksjonene for ListReorder og ListDelete-hendelsen. La oss starte med handlingsrekkefølge hendelsen, som vil bli kalt hver gang listen blir ombestilt.
Med hjelp fra passet i parametere event.item, event.toIndex, og event.fromIndex, Vi bytter listermodellen for å gjenspeile den nye sorteringsrekkefølgen. En ny informasjonskapsel blir da konstruert ut av modellen og lagret i appens informasjonskapsel.
MainAssistant.prototype.handleReorder = funksjon (hendelse) Mojo.Log.info ("reorder event% j", event.item, event.toIndex, event.fromIndex); var temp = "; this.myListModel.items.splice (event.fromIndex, 1); this.myListModel.items.splice (event.toIndex, 0, event.item); for (var j = 0; j < this.myListModel.items.length;j++) temp = temp + this.myListModel.items[j].id + '|'; var newtutsdata = '|' + temp; var myCookie = new Mojo.Model.Cookie('TutsPlusCookie'); myCookie.put( tutsdata: newtutsdata ); HåndtakDelete-funksjonen gjør nesten det samme, den fjerner først det slettede elementet fra listermodellen og konstruerer deretter en ny informasjonskapsel ut av modellen og sparer det.
MainAssistant.prototype.handleDelete = funksjon (hendelse) Mojo.Log.info ("delete event" + event.item); this.myListModel.items.splice (this.myListModel.items.indexOf (event.item), 1); var temp = "; for (var j = 0; j < this.myListModel.items.length;j++) temp = temp + this.myListModel.items[j].id + '|'; var newtutsdata = '|' + temp; var myCookie = new Mojo.Model.Cookie('TutsPlusCookie'); myCookie.put( tutsdata: newtutsdata ); Nå kan du gå videre og omorganisere listen i hovedspillet og til og med slette elementer du ikke vil se. Bare hold og dra et element for å omordne det. For å slette et element, skyver du med fingeren over det, og det vil spørre deg om du vil slette det fra listen.
Vi har dekket ganske mange nye emner for å utvide appen Tutsplus. Vi lærte hvordan du bruker WebView-widgeten til å vise innhold på nettstedet, og hvordan håndterer og sletter du artikkelen. Forhåpentligvis har du likte å lese og lært mye!
