Come condividere contenuti HTML (HTML)

Articolo
12/11/2015

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

La condivisione di contenuti HTML si differenzia dalla condivisione di altri formati di base, come testo o collegamenti. La difficoltà principale sta nel fatto che il contenuto selezionato da un utente potrebbe contenere riferimenti ad altri elementi. Le app che supportano la condivisione di contenuti HTML devono prevedere il modo in cui gestire questi riferimenti per assicurare che gli utenti condividano il contenuto desiderato.

Una situazione tipica che dimostra la complessità della condivisione di contenuti HTML è quando il contenuto presenta sia del testo che un'immagine. Quando gli utenti selezionano il contenuto e toccano l'accesso alla condivisione, si aspettano di condividere sia il testo che l'immagine. Tuttavia, il codice HTML non contiene l'immagine ma un tag img che punta alla posizione in cui risiede l'immagine. Devi impostare una mappa delle risorse se il riferimento all'immagine non è accessibile per un'app di destinazione, ad esempio nel caso di un'immagine archiviata localmente.

Per aiutarti a garantire la condivisione di contenuti HTML che gli utenti si aspettano, lo spazio dei nomi Windows.ApplicationModel.DataTransfer include alcune funzioni che semplificano l'acquisizione degli elementi a cui viene fatto riferimento, come nel caso delle immagini. Di seguito ti mostriamo come.

Cosa sapere

Tecnologie

Windows.ApplicationModel.DataTransfer

Prerequisiti

Occorre avere già familiarità con Visual Studio e i modelli associati.
Occorre avere già familiarità con JavaScript.
Occorre sapere come usare JavaScript per identificare il contenuto HTML selezionato da un utente e trovare le istanze di elementi figlio come i tag img all'interno della selezione.

Istruzioni

Passaggio 1: Impostare l'app come origine di condivisione

L'oggetto DataTransferManager è il punto di partenza principale per qualsiasi operazione di condivisione. Aggiungi un gestore per l'evento DataRequested da attivare quando l'utente vuole richiamare la condivisione. In un'app di Windows Store questa operazione viene eseguita automaticamente quando l'utente richiama l'accesso alla condivisione. Se stai sviluppando un'app per Windows Phone, non esiste alcun accesso alla condivisione incorporato. Dovrai quindi aggiungere un controllo che l'utente dovrà toccare per attivare il gestore.

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

I passaggi rimanenti riguardano l'implementazione della funzione shareHtmlHandler.

Passaggio 2: Recuperare un oggetto DataRequest

Quando si verifica un evento datarequested, l'app riceve un oggetto DataRequest. Questo oggetto contiene un DataPackage che puoi usare per fornire il contenuto che l'utente vuole condividere.

var request = e.request;

Passaggio 3: Impostare le proprietà di titolo e descrizione

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

Passaggio 4: Usare il metodo createHtmlFormat per definire il formato del frammento

La funzione createHtmlFormat esegue il wrapping del formato HTML con le intestazioni e le altre informazioni necessarie al sistema per condividere il contenuto.

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);

Passaggio 5: Aggiungere il contenuto HTML all'oggetto DataPackage

Per aggiungere il contenuto HTML devi usare la funzione setHtmlFormat.

request.data.setHtmlFormat(htmlFormat);

Passaggio 6: Creare un RandomAccessStreamReference dell'immagine locale

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

Passaggio 7: Aggiungere il RandomAccessStreamReference alla mappa delle risorse

Per aggiungere il file dell'immagine, usa la proprietà resourceMap.

request.data.resourceMap[localImage] = streamRef;

Se il frammento HTML condiviso contiene più immagini locali, dovrai ripetere questo passaggio per ogni immagine locale.

Esempio completo

Ecco un esempio di una funzione che imposta un contenuto HTML da condividere. Per un esempio più completo, guarda il nostro esempio della Code Gallery.

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());
    }
};