'open source' für alle: in 5 Schritten zur 1. enyo-App

Willkommen!

Wenn du im Nexave-Forum mitmachen möchtest, schreib an community@nexave.de. Wir haben die Registrierungsfunktion in unserem Diskussionsforum nämlich deaktiviert, weil sich praktisch nur noch Spammer und Werbebots registriert haben. Per E-Mail sind wir dir gern behilflich, einen Account anzulegen.
  • Die Entscheidung von hp, webOs und die 'Programmierumgebung' enyo als open source weiter zu führen, scheint wohl der einzige Weg zu sein, diesem im Ansatz sehr guten OS langfristig mehr Popularität zu verschaffen. Für alle begeisterten User heißt dies in Zukunft aber auch (in Abwandlung eines klassischen Zitats):

    Frag' nicht was webOs für Dich tun kann, sondern frag' was Du für webOs tun kannst.


    Ohne hinreichend viele (Hobby-)Entwickler dürfte das jedoch schwer werden, was wirklich schade wäre. Und nachdem ich mich nun fast ein Jahr mit enyo beschäftigt habe, will ich kurz anhand eines einfachen Beispiels zeigen, wie man/frau fix an seine 1. app kommt (und hoffentlich viele motivieren, es mal selbst zu probieren).


    Einzige Voraussetzung ist, sich die Arbeit mit Shell/Kommandozeile/Terminal zuzutrauen. Am schnellsten geht es mit Pre3 oder Touchpad (es geht natürlich auch mit Emulator/Pre1/2, aber das ist schon wieder komplizierter)


    Dann sind 5 Schritte nötig (habs nur mit Ubuntu-PC probiert, sollte aber auch mit Mac/Win klappen):


    1. NUR das zum PC passende 'sdk' (ca.360MB) und 'novacom' (ca.60kB) downloaden UND installieren, wie hier beschrieben (die 'virtualBox'-Sachen braucht man nur für den Emulator):


    https://developer.palm.com/con…lop/sdk_pdk_download.html


    2. Auf diesem PC einen Ordner z.B. 'enyo_app1' erstellen und mit 4 Textdateien füllen:


    i) Datei 'appinfo.json' (hier wird die app quasi dem Betriebssystem vorgestellt):


    Code
    { 
    	"id": "de.mydomain.example1", 
    	"version": "0.0.9", 
    	"vendor": "mydomain", 
    	"type": "web", 
    	"main": "index.html", 
    	"title": "enyotest",
    	"uiRevision": "2"
    }


    ii) Datei 'index.html' (Startpunkt der app aus der obigen "main"-Zeile):



    iii) Datei 'depends.js' (nur eine Zeile):


    Code
    enyo.depends("app_code.js");	// Hier werden alle weiteren Dateien aufgeführt, die die app braucht


    iv) Datei 'app_code.js' (wie in 'depends.js' aufgeführt, mit dem eigentlichen app-code, der im Grunde aus 'erweitertem' Javascript besteht):



    3. Pre3/Tp in den 'developer mode' versetzen:


    in 'just type': 'webos20090606' eingeben, das 'dev.mode' Symbol anklicken und im dann folgenden Dialog den 'dev.mode' aktivieren.



    4. Pre3/Tp via USB-Kabel mit dem PC verbinden, aber NICHT als 'USB-Laufwerk' aktivieren sondern die andere Option wählen.



    5. Ein Terminal am PC öffnen, zu dem Ordner (bei mir 'webapp') navigieren, der den Ordner aus Schritt 2. (z.B. 'enyo_app1') ENTHÄLT und folgende 3 Befehle eingeben (der 1. bezieht sich auf den app-Ordner-Namen aus Schritt 2., die anderen auf die app-Kennung aus der Datei 'appinfo.json'):


    Code
    palm-package enyo_app1

    dies gibt z.B. die Rückmeldung: 'creating package de.mydomain.example1_0.0.9_all.ipk in /home/webapp'


    Code
    palm-install de.mydomain.example1_0.0.9_all.ipk

    es folgt wieder eine längere Rückmeldung: 'installing package de.mydomain.example1_0.0.9_all.ipk on device ...'


    Code
    palm-launch de.mydomain.example1

    VOILA, die app startet. Statt des letzten Schritts kann die app natürlich auch direkt über den Launcher von Pre3/Tp gestartet werden.



    Fehlersuche: Wenn irgendwas mit dem Code nicht klappt, einfach am PC via Terminal den Befehl 'palm-log de.mydomain.example1' eingeben, meist findet man dort einen nützlichen Hinweis, wo was falsch gelaufen ist.


    Ansonsten: Viel Spass beim experimentieren... (edit 22.38: typos)

  • wo gibz hier eine danke/thanks!-button für einträge? hab ich in anderen foren schon gesehen; wäre ein schönes weihnachts- oder neujahrsgeschenk! :rolleyes:
    Also DANKE für diesen beitrag - klingt einfach und macht "gusto"...

    Christian ^^ Wortspieler & Universaldilettant
    Zire71 >TE >T3 & SE T630 >MDA Compact (1 Woche) >Nokia E61 (2 Wochen) >Treo 680 >Pre- >HTC Legend (1 Monat) >Pre2 >HTC Desire (1 Monat) >Pre3 (2 Monate) >Nexus S

  • Danke für die Blumen - wenn ich (und genug andere) das mit dem 'Open Source' Prinzip richtig verstanden habe(n), werdet ihr Zukunft ziemlich viel zu 'danken' haben ;)


    Um den weiteren Einstieg zu erleichtern, ist es vielleicht noch nützlich einen Link zur (leider nicht sehr übersichtlichen) enyo-Referenz zu haben:


    https://developer.palm.com/con…o/enyo-api-reference.html


    Dort findet sich u.a. eine Übersicht zu allen vordefinierten 'enyo.kind'-Objekten, von denen einige im obigen Beispielcode (Z.1-20) vorkommen.


    Wo ich schon mal dabei bin, noch eine kleine Code Ergänzung für Zeile 5, die ein app-Menü definiert:


    Code
    {kind: "AppMenu", components: [
    			{kind: "EditMenu"},
    			{caption: "Zeige Text an", onclick: "zeiTex"},
    	]},


    Wie man sieht, definiert jede geschweifte Klammer für sich ein neues enyo-Kind, die dann folgenden Attribute beschreiben die jeweiligen Besonderheiten dieses enyo-Kind.


    Für dieses AppMenu muss nun noch Code hinterlegt werden (z.B. ab Z.35 nach 'alter' Zählung, so dass es nun 5 functions sind):


    Code
    openAppMenuHandler: function() {
    		this.$.appMenu.open();
    	},
    	closeAppMenuHandler: function() {
    		this.$.appMenu.close();
    	},
    	zeiTex: function() {
    		this.$.sp2.setContent("Zahl bisheriger Chef-'Tapps': mindestens "+this.var1+"!"); 
    		this.$.sp2.show(); 
    	},

  • http://enyojs.com/samples/playground/


    ein Editor der auch anzeigt was geändert wird.

    Hi Hackmax, danke für den Tipp, hatte ich noch gar nicht gesehen.


    Leider klappt mein obiger Beispiel-Code nicht mit dieser 'open-enyo'-Version. Einige 'Kinds', 'methods' und 'properties' haben andere Namen, 'auskommentieren' geht nicht. So auf die Schnelle habe ich nicht alle Entsprechungen gefunden, aber ein ähnliches Layout wie bei meinem obigen ersten Beispiel erhält man mit folgendem Code, wenn dieser per Copy/paste beim 'playground' eingesetzt wird:

    Optimierungen sind gerne willkommen, habe leider vorerst keine Zeit, die 'reference' zu durchwühlen,


    es grüßt, martux