Applications Windows
Réduire la table des matières
Développer la table des matières

Comment utiliser la barre d’application pour épingler une vignette secondaire (applications de style Metro en JavaScript et HTML)

[Cette documentation est une version préliminaire qui peut faire l’objet de modifications.]

Cette rubrique illustre comment utiliser la barre d’application pour épingler et détacher une vignette secondaire.

Ce que vous devez savoir

Technologies

  • Windows Runtime

Prérequis

  • Bonnes connaissances des termes et des concepts de vignette et de notification. Pour plus d’information, voir Vignettes, badges et notifications.
  • Aptitude à créer une application élémentaire de style Metro en JavaScript à l’aide des API Windows Runtime.

Instructions

Étape 1: Ajouter une barre d’application à votre document

Cette étape permet d’ajouter l’icône Épingler sur l’écran d’accueil à la barre d’application.



<div id="MyAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button 
        data-win-control="WinJS.UI.AppBarCommand" 
        data-win-options="{id:'myAppBarButton',label:'Pin to Start',icon:'pin',section:'global',tooltip:'Pin to Start'}">
    </button>

Étape 2: Initialiser la barre d’application et ajouter un gestionnaire d’événements

Cette étape doit être effectuée dans le cadre de votre initialisation lors du lancement de votre application. Le détecteur d’événements est affecté au bouton défini à l’étape 1.



WinJS.UI.processAll(); 
// Do any further initialization here.  

id("myAppBarButton").addEventListener("click", myAppBarButtonHandler, false);  

Étape 3: Afficher le glyphe correct sur la barre d’application

Lorsque l’utilisateur navigue vers votre vignette secondaire, vérifiez si elle a déjà été épinglée afin de déterminer s’il convient d’afficher l’épinglage ou non sur la barre d’application. Si la vignette a déjà été épinglée, la barre d’application devrait afficher l’option Détacher. Si la vignette n’a pas encore été créée, la barre d’application devrait afficher l’option Épingler.



if (Windows.UI.StartScreen.SecondaryTile.exists("yourTile")) {
    document.getElementById("myAppBarButton").winControl.label = "Unpin from Start";
    document.getElementById("myAppBarButton").winControl.icon = WinJS.UI.AppBarIcon.unpin;
    document.getElementById("myAppBarButton").winControl.tooltip = "Unpin from Start";
} else {
    document.getElementById("myAppBarButton").winControl.label = "Pin to Start";
    document.getElementById("myAppBarButton").winControl.icon = WinJS.UI.AppBarIcon.pin;
    document.getElementById("myAppBarButton").winControl.tooltip = "Pin to Start";
}

Étape 4: Implémenter le gestionnaire d’événements pour votre bouton

Lorsque l’utilisateur sélectionne votre bouton sur la barre d’application, un menu volant affiche une demande de confirmation. Pour garantir que la barre d’application ne disparaît pas lorsque le menu volant apparaît, définissez la propriété WinJS.UI.sticky de la barre d’application. De même, assurez-vous que le parent de votre menu volant est correctement attribué.



function myAppBarButtonHandler() {
    document.getElementById("myAppBar").winControl.sticky = true;

    // Check whether you've received a pin or unpin command.
        if (WinJS.UI.AppBarIcon.pin === document.getElementById("myAppBarButton").winControl.icon) {
            // unpinByElementAsync is an asynchronous, app-defined, helper function used 
            // in the Secondary Tiles sample.
            unpinByElementAsync(document.getElementById("myAppBarButton"), "SecondaryTile.appBarPinnedTile").then(function (isDeleted) {
                if (isDeleted) {
                    // The unpin operation was successful. The app bar should show the pin glyph.
                    document.getElementById("myAppBarButton").winControl.icon = WinJS.UI.AppBarIcon.pin;
                    // Do any other necessary cleanup.
                } else {
                    // The unpin operation was either canceled or failed.
                }
            });
         
        } else {
            // pinByElementAsync is an asynchronous, app-defined, helper function used
            // in the Secondary Tiles sample.
            pinByElementAsync(document.getElementById("myAppBarButton")).then(function (isCreated) {
                if (isCreated) {
                    // The pin operation was successful. The app bar should show the unpin glyph.
                    document.getElementById("myAppBarButton").winControl.icon = WinJS.UI.AppBarIcon.unpin;
                    // Send notifications and do other necessary work.
                } else {
                    // The pin operation was either canceled or failed.
                }
            });
        }
    }
}

Rubriques associées

Démarrage rapide : ajout d’une barre d’application
Recommandations et liste de vérification sur les vignettes secondaires
Comment positionner le menu volant de la vignette secondaire
Vue d’ensemble des vignettes secondaires

 

 

Afficher:
© 2017 Microsoft