Teil 1: Erstellen der App „Hello, world“ (HTML)

Applies to Windows only

In diesem Lernprogramm erfahren Sie, wie Sie die einfache Windows Store-App „Hello, world“ mithilfe von JavaScript erstellen. Hierbei handelt es sich um das erste von fünf Lernprogrammen zum Erstellen von Windows Store-Apps.

In diesem Lernprogramm lernen Sie Folgendes:

  • Erstellen eines neuen Projekts
  • Hinzufügen von HTML-Inhalt zu Ihrer Startseite
  • Behandeln von Finger-, Stift- und Mauseingaben
  • Wechseln zwischen den Stylesheets für hell und dunkel
  • Erstellen eigener Stile
  • Verwendung einer Windows-Bibliothek für JavaScript-Steuerelemente

Hier zeigen wir Ihnen, wie Sie eine Windows Store-App mit HTML, JavaScript und CSS erstellen.

Tipp  

Wenn Sie das Lernprogramm überspringen und direkt den Code aufrufen möchten, gehen Sie zu Erste Schritte mit JavaScript: Vollständiger Code für die Lernprogrammreihe.

Vorbereitung

  • Zum Durcharbeiten dieses Lernprogramms benötigen Sie Windows 8.1 und Microsoft Visual Studio Express 2013 für Windows. Sie können diese Software auf der Seite Downloads herunterladen.
  • Außerdem benötigen Sie eine Entwicklerlizenz. Entsprechende Anweisungen finden Sie unter Anfordern einer Entwicklerlizenz.

Schritt 1: Erstellen eines neuen Projekts in Visual Studio

Zunächst erstellen wir eine neue App namens HelloWorld. Gehen Sie dazu wie folgt vor:

  1. Starten von Visual Studio Express 2013 für Windows

    Die Startseite von Visual Studio Express 2013 für Windows wird angezeigt.

    (Im weiteren Verlauf nennen wir Visual Studio Express 2013 für Windows der Einfachheit halber nur noch "Visual Studio".)

  2. Klicken Sie im Menü Datei auf Neues Projekt.

    Das Dialogfeld Neues Projekt wird geöffnet. Im linken Bereich des Dialogfelds können Sie die Art der anzuzeigenden Vorlagen auswählen.

  3. Erweitern Sie im linken Bereich die Option Installiert und anschließend Vorlagen und JavaScript. Wählen Sie dann den Vorlagentyp Windows Store aus. Im mittleren Bereich des Dialogfelds sehen Sie eine Liste mit Projektvorlagen für JavaScript.

    Das Fenster "Neues Projekt"

    In diesem Lernprogramm verwenden wir die Vorlage Blank App. Diese Vorlage erstellt eine minimale Windows Store-App, 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.

  4. Wählen Sie im mittleren Bereich die Vorlage Blank App aus.
  5. Geben Sie im Textfeld Name den Namen "HelloWorld" ein.
  6. Deaktivieren Sie das Kontrollkästchen Projektmappenverzeichnis erstellen.
  7. Klicken Sie auf OK, um das Projekt zu erstellen.

    Visual Studio erstellt Ihr Projekt und zeigt es im Projektmappen-Explorer an.

    Der Projektmappen-Explorer für das Projekt "HelloWorld"

Blank App ist zwar nur eine Minimalvorlage, umfasst aber trotzdem eine Reihe von Dateien:

  • Eine Manifestdatei (package.appxmanifest), die Ihre App beschreibt (Name, Beschreibung, Kachel, Startseite, Begrüßungsbildschirm usw.) und die in der App enthaltenen Dateien aufführt.
  • Einen Satz mit kleinen und großen Logobildern (logo.png und smalllogo.png), die auf der Startseite angezeigt werden.
  • Ein Bild der App für den Windows Store (storelogo.png).
  • Einen Begrüßungsbildschirm (splashscreen.png), der beim Start der App angezeigt wird.
  • CSS- und Codedateien für WinJS (im Ordner "References").
  • Eine Startseite (default.html) und eine entsprechende JavaScript-Datei (default.js), die beim Start der App ausgeführt werden.

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

Diese Dateien werden für alle Windows Store-Apps mit JavaScript benötigt. Sie sind Teil jedes Projekts, das Sie mit Visual Studio erstellen.

Schritt 2: Starten der App

Wir haben nun eine sehr einfache App erstellt. Falls Sie wissen möchten, wie sie aussieht, drücken Sie F5, um die App zu erstellen, bereitzustellen und zu starten. Zunächst erscheint ein standardmäßiger Begrüßungsbildschirm. Der Begrüßungsbildschirm setzt sich zusammen aus einem Bild (splashscreen.png) und einer Hintergrundfarbe (in der Manifestdatei unserer App angegeben). Er lässt sich ganz einfach anpassen, allerdings gehen wir an dieser Stelle nicht weiter darauf ein. (Informationen zur entsprechenden Vorgehensweise finden Sie unter Hinzufügen eines Begrüßungsbildschirms.)

Der Begrüßungsbildschirm verschwindet, und unsere App wird angezeigt. Sie enthält einen schwarzen Bildschirm mit dem Text "Content goes here".

Unsere App "HelloWorld"

Es gibt keine Schaltfläche bzw. keinen Befehl zum Schließen der App. Wischen Sie zum Schließen der App vom oberen Bildschirmrand in Richtung des unteren Bildschirmrands, oder drücken Sie Alt+F4. Wechseln Sie zur Startseite. Beachten Sie, dass durch die Bereitstellung der App die entsprechende Kachel zur letzten Gruppe auf der Startseite hinzugefügt wird. Wenn Sie die App erneut ausführen möchten, tippen oder klicken Sie auf der Startseite auf die Kachel, oder drücken Sie in Visual Studio F5, um die App im Debugger auszuführen.

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

Wenn Sie das Debuggen der App beenden möchten, drücken Sie ALT+TAB, um zu Microsoft Visual Studio zurückzukehren. Klicken Sie in Visual Studio auf Debuggen > Debuggen beenden, um die App zu schließen. Solange sie sich im Debugging-Modus befindet, können Sie die App in Visual Studio nicht bearbeiten.

Weitere Informationen zum Starten der App in Visual Studio finden Sie unter Ausführen von Windows Store-Apps aus Visual Studio.

Schritt 3: Anpassen der Startseite

Eine der Dateien, die Visual Studio für uns erstellt hat, ist default.html (die Startseite unserer 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. Hier sehen Sie die Startseite, die Visual Studio für uns erstellt hat:


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

    <!-- 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 wir der Datei default.html doch ein paar neue Inhalte hinzu. Gehen Sie beim Hinzufügen genauso vor wie bei anderen HTML-Dateien, 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 wenige Ausnahmen. Sie können also HTML5-Elemente wie h1, p, button, div und img verwenden.

Hh986964.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- und ein div -Element. Weisen Sie IDs für input, button und div 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. Führen Sie die App aus.

    Unsere App "HelloWorld" mit neuem Inhalt

    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 dieser Ereignismeldungen können Sie mit einer Aktion auf das Ereignis reagieren. Sie fügen den Code zum Reagieren auf das Ereignis in eine Ereignishandlermethode ein.

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

Schritt 4: Erstellen eines Ereignishandlers

Bei der Erstellung unseres neuen Projekts hat Visual Studio eine Datei /js/default.js erstellt. 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. In dieser Datei schreiben Sie außerdem zusätzlichen Code, um Interaktivität für die Datei default.html zu ermöglichen.

Öffnen Sie die Datei default.js.

Vor dem Hinzufügen unseres eigenen Codes sehen wir uns zunächst die ersten und die letzten Codezeilen in der Datei an:



(function () {
    "use strict";

     // Omitted code 

 })(); 

Falls Sie sich jetzt fragen, was hier vor sich geht: Diese Codezeilen schließen den Rest des Codes von default.js in eine selbstausführende anonyme Funktion ein.

Jetzt fragen Sie sich vermutlich, warum wir unseren Code in eine selbstausführende anonyme Funktion einschließen. Ganz einfach: Dadurch lassen sich Namenskonflikte oder versehentliche Änderungen von Werten leichter vermeiden. 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 nächste 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.

Sehen Sie sich den restlichen Code in default.js an. Er behandelt das activated- und das checkpoint-Ereignis Ihrer App. Mit diesen Ereignissen beschäftigen wir uns später noch ausführlicher. Für den Moment genügt es, wenn Sie wissen, dass das activated-Ereignis beim Start Ihrer App ausgelöst wird.

Definieren wir nun einen Ereignishandler für Ihr button-Element. Unser 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 letzten Abschnitt erstellt haben.

Verwenden von Ereignissen für Touch-, Maus- und Stifteingaben

Bei Windows 8.1 müssen Sie sich keine Gedanken über die Unterschiede zwischen Toucheingaben, Mauseingaben oder anderen Zeigereingabearten machen. Sie können ganz einfach gewohnte Ereignisse wie click verwenden, da diese für alle Eingabearten funktionieren.

Tipp   Ihre App kann auch die neuen Ereignisse MSPointer* und MSGesture* verwenden. Diese funktionieren für Finger-, Maus- und Stifteingaben und stellen zusätzliche Informationen über das Gerät bereit, mit dem das Ereignis ausgelöst wurde. Weitere Informationen finden Sie unter Reagieren auf Benutzerinteraktionen sowie unter Gesten, Manipulationen und Interaktionen.

Im nächsten Schritt erstellen wir den Ereignishandler.

Hh986964.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 des 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) {
            var userName = document.getElementById("nameInput").value;
            var greetingString = "Hello, " + userName + "!";
            document.getElementById("greetingOutput").innerText = greetingString; 
        }
    
    

