Erste Schritte mit Hilo (Windows Store-Apps mit JavaScript und HTML)

Applies to Windows only

Aus: Umfassende Entwicklung einer Windows Store-App mit JavaScript: Hilo

Leitfaden-Logo

Vorherige Seite | Nächste Seite

Im Folgenden veranschaulichen wir das Erstellen und Ausführen des Hilo-Beispiels. Außerdem gehen wir auf die Organisation des Quellcodes ein und erläutern, welche Tools und Programmiersprachen verwendet werden.

Download

Herunterladen des Hilo-Beispiels
Buch herunterladen (PDF)

Laden Sie den Code herunter, und wenden Sie sich anschließend dem Abschnitt Erstellen und Ausführen des Beispiels zu.

Erstellen und Ausführen des Beispiels

Erstellen Sie das Hilo-Projekt analog zu einem Standardprojekt.

  1. Klicken Sie auf der Menüleiste von Microsoft Visual Studio auf Erstellen > Projektmappe erstellen. In diesem Schritt wird der Code kompiliert und zur Verwendung als Windows Store-App gepackt.

    Warnung  Hilo-JavaScript wurde mit Microsoft Visual Studio 2012 und Windows 8 erstellt. Wenn Sie es in einer neueren Version von Visual Studio öffnen, ist eine Projektmigration erforderlich.

  2. Nach dem Erstellen der Lösung muss sie bereitgestellt werden. Klicken Sie auf der Menüleiste auf Erstellen > Projektmappe bereitstellen. Visual Studio stellt das Projekt außerdem bereit, wenn Sie die App über den Debugger ausführen.
  3. Wählen Sie im Anschluss an die Bereitstellung des Projekts die Hilo-Kachel aus, um die App auszuführen. Sie können auch in der Menüleiste von Visual Studio auf Debuggen > Debugging starten klicken. Vergewissern Sie sich, dass Hilo das Startprojekt darstellt. Wenn Sie die App ausführen, erscheint die Hubseite.

Hilo-Startseite

Sie können Hilo in allen unterstützten Sprachen ausführen. Legen Sie in der Systemsteuerung die gewünschte Sprache und das gewünschte Kalendersystem fest. Wenn Sie die bevorzugte Sprache und den Systemkalender (Datum, Uhrzeit und Zahlenformate) vor dem Start von Hilo beispielsweise auf Deutsch festgelegt haben, zeigt die App deutschen Text mit dem gebietsschemaspezifischen Kalender an. Hier sehen Sie einen Screenshot der Jahresgruppenansicht für Deutsch.

Lokalisierte Jahresgruppenansicht

Der Hilo-Quellcode beinhaltet Lokalisierungen für Englisch (USA), Deutsch (Deutschland) und Japanisch (Japan).

[Nach oben]

Entwerfen der UX

Hilo verwendet in C++ und JavaScript das gleiche UX-Design. Weitere Informationen zur UX für Hilo-JavaScript finden Sie im C++-Thema Gestalten der Benutzeroberfläche. Bevor Sie sich der Lektüre des UX-Dokuments widmen, empfiehlt sich die Lektüre von UX-Richtlinien für Windows Store Apps.

Allgemeine Informationen zur Gestaltung von Windows Store-Apps finden Sie unter Planen von Windows Store-Apps.

Projekte und Projektmappenordner

Die Visual Studio-Projektmappe von Hilo enthält zwei Projekte: Hilo und Hilo.Specifications. Die Hilo-Version mit dem Hilo.Specifications-Projekt finden Sie unter Leitfaden: HiloJS: Windows Store-App mit JavaScript.

Das Hilo-Projekt verwendet die Projektmappenordner von Visual Studio, um die Quellcodedateien in die folgenden Kategorien einzuordnen:

  • Der (automatisch erstellte) Ordner References enthält den SDK-Verweis auf die Windows-Bibliothek für JavaScript.
  • Der Ordner Hilo enthält Unterordner wie "Hilo\hub" und "Hilo\Tiles", in denen die Dateien nach Feature zusammengefasst sind. Jeder Unterordner enthält die mit einer bestimmten Seite oder einem bestimmten Featurebereich verknüpften HTML-, CSS- und JavaScript-Dateien.
  • Der Ordner images enthält den Begrüßungsbildschirm, die Kachel sowie weitere Bilder.
  • Der Ordner strings enthält nach unterstützten Gebietsschemas benannte Unterordner. Jeder Unterordner enthält Ressourcenzeichenfolgen für die unterstützten Gebietsschemas (in RESJSON-Dateien).

Das Hilo.Specifications-Projekt enthält Komponententests für Hilo. Das Projekt teilt Code mit dem Hilo-Projekt und fügt Quelldateien mit Komponententests hinzu.

