Share
Deze tutorialserie begeleidt u bij het starten van de ontwikkeling van webOS-apps. In deze tutorial leert u hoe u de webOS-ontwikkelomgeving installeert en een eenvoudige applicatie maakt. In de volgende delen van deze serie zullen we een bruikbare applicatie maken waarmee je de nieuwste artikelen over de tuts + netwerk kunt bekijken en weergeven.
Tegenwoordig zijn webapplicaties gebruikelijk dankzij de vooruitgang in moderne webbrowsers. Op mobiele apparaten worden de meeste applicaties echter lokaal uitgevoerd en gebouwd met een gecompileerde programmeertaal zoals Objective-C of Java. Omdat ze zijn gemaakt voor een specifiek mobiel apparaat, zijn ze erg moeilijk over te zetten naar een website of een ander mobiel platform.
Palm's besturingssysteem voor mobiele apparaten (bijvoorbeeld Palm Pre en Pixi) wordt toepasselijk webOS genoemd. Een van de onderscheidende kenmerken van webOS is dat het alle apparaattoepassingen webtoepassingen gemaakt met HTML, CSS en Javascript maakt met behulp van het Mojo Javascript Framework. Zelfs de native Palm-apps op het apparaat zijn webtoepassingen. Met behulp van HTML5 kunnen webOS-apps lokaal gegevens opslaan, 2D-afbeeldingen tekenen en CSS-overgangen / -animaties uitvoeren. Ze kunnen ook via AJAX webservices bellen om toegang te krijgen tot externe of lokale gegevens.
Het Mojo Javascript Framework volgt het Model-View-Controller (MVC) patroon losjes. Weergaven zijn geschreven in HTML en CSS, terwijl controllers die de toepassingslogica besturen, zijn geschreven in Javascript. Mojo bevat ook een reeks gemeenschappelijke UI-elementen, zoals lijsten, knoppen, containers, dialoogvensters, indicatoren en keuzepakjes. Om toegang te krijgen tot de lagere lagen van het besturingssysteem, wordt Mojo geleverd met een reeks JavaScript-API's om te communiceren met apparaatservices (zoals alarmen, contacten, agenda's, foto's) of hardwarecomponenten (bijvoorbeeld GPS, beeldscherm, camera, voeding).
Kort gezegd: als u HTML, CSS en Javascript kent, kunt u eenvoudig toepassingen voor webOS maken!
Om te beginnen met het bouwen van apps voor webOS, moet u de Palm webOS Software Development Kit downloaden en installeren. De webOS-SDK is beschikbaar voor OS X, Linux en Windows. U moet de nieuwste instructies van Palm volgen om uw webOS-ontwikkelomgeving in te stellen.
Nadat u de SDK hebt geïnstalleerd, kunt u elke teksteditor of IDE gebruiken om uw broncodebestanden te maken. Er is een webOS-ontwikkelingsplug-in beschikbaar voor Eclipse, maar persoonlijk gebruik ik de uitstekende Komodo Edit van ActiveState met een plug-in van derden voor webOS-ontwikkeling. In deze zelfstudie gaan we de opdrachtregelmethode gebruiken.
Om aan de slag te gaan met een Hello World-app, typt u het volgende vanaf uw opdrachtregel / terminal:
palm-genereert helloWorld
Met deze opdracht wordt een map gemaakt met de naam "helloWorld" die de benodigde directorystructuur voor onze app bevat.
Laten we even naar die structuur kijken:
Laten we Appinfo.json eens nader bekijken. Open het bestand in je favoriete teksteditor:
"id": "com.yourdomain.helloworld", "version": "1.0.0", "vendor": "My Company", "type": "web", "main": "index.html", "title": "helloWorld", "icon": "icon.png"
De belangrijkste parameters in dit bestand zijn:
Bekijk vervolgens index.html. Het is een standaard HTML-bestand en vormt de fase voor uw toepassing, waarbij dingen worden gedaan zoals het laden van het mojo-framework en het belangrijkste stylesheet.
Hallo Wereld!
Om onze applicatie te testen, gaan we de webOS-emulator gebruiken op een x86 build van webOS die wordt uitgevoerd met VirtualBox. Niet alle hardwarefuncties worden door de emulator ondersteund. Het niet beschikbaar zijn van zowel de apparaatcamera als de scherm multitouch-mogelijkheid zijn voorbeelden van simulatorbeperkingen, maar speciale commando's kunnen ons helpen deze beperkingen te overwinnen. Het is bijvoorbeeld mogelijk om een commando uit te geven om een inkomende oproep of sms-bericht te simuleren.
De volgende opdrachten voor het besturingssysteem starten de webOS-emulator:
Ga je gang en voer een instantie van de emulator uit. Speel een beetje met de functionaliteit.
Om onze applicatie te verpakken zodat deze op webOS kan worden uitgevoerd, typt u het volgende in de opdrachtregel in de map die de map "helloWorld" bevat:
palm-pakket helloWorld
Het resultaat is ons installeerbare pakketbestand: com.yourdomain.helloworld_1.0.0_all.ipk. Merk op dat de bestandsnaam de id en versie van het appinfo.json-bestand bevat.
Installeer nu de applicatie met de volgende opdracht:
palm-install com.yourdomain.helloworld_1.0.0_all.ipk
Start de applicatie in de emulator:
We hebben nu onze eerste aanvraag voor een runnning, maar het is niet erg spannend. Laten we wat meer inhoud toevoegen.
Om onze fase met leven te vullen, gaan we door en creëren we de eerste scène. Scènes zijn hetzelfde als verschillende pagina's op een website. Scènes kunnen op het podium worden geduwd, van het podium worden gehaald of worden verwisseld met een andere scène.
palm-generate -t new_scene -p "name = first" helloWorld
Hiermee worden twee bestanden gemaakt: de weergave in app / views / first / first-scene.html en de assistent voor de scène bij app / assistants / first-assistant.js.
Open first-scene.html en bewerk het om het volgende te bevatten:
Eerste scèneWelkom in mijn wereld
Let op de klasnamen die beginnen met "palm-"; deze stijlen zijn opgenomen in het Mojo Framework, maar kunnen worden uitgebreid of gewijzigd in uw eigen stylesheet.
Nu bewerken we stage-assistant.js om onze nieuwe scè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 ( "eerste"); ;
de toepassing verpakken en opnieuw installeren. Hier is het resultaat:
Laten we nog een scène toevoegen en dat noemen wanneer de gebruiker op een knop op de eerste scène drukt:
palm-generate -t new_scene -p "name = second" helloWorld
Nu moeten we een knop toevoegen aan de eerste scène. Verander first-scene.html in het volgende:
Eerste scèneWelkom in mijn wereld
Om die knop daadwerkelijk te zien, moeten we de knopwidget instellen in de assistent-setupcode van de eerste scène. Laten we eerst -assistent.js bewerken om dat te doen:
Accentsconagua
FirstAssistant.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 zijn. * / / * stel widgets hier in * / / * voeg event handlers toe om naar gebeurtenissen van widgets te luisteren * / this.controller.setupWidget ("button1", this.attributes = , this.model = label: "OK", uitgeschakeld: false); this.handleButton1 = this.handleButtonPress1.bindAsEventListener (deze); Mojo.Event.listen (this.controller.get ("button1"), Mojo.Event.tap, this.handleButton1); Merk op dat we de knop verwijzen door zijn id: "knop 1". We hebben ook functionaliteit toegevoegd om daadwerkelijk iets te doen wanneer we op de knop drukken. Daarvoor maken we eerst een gebeurtenishandler, this.handleButton1. We zullen de noodzakelijke functiehandtekeningButtonPress1 naast maken. De volgende regel, Mojo.Event.listen, stelt de knop in om naar tikken te luisteren en belt onze event handler als er een tik wordt ontvangen.
Laten we onze gebeurtenishandler maken die knoppen indrukt. Onze event-handler duwt gewoon onze tweede scène naar het podium:
FirstAssistant.prototype.handleButtonPress1 = function (event) Mojo.Controller.stageController.pushScene ("second"); Eindelijk bewerken we second-scene.html om iets nuttigs te bevatten:
Tweede scèneDit is de tweede scène
Oké, laten we nu een pakket maken en opnieuw installeren. Dit zou het eindresultaat moeten zijn:
Je hebt zojuist een wervelende rondleiding gekregen in het ontwikkelen van applicaties voor webOS. In het volgende deel van deze serie gaan we een app bouwen om de nieuwste artikelen uit het tuts + netwerk weer te geven en te lezen. Laat hieronder opmerkingen en feedback achter om ons te laten weten wat u van deze serie vindt!
