WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 355

liches Magazingefühl zu erhalten, werden die Seiten nebeneinander aufgereiht. Die
aktuelle Seite ist dabei im Viewport sichtbar, die anderen liegen links und rechts
»außerhalb« des Geräts. Zum Navigieren schiebt der Nutzer sie mit einer Wischbewe-
gung, dem sogenannten Swipen , durch den Viewport. Dieses Bedienmuster nennt
man auch Carousel .

Carousels mit Sencha Touch

Praktischerweise existiert in Sencha Touch eine solche Carousel-View bereits, die Sie
für Ihr Magazin verwenden können. Sie initialisieren sie mit der Methode Ext.create :

8

carousel = Ext.create("Ext.Carousel", {
flex: 1
});

Das Carousel selbst bleibt leer, der Parameter flex: 1 bedeutet, dass sich das Element
an sein Elternelement anpasst. Alternativ könnten Sie Höhe und Breite auch in Pixeln
angeben, da Ihr Magazin aber später auch in der Landscape-Ansicht und auf Smart-
phones funktionieren soll, ist die flexible Größenausdehnung ratsam. Neu ist auch,
dass Sie ein Sencha-Touch-Objekt einer Variablen, in diesem Fall carousel , zuweisen.
Dies ist notwendig, damit Sie das Carousel später in Funktionen adressieren können.

Home-Button

An dieser Stelle kommt der Home-Button ins Spiel: Wenn er angeklickt wird, soll das
Magazin zum Cover springen, also zur allerersten Seite des Magazins, oder auch das
allererste Element im Carousel. Definieren Sie die Funktion coverAnzeigen wie folgt:

var coverAnzeigen = function(){
carousel.setActiveItem(0);
}

Die Methode carousel.setActiveItem() sorgt dafür, dass eine bestimmte Seite im
Carousel direkt aufgerufen wird. Die »nullte« Seite ist das Cover. Sie könnten mit die-
ser Methode also auch eine Bookmark-Funktion oder ein Inhaltsverzeichnis oder
Querverweise innerhalb Ihres Magazins realisieren. Doch zunächst belassen wir es
bei der Funktion coverAnzeigen .

Interface-Elemente zusammenfügen

Bisher haben Sie zwar Kopfzeile und Carousel angelegt, aber noch nirgendwo ver-
knüpft. Damit die Elemente angezeigt werden, müssen Sie diese in einem Ext.Con-
tainer zusammenfügen: