Apr 24
Ein Beispiel für die Verwendung eines Cookies mit dem Mojo.Framework und WebOS (Palm Pré). Wer Interesse hat sich eine App für WebOS zu entwickeln, kann sich weitere Informationen auf der Seite von PALM holen und sich ein
Developer-account auf http://developer.palm.com
Voraussetzung, ich weiß was WebOS, ein Palm und das Mojo-Framework
ist Wie man ein Projekt zur Erstellung einer APP anlegt und versteht.
(Werde dazu später noch ein mini Tut veröffentlichen.)
Was wollen wir machen?
Wir wollen unsere E-Mailadresse, die wir vorher in einem Cookie gespeichert haben, in einer Textzeile, die eine E-Mailadresse wünscht, wieder anzeigen.
1. HTML Code Zeile und Button
2.Javascript, initialisiert ”Button” + ”Ausgabezeile” + “Cookie”
Scene1-scene.html (Wir legen eine Eingabezeile und ein Button an, der dann auch später noch eine PHP Datei aufrufen soll und unseren
Cookie setzt.)
<div>
<div x-mojo-loc=''>eMailadresse:</div>
<div>
<div>
<div x-mojo-focus-highlight="true">
<div>
<div x-mojo-element="TextField" id="emailAdresse"></div>
</div>
</div>
</div>
</div>
</div>
<table width=98% cellpadding=1 cellspacing=0 border=0>
<tr>
<td>
<div x-mojo-element="Button" id="ButtonSend" name="gesendet"></div>
</td>
</tr>
</table>
—EOF Scene1-scene.html—
scene1-assistant.js (Wir definieren den Button, Texfeld. / Speichern den Cookie und schicken die E-Mailadresse zusätzlich an eine PHP Datei.)
Als Erstes legen wir unsere HTML-Elemente fest. Mojo hat die
Eigenart, x-mojo-elemente erst dann anzuzeigen, wenn sie
initialisiert sind.
Wir fangen mit unserem Textfeld an.
Scene1Assistant.prototype.setup = function() {
this.controller.setupWidget("emailAdresse",
this.attributes = {
hintText: $L('E-Mail eingeben'),
multiline: false,
enterSubmits: false,
focus: true,
autoFocus: true,
emoticons: false
},
this.emailAdresseModel = {
value: email_val,
disabled: false
});
<!---- Code geht weiter für prototype.setup
In der Variable email_val steht später die E-Mailadresse die wir von
unserem Cookie holen. Sollte kein E-Mailadresse vorhanden sein, gibt
es den hinText des Widgets "emailAdresse" wieder, in dem Fall
"E-Mail eingeben."
Jetzt kommen wir zu unserem Button. Der wird auch im prototype.setup
initialisiert. Er hat die Bezeichnung 'buttonSend' was auch im
HTML-Teil die ID des Buttons ist.
this.controller.setupWidget('buttonSend',
this.attributesSend = {
type: Mojo.Widget.activityButton
},
this.buttonSendModel = {
buttonLabel: 'Senden und Setzen',
buttonClass : 'sendButton',
disabled: false
});
Jetzt bestimmen wir noch wie sich der Button zu verhalten hat. Bevor
wir nun prototype.setup schließen, legen wir folgenden Code rein.
Hier wird, wenn der Button gedrückt ist, die Function bzw. der
Event "SendButtonPress" aufgerufen.
this.SendButtonPressFocus = this.SendButtonPress.bind(this);
Mojo.Event.listen(this.controller.get('buttonSend'),
Mojo.Event.tap, this.SendButtonPressFocus);
} <--- Schließt prototype.setup
Nachdem wir das Setup geschlossen haben, kommen wir auch gleich
zu unser Function "SendButtonPress". Hier wird in die Variable email
mit this.emailAdresseModel.value unsere E-Mailadresse geschrieben.
this.emailAdresseModel.value ist der Wert den ich in der Eingabezeile
eintrage, quasi unsere E-Mail.
Wenn ihr dann die App zum ersten mal aufruft, kann dort
außer des hinTextes nichts drin stehen, da der Cookie erst noch
gesetzt werden muss. Erst nach dem Eintragen eurer E-Mail wird der
Button unser Cookie setzen.
E-Mail eintragen, Button drücken. E-Mailadresse wird in die Variable
email geschrieben. Cookie mit dem Inhalt der Variable email wird
gesetzt E-Mailadresse wird auch zu einer PHP Datei geschickt. Kann
dann später z.B. zum eintragen in einen Newsletter o.ä. verwendet
werden.
Scene1Assistant.prototype.SendButtonPress = function(event){
email = this.emailModel.value;
//cookie setzen
this.myValue = email;
this.myCookie = new Mojo.Model.Cookie('login_sc1');
this.myCookie.put(this.myValue);
//email verschicken
var URL = "http://www.xxxxx.com/login.php?email=" + email;
buttonSend.mojo.activate();
var request = new Ajax.Request(URL, {
method:'get',
evalJSON: 'force',
onSuccess: this.ausgabe.bind(this),
onFailure: this.fehler.bind(this)
});
} <-- ende function SendButtonPress
Jetzt setzen wir noch am Anfang der Scene1Assistant.js den Code zum
aufrufen des Cookies und zum lesen seines Inhalts rein.
Der Inhalt unseres Cookies wird in die Variable email_val gelegt.
function Scene1Assistant() {
this.savedValueCookie = new Mojo.Model.Cookie('login_sc1');
this.savedValue = this.savedValueCookie.get();
email_val = this.savedValue;
}
Wenn wir jetzt die App neu starten, müsste der hinText "E-Mail
eingeben" mit unserer E-Mailadresse ersetzt worden sein. *freu*
Zusammenfassung Cookiessssss.....
Cookie setzen:
email = "eineemailaddresse.de;
this.myValue = email;
this.myCookie = new Mojo.Model.Cookie('login_sc1');
this.myCookie.put(this.myValue);
Mit put() wird der Inhalt von myValue gesetzt.
Cookie Lesen:
this.savedValueCookie = new Mojo.Model.Cookie('login_sc1');
this.savedValue = this.savedValueCookie.get();
email_val = this.savedValue;
Mit get() wird der Inhalt des Cookies geholt und in die Variable
email_val geschrieben.
Mit remove() kann man Cookies löschen.
Winke winke!!!
