Slider-Menüs in Sencha-Touch-Applikationen erstellen
Kommentare

Facebook hat es vorgemacht, viele andere sind mit der Implementierung von Sliding-Menüs in ihren Applikationen nachgezogen. Kein Wunder, bietet das Design Pattern doch zahlreiche Vorteile für die Usability von Applikationen auf mobilen Devices – allen voran natürlich, dass sich mehr Optionen zum Menü hinzufügen lassen, ohne, dass sie mangels Platz auf dem Smartphone- oder Tablet-Display unlesbar werden.

Auch Entwickler, die mit Sencha Touch arbeiten, können seit Version 2.3.0 des Frameworks leicht Sliding-Menüs zu ihrer Applikation hinzufügen. Joshua Morony zeigt, wie das geht.

Sliding-Menüs sorgen für mehr Platz im Display

Neben der Platzersparnis ist ein weiterer Vorteil von Sliding-Menüs, dass auch ungeübtere Nutzer das Konzept sofort verstehen und ihnen die Navigation so erleichtert wird. Dementsprechend war der Wunsch vieler Sencha-Touch-Nutzer, ein solches Menü möglichst unaufwändig erstellen zu können. Eine neue Applikation mit Sencha Touch zu generieren und ihr ein Sliding-Menü hinzuzufügen, gestaltet sich daher seit dem Release von Sencha Touch 2.3.0 mit Ext.Menu recht einfach.

Erstellt man eine neue Applikation mit Sencha Touch, enthält diese automatisch eine tabellarische Navigation. Um der App eine neue Struktur zu verpassen, werden zunächst die Default-Items entfernt. Nachdem man sich so ein Basis-Template erstellt hat, wird eine Toolbar als neues Item definiert und ihr ein Button und ein Handler hinzugefügt.

Anschließend wird das eigentliche Menü mithilfe einer createMenu-Funktion aufgebaut, in der einerseits die verschiedenen Menüoptionen definiert, andererseits der Viewport initialisiert wird. Abschließend wird jedem Button eine eigene Handler-Funktion hinzugefügt, sodass bei einem Event beispielsweise die Ansicht verändert wird.

So lässt sich leicht ein Sliding-Menü in einer Sencha-Touch-Applikation erstellen. Joshua Morony erklärt dies ausführlicher in seinem Tutorial Create a Facebook Style Sliding Menu in Sencha Touch und verdeutlicht das Vorgehen zudem mit einigen Code-Beispielen.

Aufmacherbild: Traditional Japanese sliding door von Shutterstock / Urheberrecht: KPG_Payless

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -