Langage: HTML | XAML

Démarrage rapide : ajout d’une barre de l’application avec des commandes (HTML)

Applies to Windows and Windows Phone

Ce guide de démarrage rapide explique comment ajouter une barre de l’application à votre application Windows Runtime en JavaScript. Si vous utilisez les styles et le balisage par défaut illustrés dans cet exemple, les commandes que vous placez dans la barre de l’application seront correctement stylisées. Les Sprites d’image et glyphes de police sont tous deux pris en charge pour les icônes des commandes.

(Windows uniquement) Voir cette fonctionnalité appliquée dans notre série Fonctionnalités d’application de A à Z:  Interface utilisateur des applications du Windows Store de A à Z

Prérequis

Instructions

Hh465309.wedge(fr-fr,WIN.10).gifCréer un projet à l’aide du modèle Application vide

  1. Lancez Microsoft Visual Studio.

  2. Sous l’onglet Page de démarrage, cliquez sur Nouveau projet. La boîte de dialogue Nouveau projet s’ouvre.

  3. Dans le volet Installé, développez Modèles et JavaScript, puis sélectionnez le type de modèle Applications du Windows Store. Les modèles de projets disponibles pour JavaScript s’affichent dans le volet central de la boîte de dialogue.

  4. Dans le volet central, sélectionnez le modèle de projet Application vide correspondant à la plateforme que vous voulez cibler (Windows, Windows Phone ou les deux).

  5. Dans la zone de texte Nom, entrez App bar demo.

  6. Cliquez sur OK pour créer le projet.

2. Ajouter la définition de la barre de l’application au projet

Votre barre de l’application est définie dans un fichier HTML comportant un fichier JavaScript correspondant.

Ouvrez default.html et remplacez le code HTML généré automatiquement par le code HTML suivant. La barre de l’application doit être un enfant direct de l’élément <body>. Il est recommandé de placer les commandes globales avant les commandes contextuelles dans le modèle DOM de façon à obtenir la meilleure disposition lorsque des utilisateurs ancrent votre application.

Cet exemple ajoute une barre de l’application avec une commande alignée à gauche et trois commandes alignées à droite, avec un séparateur entre chacune d’elle.

default.html Windows


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App bar demo</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- App_bar_demo references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/appbar.js"></script>
</head>
<body>
    <!-- BEGINTEMPLATE: Template code for an app bar -->
    <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdAdd',label:'Add',icon:'add',
                section:'global',tooltip:'Add item'}">
        </button>
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',
                section:'global',tooltip:'Remove item'}">
        </button>
        <hr 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{type:'separator',section:'global'}" />
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',
                section:'global',tooltip:'Delete item'}">
        </button>
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',
                section:'selection',tooltip:'Take a picture'}">
        </button>
    </div>
    <!-- ENDTEMPLATE -->
    <div id="statusMessage"></div>
</body>
</html>



default.html Windows Phone


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>App bar demo</title>

    <!-- WinJS references -->
    <link href="/css/ui-themed.css" rel="stylesheet" />
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <!-- App_bar_demo references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/js/appbar.js"></script>
</head>
<body>
    <!-- BEGINTEMPLATE: Template code for an app bar -->
    <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdAdd',label:'Add',icon:'add',
                section:'global',tooltip:'Add item'}">
        </button>
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdRemove',label:'Remove',icon:'remove',
                section:'global',tooltip:'Remove item'}">
        </button>
        <hr 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{type:'separator',section:'global'}" />
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',
                section:'global',tooltip:'Delete item'}">
        </button>
        <button 
            data-win-control="WinJS.UI.AppBarCommand" 
            data-win-options="{id:'cmdCamera',label:'Camera',icon:'camera',
                section:'selection',tooltip:'Take a picture'}">
        </button>
    </div>
    <!-- ENDTEMPLATE -->
    <div id="statusMessage"></div>
</body>
</html>



Hh465309.wedge(fr-fr,WIN.10).gifAjouter le fichier Appbar.js

  1. Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier js, pointez sur Ajouter, puis cliquez sur Nouvel élément.
  2. Dans le volet Installé, développez JavaScript, puis cliquez sur Fichier JavaScript dans le volet central de la boîte de dialogue.
  3. Dans la zone de texte Nom, entrez Appbar.js.
  4. Cliquez sur Ajouter pour créer le fichier et l’ajouter au projet.

Ouvrez Appbar.js et ajoutez le code suivant.


(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("default.html", {
        ready: function (element, options) {
            document.getElementById("cmdAdd")
                .addEventListener("click", doClickAdd, false);
            document.getElementById("cmdRemove")
                .addEventListener("click", doClickRemove, false);
            document.getElementById("cmdDelete")
                .addEventListener("click", doClickDelete, false);
            document.getElementById("cmdCamera")
                .addEventListener("click", doClickCamera, false);
            WinJS.log && WinJS.log("To show the bar, swipe up from " +
                "the bottom of the screen, right-click, or " +
                "press Windows Logo + z. To dismiss the bar, " +
                "tap in the application, swipe, right-click, " +
                "or press Windows Logo + z again.", "sample", "status");
        },
    });

    // Command button functions
    function doClickAdd() {
        WinJS.log && WinJS.log("Add button pressed");
    }

    function doClickRemove() {
        WinJS.log && WinJS.log("Remove button pressed");
    }

    function doClickDelete() {
        WinJS.log && WinJS.log("Delete button pressed");
    }

    function doClickCamera() {
        WinJS.log && WinJS.log("Camera button pressed");
    }

    WinJS.log = function (message) {
        var statusDiv = document.getElementById("statusMessage");
        if (statusDiv) {
            statusDiv.innerText = message;
        }
    };
})();


Remarque  Seul l’objet AppBarCommands peut être utilisé dans la barre de l’applications. Pour une liste des icônes à utiliser, voir l’énumération AppBarIcon.

Récapitulatif

Dans ce guide de démarrage rapide, vous avez ajouté une barre de l’applications à votre application.

Rubriques associées

WinJS.UI.AppBar
WinJS.UI.AppBarCommand
AppBarIcon

 

 

Afficher:
© 2014 Microsoft