Опубликован: 10.04.2013 | Доступ: свободный | Студентов: 440 / 9 | Длительность: 16:52:00
Специальности: Программист
Лекция 2:

Состояния, параметры, файлы и документы

Руководства по дизайну панели параметров

Помимо команд, которые Windows автоматически добавляет на панель параметров, приложение может самостоятельно добавить туда до восьми команд, обычно – около четырех. Все, что больше восьми, вызовет исключение. Так как параметры глобальны для приложения, команды, которые вы добавляете, никогда не меняются: они не чувствительны к контексту. Другими словами, на панели параметров располагают только те команды, которые воздействуют на приложение в целом. Команды, применимые лишь к определенным страницам или контексту внутри страниц, следует размещать на панели приложения или на полотне. Некоторые примеры команд верхнего уровня на панели приложения показаны на рис. 2.2.

Примеры команд верхнего уровня на панели параметров. Обратите внимание на то, что нижняя часть панели всегда занята системными параметрами, а названия приложения и разработчика всегда расположены сверху. Команды "Разрешения" и "Оценки и отзывы" добавляются автоматически

Рис. 2.2. Примеры команд верхнего уровня на панели параметров. Обратите внимание на то, что нижняя часть панели всегда занята системными параметрами, а названия приложения и разработчика всегда расположены сверху. Команды "Разрешения" и "Оценки и отзывы" добавляются автоматически

Каждая команда, предоставленная приложением, может выполнять одно из двух действий. Во-первых, эта команда может быть обычной гиперссылкой, которая ведет к страницам приложения "Справка", "Соглашение о конфиденциальности", "Условия использования", "Лицензионное соглашение" и так далее, по нажатию на которую соответствующая страница будет открыта в браузере. Другая возможность заключается в том, что команда вызывает дополнительную всплывающую панель со специализированными элементами управления, или просто iframe для отображения веб-содержимого. Вы можете реализовать страницы "Помощь", "Условия использования" и другое текстовое содержимое обоими способами вместо того, чтобы переключаться в браузер.

