So wird's gemacht: Teilen von Dateien (Windows Store-Apps mit JavaScript und HTML)

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.

Dateien können auch mithilfe von "Koppeln und senden" des Charms "Geräte" freigegeben werden. Unter "Koppeln und senden" versteht man die Freigabe per Nahfeldkommunikation (Near Field Communication, NFC).

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.


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 Startpunkt für alle Freigabevorgänge. Sie fügen einen datarequested-Ereignishandler für das DataTransferManager-Objekt im activated-Ereignishandler der App hinzu. Das datarequested-Ereignis tritt ein, wenn der Benutzer den Charm "Teilen" aufruft.


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 von Bildern
Gemeinsames Nutzen eines Links
So wird's gemacht: Freigeben von Text
Schnellstart: Teilen von Inhalt
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.