Share
Questa è la quarta puntata della nostra serie introduttiva di webOS. In questo tutorial, imparerai come usare il widget webview in webOS per visualizzare un sito web incorporato nella tua app. Aggiungeremo anche funzionalità per consentire il riordino e l'eliminazione degli elementi dell'elenco.
Per iniziare, vai avanti e genera una nuova scena chiamata articolo:
palm-generate -t new_scene -p "nome = articolo" tutsplus
Quindi, modifica app / views / article / article-scene.html contenere quanto segue:
Abilità a pagare le bollette
Usiamo la stessa intestazione della nostra scena principale. Sotto a questo aggiungiamo il widget webview. Si noti che avvolgere la webview in un wrapper-div, in questo modo
possiamo spingere la webview sotto l'intestazione.
Aggiungi la classe aggiuntiva a fogli di stile / tutsplus.css.
#webWrapper padding-top: 48px;
Modifica successiva app / assistenti / articolo-assistant.js e aggiungi la configurazione del widget webview:
Accentsconagua
ArticleAssistant.prototype.setup = function () / * questa funzione è per le attività di setup che devono accadere quando la scena viene creata per la prima volta * / / * usare Mojo.View.render per rendere i template di visualizzazione e aggiungerli alla scena, se necessario * / / * i widget di configurazione qui * / / * aggiungi i gestori di eventi per ascoltare gli eventi dai widget * / this.controller.setupWidget ("myWebView", this.attributes = url: this.url,, this.model = ); ; Aggiungi anche il codice necessario per passare l'url alla scena:
function ArticleAssistant (url) / * questa è la funzione creator per il tuo oggetto assistente di scena. Verranno passati tutti i parametri aggiuntivi (dopo il nome della scena) passati a pushScene. Il riferimento al controller di scena (this.controller) non è stato ancora stabilito, quindi qualsiasi inizializzazione che necessiti del controller di scena dovrebbe essere eseguita nella seguente funzione di installazione. * / this.url = url;
Non appena la scena dell'articolo viene chiamata con un url, il widget di webview inizia a caricare i contenuti del sito web.
Abbiamo anche bisogno di cambiare la nostra lista per chiamare la scena del nuovo articolo quando tocchiamo un oggetto. modificare app / assistenti / list-assistant.js per quello
e aggiungi la funzione handleTap:
ListAssistant.prototype.handleTap = function (event) Mojo.Log.info ("L'indice di evento è:" + event.index); Mojo.Log.info ("selected:" + event.item.guid); Mojo.Controller.stageController.pushScene ("article", event.item.guid); Il modello della lista contiene la proprietà guid, che è un URL del sito. Usando l'oggetto evento otteniamo il guid del toccato
elenca l'articolo e passa alla scena dell'articolo.
Aggiungi anche un elenco di taphandler alla funzione di attivazione di ListAssistant:
this.tapHandler = this.handleTap.bindAsEventListener (this); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); Non dimenticare di ripulire l'ascoltatore nella funzione di disattivazione:
ListAssistant.prototype.deactivate = function (event) / * rimuove tutti i gestori di eventi che hai aggiunto in attivazione e esegui qualsiasi altra pulizia che dovrebbe accadere prima che questa scena venga spuntata o un'altra scena viene inserita in cima * / Mojo.Event.stopListening (this .controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; Questo è tutto per la webview. Imballa, installa ed esegui l'app:
Non sarebbe bello se potessi cambiare l'ordine dei siti tutsplus nella prima scena? Dici che vuoi Mobiletuts + prima invece di nettuts, o cosa succede se vuoi cancellare un sito che non ti interessa? Mostrerò come farlo con alcune funzionalità e cookie di elenco incorporati.
Se leggi la parte 2 di questa serie, abbiamo fornito i dati per l'elenco da un modello statico. Cambiamo per usare un modello dinamico. Aperto app / assistenti / principali-assistant.js:
nella funzione setup, sostituire:
this.myListModel = items: [title: 'Nettuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60',
con
this.myListModel = items: [];
Questo fornirà un modello di lista vuota al momento della configurazione per l'elenco. Modifica anche gli attributi dell'elenco:
this.myListAttr = itemTemplate: "main / itemTemplate", swipeToDelete: true, renderLimit: 20, reorderable: true;
Come puoi vedere, abbiamo aggiunto le proprietà swipeToDelete e riordinabili e le abbiamo impostate su true. Ciò consentirà il riordino delle liste e l'eliminazione degli elementi.
Successivamente, modifichiamo la funzione di attivazione e aggiungiamo alcune funzioni per salvare l'ordinamento e i siti tuts visualizzati. Per fare ciò, dobbiamo aggiungere un cookie all'app. Innanzitutto, il cookie "TutsPlusCookie" è definito e caricato:
MainAssistant.prototype.activate = function (event) / * metti qui i gestori di eventi che dovrebbero essere attivi solo quando questa scena è attiva. Ad esempio, i gestori di chiavi che stanno osservando il documento * / var myCookie = new Mojo.Model.Cookie ('TutsPlusCookie'); var cookieData = myCookie.get () || "; Se il cookie non esiste ancora, ne definiamo il contenuto iniziale e salviamo. Se il cookie esiste già, carichiamo i dati da esso:
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;
Lascia che ti spieghi il contenuto del cookie per un momento. Ogni sito tutsplus ha un ID definito (da 1 a 9). Il personaggio "|" è usato come delimitatore tra questi ID. Il tutsdata variabile definisce l'ordinamento dei siti e quali siti sono mostrati. Il valore predefinito mostra l'ordinamento iniziale e definisce anche che tutti e 9 i siti verranno visualizzati. Vedrai in seguito come le funzioni di riordino e cancellazione manipoleranno tali dati e li memorizzeranno nel cookie.
Dobbiamo inoltre definire e aggiungere due listener aggiuntivi, uno per ListReorder e uno per l'evento ListDelete. Aggiungiamo anche una funzione per caricare i dati nel modello di lista.
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); Non dimenticare di interrompere tutti gli ascoltatori quando la scena è disattivata:
MainAssistant.prototype.deactivate = function (event) / * rimuove qualsiasi gestore di eventi che hai aggiunto in attivazione e fai qualsiasi altra pulizia che dovrebbe accadere prima che questa scena venga scoccata o un'altra scena sia premuta in cima * / Mojo.Event.stopListening (questo .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); ; Diamo un'occhiata alla nuova funzione this.loadData:
MainAssistant.prototype.loadData = function (tutsdata) var newData = []; var k = 0; this.data = items: [id: 1, titolo: 'Netsuts', titleImage: 'images / nettuts.png', leftImage: 'images / tiny-net.jpg', col: '# 2e6a60', id: 2, titolo: 'Vectortuts', titleImage: 'images / vectortuts.png', leftImage: 'images / tiny-vector.jpg', col: '# 19487e', id: 3, titolo: 'Psdtuts' , titleImage: 'images / psdtuts.png', leftImage: 'images / tiny-psd.jpg', col: '# a51500', id: 4, titolo: 'Activetuts', titleImage: 'images / activetuts.png ', leftImage:' images / tiny-active.jpg ', col:' # a5290a ', id: 5, titolo:' Aetuts ', titoloImmagine:' images / aetuts.png ', leftImage:' images / tiny- ae.jpg ', col:' # 4a3a57 ', id: 6, titolo:' Cgtuts ', titleImage:' images / cgtuts.png ', leftImage:' images / tiny-cg.jpg ', col:' # 73434f ', id: 7, titolo:' Phototuts ', titleImage:' images / phototuts.png ', leftImage:' images / tiny-photo.jpg ', col:' # 2e92b2 ', id: 8, titolo: 'Audiotuts', titoloImmagine: 'images / audiotuts.png', leftImage: 'images / tiny-audio.jpg', col: '# 3d6b00', id: 9, titolo: 'Mobiletut s ', titleImage:' images / mobiletuts.png ', leftImage:' images / tiny-mobile.png ', col:' # d19c00 '];
In primo luogo, definiamo i 9 siti tutsplus, questo è invariato dalla Parte 2, quando abbiamo definito una lista statica. Una modifica: abbiamo aggiunto l'ID come indicato sopra. Effettuiamo quindi un ciclo attraverso la stringa passata di quali siti mostrare e come sono ordinati. Ogni sito che verrà visualizzato viene aggiunto a un nuovo array, questo sarà il nostro nuovo contenuto per il modello di elenco:
var temp = tutsdata.split ('|'); per (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++; Alla fine, passiamo i nuovi dati al nostro modello di lista (vuoto all'impostazione) e comunichiamo al modello che i dati sono cambiati (modelchanged). Questa è la stessa tecnica che abbiamo usato nella Parte 3:
this.myListModel ["items"] = newData; this.controller.modelChanged (this.myListModel, this);
Le ultime due cose mancanti sono le funzioni per l'evento ListReorder e ListDelete. Iniziamo con l'evento handleReorder, che verrà chiamato ogni volta che l'elenco viene riordinato.
Con l'aiuto dei parametri passati event.item, event.toIndex, e event.fromIndex, modifichiamo il modello delle liste per riflettere il nuovo ordinamento. Un nuovo valore del cookie viene quindi costruito fuori dal modello e salvato nel cookie della nostra app.
MainAssistant.prototype.handleReorder = function (event) Mojo.Log.info ("riordina evento% 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); per (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 ); La funzione handleDelete fa quasi la stessa cosa, rimuove prima l'elemento eliminato dal modello di elenchi e quindi costruisce nuovamente un nuovo valore del cookie dal modello e lo salva.
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 ); Ora puoi andare avanti e riordinare l'elenco nella scena principale e persino eliminare elementi che non vuoi vedere. Tieni premuto e trascina un oggetto per riordinarlo. Per eliminare un oggetto, lo fai scorrere con il dito sopra e ti chiederà se vuoi cancellarlo dalla lista.
Abbiamo coperto una serie di nuovi argomenti per espandere l'app tutsplus. Abbiamo appreso come utilizzare il widget WebView per visualizzare i contenuti del sito Web e come gestire il riordino e l'eliminazione degli elementi dell'elenco. Spero che ti sia piaciuto leggere e imparato molto!