Der Ereignishandler ist jetzt default.js hinzugefügt. Nun müssen wir ihn registrieren.

Schritt 5: Registrieren des Ereignishandlers beim App-Start

Jetzt müssen wir nur noch den Ereignishandler bei der 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 der App. Praktischerweise hat Visual Studio in der Datei default.js in Form des app.onactivated-Ereignishandlers bereits Code für die Behandlung der App-Aktivierung generiert. Diesen Code sehen wir uns einmal genauer an.



    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 verschiedene 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 App-Lebenszyklus.)

Wir interessieren uns für die 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 erst dann ausgeblendet wird, wenn 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 wir 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 Punkt für die Registrierung von Ereignishandlern für Steuerelemente, die keine WinJS-Steuerelemente sind, ist direkt nach dem Aufruf von WinJS.UI.processAll.

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

  • Rufen Sie im onactivated-Ereignishandler in default.jshelloButton ab und registrieren Sie unseren 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 our 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) {

        var userName = document.getElementById("nameInput").value;
        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  Eine ausführliche Erklärung dafür, warum wir unser Ereignis im Code mittels addEventListener registrieren, anstatt das onclick-Ereignis in HTML festzulegen, finden Sie unter Programmieren einfacher Apps.

Schritt 6: Anpassen der Startseite mit Stylesheets

Das Erscheinungsbild Ihrer App lässt sich ganz einfach anpassen. In Windows Store-Apps können Sie – ähnlich wie bei Websites – Cascading Stylesheets der Ebene 3 (CSS3) verwenden.

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



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


Sie möchten wissen, was dieses Stylesheet bietet? Eine ganze Menge! Die Vorteile im Überblick:

  • Eine Reihe von Stilen, die unserer App automatisch zu einem Windows 8-konformen Erscheinungsbild verhelfen. Allein durch Hinzufügen des Stylesheets erhalten wir optisch ansprechende Steuerelemente, die zudem mit berührungsgesteuerten Displays verwendet werden können.
  • Automatische Unterstützung von Modi mit hohem Kontrast. Bei der Entwicklung dieser Stile wurden hohe Kontraste berücksichtigt, sodass unsere App auch auf einem Gerät im Modus mit hohem Kontrast korrekt dargestellt wird.
  • Automatische Unterstützung anderer Sprachen. Die WinJS-Stylesheets wählen automatisch die richtige Schriftart für jede Sprache aus, die Windows 8 unterstützt. Sie können sogar mehrere Sprachen in derselben App verwenden, ohne die korrekte Darstellung zu beeinträchtigen.
  • Automatische Unterstützung anderer Leserichtungen. Das Stylesheet passt 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 für Ihr Projekt einen Verweis auf das dunkle Stylesheet. Darüber hinaus verfügt WinJS auch über ein helles Stylesheet. Probieren wir doch einmal aus, wie das aussieht.

Hh986964.wedge(de-de,WIN.10).gifSo wechseln Sie zum hellen Stylesheet

  1. Suchen Sie in der Datei default.html nach dem Verweis auf das dunkle Stylesheet:
    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    
    
    

    Ersetzen Sie ihn durch Folgendes:

    
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    
    
    
  2. Führen Sie Ihre App aus. Sie verwendet jetzt das helle Stylesheet.

    Unsere App "HelloWorld" mit dem hellen Stylesheet

Welches Stylesheet sollten Sie verwenden? Das bleibt ganz Ihnen überlassen. Bei Apps, die meist Bilder oder Videos anzeigen, sollten Sie das dunkle Stylesheet verwenden, während bei Apps mit viel Text das helle Stylesheet empfohlen wird. (Falls Sie ein benutzerdefiniertes Farbschema verwenden, verwenden Sie das Stylesheet, das am besten zum Erscheinungsbild Ihrer App passt.)

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 schrittweise Änderungen an der Formatierung vornehmen, indem Sie nur die Stile überschreiben, die Sie ändern möchten.

Es wird sogar empfohlen, die WinJS-Stile zu überschreiben, statt 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.



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

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


Erstellen wir nun ein paar eigene Stile.

  1. Als Erstes fügen wir dem HTML-Code einige div-Elemente und -Klassen hinzu, um das Auswählen 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. Nun können wir unsere Stile definieren. Öffnen Sie die Datei default.css.

    Momentan ist sie noch ziemlich leer:

    
    body {
    }
    
    
    
  3. Wie in Gestalten einer App-Seite beschrieben, hat die Überschrift einen oberen Rand von 45 Pixeln und einen linken Rand von 120 Pixeln. Der Inhaltsbereich hat ebenfalls einen linken Rand von 120 Pixeln sowie einen oberen Rand von 31 Pixeln und einen unteren Rand von 50 Pixeln.

    Definieren Sie die headerClass- und die mainContent-Klasse, und legen Sie deren Ränder gemäß diesen Richtlinien fest. Erstellen Sie außerdem einen Stil für das div-Element greetingOutput, der die Höhe auf 20 Pixel und den unteren Rand auf 40 Pixel festlegt.

    
    
    body {
    }
    
    .headerClass {
        margin-top: 45px;
        margin-left: 120px; 
    }
    
    .mainContent {
        margin-top: 31px;
        margin-left: 120px;
        margin-bottom: 50px; 
    }
    
    #greetingOutput {
        height: 20px; 
        margin-bottom: 40px;
    }
    
    
  4. Führen Sie die App aus. Beachten Sie die geänderten Abstände.

    Die App "Hello, world" mit Rändern

