Accueil > Divers > [IE9] Gestion de la Jump List d’un site

[IE9] Gestion de la Jump List d’un site

Internet Explorer 9 propose une fonctionnalité intéressante qui permet d’attacher à la barre des tâches de windows 7 un site comme n’importe quelle autre application.
Une fois le site ajouté à la barre des tâches, il a droit à une jump list comme tous les autres programmes sous windows 7.
Elle est bien sûr personnalisable. Tout se fait via des balises meta et du code javascript.
Quand le site est lancé à partir de la barre des tâches, on peut personnaliser l’apparence du navigateur et diverses autres options grâce aux balises meta suivantes:

<meta name="application-name" content="Test de site avec une JumpList"/>
<meta name="msapplication-tooltip" content="Démarrer l'application"/>
<meta name="msapplication-starturl" content="http://localhost:4828/JumpListIe9/StartPage.htm"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="black"/>

On a ici personnalisé la page de démarrage, le nom de l’application, le contenu de la tooltip de la barre des tâches, la taille de la fenêtre du navigateur à ouvrir et la couleur des boutons de navigation.

Une jump list de base se compose de Tâches. L’ajout de tâche se fait par balise méta comme ceci:

<!--Définition des tâches-->
<META name="msapplication-task" content="name=Tâche 1;action-uri=http://localhost:4828/JumpListIe9/Tache1.htm;icon-uri=http://localhost:4828/JumpListIe9/images/favicon.ico"/>
<META name="msapplication-task" content="name=Tâche 2;action-uri=http://localhost:4828/JumpListIe9/Tache2.htm;icon-uri=http://localhost:4828/JumpListIe9/images/favicon.ico"/>

Nous avons ici défini 2 tâches avec leur icône respectif et l’url à ouvrir. Les jump list offrent bien plus de fonctionnalités qu’une simple liste de liens. En effet, par code javascript il est possible de créer des catégories et des éléments pour ces catégories. Cela permet d’imaginer des scenarii intéressants dans le cadre du ecommerce comme par exemple la mise en avant de pages d’offres promotionnelles, des accès directs à des catégories de produit… Pour définir ces catégories, le code est le suivant:

<script type="text/javascript">
    try {
        if(window.external.msIsSiteMode())
        {
            //Définition de catégories
            window.external.msSiteModeCreateJumplist('Catégorie 1');
            window.external.msSiteModeAddJumpListItem('Tâche 1', 'http://localhost:4828/JumpListIe9/Tache1.htm', 'http://localhost:4828/JumpListIe9/images/favicon.ico');
            window.external.msSiteModeAddJumpListItem('Tâche 2', 'http://localhost:4828/JumpListIe9/Tache2.htm', 'http://localhost:4828/JumpListIe9/images/favicon.ico');
        }
    }
    catch(e) { }
</script>

On définit ici 1 catégorie contenant 2 items avec encore une fois leur url et leur icône respectifs.
Notez l’appel à la fonction window.external.msIsSiteMode() qui permet de savoir si le navigateur est capable d’exécuter ce code.

D’autres interactions sont également possibles comme la mise en surbrillance du bouton de la barre des tâches pour attirer l’attention de l’utilisateur sur une action à effectuer quand l’application est minimisée grâce à l’appel à la fonction window.external.msSiteModeActivate().
Attention sur ce point, j’ai vu pas mal d’exemples de gens sur le net qui testent cette fonction et disent qu’elle ne marche pas. En fait ils l’appellent souvent au clic sur un bouton pour le test. Il est normal dans ce cas que le bouton ne brille pas puisque la fonction est fait pour le faire briller quand l’application est minimisée. Dans le cas ou on l’appelle au clic sur un bouton, la fenêtre est forcément affichée… donc le scintillement du bouton s’arrête avant même d’avoir commencé^^

Petit problème pour tester ces fonctionnalités avec ie9 bêta, il est impossible d’attacher à la barre des tâches un site qui se trouve en local dans le système de fichier… Le site doit obligatoirement être accédé en http pour pouvoir l’attacher à la barre des tâches. Impossible donc de se créer un fichier html en local sur le disque pour développer la jumplist d’un site. C’est dommage je trouve!

Voilà quelques screens du rendu du code ci dessus:

ie9 black nav

Boutons de navigation Noirs sous ie9

Jumplist ie9

Jump list générée

Vous trouverez les autres fonctions disponibles ici. Toutes celles qui contiennent SiteMode dans leur nom concernent des fonctionnalités relatives aux sites attachés à la barre des tâches le meilleur moyen de se rendre compte est de les tester!

Enjoy…

Étiquettes : ,
  1. Jean-Paul
    14/02/2011 à 10:18

    Bonjour, je n’ai plus la liste des derniers sites visités avec le raccourci iE9 dans la barre des tâches. seven pro et ie9 merci JP

  2. 14/02/2011 à 11:13

    Bonjour,
    Désolé je ne connais pas ce problème. Vous devriez poser la question sur le forum MSDN.

  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :