Steuerelemente (HTML mit JavaScript)

Fügen Sie mit den neuen HTML- und JavaScript-Steuerelementen in Windows 8.1 Ihrer Windows Store-App neue Features hinzu, etwa benutzerdefinierte Befehle und eine erweiterte Navigationsunterstützung. Außerdem können vorhandene Steuerelemente dank der vorgenommenen Aktualisierungen einfacher eingesetzt und weitere Features wie Drag & Drop hinzugefügt werden. Die neuen Steuerelemente und Steuerelementaktualisierungen machen die Erstellung einer App mit zahlreichen Features so einfach wie nie.

Neue Steuerelemente und Steuerelementaktualisierungen

In Windows 8.1 und der Windows-Bibliothek für JavaScript 2.0 werden die folgenden neuen Steuerelemente und Features eingeführt:

Windows 8.1 und die Windows-Bibliothek für JavaScript 2.0 enthalten die folgenden Aktualisierungen für vorhandene Steuerelemente:

Verwenden der Windows-Bibliothek für JavaScript 2.0

Neue Microsoft Visual Studio 2013-Projekte enthalten die Windows-Bibliothek für JavaScript 2.0 automatisch. Wenn Sie die Windows-Bibliothek für JavaScript 2.0 in einem mit Windows 8 erstellten Projekt verwenden möchten, ersetzen Sie Ihre vorhandenen Verweise auf die Windows-Bibliothek für JavaScript 1:


    <!-- WinJS style sheets (include one) -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

    <!-- WinJS code -->
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

...durch Verweise auf die Windows-Bibliothek für JavaScript 2.0:


    <!-- WinJS style sheets (include one) -->
    <link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-dark.css" />
    <link rel="stylesheet" href="//Microsoft.WinJS.2.0/css/ui-light.css" />

    <!-- WinJS code -->
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

Sie können Ihr Projekt automatisch von Visual Studio 2013 aktualisieren lassen oder die folgenden zusätzlichen Aktualisierungen manuell vornehmen:

  • Fügen Sie Ihrem Projekt einen Verweis auf die Windows 8.1-Bibliothek für JavaScript hinzu.

  • Aktualisieren Sie in Ihrem App-Manifest die Werte OSMinVersion und OSMaxVersionTested auf 6.3.0:

    
      <Prerequisites>
        <OSMinVersion>6.3.0</OSMinVersion>
        <OSMaxVersionTested>6.3.0</OSMaxVersionTested>
      </Prerequisites>
    
    

AppBarCommand

[Laden Sie sich gleich jetzt das HTML-Beispiel für ein AppBar-Steuerelement herunter.]

In Windows 8.1 können Sie benutzerdefinierte App-Leistenbefehle in Windows Store-Apps mit JavaScript mithilfe eines neuen AppBarCommand-Typs namens content erstellen.

Dieses Feature vereinfacht die Erstellung einer App-Leiste mit benutzerdefiniertem Inhalt, da es Ihnen die Möglichkeit bietet, benutzerdefinierte Inhalte im commands-Layout zu platzieren. Sie können die komplette integrierte Unterstützung für App-Leistenbefehle mit benutzerdefiniertem Inhalt nutzen – einschließlich Tastaturnavigation, Befehlsanpassung und Animationen für dynamisch ein- und ausgeblendete Befehle.

Bei der Verwendung im commands-Layout unterstützt der AppBarCommand vom Typ "content" viele der Features von standardmäßigen App-Leistenbefehlen.

  • Die Tastaturnavigation (mit der TAB-Taste, den Pfeiltasten, der Pos1-Taste und der Ende-Taste) wird zwischen standardmäßigen App-Leistenbefehlen und dem benutzerdefinierten AppBarCommand ermöglicht.

  • Die Skalierung der App-Leiste funktioniert ordnungsgemäß mit dem neuen Inhaltstyp AppBarCommand. Beschriftungen werden dynamisch verworfen, wenn die App verkleinert wird.

BackButton

Windows 8.1 und die Windows-Bibliothek für JavaScript 2.0 erweitern die Navigationsunterstützung der Plattform in Form von Steuerelementen für Ihre Apps. Eines dieser Steuerelemente ist BackButton.

Mit dem BackButton-Steuerelement können Sie auf einfache Weise eine Navigation zurück zur App hinzufügen. Ein BackButton-Steuerelement lässt sich ganz leicht erstellen.


<button data-win-control="WinJS.UI.BackButton" ></button>

Das neue BackButton-Steuerelement

Das BackButton-Steuerelement überprüft automatisch den Navigationsstapel, um festzustellen, ob der Benutzer rückwärts navigieren kann. Ist keine UI vorhanden, zu der rückwärts navigiert werden kann, deaktiviert sich die Schaltfläche selbst. Wenn der Benutzer auf die Schaltfläche klickt oder Tastenkombinationen verwendet (z. B. ALT+NACH-LINKS-Taste oder die BrowserBack-Tasten), wird automatisch die WinJS.Navigation.back-Funktion aufgerufen, um rückwärts zu navigieren. Sie müssen keinen Code schreiben.

Hub

[Sichern Sie sich gleich jetzt das Beispiel für ein HTML-Hub-Steuerelement.]

Mit Blick auf eine einheitlichere Navigation bieten Windows 8.1 und die Windows-Bibliothek für JavaScript 2.0 das Hub-Steuerelement.

Viele Windows Store-Apps verwenden ein Hubnavigationsmuster, d. h. ein hierarchisches Navigationssystem. Dieses Muster eignet sich insbesondere für Apps mit großen Inhaltssammlungen oder vielen unterschiedlichen Inhaltsabschnitten, die vom Benutzer durchsucht werden können.

Der Kern des Hubdesigns ist die Unterteilung der Inhalte in verschiedene Bereiche und Detailebenen. Hubseiten sind der Einstiegspunkt des Benutzers in die App. Hier werden Inhalte in einer horizontal oder vertikal verschiebbaren Ansicht dargestellt, die Benutzern einen schnellen Überblick über Neuigkeiten und verfügbare Inhalte bietet. Der Hub besteht aus verschiedenen Inhaltskategorien, die den einzelnen Abschnittsseiten der App zugeordnet sind. Jeder Abschnitt sollte einen Inhalt oder eine Funktion haben. Der Hub sollte visuell vielfältig sein, die Benutzer fesseln und in die verschiedenen Teile der App ziehen.

Hubseite

 

Bei Windows 8.1 ist das Erstellen einer Hubseite dank des Hub-Steuerelements ganz einfach. Um schnell mit dem Erstellen einer App mit einer Hub-Seite loslegen zu können, verwenden Sie die Vorlage Hub-App in Visual Studio 2013.

Erstellen eines Hubs

Um einen Hub zu erstellen, fügen Sie ein Hub-Steuerelement und ein HubSection-Objekt für die einzelnen im Hub enthaltenen Abschnitte ein. Jeder Abschnitt des HubSection-Objekts kann beliebige Inhalte und sogar andere Steuerelemente der Windows-Bibliothek für JavaScript enthalten. Zum Angeben der Abschnittsüberschrift verwenden Sie die header-Eigenschaft. Abschnittsüberschriften können statisch oder interaktiv sein. Interaktive Überschriften weisen ein Chevron auf, das ausgeblendet sein kann, und lösen im Fall einer Benutzerinteraktion Ereignisse aus.

In diesem Beispiel wird ein Hub mit drei Abschnitten definiert.


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>hubPage</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>

    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/hub/hub.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/hub/hub.js"></script>
</head>
<body>
    <div class="hubpage fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Hub example</span>
            </h1>
        </header>

        <section class="hub" aria-label="Main content" role="main" data-win-control="WinJS.UI.Hub">
            <!-- Customize the Hub control by modifying the HubSection controls here. -->


            <div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section1'} }">
                <img src="/images/gray.png" width="420" height="280" />
                <div class="subtext win-type-x-large secondary-text" data-win-res="{ textContent: 'Section1Subtext' }"></div>
                <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
                <div class="win-type-small secondary-text">
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                </div>
            </div>

            <div class="section2" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section2'} }"
                data-win-options="{ onheaderinvoked: HubPage.section2HeaderNavigate }">
                <div class="itemTemplate" data-win-control="WinJS.Binding.Template">
                    <img src="#" data-win-bind="src: backgroundImage; alt: title" />
                    <div class="item-text">
                        <div class="win-type-medium" data-win-bind="textContent: title"></div>
                        <div class="win-type-xx-small secondary-text" data-win-bind="textContent: subtitle"></div>
                        <div class="win-type-small secondary-text" data-win-bind="textContent: description"></div>
                    </div>
                </div>
                <div class="itemslist" data-win-control="WinJS.UI.ListView" data-win-options="{
                        layout: {type: WinJS.UI.ListLayout2},
                        selectionMode: 'none',
                        itemTemplate: select('.section2 .itemTemplate'),  
                        itemDataSource: HubPage.section2DataSource,
                        oniteminvoked: HubPage.section2ItemNavigate
                    }">
                </div>
            </div>

            <div class="section3" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section3'} }">
                <div class="top-image-row">
                    <img src="/images/gray.png" />
                </div>
                <div class="sub-image-row">
                    <img src="/images/gray.png" />
                    <img src="/images/gray.png" />
                    <img src="/images/gray.png" />
                </div>
                <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
                <div class="win-type-small secondary-text">
                    <span data-win-res="{ textContent: 'Section3Description' }"></span>
                    <span data-win-res="{ textContent: 'Section3Description' }"></span>
                </div>
            </div>


        </section>
    </div>
</body>
</html>

Mit diesem Code wird folgende Seite erstellt.

Hubseite

 

Wenn Sie auf die zweite Überschrift klicken, navigiert die App zu einer Abschnittsseite.

Abschnittsseite

 

Dies ist der Code, der die Navigation ausführt:


(function () {
    "use strict";

    var nav = WinJS.Navigation;
    var session = WinJS.Application.sessionState;
    var util = WinJS.Utilities;

    // Get the groups used by the data-bound sections of the hub.
    var section2Group = Data.resolveGroupReference("group1");
    var section5Group = Data.resolveGroupReference("group6");

    WinJS.UI.Pages.define("/pages/hub/hub.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var hub = element.querySelector(".hub").winControl;
            hub.onloadingstatechanged = function (args) {
                if (args.srcElement === hub.element && args.detail.loadingState === "complete") {
                    this._hubReady(hub);
                    hub.onloadingstatechanged = null;
                }
            }.bind(this);

            hub.onheaderinvoked = function (args) {
                args.detail.section.onheaderinvoked(args);
            };

            // TODO: Initialize the page here.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
            session.hubScroll = document.querySelector(".hub").winControl.scrollPosition;
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in viewState.
        },

        _hubReady: function (hub) {
            /// <param name="hub" type="WinJS.UI.Hub" />

            WinJS.Resources.processAll();
            if (typeof session.hubScroll === "number") {
                hub.scrollPosition = session.hubScroll;
            }

            // TODO: Initialize the hub sections here.
        },
    });

    function createHeaderNavigator(group) {
        return util.markSupportedForProcessing(function (args) {
            nav.navigate("/pages/section/section.html", { title: this.header, groupKey: group.key });
        });
    }

    function createItemNavigator(group) {
        var items = Data.getItemsFromGroup(group);
        return util.markSupportedForProcessing(function (args) {
            var item = Data.getItemReference(items.getAt(args.detail.itemIndex));
            nav.navigate("/pages/item/item.html", { item: item });
        });
    }

    function getItemsDataSourceFromGroup(group) {
        return Data.getItemsFromGroup(group).dataSource;
    }

    WinJS.Namespace.define("HubPage", {
        section2DataSource: getItemsDataSourceFromGroup(section2Group),
        section2HeaderNavigate: createHeaderNavigator(section2Group),
        section2ItemNavigate: createItemNavigator(section2Group),
        section5DataSource: getItemsDataSourceFromGroup(section5Group),
        section5ItemNavigate: createItemNavigator(section5Group)
    });
})();

Sie können sogar auch das Hub-Steuerelement mit dem SemanticZoom-Steuerelement verwenden. Weitere Beispiele für diesen und andere Zwecke mehr finden Sie unter Beispiel für ein HTML-Hub-Steuerelement.

ItemContainer

[Sichern Sie sich gleich jetzt das HTML-ItemContainer-Beispiel.]

