Como crear un Jumplist en Internet Explorer 9

Windows 7, Visual Studio 2010, Windows Server 2008, Office 2010, Silverlight 4, Windows Live Wave 4, Bing, MVA, Zune HD, Windows Phone 7

+ Comentario

Como crear un Jumplist en Internet Explorer 9

por Jhuess el 30 octubre, 2010 7:31 pm en Internet Explorer

¿Que es un Jumplist?
Un jumplist es un menú emergente que se obtiene dando clic derecho sobre un sitio que ha sido arrastrado a la taskbar de Windows 7, y se ve así:

En este caso podemos ver el jumplist del sitio de Twitter, que además de las opciones estándar de InPrivate Browsing y Desanclar nos muestra una lista de acciones específicas para los usuarios de esta red social.

¿Cómo se hacen?
Es realmente muy sencillo y pueden incluirse en cualquier sitio ya existente solo con un poco de HTML. Lo primero que debemos hacer es ubicar el espacio para los encabezados meta de la página de inicio de nuestro sitio (default.* o index.*), que se encuentre dentro de las etiquetas <head> y </head> antes de <body> y colocar la siguiente estructura:

<meta name="msapplication-task"  content="name=Título de la acción ;
  action-uri=URI a la que dirigirá esta acción;
  icon-uri=URI del archivo favicon para esta acción" />

Esta línea corresponderá a una acción en la jumplist del sitio: el nombre “msapplication-task” es obligatorio al igual que los otros tres atributos:

content: Será el título de la acción para el jumplist que aparecerá una vez instalada el sitio en la taskbar. Lo recomendable es que sea menor de 25 caracteres y lo más descriptivo posible.
action-uri: La dirección web que se abrirá en el navegador cuando reciba clic. Puede incluir variables GET y soporta http, https y ftp.
icon-uri:El icono que se mostrará a la derecha de la acción en la jumplist. El valor puede ir vacío pero no se puede omitir el atributo. El icono deberá tener ser al menos de 16 x 16 pixeles.

Como ejemplo podemos tomar la jumplist de este site, la primera accion “Internet Explorer 9″ fue codificada de la siguiente forma:

<meta name="msapplication-task"   content="name=Internet Explorer 9;
  action-uri=http://www.solomicrosoft.com/ie9;
  icon-uri=/images/ie9.ico" />

Podemos utilizar la cantidad de jump necesarios, pero debemos orientar estos accesso a los recursos que tienen mas sentidos para nuestros usuarios.

¿Qué pasa cuándo necesitamos generar opciones para el jumplist de manera dinámica?
Hay varios escenarios en los que podríamos necesitar crear jumps dinamicos sobre todo en sitios que incluyen una opción de login con usuario y contraseña, como por ejemplo el sitio de Amazon.com:

Otra cosa que se puede notar es que además del grupo de “Tasks” hay un segundo grupo de acciones llamado “Amazon Favorites”. Estas opciones del jumplist las podemos de la siguiente manera utilizando un poco de JavaScript:

Crear la categoría: lo primero que debemos hacer es crear la categoría donde se incluirán las nuevas opciones en el jumplist utilizando el método msSiteModeCreateJumplist y es necesario crear una lista antes de utilizar cualquier otro método posterior. Para crear una lista llamada “Amazon Favorites” agregaremos el siguiente código de Javascript:
```
window.external.msSiteModeCreateJumplist('Amazon Favorites');
```
Agregar elementos: una vez creada la categoría, agregamos acciones con el método msSiteModeAddJumpListItem:
```
window.external.msSiteModeAddJumpListItem('Elemento1', 'URI del elemento1',
 'URI del icono para elemento1');
```
De igual manera que usando la etiqueta <meta> aquí todos los atributos son obligatorios. En el caso del icono, el URI debe apuntar a un archivo .ico de 16 x 16 pixeles como mínimo. En el caso de Amazon.com, el primer elemento ‘Amazon Wish List’ de la categoría ‘Amazon Favorites’ se crea con la siguiente línea:
```
window.external.msSiteModeAddJumpListItem  ('Amazon Wish List' ,
 'http://www.amazon.com/wishlist?tag=amzn-ie9-jl-wl-20',
 'http://www.amazon.com/favicon.ico');
```
Cada categoría soporta hasta 20 elementos como máximo; si se agregan más los primeros serán eliminados automáticamente.
Mostrar la lista: esta lista se encuentra en memoria lista para mostrarse cuando sea más conveniente, con la siguiente línea:
```
window.external.msSiteModeShowJumplist();
```
Windows actualizará automáticamente el jumplist en memoria con las nuevas opciones.
Borrar la lista: cuando los nuevos elementos hayan servido su propósito, es posible borrar una categoría completa con la siguiente línea de código:
```
window.external.msSiteModeClearJumplist();
```
Si un usuario elimina manualmente un elemento de un jumplist creado de esta manera (con clic derecho como se ve abajo):

Es posible detectar esta acción utilizando cualquier de los siguientes métodos:

document.addEventListener('mssitemodejumplistitemremoved', removed, false);
document.attachEvent('onmssitemodejumplistitemremoved', removed);

Que hará una invocación a la siguiente función con el URI de la opción eliminada como parámetro:

function removed(URI) { … }

Cualquier página en el mismo dominio en el que fueron creadas las nuevas categorías y opciones en el jumplist puede realizar modificaciones al mismo en cualquier momento.