Панель настроек Магазина Windows
Одна из наиболее распространенных задач, которые вам необходимо выполнить в приложении Магазина Windows, — добавить политику конфиденциальности. Это особенно верно, если вы включили определенные функции, такие как веб-камера. Я обновил Win8GameKit быстрым и простым примером того, как добавить панель настроек в ваши собственные игры.
Какой код был обновлен?
Внутри default.js мы собираемся добавить новый вызов функции в базовое пространство имен WinJS.Application, которое будет вызываться, когда пользователь выбирает чудо-кнопку «Настройки».
//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);
};
Если вы когда-либо открывали панель настроек в приложении Магазина Windows, возможно, вы поймали это событие при загрузке панели. Волшебство здесь происходит благодаря объекту WinJS.UI.SettingsFlyout, и по умолчанию все приложения Магазина Windows будут иметь две записи, автоматически сгенерированные здесь для вас. Первая запись позволяет пользователям просматривать ваше приложение, а вторая показывает текущие разрешения для вашего приложения (возможности, которые вы включили, например, доступ к веб-камере).
Мы добавим еще две панели, первая из которых даст нам страницу с описанием нашего приложения, а вторая — о политике конфиденциальности. В корневой каталог проекта была добавлена новая папка html, включающая два новых файла about.html и privacy.html, на которые мы указали в нашем новом вызове функции выше. Эти файлы говорят сами за себя, и единственное, на что стоит обратить внимание — это возможность включать html во время выполнения через iframe. Я включил iframe в комментарии, поэтому, если вы хотите загрузить внешний контент, просто удалите встроенный html и раскомментируйте iframe, указав источник, указывающий на ваш собственный 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="http://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="http://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="http://blogs.msdn.com/davedev/" target="_blank" >my blog</a> on MSDN.<p>
Other Apps from DaveDev Productions:<br />
<ul>
<li>Balloons (<a href="http://bit.ly/balloonswin8" target="_blank" >Windows Store</a>)</li>
<li>DoodlePad (<a href="http://www.windowsphone.com/s?appid=aded583e-cadc-df11-a844-00237de2db9e" target="_blank" >Windows Phone</a>)</li>
<li>DoodlePad Free (<a href="http://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="http://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>
Поскольку содержимое панели настроек — это html, вы также можете оформить его по своему вкусу с помощью CSS. Вы увидите, что цвет фона был установлен внутри div в каждом html. Я также создал settings.cssфайл, чтобы показать, как вы можете изменить размер шрифта на всех страницах настроек очень быстро.
settings.css
body {
font-size: 22px;
}
Панель настроек
Теперь, когда мы настроили вызовы для генерации новых элементов панели «Настройки», просто нажмите «Windows-I» («Настройки») или перейдите к «Charms» (Windows-C) и выберите «Настройки». На этом этапе WinJS.UI.SettingsFlyout будет обрабатывать событие и заполнять наши две новые записи для About и Privacy, как показано ниже.
Стоит отметить, что эти страницы сами работают в iframe, например, в окне «О программе», например, если я щелкну один из URL-адресов, он попытается загрузить страницу в тот же фрейм. Просто используя те же приемы, что и в браузере, чтобы открыть новые окна с target = ”_ blank”, откроется браузер, а не внутри панели «Настройки».
Это оно! С помощью всего лишь нескольких строк кода ваша игра теперь имеет экран «О программе» и соответствует настройкам конфиденциальности благодаря новой Политике конфиденциальности.
Где скачать код
Основной выпуск Codeplex был обновлен с изменениями. Вы можете получить последнюю версию Win8GameKit-Feb2013 или просто просмотреть исходный код для внесения изменений.
Хранилище GitHub Win8GameKit также был обновлен , если вы предпочитаете следовать проекту там.
