5 Der Whisky-App ein Gesicht geben

 
93

5         Der Whisky-App ein Gesicht geben

Das Modell steht und das Grundgerüst der View ist im letzten Kapitel
erstellt worden. Also höchste Zeit, sich mit den Details zu jQuery
Mobile auseinanderzusetzen. Die verwendeten Bibliotheken hält Herr
Weber als lokale Kopie im lib-Verzeichnis, da es keinen Sinn mehr
macht, sie von extern nachzuladen, wenn später das Offline-API ver-
wendet wird oder eine Hybrid-App erstellt werden soll. Er rät zudem,
sich zuerst auf die Smartphone-Version zu konzentrieren und diese erst
später in diesem Kapitel zu einer Tablet-Version zu erweitern. Als Aus-
gangslage dient der Code aus Abschnitt 4.4.2.

5.1       Model und Controller an die View anbinden
Im Grundgerüst aus dem Abschnitt 4.4.2 haben wir das MVC-Pattern
noch nicht angewendet. Dies wollen wir nun nachholen. Dafür ver-
wenden wir unser Projekt aus Abschnitt 3.4 mit dem Modell und die
Ausgangslage der View. Als Erstes kopieren wir das Listing 4–15 in das
Stammverzeichnis und benennen die HTML-Datei in index.html um.
Dasselbe machen wir mit dem About-Dialog, Listing 4–16. Die lokale
Kopie von jQuery Mobile kann unter http://jquerymobile.com/down-
load/ heruntergeladen werden. In jQM ist jQuery noch nicht enthal-
ten, deshalb müssen wir es separat unter http://jquery.com/download/
besorgen. Auf der Download-Seite von jQM steht jeweils, welche
jQuery-Version welche jQM-Version unterstützt1. Die Dateien kopie-
ren wir in das lib-Verzeichnis und passen die Pfade im -Element
der index.html2-Datei an:

1.    Für jQM in der Version 1.2.0 empfehle ich mindestens jQuery 1.7 oder 1.8, für die
      jQM-Version 1.3 muss mindestens jQuery 1.8 eingesetzt werden!
2.    Wie weiter oben bereits erwähnt, empfehle ich, während der Entwicklung die les-
      baren Dateien einzubinden und bei der »Produktiv-Setzung« nur noch die opti-
      mierten minimierten Dateien zu verwenden.
94                           5 Der Whisky-App ein Gesicht geben

               Listing 5–1       
     Header der Whisky-App          
                                    
                                       Whisky-Rating

                             Jetzt fehlt uns noch der Controller. Die Idee ist, dass wir alle href-
                             Attribute durch Event-Handler ersetzen. Dazu erstellen wir die Datei
                             controller.js. Da wir keine Vererbung brauchen, können wir ein nor-
                             males Objekt erzeugen, das in der Methode initialize() alle Events
                             registriert.

                               Tipp:
                               Es empfiehlt sich, zu jedem Event hinzuzuschreiben, wo es ausgelöst
                               werden kann und welche Page das Ziel ist. Dies erleichtert später die
                               Wartung:
                               /** Zurück auf Home
                                * Quelle: whisky-details
                                * Ziel: whisky-home */

                             In der Tabelle 5–1 sind die benötigten Events für die Whisky-App
                             zusammengestellt. Zurzeit sind noch nicht alle Elemente in der
                             HTML-Datei definiert, aber das kommt im Laufe dieses Kapitels.
                             Aktuell sind die drei ersten vorhanden:

                 Tab. 5–1     Bedeutung              Element-ID       Quell-ID der Page   Ziel-ID der Page
     Events der Whisky-App
                              About-Dialog (Menü)    about            whisky-home         about.html
                              Home-Dialog            home             whisky-details      whisky-home
                              Neue Wertung (Menü)    newWertung       whisky-home         whisky-details
                              Detail-Wertung                          whisky-home         whisky-details
                              (Tippen auf Tabelle)
                              Wertung löschen        delWertung       whisky-details      whisky-home
                              Wertung speichern      saveWertung      whisky-details      whisky-home

                             Wie können wir nun einen Wechsel der Seite (page) in JavaScript
                             erzwingen? Dazu dient die Methode $.mobile.changePage(). Als Para-
5.1 Model und Controller an die View anbinden   95

meter wird die Ziel-Page-ID oder eine Datei angegeben. Da ein simpler
Wechsel des Inhaltes nicht sexy wirkt, können wir mit dem zweiten
Parameter die Transformation definieren. Dieser Parameter ist eine
Parameter-Liste:
       $.mobile.changePage("#whisky-home", {transition: "pop"});

