Programmbeispiel

[martux]

Hallo Leute,

nachdem ich selbst lange suchen musste, um Beispielcode fuer ARES zu finden, möchte dies anderen ein wenig leichter machen. Anbei also eine frühe (lauffähige) Version von "FimaMatho8", die für Einsteiger hilfreich sein könnte.
Es besteht im Prinzip nur aus dem Code für "main-assistant.js" wie man ihn in ARES reinkopieren kann und der Oberfläche, wie sie bei FinaMath08 aussieht. Hinzugekommen ist "nur" noch ne 2. Checkbox und der englische Text:



im Code sind die labels von links nach rechts bzw nach unten durchnumeriert (2-9). Label1 ist das grosse Feld für Textausgaben.
die editfields sind von 1-8 und links nach rechts durchnummeriert.

function MainAssistant(argFromPusher) {
}

MainAssistant.prototype = {
	setup: function() {
		Ares.setupSceneAssistant(this);
		this.na1 = " q<sub>1</sub>= ";			// Vorbereiten der Ausgabetexte
		this.na2 = " ; q<sub>2</sub>= ";
		this.bol1= true;
		this.total = "Das Feld mit dem gesuchten Wert auf 0 setzen!";  // Begruessung
		this.total2 = "; falsche Eingabe!";				// Textbausteine fuer Ausgabe
		this.totex = "falsche Eingabe!";
    this.controller.get("label1").update(this.total);				// Beschriften der Eingabefelder
		this.veldv = ["1: Festgeld","%-Zinsen","Laufzeit","Endwert","2: Sparrate","%-Zinsen","Laufzeit","Endwert"];
    this.controller.get("label2").update(this.veldv[0]);
    this.controller.get("label3").update(this.veldv[1]);
    this.controller.get("label4").update(this.veldv[2]);
    this.controller.get("label5").update(this.veldv[3]);
    this.controller.get("label6").update(this.veldv[4]);
    this.controller.get("label7").update(this.veldv[5]);
    this.controller.get("label8").update(this.veldv[6]);
    this.controller.get("label9").update(this.veldv[7]);
		this.zif1 = 0;			// Variablen definieren: 3 Zinsfaktoren
		this.zif2 = 0;
		this.zif3 = 1;
		this.fakto1 = 1000;		// Variablen für Dateneingabe mit Beispielinhalt
		this.fakto2 = 5;
		this.fakto3 = 4;
		this.fakto4 = 0;
		this.fakto5 = 100;
		this.fakto6 = 3;
		this.fakto7 = 6;
		this.fakto8 = 0;
	},

	cleanup: function() {
		Ares.cleanupSceneAssistant(this);
	},

	button1Tap: function(inSender, event) {			// Button wird ausgeloest
	  this.total = this.totex;					// Bereitet Ausgabe von Fehler-Infos vor
    this.fakto1 = this.$.textField1.getValue();		// Eingabefelder auslesen und Zinsfuss berechnen
    this.fakto2 = this.$.textField2.getValue();
    this.zif1 = Math.round(1000000*(this.fakto2 / 100 + 1))/1000000;
    this.fakto3 = this.$.textField3.getValue();
    this.fakto4 = this.$.textField4.getValue();
    if (this.fakto1 == 0) {										// Anfangswert gesucht?
      this.fakto1 = this.fakto4 / Math.pow( this.zif1, this.fakto3);
      if (this.fakto1 > -100000000) {				// wenn Ergebnis eine Zahl und sinnvoll : Ausgabe vorbereiten
				this.fakto1 = Math.round(1000000*this.fakto1)/1000000;
    		this.$.textField1.setValue(this.fakto1);
				this.total = this.na1 + this.zif1;
      }
    } else {

      if (this.fakto2 == 0) {										// Zinsen gesucht...?
        this.zif1 = Math.round(1000000*(Math.pow( (this.fakto4 / this.fakto1), (1 / this.fakto3))))/1000000;
        if (this.zif1 > -100000000) {
	  			this.fakto2 = Math.round(10000*(this.zif1*100-100))/10000;
      		this.$.textField2.setValue(this.fakto2);
					this.total = this.na1 + this.zif1;
   	   }
   	 } else {

	    if (this.fakto3 == 0) {		 							//	 Laufzeit gesucht?
	      this.fakto3 = Math.log(this.fakto4 / this.fakto1) / Math.log( this.zif1);
	      if (this.fakto3 > -100000000) {
					this.fakto3 = Math.round(1000000*this.fakto3)/1000000;
	    		this.$.textField3.setValue(this.fakto3);
					this.total = this.na1 + this.zif1;
	      }
	    } else {									// sonst halt Endwert berechnen!

					this.fakto4 = Math.pow( this.zif1, this.fakto3) * this.fakto1;
	  	    if (this.fakto4 > -100000000) {
						this.fakto4 = Math.round(1000000*this.fakto4)/1000000;
 		 		  	this.$.textField4.setValue(this.fakto4);
						this.total = this.na1 + this.zif1;
 	  			}
 		 		}
 		  }
 	  }
		this.total2 = " / "+ this.totex;				// Bearbeitung des Ratensparens vorbereiten
		this.fakto5 = this.$.textField5.getValue();
    this.fakto6 = this.$.textField6.getValue();
    this.zif2 = Math.round(1000000*(this.fakto6 / 100 + 1))/1000000;
    this.fakto7 = this.$.textField7.getValue();
    this.fakto8 = this.$.textField8.getValue();

    this.zif3 = this.zif2;						// nach-vorschuessig auswerten und faktor setzen
    this.bol1 = this.$.checkBox1.getValue();
    if ( this.bol1 == true ) {
      this.zif3 = 1;
    }

    if (this.fakto5 == 0) {						// das gleiche nochmal mit Ratensparen....
      this.fakto5 = this.fakto8 * (this.zif2 -1) / (Math.pow( this.zif2, this.fakto7) - 1) / this.zif3;
      if (this.fakto5 > -100000000) {
				this.fakto5 = Math.round(1000000*this.fakto5)/1000000;
    		this.$.textField5.setValue(this.fakto5);
				this.total2 = this.na2 + this.zif2;
      }
    } else {

      if (this.fakto6 == 0) {				// Zinssatz wird hier nur grob abgeschaetzt - ToDo: Interation!
        this.zif2 = Math.round(1000000*(Math.pow( (this.fakto8 / this.fakto5 / this.fakto7), (2 / this.fakto7))))/1000000;
        if (this.zif2 > -100000000) {
	  			this.fakto6 = Math.round(10000*(this.zif2*100-100))/10000;
      		this.$.textField6.setValue(this.fakto6);
					this.total2 = this.na2 + this.zif2 + " (ca.!)"; // Hinweis, dass Ergebnis nicht genau genug ist
   	   }
   	 } else {

	    if (this.fakto7 == 0) {
	      this.fakto7 = Math.log(this.fakto8 / this.fakto5 * (this.zif2 -1) / this.zif3 +1) / Math.log( this.zif2);
	      if (this.fakto7 > -100000000) {
					this.fakto7 = Math.round(1000000*this.fakto7)/1000000;
	    		this.$.textField7.setValue(this.fakto7);
					this.total2 = this.na2 + this.zif2;
	      }
	    } else {

					this.fakto8 = (Math.pow( this.zif2, this.fakto7) -1) / (this.zif2 -1) * this.fakto5 * this.zif3;
	  	    if (this.fakto8 > -100000000) {
						this.fakto8 = Math.round(1000000*this.fakto8)/1000000;
 		 		  	this.$.textField8.setValue(this.fakto8);
						this.total2 = this.na2 + this.zif2;
 	  			}
 		 		}
 		  }
 	  }
		this.controller.get("label1").update(this.total + this.total2);		// Ausgabe von Info-Text 
	}
};

