Teil 1: Erstellen der App "Hello, world" (Windows Phone Store-Apps mit JavaScript)

Applies to Windows Phone only

In diesem Lernprogramm erfahren Sie, wie Sie die einfache Windows Phone Store-App "Hello, world" mit JavaScript erstellen. Dies ist das erste Lernprogramm einer dreiteiligen Reihe, in der Sie alles lernen, was Sie zum Erstellen von Apps mit JavaScript und HTML wissen müssen.

In diesem Lernprogramm erfahren Sie Folgendes:

  • Erstellen eines neuen Projekts
  • Hinzufügen von HTML-Inhalt zu Ihrer Startseite
  • Behandeln von Benutzereingaben
  • Wechseln zwischen den Stylesheets für hell und dunkel
  • Erstellen eigener Stile
  • Verwenden von Windows-Bibliothek für JavaScript-Steuerelementen

Vorbereitung

Schritt 1: Erstellen eines neuen Projekts in Visual Studio

Um Ihre App zu entwickeln, müssen Sie ein neues Projekt in Visual Studio erstellen.

Dn629634.wedge(de-de,WIN.10).gifSo erstellen Sie ein neues Projekt in Visual Studio

  1. Klicken Sie in Visual Studio im Menü Datei auf Neues Projekt.
  2. Erweitern Sie im linken Bereich des Dialogfelds Neues Projekt folgende Verzeichnisse: Installiert, Vorlagen, JavaScript und Store-Apps. Wählen Sie anschließend den Vorlagentyp Windows Phone-Apps aus. Im mittleren Bereich sehen Sie eine Liste mit JavaScript-Projektvorlagen.

    Erstellen eines neuen Projekts

    • Wählen Sie im mittleren Bereich die Vorlage Blank App aus.

      Beachten Sie Folgendes: Obwohl diese Reihe die Erstellung einer Windows Phone Store-App behandelt, können Sie mit der Universalvorlage einfach eine App erstellen, die sowohl für Windows als auch für Windows Phone einsetzbar ist. Um weitere Informationen zu erhalten, sollten Sie zunächst diese Lernprogrammreihe abschließen und dann den Artikel zum Erstellen von Apps für Windows und Windows Phone mit Visual Studio lesen.

      Mit der Vorlage Blank App wird eine minimale App erstellt, die kompiliert und ausgeführt wird, aber keine Steuerelemente oder Daten für die Benutzeroberfläche enthält. Die App wird später in diesem Lernprogramm noch mit Steuerelementen und Daten versehen.

  3. Geben Sie im Textfeld Name"HelloWorld" ein, und klicken Sie auf OK, um das Projekt zu erstellen.

    Erstellen eines neuen Projekts

Jedes neue Projekt enthält diese wichtigen Dateien:

  • Die Manifestdatei package.appxmanifest, die Ihre App beschreibt (Name, Beschreibung, Kachel, Startseite, Begrüßungsbildschirm usw.) und die in der App enthaltenen Dateien auflistet.
  • Eine Reihe großer und kleiner Logobilder zum Anzeigen auf der Startseite (logo.png und smalllogo.png), ein Bild zum Darstellen der App im Store (storelogo.png) und einen Begrüßungsbildschirm zum Anzeigen beim Starten der App (storelogo.png).
  • Windows-Bibliothek für JavaScript (WinJS) im Ordner "Verweise".
  • Cascading Stylesheets (CSS), die Ihrer App das moderne Windows-Erscheinungsbild verleihen.
  • Eine Startseite (default.html) und eine zugehörige JavaScript-Datei (default.js), die beide beim Start der App ausgeführt werden.

Doppelklicken Sie zum Anzeigen und Bearbeiten einer Datei im Projektmappen-Explorer auf die gewünschte Datei.

Schritt 2: Starten der App

