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.
[...] Ve el artículo completo aquí [...]
Creo que esto ya no es necesario en la versión RTM.
Hola Jaime gracias por escribir, pero te comento que sí es necesario incluir las funciones de Javascript para que funcione en Mac OS el Drag & Drop (en SL4 RTM incluso SL5). Puedes consultar http://msdn.microsoft.com/en-us/library/ee670998%28v=vs.95%29.aspx para mayor información al respecto.
Salu2!
Hola Rodrigo, una pregunta, estoy viendo que el evento de modelo de ejecucion y seguridad ya paso, tendras la liga para ver la grabacion ? el evento fue 1032459422
gracias !
Hola Ana! a cuál evento te refieres? dónde lo viste?
gracias y salu2!
No funciona la aplicación ya que dice que se desarrollo con una beta que según la consideración del Explorer ya está obsoleta. Pero muy bueno el artículo.
Muchas Gracias JFF, lo voy a checar (efectivamente fue hecho con Silverlight 4 Beta, pero el concepto sigue siendo el mismo en SL4 RTW y SL5 RTW)