Share
Dit is de vierde aflevering van onze introductie-serie webOS. In deze zelfstudie leert u hoe u de webview-widget in webOS gebruikt om een website te tonen die is ingesloten in uw app. We zullen ook functionaliteit toevoegen om het herordenen en verwijderen van het lijstitem toe te staan.
Om te beginnen, ga je gang en genereer een nieuwe scène genaamd artikel:
palm-generate -t new_scene -p "name = article" tutsplus
Bewerk vervolgens app / views / article / article-scene.html om het volgende te bevatten:
Vaardigheden om de rekeningen te betalen
We gebruiken dezelfde header als in onze hoofdscène. Daaronder voegen we de webview-widget toe. Merk op dat we de webview op die manier in een wrapper-div inpakken
we kunnen de webview onder de header duwen.
Voeg de extra klas toe aan stylesheets / tutsplus.css.
#webWrapper padding-top: 48px;
Volgende bewerking app / assistenten / article-assistant.js en voeg de setup van de webview-widget toe:
Accentsconagua
ArticleAssistant.prototype.setup = function () / * deze functie is bedoeld voor installatietaken die moeten gebeuren wanneer de scène voor het eerst wordt gemaakt * / / * gebruik Mojo.View.render om weergavesjablonen weer te geven en toe te voegen aan de scène, als nodig * / / * hier installeer widgets * / / * voeg event handlers toe om naar evenementen van widgets te luisteren * / this.controller.setupWidget ("myWebView", this.attributes = url: this.url,, this.model = ); ; Voeg ook de benodigde code toe om de URL door te geven aan de scène:
function ArticleAssistant (url) / * dit is de creator-functie voor uw scène-assistent-object. Alle extra parameters (na de scènenaam) worden doorgegeven aan pushScene. De verwijzing naar de scènecontroller (deze controller) is nog niet vastgesteld, dus initialisatie waarvoor de scènecontroller nodig is, moet worden gedaan in de onderstaande setup-functie. * / this.url = url;
Zodra de artikelscene wordt aangeroepen met een URL, begint de webview-widget de inhoud van de website te laden.
We moeten ook onze lijstscène wijzigen om de nieuwe artikelscene te bellen wanneer we op een item tikken. Bewerk app / assistenten / list-assistant.js daarom
en voeg de functie handleTap toe:
ListAssistant.prototype.handleTap = function (event) Mojo.Log.info ("Gebeurtenisindex is:" + event.index); Mojo.Log.info ("selected:" + event.item.guid); Mojo.Controller.stageController.pushScene ("article", event.item.guid); Het model van de lijst bevat de eigenschap guid, die een URL is naar de website. Met behulp van het gebeurtenisobject krijgen we de geleiding van de aangetikte
lijstitem en geef dit door aan de artikelscène.
Voeg ook een lijsttaphandler toe aan de activeringsfunctie van de ListAssistant:
this.tapHandler = this.handleTap.bindAsEventListener (this); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); Vergeet niet om je luisteraar op te ruimen in de functie deactiveren:
ListAssistant.prototype.deactivate = function (event) / * verwijder eventhandlers die je hebt toegevoegd bij activeren en voer een andere opschoning uit die moet plaatsvinden voordat deze scène wordt geopend of een andere scène wordt ingedrukt * / Mojo.Event.stopListening (this .controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; Dat is het voor de webview. Pakket, installeer en voer de app uit:
Zou het niet aardig zijn als je de volgorde van de tutsplus-sites in de eerste scène zou kunnen veranderen? Stel dat u Mobiletuts + als eerste wilt gebruiken in plaats van nettuts, of wat als u een site wilt verwijderen waarin u niet bent geïnteresseerd? Ik ga laten zien hoe ik dat moet doen met een aantal ingebouwde lijstfunctionaliteit en cookies.
Als u deel 2 van deze serie leest, hebben we de gegevens voor de lijst geleverd vanuit een statisch model. Laten we dat veranderen om een dynamisch model te gebruiken. Open app / assistenten / main-assistant.js:
in de setup-functie, vervang:
this.myListModel = items: [title: 'Nettuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60',
met
this.myListModel = items: [];
Dit levert een leeg lijstmodel op tijdens het instellen van de lijst. Wijzig ook de lijstattributen:
this.myListAttr = itemTemplate: "main / itemTemplate", swipeToDelete: true, renderLimit: 20, opnieuw in te stellen: true;
Zoals u ziet, hebben we de swipeToDelete-eigenschappen en de opnieuworderbare eigenschappen toegevoegd en ingesteld op true. Dit zal het herordenen van de lijst en het verwijderen van items mogelijk maken.
Laten we vervolgens de activeringsfunctie bewerken en een aantal functies toevoegen om de sorteervolgorde en weergegeven tuts-sites op te slaan. Om dat te doen, moeten we een cookie toevoegen aan de app. Eerst wordt het cookie 'TutsPlusCookie' gedefinieerd en geladen:
MainAssistant.prototype.activate = functie (event) / * plaats hier event handlers die alleen van kracht zouden moeten zijn als deze scène actief is. Key-handlers die bijvoorbeeld het document observeren * / var myCookie = nieuwe Mojo.Model.Cookie ('TutsPlusCookie'); var cookieData = myCookie.get () || "; Als de cookie nog niet bestaat, definiëren we de oorspronkelijke inhoud en opslaan. Als de cookie al bestaat, laden we de gegevens ervan in:
if (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;
Laat me de inhoud van de cookie even uitleggen. Elke tutsplus-site heeft een gedefinieerde ID (van 1 tot 9). Het personage "|" wordt gebruikt als scheidingsteken tussen die ID's. De tutsdata variabele definieert de sorteervolgorde van de sites en ook welke sites worden getoond. De standaardwaarde toont de oorspronkelijke sorteervolgorde en definieert ook dat alle 9 sites worden weergegeven. U zult later zien hoe de functies voor herschikken en verwijderen die gegevens manipuleren en deze in de cookie opslaan.
We moeten ook twee extra listeners definiëren en toevoegen, een voor de ListReorder en een voor de ListDelete-gebeurtenis. We voegen ook een functie toe om de gegevens in het lijstmodel te laden.
this.loadData (tutsdata); this.tapHandler = this.handleTap.bindAsEventListener (this); this.reorderHandler = this.handleReorder.bindAsEventListener (this); this.deleteHandler = this.handleDelete.bindAsEventListener (this); 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); Vergeet niet om alle luisteraars te stoppen wanneer de scène gedeactiveerd is:
MainAssistant.prototype.deactivate = function (event) / * verwijder eventhandlers die je hebt toegevoegd bij activeren en voer een andere opschoning uit die moet gebeuren voordat deze scène wordt geopend of een andere scène wordt ingedrukt * / Mojo.Event.stopListening (this .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); ; Laten we eens kijken naar de nieuwe functie this.loadData:
MainAssistant.prototype.loadData = function (tutsdata) var newData = []; var k = 0; this.data = items: [id: 1, title: 'Nettuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60', id: 2, titel: 'Vectortuts', titleImage: 'images / vectortuts.png', leftImage: 'images / tiny-vector.jpg', col: '# 19487e', id: 3, titel: 'Psdtuts' , titleImage: 'images / psdtuts.png', leftImage: 'images / tiny-psd.jpg', col: '# a51500', id: 4, title: 'Activetuts', titleImage: 'images / activetuts.png ', leftImage:' images / tiny-active.jpg ', col:' # a5290a ', id: 5, title:' Aetuts ', titleImage:' images / aetuts.png ', leftImage:' images / tiny- ae.jpg ', col:' # 4a3a57 ', id: 6, titel:' Cgtuts ', titleImage:' images / cgtuts.png ', leftImage:' images / tiny-cg.jpg ', col:' # 73434f ', id: 7, titel:' Phototuts ', titleImage:' images / phototuts.png ', leftImage:' images / tiny-photo.jpg ', col:' # 2e92b2 ', id: 8, titel: 'Audiotuts', titel Afbeelding: 'images / audiotuts.png', leftImage: 'images / tiny-audio.jpg', col: '# 3d6b00', id: 9, titel: 'Mobiletut s ', titleImage:' images / mobiletuts.png ', leftImage:' images / tiny-mobile.png ', col:' # d19c00 '];
Eerst definiëren we de 9 tutsplus-sites, dit is niet veranderd ten opzichte van Deel 2, toen we een statische lijst definieerden. Eén wijziging: we hebben het ID toegevoegd zoals hierboven vermeld. Vervolgens doorlopen we de doorgegeven reeks van sites die moeten worden weergegeven en hoe ze worden gerangschikt. Elke site die wordt weergegeven, wordt toegevoegd aan een nieuwe array, dit is onze nieuwe inhoud voor het lijstmodel:
var temp = tutsdata.split ('|'); voor (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++; Eindelijk geven we de nieuwe gegevens door aan ons (lege bij setup) lijstmodel en vertellen het model dat de gegevens zijn gewijzigd (gemodelleerd). Dit is dezelfde techniek die we in deel 3 hebben gebruikt:
this.myListModel ["items"] = newData; this.controller.modelChanged (this.myListModel, this);
De laatste twee dingen die ontbreken, zijn de functies voor de gebeurtenissen ListReorder en ListDelete. Laten we beginnen met de handleReorder -gebeurtenis, die elke keer dat de lijst opnieuw wordt gebeld, wordt gebeld.
Met behulp van de doorgegeven parameters event.item, event.toIndex, en event.fromIndex, we veranderen het lijstmodel om de nieuwe sorteervolgorde weer te geven. Een nieuwe cookiewaarde wordt vervolgens geconstrueerd uit het model en opgeslagen in de cookie van onze app.
MainAssistant.prototype.handleReorder = function (event) Mojo.Log.info ("bestelvolgorde gebeurtenis% 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 ); De handleDelete-functie doet vrijwel hetzelfde, verwijdert eerst het verwijderde item uit het lijstmodel en bouwt vervolgens opnieuw een nieuwe cookiewaarde uit het model en slaat dat op..
MainAssistant.prototype.handleDelete = function (event) 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 ); Nu kunt u doorgaan en de lijst opnieuw rangschikken in de hoofdscène en zelfs items verwijderen die u niet wilt zien. Gewoon een item vasthouden en verslepen om het opnieuw te ordenen. Als u een item wilt verwijderen, schuift u er met uw vinger overheen en wordt u gevraagd of u het uit de lijst wilt verwijderen.
We hebben een hele reeks nieuwe onderwerpen behandeld om de tutsplus-app uit te breiden. We hebben geleerd hoe we de WebView-widget moeten gebruiken om de website-inhoud weer te geven en hoe we het opnieuw ordenen en verwijderen van het lijstitem moeten aanpakken. Hopelijk heb je genoten van lezen en veel geleerd!