Sie haben nun eine sehr einfache App erstellt. Falls Sie wissen möchten, wie sie aussieht, drücken Sie F5, um die App mit dem Emulator für Windows Phone 8.1 zu erstellen, bereitzustellen und zu starten. Wenn Sie den Emulator zum ersten Mal starten, dauert das Laden unter Umständen einige Minuten. Zunächst erscheint ein standardmäßiger Begrüßungsbildschirm. Der Begrüßungsbildschirm setzt sich aus einem Bild (splashscreen.png) und einer Hintergrundfarbe zusammen, die in der Manifestdatei der App angegeben ist. Weitere Informationen zur Anpassung des Begrüßungsbildschirms finden Sie unter Hinzufügen eines Begrüßungsbildschirms.

Nach dem Begrüßungsbildschirm wird Ihre App angezeigt. Sie enthält einen schwarzen Bildschirm mit dem Text " Hier Inhalt einfügen".

App "HelloWorld"

Klicken Sie zum Beenden der App auf der Visual Studio-Symbolleiste auf das Symbol zum Beenden. Ihre App wird beendet, aber der Emulator bleibt geöffnet, damit Sie die App im Emulator schnell wieder bearbeiten, bereitstellen und starten können (Sie können eine App bearbeiten, während sie im Emulator ausgeführt wird).

Viel zu bieten hat die App zwar noch nicht, aber trotzdem: Herzlichen Glückwunsch! Sie haben Ihre erste App erstellt!

Schritt 3: Anpassen der Startseite

Eine der Dateien, die Visual Studio für Sie erstellt hat, ist default.html. Dies ist die Startseite Ihrer App. Wenn die App ausgeführt wird, zeigt sie den Inhalt der Startseite an. Die Startseite enthält auch Verweise auf die Codedateien und Stylesheets der App. Dies ist die standardmäßige Startseite, die von Visual Studio erstellt wird:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</title>

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

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


Fügen Sie der Datei default.html nun einige neue Inhalte hinzu. Gehen Sie beim Hinzufügen genauso wie bei anderen HTML-Dateien vor, und fügen Sie die Inhalte in das body-Element ein. Sie können Ihre App unter Verwendung von HTML5-Elementen erstellen. Hierbei gelten allerdings einige Ausnahmen. Sie können beispielsweise h1, p, button, div und img verwenden.

Dn629634.wedge(de-de,WIN.10).gifSo passen Sie die Startseite an

  1. Ersetzen Sie den vorhandenen Inhalt im body-Element durch eine Überschrift erster Ebene mit dem Text "Hello, world!", einen Text zum Anfordern des Benutzernamens, ein input-Element zum Akzeptieren des Benutzernamens sowie durch ein button-Element und ein div -Element. Weisen Sie den Elementen input, button und div IDs zu.

    
    <body>
        <h1>Hello, world!</h1>
        <p>What's your name?</p>
        <input id="nameInput" type="text" />
        <button id="helloButton">Say "Hello"</button>
        <div id="greetingOutput"></div>
    </body>
    
    
  2. Drücken Sie F5, um die App auszuführen.

    App "HelloWorld"

    Sie können zwar im input-Element schreiben, doch derzeit passiert nach dem Klicken auf das button-Element noch nichts. Einige Elemente, z. B. button, können Meldungen senden, wenn bestimmte Ereignisse eintreten. Dank der Ereignismeldungen können Sie mit einer Aktion auf das Ereignis reagieren.

    In den nächsten Schritten erstellen Sie daher einen Ereignishandler für das button-Element, der eine personalisierte Begrüßung anzeigt. Anschließend fügen Sie der Datei default.js Ihren Ereignishandlercode hinzu.

Schritt 4: Erstellen eines Ereignishandlers

Eine der Dateien, die von Visual Studio in jedem neuen Projekt erstellt wird, ist /js/default.js. Diese Datei enthält Code zur Behandlung des Lebenszyklus der App. Dies ist ein Konzept, das in Teil 2: Verwalten von App-Lebenszyklus und -Zustand erläutert wird. Dies ist auch die Datei, in der Sie zusätzlichen Code schreiben, um Interaktivität für die Datei default.html zu ermöglichen.

