Inicio rápido: conceptos básicos sobre el Portapapeles (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

Las mejores aplicaciones ofrecen a los usuarios el mayor control posible sobre los datos. Un método de control que los usuarios esperan tener está relacionado con las operaciones del portapapeles. Estas operaciones permiten a los usuarios cortar, copiar y pegar datos. Las operaciones del portapapeles pueden producirse dentro de la misma aplicación o entre dos aplicaciones distintas en un mismo equipo. Con el portapapeles, los usuarios pueden colocar la información fácilmente donde la necesitan.

Más de un método para compartir datos

Antes de comenzar a describir cómo agregar operaciones del Portapapeles a tu aplicación, debes recordar que Windows 8 admite diversos métodos de transferencia de datos. Proporcionamos una introducción a estos métodos en el tema sobre el uso compartido y el intercambio de datos. Uno de estos métodos, el uso compartido, tiene muchas características en común con el Portapapeles. Desde la perspectiva de un desarrollador, las operaciones del Portapapeles y de uso compartido de contenido usan el mismo espacio de nombres de Windows, Windows.ApplicationModel.DataTransfer. Ambas necesitan que la aplicación recopile los datos que el usuario selecciona (A menudo nos referimos a este procedimiento como empaquetado, porque para ello se usa la clase DataPackage). Desde la perspectiva de un usuario, el portapapeles representa el método "clásico" de transferir datos.

Como desarrollador, debes tener presente que, si bien las operaciones del portapapeles y de uso compartido son muy parecidas, presentan diferencias importantes. Con el uso compartido, la atención se centra en el destino: la aplicación o el servicio que selecciona el usuario. Con el Portapapeles, la atención se inclina más hacia los datos pero, lo que es más importante aún, las operaciones del Portapapeles son el único método para intercambiar datos entre una aplicación de escritorio y una aplicación de la Tienda Windows.

Para obtener más información sobre las diferencias entre las operaciones del portapapeles y de uso compartido de contenido, consulta Uso compartido e intercambio de datos.

Compatibilidad integrada del portapapeles

En muchos casos, es posible que no necesites escribir código para admitir las operaciones del Portapapeles. Muchos de los controles que puedes usar para crear una aplicación de la Tienda Windows ya admiten las operaciones del portapapeles. Para obtener más información sobre los controles disponibles, consulta Agregar controles y contenido.

Antes de comenzar

La adición de compatibilidad para las operaciones del portapapeles a tu aplicación es un proceso muy sencillo. Primero, debes echar un vistazo a nuestras Directrices y lista de comprobación para comandos del portapapeles. Allí, encontrarás una gran cantidad de información que puede ayudarte a crear la mejor experiencia del usuario y también algunas ideas que pueden ayudarte a sacar mayor partido de tu código.

Después necesitas considerar los tipos de formatos de datos que quieres admitir. En Windows 8, existen dos categorías de formatos: estándar y personalizado. En la actualidad, los formatos estándares son, entre otros:

Text
HTML
URI
Bitmaps
StorageItems
RTF

Para ver un ejemplo de operaciones del Portapapeles que usan estos formatos de datos, consulta nuestro código de ejemplo. También te recomendamos que eches un vistazo al tema de referencia, StandardDataFormats, que puedes usar para especificar los tipos de formato que tu aplicación admite.

Los formatos de datos personalizados, tal y como el nombre sugiere, se refieren a los formatos de datos que no encajan en uno de los formatos estándar. Muchas veces, estos formatos representan colecciones lógicas de datos, como una dirección o un evento. Para admitir formatos personalizados, te recomendamos que uses uno de los diversos esquemas que se especifican en http://schema.org/docs/full.htm. El uso de los formatos de datos más conocidos, como estos esquemas, ayuda a garantizar que la aplicación que recibe los datos del portapapeles sepa qué hacer con ellos.

Introducción

Por lo general, la compatibilidad con las operaciones del portapapeles consta de dos partes: copiar (o cortar) y pegar. Primero, observemos cómo administrar las operaciones copiar y cortar. En primer lugar, asegúrate de que tu aplicación cuente con las referencias adecuadas. Si usas una plantilla de Microsoft Visual Studio, estas referencias se agregan en cuanto agregas un proyecto nuevo. Si no usas Visual Studio, asegúrate de que tu aplicación tenga acceso al espacio de nombres Windows.ApplicationModel.DataTransfer.

Una vez que has preparado el proyecto, necesitas una instancia del objeto DataPackage. Este objeto es lo que contiene los datos que el usuario quiere copiar y las propiedades (como la descripción) que quieres incluir.

var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();

Copiar y cortar

En este momento, estás listo para especificar la operación del portapapeles que quieres realizar. Estas operaciones están disponibles cuando se usa la enumeración DataPackageOperation. Esto es lo que tienes que hacer con las operaciones de copia:

var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
dataPackage.requestedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.copy;

Y esto es lo que tienes que hacer con las operaciones de cortar (también conocidas como operaciones de mover):

var dataPackage = new Windows.ApplicationModel.DataTransfer.DataPackage();
dataPackage.requestedOperation = Windows.ApplicationModel.DataTransfer.DataPackageOperation.move;

En este momento, puedes agregar los datos que un usuario ha seleccionado para el objeto DataPackage. Si la clase DataPackage admite estos datos, puedes usar uno de los métodos correspondientes en el objeto DataPackage.

Para agregar texto:

dataPackage.setText("Hello World!");

Para ver ejemplos de cómo agregar otros formatos a un DataPackage, consulta el ejemplo del Portapapeles en la galería de código. Y recuerda que puedes agregar más de un formato a un DataPackage.

Lo último que debes hacer es agregar el DataPackage al portapapeles. Para esto, debes llamar al método estático Clipboard.setContent.

Windows.ApplicationModel.DataTransfer.Clipboard.setContent(dataPackage);

Pegar

Para obtener el contenido del portapapeles, llama al método estático Clipboard.getContent. Este método devuelve un DataPackageView que incluye el contenido. Este objeto es casi idéntico a un objeto DataPackage, con la excepción de que su contenido es de solo lectura. Con ese objeto, puedes usar los métodos AvailableFormats o contains para identificar los formatos disponibles. Después puedes llamar al método DataPackageView correspondiente para obtener los datos. Por ejemplo, así puedes obtener el texto almacenado en el portapapeles:

var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.text)) {
    dataPackageView.getTextAsync().then(function (text) {
        // To output the text from this example, you need an HTML element
        // with an id of "output".
        document.getElementById("output").innerText = "Clipboard now contains: " + text;
    });
}