Mit dem neuen ItemContainer-Steuerelement können Sie ganz einfach interaktive Elemente für Streifbewegungen, Drag & Drop- und Hoveringfunktionen erstellen. Platzieren Sie Ihren Inhalt einfach im ItemContainer. Der ItemContainer kann standardmäßige HTML-Elemente und sogar andere WinJS-Steuerelemente enthalten.

Der ItemContainer ist flexibel und eignet sich daher für zahlreiche Einsatzgebiete, z. B. zum Erstellen von umfangreichen Gruppen von Kontrollkästchen, Navigationsschaltflächen sowie für Warenkorbdarstellungen.

ItemContainer-Objekte in einer Navigationsleiste

 

Verwenden Sie einen ItemContainer, wenn Sie Elemente anzeigen möchten, aber nicht alle Features des ListView-Steuerelements benötigen.

Verwenden des ItemContainer-Steuerelements

In diesem Beispiel werden zwei ItemContainer-Objekte erstellt und die entsprechende tapBehavior-Eigenschaft wird auf toggleSelect eingestellt, sodass die Objekte ausgewählt werden können.


<div id="item1"
    data-win-control="WinJS.UI.ItemContainer"
    data-win-options="{tapBehavior: 'toggleSelect'}"
    style="width: 300px;">
    <div style="margin: 10px; padding: 10px; background-color: lightgray">
        <div class="win-type-x-large"
            style="margin-bottom: 5px;">
            Banana
        </div>
        <img src="/images/60banana.png">
        <div>Frozen yogurt</div>
    </div>
</div>
<div id="item2"
    data-win-control="WinJS.UI.ItemContainer"
    data-win-options="{tapBehavior: 'toggleSelect'}"
    style="width: 300px;">
    <div style="margin: 10px; padding: 10px; background-color: lightgray">
        <div class="win-type-x-large"
            style="margin-bottom: 5px;">
            Strawberry
        </div>
        <img src="/images/60Strawberry.png">
        <div>Ice cream</div>
    </div>
</div>

Zwei ItemContainer-Objekte

 

Sie können auch einen ItemContainer mit einem Repeater-Steuerelement verwenden, um List-Elemente zu generieren. Platzieren Sie hierfür den ItemContainer einfach in Ihrem Template-Steuerelement.


<div id="itemTemplate" data-win-control="WinJS.Binding.Template">
    <div  
        data-win-control="WinJS.UI.ItemContainer" 
        data-win-options="{tapBehavior: WinJS.UI.TapBehavior.toggleSelect}"
        style="width: 300px;">
            <div 
                 style=" margin: 10px; padding: 10px; background-color: lightgray">
                <div class="win-type-x-large" 
                    style="margin-bottom: 5px;" 
                    data-win-bind="textContent: title"></div>
                <img src="#" data-win-bind="src: image">
		        <div data-win-bind="textContent: desc"></div>
            </div>
    </div>
</div>

<div data-win-control="WinJS.UI.Repeater" 
    data-win-options="{data: ItemContainerExample.flavorList, 
    template: select('#itemTemplate')}">
</div>

In diesem Beispiel wird die Datenquelle definiert.


(function () {
    "use strict";

    var basicList = new WinJS.Binding.List(
        [
            { title: "Banana blast", desc: 'Frozen yogurt', image: '/images/60Banana.png'  },
            { title: "Strawberry swirl", desc: 'Ice cream', image: '/images/60Strawberry.png' },
            { title: "Magnificant mint", desc: 'Frozen yogurt', image: '/images/60Mint.png' },
            { title: "Lemon lift", desc: 'Frozen yogurt', image: '/images/60Lemon.png' }
        ]);

    WinJS.Namespace.define("ItemContainerExample",
        {
            flavorList: basicList

        });
})();

Von einem Repeater generierte ItemContainer-Objekte

 

Elemente können standardmäßig ausgewählt werden. Um die Auswahl zu deaktivieren, legen Sie die selectionDisabled-Eigenschaft des ItemContainer-Steuerelements auf true fest:

NavBar

[Sichern Sie sich gleich jetzt das Beispiel für ein HTML-NavBar-Steuerelement.]

In Windows 8.1 und der Windows-Bibliothek für JavaScript 2.0 wird ein neues Steuerelement eingeführt, mit dem Sie eine einheitliche und vorhersagbare Navigation bereitstellen können: das WinJS.UI.NavBar-Steuerelement.

NavBar-Steuerelement mit Navigationselementen, die aus einer Datenquelle generiert wurden

 

Die NavBar ähnelt einer AppBar, die für Navigationsbefehle vorgesehen ist. (Die NavBar ist in Wirklichkeit eine Unterklasse der AppBar.) Sie kann eine einfache Liste mit Links und mehrere in Kategorien unterteilte Linkebenen enthalten. Sie können die NavBar auffüllen, indem Sie Einträge hartcodieren, sie programmgesteuert aktualisieren oder die Datenbindung verwenden.

Die NavBar wird oben im App-Bildschirm eingeblendet, wenn der Benutzer sie benötigt. Der Benutzer ruft die NavBar auf, indem er vom Rand aus streift, Windows-Logo-Taste+Z drückt oder mit der rechten Maustaste klickt.

Die NavBar unterstützt zudem vertikale Layouts und Elemente für die geteilte Navigation (Navigationselemente mit untergeordneten Navigationsoptionen). Die NavBar kann umfassend angepasst werden: Sie können mit CSS (Cascading Stylesheets) nahezu alle Bereiche der NavBar und ihre Inhalte gestalten. Darüber hinaus können Sie benutzerdefinierte Navigationselemente erstellen.

Erstellen eines NavBar-Steuerelements

Das NavBar-Steuerelement besteht aus drei Komponenten:

  • Der NavBar selbst.

  • Einem NavBarContainer-Objekt, das Navigationselemente (NavBarCommand-Objekte) enthält und Seitenaufteilung sowie Verschieben und Scrollen unterstützt. Eine NavBar kann mehrere NavBarContainer-Objekte enthalten. Mithilfe von NavBarContainer-Objekten definieren Sie Gruppen mit Navigationsoptionen.

  • Mindestens einem NavBarCommand-Objekt. Auf diese Objekte klickt der Benutzer zum Navigieren.

Um die Navigation zu ermöglichen, können Sie die location-Eigenschaft des NavBarCommand-Objekts festlegen. Wenn der Benutzer auf den Befehl klickt, wird das WinJS.Navigation.navigated-Ereignis ausgelöst. Verwenden Sie dieses Ereignis, um zum angegebenen Ort zu navigieren.

