So wird’s gemacht: Unterstützen von Pullvorgängen (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]

Meistens stellt die App die Freigabedaten sofort über den datarequested-Ereignishandler bereit. Manchmal benötigt die App jedoch möglicherweise etwas Zeit, um die Daten für die Freigabe vorzubereiten. In diesen Fällen können Sie eine Liste mit unterstützten Formaten bereitstellen und die Vorbereitung und Bereitstellung von Inhalten so lange verzögern, bis sie von der Ziel-App angefordert werden. Die Verzögerung der Inhaltsbereitstellung bis zur Anforderung durch die Ziel-App wird als Pullvorgang bezeichnet (oder verzögerte Freigabe).

Zur Unterstützung von Pullvorgängen erstellen Sie zunächst eine Funktion, die die Daten verpackt, die der Benutzer teilen möchte. Danach stellen Sie eine Delegatfunktion bereit, anstatt die tatsächlichen Daten an die Ziel-App zu übertragen. Wenn die Ziel-App versucht, die Daten abzurufen, ruft das System die Delegatfunktion auf. Der Vorteil hierbei besteht darin, dass die App die Daten im Hintergrund freigeben kann, sodass der Benutzer die App weiter für andere Aktivitäten verwenden kann.

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 nachvollziehen können, wie Dateien und andere Daten abgerufen werden (z. B. mithilfe von FileOpenPicker). Weitere Informationen dazu finden Sie unter Dateizugriff mit Dateiauswahl.

Anweisungen

Schritt 1: Erstellen einer Schaltflächen-Handlerfunktion, mit der der Benutzer eine Bilddatei auswählen kann

Mithilfe des folgenden Schaltflächen-Handlercodes kann der Benutzer eine Bilddatei auswählen. Diese Datei wird in den verbleibenden Schritten dieses Schnellstartartikels verwendet.

Hinweis

Der folgende Code verwendet pickSingleFileAsync. Unter Windows Phone 8.1 muss stattdessen pickSingleFileAndContinue verwendet werden.

var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

Schritt 2: Erstellen Sie eine Delegatfunktion, um den Inhalt bereitzustellen, den der Benutzer freigeben möchte.

Die genaue Beschaffenheit der Delegatfunktion hängt von der App ab. Im Folgenden sehen Sie ein Beispiel.

function onDeferredImageRequested(request) {
    if (imageFile) {
        var imageStreamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
        request.setData(imageStreamRef);
    }
}

Beachten Sie, dass die Delegatfunktion keine formatspezifische Funktion wie setData oder setBitmap verwendet, um den Inhalt hinzuzufügen, sondern setStorageItems. Wann immer Sie eine Delegatfunktion verwenden, müssen Sie den Inhalt mit setData bereitstellen.

Schritt 3: 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", sharePullHandler);

Die verbleibenden Schritte dienen der Implementierung der sharePullHandler-Funktion.

Schritt 4: 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 normalerweise den Inhalt bereitstellen können, den der Benutzer teilen möchte. In Pullvorgängen geben Sie jedoch eine Delegatfunktion und keine tatsächlichen Daten an.

var request = e.request;

Schritt 5: Festlegen der Titel- und Beschreibungseigenschaften

request.data.properties.title = "Share Pull Example";
request.data.properties.description = "Demonstrates how to pull operations in share.";

Schritt 6: Legen Sie gegebenenfalls die Dateitypen fest.

Wenn Sie zum Freigeben von Dateien eine Delegatfunktion verwenden, müssen Sie angeben, welche Dateitypen Ihre App unterstützt.

request.data.properties.fileTypes.replaceAll([".jpg", ".bmp", ".gif", ".png"]);

Schritt 7: Hinzufügen der Delegatfunktion zum DataPackage-Objekt

Die setDataProvider-Methode gibt die von Ihnen erstellte Delegatfunktion an, die den tatsächlichen Inhalt bereitstellt.

request.data.setDataProvider(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap, onDeferredImageRequested);

Wenn der Benutzer jetzt auf den Charm "Teilen" tippt, reagiert die App sofort mit einem DataPackage-Objekt, das die Delegatfunktion enthält. Der Teilungsvorgang kann nun im Hintergrund fortgesetzt werden, sodass der Benutzer mit seinen anderen Aktivitäten fortfahren kann.

Bedenken Sie, dass beim Freigeben von Dateien mit der setStorageItems-Methode schreibgeschützte StorageFile-Objekte zur Freigabe erstellt werden und die ursprünglichen Objekte darin enthalten sind. Falls Sie der ursprünglichen Datei nach dem Aufrufen von setStorageItems erweiterte Eigenschaften hinzufügen, werden die neuen erweiterten Eigenschaften folglich nicht in die freigegebenen StorageFile-Objekte eingeschlossen. Daher empfehlen wir, die Dateien erst dann hinzuzufügen, wenn Sie vollständig für den Vorgang bereit sind.

Anmerkungen

Bei einer App, die Daten mit verzögertem Rendering teilt, muss es sich um eine Einzelseiten-App handeln, um die Navigation zwischen Seiten zu vermeiden. Zudem muss Ihre App, wenn sie die Navigation in Frames unterstützt, den Skriptkontext auf oberster Ebene verwenden, um Delegatfunktionen zu registrieren, anstatt Delegaten auf Frameebene zu registrieren. Bei der Navigation geht der Skriptkontext verloren, wodurch die Delegatfunktionen ungültig werden und das verzögerte Rendering scheitert.

Vollständiges Beispiel

var imageFile = null;
function pickImageFile() {
    var picker = new Windows.Storage.Pickers.FileOpenPicker();
    picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    picker.pickSingleFileAsync().done(function (file) {
        imageFile = file;
    });
}

function onDeferredImageRequested(request) {
    if (imageFile) {
        var imageStreamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromFile(imageFile);
        request.setData(imageStreamRef);
    }
}

function sharePullHandler(e) {
    var request = e.request;
    request.data.properties.title = "Share Pull Example";
    request.data.properties.description = "Demonstrates how to support pull operations in share.";
    request.data.properties.fileTypes.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
    request.data.setDataProvider(Windows.ApplicationModel.DataTransfer.StandardDataFormats.bitmap, onDeferredImageRequested);
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // This app is newly launched; register it as a share source.
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.addEventListener("datarequested", sharePullHandler);
            // Set up the button handler to pick an image file.
            document.getElementById("chooseImageButton").addEventListener("click", pickImageFile, false);
        } else {
            // TODO: This app was reactivated from suspension.
            // Restore the app state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};