Share
In questo tutorial, imparerai come creare un'applicazione webOS per visualizzare tutti i siti nella rete tuts +. Questa è la seconda puntata di una serie sullo sviluppo mobile di WebOS. Leggi la prima parte di questa serie per un'introduzione generale alla piattaforma e per familiarizzare con gli strumenti necessari per sviluppare applicazioni webOS.
Per iniziare, apri un prompt dei comandi / terminale e digita quanto segue:
palm-generate tutsplus
Questo creerà la directory "tutsplus" e la struttura di directory necessaria per le applicazioni webOS.
Scarica le immagini per i siti tuts + allegati a questo post. Copia i file nella directory app / images, quindi copia tuts_icon.png nella directory tutsplus.
Ora diamo un'occhiata più da vicino a "tutsplus / appinfo.json". Apri il file appinfo.json nel tuo editor di testo preferito e modificalo come segue:
"id": "com.mycompany.tutsplus", "versione": "1.0.0", "fornitore": "MyCompany", "tipo": "web", "main": "index.html", " title ":" TutsPlus "," icon ":" tuts_icon.png "
Vai avanti e cambia anche i valori "id" e "vendor".
Per riempire il nostro palco con la vita andiamo avanti e creiamo la prima scena, o "principale":
palm-generate -t new_scene -p "name = main" tutsplus
Questo creerà due file: la vista in app / views / main / main-scene.html e l'assistente per la scena in app / assistants / main-assistant.js
Ora apri main-scene.html e aggiungi la prima parte, l'intestazione:
Abilità a pagare le bollette
La classe "multi-linea di intestazione di palm-page" è una delle molte incluse in Mojo Framework, ma definiremo le classi aggiuntive trovate nello snippet HTML sopra di noi stessi. Modifica il foglio di stile / tutsplus.css per questo e aggiungi queste definizioni di classe:
.tuts-header position: fixed; z-index: 1000; larghezza: 100%; altezza: 35px; imbottitura: 10px 0 0; margine: 0; -webkit-palm-mouse-target: ignore; .title-image position: fixed; inizio: 16px; a sinistra: 14px; .main-title position: absolute; font-size: 24px; a sinistra: 60 px; inizio: -4px; larghezza: 220 px;
Come puoi vedere, utilizziamo le proprietà CSS standard con un'eccezione:
-webkit-palm-mouse-target: ignore;
Questa proprietà non standard indica all'intestazione di ignorare i clic.
NOTA:
Cosa succede se si desidera esaminare gli elementi DOM e gli stili CSS della propria applicazione? Usa l'ispettore del palmo.
Ora aggiungiamo la carne della nostra applicazione alla scena, un widget lista:
Entriamo nelle liste per un momento. Gli elenchi sono probabilmente il widget più utilizzato in webOS. Ci permettono di visualizzare i dati in colonne e molto altro. Le liste webOS includono le seguenti funzionalità:
Ci dirigiamo verso app / assistenti / main-assistant.js per configurare la nostra scena e la lista che contiene. Per prima cosa definiamo i dati necessari per compilare la nostra lista:
MainAssistant.prototype.setup = function () / * questa funzione è per le attività di configurazione che devono verificarsi quando la scena viene creata per la prima volta * / / * usa Mojo.View.render per rendere i modelli 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.myListModel = items: [title: 'Netsuts', 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 ', title:' Activetuts ', titleImage : 'images / activetuts.png', leftImage: 'images / tiny-active.jpg', col: '# a5290a', title: 'Aetuts', titleImage: 'images / aetuts.png', leftImage: 'images /tiny-ae.jpg ', col:' # 4a3a57 ', title:' 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 ', title:' Mobiletuts ', titoloImmagine:' images / mobiletuts.png ', leftImage:' images / tiny- mobile.png ', col:' # d19c00 '];
Nota che myListModel ha una proprietà chiamata "items". Il widget Elenco si aspetta di trovare una proprietà nel dataModel che contiene una matrice di oggetti. Il nome di questa proprietà deve essere "articoli". Nel nostro caso, definiamo le informazioni sulla rete tutsplus. Ogni oggetto contiene proprietà che rappresentano titolo, immagini e colori per ciascun sito. Queste proprietà possono essere utilizzate nell'elenco includendolo nel modello di elenco. Un elenco è reso con l'aiuto di un modello, quindi andiamo avanti e creare il nostro: app / views / main / itemTemplate.html. Modifica il nuovo modello per contenere quanto segue:
#titolo
Il nostro modello indica alla lista come visualizzare ogni oggetto dal suo modello. Vogliamo mostrare il titolo e l'immagine del nostro modello, quindi includiamo i tag speciali # leftImage e # title. Questi vengono rimpiazzati con i dati dal nostro modello quando la riga viene renderizzata.
Quindi, aggiungi la classe "grid-cell" al foglio di stile stylesheets / tutsplus.css:
.grid-cell color: # 000; .grid-cell.selected color: #fff; sfondo: #ccc; border: 1px solid # 00f;
Queste due classi definiscono l'aspetto di una riga di elenco nello stato non selezionato e selezionato.
Torna a app / assistants / main-assistant.js e aggiungi la dichiarazione necessaria per impostare il nostro elenco:
this.myListAttr = itemTemplate: "main / itemTemplate", renderLimit: 20,; this.controller.setupWidget ( "MyList", this.myListAttr, this.myListModel); ;
In myListAttr diciamo alla lista quale template usare; specifichiamo il nostro modello appena creato. Come puoi vedere nella chiamata di setupWidget, passiamo l'id della lista, i parametri e il modello.
Abbiamo anche bisogno di modificare app / assistenti / stage-assistant.js per visualizzare la scena principale all'avvio dell'applicazione:
function StageAssistant () / * questa è la funzione creator per il tuo oggetto stage assistant * / StageAssistant.prototype.setup = function () / * questa funzione è per le attività di configurazione che devono verificarsi quando lo stage viene creato per la prima volta * / Mojo.Controller.stageController.pushScene ( "principale"); ;
Tutto fatto, vediamo com'è la nostra applicazione ... lancia l'emulatore, impacchetta l'applicazione e installala nell'emulatore:
palm-package tutsplus palm-install com.mycompany.tutsplus_1.0.0_all.ipk
Stai bene, non credi? Tutto ciò con solo poche righe di codice. Aggiungiamo alcune funzionalità in più. Che dire di qualcosa che accade quando l'utente fa clic su una riga nell'elenco? Va bene, vai avanti e aggiungi quanto segue a app / assistants / main-assistant.js:
Accentsconagua
#titoloMainAssistant.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 * / this.tapHandler = this.handleTap.bindAsEventListener (this); Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; MainAssistant.prototype.handleTap = function (event) Mojo.Log.info ("L'indice di evento è:" + event.index); Mojo.Log.info ("selected:" + event.item.title); this.title = event.item.title; this.titleImage = event.item.titleImage; this.col = event.item.col; Mojo.Controller.stageController.pushScene ("lista", this.title, this.titleImage, this.col); Registrazione: Come vedi sopra, abbiamo aggiunto una dichiarazione Mojo.Log.info al codice. A volte, l'app non si avvia o non funziona o si desidera solo stampare alcune informazioni debug. Mojo.Log.info ti aiuterà a farlo. Per vedere l'output prodotto da Mojo.Log.info, utilizzare il comando:
palm-log
(com.mycompany.tutsplus per la nostra applicazione)
Questa volta, aggiungiamo la chiamata Mojo.Event.listen al metodo activate di MainAssistant. Ogni volta che l'app viene attivata (la scena viene premuta o viene scoccata un'altra scena e la scena viene nuovamente visualizzata) viene chiamato il codice in attivazione.
Creiamo un gestore (this.handler) e lo chiamiamo quando rileviamo un tap (Mojo.Event.listTap) sul nostro elenco (this.controller.get ('MyList')
Diamo un'occhiata alla nostra funzione handleTap del gestore. Quando la lista viene toccata, la funzione riceve un oggetto pari. Ciò che ci interessa è la proprietà event.index, che contiene la riga della lista che è stata selezionata. Fortunatamente per noi, l'oggetto evento contiene anche le proprietà dell'elemento di riga TAPpato preso dal modello. event.item.title come esempio conterrà "Mobiletuts" se clicchiamo su quella riga.
Raccogliamo tutti i dati che vogliamo utilizzare dall'oggetto dell'evento e infine chiamiamo la nostra nuova "lista" di scene. Nota come aggiungiamo i dati che vogliamo trasmettere a questa scena nella chiamata pushScene. Puoi aggiungere tutti i parametri che vuoi.
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); ; Si noti che aggiungiamo anche Mojo.Event.stopListening al metodo disattivato di MainAssistant. In questo modo, la nostra App non ascolta più i tap sulla lista quando viene proiettata una scena diversa sopra di essa e non ci imbattiamo in nessun Eventmanlers randagio quando si esce dall'app.
Ciò che deve ancora essere fatto è creare la nuova lista delle scene:
palm-generate -t new_scene -p "name = list" tutsplus
Successivamente, modifica app / views / list / list-scene.html:
Ora modifica app / assistant / list-assistant.js:
function ListAssistant (title, titleimage, col) / * 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.title = titolo; this.titleimage = titleimage; this.col = col; ListAssistant.prototype.setup = function () / * questa funzione è per le attività di configurazione che devono verificarsi quando la scena viene creata per la prima volta * / / * usa Mojo.View.render per rendere i modelli 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.get ('result'). innerHTML = "Hai selezionato" + this.title + "nell'elenco ". this.controller.get ( 'immagine'). innerHTML ="
" Nota come copiamo i parametri passati in nuove variabili per un uso successivo. Aggiorniamo anche l'HTML della nostra scena per mostrare quelli passati nei parametri.
Ricreare l'app, installarla ed eseguirla. Tocca una riga dell'elenco e guarda come viene spinta la nuova scena e mostra quale riga hai selezionato!
Congratulazioni, abbiamo affrontato una serie di argomenti in questa seconda parte. Hai imparato come creare un elenco, riempirlo con i dati, visualizzarlo e quindi reagire all'interazione dell'utente. Nella parte successiva, stiamo andando a riempire la nostra lista di funzionalità con funzionalità: ottenere gli ultimi tutorial e articoli dal feed RSS del sito selezionato e visualizzarli in un elenco. Speriamo che resterai fedele e lascerai il tuo feedback nella sezione commenti!
"