Öffnen Sie vor dem Hinzufügen Ihres eigenen Codes die Datei "default.js", und sehen Sie sich die ersten und letzten Codezeilen in der Datei an:



(function () {
    "use strict";

     // Omitted code 

 })(); 

Diese Codezeilen schließen den Rest des Codes von default.js in eine selbstausführende anonyme Funktion ein. Das Einschließen Ihres Codes in eine selbstausführende anonyme Funktion erleichtert Ihnen das Vermeiden von Namenskonflikten oder Situationen, in denen Sie versehentlich einen Wert ändern, der nicht geändert werden sollte. Außerdem sparen Sie so überflüssige IDs im globalen Namespace, was wiederum der Leistung zugute kommt. Es sieht vielleicht ein bisschen merkwürdig aus, ist aber eine empfehlenswerte Programmiermethode.

Die zweite Codezeile aktiviert den Strict-Modus für Ihren JavaScript-Code. Der Strict-Modus bietet eine zusätzliche Fehlerprüfung für Ihren Code. So verhindert er beispielsweise die Verwendung implizit deklarierter Variablen und die Zuweisung eines Werts zu einer schreibgeschützten Eigenschaft.

Mit dem restlichen Code in default.js werden die Ereignisse activated und checkpoint Ihrer App behandelt. Mit diesen Ereignissen beschäftigen wir uns später noch ausführlicher. Für den Moment müssen Sie nur wissen, dass das activated-Ereignis beim Start Ihrer App ausgelöst wird.

Als Nächstes definieren Sie einen Ereignishandler für das button-Element. Ihr neuer Ereignishandler ruft den Namen des Benutzers aus dem input-Steuerelement nameInput ab und verwendet die Information, um eine Begrüßung an das div -Element greetingOutput auszugeben, das Sie im vorherigen Abschnitt erstellt haben.

Dn629634.wedge(de-de,WIN.10).gifSo erstellen Sie den Ereignishandler

  1. Erstellen Sie in default.js zwischen dem app.oncheckpoint-Ereignishandler und dem Aufruf von app.start eine click-Ereignishandlerfunktion namens buttonClickHandler mit einem einzelnen Parameter namens eventInfo.
    
        function buttonClickHandler(eventInfo) {
     
        }
    
    
  2. Rufen Sie innerhalb Ihres Ereignishandlers den Namen des Benutzers aus dem input-Steuerelement nameInput ab, und erstellen Sie damit eine Begrüßung. Zeigen Sie das Ergebnis mithilfe des div -Elements greetingOutput an.
    
        function buttonClickHandler(eventInfo) {
            // Get the user's name input
            var userName = document.getElementById("nameInput").value;
    
            // Create the greeting string and set the greeting output to it
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString;
        }
    
    

Als Nächstes registrieren Sie Ihren Ereignishandler.

Schritt 5: Registrieren des Ereignishandlers beim App-Start

Jetzt müssen Sie nur noch den Ereignishandler für die Schaltfläche registrieren. Die empfohlene Vorgehensweise für die Registrierung eines Ereignishandlers ist der Aufruf von addEventListener im Code. Ein guter Zeitpunkt für die Registrierung des Ereignishandlers ist die Aktivierung Ihrer App. Praktischerweise hat Visual Studio in der Datei default.js Code generiert, der den app.onactivated-Ereignishandler enthält. Damit wird die App-Aktivierung behandelt.



    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

Der Code prüft innerhalb des onactivated-Handlers, welche Aktivierungsart vorliegt. Es gibt viele Arten von Aktivierungen. Die App wird beispielsweise aktiviert, wenn sie vom Benutzer gestartet wird und wenn der Benutzer eine Datei öffnen möchte, die mit der App verknüpft ist. (Weitere Informationen finden Sie unter Anwendungslebenszyklus.)

Für Ihre App empfiehlt sich die Verwendung der launch-Aktivierung. Eine App wird gestartet (launched), wenn sie nicht ausgeführt und dann von einem Benutzer aktiviert wird.



    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {


Handelt es sich bei der Aktivierung um eine Startaktivierung, prüft der Code, wie die App bei der letzten Ausführung beendet wurde.




            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }


