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

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

Benutzer möchten oft Dateien mit anderen Personen oder Apps teilen. Mit dem Freigabefeature können Sie in Ihrer App mühelos verschiedenste Aufgaben wie das Versenden von Dateien per E-Mail an einen Kollegen oder das Freigeben von Bildern aus einem Familienurlaub unterstützen.

Wenn Sie eine Funktion wie das Freigeben von Dateien unterstützen, müssen Sie berücksichtigen, wie lange die entsprechende Vorbereitung der Dateien in der App dauert. In den meisten Fällen sind die Dateien wahrscheinlich sofort in der App bereit. Wenn dies der Fall ist, finden Sie in diesem Thema die für Sie notwendigen Schritte. Wenn Ihre App zusätzliche Schritte zum Vorbereiten der Dateien erfordert (z. B. zum Konvertieren der Dateien in ein anderes Format), sollten Sie das Thema So wird's gemacht: Unterstützen von Pullvorgängen lesen. Dort wird erläutert, wie Sie eine Delegatfunktion verwenden, damit Ziel-Apps den freigegebenen Inhalt mithilfe von Pull aus Ihrer App übertragen können und Ihre App den Inhalt nicht mithilfe von Push übertragen muss.

Wissenswertes

Technologien

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: 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", shareStorageItemsHandler);

Die verbleibenden Schritte dienen der Implementierung der shareStorageItemsHandler-Funktion.

Schritt 3: 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 4: Festlegen der Kachel- und Beschreibungseigenschaften

request.data.properties.title = "Share StorageItems Example";
request.data.properties.description = "Demonstrates how to share files.";

Schritt 5: Hinzufügen der Dateien zum DataPackage

Um die Dateien dem DataPackage hinzuzufügen, verwenden Sie die setStorageItems-Methode.

request.data.setStorageItems([imageFile]);

Anmerkungen

setStorageItems stellt standardmäßig schreibgeschützte "Klone" von storageItems zum Freigeben für Ziel-Apps bereit. Nachdem Sie setStorageItems aufgerufen haben, werden alle neuen Eigenschaften, die für die einzelnen Speicherelemente festgelegt werden, nicht mehr für die geklonten Elemente übernommen. Daher sollten Sie sicherstellen, dass die Dateien vollständig für die Freigabe bereit sind, bevor Sie sie dem DataPackage hinzufügen.

Wenn die Ziel-App über Lese-/Schreibzugriff auf storageItems verfügen soll, verwenden Sie die überladene Version der setStorageItems-Methode, um den Lesezugriff oder den Lese-Schreibzugriff festzulegen. Beispielsweise gibt eine Quell-App, die das Ziel bittet, einen Vorgang zum Löschen beim Einfügen durchzuführen, Lese-/Schreibzugriff an, damit die Quelldateien nach Abschluss des Kopiervorgangs am Ziel gelöscht werden können.

Wenn für die App ein asynchroner Vorgang zum Vorbereiten des Bilds oder des Miniaturbilds erforderlich ist, müssen Sie das Verzögerungsmuster verwenden. Die entsprechende Vorgehensweise wird unter So wird's gemacht: Ausführen von asynchronen Aufrufen im datarequested-Handler gezeigt.

Falls das Vorbereiten der Dateien für die Freigabe in Ihrer App lange dauert (mehr als 200 Millisekunden), können Sie ggf. eine delegate-Funktion zum Freigeben verwenden. Informationen dazu finden Sie unter Unterstützen von Pullvorgängen. Wenn Sie sich für die Verwendung einer Delegatfunktion entscheiden, müssen Sie die FileTypes-Eigenschaft für das DataPackage festlegen, bevor Sie die Dateien selbst hinzufügen.

Vollständiges Beispiel

Das folgende Beispiel zeigt eine Funktion, die einige Dateien für die Freigabe durch einen Benutzer festlegt. Ein ausführlicheres Beispiel finden Sie in unserer Codegalerie.

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 shareStorageItemsHandler(e) {
    var request = e.request;
    request.data.properties.title = "Share StorageItems Example";
    request.data.properties.description = "Demonstrates how to share files.";
    request.data.setStorageItems([imageFile]);
}

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", shareStorageItemsHandler);
            // Setup the button handler to pick 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());
    }
};

Verwandte Themen

Beispiel zur Quell-App für die Inhaltsfreigabe

Freigeben und Austauschen von Daten

Gemeinsames Nutzen von HTML

Gemeinsames Nutzen eines Links

So wird's gemacht: Freigeben von Text

Schnellstart: Teilen von Inhalt

DataPackage

Windows.ApplicationModel.DataTransfer

Windows.ApplicationModel.DataTransfer.Share