Schnellstart: Hinzufügen von Elementcontainern

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 einer Windows Store-App mit JavaScript ein ItemContainer-Objekt hinzufügen. Mit dem ItemContainer-Objekt kann ein einfaches interaktives Element ohne viel Aufwand an HTML-Markup oder JavaScript-Code erstellt werden. Die mit diesem Steuerelement erstellten Elemente entsprechen dem Windows-Erscheinungsbild, was Animationen, Wischbewegungen, Drag & Drop und Hover betrifft.

In dieser Schnellstartanleitung erstellen Sie eine einfache Anwendung zum Anzeigen von Kundendaten, indem Sie ein Repeater-Steuerelement und ein ItemContainer-Steuerelement verwenden. Außerdem erfahren Sie, wie Sie ein Dateneingabeformular in einer Windows Store-App mit JavaScript erstellen, indem Sie ein <form>-HTML-Element mit zwei ItemContainer-Steuerelementen verwenden.

Voraussetzungen

Erstellen eines neuen Projekts mit der Vorlage "Navigations-App"

Starten Sie Microsoft Visual Studio.
Klicken Sie auf der Registerkarte Startseite auf Neues Projekt. Das Dialogfeld Neues Projekt wird geöffnet.
Erweitern Sie im Bereich Installiert die Einträge Vorlagen und JavaScript, und klicken Sie auf den Vorlagentyp Windows Store-App. Die verfügbaren Projektvorlagen für JavaScript werden im mittleren Fenster des Dialogfelds angezeigt.
Wählen Sie im mittleren Fenster die Projektvorlage Navigations-App aus.
Geben Sie im Textfeld Name den Namen ItemContainer-Demo ein.
Klicken Sie auf OK, um das Projekt zu erstellen.

Hinzufügen des HTML-Codes mit den ItemContainer-Steuerelementen

Das ItemContainer-Steuerelement ist ein stabiles Mehrzwecksteuerelement, das eingesetzt werden kann, wenn andere Steuerelemente (z. B. das ListView-Steuerelement) vielleicht nicht geeignet sind. Wenn eine umfassendere Version einer Umschaltfläche benötigt wird, ist das ItemContainer-Steuerelement eine gute Lösung. Es kann auch als Ziel für das Ablegen verwendet werden, z. B. wie bei einer Einkaufswagen-Benutzeroberfläche. Was noch wichtiger ist: Das ItemContainer-Steuerelement kann in Verbindung mit anderen Steuerelementen genutzt werden, vor allem dem Repeater-Element. Sie können ItemContainer und Repeater zusammen einsetzen, um dynamische Daten an das ItemContainer-Steuerelement zu binden.

Das ItemContainer-Steuerelement kann entweder deklarativ in einer HTML-Seite oder zur Laufzeit mithilfe von JavaScript-Code definiert werden, der mit der Seite geladen wird. In diesem Beispiel wird das ItemContainer-Steuerelement deklarativ im HTML-Markup erstellt, wobei ein Beispiel in einem Repeater-Steuerelement gehostet wird.

Öffnen Sie die Datei "home.js" (/pages/home/home.html), und fügen Sie den folgenden HTML-Markupcode hinzu:


<!-- Create an entry form for new customer data. -->
<div id="customerInput">
    <h2>Customer entry</h2><br />
    <form id="inputContainer"
        class="itemContainer">
        <input id="firstName" type="text" placeholder="First name" required /><br />
        <input id="lastName" type="text" placeholder="Last name" required /><br />
        <input id="phoneNumber" type="tel" placeholder="Phone number" /><br />
        <input id="email" type="email" placeholder="E-mail" required /><br /><br />
        <div id="contactByEmail"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by e-mail</div><br />
        <div id="contactByPhone"
            class="selectionItem"
            data-win-control="WinJS.UI.ItemContainer"
            data-win-options="{
                tapBehavior: directSelect
            }">Contact by phone</div><br />
        <button type="submit">Submit</button>
        <button type="reset">Clear</button>
    </form>
</div>