Seguimiento de cambios en el portapapeles

Además de los comandos copiar y pegar, es posible que también te resulte útil agregar un controlador de eventos para que tu aplicación sepa cuándo se producen cambios en el contenido del portapapeles. Para hacer esto, debes controlar el evento ContentChanged del portapapeles.

Windows.ApplicationModel.DataTransfer.Clipboard.addEventListener("contentchanged", function (event) {
    var dataPackageView = Windows.ApplicationModel.DataTransfer.Clipboard.getContent();
    if (dataPackageView.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.text)) {
        dataPackageView.getTextAsync().then(function (text) {
            // To output the text from this example, you need an HTML element
            // with an id of "output".
            document.getElementById("output").innerText = "Clipboard now contains: " + text;
        });
    }
});

Con el uso de este controlador, tu aplicación recibe notificaciones cada vez que cambia el contenido del portapapeles.

Pasos siguientes

A estas alturas, ya debes tener una comprensión básica de cómo agregar compatibilidad para el Portapapeles en tu aplicación. Si no es así, te recomendamos que repases las Directrices y lista de comprobación para comandos del Portapapeles para que puedas crear la mejor experiencia de usuario posible. Además, descarga nuestro ejemplo desde la galería de código si quieres ver varios ejemplos de uso del Portapapeles.