Anschließend wird WinJS.UI.processAll aufgerufen.




            args.setPromise(WinJS.UI.processAll());           
        }
    };

WinJS.UI.processAll wird unabhängig davon aufgerufen, ob die App schon einmal beendet wurde oder ob sie gerade zum ersten Mal gestartet wird. Die WinJS.UI.processAll-Funktion ist in einen Aufruf der setPromise-Methode eingeschlossen, mit dessen Hilfe sichergestellt wird, dass der Begrüßungsbildschirm so lange eingeblendet wird, bis die App-Seite bereit ist.

Tipp  Die WinJS.UI.processAll-Funktion sucht in der Datei default.html nach WinJS-Steuerelementen und initialisiert sie. Bislang haben Sie noch keines dieser Steuerelemente hinzugefügt. Es empfiehlt sich aber, diesen Code zu behalten, falls Sie später noch welche hinzufügen möchten. Weitere Informationen zu WinJS-Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Ein guter Zeitpunkt für die Registrierung von Ereignishandlern für andere Arten von Steuerelementen ist direkt nach dem Aufruf von WinJS.UI.processAll.

Dn629634.wedge(de-de,WIN.10).gifSo registrieren Sie Ihren Ereignishandler

  • Rufen Sie im onactivated-Ereignishandler in default.js das helloButton-Element ab, und registrieren Sie Ihren Ereignishandler für das click-Ereignis mit addEventListener. Fügen Sie diesen Code nach dem Aufruf von WinJS.UI.processAll hinzu.

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll());
    
                // Retrieve the button and register our event handler. 
                var helloButton = document.getElementById("helloButton");
                helloButton.addEventListener("click", buttonClickHandler, false);
    
            }
        };
    
    

Hier sehen Sie den vollständigen Code für die aktualisierte Datei default.js:


// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());

            // Retrieve the button and register your event handler. 
            var helloButton = document.getElementById("helloButton");
            helloButton.addEventListener("click", buttonClickHandler, false);
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    function buttonClickHandler(eventInfo) {
        // Get the user's name input
        var userName = document.getElementById("nameInput").value;

        // Create the greeting string and set the greeting output to it
        var greetingString = "Hello, " + userName + "!";
        document.getElementById("greetingOutput").innerText = greetingString;
    }

    app.start();
})();

Führen Sie die App aus. Wenn Sie Ihren Namen in das Textfeld eingeben und anschließend auf die Schaltfläche klicken, zeigt die App eine personalisierte Begrüßung an.

Eine personalisierte Begrüßung unserer App "HelloWorld"

Hinweis  Weitere Informationen dazu, warum Sie addEventListener zum Registrieren Ihres Ereignisses im Code verwenden, anstatt das onclick-Ereignis im HTML-Code festzulegen, finden Sie unter Programmieren einfacher Apps.

Schritt 6: Anpassen der Startseite mit Stylesheets

Es ist einfach, das Aussehen Ihrer App mithilfe von Cascading Stylesheets, Level 3 (CSS3), so anzupassen, wie Sie dies auch für eine Website durchführen würden.

Die von Visual Studio erstellte Datei default.html enthält einen Verweis auf das WinJS-Stylesheet:


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


Stylesheets haben folgende Vorteile:

  • Nutzung einer Reihe von Stilen, die Ihrer App automatisch das moderne Windows-Erscheinungsbild verleihen. Ihre Steuerelemente sehen sofort gut aus, wenn Sie das Stylesheet einfügen.
  • Automatisches Wechseln zwischen hellen und dunklen Designs in Abhängigkeit des Hintergrunddesigns eines Smartphones.
  • Automatische Unterstützung von Modi mit hohem Kontrast. Bei der Entwicklung dieser Stile wurden hohe Kontraste berücksichtigt, damit Ihre App auch auf einem Gerät im Modus mit hohem Kontrast richtig dargestellt wird.
  • Automatische Unterstützung anderer Sprachen. Die WinJS-Stylesheets wählen automatisch die richtige Schriftart für jede Sprache aus, die Windows Phone 8.1 unterstützt. Sie können sogar mehrere Sprachen in der gleichen App verwenden, die alle richtig dargestellt werden.
  • Automatische Unterstützung anderer Leserichtungen. Stylesheets passen automatisch HTML- und WinJS-Steuerelemente, Layouts und Stile für Sprachen an, die von rechts nach links gelesen werden.

