Schnellstart: Hinzufügen eines FlipView-Steuerelements (HTML)

  • Artikel

[ 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 ]

Viele Apps zeigen Elemente in einer Liste an, durch die der Benutzer blättern kann. Die Daten in diesen Listen können aus einer Datenbank, dem Web oder eine JSON-Datenquelle stammen. WinJS stellt nur zu diesem Zweck das FlipView-Steuerelement bereit.

FlipView-Steuerelement

Voraussetzungen

Was ist ein FlipView-Steuerelement/-Objekt?

FlipView ist ein WinJS-Steuerelement, mit dem Sie elementweise durch eine Auflistung blättern können. Es eignet sich gut zum Anzeigen einer Bildergalerie.

Das FlipView-Objekt ruft die entsprechenden Daten aus einer IListDataSource ab. WinJS stellt verschiedene Arten von IListDataSource-Objekten zur Verfügung:

  • Sie können ein List-Objekt verwenden, um aus einem Array von Daten ein IListDataSource-Objekt zu erstellen.
  • Sie können ein StorageDataSource-Objekt verwenden, um auf Informationen zu Dateien und Verzeichnissen zuzugreifen.

Außerdem können Sie eine eigene benutzerdefinierte Datenquelle erstellen, die Verbindungen mit einem anderen Datenanbietertyp herstellt, beispielsweise einem Webdienst oder einer Datenbank. Anweisungen finden Sie unter So wird's gemacht: Erstellen einer benutzerdefinierten Datenquelle.

Erstellen eines einfachen FlipView-Objekts

  1. Fügen Sie der HTML-Datei, sofern noch nicht vorhanden, Verweise auf WinJS hinzu.

    
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    In diesem Beispiel wird der HTML-Code für die Datei "default.html" gezeigt, die generiert wird, wenn Sie in Microsoft Visual Studio ein neues Projekt vom Typ Leere Anwendung erstellen. Beachten Sie, dass hierin bereits Verweise auf WinJS enthalten sind.

    
<!-- default.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <p>Content goes here</p>
</body>
</html>

    In diesem Beispiel wird anstelle des dunklen Stylesheets das helle verwendet. Wenn Ihre App wie in diesen Beispielen aussehen soll, ändern Sie also diesen Verweis

        <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">

    in:

         <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">

  2. Erstellen Sie in der HTML-Datei ein div-Element, und legen Sie die zugehörige data-win-control-Eigenschaft auf "WinJS.UI.FlipView" fest.

    <div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
></div>

  3. Rufen Sie in dem zur HTML-Datei gehörenden JavaScript-Code die WinJS.UI.processAll-Funktion auf, wenn der HTML-Code geladen wird.

    WinJS.UI.processAll();

    Im nächsten Beispiel wird die Datei "default.js" gezeigt, die zu der Datei "default.html" gehört, die beim Erstellen eines neuen Projekts vom Typ Leere Anwendung für Sie erstellt wird.

    
// default.js
(function () {
    "use strict";

    var app = WinJS.Application;

    // This function responds to all application activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // TODO: Initialize your application here.
            WinJS.UI.processAll();
        }
    };

    app.start();
})();

    Dieses Beispiel funktioniert, wenn Sie das FlipView-Objekt der Startseite ("default.html") hinzufügen. Wenn Sie das FlipView-Objekt einem Seitensteuerelement hinzufügen, müssen Sie WinJS.UI.processAll nicht aufrufen, da das Seitensteuerelement dies für Sie übernimmt. Wenn Sie das FlipView-Objekt benutzerdefiniertem HTML-Code hinzufügen, können Sie WinJS.UI.processAll mit dem DOMContentLoaded-Ereignis aufrufen. Weitere Informationen zur Aktivierung der Steuerelemente finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

  4. Wichtig: Legen Sie Höhe und Breite für das FlipView-Steuerelement fest. Damit ein FlipView-Objekt gerendert wird, müssen Sie die Höhe mit einem absoluten Wert angeben. Fügen Sie dieses CSS dem CSS-Stylesheet für die HTML-Seite mit dem FlipView-Steuerelement hinzu:

    #basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

Mit diesem Code wird ein leeres FlipView-Objekt erstellt. Beim Ausführen der App wird ein leeres Steuerelement angezeigt. Im nächsten Abschnitt erstellen Sie Daten, die vom FlipView-Objekt angezeigt werden sollen.

Definieren der Daten