Alternativ können Sie das oninvoked-Ereignis für die NavBar registrieren und die Navigationsaktion mit Ihrem Ereignishandler ausführen.

Dieses Beispiel zeigt eine einfache NavBar mit zwei Navigationselementen.


<div id="NavBar" data-win-control="WinJS.UI.NavBar">
    <div id="GlobalNav" data-win-control="WinJS.UI.NavBarContainer">
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Home',
                icon: WinJS.UI.AppBarIcon.home,
                location: '/html/home.html',
                splitButton: false
                }">
            </div>
            <div data-win-control="WinJS.UI.NavBarCommand" data-win-options="{
                label: 'Your apps',
                icon: WinJS.UI.AppBarIcon.favorite,
                location: '/html/yourapps.html',
                splitButton: false
                }">
            </div>
    </div>
</div>


So sieht diese NavBar dann aus.

Das NavBar-Steuerelement

 

Sie können ein NavBarCommand-Objekt erstellen, das untergeordnete NavBarCommand-Objekte beinhaltet. Setzen Sie zu diesem Zweck die splitButton-Eigenschaft des NavBarCommand-Objekts auf true, und verwenden Sie dann das splittoggle-Ereignis zum Anzeigen von einem Flyout, das die untergeordneten NavBarCommand-Objekte beinhaltet. Nachstehend finden Sie Beispielcode für den ersten Teil hiervon.


<div id="useSplit" data-win-control="WinJS.UI.NavBar">
    <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Favorite', icon: WinJS.UI.AppBarIcon.favorite, splitButton: 'true' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Your account', icon: WinJS.UI.AppBarIcon.people }">
        </div>
    </div>
</div>
<div id="contactFlyout" data-win-control="WinJS.UI.Flyout" 
    data-win-options="{ placement: 'bottom' }">
    <div id="contactNavBarContainer" data-win-control="WinJS.UI.NavBarContainer"}">
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Family' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Work' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Friends' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
            data-win-options="{ label: 'Blocked' }">
        </div>  
    </div>
</div>

Das nächste Beispiel zeigt den Code zum Initialisieren der HTML-Seite und zum Hinzufügen des splittoggle-Ereignishandlers, mit dem das Flyout angezeigt wird, das die untergeordneten NavBarCommand-Objekte enthält.


(function () {
    "use strict";
    var navcontainer;

    var page = WinJS.UI.Pages.define("/html/6-UseSplitButton.html", {
        ready: function (element, options) {
            document.body.querySelector('#useSplit').addEventListener('invoked', this.navbarInvoked.bind(this));
            document.body.querySelector('#contactNavBarContainer').addEventListener('invoked', this.navbarInvoked.bind(this));

            var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');
            if (navBarContainerEl) {
                this.setupNavBarContainer();
            } else {
                var navBarEl = document.getElementById('useSplit');
                navBarEl.addEventListener('childrenprocessed', this.setupNavBarContainer.bind(this));
            }
        },

        navbarInvoked: function (ev) {
            var navbarCommand = ev.detail.navbarCommand;
            WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status");
            document.querySelector('select').focus();
        },

        setupNavBarContainer: function () {
            var navBarContainerEl = document.body.querySelector('#useSplit .globalNav');

            navBarContainerEl.addEventListener("splittoggle", function (e) {
                var flyout = document.getElementById("contactFlyout").winControl;
                var navbarCommand = e.detail.navbarCommand;
                if (e.detail.opened) {
                    flyout.show(navbarCommand.element);
                    var subNavBarContainer = flyout.element.querySelector('.win-navbarcontainer');
                    if (subNavBarContainer) {
                        // Switching the navbarcontainer from display none to display block requires 
                        // forceLayout in case there was a pending measure.
                        subNavBarContainer.winControl.forceLayout();
                        // Reset back to the first item.
                        subNavBarContainer.currentIndex = 0;
                    }
                    flyout.addEventListener('beforehide', go);
                } else {
                    flyout.removeEventListener('beforehide', go);
                    flyout.hide();
                }
                function go() {
                    flyout.removeEventListener('beforehide', go);
                    navbarCommand.splitOpened = false;
                }
            });
        }
    });
})();

(Den vollständigen Code finden Sie im HTML-NavBar-Beispiel.)

So sieht die NavBar mit der geöffneten Trennschaltfläche aus:

Unterteiltes NavBarCommand-Objekt

 

Sie können einen NavBarContainer an eine Datenquelle binden. Erstellen Sie zu diesem Zweck ein List-Objekt, das Daten zur Beschreibung der Navigationsbefehle enthält, und verwenden Sie das Objekt zum Festlegen der data-Eigenschaft des NavBarContainer-Objekts. Im folgenden Beispiel werden die vom NavBarContainer zu verwendenden Daten definiert.



(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/2-UseData.html", {
        init: function (element, options) {
            var categoryNames = ["Picks for you", "Popular", "New Releases", "Top Paid", "Top Free",
            "Games", "Social", "Entertainment", "Photo", "Music & Video",
            "Sports", "Books & Reference", "News & Weather", "Health & Fitness", "Food & Dining",
            "Lifestyle", "Shopping", "Travel", "Finance", "Productivity",
            "Tools", "Secuirty", "Business", "Education", "Government"];

            var categoryItems = [];
            for (var i = 0; i < categoryNames.length; i++) {
                categoryItems[i] = {
                    label: categoryNames[i]
                };
            }

            Data.categoryList = new WinJS.Binding.List(categoryItems);
        },

        ready: function (element, options) {
            document.body.querySelector('#useTemplate').addEventListener('invoked', this.navbarInvoked.bind(this));
        },

        navbarInvoked: function (ev) {
            var navbarCommand = ev.detail.navbarCommand;
            WinJS.log && WinJS.log(navbarCommand.label + " NavBarCommand invoked", "sample", "status");
            document.querySelector('select').focus();
        }
    });
})();



Das nächste Beispiel zeigt den HTML-Code, mit dem die NavBar- und NavBarContainer-Objekte erstellt werden.



