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

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

      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):

      developer.palm.com/content/res…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):

      Quellcode

      1. {
      2. "id": "de.mydomain.example1",
      3. "version": "0.0.9",
      4. "vendor": "mydomain",
      5. "type": "web",
      6. "main": "index.html",
      7. "title": "enyotest",
      8. "uiRevision": "2"
      9. }


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

      HTML-Quellcode

      1. <!doctype html>
      2. <html><head><title>enyo Beispiel</title>
      3. <script src="../../1.0/framework/enyo.js" type="text/javascript">
      4. </script></head> // Hier kann Text stehen, der nur im (Syntax-)Fehlerfall angezeigt wird
      5. <meta name='viewport' content='height=device-height'> // wichtiger tag f. Anzeige beim Pre3
      6. <body><script type="text/javascript">
      7. new test1().renderInto(document.body); // 'link' auf den Code der app
      8. </script></body></html>


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

      Quellcode

      1. 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):

      Quellcode

      1. enyo.kind({
      2. name: "test1", // Einstiegspunkt aus 'index.html'
      3. kind: "VFlexBox", // Es folgt zuerst die UI-Definition (4 'Zeilen' mit verschiedenen Elementen)
      4. components: [
      5. {flex: 1, kind: "HFlexBox", components: [
      6. {flex: 1, kind: "Button", name: "BU1", onclick: "Mach1", caption:"Chef -->"},
      7. {flex: 2, kind: "Button", name: "BU2", onclick: "Mach2", caption:"Hier 'tappen'"}]},
      8. {flex: 2, kind: "HFlexBox", style: "background-color: lightblue;", components: [
      9. {flex: 1, content:"weiss", style: "background-color: white;"},
      10. {flex: 1, content:"blau"},
      11. {flex: 1, content:"rot", style: "background-color: red;"}]},
      12. {flex: 2, kind: "HFlexBox", style: "background-color: yellow;", components: [
      13. {flex: 1, content:"gruen", style: "background-color: lime;"},
      14. {flex: 2, content:"gelb"}]},
      15. {height: "99px", content:"fixierter Rand", name: "sp2"}
      16. ],
      17. // Nun folgt der konkrete Code-Teil mit Variablendeklaration und 2 'functions':
      18. var1: 0,
      19. Mach2: function() {
      20. this.$.BU2.setCaption("<-- Jetzt da!");
      21. this.$.sp2.hide();
      22. this.var1++;
      23. },
      24. Mach1: function() {
      25. this.$.BU2.setCaption("Hier wieder 'tappen' (bereits "+this.var1+" mal)");
      26. this.$.sp2.show();
      27. },
      28. });


      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'):

      Quellcode

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

      Quellcode

      1. 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 ...'

      Quellcode

      1. 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)

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „martux“ ()

      Vielen dank für diesen kleinen "Arschtritt"!
      Ich wollte mich damit eigentlich schon länger mal beschäftigen aber jetzt hab ichs auch gemacht!

      Über die Feiertage dürfte sich nen bissel Zeit finden da mal was auszuprobieren. Vielleicht kommt ja was sinnvoles bei raus. Es gibt immerhin etwas das mir unter WebOS fehlt.
      Bilder
      • test.jpg

        30,44 kB, 640×480, 242 mal angesehen

      danke-button!

      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:

      developer.palm.com/content/api…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:

      Quellcode

      1. {kind: "AppMenu", components: [
      2. {kind: "EditMenu"},
      3. {caption: "Zeige Text an", onclick: "zeiTex"},
      4. ]},

      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):

      Quellcode

      1. openAppMenuHandler: function() {
      2. this.$.appMenu.open();
      3. },
      4. closeAppMenuHandler: function() {
      5. this.$.appMenu.close();
      6. },
      7. zeiTex: function() {
      8. this.$.sp2.setContent("Zahl bisheriger Chef-'Tapps': mindestens "+this.var1+"!");
      9. this.$.sp2.show();
      10. },

      Hackmax schrieb:


      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:

      Quellcode

      1. enyo.kind({
      2. name: "Sample",
      3. kind: "Control",
      4. components: [
      5. {style: "background-color: grey;",components: [
      6. {style:"width:48%;margin:1%;",tag:"Button", name: "BU1", ontap: "Mach1", content:"Chef -->"},
      7. {style:"width:48%;margin:1%;",tag:"Button", name: "BU2", ontap: "Mach2", content:"Hier 'tappen'"},
      8. ],
      9. },
      10. {tag: "br"},
      11. {tag: "br"},
      12. {components: [
      13. {style:"padding: 38px 14%;background-color: white;",tag: "Item", content:"weiss"},
      14. {style:"padding: 38px 14%;background-color: blue;",tag: "Item", content:"blau"},
      15. {style:"padding: 38px 14%;background-color: red;",tag: "Item", content:"rot"},
      16. ],
      17. },
      18. {tag: "br"},
      19. {tag: "br"},
      20. {tag: "br"},
      21. {tag: "br"},
      22. {components: [
      23. {style:"padding: 38px 14%;background-color: lime;",tag: "Item", content:"gruen"},
      24. {style:"padding: 38px 30%;background-color: yellow;",tag: "Item", content:"gelb"},
      25. ],
      26. },
      27. {tag: "br"},
      28. {tag: "br"},
      29. {style:"height:99px;background-color: white;",content:"ausblendbarer Rand", name: "sp2"}
      30. ],
      31. var1: 0,
      32. Mach2: function() {
      33. this.$.BU2.setContent("<-- Jetzt da!");
      34. this.$.sp2.hide();
      35. this.var1++;
      36. },
      37. Mach1: function() {
      38. this.$.BU2.setContent("Hier wieder 'tappen' (bereits "+this.var1+" mal)");
      39. this.$.sp2.show();
      40. },
      41. });
      Optimierungen sind gerne willkommen, habe leider vorerst keine Zeit, die 'reference' zu durchwühlen,

      es grüßt, martux