Exporter (0) Imprimer
Développer tout

Ajout dynamique de tâches à une liste de raccourcis

Dans la tâche Création d’une catégorie de liste de raccourcis personnalisée, nous avons vu comment créer et afficher une catégorie de liste de raccourcis personnalisée. À présent, nous allons ajouter dynamiquement des éléments à cette liste de raccourcis.

Remarque  La catégorie de liste de raccourcis personnalisée sert avant tout aux tâches évolutives. Les tâches prédéfinies qui ne changent pas fréquemment peuvent être créées quand le raccourci de site épinglé est installé. Pour plus d’informations, voir Ajout de tâches à une liste de raccourcis.

Méthodes utilisées dans cette tâche

Les méthodes suivantes sont présentées dans cette rubrique :

msSiteModeAddJumpListItem(bstrName, bstrActionUri, bstrIconUri [, bstrWindowType])

La méthode window.external.msSiteModeAddJumpListItem ajoute dynamiquement des éléments à la catégorie de liste de raccourcis personnalisée.

msSiteModeShowJumpList()

La méthode window.external.msSiteModeShowJumpList actualise les éléments visibles dans la liste de raccourcis personnalisée.

Ajout d’éléments à une liste de raccourcis

Pour un développeur, la création de catégories de listes de raccourcis personnalisées peut permettre un accès rapide à des adresses utilisées couramment sur vos sites. Grâce à ces catégories personnalisées, un utilisateur peut facilement revenir à des pages consultées (historique), accéder à des informations utilisateur (comme des stations de radio) ou suivre des interactions de site (par exemple, une liste de courses). Lorsqu’un utilisateur sélectionne un élément personnalisé dans la liste de raccourcis, la fenêtre du site épinglé le dirige directement sur l’élément en question. Par défaut, les éléments personnalisés s’ouvrent dans un nouvel onglet. Cependant, vous pouvez utiliser le paramètre bstrWindowType pour ouvrir le lien dans l’onglet actif en spécifiant self, ou l’ouvrir dans la fenêtre du site épinglé en spécifiant window.

Avant de pouvoir ajouter des éléments à la liste de raccourcis, vous devez créer une catégorie de liste de raccourcis personnalisée. Pour plus d’informations, consultez la rubrique Création d’une catégorie de liste de raccourcis personnalisée. Une fois la liste de la catégorie créée, ajoutez-y des éléments en appelant la méthode msSiteModeAddJumpListItem. Les éléments sont ajoutés en haut de la liste, dans l’ordre inverse de leur apparition dans le script.

Dans l’exemple suivant, deux tâches sont enregistrées dans une liste de catégorie "My Site" personnalisée, immédiatement après le chargement de la page, en réponse à l’événement onload. Vous remarquerez que Task2 est définie avant Task1 pour qu’elles apparaissent dans la liste de raccourcis dans le bon ordre.


var g_ext = null;
window.onload = function()
{
    try {
        if (window.external.msIsSiteMode()) {
            g_ext = window.external;
            g_ext.msSiteModeCreateJumpList("My Site");
            g_ext.msSiteModeAddJumpListItem(
                "Task2", "/users/44324847/task2", "img/icon.ico");
            g_ext.msSiteModeAddJumpListItem(
                "Task1", "/users/44324847/task1", "img/icon.ico");
        }
    }
    catch (ex) {
        // Fail silently.
    }
}


Les éléments de la liste de raccourcis restent visibles après la fermeture d’un site épinglé. À l’instar des Tâches de site que vous définissez avec des métadonnées, les éléments dynamiques peuvent aussi servir de raccourcis dans votre site Web. Cependant, si les éléments dynamiques dépendent de l’état de l’application, ils ne sont alors plus valides une fois le site fermé. Les liens présents dans une liste de raccourcis doivent contenir suffisamment d’informations pour permettre la navigation sans état de l’application le cas échéant.

Remarque  Une catégorie de liste de raccourcis personnalisée doit fournir un ensemble dynamique de destinations spécifiques à l’utilisateur actif, mais indépendantes de l’état de l’application ou de la page Web active. Assurez-vous que les éléments de votre liste de raccourcis collent à la raison d’être de votre site Web, satisfont aux besoins des clients et incluent des détails suffisants pour être utiles.

Bien qu’une catégorie de liste de raccourcis personnalisée puisse contenir jusqu’à 20 éléments, seuls les 10 derniers sont visibles par défaut. La barre des tâches contrôle le nombre d’éléments visibles de la liste de raccourcis.

Pour modifier les paramètres par défaut de la barre des tâches :

  1. Cliquez avec le bouton droit sur le menu Démarrer, puis cliquez sur Propriétés.
  2. Dans l’onglet Menu Démarrer, cliquez sur le bouton Personnaliser pour ouvrir la boîte de dialogue Personnaliser le menu Démarrer.
  3. Indiquez dans l’option Nombre d’éléments récents à afficher dans les Listes de raccourcis un nombre qui s’adapte à vos besoins.
  4. Cliquez sur OK pour fermer la boîte de dialogue.

Mise à jour d’éléments de la liste de raccourcis à la demande

Dans la section précédente, vous avez mis à jour la catégorie de liste de raccourcis personnalisée au cours de l’événement onload. L’API de site épinglé sert à accepter les modifications apportées à ce stade à la liste de raccourcis. Toutefois, les modifications ultérieures apportées à la liste n’apparaissent pas automatiquement. Par exemple, si vous ajoutez des éléments à la liste de raccourcis une fois la page chargée en raison d’une activité de l’utilisateur ou de la configuration du site, vous devez appeler la méthode msSiteModeShowJumpList pour écrire ces modifications dans la liste de raccourcis.

