Ajout d’une barre d’application avec des commandes (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Cet article explique comment ajouter une barre d’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 d’application présenteront un style correct. Les sprites d’image et les glyphes de police sont 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
- Création de votre première application Windows Runtime en JavaScript
- Conception des commandes des applications Windows Runtime
- Conception de navigation pour les applications Windows Runtime
Instructions
1. Créer un projet à l’aide du modèle Application vide
Lancez Microsoft Visual Studio.
Sous l’onglet Page de démarrage, cliquez sur Nouveau projet. La boîte de dialogue Nouveau projet s’ouvre.
Dans le volet Installé, développez Modèles et JavaScript, puis cliquez sur le type de modèle Applications du Windows Store. Choisissez la plateforme à cibler (Applications universelles, Applications Windows ou Applications Windows Phone), mais pour ce guide de démarrage rapide, nous allons utiliser Applications universelles.
Dans le volet central, choisissez le modèle de projet Application vide (applications universelles) (ne cliquez pas encore sur OK).
Dans la zone de texte Nom, tapez Démonstration barre des applications.
Cliquez sur OK pour créer le projet.
2. Ajouter la définition de la barre d’application au projet
Votre barre d’application est définie dans un fichier HTML avec un fichier JavaScript correspondant (un pour Windows et un pour Windows Phone).
Comme indiqué ci-dessous et pour chaque plateforme (c’est-à-dire Windows et Windows Phone), ouvrez default.html et remplacez le code HTML généré automatiquement par le code HTML suivant. La meilleure pratique consiste à créer une barre d’application globale par application, cette barre devant être un enfant direct de l’élément <body>. Il est également recommandé de placer les commandes globales avant les commandes contextuelles dans le modèle DOM (Document Object Model) de façon à obtenir la meilleure disposition lorsque des utilisateurs ancrent votre application.
Cet exemple ajoute une barre d’application avec une commande alignée à gauche et trois commandes alignées à droite, avec un séparateur entre chacune d’elle.
Windows - default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App_bar_demo.Windows</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.Windows references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body>
<ol>
<li>
To show the AppBar, swipe up from the bottom of the screen, swipe down from
the top of the screen, right-click, or press Windows Logo + Z.
</li>
<li>
Click or tap one of the following AppBar buttons: <strong>Camera</strong>,
<strong>Add</strong>, <strong>Remove</strong>, or <strong>Delete</strong>
</li>
<li>
To dismiss the AppBar, click or tap in the application, swipe, right-click,
or press Windows Logo + Z again.
</li>
</ol>
<!-- BEGINTEMPLATE: Template code for an AppBar -->
<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:'primary', tooltip:'Add item'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
<hr data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{type:'separator',section:'primary'}" /> <!-- SEPARATOR NOT AVAILABLE ON PHONE prior to WinJS 4.0 -->
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
</div>
<!-- ENDTEMPLATE -->
<div id="statusMessage"></div>
</body>
</html>
Attention Le bloc d’exemple de code suivant est valide uniquement pour Windows Phone via la version 2.1. Lorsque vous utilisez WinJS 4.0 ou version ultérieure, l’approche correcte consiste à utiliser le même code HTML pour la barre d’application pour les applications Windows et Windows Phone.
Windows Phone 2.1 uniquement - default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App_bar_demo.WindowsPhone</title>
<!-- WinJS references -->
<!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css
based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
<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.Phone references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body class="phone">
<p>
Tap the Add, Remove, or Delete AppBar button, or swipe the ellipsis and tap the Camera AppBar button.
</p>
<!-- BEGINTEMPLATE: Template code for an AppBar -->
<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:'primary', tooltip:'Add item'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
<!-- <hr data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{type:'separator',section:'primary'}" /> SEPARATOR NOT AVAILABLE ON PHONE -->
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
</div>
<!-- ENDTEMPLATE -->
<div id="statusMessage"></div>
</body>
</html>
.gif "Hh465309.wedge(fr-fr,WIN.10).gif")
Ajouter le fichier Appbar.js
- Dans l’Explorateur de solutions, cliquez avec le bouton droit sur le dossier js, pointez sur Ajouter, puis cliquez sur Nouvel élément.
- Dans le volet Installé, développez JavaScript, puis cliquez sur Fichier JavaScript dans le volet central de la boîte de dialogue.
- Dans la zone de texte Nom (au bas de la boîte de dialogue), entrez Appbar.js.
- Cliquez sur Ajouter pour créer le fichier et l’ajouter au projet.
Ouvrez Appbar.js (si nécessaire) et ajoutez le code suivant.
(function () {
"use strict";
WinJS.UI.Pages.define("default.html", {
ready: function (element, options) {
// Use element.querySelector() instead of document.getElementById() to ensure that the correct default.html page is targeted:
element.querySelector("#cmdAdd").addEventListener("click", doClickAdd, false);
element.querySelector("#cmdRemove").addEventListener("click", doClickRemove, false);
element.querySelector("#cmdDelete").addEventListener("click", doClickDelete, false);
element.querySelector("#cmdCamera").addEventListener("click", doClickCamera, false);
}
});
// Command button functions
function doClickAdd() {
WinJS.log && WinJS.log("Add button pressed", "status");
}
function doClickRemove() {
WinJS.log && WinJS.log("Remove button pressed", "status");
}
function doClickDelete() {
WinJS.log && WinJS.log("Delete button pressed", "status");
}
function doClickCamera() {
WinJS.log && WinJS.log("Camera button pressed", "status");
}
WinJS.log = function (message, messageType) {
var statusDiv = document.getElementById("statusMessage"); // For a multi-page app, always ensure that each element ID is unique (across all pages).
if (statusDiv && messageType === "status") {
statusDiv.innerText = "STATUS: " + message;
}
};
})();
Le fichier Appbar.js est injecté dans les deux fichiers default.html via leur balisage <script src="/js/appbar.js"></script>.
3. Remarques à l’attention des développeurs
- Vous pouvez seulement utiliser l’objet AppBarCommands dans une barre d’application. Pour obtenir la liste des icônes à utiliser, voir l’énumération AppBarIcon.
- La barre d’application est une superposition à abandon interactif, ce qui signifie qu’elle recouvrira toujours une partie de l’écran.
- La barre d’application, comme toute superposition à abandon interactif, doit toujours être un enfant direct de l’élément <body>.
- Pour empêcher que la barre d’application recouvre trop souvent d’autres éléments, réservez de l’espace en haut ou en bas de l’écran pour la barre d’application fermée. De cette manière, seule la barre d’application ouverte recouvrira d’autres éléments.
- La hauteur de la barre d’application fermée peut être contrôlée à l’aide de sa propriété closedDisplayMode.
- La position haute ou basse de la barre d’application est contrôlée par sa propriété placement.
Récapitulatif
Dans ce guide de démarrage rapide, vous avez ajouté une barre d’application à votre application.