Training und Beratung für Softwareentwickler

André Krämers Blog

Lösungen für Ihre Probleme

15 Aug 2012
von André Krämer

Microsoft liefert unter Visual Studio 2012 neben der Blank App mit der Navigation- , der Split- und der Grid-App bereits einige Vorlagen, die den Start in die Entwicklung etwas erleichtern sollen. Generell finde ich sie auch ganz gelungen, da sie zum Beispiel im Fall der Grid App zeigen wie man ein datengebundenes hierarchisches Navigationssystem implementiert.

Schade finde ich jedoch, dass andere Dinge wie der Semantic Zoom oder die App Bar nicht berücksichtigt wurden. Abgesehen davon hätten die Bilder auch etwas schicker sein können, als einfach nur grau :-)

image

Für all diejenigen, die sich unter Semantic Zoom nichts vorstellen können, hier der Text aus der MSDN

Semantischer Zoom ist eine an die Fingereingabe angepasste Technik, die von Apps im Metro-Stil in Windows 8 Release Preview verwendet wird, um große Mengen verwandter Daten oder Inhalte in einer einzigen Ansicht darzustellen und darin zu navigieren. Beispiele hierfür sind Fotoalben, App-Listen oder Adressbücher.

Wer vorher also nicht wusste, was Semantic Zoom ist, weiß es jetzt garantiert auch noch nicht ;-) Daher vereinfacht gesagt: Der Semantic Zoom ist die Vogelperspektive auf die App. Am Beispiel der Contoso Cookbook App sieht das wie folgt aus (links die Standard Darstellung, rechts reingezoomt mit Semantic Zoom):

imageimage

Um die Standard Grid App nun mit Semantic Zoom auszustatten gehen wir wie folgt vor:

Zuerst öffnen wir im Ordner pages /groupedItems die Datei groupedItems.html und scrollen bist ganz nach untern.

Dort finden wir folgende Zeilen:

        <section role="main" aria-label="Main content">
    <div class="groupeditemslist"
            aria-label="List of groups" data-win-control="WinJS.UI.ListView"
             data-win-options="{ selectionMode: none}">
    </div>
</section>

Der div Tag mit der Klasse groupeditemslist definiert den ListView, der die grauen Kästchen anzeigt. Um nun einen Semantic Zoom einzubauen, müssen wir ihn mit einem weiteren div umschließen, welches für das Attribut data-win-control den Wert WinJS.UI.SemanticZoom hat.

Außerdem brauchen wir noch einen zweiten ListView. Dieser rendert dann später die herausgezoomte Darstellung.

        <section role="main" aria-label="Main content">
    <div id="semanticZoom" data-win-controll="WinJS.UI.SemanticZoom">
        <div class="groupeditemslist"
             aria-label="List of groups" data-win-control="WinJS.UI.ListView"
             data-win-options="{ selectionMode: none}">
        </div>
        <div class="zoomedOutGroupeditemslist"
             aria-label="List of groups" data-win-control="WinJS.UI.ListView"
             data-win-options="{ selectionMode: none}">
        </div>
</div>
</section>

Wenn wir nun starten, dann werden unsere Gruppen leider nur noch einzeilig dargestellt.:

image

Dies bekommen wir zum glück relativ einfach behoben, indem wir dem div mit der id “semanticZoom” einfach eine Höhe von 100% verpassen. Der Einfachheit halber mache ich dies hier im Markup, in echten Apps gehört das natürlich ins CSS:

<div id="semanticZoom" data-win-controll="WinJS.UI.SemanticZoom" style="height: 100%">
   ...
</div>

Nun haben wir zwar wieder eine mehrzeilige Startseite, aber der Semantic Zoom klappt noch nicht. Das liegt daran, dass wir dem div mit der Klasse zoomedOutGroupeditemslist noch keine Datenquelle spendiert haben.

Dies holen wir in der Datei groupedItems.js in der Funktion ready nach.

Unter die Zeile

listview.oniteminvoked = this.itemInvoked.bind(this)

schreiben wir:

var zoomedOutListView =
    element.querySelector(".zoomedOutGroupeditemslist").winControl;

zoomedOutListView.itemDataSource = Data.groups.dataSource;
zoomedOutListView.groupDataSource = null;
zoomedOutListView.layout = new ui.GridLayout ({groupHeaderPosition: "top"});

Jetzt haben wir zwar einen semantischen Zoom, aber noch keinen besonders schönen:

image

Um dies zu korrigieren müssen wir der Semantic Zoom Ansicht noch ein Template inklusive CSS spendieren.

Als Template werde ich dem zoomedOutListView einfach das Template der normalen Ansicht verpassen.

Dazu füge ich zum letzten Code Schnippsel einfach noch folgende Zeile hinzu:

zoomedOutListView.itemTemplate = element.querySelector(“.itemtemplate”)

Genauso gut hätte man natürlich auch im HTML Markup ein eigenes Template erzeugen können.

Schlussendlich benötigen wir auch noch ein wenig CSS. Am einfachsten bekommen wir dies, indem wir alle Style Definitionen in der Datei groupedItems.css duplizieren, die die Klasse .groupeditemslist beinhalten. Im Duplikat ändern wir dann .groupeditemslist in .zoomedoutGroupeditemslist.

In einer echten App sollte man hier natürlich etwas mehr Hirnschmalz rein stecken, für die Demo App soll es aber reichen, um dieses Endergebnis zu erhalten:

image

In meinem video2brain Video-Training “Windows 8 Apps mit HTML5 und JavaScipt” welches derzeit in Arbeit ist gehe ich auf das ganze übrigens noch einmal genauer ein.

In der entsprechenden Beispiel App war ich übrigens auch ein wenig bunter ;-) Anbei mal zwei Screenshots (oben normal, unten im semantic zoom)

imageimage