JavaScript-Elementvorlagen für Windows Store-Apps
Elementvorlagen sind App-Dateien mit häufig verwendetem Code, die einer Projektvorlage hinzugefügt werden können, um die Entwicklungszeit zu verkürzen.
Die Elementvorlagen für 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 "Suche" 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 mit der rechten Maustaste auf das Projekt im Projektmappen-Explorer klicken und dann auf Hinzufügen: > Neues Element klicken.
Informationen zu Elementvorlagen für andere Sprachen finden Sie unter C#,- VB- und C++ -Elementvorlagen.
Elementvorlage "Seitensteuerung"
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 "Raster", "Geteilt" und "Navigation" zum Einsatz. Wir empfehlen die Verwendung dieser Elementvorlage, wenn Sie diesen Projektvorlagen Seiten hinzufügen. Weitere Informationen finden Sie unter Navigationsmodell und Hinzufügen einer Elementvorlage zur Seitensteuerung.
Elementvorlage "Vertrag für 'Suche'"
Diese Elementvorlage ermöglicht einer App das Anzeigen einer Suchergebnisseite für eine Suche, die über den Charm "Suche" initiiert wurde. Mit dieser Vorlage können Sie einem Benutzer die Eingabe einer Suchzeichenfolge ermöglichen.
Wenn Sie eine Elementvorlage vom Typ "Vertrag für 'Suche'" 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 "Raster", "Geteilt" und "Navigation" zum Einsatz. Wir empfehlen die Verwendung dieser Elementvorlage, wenn Sie diesen Projektvorlagen einen Vertrag für "Suche" hinzufügen. Weitere Informationen finden Sie unter Navigationsmodell.
Diese Elementvorlage verwendet eine auf WinJS.Binding.Template basierende Vorlage vom Typ "Windows-Bibliothek für JavaScript", um mehrere Dateninstanzen (also die Suchergebnisse) zu formatieren und anzuzeigen. Der Vertrag für "Suche" zeigt Suchergebnisse in einer ListView an. Diese Funktionsweise ähnelt der Funktionsweise von Vorlagen der Windows-Bibliothek für JavaScript aus den Projektvorlagen "Raster" und "Geteilt". 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".
Ein Beispiel für die Verwendung dieser Elementvorlage in Kombination mit der Projektvorlage "Geteilt" oder "Raster" finden Sie unter Hinzufügen einer Elementvorlage vom Typ "Vertrag für 'Suche'". Weitere Informationen finden Sie unter Schnellstart: Hinzufügen einer Suche.
Elementvorlage "Auswahlvertrag zum Öffnen von Dateien"
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.
Diese Elementvorlage verwendet eine Vorlage der Windows-Bibliothek für JavaScript, die auf WinJS.Binding.Template basiert, um mehrere Dateninstanzen (eine Dateiliste) zu formatieren und anzuzeigen. Die Elementvorlage zeigt die Dateiliste in einer ListView an. Diese Funktionsweise ähnelt der Funktionsweise von Vorlagen der Windows-Bibliothek für JavaScript aus den Projektvorlagen "Raster" und "Geteilt". 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.
Elementvorlage "Zielfreigabe-Vertrag"
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.
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