Alle Parameter sind in der Dokumentation unter API, Methods & Uti-
lities zu finden. Häufig verwendete sind:
■ changeHash: Die Location-Bar im Browser wird jeweils mit der aktuel-
  len URL aktualisiert – was aber nicht immer erwünscht ist. Wenn
  unsere Whisky-App zum Beispiel nur im Browser laufen soll, ist dies
  nicht erwünscht, da wir nicht direkt zu den Details springen möchten.
  Dann wird aber auch der Stack nicht aktualisiert! Standardwert: true.

     Hinweis:
     Wenn auf eine externe Seite verwiesen wird und diese über den Stack
     zurückfinden muss (Back-Button oder das x bei den Dialogen), so ruft
     jQM die URL vor der App auf, da sich diese im Stack befindet! Deshalb
     dürfen wir diesen Parameter bei der About-Seite nicht verwenden. Da die
     Whisky-App schlussendlich als App laufen soll – und es somit kein URL-
     Eingabe-Element gibt – lassen wir diesen Parameter weg.

■ data: Mit diesem Attribut kann der Ziel-URL ein String mit Daten
  mitgegeben werden. Dies funktioniert nur, wenn eine URL angege-
  ben worden ist.
■ role: Dieses Attribut definiert, mit welcher Rolle (page, dialog, ...)
  die Page geladen werden soll. Damit ist es auch möglich, eine Page
  als Dialog zu laden, obwohl dies in der HTML-Datei anders defi-
  niert ist. Dieses Attribut übersteuert folglich die Definition in der
  HTML-Datei.
■ showLoadMsg: Soll der Loading-Dialog angezeigt werden? Standard:
  true.
■ transition: Dieses Attribut definiert die Animation beim Seiten-
  wechsel.
Die Transformation der Seiten erfolgt über CSS3. Leider funktionieren
nicht alle Transformationen auf allen Plattformen korrekt. Einige sind
auch sehr langsam, siehe auch den Abschnitt 7.4 zur Performance. Fol-
gende Transformationen sind zurzeit möglich:

3.     Oliver Gast hat eine spannende Testseite mit CSS3-Transformationen ins Web
       gestellt: http://www.olivergast.de/wp-content/demos/transitions/index.html
96                       5 Der Whisky-App ein Gesicht geben

            Abb. 5–1
     Transformationen

                         Mit der Testseite4 können die Transformationen unter der Zielplatt-
                         form zuerst getestet werden!
                         Die Entwickler der Spirit AG entscheiden sich, die Detailseite immer
                         mit slidedown zu animieren, die Homeseite dann mit slideup und die
                         Dialoge mit fade.
                         Nun stellt sich die Frage, wann wir die Events registrieren sollen.
                         Eigentlich dann, wenn das Dokument geladen und bereit ist. Dazu
                         können wir den jQM-Event pageinit verwenden, der aufgerufen wird,
                         wenn die Page initialisiert wird (und somit unsere Elemente im Spei-
                         cher für Manipulationen zur Verfügung stehen). Implementieren wir
                         im Folgenden den Controller:
          Listing 5–2         /** Controller */
            Controller        var WhiskyAppController = function() {
                                 /** Zurück auf Home.
                                   * Quelle: whisky-details
                                   * Ziel: whisky-home */
                                 function home() {
                                     $.mobile.changePage("#whisky-home",
                                                 { transition: "slideup" } );
                                 }

                                 /** Neue Wertung erstellen
                                  * Quelle: whisky-home
                                  * Ziel: whisky-details */
                                 function addTasting() {

                         4.   http://jquerymobile.com/test/docs/pages/page-transitions.html
5.1 Model und Controller an die View anbinden                       97

              $.mobile.changePage("#whisky-details",
                         { transition: "slidedown" } );
         }

         /** About-Seite als Dialog
           * Quelle: whisky-home
           * Ziel: about.html */
         function about() {
             $.mobile.changePage("about.html",
                      { transition: "fade", role: "dialog" } );
         }

         return {
            initialize : function() {
               // Add-Button in der Liste
               $("#newWertung").bind( 'vclick', addTasting);

                  // About-Dialog
                  $("#about").click(about);

                  // Home-Button
                  $("#home").click(home);
              }
         };
   }

   /** Controller aufrufen, wenn pageinit von jQM geworfen wird */
   $('#whisky-home').live("pageinit", function(event) {
       // Event-Listener-Buttons
       WhiskyApp.controller.initialize();
   });

Zusätzlich erstellen wir ein »Main«, das heißt: ein Objekt, in dem wir
unsere globalen Instanzvariablen führen. In diesem Main-Objekt
instanziieren wir sowohl den Controller als auch das Model:
   var WhiskyApp = {                                                                Listing 5–3
      tastings: new Tastings(),                                                     Die Datei main.js
      controller: new WhiskyAppController(),
   }

Damit wir nun alles testen können, müssen die JavaScript-Dateien in
der index.html-Datei eingebunden werden:
   
       Whisky-Rating