Einige der Komponenten in Hilo können unverändert oder mit geringem Bearbeitungsaufwand auch für andere Apps verwendet werden. Die Organisierung der Dateien nach Feature trägt zu einer besseren Übersichtlichkeit bei. So können Sie die Organisation und die Ideen, die diese Dateien bereitstellen, auch für Ihre eigene App verwenden. Auf Codemuster, die speziell für andere Apps gelten, weisen wir gesondert hin.

[Nach oben]

Tools und Sprachen für die Entwicklung

Hilo ist eine Windows Store-App mit JavaScript. Diese Kombination ist nicht die einzige Option; es steht auch eine Hilo-App in C++ zum Herunterladen zur Verfügung. Sie können Windows Store-Apps auch in zahlreichen anderen Sprachen erstellen und eine Programmiersprache Ihrer Wahl verwenden.

Dank der Änderungen in HTML, CSS und JavaScript ist JavaScript jetzt eine ausgezeichnete Wahl für eine Hochleistungs-App wie Hilo, bei der eine große Anzahl von Bildern geladen und bearbeitet werden muss. In Windows Store-Apps profitieren Sie automatisch von Verbesserungen am JavaScript-Modul von Internet Explorer 10. (Entsprechende Informationen finden Sie hier.) Außerdem können Sie die Funktionen von HTML5 wie das Ausführen hardwarebeschleunigter CSS-Animationen nutzen. Mit JavaScript können Sie auch von den Funktionen des F12-Debugtools in Internet Explorer profitieren, die nun in Visual Studio zur Verfügung stehen. Und selbstverständlich können Sie bei der Entwicklung in HTML, CSS und JavaScript auch auf die umfassenden Codeerstellungsressourcen für webbasierte Apps zurückgreifen.

In die Entscheidung über die für Hilo zu verwendenden Programmiersprachen sind u. a. folgende Überlegungen eingeflossen:

  • Welche Art von App möchten Sie erstellen?   Wenn Sie beispielsweise eine Restaurant-App, eine Bank-App oder eine Foto-App erstellen, können Sie HTML5/CSS/JavaScript oder XAML mit C#, C++ oder Visual Basic verwenden, da die Windows-Runtime über ausreichend integrierte Steuerelemente und Funktionen zum Erstellen entsprechender Apps verfügt. Wenn Sie dagegen eine dreidimensionale App oder ein Spiel erstellen und das Potenzial der Grafikhardware vollständig ausreizen möchten, sind C++ und DirectX u. U. die bessere Wahl.
  • Welche Fähigkeiten sind vorhanden?   Wenn Sie sich sehr gut mit Webentwicklungstechnologien wie HTML, JavaScript oder CSS auskennen, ist JavaScript u. U. eine logische Wahl für Ihre App.
  • Gibt es bestehenden Code, der genutzt werden kann?  Wenn Sie über bestehenden Code, bestehende Algorithmen oder bestehende Bibliotheken verfügen, die mit Windows Store-Apps kompatibel sind, können Sie diesen Code unter Umständen nutzen. So können Sie beispielsweise in jQuery vorliegende App-Logik zum Erstellen Ihrer Windows Store-App mit JavaScript verwenden. Informationen zu bedeutenden Unterschieden zwischen diesen Technologien und Windows Store-Apps finden Sie unter HTML, CSS und JavaScript – Features und Unterschiede und Windows Store-Apps mit JavaScript im Vergleich zu herkömmlichen Web-Apps.

Tipp  In JavaScript geschriebene Apps unterstützen außerdem mit C++, C# oder Visual Basic erstellte wiederverwendbare Windows-Runtime-Komponenten. Weitere Informationen finden Sie unter Erstellen von Windows-Runtime -Komponenten.

Visual Studio Express wurde als Umgebung zum Schreiben und Debuggen sowie für Komponententests mit Code ausgewählt und Microsoft Test Manager zur Verwaltung von Tests. Zur Überwachung geplanter Aufgaben, Verwaltung von Fehlerberichten, Versionierung von Quellcode und Automatisierung von Builds wurde Team Foundation Server verwendet. Darüber hinaus haben wir Microsoft Expression Blend als vielseitigen CSS-Editor verwendet.

Eine Übersicht über die verfügbaren Sprachoptionen zum Erstellen von Windows Store-Apps finden Sie im DokumentErste Schritte mit Windows Store-Apps.

Hinweis  Unabhängig von der verwendeten Programmiersprache muss auf alle Fälle sichergestellt sein, dass die App schnell und flüssig ausgeführt wird, um Benutzern eine optimale Nutzung zu ermöglichen. Eine schnelle und flüssige App reagiert schnell und mit angemessener Energie auf Benutzeraktionen. Die Windows-Runtime ermöglicht diese Geschwindigkeit mithilfe von asynchronen Vorgängen. Jede Programmiersprache verfügt über eine Verarbeitungsmöglichkeit für diese Vorgänge. Weitere Informationen zur Implementierung einer schnellen und flüssigen UX mit JavaScript finden Sie unter Muster und Tipps für die asynchrone Programmierung.

[Nach oben]

 

 

Anzeigen:
© 2014 Microsoft