Sie können sich die Verwaltung des Codes für die Erstellung der Datenquelle erleichtern, indem Sie den Code in einer separaten JavaScript-Datei speichern. In diesem Abschnitt erfahren Sie, wie Sie eine JavaScript-Datei für die Daten erstellen, ein List-Objekt erstellen und mithilfe der WinJS.Namespace.define-Funktion die Daten für die restliche App zugänglich machen.

  1. Verwenden Sie Visual Studio, um dem Projekt eine Datendatei hinzuzufügen. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner js des Projekts, und wählen Sie Hinzufügen > Neues Element aus. Das Dialogfeld Neues Element hinzufügen wird angezeigt.

  2. Wählen Sie JavaScript-Datei aus. Geben Sie als Namen "dataExample.js" ein. Klicken Sie auf Hinzufügen, um die Datei zu erstellen. In Visual Studio wird eine leere JavaScript-Datei mit dem Namen "dataExample.js" erstellt.

  3. Öffnen Sie die Datei "dataExample.js". Erstellen Sie eine anonyme Funktion, und aktivieren Sie den Strict-Modus.

    Wie unter Codieren einfacher Apps beschrieben empfiehlt es sich, den JavaScript-Code zu kapseln, indem Sie ihn mit einer anonymen Funktion umschließen, und den Strict-Modus zu verwenden.

    (function () {
    "use strict"; 





})();

  4. Erstellen Sie ein Array mit Daten. Dieses Beispiel erstellt ein Array von Objekten. Jedes Objekt besitzt drei Eigenschaften für Typ, Titel und Bild.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

})();

    Hinweis  Sie können in Ihrem Code für die Bilder Dateien auf Ihrem lokalen Computer verwenden oder die Bilder mit dem HTML-FlipView-Steuerelementbeispiel herunterladen (es handelt sich dabei um ein anderes Beispiel, für das jedoch dieselben Bilder verwendet werden). Sie können das Beispiel auch ohne Bilder —ausführen.

     

  5. Verwenden Sie das Array, um ein List-Objekt zu erstellen.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    var dataList = new WinJS.Binding.List(dataArray); 

})();

  6. Machen Sie die List verfügbar, indem Sie einen Namespace deklarieren und List als öffentlichen Member hinzufügen.

    Da der soeben geschriebene Code in eine anonyme Funktion eingeschlossen ist, ist kein Teil dieses Codes öffentlich zugänglich. (Dies ist einer der Gründe für die Verwendung der anonymen Funktion: Private Daten sollen privat bleiben.) Damit das FlipView-Steuerelement auf die List zugreifen kann, müssen Sie sie öffentlich zugänglich machen. Sie können dies u. a. erreichen, indem Sie die WinJS.Namespace.define-Funktion verwenden, um einen Namespace zu erstellen und die List als einen seiner Member hinzufügen.

    Die WinJS.Namespace.define-Funktion akzeptiert zwei Parameter: den Namen des zu erstellenden Namespace und ein Objekt, das mindestens ein Eigenschaft/Wert-Paar enthält. Jede Eigenschaft ist der öffentliche Name des Members, und jeder Wert ist eine zugrunde liegende Variable, Eigenschaft oder Funktion in Ihrem privaten Code, die Sie verfügbar machen möchten.

    In diesem Beispiel wird der DataExample-Namespace erstellt, der einen öffentlichen Member mit dem Namen itemList verfügbar macht, der die List zurückgibt.

    (function () {
    "use strict";

    var dataArray = [
    { type: "item", title: "Cliff", picture: "images/Cliff.jpg" },
    { type: "item", title: "Grapes", picture: "images/Grapes.jpg" },
    { type: "item", title: "Rainier", picture: "images/Rainier.jpg" },
    { type: "item", title: "Sunset", picture: "images/Sunset.jpg" },
    { type: "item", title: "Valley", picture: "images/Valley.jpg" }
    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly
    // accessible. 
    var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

})();

Sie haben jetzt eine Datenquelle erstellt, worauf das FlipView-Objekt zugreifen kann. Im nächsten Schritt verknüpfen Sie die Daten mit dem FlipView-Objekt.

Verknüpfen von Daten mit einem FlipView-Objekt

  1. Fügen Sie im head-Abschnitt der HTML-Datei, in der sich das FlipView-Objekt befindet, einen Verweis auf die gerade erstellte Datendatei ("dataExample.js") hinzu:

    <head>
    <meta charset="utf-8">
    <title>FlipViewExample</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- FlipViewExample references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>

    <!-- Your data file. -->
    <script src="/js/dataExample.js"></script>

</head>

  2. Verwenden Sie die im letzten Abschnitt erstellten Daten für das Festlegen der itemDataSource-Eigenschaft des FlipView-Steuerelements.

    Die itemDataSource-Eigenschaft akzeptiert ein IListDataSource-Objekt. Das List-Objekt ist keine IListDataSource, verfügt aber über eine dataSource-Eigenschaft, die eine IListDataSource-Version von sich selbst zurückgibt.

    Zum Verbinden mit Ihren Daten legen Sie die itemDataSource-Eigenschaft des FlipView-Steuerelements auf DataExample.itemDataList.dataSource fest:

    
<div id="basicFlipView"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>

Führen Sie die App aus. Das FlipView-Objekt zeigt die Eigenschaften und Werte in der Datenquelle an:

Anzeigen des Datenquelleninhalts ohne Vorlage

Das ist noch nicht ganz das Aussehen, das wir uns vorgestellt hatten. Es sollen nur die Werte des Titelfelds angezeigt werden, und es sollen die Bilder als solche sichtbar sein, nicht die Bildpfade. Um das gewünschte Rendering zu erzielen, muss ein Template-Objekt definiert werden. Wie das geht, sehen Sie im nächsten Schritt.

Definieren einer Elementvorlage

Das FlipView-Objekt hat jetzt zwar die benötigten Daten, aber es weiß nicht, wie es sie anzeigen soll. Dazu benötigen Sie eine Elementvorlage. Es gibt zwei Möglichkeiten, eine Vorlage zu erstellen: Sie können mit Markup ein WinJS.Binding.Template-Objekt definieren oder eine Vorlagenfunktion erstellen. In diesem Beispiel wird eine Vorlage in Markup erstellt. (Informationen zum Erstellen von Vorlagenfunktionen finden Sie im Artikel zu der itemTemplate-Eigenschaft.)

Ein WinJS.Binding.Template-Objekt ist leicht zu erstellen: Sie definieren das Markup, das Sie zum Anzeigen der einzelnen Listenelemente verwenden möchten, und geben dann an, wo die einzelnen Datenfelder angezeigt werden.

  1. Erstellen Sie in Ihrem HTML-Code ein WinJS.Binding.Template-Steuerelement, und weisen Sie ihm eine ID zu. In diesem Beispiel wird die ID "ItemTemplate" verwendet.

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">

</div>

    Hinweis  Sie müssen die Vorlage vor der Verwendung definieren. Fügen Sie daher den HTML-Code für die Vorlage vor dem HTML-Code für das FlipView-Objekt hinzu.

     

  2. WinJS.Binding.Template muss ein einziges Stammelement haben. Erstellen Sie ein DIV-Element, das als übergeordnetes Element für den Inhalt der Vorlage dienen soll.

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>

    </div>
</div>

  3. Erstellen Sie das Markup, das vom FlipView-Objekt für die einzelnen darin enthaltenen Datenelemente erzeugt wird. Die Daten, die Sie im vorhergehenden Abschnitt erstellt haben, enthalten einen Bildspeicherort, einen Titel und Text. Erstellen Sie deshalb die folgenden Elemente:

    • img-Element zum Anzeigen des Bildfelds
    • h2-Element zum Anzeigen des Titelfelds

    (In diesem Beispiel wurde aus Formatierungsgründen außerdem ein div-Element hinzugefügt.)

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#"  />
        <div>
            <h2></h2>
        </div>
    </div>
</div>

  4. Legen Sie das data-win-bind-Attribut für jedes Element fest, das Daten anzeigt. Das data-win-bind-Attribut verwendet die folgende Syntax:

    data-win-bind="propertyName: dataFieldName"

     

    Wenn Sie beispielsweise die src-Eigenschaft eines img an das "picture"-Feld binden möchten, verwenden Sie die folgende Syntax:

    <img data-win-bind="src : picture" />

    Wenn Sie mehrere Eigenschaften festlegen möchten, trennen Sie diese durch ein Semikolon:

    data-win-bind="property1Name: dataField1Name; property2Name: dataField2Name"

     

    In diesem Beispiel werden die Elemente der Vorlage an die entsprechenden Datenfelder gebunden.

    
<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

  5. Um die Elementvorlage zu verwenden, legen Sie die itemTemplate-Eigenschaft des FlipView-Steuerelements auf die ID Ihrer Elementvorlage fest (in diesem Beispiel "ItemTemplate").

    <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div>
        <img src="#" data-win-bind="src: picture; alt: title" />
        <div>
            <h2 data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>    

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

    Wenn Sie nun die App ausführen, werden die gebundenen Daten in der Liste angezeigt.

    FlipView mit Datenbindung

    Achten Sie auf ein Formatierungsproblem in diesem Beispiel: Der Titeltext ist nicht zu sehen. Im nächsten Abschnitt erfahren Sie, wie Sie dieses Problem durch Formatieren der Vorlage beheben.

Stilelemente

Elementvorlagen können Sie mithilfe von CSS formatieren. Im nächsten Beispiel fügen Sie der Vorlage einige CSS-Klassen hinzu, die Sie im Abschnitt Definieren einer Elementvorlage definiert haben.

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
    <div class="overlaidItemTemplate">
        <img class="image" src="#" data-win-bind="src: picture; alt: title" />
        <div class="overlay">
            <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate }"
