Cómo compartir HTML (HTML)

Artículo
12/12/2015

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Compartir contenido HTML es algo distinto a compartir los demás formatos básicos como texto o como un vínculo. El principal reto es que el contenido que selecciona un usuario puede incluir referencias a otros elementos. Las aplicaciones que admiten uso compartido de contenido HTML deben considerar la manera en que se administran estas referencias para garantizar que los usuarios compartan el contenido que quieren.

Una situación típica que demuestra el reto de compartir contenido HTML es el contenido que incluye texto y una imagen. Cuando los usuarios seleccionan este contenido pulsan el acceso a Compartir, esperan el texto y la imagen. Sin embargo, HTML no incluye la imagen, sino una etiqueta img que apunta a la ubicación en la que se encuentra la imagen. Tienes que configurar un mapa de recursos si la referencia a la imagen no es accesible para la aplicación de destino, por ejemplo, en el caso de las imágenes almacenadas localmente.

Para ayudar a garantizar que se pueda compartir contenido HTML del modo que esperan los usuarios, el espacio de nombres Windows.ApplicationModel.DataTransfer incluye algunas funciones que ayudan a capturar los elementos a los que se hace referencia, como las imágenes. Te mostraremos cómo.

Lo que debes saber

Tecnologías

Windows.ApplicationModel.DataTransfer

Requisitos previos

Debes estar familiarizado con Visual Studio y sus plantillas asociadas.
Debes estar familiarizado con JavaScript.
Debes saber usar JavaScript para identificar el contenido HTML seleccionado por el usuario y para encontrar las instancias de los elementos secundarios, como las etiquetas img, dentro de la selección.

Instrucciones

Paso 1: Configurar tu aplicación como origen de contenido compartido

El objeto DataTransferManager es el punto de partida principal para la operación de uso compartido de contenido. Agrega un controlador de eventos DataRequested para activarlo cuando el usuario quiera invocar el uso compartido. En una aplicación de la Tienda Windows, esto se produce automáticamente cuando el usuario invoca el acceso a Compartir. Si estás desarrollando para Windows Phone, no hay un acceso a Compartir integrado, por lo que tendrás que agregar un control para que el usuario pulse y active el controlador.

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

Los pasos restantes implementan la función shareHtmlHandler.

Paso 2: Obtener un objeto DataRequest

Cuando se produce un evento datarequested, tu aplicación recibe un objeto DataRequest. Este objeto contiene un DataPackage que puedes usar para proporcionar el contenido que el usuario quiere compartir.

var request = e.request;

Paso 3: Establecer las propiedades de título y descripción

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

Paso 4: Usa el método createHtmlFormat para dar formato al fragmento

La función createHtmlFormat ajusta el formato HTML con los encabezados y la demás información que necesita el sistema para compartir el contenido.

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

Paso 5: Agregar el contenido HTML a DataPackage

Para agregar el contenido HTML, usa la función setHtmlFormat.

request.data.setHtmlFormat(htmlFormat);

Paso 6: Crear una RandomAccessStreamReference de la imagen local

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

Paso 7: Agregar la RandomAccessStreamReference a la asignación de recursos

Para agregar el archivo de imagen, usa la propiedad resourceMap.

request.data.resourceMap[localImage] = streamRef;

Si el fragmento HTML que se comparte tiene varias imágenes locales, necesitarás repetir este paso para cada una de ellas.

Ejemplo completo

A continuación, mostramos un ejemplo de una función que establece contenido HTML para que un usuario lo comparta. Para obtener un ejemplo más detallado, consulta nuestra galería de muestras de código.

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

Compartir a través de