Clipboard o Portapapeles con Adobe AIR

Una de las cosas que Adobe AIR, nos lo hace sencillo es copiar datos y objetos a través del portapapeles
Este puede acceder a la propiedad generalClipboard del Sistema Operativo.
Para agregar datos en el portapapeles se puede usar el método de setData() o setDataHandler() y para recibirlos se puede usar getData ()

Un ejemplo de uso de estos métodos

Clipboard.generalClipboard.setData (ClipboardFormats.TEXT_FORMAT, "Texto para el portapapeles");
Clipboard.generalClipboard.getData (ClipboardFormats.TEXT_FORMAT);

En Adobe AIR los formatos compatibles son
BITMAP_FORMAT: Objeto BitmapData
FILE_LIST_FORMAT: Conjunto de objetos File
HTML_FORMAT: En formato HTML datos de la cadena
TEXT_FORMAT: Datos de la cadena
RICH_TEXT_FORMAT: Un ByteArray con datos de formato de texto enriquecido
URL_FORMAT: Una cadena tipo URL
ClipboardFormats Define constantes

Por ejemplo

if (Clipboard.generalClipboard.hasformat (ClipboardFormats.TEXT_FORMAT)) {
var texto: String = Clipboard.generalClipboard.getData (ClipboardFormats.TEXT_FORMAT);
}

Lo que hacemos es comprobar si el portapapeles contiene texto para luego convertirlo en cadena.

Hasformat Devuelve verdadero o falso
Si queremos borrar el contenido del portapales

Clipboard.generalClipboard.clear uso ();

El siguiente código le mestra como añadir datos al portapapeles del sistema usando Flex y ActionScript

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
          <![CDATA[
               import flash.desktop.Clipboard;
               import flash.desktop.ClipboardFormats
               private function handleCopyClick(event:MouseEvent):void
               {
                     Clipboard.generalClipboard.setData(ClipboardFormats.TEXT_FORMAT,
textInput.text);
               }

          ]]>
    </mx:Script>
    <mx:TextInput id="textInput" />
    <mx:Button id="copyButton" label="Copy" click="handleCopyClick(event)"/>
</mx:WindowedApplication>

Aca tenemos la misma versión pero para HTML y Javascript

<html>
    <head>
        <title>Copy to Clipboard</title>
        <script type="text/javascript" src="AIRAliases.js"></script>
        <script type="text/javascript">
               function handleCopyClick(event) {
                     var textInput = document.getElementById('userInput');
                     air.Clipboard.generalClipboard.setData(air.ClipboardFormats.TEXT_FORMAT,
textInput.value);
               }
        </script>
    </head>
    <body>
        <input id="userInput" type="text" />
        <input id="copyButton" type="submit" value="Copy"
onclick="handleCopyClick(event)" />
    </body>
</html>

Ahora que ya tenemos algo en el portapapeles lo mas logico es que querramos extraerlo, asi que primero vamos con la version Flex AS3

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
          <![CDATA[
               import mx.collections.ArrayCollection;
               import flash.desktop.Clipboard;
               import flash.desktop.ClipboardFormats;
               import flash.desktop.ClipboardTransferMode;
               [Bindable]
               private var files:ArrayCollection = new ArrayCollection();
               private function handleGetDataClick(event:MouseEvent):void {
                     if(Clipboard.generalClipboard.hasFormat(Clipboard
Formats.FILE_LIST_FORMAT)) {
                          var items:Array = Clipboard.generalClipboard.getData(
ClipboardFormats.FILE_LIST_FORMAT, ClipboardTransferMode.CLONE_ONLY) as Array;
                          files = new ArrayCollection( items );
                          for each (var aFile:File in items) {
                                trace( "[FILE REFERENCE]: " + aFile.name );
                          }
                     }
               }
          ]]>
    </mx:Script>
    <mx:Button id="getData" label="Get Data" click="handleGetDataClick(event)" />
    <mx:Label text="File List on Clipboard" />
    <mx:List id="results" dataProvider="{files}" labelField="nativePath"/>
</mx:WindowedApplication>

Y ahora seguimos con la version HTML JavaScript.

<html>
    <head>
        <title>Retrieve Data from Clipboard</title>
        <link href="sample.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="AIRAliases.js"></script>
        <script type="text/javascript">
            function handleGetDataClick(event) {
                     result.innerHTML = "";
                     if(air.Clipboard.generalClipboard.hasFormat
(air.ClipboardFormats.FILE_LIST_FORMAT)) {
                          var items = new Array();
                          items =
air.Clipboard.generalClipboard.getData(air.ClipboardFormats.FILE_LIST_FORMAT,air.Cl
ipboardTransferMode.CLONE_ONLY);
                          for (index = 0; index < items.length; index++) {
                              var aFile = items[index];
                              result.innerHTML += aFile.nativePath + " <br/> ";
                                air.trace("[FILE REFERENCE]:" + aFile.name);
                          }
                     } else {
                          result.innerHTML = "No File References on Clipboard"
;                    }
               }
        </script>
    </head>
    <body>
        <input type="button" value="Get Data" onclick="handleGetDataClick(event)" />
        <div id="result"></div>
    </body>
</html>

Ahora nos falta algo para elminar los datos del portapapeles a ver que sale.
Flex y AS3

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
          <![CDATA[
               import flash.desktop.Clipboard;
               import flash.desktop.ClipboardFormats;
               private function handleClearFormatClick(event:MouseEvent):void {
                     Clipboard.generalClipboard.clearData(format.selectedItem.value
as String);
               }
          ]]>
    </mx:Script>
    <mx:ComboBox id="format">
          <mx:dataProvider>
               <mx:Array>
                     <mx:Object value="{ClipboardFormats.TEXT_FORMAT}" label="Text" />
                     <mx:Object value="{ClipboardFormats.URL_FORMAT}" label="URL" />
                     <mx:Object value="{ClipboardFormats.HTML_FORMAT}" label="HTML" />
                     <mx:Object value="{ClipboardFormats.RICH_TEXT_FORMAT}"
label="Rich Text" />
                     <mx:Object value="{ClipboardFormats.BITMAP_FORMAT}"
label="Bitmap" />
                     <mx:Object value="{ClipboardFormats.FILE_LIST_FORMAT}"
label="File List" />
               </mx:Array>
          </mx:dataProvider>
    </mx:ComboBox>
    <mx:Button label="Clear Format Data" click="handleClearFormatClick(event)" />
</mx:WindowedApplication>

Prometo que es el ultimo
HTML y JavaScript

<html>
    <head>
        <title>Entry 7.4 - Clear Data From Clipboard</title>
        <script type="text/javascript" src="AIRAliases.js"></script>
        <script type="text/javascript">
            function populateSelectOptions() {
                     document.formatForm.formats.options[0] = new Option( "Text",
air.ClipboardFormats.TEXT_FORMAT );
                     document.formatForm.formats.options[1] = new Option( "URL",
air.ClipboardFormats.URL_FORMAT );
                     document.formatForm.formats.options[2] = new Option( "HTML",
air.ClipboardFormats.HTML_FORMAT );
                     document.formatForm.formats.options[3] = new Option( "Rich
Text", air.ClipboardFormats.RICH_TEXT_FORMAT );
                     document.formatForm.formats.options[4] = new Option( "Bitmap",
air.ClipboardFormats.BITMAP_FORMAT );
                     document.formatForm.formats.options[5] = new Option( "File
List", air.ClipboardFormats.FILE_LIST_FORMAT );
               }
               function handleClearFormatClick(event) {
                     var selectedOption = document.formatForm.formats.options[
document.formatForm.formats.selectedIndex];
                     air.Clipboard.generalClipboard.clearData(selectedOption.value);
               }
        </script>
    </head>
    <body onload="populateSelectOptions()">
          <form name="formatForm">
               <select name="formats"></select><br />
               <input type="button" value="Clear Format"
onclick="handleClearFormatClick(event)" />
          </form>

    </body>
</html>

No es mucho mas que esto lo que hay que saber para usar el portapapeles con Adobe AIR, como nota al margen se que los ejemplos estan hechos para las primeras versiones pero es muy sencillo adpatarlo para las nuevas versiones.

Espero sean de utilidad
Saludos desde Buenos Aires.

Posted in Air | No Comments »

Leave a Reply