98                    5 Der Whisky-App ein Gesicht geben

                      Da ruft ein Entwickler enttäuscht: Weshalb funktioniert es denn bei
                      mir nicht? Ein Blick genügt: Er tippte bei der Transformation statt
                      fade face ein. Dann geht leider gar nichts mehr ...

                      5.2      Themen
                      jQM bringt fünf verschiedene Themes (auf Deutsch: Themen) mit, die
                      das Aussehen der Web-App auf je unterschiedliche Weise festlegen. Sie
                      werden mit den Buchstaben a, b, c, d und e abgekürzt. Mithilfe des
                      Attributs data-theme kann ein Thema für eine Page oder ein einzelnes
                      Element festgelegt werden.

           Abb. 5–2
     Themen von jQM

                      Das Thema a entspricht eher einem dunklen Aussehen wie bei And-
                      roid, Thema b ist in einem Blauton gehalten und die Themen c und d in
                      Grautönen. Das Thema e, ganz in Gelb, eignet sich für besonders
                      wichtige Sachen, die hervorstechen sollen.
                          Die Themen lassen sich mit dem ThemeRoller per Drag-and-drop
                      verändern. Die generierte CSS-Datei kann dann im Projekt eingebun-
                      den werden. Inspirieren lassen können Sie sich von der Seite
                      http://www.jqmgallery.com/.

           Abb. 5–3
        ThemeRoller
5.3 Formular-Elemente gruppieren                            99

Das Entwicklungsteam einigt sich auf das Thema c. Der About-Dialog
soll im Thema a erfolgen. Weitere Abweichungen werden ad hoc dis-
kutiert. Die Designer werden dann gegebenenfalls eine Anpassung
vornehmen.

5.3      Formular-Elemente gruppieren

5.3.1     Collapsible Sets

Die Detail-Page besteht aus vielen verschiedenen Eingabeelementen.
Wenn all diese Elemente auf einer Seite untereinander dargestellt wür-
den, wäre die Seite sehr unübersichtlich. Für die Gruppierung von Ele-
menten gibt es daher in jQM Collapsible Sets.

                                                                              Abb. 5–4
                                                                              Collapsible Sets

In unserer App gruppieren wir die Elemente in die Bereiche Allgemein,
Wertung und Ort. Wie gewohnt verwenden wir dafür ein div-Element
mit der entsprechenden Rolle collapsible-set. Pro Set wird ein weite-
res div-Element mit der Rolle collapsible erstellt. Mit dem Attribut
data-collapsed kann festgelegt werden, ob ein Content-Block (bei der
ersten Darstellung) aufgeklappt oder zugeklappt ist. Jeder Block kann
ein eigenes Thema haben; es zeigt einerseits, wie das Set dargestellt
werden soll, (data-theme="e") und andererseits, wie der Inhalt im Set
dargestellt werden soll (data-content-theme="c"). Da die Wertung her-
ausstechen soll, verwenden wir für dieses Set das Thema e (gelb). Als
Titel wird der Text im folgenden h3-Element verwendet. Folgendes Lis-
ting zeigt den Einsatz der Sets in der Whisky-App:
                                                 Listing 5–4
      
                                                      Whisky-App
            Tasting
100                         5 Der Whisky-App ein Gesicht geben

                                                   Allgemein
                                              
                                                   Wertung
                                              
                                                   Ort
                                              
                              Hinweis:
                              Wird beim Element kein Content-Thema angegeben, so fehlen die senk-
                              rechten Linien von Set zu Set.

                            Wer die Standard-Icons nicht mag, kann diese auch durch andere
                            ersetzen. Dafür stehen die data-Attribute data-collapsed-icon und
                            data-expanded-icon zur Verfügung:

                            Folgende Icons werden mitgeliefert, wobei bars und edit erst seit Ver-
                            sion 1.3 dabei sind:

                Abb. 5–5
      jQuery-Mobile-Icons

                            Weitere Icons hat Andy Matthews5 für jQM aufbereitet. Nach dem
                            Download können die CSS-Dateien und deren Unterverzeichnisse in
5.3 Formular-Elemente gruppieren                            101

das Projekt kopiert werden, und das Stylesheet kann in der Index-
Datei hinzugefügt werden:
     
Zu beachten ist, dass bei den Font-Icons die Icons im CSS etwas größer
gemacht werden. Dadurch kann es passieren, dass die Formatierungen
nicht mehr stimmen. Ich persönlich verwende deshalb nur die Original-
Icons:

                                                                                  Abb. 5–6
                                                                                  Die Original-Icons des
                                                                                  jQM-Icon-Packs
Wenden wir die genannten Icons an, könnte das wie folgt aussehen:

                                                                                  Abb. 5–7
                                                                                  Collapsible Set in der
                                                                                  Whisky-App

Wir haben im Code oben bei den drei Elementen die Icons entspre-
chend hinzugefügt:
     
           Allgemein
        
           Wertung
        
           Ort
        