<!-- Create a display for existing customer data -->
<div id="customerList">
    <h2>Customer list</h2><br />
    <div id="entryContainer"
        class="itemContainer"
        data-win-control="WinJS.UI.Repeater"
        data-win-options="{
            data: CustomerData.data
    }">
        <div class="customerListItem"
            data-win-control="WinJS.UI.ItemContainer">
            <b>Name:</b> <span data-win-bind="textContent: name"></span><br />
            <b>E-mail:</b> <span data-win-bind="textContent: email"></span><br />
            <b>Phone: </b> <span data-win-bind="textContent: phoneNumber"></span><br />
            <b>Contact by: </b><span data-win-bind="textContent: contactPreference"></span><br />
        </div> 
    </div>
</div>

Mit diesem Markup werden für die Benutzeroberfläche der App zwei Teile definiert: ein Eingabeformular für Kundendaten und eine Anzeige für vorhandene Kundendaten. Das Eingabeformular für Kundendaten enthält zwei ItemContainer-Steuerelemente in einem <form>-Element. Dabei dienen die ItemContainer-Steuerelemente als umfassende Kontrollkästchen. Der Abschnitt zum Anzeigen von Kundendaten enthält ein Repeater-Element mit einem ItemContainer-Element zum Anzeigen der einzelnen Kundendatensätze.

Öffnen Sie die Datei "home.css" (/pages/home/home.css), und fügen Sie den folgenden Code ein:


/* Style the page so that the entry form and
display are in two separate parts of a grid. */
.maincontent {
    padding: 50px;
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr;
    -ms-grid-rows: inherit;
}

#customerInput {
    -ms-grid-column: 1;
}

#customerList {
    -ms-grid-column: 2;
}

#entryContainer {  
    overflow-y: auto;
}

.itemContainer {
    width: 500px;
    height: 350px;
}

.selectionItem {
    width: 300px;
    border: 10px;
    height: 50px;
}

/* Create a solid gray border around items
in the customer display list. */
.customerListItem {
    width: 450px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-style: solid;
    border-color: gray;
}

Mit diesem Format wird ein zweiteiliges Raster für den Bereich zum Eingeben von Kundendaten und den Bereich zum Anzeigen von Kundendaten in der App erstellt. Das Eingabeformular für die Kundendaten befindet sich auf der linken Seite der App, und die Anzeige der Kundendaten ist auf der rechten Seite angeordnet.

Anwenden von JavaScript-Ereignishandlern auf die Steuerelemente

In der App werden Informationen, die in das Formular eingegeben werden, in der Liste der Kundendaten angezeigt. Wenn die Daten des Formulars abgesendet werden, werden sie in ein einzelnes JavaScript-Objekt konvertiert. Das Objekt wird dann der Liste der angezeigten Kundendaten hinzugefügt.

Klicken Sie mit der rechten Maustaste auf den Ordner js, und klicken Sie auf Hinzufügen > Neue JavaScript-Datei. Geben Sie der Datei im Dialogfeld Neues Element hinzufügen den Namen "data.js", und klicken Sie dann auf Hinzufügen. Fügen Sie in "default.html" einen Verweis auf das neue Skript hinzu:
```
<script src='/js/data.js'></script>
```

Öffnen Sie die Datei "data.js" (/js/data.js), und fügen Sie den folgenden Code hinzu:

(function () {
    "use strict";

    var customers = [];
    var customerList = new WinJS.Binding.List(customers);

    function Customer(customerInfo) {
        this.name = customerInfo.lastName + ", " + customerInfo.firstName;
        this.email = customerInfo.email;
        this.phoneNumber = customerInfo.phone;
        this.contactPreference = "Does not wish to be contacted";

        if (customerInfo.contactByPhone && customerInfo.contactByEmail) {
            this.contactPreference = "Contact by e-mail and phone"
        }
        else if (customerInfo.contactByPhone) {
            this.contactPreference = "Contact by phone only"
        }
        else if (customerInfo.contactByEmail) {
            this.contactPreference = "Contact by email only"
        }
    }

    WinJS.Namespace.define("CustomerData", {
        data: customerList,
        Customer: Customer
    });
})();