></div>

Fügen Sie dem CSS-Stylesheet für die HTML-Datei die folgenden Formate für die Vorlage hinzu:

#basicFlipView
{
    width: 480px;
    height: 270px;
    border: solid 1px black;    
}

/**********************************************/
/*                                            */
/* Styles used in the item template           */
/*                                            */
/**********************************************/
.overlaidItemTemplate
{
    display: -ms-grid;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: 1fr;
    width: 480px;
    height: 270px;
}

    .overlaidItemTemplate img
    {
        width: 100%;
        height: 100%;
    }
    
    .overlaidItemTemplate .overlay
    {
        position: relative;
        -ms-grid-row-align: end;
        background-color: rgba(0,0,0,0.65);
        height: 40px;
        padding: 20px 15px;
        overflow: hidden;
    }

        .overlaidItemTemplate .overlay .ItemTitle
        {
            color: rgba(255, 255, 255, 0.8);
        }

So sieht das FlipView-Objekt jetzt aus:

FlipView mit FormatierungHinweis  

Wenn Sie die Schriftfamilie für FlipView-Navigationsschaltflächen ändern, werden diese nicht mehr mit der richtigen Glyphe angezeigt.

 

Ändern der FlipView-Ausrichtung

Standardmäßig ist das FlipView-Objekt horizontal ausgerichtet. Sie können das FlipView-Steuerelement auch vertikal anzeigen, indem Sie die orientation-Eigenschaft auf "vertical" festlegen.

