Guida introduttiva: Aggiunta della Guida dell'app (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 ]
Questa guida introduttiva illustra come aggiungere un riquadro a comparsa Guida al riquadro Impostazioni usando HTML e l'oggetto SettingsFlyout per la Libreria Windows per JavaScript (WinJS). Per visualizzare un riquadro a comparsa Guida in un'app completa, vedi Esempio di impostazioni dell'app.
Nell'esempio seguente definirai un riquadro a comparsa Impostazioni, denominato Guida, in un file HTML (HelpUI.html
). Potrai quindi inizializzare il riquadro a comparsa Impostazioni e popolare il riquadro Impostazioni usando JavaScript.
Usi C#/Visual Basic/C++ e XAML? Vedi Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML).
Prerequisiti
Leggi le Linee guida per la Guida dell'app e le Linee guida per le impostazioni dell'app.
Istruzioni
1. Definisci il riquadro a comparsa Help.
Crea un file HTML denominato "HelpUI.html".
<!DOCTYPE html>
<html>
<head>
<title>Help Settings flyout</title>
</head>
<body>
<!-- BEGINTEMPLATE: Template code for an empty Help flyout. -->
<!-- Each Settings flyout should be defined in its own HTML file. -->
<!-- Set data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" to create
a wide flyout. -->
<!-- Set the background color for the header to the background color defined
for your app tile in the manifest. -->
<div data-win-control="WinJS.UI.SettingsFlyout"
data-win-options="{settingsCommandId:'helpDiv', width:'wide'}">
<div class="win-ui-dark win-header" title="Help">
<button type="button"
onclick="WinJS.UI.SettingsFlyout.show()"
class="win-backbutton"></button>
<div class="win-label">Help</div>
</div>
<div class="win-content">
<!-- Help content here -->
</div>
</div>
<!-- ENDTEMPLATE -->
</body>
</html>
Nota Per impostazione predefinita, il riquadro a comparsa sarà "stretto", con una larghezza di 346 px. Imposta l'attributo data-win-options="{settingsCommandId:'helpDiv', width:'wide'}" per creare un riquadro a comparsa largo (646 px).
2. Elabora il riquadro a comparsa di impostazioni e popola il riquadro delle impostazioni.
Il codice seguente elabora il riquadro a comparsa Impostazioni e popola il SettingsPane con JavaScript. Chiama questa funzione durante l'attivazione dell'app.
function initializeSettings() {
// Initialize Settings flyout(s) and WinJS controls.
WinJS.UI.processAll();
// Populate Settings pane and tie commands to Settings flyouts.
WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = {
"helpDiv": { href: "HelpUI.html", title: "Help"}
};
WinJS.UI.SettingsFlyout.populateSettings(e);
}
WinJS.Application.start();
}
Nota Chiama la funzione dopo l'inizializzazione di DOM. L'inizializzazione di DOM non è necessaria se chiami initializeSettings
dalla funzione onactivated; l'evento activated si verifica dopo l'evento DOMContentLoaded. Per altre info, vedi Ottimizzazione del ciclo di vita dell'app (app di Windows Store scritte in JavaScript e HTML).
Riepilogo e passaggi successivi
In questa guida introduttiva abbiamo imparato ad aggiungere la Guida dell'app al riquadro delle impostazioni usando HTML e la Libreria Windows per JavaScript.
Ora puoi imparare a includere la Guida in linea nella pagina di Guida usando gli iframe.
Come includere contenuto online nella Guida
Argomenti correlati
Esempio di impostazioni dell'applicazione
Guida introduttiva: Aggiunta di impostazioni all'app
Windows.UI.ApplicationSettings.SettingsPane
Linee guida per la Guida dell'app
Linee guida per le impostazioni dell'app
Quickstart: Add app help (Windows Store apps using C++, C#, or VB and XAML)
Ottimizzazione del ciclo di vita dell'app (app di Windows Store scritte in JavaScript e HTML)