Standardmäßig enthält jede HTML-Seite Ihres Projekts einen Verweis auf "ui-themed.css". Damit wird die Übereinstimmung mit dem Hintergrunddesign des Benutzers erzielt. Im Emulator von Windows Phone wird standardmäßig das dunkle Design verwendet. Probieren Sie aus, was passiert, wenn Sie zum hellen Design wechseln.

Dn629634.wedge(de-de,WIN.10).gifSo wechseln Sie zum hellen Design

  1. Betätigen Sie im Emulator die Schaltfläche home, um zur Startseite zu navigieren, und wischen Sie mit der Maus von rechts nach links, um die Liste mit den Apps zu öffnen. Führen Sie einen Bildlauf nach oben durch, und klicken Sie auf Settings (Einstellungen) und dann auf start+theme (Start + Design). Ändern Sie die Auswahl für background (Hintergrund) in light (Hell).
  2. Starten Sie Ihre App über Visual Studio neu (falls die App bereits ausgeführt wird, müssen Sie sie herunterfahren und neu starten, bevor sich das Design ändert). Die App verwendet jetzt das helle Stylesheet.

    App "HelloWorld" mit dem hellen Stylesheet

Dies funktioniert, weil Visual Studio automatisch vier CSS-Dateien generiert hat, als Sie das Projekt erstellt haben:

  • default.css
  • ui-themed.css
  • ui-themed.theme-dark.css
  • ui-themed.theme-light.css

Wenn Sie auf ui-themed.css verweisen, prüft WinJS automatisch das Design auf dem Gerät des Benutzers, sobald Ihre App ausgeführt wird. Dann wird je nach Wunsch des Benutzers entweder ui-themed.theme-dark.css oder ui-themed.theme-light.css angewendet. Wenn Sie Ihre App manuell so entwerfen möchten, dass sie ein bestimmtes Design verwendet, können Sie diesen Verweis auf ui-themed.css durch einen speziellen Verweis auf das helle oder dunkle Design ersetzen. Beispiel für ein dunkles Design:



    <!-- HelloWorld references -->
    <link href="/css/ui-themed.theme-dark.css" rel="stylesheet" />


Erstellen eigener Stile

Wenn Sie das Erscheinungsbild Ihrer App anpassen möchten, müssen Sie keinesfalls die WinJS-Stile verwerfen und ganz von vorn beginnen. Sie können auf ganz einfache Weise inkrementelle Änderungen an der Formatierung vornehmen, indem Sie nur die Stile überschreiben, die Sie ändern möchten.

Es ist sogar besser, die WinJS-Stile zu überschreiben, anstatt eigene zu erstellen. Wenn Ihre App im Modus mit hohem Kontrast ausgeführt wird, werden alle Änderungen an den Farben der Standardstile automatisch durch ein Farbschema überschrieben, das einen hohen Kontrast unterstützt.

Sie können sämtliche Stile im Standardstylesheet überschreiben, indem Sie Ihr eigenes Stylesheet erstellen und hinter dem WinJS-Stylesheet einfügen: Dies übernimmt die Vorlage Blank App für Sie. Sie erstellt ein Stylesheet namens default.css, mit dem Sie Ihre eigenen Stile erstellen können.


    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />


Dn629634.wedge(de-de,WIN.10).gifSo erstellen Sie Ihre eigenen Stile

  1. Als Erstes fügen Sie dem HTML-Code div-Elemente und -Klassen hinzu, um das Festlegen von Stilen zu vereinfachen.
    1. Öffnen Sie in Visual Studio die Datei default.html.
    2. Setzen Sie das class-Attribut der Kopfzeile auf "headerClass". Erstellen Sie ein div-Element, und verwenden Sie es als Container für den Hauptinhalt Ihrer Seite. Setzen Sie die class-Einstellung auf "mainContent".
      
      
      <body>
          <h1 class="headerClass">Hello, world!</h1>
          <div class="mainContent">
              <p>What's your name?</p>
              <input id="nameInput" type="text" />
              <button id="helloButton">Say "Hello"</button>
              <div id="greetingOutput"></div>
          </div>
      </body>
      
      
      
  2. Öffnen Sie die Datei default.css, um die Stile zu definieren.

    Momentan ist sie noch ziemlich leer:

    
    body {
    }
    
    
    
  3. Fügen Sie einige CSS-Klassen für die Verwaltung der drei Hauptabschnitte hinzu, die in der App derzeit vorhanden sind: Kopfzeile, Hauptinhalt und Begrüßungsausgabe. Fügen Sie zuerst eine Auffüllung hinzu, damit die Elemente sich nicht direkt am Bildschirmrand befinden. Legen Sie als Nächstes für die Begrüßungsausgabe eine größere Schriftart fest, damit sie für Benutzer besser sichtbar ist.

    
    
    body {
    }
    
    .headerClass {
        padding:10px; 
    }
    .mainContent {
        padding:15px;
    }
    
    #greetingOutput {
        font-size:x-large; 
    }
    
    
    
  4. Führen Sie die App aus. Beachten Sie die geänderten Abstände.

    CSS in der App "Hello, world"

Apps unterstützen CSS3. Dies bedeutet, dass Sie Ihre App auf vielfältige Art und Weise anpassen können. (Weitere Informationen zum Gestalten Ihrer App finden Sie unter Schnellstart: Formatieren von Steuerelementen.)

Schritt 7: Ein Steuerelement aus der Windows-Bibliothek für JavaScript hinzufügen

Zusätzlich zu den standardmäßigen HTML-Steuerelementen können Sie viele WinJS-Steuerelemente in Ihrer App verwenden, z. B. die Steuerelemente WinJS.UI.FlipView, WinjS.UI.ListView und WinJS.UI.ToggleSwitch.

Im Gegensatz zu HTML-Steuerelementen besitzen WinJS-Steuerelemente keine dedizierten Markupelemente: Sie können ein ToggleSwitch-Steuerelement erstellen, indem Sie z. B. ein <toggle />-Element hinzufügen. Zum Hinzufügen eines WinJS-Steuerelements erstellen Sie ein div-Element und geben mit dem data-win-control-Attribut den gewünschten Steuerelementtyp an. Anschließend können Sie die Eigenschaften des Elements mit dem data-win-options-Attribut angeben.

Fügen Sie als Nächstes ein ToggleSwitch-Steuerelement hinzu, mit dem Benutzer schnell zwischen zwei Optionen umschalten können: "Ein" und "Aus". Legen Sie das title-Attribut von ToggleSwitch fest, damit Sie den Zweck des Umschalters für Benutzer angeben können.

Dn629634.wedge(de-de,WIN.10).gifSo fügen Sie ein Windows-Bibliothek für JavaScript-Steuerelement hinzu

  1. Fügen Sie in der Datei default.html hinter dem div-Element greetingOutput ein label-Element und ein ToggleSwitch-Steuerelement hinzu.

    
    
    <body>
        <h1 class="headerClass">Hello, world!</h1>
        <div class="mainContent">
            <p>What's your name?</p>
            <input id="nameInput" type="text" />
            <button id="helloButton">Say "Hello"</button>
            <div id="greetingOutput"></div>
            <br />
            <div id="toggleControlDiv" data-win-control="WinJS.UI.ToggleSwitch" 
                data-win-options="{title: 'Greeting Color'}"></div>
        </div>
    </body>
    
    
    

    Ihre Seite muss WinJS.UI.processAll aufrufen, damit ToggleSwitch geladen wird. Da für Ihre App eine Visual Studio-Vorlage verwendet wird, enthält die Datei default.js schon einen Aufruf von WinJS.UI.processAll, wie bereits in Schritt 5 erläutert wurde. Sie müssen daher keinen Code hinzufügen.

  2. Führen Sie die App aus, und sehen Sie sich das neue ToggleSwitch-Steuerelement an.

    App "Hello, world" mit Umschalter

