Share
In deze zelfstudie leert u hoe u een webOS-toepassing maakt om alle sites in de tuts + het netwerk weer te geven. Dit is de tweede aflevering van een serie over webOS-ontwikkeling. Lees deel één van deze serie voor een algemene inleiding tot het platform en om vertrouwd te raken met de hulpmiddelen die u nodig hebt om webOS-applicaties te ontwikkelen.
Om te beginnen, open een Command Prompt / Terminal en typ het volgende:
palm-produceer tutsplus
Hiermee wordt de map "tutsplus" en de benodigde mapstructuur voor webOS-toepassingen gemaakt.
Download de afbeeldingen voor de tuts + sites die aan dit bericht zijn gekoppeld. Kopieer de bestanden naar de map app / images en kopieer tuts_icon.png naar de map tutsplus.
Nu nemen we 'tutsplus / appinfo.json' van naderbij. Open het appinfo.json-bestand in uw favoriete teksteditor en pas het als volgt aan om het te lezen:
"id": "com.mycompany.tutsplus", "version": "1.0.0", "vendor": "MyCompany", "type": "web", "main": "index.html", " title ":" TutsPlus "," icon ":" tuts_icon.png "
Ga je gang en verander ook de "id" - en "vendor" -waarden naar die van jou.
Om ons podium met leven te vullen, gaan we door en maken we de eerste of "hoofd" scène:
palm-generate -t new_scene -p "name = main" tutsplus
Hiermee worden twee bestanden gemaakt: de weergave in app / views / main / main-scene.html en de assistent voor de scène op app / assistants / main-assistant.js
Open nu main-scene.html en voeg het eerste deel, de header:
Vaardigheden om de rekeningen te betalen
De klasse 'palm-page-header multi-line' is een van de vele die is opgenomen in het Mojo Framework, maar we gaan de aanvullende klassen definiëren die in het bovenstaande HTML-fragment zijn gevonden. Bewerk stylesheet / tutsplus.css daarvoor en voeg deze klassedefinities toe:
.tuts-header positie: vast; z-index: 1000; breedte: 100%; hoogte: 35 px; opvulling: 10px 0 0; marge: 0; -webkit-palm-muis-doel: negeren; .title-image positie: vast; top: 16px; links: 14px; .main-title position: absolute; tekengrootte: 24 px; links: 60px; top: -4px; breedte: 220 px;
Zoals u kunt zien, gebruiken we standaard CSS-eigenschappen met één uitzondering:
-webkit-palm-mouse-target: negeer;
Deze niet-standaard eigenschap vertelt de kop om klikken te negeren.
NOTITIE:
Wat als u naar de DOM-elementen en CSS-stijlen van uw toepassing wilt kijken? Gebruik de palminspecteur.
We voegen nu het vlees van onze applicatie toe aan de scène, een lijstwidget:
Laten we even in lijsten duiken. Lijsten zijn waarschijnlijk de meest gebruikte widget in webOS. Ze stellen ons in staat om gegevens in kolommen weer te geven en nog veel meer. webOS-lijsten bevatten de volgende functionaliteit:
We gaan naar app / assistants / main-assistant.js om onze scène en de lijst die deze bevat in te stellen. Eerst definiëren we de nodige gegevens om onze lijst te vullen:
MainAssistant.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.myListModel = items: [title: 'Nettuts', 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: 'afbeeldingen /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: 'afbeeldingen /audiotuts.png ', leftImage:' images / tiny-audio.jpg ', col:' # 3d6b00 ', title:' Mobiletuts ', titleImage:' images / mobiletuts.png ', leftImage:' images / tiny- mobile.png ', col:' # d19c00 '];
Merk op dat myListModel een eigenschap heeft met de naam "items". De lijst-widget verwacht een eigenschap in het dataModel te vinden die een array van objecten bevat. Deze eigenschapsnaam moet 'items' zijn. In ons geval definiëren we de informatie over het tutsplus-netwerk. Elk item bevat eigenschappen die de titel, afbeeldingen en kleur voor elke site vertegenwoordigen. Deze eigenschappen kunnen in de lijst worden gebruikt door deze op te nemen in de lijstsjabloon. Een lijst wordt weergegeven met behulp van een sjabloon, dus laten we doorgaan en de onze creëren: app / views / main / itemTemplate.html. Bewerk de nieuwe sjabloon als volgt:
#titel
Onze sjabloon vertelt de lijst hoe elk item van zijn model moet worden weergegeven. We willen de titel en afbeelding van ons model weergeven, dus we nemen de speciale tags # leftImage en # title op. Die worden vervangen door de gegevens uit ons model wanneer de rij wordt gerenderd.
Voeg vervolgens de klasse "rastercel" toe aan de stylesheet stylesheets / tutsplus.css:
.raster-cel kleur: # 000; .grid-cell.selected color: #fff; achtergrond: #ccc; rand: 1px vast # 00f;
Die twee klassen definiëren het uiterlijk van een lijstrij in zijn niet-geselecteerde en geselecteerde staat.
Ga terug naar app / assistants / main-assistant.js en voeg de benodigde verklaring toe om onze lijst in te stellen:
this.myListAttr = itemTemplate: "main / itemTemplate", renderLimit: 20,; this.controller.setupWidget ( "MyList", this.myListAttr, this.myListModel); ;
In myListAttr vertellen we de lijst welke sjabloon moet worden gebruikt; we specificeren onze zojuist gemaakte sjabloon. Zoals u kunt zien in de setupWidget-aanroep, geven we de id van de lijst, de parameters en het model door.
We moeten ook app / assistants / stage-assistant.js bewerken om de hoofdscène weer te geven wanneer de toepassing start:
function StageAssistant () / * dit is de creator-functie voor uw stage assistant-object * / StageAssistant.prototype.setup = function () / * deze functie is bedoeld voor installatietaken die moeten gebeuren wanneer de fase voor het eerst wordt gemaakt * / Mojo.Controller.stageController.pushScene ( "main"); ;
Alles gedaan, laten we eens kijken hoe onze applicatie eruit ziet ... start de emulator, pak de applicatie in en installeer deze op de emulator:
palm-pakket tutsplus palm-install com.mycompany.tutsplus_1.0.0_all.ipk
Ziet er goed uit, vind je niet? Dat alles met slechts een paar regels code. Laten we wat meer functionaliteit toevoegen. Hoe zit het met iets dat gebeurt wanneer de gebruiker op een rij in de lijst klikt? Oké, ga je gang en voeg het volgende toe aan app / assistants / main-assistant.js:
Accentsconagua
#titelMainAssistant.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 * / this.tapHandler = this.handleTap.bindAsEventListener (this) observeren; Mojo.Event.listen (this.controller.get ('MyList'), Mojo.Event.listTap, this.tapHandler); ; MainAssistant.prototype.handleTap = function (event) Mojo.Log.info ("Gebeurtenisindex is:" + 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 ("list", this.title, this.titleImage, this.col); logging: Zoals u hierboven ziet, hebben we een Mojo.Log.info-verklaring aan de code toegevoegd. Soms start of werkt uw app niet of wilt u gewoon wat debuggin-informatie afdrukken. Mojo.Log.info zal u helpen dat te doen. Gebruik de volgende opdracht om de uitvoer van Mojo.Log.info te bekijken:
palm-log
(com.mycompany.tutsplus voor onze applicatie)
Deze keer voegen we de Mojo.Event.listen-aanroep toe aan de activeermethode van de MainAssistant. Telkens wanneer de app wordt geactiveerd (scène wordt ingedrukt of een andere scène wordt weergegeven en onze scène wordt opnieuw weergegeven), wordt de code in activeren genoemd.
We maken een handler (this.taphandler) en noemen deze wanneer we een tik (Mojo.Event.listTap) op onze lijst detecteren (this.controller.get ('MyList')
Laten we eens kijken naar de handleTap-functie van onze handler. Wanneer op de lijst wordt getikt, ontvangt de functie een even object. Waar we in geïnteresseerd zijn, is de eigenschap event.index, die bevat welke rij in de lijst is aangeboord. Gelukkig voor ons bevat het gebeurtenisobject ook de eigenschappen van het rijitem dat uit het model is genomen. event.item.title zal als voorbeeld "Mobiletuts" bevatten als we op die rij klikken.
We verzamelen alle gegevens die we uit het evenementobject willen gebruiken en bellen uiteindelijk onze nieuwe scènelijst. Merk op hoe we de gegevens toevoegen die we willen doorgeven aan deze scène in de pushScene-aanroep. U kunt zoveel parameters toevoegen als u wilt.
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); ; Merk op dat we ook een Mojo.Event.stopListening toevoegen aan de deactivate methode van MainAssistant. Op die manier luistert onze App niet meer naar tikken op de lijst als er een andere scène op wordt geduwd en komen we geen afgedwaalde Eventhandlers tegen wanneer de app wordt afgesloten.
Wat nog moet gebeuren, is om de nieuwe scènenuijst te maken:
palm-generate -t new_scene -p "name = list" tutsplus
Bewerk vervolgens app / views / list / list-scene.html:
Bewerk nu app / assistent / list-assistant.js:
function ListAssistant (title, titleimage, col) / * dit is de creator-functie voor uw scene assistant-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.title = titel; this.titleimage = TitleImage; this.col = col; ListAssistant.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, indien nodig * / / * hier widgets instellen * / / * event handlers toevoegen om naar evenementen van widgets te luisteren * / this.controller.get ('result'). innerHTML = "Je hebt" + this.title + "in de lijst geselecteerd ." this.controller.get ( 'image'). innerHTML ="
" Merk op hoe we de doorgegeven parameters kopiëren naar nieuwe variabelen voor later gebruik. We werken ook de HTML-structuur van onze scène bij om de doorgegeven parameters weer te geven.
Verpak de app opnieuw, installeer en voer deze uit. Tik op een lijstrij en zie hoe de nieuwe scène wordt gepusht en geeft aan welke rij u hebt geselecteerd!
Gefeliciteerd, we hebben een heel scala aan onderwerpen behandeld in dit tweede deel. U hebt geleerd hoe u een lijst kunt maken, deze kunt vullen met gegevens, deze kunt weergeven en vervolgens kunt reageren op gebruikersinteractie. In het volgende deel gaan we onze lijstscène vullen met functionaliteit: haal de nieuwste zelfstudies en artikelen uit de RSS-feed van de geselecteerde site en geef ze weer in een lijst. We hopen dat je blijft hangen, en laat je feedback achter in de comments!
"