auf das viele the "power of webos" kennen lernen!

bis denne, martux

[easelpeasel]

Vielen Dank :-)

[martux]

hoppla,

hab noch vergessen,dass man nach der gestaltung der oberfläche und dem kopieren in ares noch im chrome-fenster button1 auswählen muss, dann auf den 4.rechten reiter klicken (events) und dort bei "onTap" den namen der function "Button1Tap" eintippen muss um diesen "event" mit code zu verknuepfen.sonst passiert nix,wenn man klickt.

btw: evtl.lesen hier ja auch richtige profis mit,daher noch ne frage von mir:
was ist der syntaktische bzw. Programmiertechnische grund dafür,dass bei allem moeglichen immer "this." oder "this.$." eingefuegt werden muss? Ich bin noch mit var=, def und aehnlichem sozialisiert,sorry,hab im netz nichts wirklich erklaerendes gefunden

gruß aus dem WE, martux

[Gregorslaw]

Danke. Das wird mir sicher auch helfen.

[jpohl]

Zitat von martux

was ist der syntaktische bzw. Programmiertechnische grund dafür,dass bei allem moeglichen immer "this." oder "this.$." eingefuegt werden muss? Ich bin noch mit var=, def und aehnlichem sozialisiert,sorry,hab im netz nichts wirklich erklaerendes gefunden

this ist der Zeiger auf das Basisobjekt. Möchte man auf einen Member (Variable oder Funktion) zugreifen, braucht man ja die Adresse des Objektes.
this.$. ist eine in Ares benutzte Konvention, um auf mit der Ares-GUI definierte Elemente zuzugreifen.
Um z.B. ein Label neu zu schreiben kannst du entweder:

