Специальные возможности
Ресурсы для схем высокой контрастности
В предыдущем разделе, в примере CSS-стилизация для режима высокой контрастности" (http://code.msdn.microsoft.com/windowsapps/High-Contrast-b36079d8) мы столкнулись с соглашениями об именовании файлов, которые загрузчик ресурсов Windows использует для схем высокой контрастности: button.contrast-high.svg, например. Сценарий 4 этого примера показывает, как разрешение таких имен может происходить автоматически. В проекте имеется файл, названный button.svg, вместе с еще одним, который называется button.contrast-high.svg, и с элементом img, который объявлен в html/scenario4.html:
<img src="../button.svg" />
Если система исполняется с нормальными параметрами контрастности, загрузчик ресурсов разрешает это URI в button.svg. (Конструкция ../ используется потому что страница сценария находится на один уровень ниже папки HTML). Когда применены настройки высокой контрастности, загрузчик ищет то же имя файла, но с .contrast-high, вставленным перед расширением.
Примечание. Если вы применяете пользовтельские значки панели приложения (как обсуждалось в Главе 1 курса "Пользовательский интерфейс приложений для Windows 8, созданных с использованием HTML, CSS и JavaScript", не забудьте включить в состав изображений высококонтрастные варианты исходных изображений с использованием данной схемы именования.
Если вы хотите иметь больше параллельных имен файлов, вы так же можете назвать файлы для нормальных настроек контрастности, включив в их имя .contrast-standard, как, например button.contrast-standard.svg. Если вы сделаете это в проекте примера, оставив HTML в том виде, в котором он есть, вы не увидите разницы в выводе данных. В то же время, учитывая особенности поведения системы при работе с контрастностью, рекомендовано использовать .contrast-standard если вы так же поддерживаете варианты .contrast-white и .contrast-black.
Как упомянуто выше, эти варианты применяются автоматически для тем "чёрное на белом" (белый фон) и "белое на черном" (черный фон), соответственно. Для того, чтобы это увидеть, скопируйте файл button.contrast-high.svg, назовите его button.contrast-white.svg, и затем сделайте еще одну копию с именем button.contrast-black.svg. В этой второй копии измените цвета градиента в блоке CDATA, заменив black на ButtonFace. Когда затем вы переключитесь на высококонтрастную тему с черным фоном, вы увидите кнопку в стиле "белое на черном", как это и должно быть.
Все эти изменения можно найти в копии примера, в дополнительных материалах.
Есть одна сложность с элементом img в Сценарии 4, который не обновляется при смене контрастности во время работы приложения, как это происходит с медиа-запросами в Сценариях 1-3. Таким образом, хост-процесс приложения не перерисовывает элемент img в ответ на изменение контрастности. Для того, чтобы изменить это поведение, мы обычно заставляем хост-процесс приложения думать, что изменился URI источника, присоединяя некоторые фиктивные параметры URI. Мы можем сделать это внутри обработчика AccessibilitySettings.onhighcontrastchanged, где eventArgs.target.highContrastScheme предоставляет подходящие переменные для URI (смотрите js/scenario4.js в модифицированном примере):
var page = WinJS.UI.Pages.define("/html/scenario4.html", {
ready: function (element, options) {
var accSet = new Windows.UI.ViewManagement.AccessibilitySettings();
accSet.addEventListener("highcontrastchanged", function (e) {
var image = document.getElementById("buttonImage");
//Используем имя схемы (без пробела) в качестве фиктивного параметра URI
var params = e.target.highContrast ?
"?" + e.target.highContrastScheme.replace(/\s*/g, "") : "";
image.src = "../button.svg" + params;
});
}
});Одно из значительных преимуществ highcontrastchanged перед прослушивателями медиа-запросов, заключается в том, что последние вызываются очень скоро после того, как произошло изменение, в тот момент, когда загрузчик ресурсов может еще не применить изменения к тому моменту, когда вы устанавливаете атрибут img.src. Это приводит к отображению не тех изображений. Событие highcontrastchanged вызывается гораздо позже, в итоге вышеприведенный код обычно работает. Тем не менее, мои эксперименты в этом направлении (с примером, исполняющимся в прикрепленном режиме и с Панелью управления, открытой в заполняющем), показали, что это не на 100% надёжно: изменение схемы контрастности – это ресурсоёмкая операция, которая вызывает много событий по всей системе, и нет гарантии, что загрузчик ресурсов успеет справиться со своей работой. По этой причине вы можете вы можете решить попросту не пользоваться всем этим, устанавливая явным образом атрибу src для показа известных файлов с конкретными именами. Модифицированный пример действительно использует подобный подход (закомментируйте код выше). Или вы можете просто использовать медиа-запросы!
Масштаб + контраст = Квалификаторы ресурсов
Так как изображения, с которыми мы работали в предыдущем разделе, имеют формат SVG, нет необходимости поддержки различных файлов для разной плотности пикселей. Но что, если у нас есть растровая графика? Как нам скомбинировать настройки масштабирования и контраста? Об этом так же нужно будет подумать, когда мы будем заниматься локализацией в следующем разделе, так как нам так же может понадобиться использовать разные варианты для разных языков.
Это приводит нас к теме квалификаторов ресурсов (resource qualifiers), во всех подробностях об этом можно прочесть в материале "Как именовать ресурсы, используя квалификаторы" (http://msdn.microsoft.com/library/windows/apps/hh965372.aspx). Квалификаторы включают в себя масштабирование и контрастность, как мы увидим, а так же язык, направление макета, домашний регион и некоторые другие таинственные варианты.
Для того, чтобы скомбинировать квалификатор с отдельным именем файла, присоедините их все вместе, использовав знаки подчеркивания. В общей форме это выглядит как filename.qualifiername-value_qualifiername-value.ext. В итоге, изображение, имеющее имя logo.png, может иметь варианты наподобие logo.contrast-high_scale-180.png и logo.scale-100_contrast-white.png (порядок квалификаторов значения не имеет). Очевидно, с полным набором из трех или четырех вариантов масштабирования (учитывая некоторые случаи использования scale-80) и с четырьмя возможными вариантами контрастности, у нас может получиться 16 разных изображений для одного ресурса.
Образец использования этого механизма можно найти в примере "Ресурсы приложения и локализация" (http://code.msdn.microsoft.com/windowsapps/Application-resources-and-cd0c6eaa). Откройте его в Visual Studio и посмотрите в папку с изображениями. (Хотя пример показывает лишь разные варианты изображений для разных схем контрастности при 100% масштабировании, не забудьте предоставить в собственном приложении варианты для масштаба 140% в 180%; приложение "Here My Am!" для этой лекции поступает так с экраном-заставкой, плитками и логотипом.)
Когда мы займёмся темой подготовки приложения к мировому рынку, мы обнаружим, что локализованные ресурсы изображения требуют набора вариантов с разной контрастностью и масштабированием для каждого языка. Как вы можете догадываться, подобное соглашение об именовании файлов может вызвать путаницу, когда увеличивается количество файлов. К счастью, загрузчик ресурсов позволяет применять квалификаторы в именах папок, в итоге, локализованные ресурсы обычно размещаются в папках, относящихся к конкретным языкам. Больше об этом – ниже, в разделе "Часть 2: структурирование ресурсов для языка по умолчанию". Мы, кроме того, полностью избежали подобных сложностей в приложении "Here My Am!" с помощью использования элемента canvas вместо отдельных изображений для данных графических ресурсов, которые содержат текстовые сообщения (логотип не локализован).
Высококонтрастные изображения для плиток и всплывающих уведомлений
Как и любые другие изображения в вашем приложении, изображения плиток в манифесте, изображения, отправляемые на плитку при обновлении, и изображения, используемые во всплывающих уведомлениях, учитывают установки контрастности. (С индикаторами событий проблемы нет, так как они уже монохромные и настраиваются автматически). Именование файлов изображений в манифесте с использованием квалификаторов ресурсов работает и для настроек масштабирования, и для контрастности, и для языка, как мы увидим ниже.
Полезные данные XML для плиток и всплывающих уведомлений могут ссылаться на локальные изображения с использованием URI ms-appx:///, а загрузчик ресурсов будет искать подходящий файл. Это не применимо, однако, к URI ms-appdata:///, поэтому, если вы работаете с загруженными или динамически генерируемыми изображениями, вам понадобится определять конкретные файлы самостоятельно.
Для полезных данных XML, которые могут ссылаться на удаленные изображения, установка параметра addImageQuery в значение true, как обсуждалось в Главе 2, присоединит к удаленным URI строку запроса, которая отражает масштабирование, контрастность и язык:
?ms-scale=<scale>
&ms-contrast=<contrast>
&ms-lang=<language>
Подробности об этом можно найти в материале "Глобализация и специальные возможности для уведомлений на плитках и всплывающих уведомлений" (http://msdn.microsoft.com/library/windows/apps/Hh831183.aspx), а так же о том, Как локализовывать строки в полезных данных XML. Мы сами всё это увидим немного позже.