So wird’s gemacht: Freigeben von HTML (HTML)

Artikel
12/12/2015

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

Das Freigeben von HTML-Inhalten unterscheidet sich von dem anderer grundlegender Formate wie z. B. Text oder Links. Die größte Herausforderung besteht darin, dass der vom Benutzer ausgewählte Inhalt Verweise auf andere Elemente enthalten kann. In Apps, die die Freigabe von HTML unterstützen, muss die Behandlung dieser Verweise berücksichtigt werden, um sicherzustellen, dass Benutzer den gewünschten Inhalt freigeben können.

Eine typische Situation, die die Problematik der HTML-Freigabe veranschaulicht, ist Inhalt, der sowohl Text als auch ein Bild enthält. Wenn der Benutzer diesen Inhalt auswählt und auf den Charm "Teilen" tippt, erwartet er, dass der Text und das Bild freigegeben werden. Der HTML-Code enthält aber nicht das Bild, sondern ein img-Tag, das auf den zugehörigen Speicherort verweist. Wenn die Ziel-App nicht auf den Bildverweis zugreifen kann (beispielsweise auf ein lokal gespeichertes Bild), müssen Sie eine Ressourcenzuordnung einrichten.

Um sicherzustellen, dass HTML-Inhalte auf die vom Benutzer erwartete Weise freigegeben werden können, enthält der Windows.ApplicationModel.DataTransfer-Namespace einige neue Funktionen zum Erfassen von referenzierten Elementen wie Bildern. Wir zeigen Ihnen, wie Sie diese Funktionen nutzen können.

Wissenswertes

Technologien

Windows.ApplicationModel.DataTransfer

Voraussetzungen

Sie sollten mit Visual Studio und den zugehörigen Vorlagen vertraut sein.
Sie sollten mit JavaScript vertraut sein.
Sie sollten wissen, wie Sie mit JavaScript vom Benutzer ausgewählten HTML-Inhalt identifizieren und nach Instanzen von untergeordneten Elementen wie img-Tags innerhalb dieser Auswahl suchen.

Anweisungen

Schritt 1: Einrichten der App als Freigabequelle

Das DataTransferManager-Objekt ist der wichtigste Ausgangspunkt für alle Teilungsvorgänge. Fügen Sie einen DataRequested-Ereignishandler hinzu, der ausgelöst wird, wenn der Benutzer "Teilen" aufrufen möchte. In Windows Store-Apps erfolgt dies automatisch, wenn der Benutzer den Charm „Teilen“ aufruft. Wenn Sie für Windows Phone entwickeln, ist der Charm „Teilen“ nicht integriert, d. h., Sie müssen ein Steuerelement hinzufügen, auf das der Benutzer tippen und den Handler auslösen kann.

var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareHtmlHandler);

Die verbleibenden Schritte dienen der Implementierung der shareHtmlHandler-Funktion.

Schritt 2: Abrufen eines DataRequest-Objekts

Wenn ein datarequested-Ereignis auftritt, erhält Ihre App ein DataRequest-Objekt. Dieses Objekt enthält ein DataPackage, mit dem Sie den Inhalt bereitstellen können, den der Benutzer teilen möchte.

var request = e.request;

Schritt 3: Festlegen der Kachel- und Beschreibungseigenschaften

request.data.properties.title = "Share Html Example";
request.data.properties.description =
    "Demonstrates how to share an HTML fragment with a local image.";

Schritt 4: Verwenden der createHtmlFormat-Methode zum Formatieren des Fragments

Die createHtmlFormat-Funktion umschließt das HTML-Format mit den Headern und anderen Informationen, die das System zum Freigeben des Inhalts benötigt.

var localImage = "ms-appx:///images/logo.png";
var htmlExample = "<p>Here is a local image: <img src=\"" + localImage + "\">.</p>";
var htmlFormat = 
    Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlExample);

Schritt 5: Hinzufügen des HTML-Inhalts zum DataPackage

Um den HTML-Inhalt hinzuzufügen, verwenden Sie die setHtmlFormat-Methode.

request.data.setHtmlFormat(htmlFormat);

Schritt 6: Erstellen einer RandomAccessStreamReference des lokalen Bilds

var streamRef = 
    Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(new Windows.Foundation.Uri(localImage));

Schritt 7: Hinzufügen der RandomAccessStreamReference zur Ressourcenzuordnung

Sie können die Bilddatei hinzufügen, indem Sie die resourceMap-Eigenschaft verwenden.

request.data.resourceMap[localImage] = streamRef;

Wenn das freigegebene HTML-Fragment mehrere lokale Bilder enthält, müssen Sie den Schritt für jedes dieser Bilder wiederholen.

Vollständiges Beispiel

Das folgende Beispiel zeigt eine Funktion, die HTML-Inhalt zur Freigabe durch einen Benutzer festlegt. Ein ausführlicheres Beispiel finden Sie in unserer Codegalerie.

function shareHtmlHandler(e) {
    var localImage = "ms-appx:///images/logo.png";
    var htmlExample = "<p>Here is a local image: <img src=\"" + localImage + "\">.</p>";
    var request = e.request;
    request.data.properties.title = "Share Html Example";
    request.data.properties.description = "Demonstrates how to share an HTML fragment with a local image.";
    var htmlFormat = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlExample);
    request.data.setHtmlFormat(htmlFormat);
    var streamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(new Windows.Foundation.Uri(localImage));
    request.data.resourceMap[localImage] = streamRef;
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // This app is newly launched; register the app as a share source.
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.addEventListener("datarequested", shareHtmlHandler);
        } else {
            // TODO: This app was reactivated from suspension.
            // Restore the app state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};