this.controller.get("label2").update(this.veldv[0]);

oder

this.$.label2.setLabel(this.veldv[0]);

Viele Grüße
Jörg

[martux]

danke jpohl für die antwort,

bzgl. 'this.': das habe ich doch z.b. hier vor jedem programmobjekt stehen. gibts da nicht sowas wie 'ne compiler/interpreter-anweisung global vor alle diese objekte das 'this.' zu setzen?
grade bei so kleinen projekten wäre das doch ne vereinfachung (und speicherplatz gespart obendrein - auch wenn das heut' keinen mehr interessiert)?

im grunde gilt doch das gleiche für $. - wenn die ares objektnamen über eine eindeutige konvention festgelegt sind, müsste das doch reichen?

und wo ich schon mal am fragen bin: ich hab' locker ne stunde damit verbracht, die richtige this.controller... bzw. this.textfield1.set... anweisung/syntax zu finden, die verhindert, dass beim programmstart der focus automatisch auf das erste textfeld gesetzt wird. der focus sollte einfach nirgends hin.
es gibt ja genug erklärungen zum focus setzen, aber eben leider keine fürs gegenteil.
das hatte zwar nur kosmetische gründe, aber es müsste doch gehen? habe mir btw. zwischenzeitlich so geholfen, dass ich das erste textfield dann mit 0% breite versehen und auf die letzte z-ebene verschoben habe

so long, martux

[jpohl]

Hallo Martux,

sorry bin heute unterwegs und schon "fast außer Haus".

Nur ganz kurz zu dem Initialisierungsproblem,
füge mal im MainAssistant.prototype
hinter
Ares.setupSceneAssistant(this);
die Zeile

this.controller.setInitialFocusedElement(null);

ein. Sollte dann gehen.

Zu den this-Geschichten schreib ich mal morgen noch was. Vielleicht nur ganz kurz soviel, betrachte mal das this als "spezielle vordefinierte Variable" belegt mit einem Zeiger auf das Objekt. Da geht kein Compilerschalter oder sonstwas dafür.... (OK, naja, in PASCAL gäbe es eine "with-Anweisung")

Viele Grüße
Jörg

[martux]

hallo jpohl,

nochmals vielen dank für den fixen code-tipp. mit deinem code als suchbegriff findet man auch sofort die richtigen links im netz. ich hatte halt alle möglichen varianten von ...setFocus..., o.ä. und value true / false ausprobiert und da gabs nix. ach wie schön wär doch ne assoziative WebOs developer-suchmaschine...

auf this... möchte ich auch noch kurz eingehen. wie gesagt ist mir eigentlich klar, dass this... für sowas wie den lokalen Zugriff auf Variablen steht und in grossen Programmen mit vielen subroutines, functions etc., wo auch viele globale Variablen vorkommen, Sinn macht.

aber bei so "kleinen" Sachen wie Ares-apps? ob ich nun bei allen Variablen und Funktionen die Namen erst mit "xx" beginne und vor dem 1.sten Durchlauf das dann mit der replace-hilfe ersetze oder das einem "pre-compiler" mitteile, müsste doch egal sein?

p.s. wie letzte Woche kurz angedeutet, habe ich den sprung ins kalte Wasser gewagt und eine 0,99 Euro-app im Catalog veröffentlicht (die Pro-Variante des Taschenrechners) - wer mal schau'n will - den
"3lineProCalculator"-Direktlink gibts hier:

3lineProCalcHelp

und auch gleich noch ne frage an den Moderator: ich hab jetzt den "feedback-thread" zu dieser bezahl-app bei einem der anderen webos-foren eröffnet, weil die ausdrücklich ein "Firmenforum" für sowas haben.
bei eurem preforum hab ich mich nicht so recht getraut, von wegen (meine bescheidenen) "kommerziellen" Interessen und eurem "freien"-forum-charakter.
Oder habt ihr sogar Interesse an "Eigenhinweisen" der publisher auf ihre apps? Dann macht doch direkt auch so'n "Firmenforum", falls es demnächst noch mehr Leute mit meinen Bedenken geben sollte.

Viele Grüße, martux

[jpohl]

Hallo martux,

freut mich wenn der Codeschnipsel weitergeholfen hat.

Zitat von martux

auf this... möchte ich auch noch kurz eingehen. wie gesagt ist mir eigentlich klar, dass this... für sowas wie den lokalen Zugriff auf Variablen steht und in grossen Programmen mit vielen subroutines, functions etc., wo auch viele globale Variablen vorkommen, Sinn macht.

aber bei so "kleinen" Sachen wie Ares-apps? ob ich nun bei allen Variablen und Funktionen die Namen erst mit "xx" beginne und vor dem 1.sten Durchlauf das dann mit der replace-hilfe ersetze oder das einem "pre-compiler" mitteile, müsste doch egal sein?

hmmm, wahrscheinlich reden/schreiben wir etwas aneinander vorbei.
this ist wie schon mehrfach geschrieben ein spezieller Pointer, den man nutzen kann, aber nicht unbedingt immer nutzen muss.
Für bestimmte Konstrukte kommt man nicht daran vorbei, aber es geht prinzipiell auch anders. IMHO kommt man aber mit diesem gewissermaßen objektorientierten Ansatz insgesamt besser klar, als wenn man hier was eigenes kocht.
Einen Compiler gibt es bei Javascript nicht, die Programme werden zur Laufzeit vom Browser, bzw. beim Palm von der webkit-basierten Luna-Oberfläche interpretativ ausgeführt.

Ares-Programme sind noch ein spezieller Sonderfall. Hier werden nämlich zur Laufzeit die visuell erstellten Informationen (JS) in html umgewandelt. Weiterhin werden die vorgefertigten Widgets über Standard-Handler adaptiert um ein Interface zum eigenen Programm zu bekommen. Aus diesem Grund gibt es bei Ares-Programmen auch noch ein paar zusätzliche Dateien, die das erledigen. Und man muss sich auch unbedingt an die Vorgaben halten, damit das Zusammenspiel auch funktioniert.
Der Benutzer bekommt von dieser "Middleware" eigentlich nichts mit, außer dass es vielleicht beim Start ein bissl länger dauert (bei den ersten Ares Versionen waren das noch mehrere Sekunden, inzwischen macht es kaum noch einen Unterschied zu einem "normalen" Programm).

p.s. wie letzte Woche kurz angedeutet, habe ich den sprung ins kalte Wasser gewagt und eine 0,99 Euro-app im Catalog veröffentlicht (die Pro-Variante des Taschenrechners) - wer mal schau'n will - den
"3lineProCalculator"-Direktlink gibts hier:

3lineProCalcHelp

und auch gleich noch ne frage an den Moderator: ich hab jetzt den "feedback-thread" zu dieser bezahl-app bei einem der anderen webos-foren eröffnet, weil die ausdrücklich ein "Firmenforum" für sowas haben.
bei eurem preforum hab ich mich nicht so recht getraut, von wegen (meine bescheidenen) "kommerziellen" Interessen und eurem "freien"-forum-charakter.
Oder habt ihr sogar Interesse an "Eigenhinweisen" der publisher auf ihre apps? Dann macht doch direkt auch so'n "Firmenforum", falls es demnächst noch mehr Leute mit meinen Bedenken geben sollte.

Ich bin zwar nur ein Moderator und nicht der Moderator, aber wir haben uns diesbezüglich eine Meinung gebildet dass Vorstellungsthreads auch von kommerziellen Programmautoren erwünscht sind. Insbesondere wenn das Projekt noch im Entstehen ist und die Community gewissermaßen in den Prozess mit einbezogen wird. Es sollte aber schon mehr sein als App xy ist unter dem Link z erreichbar....

Dafür ist im AppForum eigentlich genügend Platz, auch wurde das schon von WebOS-Autoren wie LinuxQ, Robert Mützner und auch von mir schon genutzt. Wenn man es richtig anpackt ist es eine Art Win-Win-Situation für die Autoren und die Community.

Viele Grüße
Jörg

[martux]

hi jpohl,

das nenn ich mal ne klare ansage. win-win situationen find ich auch gut und hab grad mal ne kurzvorstellung von 3lineProCalculator ins 'Apps und Software'-forum gepackt.

Ansonsten könnt' ich mir vorstellen, diesen thread hier für alle so weiterzuführen, dass wir bei o.g. beispiel schritt für schritt neue funktionen einbauen, z.b. ein menü:

Dies wird oben direkt nach

Ares.setupSceneAssistant(this);

eingefügt:

this.controller.setupWidget(Mojo.Menu.appMenu, this.attributes = {
      omitDefaultItems: true },
      this.model = {
        visible: true,
        items: [
            {label: "Packe 0 in textfield 1 rein", command: 'do-p0i1'},
            {label: "App-Info", command: 'do-info'} ]
     }
 );

nun fehlen noch die zugehörigen Befehle nach dem 'cleanup: function'-block:

   handleCommand: function(event) {
        if (event.type == Mojo.Event.command) {
            switch (event.command) {
                case 'do-p0i1':
                   this.$.textField1.setValue("0");
                break;
                case 'do-info':
                    this.controller.stageController.pushAppSupportInfoScene();
                break;
             }
         }
    },

das wars. viel spass beim ausprobieren, martux