Windows Store-Apps unterstützen CSS3. Das 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

Neben Standard-HTML-Steuerelementen können Sie in Ihrer Windows Store-App mit JavaScript alle neuen Steuerelemente aus WinJS verwenden, z. B. die Steuerelemente WinJS.UI.DatePicker, WinJS.UI.FlipView, WinjS.UI.ListView und WinJS.UI.Rating.

Im Gegensatz zu HTML-Steuerelementen besitzen WinJS-Steuerelemente keine dedizierten Markupelemente: Sie können ein Rating-Steuerelement erstellen, indem Sie z. B. ein <rating />-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. Zum Hinzufügen eines Rating-Steuerelements legen Sie das Attribut auf "WinJS.UI.Rating" fest.

Nun fügen wir unserer App ein Rating-Steuerelement hinzu.

  1. Fügen Sie in der Datei default.html hinter dem div-Element greetingOutput ein label-Element und ein Rating-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>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>
        </div>
    </body>
    
    
    

    Damit das Rating-Steuerelement geladen werden kann, muss die Seite WinJS.UI.processAll aufrufen. Da in der App eine der Visual Studio-Vorlagen verwendet wird, enthält unser default.js bereits einen Aufruf von WinJS.UI.processAll, wie bereits in Schritt 5 erläutert wurde. Sie müssen daher keinen Code schreiben.

  2. Führen Sie die App aus. Beachten Sie das neue Rating-Steuerelement.

    Die App "Hello, world" mit einem Steuerelement der Windows-Bibliothek für JavaScript

Jetzt ändert sich beim Klicken auf das Rating-Steuerelement die Bewertung, aber ansonsten geschieht nichts weiter. Wir wollen nun einen Ereignishandler verwenden, der etwas tut, wenn der Benutzer die Bewertung ä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. Weiter oben wurde erwähnt, dass der onactivated-Ereignishandler die WinJS.UI.processAll-Methode zur Initialisierung von WinJS in Ihrem Markup aufruft. WinJS.UI.processAll ist in einen Aufruf der setPromise-Methode eingeschlossen.



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


