Widgets mit Windows Mobile 6.5 – Teil 2

Hier folgt nun der zweite Teil zur Vorstellung von WM 6.5 Widgets. Diesmal geht es um die Datenabfrage via XMLHttpRequest* und das Speichern von Daten.

Das Widget fragt von Google* für einen eingegebenen Ort die Wettervorhersage ab und speichert den zuletzt eingegebenen Ort, damit bei einem Neuaufruf, dieser nicht neu eingegeben werden muss.

Konfiguration

Die config.xml ist in diesem Beispiel um den Bereich <access network=”true” /> erweitert. Dies erlaubt den Zugriff auf das Internet aus dem Widget heraus.

<?xml version=”1.0″ encoding=”utf-8″ ?>
<widget xmlns=”http://www.w3.org/ns/widgets”
version=”0.1″
id=”">
<name>Wetter Widget</name>
<content src=”wetter.html”
type=”text/html” />
<icon src=”wetter.png” />
<author href=”http://www.pc-in-not.net/”
email=”dennis@pc-in-not.net”>Dennis</author>
<access network=”true” />
<description>Dies ist eine kleine Wetter-App
powered by Google </description>
</widget>

Inhalt

Die HTML Datei enthält die Darstellung sowie die Javascript Funktionen. Im folgenden sind die einzelnen Abschnitte kommentiert:

<html>
<head>
<title>Wetter Widget</title>
<script type=”text/javascript”>

/* Definition der Belegung der linken Taste: Aufruf der update() Funktion. */
var mn1001 = widget.menu.createMenuItem(1001);
mn1001.text = ‘Aktualisieren’;
mn1001.onSelect = update;
widget.menu.setSoftKey(mn1001, widget.menu.leftSoftKeyIndex);

/* Erstellung der Menüs auf der rechten Taste mit den Einträgen Version und Hilfe. */
var mn1002 = widget.menu.createMenuItem(1002);
mn1002.text = ‘Version’;
mn1002.onSelect = version;
widget.menu.append(mn1002);

var mn1003 = widget.menu.createMenuItem(1003);
mn1003.text = ‘Hilfe’;
mn1003.onSelect = hilfe;
widget.menu.append(mn1003);

