[ASP.NET] IE9 + W7: Botones en Thumbnail

Hola, bueno ya acercándonos al final de la serie de entradas sobre Internet Explorer 9 y Windows 7, en esta ocasión vamos a revisar como podemos agregar botones al thumbnail los cuales le permitirán al usuario interactuar con la aplicación son necesidad de tenerla como ventana activa.

Primero algunos puntos importantes:

• Es posible tener botones diferentes para cada página de nuestro sitio.
• Cada botón está asociado con un evento en la página.
• El número máximo de botones permitidos es de siete (7).

Ahora para definir un botón hacemos uso de la siguiente función JavaScript, se lo debemos asignar a un objeto:

   1:  objeto = msSiteModeAddThumbBarButton(‘icono’,’tooltip’)

Como se observa para cada botón le especificamos el icono y el texto que se verá cuando el mouse este sobre el botón.

Y para mostrar los botones llamamos la siguiente función:

   1:  msSiteModeShowThumbBar();

Para capturar los eventos generados cuando se da click en alguno de  los botones, adicionamos un escuchador de evento a la página y le asociamos una función:

   1:  document.addEventListener('msthumbnailclick',<Nombre_Función>,false);

Después de conocer las funciones correspondientes para añadir y trabajar con los botones en el thumbnail, vamos a pasar a desarrollar un ejemplo:

1. Creamos una función que nos añada tres botones:

   1:  function AñadirBotones() {

   2:      try {

   3:          btnEnviar = window.external.msSiteModeAddThumbBarButton('images/enviar.ico', 'Enviar');

   4:          btnPausar = window.external.msSiteModeAddThumbBarButton('images/pausa.ico', 'Pausar');

   5:          btnIniciar = window.external.msSiteModeAddThumbBarButton('images/play.ico', 'Iniciar');

   6:          window.external.msSiteModeShowThumbBar();

   7:      }

   8:      catch (ex) {

   9:          alert('No es posible añadir los botones.');

  10:      }

  11:  }

2. Creamos el escuchador en la página:

   1:  document.addEventListener('msthumbnailclick',ThumbnailClick,false);

3. Definimos la función ThumbnailClick:

   1:  function ThumbnailClick(btn) {

   2:      if (btn.buttonID == '1')

   3:          alert('Ha dado click en enviar');

   4:      else if (btn.buttonID == '2')

   5:          alert('Ha dado click en pausar');

   6:      else if (btn.buttonID == '3')

   7:          alert('Ha dado click en iniciar');

   8:  }

La función anterior recibe como parámetro el botón al cual se le dio click, y para verificar cual ha sido usamos la propiedad butttonID, por el momento solo vamos a mostrar un alert indicando el botón al cual se le dio click, y ya dependerá de las necesidades específicas la implementación de algo más complejo.

Así que nuestra aplicación se verá así:

Descarga el ejemplo! (el archivo se llama Botones_Thumbnail)

PD: Use la palabra escuchador porque no s eme ocurrió alguna otra (jajaja).

About these ads