[ASP.NET] IE9 + W7: Manual de resumen

Hola, casi que para finalizar el ciclo de post sobre Internet Explorer 9 y su integración con Windows 7, les quiero compartir un pequeño manual de resumen en pdf de aproximadamente 8 páginas donde se listan las características que hemos visto en los post anteriores y se explica como utilizarlas. Si desean recordar lo que hemos visto les dejo el listado:

• Anclando el sitio
• Añadir tareas al JumpList
• Categorías personalizadas
• Iconos de notificación
• Solicitando al usuario
• Botones en Thumbnail

Espero les sea de gran utilidad!

Descarga del manual!

[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).

[ASP.NET] IE9 + W7: Solicitando al usuario

Hola, siguiendo con los post sobre como aprovechar las características de Windows 7 en una aplicación web si tenemos Internet Explorer 9, hoy vamos a ver como podemos solicitar la interacción del usuario, es algo bastante simple así que esta entrada será bien corta.

Ahora bien, la funcionalidad de solicitar al usuario no es más que hacer que el icono de nuestra aplicación parpadee de forma intermitente.

Existen tres características a tener en cuenta:

• El icono titila solo si la aplicación no tiene la ventana activa.
• Luego que el usuario interactúa con el sitio el icono deja de titilar.
• El icono titila un máximo de 20 veces.

Pero como hacemos para que esto nos funcione?.. simple, solo necesitamos usar la siguiente función JavaScript:

   1:  msSiteModeActivate();

Ahora a implementar esta función:

1. Creamos un botón para hacer el llamado de la función:

   1:  <button id="btnLlamar">Llamar al usuario</button>

2. Creamos la función que solicita al usuario:

   1:  function LLamarUsuario() {

   2:      try {

   3:          window.external.msSiteModeActivate();

   4:      }

   5:      catch (ex) {

   6:          alert('No es posible llamar al usuario.');

   7:      }

   8:  }

3. Por último utilizando jQuery vamos a capturar el evento click del botón y hacemos el llamado a la función anterior:

   1:  $("#btnLlamar").click(function () {

   2:     setTimeout(LLamarUsuario, 200);

   3:     return false;

   4:  });

Lo único raro de la función anterior es el uso de la función de JavaScript setTimeout, dicha función lo que permite es llamar la función que se le especifique después de un tiempo determinado, ese tiempo esta en milisegundos, por lo cual la función LlamarUsuario no se ejecutará inmediatamente; esto para que cuando se de click en el botón nos de el tiempo para cambiar de ventana y poder visualizar el efecto.

Les dejo el código del ejemplo: Descarga del ejemplo ! (El archivo se llama Llamar_Usuario)