JavaScript-Elementvorlagen für Store-Apps

Applies to Windows and Windows Phone

Elementvorlagen sind App-Dateien mit häufig verwendetem Code, die einer Projektvorlage hinzugefügt werden können, um die Entwicklungszeit zu verkürzen.

Wichtig  Die Informationen in diesem Thema wurden für Windows Phone 8, Windows 8.1 Update und Microsoft Visual Studio 2013 Update 2 aktualisiert. Informationen zur Migration zu den neuen Vorlagen finden Sie im Abschnitt zur Vorlage für Universal-Apps in JavaScript-Projektvorlagen und Portieren Ihrer Windows-Runtime-App zu Windows Phone.

Die Elementvorlagen für Windows Phone-Store-Apps und Windows Store-Apps enthalten die entsprechenden Verweise und Skripttags zur Unterstützung der Windows-Bibliothek für JavaScript. Einige der Elementvorlagen implementieren einen Vertrag. Dabei handelt es sich um eine Art Vereinbarung zwischen Apps über die Verwendung bestimmter APIs. Wenn Sie eine Vertragsvorlage (Vertrag für "Auswahl für 'Datei öffnen'", Zielfreigabe-Vertrag) hinzufügen, wird das App-Manifest mit den entsprechenden Deklarationen aktualisiert. Die Einstellungen für diese Deklarationen können Sie sich im Manifest-Designer auf der Registerkarte Deklarationen ansehen.

Sie können einem vorhandenen Projekt eine Elementvorlage hinzufügen, indem Sie das Kontextmenü für das Projekt im Projektmappen-Explorer öffnen und dann Hinzufügen > Neues Element wählen.

Informationen zu Elementvorlagen für andere Sprachen finden Sie unter C#,- VB- und C++ -Elementvorlagen.

Elementvorlage „Seitensteuerung“ für Store-Apps

Diese Elementvorlage enthält eine Mindestmenge an Inhalt und Markup für eine Seite in Ihrer App. Das HTML-Markup enthält einen Headerabschnitt mit einer Schaltfläche vom Typ Zurück sowie einen Hauptinhaltsabschnitt.

Wenn Sie eine Elementvorlage vom Typ "Seitensteuerung" hinzufügen, fügt Visual Studio Ihrem Projekt drei Dateien hinzu:

  • Eine HTML-Datei (standardmäßig "pagecontrol.html") mit einem Headerabschnitt und dem Hauptinhaltsabschnitt für Ihre Seite.
  • Eine JavaScript-Datei mit unterstützendem Code für die Seite. Diese Datei enthält Code, der das empfohlene Navigationsmodell für Windows Store-Apps unterstützt.
  • Eine CSS-Datei zum Angeben der CSS-Formatvorlagen für die Seite.

Das Navigationsmodell aus der Elementvorlage "Seitensteuerung" kommt auch in den Projektvorlagen "Hub/Pivot", "Hub", "Pivot", "Grid" und "Split" zum Einsatz. Wir empfehlen die Verwendung dieser Elementvorlage, wenn Sie diesen Projektvorlagen Seiten hinzufügen. Weitere Informationen finden Sie unter Schnellstart: Verwenden der Einzelseitennavigation und dem Abschnitt "Navigationsmodell" in JavaScript-Projektvorlagen.

Achtung  Wenn Sie die Elementvorlage "Seitensteuerung" mit der Vorlage "Blank Application" verwenden möchten, müssen Sie dem Projekt "navigator.js" und "default.html" den Inhaltshostcode hinzufügen (Sie können "navigator.js" und den Inhaltshostcode von einer anderen Projektvorlage wie "Hub/Pivot" abrufen).

Elementvorlage „Zielfreigabe-Vertrag“ für Store-Apps

Die Elementvorlage "Zielfreigabe-Vertrag" ermöglicht es einer App, das Teilen von Daten mit anderen Apps zu koordinieren. Sie können diese Vorlage beispielsweise verwenden, um Benutzern das Posten eines Fotos aus Flickr bei Facebook zu ermöglichen. Dank des Codes in dieser Vorlage kann die App geteilte Inhalte empfangen. Die App mit dieser Elementvorlage wird gestartet, wenn die App in der UI zum Teilen ausgewählt wird.

Wenn Sie eine Elementvorlage vom Typ "Zielfreigabe-Vertrag" hinzufügen, fügt Visual Studio Ihrem Projekt drei Dateien hinzu:

  • Eine HTML-Datei (standardmäßig "shareTarget.html"), die angezeigt wird, wenn die App in der UI zum Teilen ausgewählt wird.
  • Eine JavaScript-Datei mit Code zum Behandeln des geteilten Inhalts.
  • Eine CSS-Datei zum Angeben der Formatvorlagen für die Seite.

Die HTML-Seite verfügt über einen Hauptinhaltsabschnitt mit Markup zum Anzeigen eines Teils der geteilten Inhalte: ein IMG-Element für ein geteiltes Miniaturbild, ein Titel und eine Beschreibung für geteilte Eigenschaften sowie ein standardmäßiges Eingabefeld, in dem der Benutzer den geteilten Inhalt kommentieren kann, wenn dieser verarbeitet wird.

Der JavaScript-Code überprüft mithilfe des activated-Ereignisses, ob die App für den Empfang geteilter Daten konfiguriert ist, und verwendet anschließend das ShareOperation-Objekt, um auf die geteilten Daten zuzugreifen und die ursprünglichen Vorlageneigenschaften (Titel, Beschreibung und Miniaturbild) festzulegen. Verwenden Sie die onShareSubmit -Funktion in der JavaScript-Datei, um die geteilten Daten zusammen mit den Kommentaren zu verarbeiten.