<div id="basicFlipView" 
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource, itemTemplate : ItemTemplate, orientation: 'vertical' }"
></div>

FlipView-Steuerelement mit vertikaler Ausrichtung

Hinzufügen interaktiver Elemente zu einer Elementvorlage

Die Elementvorlage kann die meisten anderen Steuerelemente enthalten, aber kein ListView-Steuerelement oder ein anderes FlipView-Steuerelement.

Wenn der Benutzer mit einem Element interagiert, wird diese Interaktion normalerweise vom FlipView-Steuerelement erfasst, um zu bestimmen, ob der Benutzer ein Element ausgewählt oder aufgerufen hat oder mittels Verschiebung durch Elemente blättert. Damit ein interaktives Element wie ein Steuerelement Eingaben empfangen kann, müssen Sie die win-interactive-Klasse an das interaktive Element oder eines seiner übergeordneten Elemente anfügen. Dieses Element und seine untergeordneten Elemente empfangen die Interaktion und lösen keine Ereignisse mehr für das FlipView-Steuerelement aus.

Wenn Sie die win-interactive-Klasse an ein interaktives Element in einer Elementvorlage anfügen, darf es nicht das gesamte Element ausfüllen, da es andernfalls nicht vom Benutzer ausgewählt oder aufgerufen werden kann.

Um Ihrer Elementvorlage ein interaktives Element hinzuzufügen, müssen Sie eine Vorlagenfunktion anstelle einer WinJS.Binding.Template verwenden. Ein entsprechendes Beispiel finden Sie im HTML-FlipView-Steuerelementbeispiel. Weitere Informationen zu Vorlagenfunktionen finden Sie in den Beispielen in der FlipView.itemTemplate.

Erstellen eines Kontextsteuerelements

Das FlipView-Objekt stellt Methoden und Ereignisse zum Erstellen benutzerdefinierter Steuerelemente bereit, die die Benutzer über die Position des aktuellen Elements und über alternative Verfahren zum Navigieren durch die Sammlung informieren. Die folgende Abbildung zeigt eine Reihe formatierter Optionsfelder, die über die Ereignisse pageselected und pagevisibilitychanged mit dem FlipView-Objekt synchronisiert werden.

FlipView-Objekt mit Kontextsteuerelement

Ein entsprechendes Codebeispiel finden Sie im HTML-FlipView-Steuerelementbeispiel.

Verwandte Themen

FlipView Reference

HTML-FlipView-Steuerelementbeispiel