Aggiunta di una barra dell'app con comandi (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Questo articolo descrive come aggiungere una barra dell'app alla tua app di Windows Runtime scritta in JavaScript. Se usi il markup e gli stili predefiniti mostrati in questo esempio, i comandi che inserirai nella barra dell'app avranno uno stile corretto. Per le icone dei comandi sono supportati gli sprite di immagini e i glifi dei tipi di carattere.
(Solo Windows) Osserva questa funzionalità in azione nella serie sulle funzionalità delle app: Interfaccia utente delle app di Windows Store, dall'inizio alla fine
Prerequisiti
- Creazione della prima app di Windows Runtime scritta in JavaScript
- Progettazione dei comandi per app di Windows Runtime
- Progettazione della navigazione per app di Windows Runtime
Istruzioni
1. Creare un nuovo progetto con il modello Blank App
Avvia Microsoft Visual Studio.
Nella scheda Pagina iniziale fai clic su Nuovo progetto. Viene aperta la finestra di dialogo Nuovo progetto.
Nel riquadro Installato espandi Modelli e JavaScript, quindi seleziona il tipo di modello Applicazioni Windows Store. Scegli la piattaforma di destinazione (Applicazioni universali, Applicazioni Windows, o Applicazioni Windows Phone), ma per questa Guida introduttiva useremo Applicazioni universali.
Nel riquadro centrale seleziona il modello di progetto Applicazione vuota (applicazioni universali) (non fare ancora clic su OK).
Nella casella di testo Nome immetti AppBar demo.
Fai clic su OK per creare il progetto.
2. Aggiungere la definizione della barra dell'app al progetto
La barra dell'app è definita in un file HTML con un file JavaScript corrispondente (uno per Windows e uno per Windows Phone).
Come mostrato di seguito e per ogni piattaforma (ovvero Windows e Windows Phone), apri default.html e sostituisci il codice HTML generato automaticamente con il codice HTML seguente. La procedura consigliata consiste nel creare una barra dell'app globale per ogni applicazione, che deve essere un elemento figlio diretto dell'elemento <body>. È anche una buona idea inserire i comandi globali prima di quelli contestuali nell'elemento DOM in modo da ottenere un layout migliore quando gli utenti ancorano la tua app.
In questo esempio vengono aggiunti una barra dell'app con un comando allineato a sinistra e tre comandi allineati a destra, divisi da un separatore.
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>
Attenzione Il blocco di codice seguente è valido solo per Windows Phone fino alla versione 2.1. Se usi WinJS 4.0 e versioni successive, l'approccio migliore è usare lo stesso codice HTML per la barra dell'app per app di Windows e app di Windows Phone.
Solo Windows Phone 2.1 - 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(it-it,WIN.10).gif")
Aggiungere il file Appbar.js
- In Esplora soluzioni fai clic con il pulsante destro del mouse sulla cartella js, vai su Aggiungi e seleziona Nuovo elemento.
- Nel riquadro Installato espandi JavaScript e fai clic su File JavaScript nel riquadro centrale della finestra di dialogo.
- Nella casella di testo Nome (nella parte inferiore della finestra di dialogo) immetti Appbar.js.
- Fai clic su Aggiungi per creare il file e aggiungerlo al progetto.
Apri Appbar.js (se necessario) e aggiungi il codice seguente.
(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;
}
};
})();
Il file Appbar.js viene inserito nei due file default.html tramite il rispettivo markup <script src="/js/appbar.js"></script>.
3. Note per lo sviluppatore
- In una barra dell'app puoi usare solo AppBarCommands. Per un elenco delle icone disponibili, vedi l'enumerazione AppBarIcon.
- La barra dell'app è una leggera sovrimpressione disattivabile e di conseguenza copre sempre una parte dello schermo.
- La barra dell'app, come ogni leggera sovrimpressione disattivabile, deve sempre essere un elemento figlio dell'elemento <body>.
- Per ridurre la natura della sovrimpressione di una barra dell'app che tende a coprire altro contenuto dello schermo, conserva spazio nella parte superiore o inferiore dello schermo per la barra dell'app chiusa. In questo modo, solo la barra dell'app aperta coprirà altro contenuto.
- L'altezza della barra dell'app chiusa può essere controllata con la proprietà closedDisplayMode corrispondente.
- La posizione in alto o in basso della barra dell'app è controllata dalla proprietà placement corrispondente.
Riepilogo
In questa guida introduttiva hai aggiunto una barra dell'app alla tua applicazione.