Share
Aceasta este cea de-a patra tranșă a seriei de prezentări webOS. În acest tutorial, veți afla cum să utilizați widgetul webview în webOS pentru a afișa un site web încorporat în aplicația dvs. De asemenea, vom adăuga funcționalități pentru a permite reordonarea și ștergerea elementelor din listă.
Pentru a începe, continuați și generați o nouă scenă numită articol:
palm-generate -t new_scene -p "nume = articol" tutsplus
Apoi, editați app / views / articol / article-scene.html să conțină următoarele:
Abilități de plată a facturilor
Folosim acelasi antet ca in scena principala. Mai jos vom adăuga widget-ul Webview. Rețineți că vom împacheta vizualizarea web într-un wrap-div, în acest fel
putem să împingem vizualizarea web sub fundul antetului.
Adăugați clasa suplimentară la stylesheets / tutsplus.css.
#webWrapper padding-top: 48px;
Editarea următoare app / asistenți / article-assistant.js și adăugați configurarea widgetului webview:
Accentsconagua
ArticleAssistant.prototype.setup = function () / * această funcție este pentru sarcinile de configurare care trebuie să se întâmple când scena este creată pentru prima dată * / / * folosiți Mojo.View.render pentru a reda șabloane de vizualizare și a le adăuga la scenă, dacă * / / * setarea widget-urilor aici * / / * adăugarea programatorilor de evenimente pentru a asculta evenimente din widget-uri * / this.controller.setupWidget ("myWebView", this.attributes = url: this.url,, this.model = ); ; Adăugați, de asemenea, codul necesar pentru a trece url la scena:
functionAssistant (url) / * aceasta este functia de creator pentru obiectul asistentului scena. Vor fi transmise toti parametrii suplimentari (dupa numele scenei) care au fost transmise catre pushScene. Referința la controlerul de scenă (acest.controler) nu a fost încă stabilită, deci orice inițializare care are nevoie de controlerul de scenă trebuie făcută în funcția de configurare de mai jos. * / this.url = url;
Imediat ce scena articolului este apelată cu o adresă URL, widgetul webview începe să încarce conținutul site-ului web.
De asemenea, trebuie să schimbăm scena listă pentru a apela noua scenă de articol când atingem un element. Editați | × app / asistenți / list-assistant.js pentru asta
și adăugați funcția handleTap:
ListAssistant.prototype.handleTap = funcție (eveniment) Mojo.Log.info ("Indexul evenimentului este:" + event.index); Mojo.Log.info ("selectat:" + event.item.guid); Mojo.Controller.stageController.pushScene ("articol", event.item.guid); Modelul listei conține indicația de proprietate, care este o adresă URL a site-ului. Folosind obiectul de eveniment primim guidul celui dat
listați articolul și treceți-l la scena articolului.
De asemenea, adăugați o listă taphandler la funcția de activare a ListAssistant:
this.tapHandler = this.handleTap.bindAsEventListener (aceasta); Mojo.Event.listen (acest.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); Nu uitați să vă curățați ascultătorul în funcția de dezactivare:
ListAssistant.prototype.deactivate = funcție (eveniment) / * eliminați eventualii operatori de evenimente pe care i-ați adăugat în activare și efectuați orice altă curățare care ar trebui să se întâmple înainte ca această scenă să fie afișată sau o altă scenă să fie împinsă în sus * / Mojo.Event.stopListening .controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; Asta e pentru vizualizarea web. Pachetați, instalați și executați aplicația:
Nu ar fi bine dacă ați putea schimba ordinea siturilor tutsplus în prima scenă? Spuneți că vreți Mobiletuts + în loc de nettuts, sau dacă doriți să ștergeți un site de care nu sunteți interesat? Voi arăta cum să faceți acest lucru cu unele funcții de listă încorporate și module cookie.
Dacă ați citit partea 2 din această serie, am furnizat datele pentru listă dintr-un model static. Să schimbăm acest lucru pentru a folosi un model dinamic. Deschis app / asistenți / principale-assistant.js:
în funcția de configurare, înlocuiți:
this.myListModel = elemente: [title: 'Nettuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60',
cu
this.myListModel = elemente: [];
Acest lucru va furniza un model listă gol la data de instalare pentru listă. Modificați, de asemenea, atributele de listă:
this.myListAttr = itemTemplate: "principal / elementTemplate", swipeToDelete: true, renderLimit: 20, reordonabil: true;
După cum puteți vedea, am adăugat proprietățile swipeToDelete și reordonabile și le-am setat la true. Aceasta va permite reordonarea listei și ștergerea elementelor.
Apoi, editați funcția de activare și adăugați câteva funcții pentru a salva ordinea sortare și afișarea site-urilor tuts. Pentru a face acest lucru, trebuie să adăugăm un modul cookie în aplicație. Mai întâi, cookie-ul "TutsPlusCookie" este definit și încărcat:
MainAssistant.prototype.activate = funcția (evenimentul) / * a pus în mânuitorii de evenimente aici, care ar trebui să fie valabile numai când această scenă este activă. De exemplu, manipulatorii cheie care respectă documentul * / var myCookie = noul Mojo.Model.Cookie ("TutsPlusCookie"); var cookieData = myCookie.get () || "; Dacă cookie-ul nu există încă, definim conținutul inițial și salvăm. Dacă cookie-ul există deja, vom încărca datele din acesta:
dacă cookieData == ") myCookie.put tutsdata: '| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |')) var tutsdata = 4 | 5 | 6 | 7 | 8 | 9 | " altceva var tutsdata = cookieData.tutsdata;
Permiteți-mi să explic pentru o clipă conținutul cookie-ului. Fiecare site tutsplus are un id definit (de la 1 la 9). Caracterul "|" este folosit ca un delimiter între acele ID-uri. tutsdata variabila definește ordinea de sortare a site-urilor, precum și site-urile care sunt afișate. Valoarea implicită indică ordinea inițială de sortare și definește, de asemenea, că toate cele 9 site-uri vor fi afișate. Veți vedea mai târziu cum funcțiile de reordonare și ștergere vor manipula aceste date și vor fi stocate în cookie.
De asemenea, trebuie să definim și să adăugăm doi ascultători suplimentari, unul pentru ListReorder și unul pentru Event ListDelete. De asemenea, adăugăm o funcție pentru a încărca datele în modelul de listă.
this.loadData (tutsdata); this.tapHandler = this.handleTap.bindAsEventListener (aceasta); this.reorderHandler = this.handleReorder.bindAsEventListener (acest lucru); this.deleteHandler = this.handleDelete.bindAsEventListener (aceasta); Mojo.Event.listen (acest.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); Mojo.Event.listen (acest.controller.get ('MyList'), Mojo.Event.listReorder, this.reorderHandler); Mojo.Event.listen (acest.controller.get ('MyList'), Mojo.Event.listDelete, this.deleteHandler); Nu uitați să opriți toți ascultătorii atunci când scena este dezactivată:
MainAssistant.prototype.deactivate = funcție (eveniment) / * eliminați eventualii manipulatori de evenimente pe care i-ați adăugat în activare și efectuați orice altă curățare care ar trebui să se întâmple înainte ca această scenă să fie afișată sau o altă scenă să fie împinsă în sus * / Mojo.Event.stopListening .controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); Mojo.Event.stopListening (acest.controller.get ('MyList'), Mojo.Event.listReorder, this.reorderHandler); Mojo.Event.stopListening (acest.controller.get ('MyList'), Mojo.Event.listDelete, this.deleteHandler); ; Să aruncăm o privire la noua funcție this.loadData:
MainAssistant.prototype.loadData = funcție (tutsdata) var newData = []; var k = 0; this.data = elemente: id: 1, title: 'Nettuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60' id: 2, titlu: 'Vectortuts', titleImage: 'images / vectortuts.png', leftImage: 'images / tiny-vector.jpg', col: '# 19487e' , titleImage: 'images / psdtuts.png', leftImage: 'images / tiny-psd.jpg', col: '# a51500', id: 4, title: 'Activetuts', titleImage: 'images / activetuts.png ', id: 5, titlu:' Aetuts ', titleImage:' images / aetuts.png ', leftImage:' images / tiny-active.jpg ' ae.jpg ', col:' # 4a3a57 ', id: 6, titlu:' Cgtuts ', titleImage:' images / cgtuts.png ', leftImage: 73434f ', id: 7, titlu:' Phototuts ', titleImage:' images / phototuts.png ', leftImage:' images / tiny-photo.jpg ', col:' # 2e92b2 ', id: titlu: 'Audiotuts', titleImage: 'images / audiotuts.png', leftImage: 'images / tiny-audio.jpg', col: '# 3d6b00', id: 9, title: s ', titleImage:' images / mobiletuts.png ', leftImage:' images / tiny-mobile.png ', col:' # d19c00 '];
În primul rând, definim cele 9 site-uri tutsplus, acest lucru este neschimbat din partea 2, când am definit o listă statică. O schimbare: am adăugat id-ul așa cum sa menționat mai sus. Apoi buclele prin șirul de site-uri pe care să le arătăm și cum le sunt ordonate. Fiecare site care va fi afișată este adăugată la un nou tablou, acesta va fi noul nostru conținut pentru modelul listei:
var temp = tutsdata.split ('|'); pentru (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++; În cele din urmă, trecem noile date în modelul de listă (gol la configurare) și spunem modelului că datele s-au schimbat (modelul schimbat). Aceasta este aceeași tehnică pe care am folosit-o în Partea 3:
this.myListModel ["items"] = date noi; this.controller.modelChanged (this.myListModel, this);
Ultimile două lucruri lipsesc sunt funcțiile pentru evenimentul ListReorder și ListDelete. Să începem cu evenimentul handleReorder, care va fi apelat de fiecare dată când lista este reordonată.
Cu ajutorul parametrilor parcurși event.item, event.toIndex, și event.fromIndex, modificăm modelul listei pentru a reflecta noua ordine de sortare. O valoare nouă a modulelor cookie este apoi construită din model și salvată în cookie-ul aplicației noastre.
MainAssistant.prototype.handleReorder = funcție (eveniment) Mojo.Log.info ("reordonarea evenimentului% 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); pentru (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 ); Funcția handleDelete este aproape aceeași, mai întâi elimină elementul șters din modelul de liste și apoi din nou construiește o nouă valoare a modulelor cookie din model și salvează.
MainAssistant.prototype.handleDelete = funcție (eveniment) Mojo.Log.info ("delete event" + event.item); this.myListModel.items.splice (this.myListModel.items.indexOf (event.item), 1); var temp = "; pentru (var j = 0; < 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 ); Acum, puteți merge mai departe și reordonați lista în scena principală și chiar ștergeți elementele pe care nu doriți să le vedeți. Trebuie doar să țineți și să trageți un element pentru ao reordona. Pentru a șterge un element, glisați cu degetul peste el și vă va întreba dacă vreți să îl ștergeți din listă.
Am acoperit o mulțime de subiecte noi pentru a extinde aplicația tutsplus. Am învățat cum să folosim widgetul WebView pentru a afișa conținutul site-ului web și apoi cum să procedăm cu reordonarea și ștergerea elementelor din listă. Sper că te-ai bucurat de lectură și ai învățat multe!