Weitere Informationen zu Freigabe-Verträgen finden Sie unter Schnellstart: Empfangen von geteilten Inhalten.

  • Applies to Windows

Elementvorlage „Suchergebnisseite“ für Windows Store-Apps

Diese Elementvorlage ermöglicht es einer App, eine Seite mit Suchergebnissen für eine Suche anzuzeigen, die mit dem WinJS.UI.SearchBox-Steuerelement initiiert wurde.

Hinweis: Die Elementvorlage für die Suche in Microsoft Visual Studio 2013 implementiert keinen Vertrag mehr. Der Name der Elementvorlage wurde ebenfalls geändert (von Vertrag „Suche“).

Wenn Sie die Elementvorlage "Suchergebnisseite" hinzufügen, fügt Visual Studio Ihrem Projekt drei Dateien hinzu:

  • Eine HTML-Datei (standardmäßig "searchResults.html") mit einem ListView-Steuerelement zum Anzeigen der Suchergebnisse.
  • Eine JavaScript-Datei mit unterstützendem Code für die Suchseite. Die Quelldatei enthält Code, der das empfohlene Navigationsmodell für Windows Store-Apps unterstützt.
  • Eine CSS-Datei zum Angeben der CSS-Formatvorlagen für die Suchseite.

Das Navigationsmodell aus der Elementvorlage kommt auch in den Projektvorlagen "Hub-App", "Raster-App", "Geteilte App" und "Navigations-App" zum Einsatz. Wir empfehlen die Verwendung dieser Elementvorlage, wenn Sie diesen Projektvorlagen eine Elementvorlage "Suchergebnisseite" hinzufügen. Weitere Informationen finden Sie unter "Navigationsmodell" in JavaScript-Projektvorlagen.

Die Suchergebnisseite zeigt Suchergebnisse in einem ListView-Steuerelement an. Dies ähnelt der Funktionsweise der WinJS-Vorlagen, die in den Projektvorlagen "Grid" und "Split" verwendet werden. Weitere Informationen finden Sie unter Anpassen von Daten in dem Visual Studio-Vorlagen und im Abschnitt "CSS styles" in JavaScript-Projektvorlagen für Windows Store-Apps.

Weitere Informationen finden Sie unter Hinzufügen einer Elementvorlage vom Typ "Suchergebnisse" und Schnellstart: Hinzufügen von Suchfunktionen.

  • Applies to Windows

Elementvorlage „Auswahlvertrag zum Öffnen von Dateien“ für Windows Store-Apps

Die Elementvorlage "Auswahlvertrag zum Öffnen von Dateien" ermöglicht es einer App, eigene Daten in Form von Dateien für andere Apps verfügbar zu machen. Mithilfe dieser Vorlage können Sie beispielsweise ein Dialogfeld zur Fotoauswahl erstellen, in dem der Benutzer ein Foto aus Facebook auswählen kann, auch wenn es nicht auf der lokalen Festplatte gespeichert ist.

Wenn Sie eine Elementvorlage vom Typ "Auswahlvertrag zum Öffnen von Dateien" hinzufügen, fügt Visual Studio Ihrem Projekt drei Dateien hinzu:

  • Eine HTML-Datei (standardmäßig "fileOpenPicker.html") mit einem ListView-Steuerelement zum Anzeigen der Dateiliste.
  • Eine JavaScript-Datei mit Code zum Behandeln der Auswahl von Elementen in der Dateiliste.
  • Eine CSS-Datei zum Angeben der Formatvorlagen für die HTML-Seite mit der Dateiliste.

In der Vorlage "Auswahlvertrag zum Öffnen von Dateien" wird die Dateiliste in einem ListView-Steuerelement angezeigt. Diese Funktionsweise ähnelt den WinJS-Vorlagen, die in den Projektvorlagen "Grid" und "Split" verwendet werden. Weitere Informationen finden Sie unter Hinzufügen von Daten zu einer Projektvorlage sowie unter JavaScript-Projektvorlagen für Windows Store-Apps im Abschnitt "CSS-Formatvorlagen".

Weitere Informationen zu Auswahlverträgen zum Öffnen von Dateien finden Sie unter Schnellstart: Integration mit Verträgen für die Dateiauswahl.

Andere Elementvorlagen in Visual Studio

Die meisten der anderen Elementvorlagen – beispielsweise für HTML-Seiten, JavaScript-Dateien oder XML-Dateien – sind Standarddateien ohne spezielle Features für Windows Store-Apps. Im Anschluss finden Sie einige zusätzliche Informationen zu zwei dieser Vorlagen.

Ressourcendatei

Zur Unterstützung bei der Lokalisierung einer Windows Store-App können Sie Ihrem Projekt eine oder mehrere Elementvorlagen für Ressourcendateien (Dateien mit der Dateinamenerweiterung .resjson) hinzufügen. Weitere Informationen finden Sie unter Globalisieren Ihrer App.

Dezidierter Worker

Falls Sie in Ihrer Windows Store-App HTML5-Web-Worker verwenden, wird empfohlen, die Elementvorlage "Dezidierter Worker" in das Projekt einzufügen. Diese Vorlage enthält eine Verweisdirektive zum Aktivieren der IntelliSense-Unterstützung für die Web-Worker-API. Weitere Informationen zum Verwenden von Web-Workern in Windows Store-Apps finden Sie unter Web-Worker.

Verwandte Themen

JavaScript-Projektvorlagen für Windows Store-Apps
Hinzufügen einer Elementvorlage vom Typ "Suchergebnisse"

 

 

Anzeigen:
© 2015 Microsoft