<div id="useTemplate" data-win-control="WinJS.UI.NavBar">
    <div class="globalNav" data-win-control="WinJS.UI.NavBarContainer">
        <div data-win-control="WinJS.UI.NavBarCommand" 
             data-win-options="{ label: 'Home', icon: 'url(../images/homeIcon.png)' }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
             data-win-options="{ label: 'Favorite', icon: 'favorite' }"></div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
             data-win-options="{ label: 'Your account', icon: 'people' }"></div>
    </div>
    <div class="categoryNav" 
        data-win-control="WinJS.UI.NavBarContainer" 
        data-win-options="{ data: Data.categoryList, maxRows: 3 }">
    </div>
</div>



(Den vollständigen Code finden Sie im HTML-NavBar-Beispiel.)

Wenn Sie den Code ausführen, wird die folgende NavBar erstellt.

NavBar-Steuerelement mit Navigationselementen, die aus einer Datenquelle generiert wurden

 

Auch wenn das an dieser Stelle nicht gezeigt wird, können Sie ein WinJS.Binding.Template-Objekt auch mit einer Datenquelle verwenden, um Navigationsleistenelemente zu erstellen.

Repeater

[Sichern Sie sich gleich jetzt das Beispiel für ein HTML-Repeater-Steuerelement.]

Der Repeater ist ein einfaches, leicht anzuwendendes WinJS-Steuerelement, das eine Vorlage nutzt, um HTML-Markup aus einem Satz von Daten zu generieren. Die Vorlage kann nahezu jede Art von HTML-Markup und WinJS-Steuerelementen enthalten. Sie können sogar Repeater-Steuerelemente in Repeater-Steuerelementen schachteln.

Verwenden Sie den Repeater, um benutzerdefinierte Listen und Tabellen zu generieren. Nachstehend finden Sie ein Beispiel für eine Wettervorhersage, die mit einem Repeater erstellt wurde.

Repeater-Steuerelement

 

Der Repeater ist kein Ersatz für das ListView-Steuerelement. Der Repeater ist flexibler, verfügt aber nicht über alle erweiterten Features der ListView, etwa über die Steuerungsmöglichkeiten für das Laden von Datenelementen.

Verwenden des Repeater-Steuerelements

Ein Repeater generiert seine Daten aus einem List-Objekt. Das folgende Beispiel erstellt ein List-Objekt, das einige einfache Elemente enthält.


(function () {
    "use strict";

    var basicList2 = new WinJS.Binding.List(
        [
            { title: "Item 1" },
            { title: "Item 2" },
            { title: "Item 3" },
            { title: "Item 4" }
        ]);

    WinJS.Namespace.define("RepeaterExample",
        {
            basicList: basicList2

        });
})();

Um das vom Repeater generierte Markup festzulegen, definieren Sie eine template. Sie können eine Vorlage im Markup erstellen oder eine Vorlagenfunktion verwenden. In diesem Beispiel wird eine Vorlage in Markup erstellt. Dabei erfolgt eine Datenbindung des Titelfelds der Datenquelle an den Textinhalt eines li-Elements.


<div id="listTemplate" data-win-control="WinJS.Binding.Template">
    <li data-win-bind="textContent: title"></li>
</div>

Das nächste Beispiel erstellt den Repeater selbst.


<ul data-win-control="WinJS.UI.Repeater" 
    data-win-options="{data: RepeaterExample.basicList, 
    template: select('#listTemplate')}">
</ul>

Wenn Sie die App ausführen, generiert der Repeater ein li-Element für jedes Element in der Datenliste.

Vom Repeater-Steuerelement generierte Liste

 

WebView-Steuerelement mit SmartScreen

[Sichern Sie sich gleich jetzt das Beispiel für ein HTML-WebView-Steuerelement.]

In Windows 8 konnten Sie das iframe-Element verwenden, um webbasierte Inhalte zu hosten, es gab hierbei aber nur wenige Möglichkeiten zum Isolieren von Inhalten und nur wenige Navigationsfunktionen. In Windows 8.1 wird das neue WebView-Steuerelement eingeführt, mit dem das Hosten webbasierter Inhalte in Ihren Apps wesentlich erleichtert wird.

Das WebView-Steuerelement bietet gegenüber der Verwendung eines iframe-Elements zum Anzeigen von webbasiertem Inhalt u. a. die folgenden Verbesserungen:

  • Unterstützung für HTML5

    Bei Seiten, die in einer WebView gehostet werden, kann auf die meisten HTML5-Funktionen zugegriffen werden. (Die WebView kann jedoch nicht auf IndexedDB, den HTML5-App-Cache, die Geolocation-API oder die Clipboard API zugreifen.)

  • Verbesserte Navigationsunterstützung

    Die WebView verfügt über ihren eigenen separaten Verlaufsstapel und bietet mehrere Methoden für die Rückwärts- und Vorwärtsnavigation und zum erneuten Laden der aktuellen Seite.

  • Unterstützung für Websites, die nicht innerhalb von Frames funktionieren

    Die WebView kann Websites anzeigen, die nicht in frame- oder iframe-Elementen funktionieren.

Verwenden der WebView zum Laden von Inhalten

Um ein WebView-Steuerelement zu erstellen, erstellen Sie ein x-ms-webview-Element.


<x-ms-webview id="webview">
</x-ms-webview>


Es gibt mehrere Methoden, wie Sie die WebView verwenden können, um Inhalt zu laden.

  • Verwenden Sie die src-Eigenschaft des WebView-Steuerelements, die navigate-Methode oder die navigateWithHttpRequestMessage-Methode, um zu einem URI zu navigieren. In diesem Beispiel wird die src-Eigenschaft für die Navigation zu einem URI verwendet.

    
    <x-ms-webview id="webview" src="http://go.microsoft.com/fwlink/?LinkId=294155" 
        style="width: 400px; height: 400px;">
    </x-ms-webview>
    
    
    
  • Verwenden Sie die navigateToString-Methode, um eine beliebige HTML-Zeichenfolge zu laden.

    
    var htmlString = "<!DOCTYPE html>" +
            "<html>" +
            "<head><title>Simple HTML page</title></head>" +
            "<body>" +
                "<h1>Hi!</h1>" +
                "<p>This is a simple HTML page.</p>" +
            "</body>" +
            "</html>";
    document.getElementById("webview").navigateToString(
        htmlString);
    
    
  • Sie können die navigate-Methode mit dem ms-appdata://-Protokoll verwenden, um in den Statusordnern der App gespeicherten HTML-Inhalt zu laden.

    
     document.getElementById("webview").navigate(
        "ms-appdata:///local/NavigateToState/simple_example.html");
    
    
  • Bei HTML-basierten Dateiformaten kann es mitunter hilfreich sein, relative Verweise bei Bedarf zu streamen, z. B. für verschlüsselten HTML-Inhalt, der standardmäßig nicht vom WebView-Steuerelement gerendert werden kann. Verwenden Sie die Methoden buildLocalStreamUri und navigateToLocalStreamUri, um Streaminhalte anzuzeigen. (Sie müssen auch ein benutzerdefiniertes Windows-Runtime-Objekt implementieren, das die IUriToStreamResolver-Oberfläche verwendet.)

    
    var contentUri = document.getElementById("webview").buildLocalStreamUri(
        "NavigateToStream", "simple_example.html");
    var uriResolver = new SDK.WebViewSampleCS.StreamUriResolver();
    document.getElementById("webview").navigateToLocalStreamUri(contentUri, uriResolver);
    
    