Mit diesem Code wird der neue Namespace CustomerData definiert, mit dem zwei Member verfügbar gemacht werden: Customer, ein Objekt zum Speichern von Kundendaten, und data, ein List-Element zum Speichern von Customer-Objekten.

Öffnen Sie die Datei "home.js" (/pages/home/home.js), und ersetzen Sie den vorhandenen Code durch den folgenden Code:

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.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) {

            // Apply an event handler to when the user
            // submits the form.
            var form = document.forms[0];
            form.onsubmit = function (evt) {

                // Prevent the form from refreshing the page.
                evt.preventDefault();

                // Get the customer input data from the form.
                var entryForm = evt.target;
                var entry = {
                    firstName: entryForm.firstName.value,
                    lastName: entryForm.lastName.value,
                    phone: entryForm.phoneNumber.value,
                    email: entryForm.email.value,
                    contactByEmail: entryForm.children.contactByEmail.winControl.selected,
                    contactByPhone: entryForm.children.contactByPhone.winControl.selected
                };

                // Submit the new Customer data to the list of customers.
                var customer = new CustomerData.Customer(entry);
                var entryList = document.querySelector("#entryContainer").winControl;
                entryList.data.push(customer);

                // Clear the entry form.
                entryForm.querySelector("button[type='reset']").click();
            }

            // Add additional clean-up work when the user 
            // clicks the Reset button.
            form.onreset = function (evt) {
                var entryForm = evt.target;

                // Remove any selection from the item containers.
                entryForm.children.contactByEmail.winControl.selected = false;
                entryForm.children.contactByPhone.winControl.selected = false;
            }

            // Release memory from the 'form' variable after 
            // event handlers have been applied.
            form = null;
        }
    });
})();

Mit diesem Code werden den beiden Schaltflächen, die im <form>-Element deklariert werden, Ereignishandler hinzugefügt. Beim Betätigen der Schaltfläche Submit ruft der Code die Daten aus dem Kundendaten-Eingabeformular ab, fügt der Datenquelle für das Repeater-Steuerelement ein neues Customer-Objekt hinzu und löscht die Daten dann aus dem Formular. Mit dem Ereignishandler, der auf die Schaltfläche Reset angewendet wird, wird die Auswahl der beiden ItemContainer-Steuerelemente aufgehoben, die im Formular enthalten sind.

Drücken Sie F5, um das Beispiel auszuführen. Geben Sie bei ausgeführter App Daten in das Formular Customer entry ein, und klicken Sie dann auf Submit. Ein neues ItemContainer-Element wird unterhalb der Customer list angezeigt und enthält Informationen zum Kunden. Geben Sie bei weiterhin ausgeführter App weitere Daten in das Formular ein, und klicken Sie dann auf Reset. Die Daten werden aus dem Formular gelöscht, und für die beiden ItemContainer-Steuerelemente im Formular werden alle Auswahlen entfernt.

Zusammenfassung und nächste Schritte

In dieser Schnellstartanleitung haben Sie erfahren, wie Sie ItemContainer-Steuerelemente nutzen können: als umfassende Kontrollkästchen für die Auswahl durch Benutzer und als geschachtelte Steuerelemente in einem Repeater-Steuerelement. Außerdem wurde beschrieben, wie Sie ein <form>-HTML-Element in einer Windows Store-App mit JavaScript verwenden.

ItemContainer-Steuerelemente können als Drag & Drop-Ziele verwendet werden. Dies wird in diesem Artikel jedoch nicht erläutert.

Weitere Informationen zur Verwendung des Repeater-Steuerelements finden Sie unter Schnellstart: Hinzufügen von Repeater-Steuerelementen.

Weitere Informationen zur Erstellung der Drag & Drop-Funktionen finden Sie unter So wird's gemacht: Ermöglichen des Neuanordnens, Ziehens und Ablegens in einem ListView-Steuerelement.

Schnellstart: Hinzufügen von Elementcontainern

Voraussetzungen

Zusammenfassung und nächste Schritte

Zusätzliche Ressourcen