Silverlight 4 Beta – Soporte para Arrastrar y Soltar en Mac OS X
Posted on : 26-11-2009 | By : Rodrigo | In : Silverlight 4
Tags: Apple, Arrastrar, Drop, Mac OS X, ondragover, ondrop, Safari, Silverlight 4, WebKit
7
En el artículo anterior vimos que una de las características nuevas de Silverlight 4 es su capacidad de recibir archivos que se estén arrastrando desde afuera de la aplicación. No obstante, en Mac OS X es diferente el mecanismo para lograr esta funcionalidad ya que en ese sistema operativo, una acción de arrastrar y soltar no le avisa al API de Silverlight de lo ocurrido, a diferencia de lo que sucede en Windows. En este artículo veremos la alternativa para implementar esta característica en Mac OS X. Cabe mencionar que este mecanismo funcionará en Safari, mientras que en FireFox sea probable que no debido a la diferencia de arquitectura de este último en el sistema operativo de Apple.
El proyecto
Usaremos el proyecto anterior.
Modificaciones
Para implementar la funcionalidad de Arrastrar y Soltar en Mac OS X necesitaremos hacerlo a través de funciones de Javascript que le avisen al plugin que una acción de arrastrar-soltar ha sucedido. Las funciones de Javascript deberán manejar alguno de los siguientes eventos del elemento <OBJECT> o <EMBED> (según lo que hayamos usado para instanciar Silverlight, en nuestro caso hemos usado <OBJECT>)
- ondragenter
- ondragleave
- ondragover
- ondrop
Según la documentación de Web Kit, de los eventos anteriores debemos como mínimo manejar ondragover, y dentro de él ejecutar preventDefault() en el objeto de evento. Si no hacemos esto no recibiremos ninguno de los cuatro eventos anteriores. Cabe mencionar que esto no está explicado en el SDK de Silverlight 4 Beta pero probablemente esto sea aclarado en sus futuras versiones.
Aclarado lo anterior, realizaremos las siguientes modificaciones al elemento <OBJECT> con el que estamos instanciando Silverlight:
// los parámetros quedan igual
</object>
Como podemos observar, las modificaciones son:
- Estamos agregando el atributo id, el cual nos permitirá invocar desde script al elemento.
- Estamos manejando ondragover a través de la función ManejaDragOver. Asimismo a la función le estamos pasando el objeto event el cual tiene información del evento.
- Estamos manejando ondrop a través de la función ManejaDrop. Asimismo a la función le estamos pasando el objeto event el cual tiene información del evento.
Ahora bien, debemos implementar las funciones recién explicadas. Esto lo haremos en el bloque de <script> que ya tenemos presente en la página:
//son requeridos según la documentación de WebKit localizada en:
//http://tuvix.apple.com/mac/library/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/DragAndDrop.html
function ManejaDragOver(oEvent) {
oEvent.preventDefault();
}
function ManejaDrop(evento) {
// Previene las acciones por default en el DOM
evento.preventDefault();
// Obtiene el objeto de Silverlight
var sl = document.getElementById("sl");
// Delega el evento a Silverlight
var manejado = sl.dragDrop(evento);
// Si ha sido manejado, evita la propagación del evento en el DOM
if (manejado) evento.stopPropagation();
}
ondragover
La función ManejaDragOver únicamente hace una llamada a preventDefault() sobre el objeto de evento. Esto para permitir que el resto de eventos puedan ser recibidos (ver en la parte de arriba la liga a la documentación de Web Kit).
ondrop
La función ManejaDrop también hace una llamada a preventDefault() para evitar las que las acciones por default sucedan en el DOM (ya que nosotros queremos hacer nuestro propio manejo). Posteriormente obtiene el objeto de Silverlight y ejecuta su función dragDrop() pasando como parámetro el objeto de evento. Finalmente validamos que si el evento ha sido manejado, evite la propagación del evento en el DOM.
Resultado
Como podemos apreciar en las siguientes figuras, al arrastrar un archivo desde afuera de la aplicación Silverlight en Mac OS X, y después soltarlo el archivo se agregará al ListBox y comenzará su reproducción automáticamente, justo como en el artículo anterior.
Resumen
Para implementar la funcionalidad de Arrastrar y Soltar en Mac OS X debemos hacerlo a través de script en el DOM debido a las diferencias en la arquitectura de las plataformas; no obstante es pefectamente posible. En este artículo detallamos los pasos necesarios para hacerlo. Esto nos permitirá ofrecer a nuestros usuarios una experiencia estándar en el uso de los aplicativos Silverlight que construímos.
Puedes descargar el código aquí.
Puedes ver el demo en vivo aquí. Requiere el runtime Silverlight 4, Apple Mac OS X y Safari.
