Erstellen Ihrer ersten Windows Store-App mit JavaScript

Erstellen Ihrer ersten Windows Store-App mit JavaScript

[ 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 ]

Lesen Sie dieses Lernprogramm, um zu erfahren, wie Sie JavaScript mit HTML5 und CSS (Cascading Style Sheets) 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 Benutzereingaben über Toucheingabe, Stift oder Maus
  • 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

Sie können 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 Ausrichtung

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 seinen Bildern 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 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.

Dokumentationsroadmap

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

 

Verwandte Themen

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

 

 

Anzeigen:
© 2017 Microsoft