23 von 26 fanden dies hilfreich - Dieses Thema bewerten.

Erstellen Ihrer ersten Windows Store-App mit JavaScript

[Diese Lernprogrammreihe finden Sie in Entwickeln großartiger Apps für Windows 8.]

Lesen Sie dieses Lernprogramm, um zu erfahren, wie Sie JavaScript mit HTML5 und CSS zum Erstellen von Windows Store-Apps verwenden.

Informationen zum Herunterladen des Begleitbeispiels finden Sie unter Erste Schritte mit JavaScript: Vollständiger Code für die Lernprogrammreihe.

Inhalt dieses Abschnitts

ThemaBeschreibung

Teil 1: Erstellen der App "Hello, world!"

Hier erstellen Sie Ihre einfache App "Hello, world", die eine personalisierte Begrüßung anzeigt. Hier 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
  • Verwenden einer Windows-Bibliothek für JavaScript-Steuerelemente

Teil 2: Verwalten von App-Lebenszyklus und -Zustand

In Windows 8 können Sie mehrere Apps starten und zwischen den einzelnen Apps wechseln, ohne befürchten zu müssen, das System dadurch zu verlangsamen oder den Akku schneller zu entladen. Der Grund: Im Hintergrund ausgeführte Apps werden vom System automatisch angehalten (und manchmal sogar beendet). Eine gute App kann vom System angehalten, beendet und neu gestartet werden und wirkt trotzdem immer so, als wäre sie ununterbrochen ausgeführt worden.

Im zweiten Teil dieser Lernprogrammreihe aktualisieren Sie die App "Hello, world", sodass sie auf Lebenszyklusereignisse reagiert sowie Benutzer- und Sitzungsdaten speichert.

Teil 3: PageControl-Objekte und Navigation

Die in den vorherigen Lernprogrammen erstellte App "Hello, world" enthält eine Seite mit Inhalt. Die meisten realen Apps enthalten jedoch mehrere Seiten. In diesem Lernprogramm kopieren Sie den Code aus der App "Hello, world" in eine neue App, die die Navigation App-Vorlage verwendet. Anschließend fügen Sie eine weitere Seite hinzu und ermöglichen die Navigation zwischen den Seiten der App.

Teil 4: Layout und Ansichten

In diesem Lernprogramm befassen wir uns mit den Grundlagen der Erstellung einer Benutzeroberfläche in HTML und CSS. Zu diesem Zweck erstellen Sie eine einfache Bildanzeige, die es dem Benutzer ermöglicht, ein Bild in seiner Bildbibliothek auszuwählen und zusammen mit einigen Informationen zur Bilddatei anzuzeigen. Bei diesem Lernprogramm beginnen wir ganz von vorn mit einer neuen App.

Teil 5: Dateizugriff und -auswahl

In diesem Lernprogramm fügen Sie der in Teil 4: Layout und Ansichten erstellten App Funktionen hinzu. Als Erstes behandeln Sie das Click-Ereignis für die Schaltfläche "Get photo", um eine Dateiauswahl zu öffnen und dem Benutzer das Auswählen eines Bilds in seiner Bildbibliothek zu ermöglichen. Anschließend binden Sie die UI-Steuerelemente an Dateieigenschaften, um die Bildinformationen anzuzeigen. Zum Schluss rekapitulieren wir das in Teil 2 erlernte Wissen zum Speichern des App-Zustands. Hier verwenden Sie eine MostRecentlyUsedList, damit der Zugriff auf das vom Benutzer ausgewählte Bild erhalten bleibt.

Teil 6: Erstellen eines Bloglesers

Nachdem Sie nun mit den Grundlagen vertraut sind, erfahren Sie hier, wie Sie eine etwas komplexere App mit mehreren Seiten und Steuerelementen aus der Windows-Bibliothek für JavaScript (in diesem Fall: einen Blogleser) erstellen.

Dokumentationsroadmap

Sehen Sie sich nach Abschluss der Lernprogramme die Dokumentationsroadmap an. Hier finden Sie eine Liste mit wichtigen Informationsressourcen zum Erstellen von Windows Store-Apps mit JavaScript.

 

Verwandte Themen

Erste Schritte mit JavaScript: Vollständiger Code für die Lernprogrammreihe

 

 

© 2013 Microsoft. Alle Rechte vorbehalten.