Vollständige Beispiele finden Sie im HTML-WebView-Beispiel.

Drag & Drop-Unterstützung für das ListView-Steuerelement

[Sichern Sie sich gleich jetzt das HTML-ListView-Beispiel für Drag & Drop und Neuanordnung.]

Mit der Windows-Bibliothek für JavaScript 2.0 bietet das ListView-Steuerelement Unterstützung für Drag & Drop-Vorgänge. Diese neue Unterstützung ist mit der Drag & Drop-Funktion von HTML5 kompatibel. Das Ziehen ist zwischen zwei ListView-Steuerelementen möglich, zwischen einem ItemContainer und einer ListView und zwischen beliebigen HTML-Elementen und der ListView. Der Benutzer kann Elemente an einem bestimmten Ort in der ListView ablegen, oder Sie können steuern, wo abgelegte Elemente eingefügt werden, z. B. dadurch, dass Elemente in der ListView neu sortiert werden, nachdem ein Element hinzugefügt wurde.

Ziehen eines Elements aus dem ListView-Steuerelement

Gehen Sie folgendermaßen vor, um zu ermöglichen, dass ein Element aus der ListView an ein HTML5-Drop-Ziel gezogen werden kann:

  1. Legen Sie die itemsDraggable-Eigenschaft der ListView auf true fest.

  2. Behandeln Sie das itemdragstart-Ereignis des ListView-Steuerelements. Rufen Sie im Ereignishandler ein dataTransfer-Objekt aus der detail-Eigenschaft des Ereignisobjekts ab. Legen Sie mit der setData-Methode des dataTransfer-Objekts fest, wie die Daten übertragen werden und welche Daten übertragen werden sollen.

  3. Behandeln Sie das dragover-Ereignis des Drop-Ziels. Verwenden Sie in Ihrem Ereignishandler die preventDefault-Methode des event-Objekts, um dem System mitzuteilen, dass der Drop-Vorgang zulässig ist. Andernfalls wird der Ziehvorgang nicht vom Drop-Ziel akzeptiert.

  4. Behandeln Sie das drop-Ereignis des Drop-Ziels. Rufen Sie im Ereignishandler ein dataTransfer-Objekt aus der detail-Eigenschaft des Ereignisobjekts ab. Verwenden Sie die getData-Eigenschaft des dataTransfer-Objekts, um die übertragenen Daten abzurufen. Aktualisieren Sie das Drop-Ziel mit diesen Daten. Achten Sie darauf, dass keine Ziehvorgänge von eigentlich ziehbaren Elementen in der App akzeptiert werden, z. B. von markiertem Text und img-Elementen.

Die folgenden Beispiele zeigen, wie Sie das Ziehen eines Elements aus der ListView ermöglichen. Das erste Beispiel definiert das HTML-Markup.


<div id="myDropTarget" class="DnDItem">
    <div id="myTargetContents">
        <p>
            HTML 5 Drop Target
        </p>
        <br />
        <div id="myPlusSign" class="drop-ready">+ </div>
        <br />
        <p>
            Drop Items Here
        </p>
    </div>
</div>

<!-- Simple template for the ListView instantiation  -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<!-- The declarative markup necessary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
    class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ 
        itemDataSource: myData.dataSource,
        selectionMode: 'none', 
        itemTemplate: smallListIconTextTemplate,
        itemsDraggable: true,
        layout: { type: WinJS.UI.GridLayout } 
    }">
</div>

Hier sehen Sie das CSS für den Drag & Drop-Vorgang.


.drop-ready #myPlusSign
{
    opacity: 1;
}

#myPlusSign
{
     font-size:100px;
     font-weight:bolder;
     color: blue;
     opacity: 0;
}

Das nächste Beispiel zeigt den Code, mit dem die Drag & Drop-Funktion aktiviert wird.


(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/scenario2.html", {
        ready: function (element, options) {

            listView.addEventListener("itemdragstart", function (eventObject) {
                eventObject.detail.dataTransfer.setData("Text", JSON.stringify(eventObject.detail.dragInfo.getIndices()));
            });

            var dropTarget = element.querySelector("#myDropTarget");
            dropTarget.addEventListener("dragover", function (eventObject) {
                // Allow HTML5 drops.
                eventObject.preventDefault();
            });

            dropTarget.addEventListener("dragenter", function (eventObject) {
                WinJS.Utilities.addClass(dropTarget, "drop-ready");
            });

            dropTarget.addEventListener("dragleave", function (eventObject) {
                WinJS.Utilities.removeClass(dropTarget, "drop-ready");
            });

            dropTarget.addEventListener("drop", function (eventObject) {
                // Get indicies -> keys of items that were trashed, and remove from datasource.
                WinJS.Utilities.removeClass(dropTarget, "drop-ready");
                var indexSelected = JSON.parse(eventObject.dataTransfer.getData("Text"));
                var listview = document.querySelector("#listView").winControl;
                var ds = listview.itemDataSource;

                ds.itemFromIndex(indexSelected[0]).then(function (item) {
                    WinJS.log && WinJS.log("You dropped the item at index " + item.index + ", "
                    + item.data.title, "sample", "status");
                });
            });

        }
    });

})();


Den vollständigen Code finden Sie im HTML-ListView-Beispiel für Drag & Drop und Neuanordnung.

