Native Anwendungen erstellen - HTML5-Apps fur iPhone und Android - page 269

Parameter Beschreibung

Button Entweder der Link zu einer eigenen Buttongrafik oder die Angabe des Sys-
tem-Buttontyps, wie beispielsweise tabButton:Search .
Falls Sie eine eigene Grafik verwenden, muss hier der gesamte Pfad ange-
geben werden. Liegt die Grafik button.png beispielsweise im www -Verzeich-
nis, muss die Angabe des Links wie folgt aussehen: /www/button.png .
Anweisung Über ein onSelect() -Event legen Sie hier fest, welche JavaScript-Anwei-
sungen beim Antippen des jeweiligen Elements auf der Navigationsleiste
auszuführen sind.

In diesem Beispiel verwenden wir zwei verschiedene Varianten der window.
uicontrols.createTabBarItem() -Angabe:

var toprated 0;
window.uicontrols.createTabBarItem("toprated", "Egal was hier steht", "tab
Button:TopRated", {

onSelect: function() {

navigator.notification.alert("Bestwertung angetippt");
window.uicontrols.updateTabBarItem("toprated", { badge: ++toprated });

}
});

Zuerst definieren Sie die Variable toprated und setzen sie auf null. Dann rufen Sie
window.uicontrols.createTabBarItem mit der ID toprated auf. Die ID ist unab-
hängig von der gewählten Variablen. Als Label-Text verwenden Sie irgendeinen Text,
der ohnehin nicht angezeigt wird, da wir als Nächstes mit tab-Button:TopRated einen
System-Button verwenden.

Als Anweisung verwenden wir das Event onSelect() . Sobald der Benutzer auf das
Navigationselement tippt, wird eine Meldungsbox angezeigt (zur Funktion navigator.
notification.alert() kommen wir im übernächsten PhoneGap-Abschnitt). Diese
Meldungsbox bestätigt noch einmal, dass das richtige Feld angetippt wurde. Als
Nächstes finden Sie die Zeile:

window.uicontrols.updateTabBarItem("toprated", { badge: ++toprated });

Mit dieser Angabe wird das Navigationselement mit der ID toprated aktualisiert. In
den geschweiften Klammern stehen die JavaScript-Anweisungen, die bewirken, dass die
Variable toprated um eins erhöht wird und der kleine Zahlenindikator dann mit dem
neuen Wert angezeigt wird.

Die zweite Variante der window.uicontrols.createTabBarItem() -Angabe ist diese:

window.uicontrols.createTabBarItem("test", "Testautos", "/www/button.png", {
onSelect: function() {
document.location.href "index.html";
} });