Archivio

Archive for the ‘WinJS’ Category

La barra dei Settings in Windows 8 con Javascript

novembre 19, 2012 5 commenti

Ciao! Ecco come implementare la settings bar in 2 semplici passaggi utilizzando WinJS!

    1. Per prima cosa, aprire il file js/default.js e inserire subito dopo “use strict”;
    WinJS.Application.onsettings = function (e) {
        e.detail.applicationcommands = {
            "Info": { title: "Informazioni", href: "informazioni.html" }
        };
        WinJS.UI.SettingsFlyout.populateSettings(e);
    };
    1. Dopodichè, create la pagina desiderata (ad esempio, informazioni.html) e strutturatela in questo modo:
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Info</title>
    </head>
    <body>
        <div data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help settings flyout" data-win-options="{settingsCommandId:'Info',width:'wide'}">
            <div class="win-ui-light win-header" style="background-color:#00b2f0"> <!-- colori da personalizzare -->
               <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
               <div class="win-label">Informazioni</div>
            </div>
            <div class="win-content ">IL CONTENUTO VA QUI!</div>
        </div>
    </body>
</html>

NB: Il parametro “Info” nella riga 3 del listato 1 è molto importante in quanto rappresenta l’identificativo del setting! Ricopiatelo pari pari nel parametro settingsCommandId nella riga 8 del listato 2!!!
E’ tutto! Semplice vero? 🙂

Happy coding!!!

Annunci
Categorie:Windows 8, WinJS