Le script suivant est exécuté en réponse à un clic sur un bouton. Le code a été simplifié en recourant à un jeu de variables globales dans l’exemple de code tiré de la section précédente.


function buttonClick()
{
    if (g_ext) {
        // Optionally, remove and re-create category.
        g_ext.msSiteModeClearJumpList();
        g_ext.msSiteModeCreateJumpList("My Site");

        // Add items to the Jump List here.
        g_ext.msSiteModeAddJumpListItem(
            "Task4", "/users/44324847/task4", "img/icon.ico");
        g_ext.msSiteModeAddJumpListItem(
            "Task3", "/users/44324847/task3", "img/icon.ico");

        // Show updates to the Jump List.
        g_ext.msSiteModeShowJumplist();
    }
}


Effacement de la liste de raccourcis, revisité

Si le nom et l’URL d’un élément en cours d’ajout par le script correspondent à ceux d’un élément supprimé par l’utilisateur, l’élément en question n’est pas ajouté à la liste. Cependant, effacer la liste supprime également toutes les informations indiquant les éléments ayant été supprimés par l’utilisateur et permet au site de recréer des éléments supprimés.

Remarque  En plus de mettre à jour la liste de raccourcis, la méthode msSiteModeShowJumpList déclenche l’événement onmssitemodejumplistitemremoved pour chaque élément supprimé par l’utilisateur depuis le dernier appel à la méthode msSiteModeShowJumpList. Cet événement ne se déclenche pas si vous appelez msSiteModeClearJumpList.

L’effacement de la liste est facultatif. Vous devez en fait l’éviter si vous voulez respecter les choix de vos utilisateurs.

Synthèse de tous les éléments

L’exemple d’application TweetFeed crée une catégorie de liste de raccourcis personnalisée pour conserver les résultats des recherches précédentes. Quand l’utilisateur clique sur les liens, le site présente à nouveau la recherche. Pour ce faire, les liens doivent contenir suffisamment d’informations pour répéter la recherche, même si le site ne s’exécute pas. L’exemple de code suivant illustre la procédure requise.


tweetQuery = document.getElementById("txtSearch").value;
if (tweetQuery.length > maxTweetSize) {
    tweetQuery = tweetQuery.substr(0, maxTweetSize);
}

try {
    if (window.external.msIsSiteMode()) {
        var itemURL = "http://" + window.location.host 
                       + window.location.pathname 
                       + "?tweet=" + escape(tweetQuery);
        window.external.msSiteModeAddJumpListItem(
                       tweetQuery, itemURL, 
                       "http://twitter.com/favicon.ico");
        window.external.msSiteModeShowJumplist();
    }
}
catch (e) {
    // Fail silently.
}


Dans l’exemple de code, les étapes suivantes sont respectées.

  1. En premier lieu, le code lit la requête depuis un champ de formulaire.
  2. Ensuite, il construit une URL permettant de répéter la requête de recherche.
  3. Enfin, l’URL est ajoutée à la liste de raccourcis en appelant la méthode msSiteModeAddJumpListItem, puis actualise la liste en appelant la méthode msSiteModeShowJumpList.

Étapes suivantes

Vous avez terminé ce scénario. Pour découvrir comment l’exemple d’application TweetFeed utilise les superpositions d’icônes pour représenter visuellement l’activité du site sur le bouton de la barre des tâches, poursuivez avec le scénario Exemple TweetFeed : notifications.

Autres exemples

Cette section montre comment certains sites Web populaires aux États-Unis ont utilisé une catégorie de liste de raccourcis pour optimiser l’expérience de leurs utilisateurs dans Windows Internet Explorer 9.

Amazon.com

La liste de raccourcis d’Amazon.com contient des tâches et des favoris.

Amazon.com a clairement séparé les tâches (verbes) des destinations (noms). Comme la catégorie de liste de raccourcis personnalisée est créée au moment du chargement de la page, la méthode msSiteModeShowJumpList n’est pas nécessaire. Observez la manière dont les éléments sont ajoutés dans l’ordre inverse de leur apparition dans la liste de raccourcis.


<script type='text/javascript'>
try {
window.external.msSiteModeCreateJumplist('Amazon Favorites');
window.external.msSiteModeAddJumpListItem 
    ('Amazon Wish List' , 
     'http://www.amazon.com/wishlist?tag=amzn-ie9-jl-wl-20',
     'http://www.amazon.com/favicon.ico');
window.external.msSiteModeAddJumpListItem 
    ('Amazon Prime' ,
     'http://www.amazon.com/gp/prime?tag=amzn-ie9-jl-prm-20',
     'http://www.amazon.com/favicon.ico');
// ...

} catch (ex) {
}
</script>


HuffingtonPost.com

Capture d’écran de la catégorie de liste de raccourcis de HuffingtonPost.com

HuffingtonPost.com utilise une liste de raccourcis personnalisée et une liste dynamique pour afficher les Bing Actualités de la journée.

Rubriques connexes

Tâches
Ajout de tâches à une liste de raccourcis
Création d’une catégorie de liste de raccourcis personnalisée
Étude conceptuelle
Notifications de badge, directement sur votre site épinglé Windows 8
Fresh Tweets 2.0 - démonstration pour Windows 8
Effets visuels de haute qualité pour les sites épinglés dans Windows 8
Comment créer des listes de raccourcis dynamiques
Introduction aux sites épinglés
Sites épinglés
Sites épinglés dans Windows 8

 

 

Afficher:
© 2014 Microsoft