Eigene Icons können im PNG-Format mit einer Auflösung von 18  18
Pixel und für Retina mit 36  36 Pixel eingebunden werden. Wichtig
ist, dass der Hintergrund transparent ist. Die Anwendung erfolgt wei-
terhin mit dem data-icon-Attribut:

5.   http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/index.html
102   5 Der Whisky-App ein Gesicht geben

          CRM

      Nun muss noch eine CSS-Klasse definiert werden, die mit .ui-icon
      beginnt:
          .ui-icon-crm { background-image: url("crm.png"); }

      5.3.2    Grid-Darstellung

      Eine weitere Formatierungsmöglichkeit ist die Spaltendarstellung. Die
      Idee von jQM ist, dass der Content-Bereich in zwei bis fünf Spalten mit
      gleicher Breite aufgeteilt werden kann.
          In einem übergeordneten Bereich muss die Anzahl der Spalten im
      class-Attribut angegeben werden:

      Für zwei Spalten wird die Klasse ui-grid-a verwendet, für drei ui-
      grid-b, für vier ui-grid-c und für fünf ui-grid-d. Danach ist in dessen
      Block pro Spalte ein weiterer Block zu definieren, bei dem wiederum
      über das class-Attribut die Spalte angegeben wird. Die erste Spalte
      erhält den Wert ui-block-a, die zweite ui-block-b usw. bis zur fünften
      mit dem Wert ui-block-e.
          Das fünfspaltige Design aus der Abbildung 5–2 wird wie folgt
      umgesetzt:
          
                    Header A
                
                ...
             
              ...
              
              ...
              
              ...
              
             ...
5.3 Formular-Elemente gruppieren                         103

Dynamische Spaltenbreiten und ein Responsive Layout können per
CSS erzeugt werden. Wird unter jQM 1.3 das Class-Attribut ui-
responsive mitgegeben, so werden, wenn der Platz nicht ausreicht, die
Zellen automatisch untereinander dargestellt.
    Will man einen eigenen Wert für den Umbruch definieren, der in
jQM Breakpoint genannt wird, muss die Klasse selbst per Media-
Query definiert werden, dabei kann man auch gleich die Spaltenbreite
angeben. Wir können dies in unserem About-Dialog anwenden:

                                                                            Abb. 5–8
                                                                            About-Dialog im
                                                                            Responsive Layout

Die CSS-Definition finden Sie gleich am Anfang des Codes. Wenn die
Breite kleiner als 25 Einheiten ist, so werden die Zellen untereinander
(width: 100%; float: none) dargestellt, ansonsten nebeneinander,
wobei die erste Spalte 22% des Platzes erhält:
                                                  Listing 5–5
                     about.html mit zwei
       
                                                                            Spalten
          @media all and (max-width: 25em) {
             .my-breakpoint .ui-block-a, .my-breakpoint .ui-block-b {
                width: 100%;
                float: none;
             }
          }

          @media all and (min-width: 25em) {
             .my-breakpoint.ui-grid-a .ui-block-a {
                width: 22%;
             }
             .my-breakpoint.ui-grid-a .ui-block-b {
                width: 77%;
             }
          }
       
          About Whisky Rating
104   5 Der Whisky-App ein Gesicht geben

                  Whisky-Tasting-Web-App
                  
                          entwickelt mit jQuery Mobile und HTML5.
                          App zum Buch Web-Apps mit jQuery Mobile
                          Version 02.2013
                          (c) Philipp Friberg
                      
      5.4      Die Formular-Elemente
      Die grafischen Elemente wurden in jQuery Mobile als Widgets entwi-
      ckelt. Ein Widget ist ein Interaktions-Element einer grafischen Benut-
      zerschnittstelle, das ein eigenes Verhalten aufweisen kann. Der Vorteil
      ist, dass es gekapselt ist und somit der Quellcode modularer wird. Ein
      Widget kann z.B. ein Text-Feld oder eine Dialog-Box sein. Im
      Abschnitt 7.5 werden wir uns nochmals intensiv darum kümmern.

      5.4.1     Field-Container

      jQM rendert je nach zur Verfügung stehendem Platz die Anordnung
      der Felder unterschiedlich, siehe Abbildung 5–9. Die linke Darstellung
      erfolgt in der vertikalen Ausrichtung. Kippt der Benutzer das Smart-
      phone in die Horizontale, hat jQM mehr Platz in der Breite und stellt
      die Seite wie rechts dar. Um diese dynamische Darstellung zu unter-
      stützen, muss jQM über semantische Informationen zu den Element-
      Gruppen verfügen. Deshalb müssen sich zusammengehörige Elemente
      in einem Field-Container befinden:
            
               ...
Sie können auch lesen
NÄCHSTE FOLIEN ... Stornieren