/*- Die Funktion zur Anzeige der Hilfe. */
function hilfe() {
alert(’Gebe einen Ort ein und drücke Aktualisierung (linke Taste (Softkey).’);
}

/* Versionsanzeige: Zugriff auf die Eigenschaften aus der config.xml */
function version() {
alert(widget.name+’ v’+widget.version+’ von ‘+widget.authorName+’ ‘+widget.authorURL+’\n’+widget.description);
}

/* Die update Funktion wird vom Button in der Seite sowie von der linken Softkey-Taste aufgerufen.
Mittels XMLHttpRequest werden die Daten vom Server abgerufen. Die Rückgabe ist XML. Das XML wird ausgelesen und der Inhalt in ein DIV in die Seite geschrieben. */
function update(e) {
var out=document.getElementById(’wetter’);
out.innerHTML=’…’;

// Ort aus der Eingabebox lesen
var ort=document.getElementById(’ort’);

// das XMLHttpRequest Objekt erzeugen und URL definieren
// einschl. des eingegebenen Ortes
// Hinweis: bei Leerzeichen und Umlauten im Ort sollte die URL
// noch encoded werden
var xml = new XMLHttpRequest();
var url = ‘http://www.google.de/ig/api?weather=’+ort.value;

// und hier der eine wichtige Teil: Die Speicherung des
// eingegebenen Ortes für den nächsten Aufruf des Widgets

widget.setPreferenceForKey(ort.value, “ORT”);
// der erste Parameter ist der Wert (Variable)
// der zweite Parameter ist ein symbolischer Name für das
// Wiederauslesen (siehe weiter unten)

// Definition der URL und des Aufrufs (per HTTP GET)
// und Registrierung einer Funktion zur Verarbeitung des
// Ergebnisses (response) sofern sich bei XMLHttpRequest der
// Status ändert
xml.open(’GET’,url);
xml.onreadystatechange = function() {

// der state 4 bedeutet fertig (complete)
if (xml.readyState==4) {

// der HTTP Response ist ok (Status 200)
if (xml.status == 200) {

try {

var elem = ”;

// hier ein bisschen Magie zum lokalen Testen auf dem
// PC mit Firefox und dem Aufruf als Widget auf dem
// Smartphone
try {
// auf dem Smartphone wird das XMLDOM von Microsoft
// mit dem XML als TEXT (reponseText) gefüttert und das
// Root-Element ermittelt

var text=xml.responseText;
xmldoc=new ActiveXObject(”Microsoft.XMLDOM”);
xmldoc.async=”false”;
xmldoc.loadXML(text);
elem=xmldoc.documentElement;
} catch(e) {
// im FF gibt es das AtiveXObject nicht und es wird das
// XML der Response direkt als Object verarbeitet.
var doc=xml.responseXML;
elem=doc.documentElement;
}

// es werden vom aktuellen Knoten (Root-Element) alle
// Kind-Knoten aufbereitet …
var ii = 0;
s = children(elem, ii);

// … und im DIV angezeigt. Nicht besonders schön, aber
// es funktioniert
s=s+’<br/>’;
out.innerHTML=s;

}
catch(e) {
alert(e);
}
} // status=200
// löschen des XMLHttpRequest Objekts
delete xml;
} //state=4
};

// Abruf der Daten (request)

xml.send(null);

}

/* Die Funktion ermittelt zu einem Knoten die Attribute und
ruft sich selbst für ggf. vorhandene weitere Unterknoten im XML
auf. Die Rückgabe ist ein String mit dem Inhalt des XML.
*/
function children(e,ii) {
var s = ”;
var c = e.childNodes;
ii++;

try {

for(var i=0;i<c.length;i++) {

// Einrückung in der Ausgabe
s=s+’—————————————–’.substr(0,ii*1);
// Name des Knoten und der Inhalt (Text)
s=s+”+c[i].nodeName+’('+c[i].nodeValue+’) ‘;

// die Attribute des Knoten
var a = c[i].attributes;

if (a && a.length>0) {

for(var j=0;j<a.length;j++) {
// die Attribute sind selbst wieder “Knoten, der Name und
// der Inhalt
s=s+”+a[j].nodeName+’('+a[j].nodeValue+’) ‘;
}

}

s=s+’<br/>’;

// bei vorhandenen Kind-Elementen rekursiver Aufruf
if (c[i].childNodes) {
s = s + children(c[i],ii);
}

}

}
catch(e) {
alert(e);
}
return s;

}

/* und jetzt noch das HTML für die Anzeige und Eingabe … */

</script>
<style type=”text/css”>
</style>
</head>
<body>
<b>Widget Demo</b>
<h1>Wetter</h1>
<input id=”ort” type=”text” value=”Berlin” /> <input type=”button” value=”Update” onclick=”update()”/>
<br/>
<div id=”wetter”>
</div>

<script type=”text/javascript”/>

// hier wird bei vorhandenen gespeicherten Ort, der

// Wert in das Eingabefeld geschrieben.

var ortvorgabe = widget.preferenceForKey(”ORT”);

if (ortvorgabe && ortvorgabe.length > 0) {
var ort=document.getElementById(’ort’);
ort.value=ortvorgabe;

}

</script>

</body>
</html>

XMLHttpRequest

Mittels des XMLHttpRequests* können AJAX Aufrufe implementiert werden und die Daten von Webservern abgerufen werden. Es müssen nicht unbedingt XML Dateien (responseXML) sein, es werden auch HTML Dateien (responseText) gelesen.

Die Funktionsweise ist oben im HTML/Javascript-Abschnitt beschrieben.

Es gibt im Internet eine Reihe von Tutorials für AJAX, u. a. bei Javascript Kit* oder in der Microsoft Dokumentation*. Daher gehe ich hier nicht näher auf das Objekt ein.

Lokale Datenspeicherung

Der Persistierung (schickes Wort , also die permanente Speicherung in Widgets erfolgt mit widget.setPreferenceForKey(WERT/VALUE, “NAME/KEY”). Es können bis zu 4000 Zeichen in einem Key gespeichert werden. Das Auslesen erfolgt mit widget.preferenceForKey(”NAME/KEY”).

Das Widget & Download

Das Packen und die Installation des Widgets erfolgt analog dem ersten Teil.

Download: wetter.wgt

Die hier vorgestellten Widgets sind als reine Demos zu betrachten und mit Sicherheit noch nicht ausgereift – sollen sie auch gar nicht. Es sind Studien, wie die einzelnen Funktionen nutzbar sind.

Ich hoffe, dass es den einen oder anderen gibt, der es wagt, mehr oder weniger sinnvoller Widgets für WM zu erstellen. So schwer ist ja gar nicht

* Für den Inhalt externer Links bin ich nicht verantwortlich und übernehme keine Gewähr.

Diesen Artikel bookmarken: