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

Posted on


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í:

Imagen2

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

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

    Fco Martin Garcia escribió:
    08/21/2011 en 04:16

    Muy interesante artículo Julito, se te ocurre algúna función que pueda incoporar a mi blog? Básicamente esta funcionalidad la veo en programas como Windows Media Player o Zune (Reproducir, pausa, siguiente, anterior) pero saliendo de esas tienes alguna idea?

    Un saludo.

      Julio Avellaneda respondido:
      08/22/2011 en 09:20

      Gracias Francisco.. bueno podrías tener botones para que lleven al usuario a tu página en facebook o en twitter, o puedes tener un acceso directo a tu página de consulta… si alguno te interesa dime sino seguimos mirando

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s