Wenn Sie das ToggleSwitch-Steuerelement jetzt betätigen, tut sich noch nichts. Sie müssen einen Ereignishandler hinzufügen, um eine Aktion auszuführen, wenn der Benutzer den Zustand des Umschalters ändert.

Schritt 8: Registrieren eines Ereignishandlers für ein Steuerelement der Windows-Bibliothek für JavaScript

Das Registrieren eines Ereignishandlers für ein WinJS-Steuerelement unterscheidet sich etwas vom Registrieren eines Ereignishandlers für ein Standard-HTML-Steuerelement. Wie bereits erwähnt, ruft der onactivated-Ereignishandler die WinJS.UI.processAll-Methode zur Initialisierung von WinJS in Ihrem Markup auf. WinJS.UI.processAll ist in einen Aufruf der setPromise-Methode eingeschlossen.



            args.setPromise(WinJS.UI.processAll());           


Wenn ToggleSwitch ein Standard-HTML-Steuerelement wäre, könnten Sie nach diesem Aufruf von WinJS.UI.processAll Ihren Ereignishandler hinzufügen. Bei einem WinJS-Steuerelement wie dem hier verwendeten ToggleSwitch ist es aber etwas komplizierter. Da WinJS.UI.processAll das ToggleSwitch-Steuerelement erstellt, können Sie den Ereignishandler für ToggleSwitch erst dann hinzufügen, wenn WinJS.UI.processAll die Verarbeitung beendet hat.

Wäre WinJS.UI.processAll eine normale Methode, könnten wir den ToggleSwitch-Ereignishandler direkt nach dem Aufruf registrieren. Die WinJS.UI.processAll-Methode ist aber asynchron, sodass nachfolgender Code unter Umständen bereits ausgeführt wird, bevor WinJS.UI.processAll abgeschlossen wurde. Sie verwenden daher ein Promise-Objekt, um eine Benachrichtigung über den Abschluss von WinJS.UI.processAll zu erhalten.

Wie alle asynchronen WinJS-Methoden gibt WinJS.UI.processAll ein Promise-Objekt zurück. Ein Promise-Objekt ist eine Zusage, dass in Zukunft etwas geschieht. Wenn dies der Fall ist, sagen wir, dass das Promise-Objekt (also die Zusage) erfüllt wurde.

Promise-Objekte verfügen über eine then-Methode, die als Parameter eine "completed"-Funktion übernimmt. Das Promise-Objekt ruft diese Funktion auf, nachdem es abgeschlossen wurde.

Indem Sie Ihren Code einer "completed"-Funktion hinzufügen und an die then-Methode des Promise-Objekts übergeben, können Sie sicher sein, dass Ihr Code nach dem Abschluss von WinJS.UI.processAll ausgeführt wird.

Dn629634.wedge(de-de,WIN.10).gifSo registrieren Sie einen Ereignishandler für ein Steuerelement der Windows-Bibliothek für JavaScript

  1. Ändern Sie den Stil der Begrüßung in Abhängigkeit davon, ob der Umschalter auf "Ein" oder "Aus" festgelegt ist. Fügen Sie in Ihrer Datei css eine neue CSS-Klasse hinzu, um diesen abweichenden Stil darzustellen, den Sie bei eingeschaltetem Umschalter mit der ID "toggle-style" anwenden. In diesem Beispiel ändern wir die Farbe des Texts in Blau.
    
    
    .toggle-on {
        color:blue; 
    }
    
    
    
  2. Erstellen Sie in der Datei default.js einen Ereignishandler für das change-Ereignis des ToggleSwitch-Steuerelements mit dem Namen toggleChanged. Weisen Sie den Ereignishandler an, den Status des Umschaltsteuerelements zu prüfen und die neue CSS-Klasse je nach Status anzuwenden oder zu entfernen.

    
    
        function toggleChanged(eventInfo) {
            // Get the toggle control
            var toggleControl = document.getElementById("toggleControlDiv").winControl;
    
            // Get the greeting output
            var greetingOutput = document.getElementById("greetingOutput");
    
            // Set the CSS class for the greeting output based on the toggle's state
            if (toggleControl.checked == true) {
                greetingOutput.setAttribute("class", "toggle-on");
            }
            else {
                greetingOutput.removeAttribute("class", "toggle-on");
            }
        }
    
    
    
  3. Aktualisieren Sie den Code im onactivated-Ereignishandler, der WinJS.UI.processAll aufruft, indem Sie einen Aufruf der then-Methode hinzufügen und eine "completed"-Funktion an die Methode übergeben. Rufen Sie in der "completed"-Funktion das toggleControlDiv-Element ab, in dem sich das ToggleSwitch-Steuerelement befindet. Rufen Sie dann das wirkliche ToggleSwitch-Steuerelement über die winControl-Eigenschaft ab. In diesem Beispiel wird die completed-Funktion inline definiert.

    
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Toggle control.
                    var toggleControlDiv = document.getElementById("toggleControlDiv");
    
                    // Retrieve the actual Toggle control.
                    var toggleControl = toggleControlDiv.winControl;
    
                    // Register the event handler. 
                    toggleControl.addEventListener("change", toggleChanged);
    
                }));
    
    
  4. Es ist völlig in Ordnung, Ereignishandler für HTML-Steuerelemente nach dem Aufruf von WinJS.UI.processAll zu registrieren, aber Sie können sie auch innerhalb der completed-Funktion registrieren. Der Einfachheit halber verlegen Sie alle Registrierungen von Ereignishandlern ins Innere des then-Ereignishandlers.

    Der aktualisierte onactivated-Ereignishandler sieht wie folgt aus:

    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
                }
                args.setPromise(WinJS.UI.processAll().then(function completed() {
    
                    // Retrieve the div that hosts the Toggle control.
                    var toggleControlDiv = document.getElementById("toggleControlDiv");
    
                    // Retrieve the actual Toggle control.
                    var toggleControl = toggleControlDiv.winControl;
    
                    // Register the event handler. 
                    toggleControl.addEventListener("change", toggleChanged);
    
                    // Retrieve the button and register our event handler. 
                    var helloButton = document.getElementById("helloButton");
                    helloButton.addEventListener("click", buttonClickHandler, false);
    
                }));
            }
        };
    
    
  5. Führen Sie die App aus. Wenn Sie den ToggleSwitch betätigen, ändert sich der Stil des Inhalts innerhalb des div-Elements "greetingOutput".

App "Hello, World" mit Umschalter zum Ändern der CSS-Daten für die Begrüßung

Dies ist ein einfaches Beispiel, das nur die Grundlagen der Verwendung von WinJS-Steuerelementen veranschaulicht. Sie können Ihrer App leicht komplexere Logik und Steuerelemente hinzufügen, indem Sie genauso vorgehen, um eine viel größere Wirkung zu erzielen. Eine Liste mit allen verfügbaren Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lernprogramm abgeschlossen! Sie haben erfahren, wie Sie einer App Inhalte und Interaktivität hinzufügen und Stile auf die App anwenden.

Herunterladen des Beispiels

Benötigen Sie Hilfe, oder möchten Sie den Lernerfolg überprüfen? Laden Sie das Beispiel für die ersten Schritte mit JavaScript herunter.

Nächste Schritte

Im zweiten Teil dieser Reihe erfahren Sie mehr zur Funktionsweise des App-Lebenszyklus sowie zum Speichern des App-Zustands. Wechseln Sie zu Teil 2: Verwalten von App-Lebenszyklus und -Zustand.

 

 

Anzeigen:
© 2014 Microsoft