Ablegen eines Elements im ListView-Steuerelement

Um ein Element an einer bestimmten Position in der ListView abzulegen, führen Sie die folgenden Schritte aus:

  1. Legen Sie die draggable-Eigenschaft des HTML-Elements (die Drag-Quelle) auf true fest.

  2. Behandeln Sie das dragstart-Ereignis des Drop-Ziels. Rufen Sie im Ereignishandler ein dataTransfer-Objekt aus dem Ereignisobjekt ab. Legen Sie mit der setData-Methode des dataTransfer-Objekts fest, wie die Daten übertragen werden und welche Daten übertragen werden sollen.

  3. Behandeln Sie das itemdragenter-Ereignis des ListView-Steuerelements. Verwenden Sie in Ihrem Ereignishandler die preventDefault-Methode des event-Objekts, um dem System mitzuteilen, dass der Dropvorgang zulässig ist. Andernfalls kann der Ziehvorgang zu unvorhersagbaren Ergebnissen führen.

  4. Behandeln Sie das itemdragdrop-Ereignis des ListView-Steuerelements. Rufen Sie im Ereignishandler ein dataTransfer-Objekt aus der detail-Eigenschaft des Ereignisobjekts ab. Verwenden Sie die getData-Eigenschaft des dataTransfer-Objekts, um die übertragenen Daten abzurufen. Aktualisieren Sie die ListView mit diesen Daten.

Die folgenden Beispiele zeigen, wie Sie das Ablegen eines Elements in der ListView ermöglichen. Das erste Beispiel definiert das HTML-Markup.


<div id="myDragSource" class="DnDItem">
    <div id="mySourceContents">
        <p>
            HTML 5 Drag Source
        </p>
        <br />
        <br />
        <br />
        <div id="myDragContent" class="smallListIconTextItem" draggable="true">
            <img id="myImg" src="/images/60Tree.png" class="smallListIconTextItem-Image" draggable="false" />
            <div class="smallListIconTextItem-Detail">
                <h4 id="myItemTitle">Drag Me</h4>
            </div>
        </div>
    </div>
</div>

<!-- Simple template for the ListView instantiation  -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" draggable="false" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="innerText: title"></h4>
            <h6 data-win-bind="innerText: text"></h6>
        </div>
    </div>
</div>

<!-- The declarative markup necessary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
    class="win-selectionstylefilled"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ 
        itemDataSource: myData.dataSource,
        selectionMode: 'none',
        itemTemplate: smallListIconTextTemplate,
        itemsReorderable: true,
        layout: { type: WinJS.UI.GridLayout } 
    }">
</div>

Das nächste Beispiel zeigt den Code, mit dem die Drag & Drop-Funktion aktiviert wird.


(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/scenario3.html", {
        ready: function (element, options) {

            myDragContent.addEventListener("dragstart", function (eventObject) {
                var dragData = { sourceElement: myDragContent.id, data: myItemTitle.innerText, imgSrc: myImg.src };
                eventObject.dataTransfer.setData("Text", JSON.stringify(dragData));
            });

            listView.addEventListener("itemdragenter", function (eventObject) {
                if (eventObject.detail.dataTransfer.types.contains("Text")) {
                    eventObject.preventDefault();
                }
            });

            listView.addEventListener("itemdragdrop", function (eventObject) {
                var dragData = JSON.parse(eventObject.detail.dataTransfer.getData("Text"));
                if (dragData && dragData.sourceElement === myDragContent.id) {
                    var newItemData = { title: dragData.data, text: ("id: " + dragData.sourceElement), 
                                        picture: dragData.imgSrc };
                    // insertAfterIndex tells us where in the list to add the new item.
                    // If we're inserting at the start, insertAfterIndex is -1. 
                    // Adding 1 to insertAfterIndex gives us the nominal index in the array to insert the new item.
                    myData.splice(eventObject.detail.insertAfterIndex + 1, 0, newItemData);
                } else {
                    // Throw error that illegal content was dropped.
                }
            });
        }
    });
})();


Den vollständigen Code finden Sie im HTML-ListView-Beispiel für Drag & Drop und Neuanordnung.

Neuanordnen der Elemente im ListView-Steuerelement

Durch die Möglichkeit, Inhalte neu anzuordnen, haben Benutzer ein Gefühl der Kontrolle. Mit der neuen itemsReorderable-Eigenschaft können die Benutzer die Reihenfolge von Elementen in einer ListView ganz einfach ändern. Setzen Sie itemsReorderable einfach auf true, damit Benutzer Elemente per Drag & Drop in einer ListView einfügen können. Es ist kein weiterer Code erforderlich.

Hinweis  Damit die Neuanordnung von Elementen in einer gruppierten ListView vollständig möglich ist, müssen Sie auch auf das itemdragdrop-Ereignis reagieren und das Element ordnungsgemäß an der richtigen Position einfügen.

Hinweis  Die Neuanordnung funktioniert nur, wenn sie auch von Ihrer Datenquelle unterstützt wird.

Das folgende Beispiel erstellt eine ListView, die das Neuanordnen von Elementen unterstützt.


<style type="text/css">
    .win-listview {
        margin: 20px;
        border: 2px solid gray;
        Width: 500px; 
    }

    .standardItem {
        width: 150px;
        height: 150px;
        background-color: #0aaddd;
        padding: 5px; 
    }

</style>

<div id="template" data-win-control="WinJS.Binding.Template">
    <div class="standardItem" data-win-bind="textContent: title" ></div>
</div>
<div
    id="reorderableListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
    itemDataSource: ListViewExamples.dataList.dataSource, 
    itemTemplate: select('#template'), 
    layout: {type: WinJS.UI.GridLayout},
    itemsReorderable: true 
    }">
</div>

Das nächste Beispiel definiert die von der ListView verwendete Datenquelle.


(function () {
    "use strict";

    var dataList =
        new WinJS.Binding.List(
             [{ title: "Item 1" },
              { title: "Item 2" },
              { title: "Item 3" },
              { title: "Item 4" }]);

    WinJS.Namespace.define("ListViewExamples",
        {
            dataList: dataList
        })

})();


Wenn der Code ausgeführt wird, kann der Benutzer ListView-Elemente durch Ziehen neu anordnen.

Neuanordnen von ListView-Elementen

Neues ListView-Layout: CellSpanningLayout

