Sencha Touch

Für mobile Geräte zu entwickeln, ist nicht leicht. Viele unterschiedliche Displaygrößen und -auflösungen machen Designern und Entwicklern das Leben schwer. Das wäre an sich nicht so dramatisch, wären die Displays nur nicht so klein. Umso mehr bietet sich deswegen hier die Verwendung eines Frameworks an. Sencha Touch [1] ist dabei etwa neben jQuery Mobile eine Möglichkeit, solche Anwendungen zu entwickeln, beschränkt sich dabei aber, wie der Name schon sagt, auf Geräte mit Touchscreens. Prinzipiell sind die Anwendungen auf allen Browsern mit WebKit-Basis lauffähig; für die volle User Experience sollten es dann aber schon iPhones, Android-Phones oder Tablets sein, auch BlackBerrys Touch-Geräte werden mittlerweile (seit Version 1.1.0) unterstützt.

Da die Browser von iOS, Android und neuerdings auch BlackBerry [7] auf WebKit basieren, ist es relativ einfach, Sencha-Touch-Anwendungen ohne ständige Verwendung eines mobilen Gerätes zu entwickeln, indem man z. B. einfach Google Chrome oder Safari verwendet, die auch beide nativ die notwendigen Entwicklertools besitzen. Lediglich zum Anpassen der Browsergröße an mobile Geräte empfiehlt es sich, Add-ons wie Resizer (Safari) [3] bzw. Window Resizer (Chrome) [4] zu verwenden.

Für die Entwicklung unerlässlich ist die API-Dokumentation [2]. Obwohl Sencha Touch bereits die Version 1.0 erreicht hat, ist sie leider (immer noch) stellenweise unvollständig oder fehlerhaft. Bei Bedarf sollte daher die Ext-JS-API-Dokumentation verwendet werden [5].

Die Beispielanwendung, die ich im Laufe dieses Artikels aufbauen werde, basiert auf Datensätzen der Film-Community Score11 [8]. Die vollständigen Quelltexte sowie Sencha Touch 1.1.0 finden Sie, wie gewohnt, auf der Heft-CD. Um die Anwendung zu testen, kopieren Sie sie auf Ihren Rechner und entpacken die Sencha-Touch-Library in den Ordner js/senchatouch/ (sodass die Datei sencha-touch.js direkt im Root von js/senchatouch liegt). Zum Ausführen öffnen Sie einfach die Datei index.html. Eine Internetverbindung wird benötigt, da Daten vom Score11-Server nachgeladen werden.

Zuletzt noch der Hinweis, dass es von großer Hilfe für das Verständnis dieses Artikels ist, wenn Sie zumindest grob verstanden haben, wie Vererbung von Klassen in Ext gehandhabt wird. Lesen Sie sich dafür am besten die Anleitung von Sencha selber durch [11]. Diese ist zwar für Ext JS verfasst, die Vererbung funktioniert in Sencha Touch jedoch vollkommen identisch.

Testgeräte organisieren

Da es eine schier unüberschaubare Anzahl an Geräten gibt, wird es womöglich problematisch und teuer, alle Geräte auf Vorrat zu halten. Zum Glück gibt es hierfür aber günstige und sogar kostenlose Varianten: Statt einem iPhone können Sie auch einfach einen iPod touch verwenden. Haben sie kein Android-Gerät zur Hand, wird es sogar noch einfacher: Das kostenlose Android SDK [9] (erhältlich für Linux, Mac und Windows) wird mit einem Emulator ausgeliefert, den Sie sowohl mit unterschiedlichen Android-Versionen als auch unterschiedlichen Auflösungen starten können. Was Sie tun müssen, um diesen in Betrieb zu nehmen, können Sie unter [10] nachlesen. Alternativen für BlackBerry Touch sind mir leider nicht bekannt.

Das Grundgerüst

Ähnlich wie bei Ext JS braucht man nicht viel, um loslegen zu können: Grundlage ist ein leeres HTML-Dokument mit dem Include einer JavaScript- und einer CSS-Datei (Listing 1). Die Applikation selbst wird in JavaScript geschrieben, auf reines HTML werden Sie eher selten zurückgreifen müssen. Auf der Heft-CD finden Sie den kompletten (und eben doch recht kurzen) Quelltext in der Datei index.html. Listing 1 lädt die Debug-Variante der Sencha-Touch-Bibliothek, für den Livebetrieb sollte sinnvollerweise die Non-Debug-Variante sencha-touch.js geladen werden. Für das Stylesheet gibt es mit sencha-touch-debug.css übrigens ebenfalls eine Debug-Variante, erfahrungsgemäß brauchen Sie diese aber eher seltener.

Listing 1

Um das visuelle Grundgerüst für eine Sencha-Touch-Anwendung zu erstellen, benötigen wir einfach ein beliebiges Panel mit der Configoption fullscreen: true. Je nach Anwendung kann das ein normales Panel, ein FormPanel (für Formulare) oder, wie in unserem Fall, ein TabPanel sein. TabPanels verwalten - wie bei Ext JS - mehrere Panels über Tabs getrennt. Über die Configoption tabBar legen sie zusätzlich noch fest, wo die Tabs angezeigt werden sollen (dock), sowie die vertikale Positionierung der Tabs (layout). Wird tabBar nicht festgelegt, so werden die Tabs standardmäßig oben und linksbündig positioniert. Um das Look & Feel von üblichen Smartphone-Apps zu verwenden, bietet es sich an, die Tabs unten zu positionieren. Wie ein solches TabPanel geschrieben wird, sehen Sie in Listing 2, den vollständigen Quelltext finden Sie in der Datei js/lib/MainWindow.js.

Hat man das Panel festgelegt, muss man es nur noch erstellen. Um Probleme zu vermeiden, erstellt man es idealerweise erst, wenn der DOM zur Verfügung steht. Wie Sie das mit Hilfe von Ext.setup erreichen, sehen Sie in Listing 3. Ext.setup hat übrigens auch noch weitere nützliche Parameter, die Sie am besten der API-Dokumentation [2] entnehmen. Wie die fertig konfigurierte Beispielanwendung dieses Artikels aussieht, zeigt Ihnen Abbildung 1.

Listing 2

Listing 3

Abb. 1: Unsere komplett konfigurierte Sencha-Touch-Anwendung (Vergrößern)