Примечание. Как указано в "Сертификационных требованиях к приложениям для Windows 8" (http://msdn.microsoft.com/library/windows/apps/hh694083.aspx), в разделе 4.1., приложения, которые тем или иным образом собирает персональные данные, должны иметь политику конфиденциальности или соответствующее заявление. Это должно быть, как минимум, отражено на странице описания приложения в Магазине Windows. Хотя это и не требуется, подразумевается, что вы так же включите в панель приложения соответствующую команду.

Дополнительные всплывающие элементы создают с помощью элемента управления WinJS.UI.SettingsFlyout . На рис. 2.3. есть примеры. Обратите внимание на то, что дополнительные панели параметров бывают двух размеров: узкая (346 пикселей) и широкая (646 пикселей). Руководства по дизайну предлагают делать все дополнительные панели параметров приложения одного размера – то есть, не делать некоторые из них узкими, а некоторые – широкими. В любом случае, у вас будет лишь пара подобных панелей, так что это не должно превратиться в проблему. Кроме того, обратите внимание на о, что всплывающий элемент Разрешения (Permissions), показанный в левой части На рис. 2.3. предоставляется Windows автоматически и он настроен в соответствии с возможностями, заявленными в манифесте. Некоторыми возможностями, наподобие определения местоположения, можно управлять из этой панели. Другие, наподобие доступа к Интернету и к библиотекам, просто перечислены, так как пользователь не может включать или выключать их.

Примеры дополнительных панелей параметров в приложениях Windows 8 Travel, Weather, News и Music. Первые три – узкие, четвертая – широкая. Обратите внимание на то, что каждая из панелей, предоставленная приложением, соответствующим образом брендирована и имеет кнопку "Назад", ведущую к основной панели параметров. Панель Разрешения (Permissions) предоставлена системой, и, таким образом, отражает системную тему. Ее нельзя настроить.

Рис. 2.3. Примеры дополнительных панелей параметров в приложениях Windows 8 Travel, Weather, News и Music. Первые три – узкие, четвертая – широкая. Обратите внимание на то, что каждая из панелей, предоставленная приложением, соответствующим образом брендирована и имеет кнопку "Назад", ведущую к основной панели параметров. Панель Разрешения (Permissions) предоставлена системой, и, таким образом, отражает системную тему. Ее нельзя настроить.

Обычно используемые здесь группы параметров – это те, которые позволяют пользователю настроить особенности перемещения данных приложения – то есть, группа параметров, которая определяет, какие данные состояния приложения перемещаются (это можно увидеть, выполнив команду Изменение параметров компьютера > Синхронизация параметров (PC Settings > Sync You Settings)). Кроме того, рекомендуется включать в панель параметров команды управления учетной записью/профилем, так же как и возможности по входу и выходу. Как отмечено в лекции 1, вход в приложение и лицензионное соглашение, которые необходимы для продолжения работы следует показать при запуске приложения. Для текущих возможностей, связанных со входом в приложение, для просмотра лицензионного соглашения и так далее, создайте соответствующие команды и панели в интерфейсе чудо-кнопки Параметры. Обратитесь к материалу "Руководство и контрольный список для элементов управления входом" (http://msdn.microsoft.com/library/windows/apps/hh965453.aspx) для получения более подробных сведений по этому вопросу. Руководство по добавлению справки можно найти в материале "Добавление справки по приложению" (http://msdn.microsoft.com/library/windows/apps/hh465043.aspx).

В плане поведения, дополнительные панели автоматически скрываются, когда они неактивны, но так же имеют заголовок с кнопкой "Назад" для возврата на основную панель параметров со всеми командами. Из-за возможности автоматического скрытия, изменения, которые вносят на панелях, применяются немедленно: здесь нет кнопок "OK" или "Применить" или чего-то подобного. Если пользователь хочет вернуться к прежнему варианту настроек, ему следует просто восстановить исходные параметры.

По этой причине, хорошо использовать простые элементы управления, которые легко переключить в прежнее состояние, вместо сложных наборов элементов управления, которые сложнее вернуть к исходному виду. Рекомендовано использовать тумблеры для параметров, имеющих значения включено/выключено (вместо флагов), кнопки для выполнения некоторых действий (но без закрытия панели параметров), гиперссылки (для открытия браузера), текстовые поля ввода (следует задать им соответствующий тип – адрес электронной почты (email address), пароль (password) и так далее), переключатели для групп, включающих в себя до пяти взаимоисключающих элементов, и списки (элемент select) для четырех-шести текстовых элементов.

Смотрите на все параметры с точки зрения "меньше – значит больше". Избегайте большого количества параметров всех видов, так как пользователь, вероятно, никогда не соберется их искать, и вам, возможно, не нужно показывать их в панели настроек. Кроме того, хотя панель настроек может прокручиваться вертикально, постарайтесь ограничить общее количество настроек, так как пользователь воспользуется прокруткой один-два раза, если вообще станет это делать.

Вот еще некоторые вещи, которых надо избегать, работая с панелью параметров:

  • Не используйте панель параметров для размещения команд, имеющих отношение к рабочему процессу. Они должны располагаться на панели приложения, или на полотне, как показано в "Командный пользовательский интерфейс" .
  • Не используйте команды верхнего уровня в панели параметров для выполнения действий, которые не относятся к связи с другим приложениям (как в случае с браузером). Таким образом, команды верхнего уровня никогда не следует использовать для выполнения каких-либо действий внутри приложения.
  • Не используйте команды панели параметров для навигации по приложению.
  • Не используйте элемент управления WinJS.UI.SettingsFlyout как обычный элемент управления.

Теперь давайте посмотрим на то, как соответствующим образом использовать чудо-кнопку Параметры и элемент управления SettingsFlyout.

Расположение команд на панели параметров

Первая часть работы заключается в расположении команд приложения на панели параметров, которая отображается при активации чудо-кнопки Параметры. В отличие от команд панели приложения, это всегда должны быть одни и те же команды, не зависящие от текущего состояния приложения. Если у вас есть контекстно-зависимые параметры, поместите элементы управления для их настройки на панель приложения.

Есть два пути реализации этого в приложениях, написанных на HTML и JavaScript: использовать WinRT напрямую, или применить вспомогательные функции WinRT. Рассмотрим это на примере простой команды Справка (Help).

Для того чтобы знать, когда чудо-кнопка активируется посредством WinRT, получим объект панели параметров из Windows.UI.ApplicationSettings.SettingsPane.getForCurrentView (http://msdn.microsoft.com/library/windows/apps/windows.ui.applicationsettings.settingspane.getforcurrentview.aspx) и добавим прослушиватель для его события commandsrequested (это событие WinRT, поэтому удостоверьтесь в том, что прослушиватель, если это необходимо, удален):

// Переменная n здесь – это удобное краткое имя	
var n = Windows.UI.ApplicationSettings;	
var settingsPane = n.SettingsPane.getForCurrentView();	
settingsPane.addEventListener("commandsrequested", onCommandsRequested);
 

В обработчике события создадим объект Windows.UI.ApplicationSettings.SettingsCommand (http://msdn.microsoft.com/library/windows/apps/windows.ui.applicationsettings.settingscommand.aspx) для каждой команды, где каждая команда имеет свойства id, label, и функцию invoked, которая вызывается, когда пользователь коснулся элемента команды или щелкнул по нему мышью. Все это может быть задано в конструкторе, как показано ниже:

function onCommandsRequested(e) {
// n все еще является кратким именем для Windows.UI.ApplicationSettings
var commandHelp = new n.SettingsCommand("help", "Help", helpCommandInvoked);
e.request.applicationCommands.append(commandHelp);
}	
 

Вторая строка кода – это место, где вы затем добавляете подобные команды на панель параметров. Это выполняется путем присоединения их к объекту e.request.applicationCommands (http://msdn.microsoft.com/library/windows/apps/windows.ui.applicationsettings.settingspanecommandsrequest.applicationcommands.aspx). Этот объект – конструкция WinRT, которая называется вектор (vector) и используется для управления коллекцией элементов с помощью команд наподобие append и insertAt. В данном случае у нас есть вектор объектов SettingsCommand, как вы можете видеть выше, к нему довольно просто присоединять команды. Подобный вызов выполняется для каждой команды, можно и передать массив команд методу replaceAll вместо метода append. То, что потом происходит в обработчике invoked для каждой команды, весьма интересно, и мы вернемся к этому в следующем разделе.

Кроме того, вы можете заранее заполнить вектор applicationCommand за пределами события commandrequested. Это прекрасно, так как команды, соответствующие параметрам, следует поддерживать в неизменном состоянии для всего приложения. Материал "Краткое руководство: добавление справки в приложение" (http://msdn.microsoft.com/library/windows/apps/hh465062.aspx) показывает пример подобного подхода, который я модифицировал здесь для того, чтобы показать использование replaceAll:

var n = Windows.UI.ApplicationSettings;
var settingsPane = n.SettingsPane.getForCurrentView();
var vector = settingsPane.applicationCommands;

//Гарантирует отсутствие заданных команд в интерфейсе чудо-кнопки Параметры 
vector.clear();

var commands = [ new settingsSample.SettingsCommand("Custom.Help", "Help", OnHelp),
new n.SettingsCommand("Custom.Parameters", "Parameters", OnParameters)];
vector.replaceAll(commands);
 

При таком подходе вам не нужно добавлять прослушиватель для commandsrequested или напрямую обрабатывать это событие.

Теперь, так как большинство приложений, вероятнее всего, будет использовать некоторое количество настроек, WinJS предоставляет несколько вспомогательных механизмов для всего процесса. Во-первых, вместо прослушивания события WinRT, можно просто назначить обработчик для WinJS.Application.onsettings (это – контейнер для commandsrequested):

WinJS.Application.onsettings = function (e) {
// ...
};
 

В вашем обработчике, создайте JSON-объект, описывающий ваши команды и сохраните этот объект в e.detail.applicationcommands. Имейте в виду, что он отличается от объекта WinRT – простая настройка этого свойства ни к чему не приведет. Далее происходит передача этого модифицированного объекта события в WinJS.UI.SettingsFlyout.populateSettings, как показано ниже (взято из примера "Параметры приложения" (http://code.msdn.microsoft.com/windowsapps/App-settings-sample-1f762f49)):

WinJS.Application.onsettings = function (e) {	
e.detail.applicationcommands =	
{ "help": { title: "Help", href: "/html/2-SettingsFlyout-Help.html" } };
WinJS.UI.SettingsFlyout.populateSettings(e);	
};
 

Метод populateSettings обходит объект e.details.applicationcommands и вызывает метод WinRT applicationCommands.append для каждого элемента. Это предоставляет вам более компактный способ для выполнения тех же действий, что вы выполняли с помощью WinRT и так же упрощает реализацию команд параметров, как мы увидим ниже.

Примечание. Вспомогательные функции WinJS специально разработаны для создания элемента управления SettingsFlyout, заполненного из HTML-файла, который вы указываете в свойстве href. Это свойство должно ссылаться на содержимое, находящееся в пакете приложения; его нельзя использовать для создания элементов управления параметров, которые осуществляют переход по URI (что обычно используется для команд "Условия предоставления услуг" и "Заявление о конфиденциальности"). В подобных случаях вы должны использовать API WinRT напрямую вместе с WinJS.UI.SettingsFlyout.populateSettings. Опять же, это просто – поместить веб-содержимое прямо во всплывающий элемент параметров с помощью iframe, который поддерживает параметры в соответствии с опытом использования приложения.

Вадик Елетин
Вадик Елетин
Россия, г. Санкт-Петербург
Николай Жигульский
Николай Жигульский
Россия, Тверь, Тверской государственный технический университет