Kurt Heppke

Sencha Touch für iPhone, HTC Evo, BlackBerry Storm und Palm Pre

Sencha Touch ist ein Cross-Plattform-Framework (Bibliothek für verschiedene Betriebssysteme) das es erlaubt Web-Anwendungen zu erzeugen, die das Look-and-Feel einer nativen Anwendung haben.

Sencha Touch basiert ganz auf den Webstandards JavaScript, CSS3 und HTML5. Unterstützt werden bisher alle Webkit-basierten Browser auf den Betriebssystemen iOS und Android sowie ganz aktuell nun auch auf dem Blackberry.

In Version 1.1 stehen die ersten offiziellen Plugins in Sencha Touch zur Verfügung. Mit Pull to Refresh kommt eine neue Funktion für Listenansichten hinzu, mit der Inhalte beim Ziehen des Bildschirms nach unten aktualisiert werden. Eine neue Paginierungsfunktion kann mehrseitige Listen durchnummerieren und Links zum Weiterlesen am Ende der Seite generieren. Wahlweise lädt die Web-App automatisch weitere Inhalte nach, wenn der User ans Ende der Seite kommt.

Mit Sencha Touch 1.1 dürfen App-Programmierer auch für Blackberry OS 6 entwickeln. Darunter fallen das Blackberry Torch und das kommende Blackberry Playbook mit dem Blackberry TabletOS. Dafür liefert Sencha auch ein passendes Theme mit dem Blackberry-Look-and-Feel mit. Unter Android klappt jetzt das Scrollen besser. Sencha Touch 1.1 bietet hier laut Hersteller fast die dreifache Performance beim Scrollen wie der Vorgänger.

Sie können mit einem entsprechenden Smartphone mein Beispiel dazu hier anschauen:

Link

Das Beispiel enthält ein Dashboard, eine Toolbar für Bilder (PictureBar) mit dem dazugehörigen Speichermodel (Ext.data.Store) und ein sogenanntes Carousel, das ist ein angepasstes Panel mit der Fähigkeit einzelne Seiten vor und zurück zu schieben. Im Dashboard ist eine Animation eingebaut.
Außerdem wurde das “Theme”, die Erscheinungsform der Anwendung, mit Hilfe von SASS (ein Pre Prozessor, der eine neue Syntax für CSS ermöglicht) und Compass geändert.

iPhone_4_screenshot iPhone_4_screensh65ot

Über das Dashboard (die Startseite) wird eine Kategorie ausgewählt. Die Detailseite wird von rechts hereingeschoben und zeigt am unteren Rand eine Toolbar mit Bildern, die geschoben werden kann. Der Anwender wählt hier den Artikel aus.

Die Detailseite ist ein “Carousel”, das ist ein mehrseitiges Panel, durch das geblättert werden kann. Die erste Seite des Carousels zeigt eine Großansicht des ausgewählten Bildes, die weiteren die das Bild in verschiedenen Rahmen.

iPhone_4_screens779hot iPhone_4_screens76879hot iPhone_4_screens787hot iPhone_4_screens356hot

Über die obere Toolbar, die einen Home Button kommt man zum Anfang.

 

Hier die Startseite im Vergleich: von links nach rechts iPhone, HTC Evo, BlackBerry Storm und Palm Pre.

iPhone_4_screenshot HTC_Evo_screenshot Blackberry_Storm_screensh7675ot Palm_Pre_screenshot

und hier die Vergleichsansicht der ersten Detail-Seite:

iPhone_4_screensh65ot HTC_Evo_screensh7887ot Blackberry_Storm_screensh78ot Palm_Pre_screensho77t