13/3/2009 14:11 El Bruno

[Silverlight] Porque no se soporta el click derecho del mouse (no se porque, pero yo paso y lo agrego)

Buenas,

para despejar un poco los posts de Team System, hoy me toca escribir una solución a un problema un tanto extraño:

¿cómo agregar soporte para el botón derecho del mouse en una aplicación Silverlight?

No tengo muy en claro el porqué no han incluido esta funcionalidad dentro de SL, supongo que por cuestiones de compatibilidad con otras plataformas; pero a mi jefe eso mucho no le importa el botón derecho suele ser una comodidad para algunos entornos, asi que a buscar una solución.

Si bien existen varias formas de lograrlo, yo me decanté por aprovechar las capacidades de los navegadores y que desde el navegador se dispare el evento del click para ser interpretado por la aplicación Silverlight.

El siguiente paso a paso muestra como realizar un pequeño ejemplo para agregar soporte para el click derecho del mouse en aplicaciones Silverlight.

Tutorial

1. Dentro de Visual Studio 2008 SP 1, con el toolkit de Silverlight instalado creamos un nuevo proyecto: menu File // New Project.

2. Seleccionamos Visual C# // Silverlight, del tipo Silverlight Application y le damos un nombre (SLRightClickDemo en este caso)

3. En el formulario de opción para el hosting de nuestra aplicacion SL, seleccionamos la primera opción Add a new ASP.Net Web Project to the solution to host Silverlight. (el nombre por defecto que nos propone es SLRightClickDemo.Web)

4. Como comenté en la introducción, mi idea es aprovechar las capacidades de Javascript para interceptar el evento Right Click de un ratón, es por esto que lo primero que modificaremos será el archivo de test SLRightClickDemoTestPage.html.

5. Seleccionar el archivo SLRightClickDemoTestPage.html; desplegar el menú contextual y seleccionar la opción Set as Start Page.

6. Editamos el archivo SLRightClickDemoTestPage.html; modificamos la definición del body para trabajar con los eventos del raton:

   1: <body onmousedown="MouseClickEvent();" oncontextmenu="return false;">

7. A continuación agregamos un nuevo bloque de Script con la definición de la función MouseClickEvent():

   1: <script type="text/javascript">
   1:  


   2:   function MouseClickEvent() {


   3:     try {


   4:       var silverlightControl = document.getElementById("Xaml1");


   5:       if (silverlightControl) {


   6:         silverlightControl.Content.ActualSilverlightControl.ProcessMouseClickEvent(event);


   7:       }


   8:     }


   9:     catch (e) { }


  10:   }

</script>

Esta función obtiene el control de la página llamado Xaml1 y luego invoca a una función ProcessMouseEvent pasandole como argumento los datos del evento del navegador.

8. Como la página por defecto de prueba no define el nombre del control para SL, le agregamos el id al mismo (línea 2) y además definimos el parámetros windoless a true para nuestra aplicación SL (línea 8):

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 
   2:     width="100%" height="100%" id="Xaml1">
   3:     <param name="source" value="ClientBin/SLRightClickDemo.xap"/>
   4:     <param name="onerror" value="onSilverlightError" />
   5:     <param name="background" value="white" />
   6:     <param name="minRuntimeVersion" value="2.0.31005.0" />
   7:     <param name="autoUpgrade" value="true" />
   8:     <param name="windowless" value="true" />
   9:     <a href="http://go.microsoft.com/fwlink/?LinkID=124807" 
  10:         style="text-decoration: none;">
  11:          <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
  12:             alt="Get Microsoft Silverlight" style="border-style: none"/>
  13:     </a>
  14: </object>

9. El trabajo en nuestra página HTML ya está listo.

10. A continuación abrimos en modo de edición de código el archivo Page.xaml y realizamos las siguientes modificaciones:

   1: [ScriptableType]
   2: public partial class Page : UserControl
   3: {
   4:   public Page()
   5:   {
   6:     InitializeComponent();
   7:  
   8:     this.Loaded += new RoutedEventHandler(Page_Loaded);
   9:   }
  10:  
  11:   void Page_Loaded(object sender, RoutedEventArgs e)
  12:   {
  13:     // register current object
  14:     HtmlPage.RegisterScriptableObject("ActualSilverlightControl", this);
  15:  
  16:   }
  17:  
  18:   [ScriptableMember]
  19:   public void ProcessMouseClickEvent(ScriptObject evt)
  20:   {
  21:  
  22:     string buttonDesc = "";
  23:     int button = int.Parse(evt.GetProperty("button").ToString());
  24:     int clientX = int.Parse(evt.GetProperty("ClientX").ToString());
  25:     int clientY = int.Parse(evt.GetProperty("ClientY").ToString());
  26:     if (button == 1)
  27:       buttonDesc = "Izq";
  28:     else if (button == 2)
  29:       buttonDesc = "Der";
  30:  
  31:     string msg = string.Format(@"Click: {0}, en {1}, {2}", buttonDesc, clientX.ToString(), clientY.ToString());
  32:     MessageBox.Show(msg);
  33:   }
  34: }

11. El atributo [ScriptableType] que decora la clase (línea 1) permite que nuestra clase pueda trabajar con scripting.

12. En el evento Loaded() de la página registramos el mismo como un control que trabaje con script.

13. Agregamos una nueva función ProcessMouseClickEvent() (línea 19) que es la función que se invoca desde el navegador cuando se realiza un click con el mouse (ver paso 7).

14. F5 run, y listo.

 

El código de ejemplo de la demo se puede descargar desde http://cid-bef06dffdb192125.skydrive.live.com/self.aspx/Code%20Samples/2009%2003%2013%20Silverlight%20RightClick%20Demo.zip

 

 

Saludos @ La Finca

El Bruno

Crossposting from ElBruno.com

Archivado en: ,
Comparte este post: