Schnellstart: Hinzufügen eines semantischen Zooms (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Hier erfahren Sie, wie Sie mithilfe des SemanticZoom-Steuerelements zwischen zwei Ansichten desselben Inhalts zoomen.

Voraussetzungen

Es wird davon ausgegangen, dass Sie eine einfache Windows Store-App mit JavaScript erstellen können, die Steuerelemente der Windows-Bibliothek für JavaScript verwendet. Anweisungen zu den ersten Schritten mit WinJS-Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.
Sie müssen für die Durchführung dieser Schnellstartanleitung wissen, wie das ListView-Steuerelement verwendet wird. Hilfe zu den ersten Schritten mit dem ListView-Steuerelement finden Sie unter Schnellstart: Hinzufügen von ListView-Steuerelementen.
Damit Sie das SemanticZoom-Steuerelement verwenden können, müssen Sie wissen, wie man ein gruppiertes ListView-Steuerelement erstellt. Weitere Informationen hierzu finden Sie im Thema zum Gruppieren von Elementen in einem ListView-Steuerelement.

Was ist das SemanticZoom-Steuerelement?

Mit dem SemanticZoom-Steuerelement können Benutzer zwischen zwei verschiedenen Ansichten des gleichen Inhalts umschalten. Eine dieser Ansichten ist die Hauptansicht des Inhalts. Die zweite Ansicht ist eine Ansicht des gleichen Inhalts, die so dargestellt wird, dass Benutzer schnell darin navigieren können. Bei der Anzeige eines Adressbuchs kann der Benutzer beispielsweise einen Buchstaben vergrößern und die zu dem betreffenden Buchstaben gehörenden Namen einsehen.

Zum Bereitstellen dieser Zoom-Funktion verwendet das SemanticZoom-Steuerelement zwei andere Steuerelemente: Eines stellt die vergrößerte Ansicht bereit, während das andere die verkleinerte Ansicht liefert.

<div data-win-control="WinJS.UI.SemanticZoom">   
                
    <!-- The control that provides the zoomed-in view goes here. -->

    <!-- The control that provides the zoomed-out view goes here. -->

</div>

Bei diesen Steuerelementen kann es sich um zwei beliebige Steuerelemente handeln, die die IZoomableView-Schnittstelle implementieren. WinJS bietet ein Steuerelement, das die IZoomableView-Schnittstelle implementiert: ListView. In den Beispielen dieser Schnellstartanleitung erfahren Sie, wie Sie das SemanticZoom-Steuerelement mit zwei ListView-Steuerelementen verwenden.

Verwechseln Sie semantisches Zoomen nicht mit optischem Zoomen. Ihnen ist dieselbe Interaktion und dasselbe grundlegende Verhalten gemeinsam (die Anzeige von mehr bzw. weniger Details in Abhängigkeit vom Zoom-Faktor). Der optische Zoom bezieht sich auf die Anpassung der Vergrößerung eines Inhaltsbereichs oder Objekts, beispielsweise einer Fotografie.

Erstellen Ihrer Daten

Für die Verwendung eines SemanticZoom-Steuerelements benötigen Sie eine IListDataSource mit Gruppierungsinformationen. Eine Möglichkeit, eine IListDataSource zu erstellen, besteht darin, eine WinJS.Binding.List zu erstellen. Jede WinJS.Binding.List verfügt über eine dataSource-Eigenschaft, die eine IListDataSource mit Ihren Daten enthält.

Fügen Sie Ihrem Projekt eine neue JavaScript-Datei hinzu, die Ihre Daten enthält. Benennen Sie sie mit "data.js".

Erstellen Sie in der soeben erstellten Datei "data.js" die zugrunde liegende Datenquelle, die die Daten für die ListView-Steuerelemente bereitstellt. In diesem Beispiel wird eine WinJS.Binding.List aus einer Reihe von JSON-Objekten (myData) erstellt:


// Start of data.js
(function () {
    "use strict";



    var myData = [
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Lavish Lemon Ice", text: "Sorbet", picture: "images/60Lemon.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Marvelous Mint", text: "Gelato", picture: "images/60Mint.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Creamy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Succulent Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Very Vanilla", text: "Ice Cream", picture: "images/60Vanilla.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Orangy Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Absolutely Orange", text: "Sorbet", picture: "images/60Orange.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Triple Strawberry", text: "Sorbet", picture: "images/60Strawberry.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Double Banana Blast", text: "Low-fat frozen yogurt", picture: "images/60Banana.png" },
    { title: "Green Mint", text: "Gelato", picture: "images/60Mint.png" }
    ];

    // Create a WinJS.Binding.List from the array. 
    var itemsList = new WinJS.Binding.List(myData);

Hinweis Diese Daten beziehen sich auf mehrere Bilder. Um die Bilder zu erhalten, laden Sie das Beispiel für ListView-Gruppierung und SemanticZoom herunter, und kopieren Sie die Bilder danach aus dem Beispiel in Ihr Projekt. Sie können auch eigene Bilder verwenden.—Achten Sie in diesem Fall darauf, den Wert der picture-Eigenschaft in Ihren Daten zu aktualisieren.

Tipp

Sie müssen nicht immer eine WinJS.Binding.List verwenden. Sie können auch eine StorageDataSource oder eine benutzerdefinierte VirtualizedDataSource verwenden. Weitere Informationen zum Erstellen einer benutzerdefinierten Datenquelle finden Sie unter Erstellen einer benutzerdefinierten Datenquelle.

Erstellen Sie eine Version der Datenquelle, die Gruppierungsinformationen enthält. Wenn Sie eine WinJS.Binding.List verwenden, können Sie die createGrouped-Methode aufrufen, um eine gruppierte Version von List zu erstellen. Die createGrouped-Methode akzeptiert drei Parameter:
- getGroupKey: Eine Funktion, die bei Übergabe eines Elements in der Liste den Schlüssel der Gruppe zurückgibt, zu der dieses Element gehört.
- getGroupData: Eine Funktion, die bei Übergabe eines Elements in der Liste das Datenobjekt zurückgibt, das die Gruppe darstellt, zu der das Element gehört.
- compareGroups: Eine Funktion, mit der zwei Gruppen verglichen werden. Es wird ein Wert kleiner Null zurückgegeben, wenn die erste Gruppe kleiner als die zweite Gruppe ist. Es wird null zurückgegeben, wenn die beiden Gruppe gleich sind, und ein positiver Wert, wenn die erste Gruppe größer als die zweite Gruppe ist.
In diesem Beispiel wird die List.createGrouped-Methode verwendet, um eine gruppierte Version der List zu erstellen. Darin werden die Gruppen durch die ersten Buchstaben der einzelnen Elementüberschriften definiert.
```
    // Sorts the groups.
    function compareGroups(leftKey, rightKey) {
        return leftKey.charCodeAt(0) - rightKey.charCodeAt(0);
    }

    // Returns the group key that an item belongs to.
    function getGroupKey(dataItem) {
        return dataItem.title.toUpperCase().charAt(0);
    }

    // Returns the title for a group.
    function getGroupData(dataItem) {
        return {
            title: dataItem.title.toUpperCase().charAt(0)
        };
    }

    // Create the groups for the ListView from the item data and the grouping functions
    var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData, compareGroups);
```
Ermöglichen Sie den Zugriff auf Ihre Daten für andere Teile Ihres Programms. In diesem Beispiel wird WinJS.Namespace.define verwendet, um den öffentlichen Zugriff auf die Gruppenliste zu ermöglichen.
```
    WinJS.Namespace.define("myData",
        {
            groupedItemsList: groupedItemsList
        }); 


})(); // End of data.js
```

Erstellen von zwei ListView-Steuerelementen

Wie bereits erwähnt, erfordert das SemanticZoom-Steuerelement zwei zusätzliche Steuerelemente, die die IZoomableView-Schnittstelle implementieren: eines für die vergrößerte und eines für die verkleinerte Ansicht.

Fügen Sie im head-Abschnitt der HTML-Seite, die die SemanticZoom enthält, einen Verweis auf die Datendatei hinzu, die Sie im vorherigen Schritt erstellt haben.
```
    
    <script src="/js/data.js"></script>
```

Definieren Sie drei Vorlagen für Ihre ListView-Objekte: eine für die Anzeige der vergrößerten Elementansicht, eine für die Gruppenüberschriften in der vergrößerten Ansicht und eine für die Gruppenüberschriften in der verkleinerten Ansicht.

<!-- Template for the group headers in the zoomed-in view. -->
<div id="headerTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="simpleHeaderItem">
        <h1 data-win-bind="innerText: title"></h1>
    </div>
</div>

<!-- Template for the ListView items in the zoomed-in view. -->
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="mediumListIconTextItem">
        <img class="mediumListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="mediumListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<!-- Template for the zoomed out view of the semantic view. -->
<div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="semanticZoomItem">
        <h1 class="semanticZoomItem-Text" data-win-bind="innerText: title"></h1>
    </div>
</div>

Definieren Sie in Ihrem HTML-Code zwei ListView-Steuerelemente. Das erste Steuerelement stellt die vergrößerte Ansicht bereit und das zweite die verkleinerte.
- Legen Sie die itemDataSource für das vergrößerte ListView-Steuerelement auf myData.groupedItemList.dataSource fest (die IListDataSource mit den anzuzeigenden Elementen). Legen Sie die zugehörige groupDataSource auf myData.groupedItemsList.groups.dataSource fest (die IListDataSource mit den Gruppierungsinformationen).
- Legen Sie beim verkleinerten ListView-Steuerelement die itemDataSource auf myData.groupedItemList.groups.dataSource fest (die IListDataSource mit den Gruppierungsinformationen). Von dort ruft das ListView-Steuerelement die anzuzeigenden Gruppenüberschriften ab.
Dieses Beispiel erstellt zwei ListView-Steuerelemente und konfiguriert sie für die Verwendung der gerade erstellten Vorlagen.
```
        
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>
```

Definieren Sie in Ihrer CSS-Datei die Stile für Ihre Vorlagen und ListView-Steuerelemente. Wenn Sie diesen Schritt nicht ausführen, wird Ihre App zwar ausgeführt, das Erscheinungsbild ist jedoch weniger ansprechend.

/* Template for headers in the zoomed-in ListView */
.simpleHeaderItem
{
    width: 50px;
    height: 50px;
    padding: 8px;
}   

/* Template for items in the zoomed-in ListView */  
.mediumListIconTextItem
{
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

    .mediumListIconTextItem img.mediumListIconTextItem-Image 
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        -ms-grid-column: 1;
    }

    .mediumListIconTextItem .mediumListIconTextItem-Detail
    {
        margin: 5px;
        -ms-grid-column: 2;
    }

/* Template for items in the zoomed-out ListView */
.semanticZoomItem
{
    width: 130px;
    height: 130px;
    background-color: rgba(38, 160, 218, 1.0);
}   

    .semanticZoomItem .semanticZoomItem-Text
    {
        padding: 10px;
        line-height: 150px;
        white-space: nowrap;
        color: white;
    }

/* CSS for the zoomed-in ListView */
#zoomedInListView
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

#semanticZoomDiv 
{
    width: 600px;
    height: 300px;
    border: solid 2px rgba(0, 0, 0, 0.13);
}

Führen Sie die App aus. Es werden zwei ListView-Steuerelemente angezeigt:

Die erste ListView stellt die vergrößerte Ansicht und die zweite die verkleinerte Ansicht bereit. Für beide wird ein horizontales Layout verwendet. Es wird empfohlen, für die vergrößerte und verkleinerte Ansicht von Daten immer dasselbe Layout zu verwenden.

Hinzufügen des SemanticZoom-Steuerelements

Erstellen Sie das SemanticZoom-Steuerelement in Ihrem Markup, und verschieben Sie Ihre ListView-Steuerelement dort hinein.

<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">   
            
    <!-- The zoomed-in view. -->    
    <div id="zoomedInListView"
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource: myData.groupedItemsList.dataSource, itemTemplate: select('#mediumListIconTextTemplate'), groupHeaderTemplate: select('#headerTemplate'), groupDataSource: myData.groupedItemsList.groups.dataSource, selectionMode: 'none', tapBehavior: 'none', swipeBehavior: 'none' }"
    ></div>

    <!--- The zoomed-out view. -->
    <div id="zoomedOutListView"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{ itemDataSource: myData.groupedItemsList.groups.dataSource, itemTemplate: select('#semanticZoomTemplate'), selectionMode: 'none', tapBehavior: 'invoke', swipeBehavior: 'none' }"
    ></div>

</div>

Wenn Sie Ihre App ausführen, wird ein einzelnes ListView-Steuerelement angezeigt, für das Sie zwischen den beiden von Ihnen definierten Ansichten einen Zoom durchführen können.

Die verkleinerten und vergrößerten Ansichten des SemanticZoom-Steuerelements

Hinweis Legen Sie keinen Rahmen für die untergeordneten Steuerelemente des SemanticZoom-Steuerelements fest. Wenn Sie sowohl für das Steuerelement SemanticZoom als auch für dessen untergeordnete Steuerelemente Rahmen festlegen, sind sowohl der Rahmen für SemanticZoom als auch der Rahmen des sichtbaren untergeordneten Steuerelements sichtbar. Beim Vergrößern/Verkleinern werden die Rahmen der untergeordneten Steuerelemente zusammen mit dem Inhalt skaliert, was das Erscheinungsbild stören würde. Legen Sie nur für das SemanticZoom-Steuerelement einen Rahmen fest.

Verwenden von SemanticZoom

So zoomen Sie zwischen den beiden Ansichten:

Eingabemechanismus	Herauszoomen	Heranzoomen
Berühren	Auseinanderdrücken	Zusammendrücken, Tippen
Tastatur	STRG+MINUS, EINGABETASTE	STRG+PLUS, EINGABETASTE
Maus	STRG+Mausrad rückwärts drehen	STRG+Mausrad vorwärts drehen

Verwenden von SemanticZoom mit einem benutzerdefinierten Steuerelement

Wenn Sie SemanticZoom mit einem anderen Steuerelement als ListView verwenden möchten, müssen Sie die IZoomableView-Schnittstelle implementieren. Ein Beispiel für die Vorgehensweise finden Sie im Beispiel für SemanticZoom bei benutzerdefinierten Steuerelementen.

Gewährleisten der Reaktionsfähigkeit von SemanticZoom

Der Benutzer muss schnell und reibungslos zwischen der vergrößerten und verkleinerten Ansicht eines SemanticZoom-Elements wechseln können. Das bedeutet, dass keine Situation eintreten darf, in der die App wartet, bis die untergeordneten Steuerelemente des SemanticZoom-Steuerelements ihre Daten geladen haben. Verwenden Sie bei Verwendung der ListView (oder einer Version der FlipView, die Sie zur Implementierung von IZoomableView angepasst haben) mit dem SemanticZoom eine Vorlagenfunktion, die Platzhalter erstellt, falls ein Element möglicherweise noch nicht verfügbar ist, wenn das Steuerelement sichtbar wird. Weitere Informationen zum Verwenden von Platzhaltern in Elementvorlagen finden Sie unter FlipView.itemTemplate. Falls Sie ein benutzerdefiniertes Steuerelement mit SemanticZoom verwenden, implementieren Sie einen Statuskreis, und verwenden Sie Platzhalter für nicht verfügbare Elemente.

Beispiele

Zusammenfassung und nächste Schritte

Sie haben erfahren, wie Sie ein SemanticZoom erstellen, das mithilfe von zwei ListView-Steuerelementen eine vergrößerte und eine verkleinerte Ansicht erstellt.

Wann und wie Sie SemanticZoom verwenden, erfahren Sie unter Richtlinien und Prüfliste für SemanticZoom-Steuerelemente.

Freigeben über