13.3 Dokumente mit mehreren Seiten
Es gibt verschiedene Möglichkeiten zur Darstellung eines Dokuments, das mehrere Seiten umfasst. Sie können mit Tabs in einer Tableiste, mit einem Navigator oder mit einem Karussell arbeiten.
13.3.1 Eine Aufteilung von Seiten mit Tabs
Die einzelnen Unterseiten eines Dokuments können mithilfe von Tabs erreicht werden, die in einer Tableiste stehen. Jede Unterseite befindet sich wie gewohnt innerhalb einer Komponente des Typs ons-page. Diese Komponente steht entweder innerhalb einer Komponente des Typs template oder in einer externen Datei. Der Benutzer kann zwischen den einzelnen Seiten entweder durch Antippen der Tabs oder durch seitliches Wischen hin und her wechseln. Ein Beispiel mit drei Tabs, die zu drei verschiedenen Seiten führen, sehen Sie in Abbildung 13.19.
Abbildung 13.19 Drei Tabs
Dazu das Programm:
...
<body>
<ons-page>
<ons-tabbar swipeable position="top">
<ons-tab page="onsen_tab_spa.htm" label="Spanien"
icon="md-home"></ons-tab>
<ons-tab page="onsen_tab_ita.htm" label="Italien"
icon="md-settings" active></ons-tab>
<ons-tab page="onsen_tab_fra.htm" label="Frankreich"
icon="md-face"></ons-tab>
</ons-tabbar>
</ons-page>
<template id="onsen_tab_spa.htm">
<ons-page>
<p style="text-align:center">Madrid<br>Barcelona<br>Sevilla</p>
</ons-page>
</template>
<template id="onsen_tab_ita.htm">
<ons-page>
<p style="text-align:center">Rom<br>Mailand<br>Neapel</p>
</ons-page>
</template>
</body></html>
Listing 13.9 Datei »onsen_tab.htm«
Das Dokument beinhaltet eine Komponente des Typs ons-page. Dabei handelt es sich um die Hauptseite, die die Tableiste zum Wechsel zwischen den einzelnen Unterseiten beinhaltet. Die Tableiste ist eine Komponente des Typs ons-tabbar. Ihre Eigenschaft swipeable ermöglicht das Wischen. Falls Sie die Eigenschaft position weglassen, wird die Tableiste am unteren Rand platziert. Im vorliegenden Programm wird sie am oberen Rand platziert.
Innerhalb der Tableiste stehen mehrere Tabs, die mithilfe von Komponenten des Typs ons-tab erzeugt werden und in der Darstellung jeweils die gleiche Breite einnehmen. Der Wert der Eigenschaft page verweist auf die einzelnen Unterseiten. Diese stehen entweder innerhalb einer Komponente des Typs template oder in einer externen Datei. Die Eigenschaften label und icon dienen zur Kennzeichnung eines Tabs. Die Eigenschaft active wird für denjenigen Tab gesetzt, der zum Start des Dokuments ausgewählt ist und dessen zugehörige Unterseite angezeigt wird.
Im vorliegenden Beispiel werden die ersten beiden Unterseiten innerhalb von Komponenten des Typs template im selben Dokument erzeugt. Die Verknüpfung zur Eigenschaft page des zugehörigen Tabs wird über die Eigenschaft id hergestellt. Die dritte Unterseite steht in einer externen Datei. Die Verknüpfung zur Eigenschaft page des zugehörigen Tabs wird über den Dateinamen hergestellt. Es folgt der Inhalt der externen Datei:
<ons-page>
<p style="text-align:center">Paris<br>Lyon<br>Marseille</p>
</ons-page>
Listing 13.10 Datei »onsen_tab_fra.htm«
Nach dem Antippen des entsprechenden Tabs erscheint die Seite, siehe Abbildung 13.20.
Abbildung 13.20 Seite zum Tab mit der Bezeichnung »Frankreich«
13.3.2 Eine Hierarchie von Seiten mit einem Navigator
Ein Navigator dient dazu, mehrere Unterseiten eines Dokuments in einer festgelegten Hierarchie anzusteuern. Das ist die meistverwendete Technik beim Aufbau von Dokumenten, die umfangreiche Informationen und Aktionsmöglichkeiten bieten. Ähnlich wie bei einer Tableiste stehen die Unterseiten innerhalb einer Komponente des Typs template oder in einer externen Datei.
Der Benutzer gelangt zunächst auf eine Startseite. Sie befindet sich auf der obersten Ebene der Seiten. Von dort aus kann er, typischerweise über die Elemente einer Liste, auf die nächst niedrigere Ebene gelangen, also auf untergeordnete Seiten. Von dort aus kann er wiederum auf die nächst niedrigere Ebene gelangen usw. Für die schrittweise Rückkehr zur obersten Ebene mit der Startseite wird eine spezielle Zurück-Schaltfläche genutzt. Beim Wechsel zwischen den Ebenen können unterschiedliche Arten von Animationen zum Einsatz kommen.
In Abbildung 13.21 sehen Sie eine Startseite, von der aus sechs weitere Seiten in zwei untergeordneten Ebenen angesteuert werden können. Nur die Startseite befindet sich in der Hauptdatei. Die sechs Unterseiten der zweiten und der dritten Ebene stehen in externen Dateien.
Abbildung 13.21 Startseite
Dazu das Programm:
...
<body>
<ons-navigator id="nvg" animation="slide"
page="onsen_nav_land.htm"></ons-navigator>
<template id="onsen_nav_land.htm">
<ons-page>
<ons-toolbar>
<div class="left"> </div>
<div class="center">Länder</div>
</ons-toolbar>
<ons-list>
<ons-list-item tappable
onclick="weiter(0)">Spanien</ons-list-item>
<ons-list-item tappable
onclick="weiter(1)">Frankreich</ons-list-item>
</ons-list>
</ons-page>
</template>
<script>
var ziel = ["onsen_nav_spa.htm", "onsen_nav_fra.htm",
"onsen_nav_spa_mad.htm", "onsen_nav_spa_bar.htm",
"onsen_nav_fra_par.htm", "onsen_nav_fra_mar.htm"];
function weiter(nr)
{
document.getElementById("nvg").pushPage(ziel[nr]);
}
</script>
</body></html>
Listing 13.11 Datei »onsen_nav.htm«
Das zentrale Element ist eine Komponente des Typs ons-navigator. Ihre Eigenschaft id wird zur Ansteuerung der einzelnen Seiten benötigt. Die Animation beim Wechsel zwischen den Seiten wird mithilfe der Eigenschaft slide eingestellt. Mögliche Werte sind fade, lift, slide und none. Der Wert der Eigenschaft page verweist auf die Startseite, die hier innerhalb einer Komponente des Typs template steht.
Das Antippen der Listenelemente innerhalb der Startseite führt zu einer sichtbaren Reaktion und zum Aufruf der Funktion weiter(). Innerhalb dieser Funktion wird die Methode pushPage() für die Komponente des Typs ons-navigator aufgerufen. Dabei wird der Name der gewünschten Unterseite übergeben. Hier stammt er aus einem Array.
Technisch gesehen liegen alle Seiten auf einem Stapel. Der Benutzer sieht immer nur die oberste Seite des Stapels. Zu Beginn ist das die Startseite. Die Methode pushPage() schiebt die gewünschte Unterseite als neue oberste Seite auf den Stapel. Sie verdeckt damit die bisherige oberste Seite. In den Unterseiten finden Sie eine Komponente des Typs ons-back-button. Sie dient als Schaltfläche zur Rückkehr zur jeweils vorherigen Ebene. Dabei wird die aktuell oberste Seite vom Stapel geholt und die darunter liegende Seite ist wieder die oberste Seite des Stapels.
Nachfolgend sehen Sie den Aufbau der Unterseite mit den Infos über Frankreich, siehe auch Abbildung 13.22. Die andere Unterseite der zweiten Ebene hat einen vergleichbaren Aufbau und wird hier nicht dargestellt.
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button></ons-back-button></div>
<div class="center">Frankreich</div>
</ons-toolbar>
<ons-list>
<ons-list-item tappable onclick="weiter(4)">Paris</ons-list-item>
<ons-list-item tappable onclick="weiter(5)">Marseille</ons-list-item>
</ons-list>
</ons-page>
Listing 13.12 Datei »onsen_nav_fra.htm«
Abbildung 13.22 Unterseite »Frankreich« auf der zweiten Ebene
Es folgt die Unterseite mit den Infos über Marseille, siehe auch Abbildung 13.23. Die anderen Unterseiten der dritten Ebene haben einen vergleichbaren Aufbau und werden hier nicht dargestellt.
<ons-page>
<ons-toolbar>
<div class="left"><ons-back-button></ons-back-button></div>
<div class="center">Marseille</div>
</ons-toolbar>
<p style="text-align:center">Infos über Marseille</p>
</ons-page>
Listing 13.13 Datei »onsen_nav_fra_mar.htm«
Abbildung 13.23 Unterseite »Marseille« auf der dritten Ebene
13.3.3 Ein Rundlauf in einem Karussell
Ein Karussell beinhaltet mehrere Einträge innerhalb einer einzigen Seite. In jedem Eintrag können bestimmte Inhalte der Seite dargestellt werden. Der Benutzer wechselt zwischen den einzelnen Einträgen entweder durch Antippen einer Schaltfläche in der Navigationsleiste oder durch seitliches Wischen hin und her.
In Abbildung 13.24 sehen Sie die erste Seite eines Karussells mit insgesamt drei Einträgen.
Abbildung 13.24 Erste Seite des Karussells
Dazu das Programm:
...
<body>
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="zurueck()">
<ons-icon icon="md-chevron-left"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Karussell</div>
<div class="right">
<ons-toolbar-button onclick="weiter()">
<ons-icon icon="md-chevron-right"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-carousel fullscreen swipeable auto-scroll id="kar">
<ons-carousel-item style="background-color:#c0c0c0">
<p style="text-align:center">Spanien</p>
</ons-carousel-item>
<ons-carousel-item style="background-color:#d0d0d0">
<p style="text-align:center">Italien</p>
</ons-carousel-item>
<ons-carousel-item style="background-color:#e0e0e0">
<p style="text-align:center">Frankreich</p>
</ons-carousel-item>
</ons-carousel>
</ons-page>
<script>
function zurueck()
{
document.getElementById("kar").prev();
}
function weiter()
{
document.getElementById("kar").next();
}
</script>
</body></html>
Listing 13.14 Datei »onsen_karussell.htm«
Die beiden Schaltflächen in der Navigationsleiste werden mithilfe von Komponenten des Typs ons-toolbar-button erstellt. Die Betätigung der Schaltflächen führt zu den beiden Funktionen zurueck() und weiter(). Innerhalb dieser Funktionen werden für das gesamte Karussell die Methoden prev() und next() zum Wechsel des Karussell-Eintrags aufgerufen.
Das Karussell wird mithilfe einer Komponente des Typs ons-carousel erstellt. Die Eigenschaft id dient zur Identifikation für die genannten Methoden. Die Eigenschaft fullscreen sorgt dafür, dass sich die Karussell-Einträge jeweils über den gesamten Bildschirm erstrecken. Die Eigenschaft swipeable ermöglicht das Wischen zum Wechseln der Karussell-Einträge. Die Eigenschaft auto-scroll sorgt dafür, dass das Karussell nach dem Loslassen nach einem Wischvorgang automatisch zur nächstgelegenen Kante scrollt. Auf diese Weise sind die Einträge immer vollständig sichtbar.
Die einzelnen Karussell-Einträge sind Komponenten des Typs ons-carousel-item.
In Abbildung 13.25 sehen Sie die letzte Seite des Karussells.
Abbildung 13.25 Letzte Seite des Karussells