Wenn Rating 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 Rating ist es jedoch etwas komplizierter. Da WinJS.UI.processAll das Rating-Steuerelement für uns erstellt, können wir den Ereignishandler für Rating erst dann hinzufügen, wenn WinJS.UI.processAll die Verarbeitung beendet hat.

Wäre WinJS.UI.processAll eine normale Methode, könnten wir den Rating-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. Wie gehen wir nun vor? Wir lassen uns von einem Promise-Objekt über den Abschluss von WinJS.UI.processAll benachrichtigen.

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.

Durch Einfügen des Codes in eine "completed"-Funktion und deren Übergabe an die then-Methode des Promise-Objekts können Sie gewiss sein, dass ihr Code nach dem Abschluss von WinJS.UI.processAll ausgeführt wird.

  1. Wir geben nun den entsprechenden Wert aus, wenn der Benutzer eine Bewertung auswählt. Erstellen Sie in der Datei default.html ein div-Element, das die Bewertung anzeigt, und weisen Sie ihm id "ratingOutput" zu.
    
    
    <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>
            <label for="ratingControlDiv">
                Rate this greeting: 
            </label>
            <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
            </div>     
            <div id="ratingOutput"></div>
        </div>
    </body>
    
    
    
  2. Erstellen Sie in der Datei default.js einen Handler für das change-Ereignis des Rating-Steuerelements mit dem Namen ratingChanged. Der eventInfo-Parameter enthält eine detail.tentativeRating-Eigenschaft, die die neue Benutzerbewertung liefert. Rufen Sie diesen Wert ab, und zeigen Sie ihn im div-Element für die Ausgabe an.

    
    
        function ratingChanged(eventInfo) {
    
            var ratingOutput = document.getElementById("ratingOutput");
            ratingOutput.innerText = eventInfo.detail.tentativeRating; 
        }
    
    
    
  3. Aktualisieren Sie den Code im Handler für das onactivated-Ereignis, der WinJS.UI.processAll aufruft, indem Sie einen Aufruf der then-Methode hinzufügen und ihr eine completed-Funktion übergeben. Rufen Sie in der completed-Funktion das ratingControlDiv-Element ab, in dem sich das Rating-Steuerelement befindet. Rufen Sie dann das wirkliche Rating-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 Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                }));
    
    
  4. Es ist zwar eleganter, Ereignishandler für HTML-Steuerelemente nach dem Aufruf von WinJS.UI.processAll zu registrieren, aber sie können auch innerhalb der completed-Funktion registriert werden. Der Einfachheit halber gehen wir einen Schritt weiter und verlegen alle Registrierungen von Ereignishandlern ins Innere des then Ereignishandlers.

    Hier ist der aktualisierte onactivated-Ereignishandler:

    
        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 Rating control.
                    var ratingControlDiv = document.getElementById("ratingControlDiv");
    
                    // Retrieve the actual Rating control.
                    var ratingControl = ratingControlDiv.winControl;
    
                    // Register the event handler. 
                    ratingControl.addEventListener("change", ratingChanged, false);
    
                    // 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 eine Bewertung auswählen, wird der numerische Wert unter dem Rating-Steuerelement ausgegeben.

Hinweis  In diesem und dem letzten Abschnitt haben wir die erforderlichen Kenntnisse für die anfängliche Verwendung der WinJS-Steuerelemente gestreift. Weitere Informationen und eine Liste der Steuerelemente finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben dieses Lernprogramm vollständig durchgearbeitet! Sie haben gelernt, wie Sie einer Windows Store-App Inhalte hinzufügen. Darüber hinaus wissen Sie jetzt, wie Sie eine App mit Interaktionsmöglichkeiten ausstatten und das Erscheinungsbild der App anpassen.

Herunterladen des Beispiels

Kommen Sie nicht voran, oder möchten Sie Ihre Arbeit überprüfen? Falls ja, laden Sie das Beispiel für die ersten Schritte mit JavaScript herunter.

Nächste Schritte

Im nächsten Teil dieser Lernprogrammreihe 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.

Verwandte Themen

Erste Schritte mit JavaScript: Vollständiger Code für die Lernprogrammreihe
Programmieren von Windows 8-Apps mit HTML, CSS und JavaScript (E-Book)

 

 

Anzeigen:
© 2014 Microsoft