Introductie tot WebOS 3.0 (Enyo)

Deze tutorial zal u kennis laten maken met de basisbeginselen van het ontwikkelen voor het WebOS 3.0-platform door te laten zien hoe u een eenvoudige applicatie kunt bouwen. Je leert hoe je de ontwikkelomgeving installeert, maakt een "Hello-World" gestileerde applicatie en voert de applicatie uit om je werk te testen.

Wat is WebOS 3.0?

WebOS is het nieuwe besturingssysteem van HP om apps voor de HP touchpad te ontwikkelen. De naam WebOS is redelijk geschikt omdat applicaties worden geschreven in een combinatie van HTML, CSS en JavaScript. Ja, als u bekend bent met deze dingen, kunt u echt meteen beginnen!

Codering in Enyo is heel eenvoudig en duidelijk en kan de efficiëntie van het ontwikkelingsproces aanzienlijk verhogen. Hoewel het framework momenteel niet op platforms buiten het touchpad is gericht, is het nog steeds een baanbrekende innovatie die de moeite van het onderzoeken waard is. Oké, dus laten we onze handen vies maken met HP's nieuwste mobiele besturingssysteem: WebOS 3.0.

Stel de omgeving in

Het eerste wat u moet doen, is om uw exemplaar van de WebOS 3.0 SDK-ontwikkelingskit te krijgen van developer.palm.com. Zorg ervoor dat u zich registreert voor een account als lid van de ontwikkelaarscommunity.

Download de nieuwste SDK. Doorloop de stapsgewijze procedure voor het installeren van de SDK die op de Palm-site is geplaatst. U kunt dezelfde stappen doorlopen om WebOS 2.1 (Mojo) te installeren en eventuele wijzigingen aan te brengen.

Naast de SDK moet u ook elke op web-kits gebaseerde browser zoals Google Chrome of Safari (gebruikt in deze zelfstudie) en een teksteditor zoals Notepad ++ installeren. U kunt elke gewenste teksteditor gebruiken, maar deze zelfstudie gebruikt Notepad ++. Nu hebben we alle tools die nodig zijn voor ontwikkeling.

De app instellen

Voordat we de code schrijven, moeten we een specifieke mappenstructuur maken die vooral geschikt is voor Enyo. De mappenstructuur kan handmatig of via de opdrachtregel worden gemaakt.

Als u de opdrachtregel gebruikt om uw app-map te genereren, gebruikt u via de palm gegenereerde opdrachten vanaf de opdrachtregel. Over het algemeen worden padvariabelen automatisch ingesteld wanneer u SDK hebt geïnstalleerd. Als dit niet het geval is, moet u uw besturingssysteempadvariabelen handmatig instellen als u de Palm-opdrachten wilt gebruiken.

Palm-genereer mijn app

Hiermee wordt een map met de naam gemaakt ?myapp?. De map ?myapp? bevat meestal deze bestanden:

  • appinfo.json
  • depends.js
  • myapp.js
  • myapp.css
  • index.html
  • icon.png

U kunt al deze bestanden handmatig maken met elke teksteditor behalve één: icon.png. Dit is uw toepassingspictogram en is uiteraard een afbeeldingsbestand.

1. appinfo.json

Het appinfo.json-bestand bevat algemene metadata over de applicatie:

 
 "id": "com.yourname.myapp", "version": "1.0.0", "vendor": "yourname", "type": "web", "main": "index.html", " title ":" myapp "," icon ":" icon.png " 
  • id: dit moet een ID zijn die uniek is voor uw app.
  • versie: het versienummer van uw app.
  • leverancier: uw naam of de naam van het bedrijf waarvoor u werkt.
  • main: Dit is een HTML-bestand dat voor het eerst wordt geladen wanneer de app wordt gestart.
  • titel: de titel voor uw toepassing.
  • pictogram: een pictogramafbeelding voor uw toepassing.

2. depend.js

Dit bestand bevat paden voor alle * .js- en * .css-bestanden in de toepassing:

 
 enyo.depends ("myapp.js", "myapp.css",);

3. index.html

Dit bestand is de start van onze programma-uitvoering. Het bevat code die erg lijkt op de onderstaande lijst:

 
   myapp       

Laten we proberen een app te bouwen waarin de gebruiker zijn naam in een invoervak ​​zal schrijven en we zullen hem in een pop-upvenster weergeven. Tot nu toe hebben we niets geschreven in myapp.js. Kopieer de onderstaande tekst naar myapp.js en sla deze op:

 
 enyo.kind (name: "myapp", kind: enyo.Control, content: "Hallo Dit is mijn eerste WebOS-applicatie");

Hier creëren we een soort genaamd "mijnapp". Een soort kan een mix van besturingselementen zijn. Hier laten we alleen wat tekst zien: "Hallo Dit is mijn eerste WebOS-applicatie".

Om deze tekst weer te geven, gebruikten we een soort genaamd enyo.Control, een component die UI-gebeurtenissen kan ontvangen en andere besturingselementen kan bevatten.

In index.html hebben we er een geschrevene