Cómo recibir HTML (HTML)
[ 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
El contenido HTML puede constar de distintos tipos de contenido, incluidos texto, imágenes y otra información. Aquí te mostramos cómo tu aplicación puede recibir el contenido HTML que un usuario quiere compartir.
Al agregar esta funcionalidad a tu aplicación, considera también la posibilidad de aceptar contenido con formato de texto. El texto se puede convertir fácilmente a formato HTML, por lo tanto, la inclusión de compatibilidad para este formato te puede ayudar a asegurarte de que tu aplicación esté disponible con más frecuencia para los usuarios. Para obtener más información, consulta Cómo recibir texto.
Lo que debes saber
Tecnologías
Requisitos previos
- Debes estar familiarizado con Visual Studio y sus plantillas asociadas.
- Debes estar familiarizado con JavaScript.
Instrucciones
Paso 1: Admite el contrato para contenido compartido.
Antes de que tu aplicación pueda recibir contenido compartido, debes declarar que admite el contrato para contenido compartido. Este contrato básicamente indica al sistema que tu aplicación está disponible para recibir contenido. Si estás utilizando una plantilla de Microsoft Visual Studio para crear tu aplicación, a continuación te mostramos la forma de admitir el contrato para contenido compartido:
- Abre el archivo de manifiesto. Su nombre debe ser similar a package.appxmanifest.
- Abre la pestaña Declaraciones.
- Elige la opción Compartir destino en la lista Declaraciones disponibles.
Paso 2: Especifica que tu aplicación admite contenido HTML.
Para especificar la compatibilidad con el contenido HTML como formato de datos:
- Abre el archivo de manifiesto.
- En la sección Formatos de datos, haz clic en Agregar nuevo.
- Escribe html.
Nota Puedes especificar un punto de entrada de diferente cuando tu aplicación se activa para el Contrato para aceptar contenido compartido. Para ello, modifica la entrada Página de inicio en la sección Configuración de la aplicación de la declaración Compartir contenido, en el manifiesto de la aplicación. Es muy recomendable que uses también un archivo de JavaScript diferente para administrar la activación de esta página. Para ver un ejemplo, consulta Muestra de una aplicación de destino de contenido compartido.
Paso 3: Agrega un controlador de eventos para detectar el momento en que se activa tu aplicación.
Cuando un usuario selecciona tu aplicación para compartir contenido, el sistema la activa. Puesto que existen muchas maneras por las que se puede activar, debes agregar el código a tu controlador de eventos activated, que detecta el motivo por el que se produjo la activación. Para hacer esto, debes activar el valor de la propiedad kind.
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
// The application has been launched. Initialize as appropriate.
} else if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
...
}
};
Si usas una página de inicio dedicada para el Contrato para aceptar contenido compartido, puedes omitir la comprobación de la propiedad kind
Paso 4: Obtén el objeto ShareOperation.
El objeto ShareOperation incluye todos los datos que tu aplicación necesita para obtener el contenido que un usuario quiere compartir.
shareOperation = args.detail.shareOperation;
Paso 5: Vuelve rápidamente del controlador del evento activado.
El controlador del evento activated debe volver rápidamente. Pon en cola un evento asincrónico del controlador del evento activated para que el procesamiento de los datos compartidos se realice después de que vuelva el evento activado.
WinJS.Application.addEventListener("shareready", shareReady, false);
WinJS.Application.queueEvent({ type: "shareready" });
Los pasos restantes implementan la función shareReady.
Paso 6: Comprueba si DataPackageView incluye contenido HTML.
El objeto ShareOperation contiene un objeto DataPackageView. En esencia, este objeto es una versión de solo lectura del objeto DataPackage que la aplicación de origen usó para crear los datos. Usa este objeto para ver si el contenido que se va a compartir está disponible en formato HTML.
if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
// Code to get HTML goes here.
}
Es recomendable comprobar si DataPackage contiene el formato de datos que te interesa, aunque tu aplicación admita solo un formato. Esto facilita la compatibilidad posterior con otros tipos de datos y formatos de archivo.
Paso 7: Procesa el contenido HTML.
Para obtener el contenido HTML, llama al método getHtmlFormatAsync. Este método devuelve el contenido HTML en la especificación Formato HTML. Puedes usar DataTransfer.HtmlFormatHelper.getStaticFragment para extraer el fragmento de HTML del Formato HTML. El fragmento resultante también se corrige para quitar el contenido dinámico, como las etiquetas de script, con el fin de que sea seguro representarlo en tu aplicación
shareOperation.data.getHtmlFormatAsync().then(function (htmlFormat) {
var htmlFragment = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);
// In this example, we only display the HTML. To do this, you need
// a <div> element with an id of "output" in your HTML page.
// In your app, replace this with whatever is appropriate for your scenario.
document.getElementById("output").innerHTML = htmlFragment;
});
Por supuesto, lo que haces con el contenido HTML depende de tu aplicación.
Paso 8: Resolver las referencias a imágenes locales para el HTML.
La aplicación de origen de contenido compartido podría incluir en el contenido HTML imágenes ubicadas en su contexto de almacenamiento local (por ejemplo, ms-appx, ms-appdata, etc.). En este caso, la aplicación de origen debe haber rellenado el mapa de recursos con las referencias apropiadas para permitir que el destino de contenido compartido tenga acceso a estos recursos.
Para resolver las imágenes locales desde la aplicación de origen, usa la propiedad resourceMap para consultar cada una de las referencias a las imágenes y obtener el valor de RandomAccessStreamReference correspondiente. El ejemplo siguiente crea el identificador uniforme de recursos (URI) del objeto para representar las imágenes en el contenido HTML. En tu aplicación, reemplaza este código con las modificaciones correspondientes a tu escenario.
var images = document.getElementById("output").getElementsByTagName("img");
if (images.length > 0) {
shareOperation.data.getResourceMapAsync().done(function (resourceMap) {
if (resourceMap.size > 0) {
for (var i = 0, len = images.length; i < len; i++) {
var streamReference = resourceMap[images[i].getAttribute("src")];
if (streamReference) {
// Call a helper function to map the image element's src to a
// corresponding blob URL generated from the streamReference.
setResourceMapURL(streamReference, images[i]);
}
}
}
});
}
Paso 9: Llama a reportCompleted.
Una vez que la aplicación termina de compartir el contenido, llama a reportCompleted. Después de llamar a este método, el sistema descarta tu aplicación.
shareOperation.reportCompleted();
Observaciones
Consulta el código de la Muestra de una aplicación de destino de contenido compartido para ver la experiencia completa de una aplicación que recibe una imagen como parte de un uso compartido.
Ejemplo completo
var shareOperation = null;
function setResourceMapURL(streamReference, imageElement) {
if (streamReference) {
streamReference.openReadAsync().done(function (imageStream) {
if (imageStream) {
var url = URL.createObjectURL(imageStream, { oneTimeOnly: true });
imageElement.src = url;
}
}, function (e) {
imageElement.alt = "Failed to load";
});
}
}
function shareReady(args) {
if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
shareOperation.data.getHtmlFormatAsync().then(function (htmlFormat) {
var htmlFragment = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);
// In this example, we only display the HTML. To do this, you need
// a <div> element with an id of "output" in your HTML page.
// In your app, replace this with whatever is appropriate for your scenario.
document.getElementById("output").innerHTML = htmlFragment;
// Now we loop through any images and use the resourceMap to map each
// image element's src.
var images = document.getElementById("output").getElementsByTagName("img");
if (images.length > 0) {
shareOperation.data.getResourceMapAsync().done(function (resourceMap) {
if (resourceMap.size > 0) {
for (var i = 0, len = images.length; i < len; i++) {
var streamReference = resourceMap[images[i].getAttribute("src")];
if (streamReference) {
// Call a helper function to map the image element's
// src to a corresponding blob URL generated from the
// streamReference.
setResourceMapURL(streamReference, images[i]);
}
}
}
});
}
});
}
}
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
// The application has been launched.
args.setPromise(WinJS.UI.processAll());
} else if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
// This application has been activated for the Share contract
args.setPromise(WinJS.UI.processAll());
// We receive the ShareOperation object as part of the eventArgs.
shareOperation = args.detail.shareOperation;
// We queue an asychronous event so that working with the ShareOperation
// object does not block or delay the return of the activation handler.
WinJS.Application.addEventListener("shareready", shareReady, false);
WinJS.Application.queueEvent({ type: "shareready" });
}
};
Temas relacionados
Muestra de una aplicación de destino de contenido compartido
Uso compartido e intercambio de datos
Inicio rápido: recepción de contenido compartido
Windows.ApplicationModel.DataTransfer