Bei der Windows-Bibliothek für JavaScript 1.0 mussten Sie ein GridLayout verwenden, wenn Sie eine ListView mit unterschiedlich großen Elementen erstellen wollten. Für die Windows-Bibliothek für JavaScript 2.0 haben wir ein neues Layout speziell zum Erstellen von unterschiedlich großen Rastern hinzugefügt: CellSpanningLayout.

Das folgende Beispiel definiert die Datenquelle sowie die itemInfo- und groupInfo-Methoden für eine ListView, die ein CellSpanningLayout verwendet. Mit Ausnahme des ersten Elements, das eine Höhe von 510 Pixel hat, ist jedes Element in der ListView 250 x 250 Pixel groß.


(function () {
    "use strict";

    var unorderedList =
        new WinJS.Binding.List(
             [{ title: "Item 1", cssClass: "tallItem" },
              { title: "Item 2", cssClass: "standardItem" },
              { title: "Item 3", cssClass: "standardItem" },
              { title: "Item 4", cssClass: "standardItem" }]);

    function myItemInfo(itemIndex) {
        var size = { width: 250, height: 250 };
        if (itemIndex === 0) {
            size.height = 510;
        }

        return size;
    };

    function myGroupInfo(groupInfo) {
        return {
            enableCellSpanning: true,
            cellWidth: 250,
            cellHeight: 250
        };
    };

    WinJS.Utilities.markSupportedForProcessing(myItemInfo);
    WinJS.Utilities.markSupportedForProcessing(myGroupInfo);

    WinJS.Namespace.define("ListViewExamples",
        {
            unorderedList: unorderedList,
            myItemInfo: myItemInfo,
            myGroupInfo: myGroupInfo
        })


})();


Das nächste Beispiel zeigt die HTML zum Erstellen der ListView und WinJS.Binding.Template.


<style type="text/css">
    .win-listview {
        margin: 5px;
        border: 2px solid gray; 
    }

    .standardItem {
        width: 250px;
        height: 250px;
        background-color: #999999;
        padding: 5px; 
    }

    .tallItem {
        width: 250px;
        height: 510px;
        background-color: #0aaddd;
        padding: 5px; 
    }
</style>

<div id="template" data-win-control="WinJS.Binding.Template">
    <div data-win-bind="className: cssClass; textContent: title" ></div>
</div>

<div
    id="cellSpanningListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{
    itemDataSource: ListViewExamples.unorderedList.dataSource, 
    itemTemplate: select('#template'), 
    layout: {type: WinJS.UI.CellSpanningLayout, 
    itemInfo: ListViewExamples.myItemInfo, 
    groupInfo: ListViewExamples.myGroupInfo}
    }">
</div>


So sieht die ListView aus.

ListView-Steuerelement mit "CellSpanningLayout"

Andere Aktualisierungen des ListView-Steuerelements

Windows 8.1 beinhaltet noch weitere Verbesserungen des ListView-Steuerelements.

Bessere Zugriffsmöglichkeiten für Überschriften

Überschriften in einer gruppierten ListView unterstützen jetzt die Tastaturnavigation sowie die Tastatur- und Mausinteraktion. Sie müssen keine Änderungen an Ihrem Code vornehmen, um diese Features nutzen zu können.

(Weitere Informationen zum Erstellen von Gruppen finden Sie unter Gruppieren von Elementen in einem ListView-Steuerelement.)

Hinweis  Falls Sie Ihre Überschrift in der Windows-Bibliothek für JavaScript 1.0 mithilfe eines Links oder einer Schaltfläche aufrufbar gemacht haben, können Benutzer die Überschrift nach der Umstellung auf die Windows-Bibliothek für JavaScript 2.0 nicht über die Tastatur aufrufen. Um dieses Problem zu beheben, behandeln Sie das ongroupheaderinvoked-Ereignis und verwenden es anstelle einer Schaltfläche oder eines Links, um die Aktion für die Überschrift auszuführen.

Aktualisierungen der Layoutschnittstelle

Die ListView verfügt jetzt über neue Layoutschnittstellen, mit denen Sie ganz einfach ein eigenes benutzerdefiniertes Layout erstellen können: ILayout2 und ISiteLayout2. Wenn Sie diese Schnittstellen implementieren, können Sie standardmäßige CSS-Layouts als Teil Ihrer Implementierung verwenden.

Aktualisierungen von "ListLayout" und "GridLayout"

Wir haben ListLayout und GridLayout aktualisiert, um deren Leistung insgesamt zu verbessern, insbesondere die Leistung beim Verschieben. Sie müssen keine Änderungen an Ihrem Code vornehmen, um diese Verbesserungen nutzen zu können.

Andere WinJS-Aktualisierungen

Aktualisierungen von Bindung und "WinJS.Binding.Template"

In der Windows-Bibliothek für JavaScript 2.0 wird ein neues, effizienteres System für die Verarbeitung von Template-Objekten verwendet. Damit wird die Leistung erheblich verbessert. Beim neuen System erfolgen Datenbindung und Steuerelementinstanziierung in einem flüssigeren parallelen Prozess und nicht wie bei der Windows-Bibliothek für JavaScript 1.0 nacheinander. Wenn Ihr Code von der alten seriellen Verarbeitung abhängt, empfehlen wir Ihnen, den Code zu ändern, damit Sie von einer schnelleren Verarbeitung von Vorlagen profitieren können. Sie können aber die disableOptimizedProcessing-Eigenschaft verwenden, um die Verarbeitung auf das alte Verhalten zurückzusetzen, wenn Sie den Code nicht ändern können.

Dispose-API

Das Dispose-Modell ist ein neues Muster, das es Elementen und Steuerelementen ermöglicht, Ressourcen am Ende ihrer Lebensdauer freizugeben, um Arbeitsspeicherverluste zu verhindern. Ein Element oder Steuerelement kann es optional implementieren. Steuerelemente der Windows-Bibliothek für JavaScript 2.0 mit Ressourcen, die freigegeben werden können, implementieren jetzt diese API.

Um das Dispose-Modell zu nutzen, rufen Sie die dispose-Methode des Steuerelements auf, wenn es nicht mehr benötigt wird (z. B. wenn der Benutzer die Seite verlässt oder die App beendet).

 

 

Anzeigen:
© 2014 Microsoft