Mobile Anwendungen für iOS, Android und BlackBerry Touch

Sencha Touch
Kommentare

An sich kann man beliebige Komponenten in ein ActionSheet packen, am besten eignet es sich aber für Buttons. Ähnlich wie die iconCls bei den Panels gibt es über die ui-Configoption die Möglichkeit,

An sich kann man beliebige Komponenten in ein ActionSheet packen, am besten eignet es sich aber für Buttons. Ähnlich wie die iconCls bei den Panels gibt es über die ui-Configoption die Möglichkeit, Buttons zu stylen; in der Regel bedeutet das nur, wie das Format des Buttons aussieht (abgerundet, mit einer spitzen Seite etc.) und welche Farben es verwendet. Die vollständige Liste der Möglichkeiten für ui finden Sie, wie die Icons für iconCls, in der Kitchen-Sink-Demo [6] und den Code für das in Abbildung 5 angezeigte ActionSheet in Listing 10.

Listing 10: ActionSheet

Ext.ns('Score11.Mobile');

Score11.Mobile.BookmarkMovieActionSheet = Ext.extend(Ext.ActionSheet, {
    initComponent: function() {
        this.addEvents('bookmarkmovie');
        
        this.deleteMovie = new Ext.Button({
            text: 'Film bookmarken',
            ui: 'confirm',
            // Callback, wenn der User den Button anklickt
            handler: function(button) {
                // User informieren, dass der Bookmark hinzugefuegt wurde
                Ext.Msg.alert(
                    'Bookmark',
                    'Der Bookmark wurde hinzugefügt.'
                );
                this.fireEvent('bookmarkmovie');
                this.hide();
            },
            // Scope, in welchem der handler() Callback aufgerufen wird
            scope: this
        });
        
        this.cancelRemoval = new Ext.Button({
            text: 'Abbrechen',
            ui: 'decline',
            handler: function(button) {
                this.hide();
            },
            scope: this
        });
        
        Ext.apply(this, {
            items: [
                this.deleteMovie,
                this.cancelRemoval
            ]
        });
        
        Score11.Mobile.BookmarkMovieActionSheet.superclass.initComponent.apply(this, arguments);
    }
});

Wie Sie dem Listing sicherlich entnehmen konnten, wird auch hier wieder ein Event (bookmarkmovie) gefeuert, sobald sich der User dazu entschlossen hat, den Film zu bookmarken. Das können wir wieder im MainWindow abfangen und eine entsprechende Aktion durchführen. In dem Fall lautet die Aktion: Bookmark speichern, Meldung ausgeben und den BadgeText der Bookmarks aktualisieren. Der BadgeText ist die Anzeige, dass sich in einem Objekt etwas geändert hat – meistens handelt es sich dabei um eine Zahl. IPhone-User kennen etwa die rot eingekreiste Zahl auf der Mail-Applikation bei neuen E-Mails. Den BadgeText bei einem Panel können Sie über panel.tab.setBadge(text) setzen. Die in Listing 11 verwendete increaseBadge-Methode habe ich selber dem Bookmarks-Panel hinzugefügt und behandle dort die automatische Erhöhung des BadgeTextes um 1 – setBadge nimmt nämlich auch Text an. Wie so ein BadgeText aussieht, zeigt Abbildung 6, die increaseBadge-Methode finden Sie in der Datei js/lib/Bookmarks.js.

Listing 11: ActionSheet anzeigen und ggf. BadgeText um 1 erhöhen

/**
 * list : Die Filmliste des Home Panels
 * localMovieStore : Der Store, der mit den Bookmarks verknuepft ist
 */
this.homePanel.on('itemtap', function(list, index, item, event) {            
    var actionSheet = new Score11.Mobile.BookmarkMovieActionSheet();
            
    actionSheet.on('bookmarkmovie', function() {
        var movie = list.getStore().getAt(index);
        localMovieStore.add(movie.data);
        // Liste neu sortieren, sonst ist das neue Element immer am Ende der Liste
        localMovieStore.sort();
        // Originaleintrag deselecten
        list.deselect(movie);
        // Badge der Bookmarks um 1 erhoehen
        this.bookmarksPanel.increaseBadge();
    }, this);
            
    actionSheet.show();
}, this);

Abb. 6: Bookmarks-Icon mit BadgeTextAbb. 6: Bookmarks-Icon mit BadgeText (Vergrößern)

Formular mit Suche

Sicherlich ist Ihnen in Abbildung 4 die Lupe oben links aufgefallen. Dahinter versteckt sich eine recht rudimentäre Suchfunktion, mit der man die Bookmarks durchsuchen kann. Zuerst wird bei Klick auf die Lupe eine Suchmaske geöffnet, die im Bookmark-Panel als Toolbar definiert wurde (dockedItems). In dieser kann der User anschließend Text eingeben und die Bookmarks filtern (Abbildung 7). Prinzipiell ist das einfach; damit aber wie in Abbildung 7 unten rechts „Suchen“ angezeigt wird, muss man drei Dinge beachten:

  1. Das Textfeld muss ein Suchfeld sein (Ext.form.Search).
  2. Das Suchfeld muss sich in einem Formular befinden (Ext.form.FormPanel).
  3. Das Formular sollte idealerweise nicht das Standardverhalten beibehalten (Formular als normalen HTTP Request absenden).

Punkt eins und zwei sollten an sich selbsterklärend sein, Punkt drei lässt sich ganz einfach umsetzen, indem man das FormPanel mit dem Attribut submitOnAction: false konfiguriert.

Abb. 7: Suche richtig konfiguriert - die Suche muss nur noch manuell getriggert werden.Abb. 7: Suche richtig konfiguriert – die Suche muss nur noch manuell getriggert werden. (Vergrößern)

Wie Sie die Suchtoolbar im Panel als Toolbar für oben definieren, sehen Sie in verkürzter Form in den Listings 12.1 und 12.2, auf der Heft-CD finden Sie dies vollständig in den Dateien js/lib/Bookmarks.js und js/lib/BookmarksSearchToolbar.js. Die Leiste, in der Score11 steht, die Sie bisher auf jedem Screenshot gesehen haben, ist ebenfalls eine solche Toolbar, die im MainWindow definiert wurde. Die in der Beispielanwendung implementierte Suche macht schlussendlich nichts anderes, als die Methode filter() auf dem entsprechenden Store auszuführen. Den Code dazu finden Sie ebenfalls in der Datei js/lib/BookmarksSearchToolbar.js.

Listing 12.1: Toolbars oben andocken – Toolbar erstellen

Ext.ns('Score11.Mobile');

Score11.Mobile.BookmarksSearchToolbar = Ext.extend(Ext.Toolbar, {
    dock: 'top',
    ui: 'light',
    initComponent: function() {
        var searchField = new Ext.form.Search({
            // Wird angezeigt, solange nichts eingegeben wurde
            placeHolder: 'Film suchen',
            name: 'searchfield'
        });
    }
});

Listing 12.2: Toolbars oben andocken – Toolbar einbinden

Score11.Mobile.Bookmarks = Ext.extend(Ext.form.FormPanel, {
    iconCls: 'bookmarks',
    title: 'Bookmarks',
    initComponent: function() {
        this.searchToolbar = new Score11.Mobile.BookmarksSearchToolbar() ;
        Ext.apply(this, {
            dockedItems: [
                this.searchToolbar
            ]
        });
    }
});
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -