Partager via

Windows 8 Game Kit updated with Settings Panel

  • Article

Via DaveDev.net…


Windows Store Setting Panel

One of the more common tasks you will be required to do in your Windows Store App is add a privacy policy.  This is especially true if you have enabled certain capabilities like the WebCam.  I have updated the Win8GameKit with a quick and easy example of how to add a settings panel to your own games. 

 

What code was updated?

Inside default.js we are going to add a new function call to the base WinJS.Application namespace that will be called when the user selects the Settings Charm.

 //About and Privacy Policy Settings Charm
        WinJS.Application.onsettings = function (e) {
            e.detail.applicationcommands = {
                "aboutSettings": { title: "About Space Cadet", href: "/html/about.html" },
                "privacySettings": { title: "Privacy Policy", href: "/html/privacy.html" }
            };
            WinJS.UI.SettingsFlyout.populateSettings(e);
        };

If you have ever opened the Settings Panel on a Windows Store App you may have caught this event loading the panel.  The magic here happens thanks to the WinJS.UI.SettingsFlyout object and by default all Windows Store Apps will have two entries automatically generated here for you.  The first entry enables people to review your app and the second shows current permissions for your app (the capabilities you enabled like WebCam access).

We are going to add two more to the panel the first will give us an about page explaining our app and the second will be for a privacy policy.  A new folder has been added to the root of the project called html and includes two new files about.html and privacy.html which we point to in our new function call above.  These files are pretty self explanatory with the only thing worth noting is the ability to include html at run time through an iframe.  I have included the iframe in the comments so if you wish to load external content simply remove the embedded html and uncomment the iframe with the source pointed to your own url.

about.html

 <!doctype HTML>
 <html>
     <head>
         <title>About settings flyout</title>
         <link href="/css/settings.css" rel="stylesheet" />
     </head>
     <body>
         <!-- BEGINSETTINGSFLYOUT -->
         <div data-win-control="WinJS.UI.SettingsFlyout" aria-label="About Space Cadet settings flyout" data-win-options="{settingsCommandId:'aboutSettings',width:'wide'}">
             <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
             <div class="win-ui-dark win-header" style="background-color:#001E4E"> <!-- Background color reflects app's personality -->
                 <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                 <div class="win-label">About Space Cadet</div>
                 </div>
             <div class="win-content">
                 <div class="win-settings-section">
                     <div id="aboutSpaceCadet">
                     <!--<iframe src="https://insertyourdoman/insertyourhtml.html" width="566" height="600"/>-->
                     Space Cadet is a completely free game for educational and entertainment purposes only.  The code for this game is open source and available at <a href="https://win8gamekit.codeplex.com" target="_blank" >Win8gamekit.codeplex.com</a><p>
                     For more information about my other free games, apps and developer starter kits check out <a href="https://blogs.msdn.com/davedev/" target="_blank" >my blog</a> on MSDN.<p>
                     Other Apps from DaveDev Productions:<br />
                     <ul>
                         <li>Balloons (<a href="https://bit.ly/balloonswin8" target="_blank" >Windows Store</a>)</li>
                         <li>DoodlePad (<a href="https://www.windowsphone.com/s?appid=aded583e-cadc-df11-a844-00237de2db9e" target="_blank" >Windows Phone</a>)</li>
                         <li>DoodlePad Free (<a href="https://www.windowsphone.com/s?appid=5188a4a4-421c-e011-9264-00237de2db9e" target="_blank" >Windows Phone</a>)</li>
                     </ul>
                     </div>
                 </div>
             </div>
         </div>
         <!-- ENDSETTINGSFLYOUT -->
     </body>
 </html>

privacy.html

 <!doctype HTML>
 <html>
     <head>
         <title>Legal notices settings flyout</title>
         <link href="/css/settings.css" rel="stylesheet" />
     </head>
     <body>
         <!-- BEGINSETTINGSFLYOUT -->
         <div data-win-control="WinJS.UI.SettingsFlyout" aria-label="Legal notices settings flyout" data-win-options="{settingsCommandId:'privacySettings',width:'wide'}">
             <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
             <div class="win-ui-dark win-header" style="background-color:#001E4E"> <!-- Background color reflects app's personality -->
                 <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                 <div class="win-label">Privacy Policy</div>
                 </div>
             <div class="win-content">
                 <div class="win-settings-section">
                     <div id="privacyPolicy">
                      <!--<iframe src="https://insertyourdoman/insertyourhtml.html" width="566" height="600"/>-->
                      This privacy policy governs your use of the software application Space Cadet ("Application") for mobile devices that was created by DaveDev Productions.
         
                      The Application is for educational and entertainment purposes only and does not share any information about you or the location of your mobile device.  
         
                      The only Internet operation performed by the Application is via the "Share Charm" invoked by you.  In this instance your Score, Level and Name will be shared to another Windows Store Application you specify.
     
                     </div>
                 </div>
             </div>
         </div>
         <!-- ENDSETTINGSFLYOUT -->
     </body>
 </html>

Since the Settings Panel content is html you can also style it to your liking using CSS.  You will see the background color has been set inside the div in each html.  I also created a settings.cssfile to show how you can change font size across all of the Settings pages very quickly.

settings.css

 body {
     font-size: 22px;
 }

 

 

Settings Panel

Now that we have set up the calls to generate new Settings panel items simply hit Windows-I (settings) or go over to the Charms (Windows-C) and select Settings.  At this point the WinJS.UI.SettingsFlyout will handle the event and populate our two new entries for About and Privacy as seen below.

 

SettingsPanel

One item worth pointing out is these pages themselves are running in an iframe so in the About screen, for example, if I click on one of the urls it would attempt to load the page into the same frame.  Simply using the same techniques you would in a browser to open a new windows with target=”_blank” will open up a browser instead of inside the Settings panel.

AboutSpaceCadet

 

That’s it!  With just a few lines of code your game now has an About screen and complies with Privacy settings thanks to a new Privacy Policy.

Where to download the code

The main Codeplex release has been updated with the changes.  You can grab the latest release Win8GameKit-Feb2013 or simply browse the Source Code for the changes.

Win8GameKitCodeplex

 

The GitHub Win8GameKit repository has also been updated if you prefer to follow the project there.

 

disbitski-githubPNG