Как локализовать элементы управления WinJS (HTML)

Статья
01/29/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Локализуйте подписи и значки элементов управления WinJS наряду с остальным содержимым вашего приложения.

Необходимые условия

Свойства, подлежащие локализации

Элементы управления WinJS могут иметь атрибуты, которые необходимо локализовать, например:

Подписи и значки команд на панели приложения
Подписи пунктов меню
Подписи переключателей во всплывающих элементах "Параметры"
Метки ARIA для реализации специальных возможностей

Добавьте идентификаторы ресурсов к исправлениям элементов управления WinJS, чтобы обращаться к локализованным строкам.

Ниже в примере панели приложения к каждой команде панели приложения добавлен атрибут data-win-res по следующему шаблону.

data-win-res="{winControl: {propertyName1:'resourceID1',propertyName2:'resourceID2'}}"

Каждый propertyName сопоставляется с одним из свойств элементов управления (например, с подписью или названием), а resourceID соотносится с идентификатором ресурса строки, загружаемой из файлов ресурсов. Ниже см. образец strings/en-US/resources.resjson.

В коде JavaScript для этого исправления функция WinJS.Resources.processAll должна вызываться при загрузке HTML, чтобы заменить атрибуты и параметры в каждом атрибуте data-win-res на строки ресурсов.

Пример панели приложения

В этом примере показано, как локализовать стоки команд на панели приложения.

<div data-win-control="WinJS.UI.AppBar" data-win-options="">
<button data-win-control="WinJS.UI.AppBarCommand" 
     data-win-res="{winControl: {label:'command1Label',tooltip:'command1Tooltip'}}"
     data-win-options="{id:'cmdCommand1',icon:'add',section:'global'}">
</button>
<button data-win-control="WinJS.UI.AppBarCommand"
     data-win-res="{winControl: {label:'command2Label',tooltip:'command2Tooltip'}}"
     data-win-options="{id:'cmdCommand2',icon:'remove',section:'global'}">
</button>
</div>

(function () {

    "use strict";
    var page = WinJS.UI.Pages.define("/html/localize-appbar.html", {
    ready: function (element, options) {
        // Load resources.
        loadResources();
        // Enable listener so they get updated when user changes language selection.
        WinJS.Resources.addEventListener("contextchanged", loadResources);
    }
});

// Handle loading of resources.
function loadResources() {
    WinJS.Resources.processAll();
}

})();

Файлы ресурсов

strings/en-US/resources.resjson

{
    "command1Label"            : "en-US Command1",
    "command1Tooltip"          : "en-US Command1 Tooltip",

    "command2Label"            : "en-US Command2",
    "command2Tooltip"          : "en-US Command2 Tooltip"
}

strings/fr-FR/resources.resjson

{
    "command1Label"            : "fr-FR Command1",
    "command1Tooltip"          : "fr-FR Command1 Tooltip",

    "command2Label"            : "fr-FR Command2",
    "command2Tooltip"          : "fr-FR Command2 Tooltip"
}

strings/de-DE/resources.resjson

{
    "command1Label"            : "de-DE Command1",
    "command1Tooltip"          : "de-DE Command1 Tooltip",

    "command2Label"            : "de-DE Command2",
    "command2Tooltip"          : "de-DE Command2 Tooltip"
}

Пример меню

Это исправление показывает, как локализовать элемент управления "Меню". Здесь также требуются файлы ресурсов и JavaScript, аналогично примеру панели приложения.

<div id="headerMenu" data-win-control="WinJS.UI.Menu">
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item1Label'}}" 
        data-win-options="{id:'firstMenuItem'}">
    </button>
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'item2Label'}}" 
        data-win-options="{id:'secondMenuItem'}">
    </button>
    <hr data-win-control="WinJS.UI.MenuCommand" 
        data-win-options="{id:'separator',type:'separator'}" />
    <button data-win-control="WinJS.UI.MenuCommand" 
        data-win-res="{winControl: {label:'itemNLabel'}}" 
        data-win-options="{id:'lastMenuItem'}">
    </button>
</div>

Пример тумблера

Это исправление показывает, как локализовать элемент управления "Тумблер". Здесь также требуются файлы ресурсов и JavaScript, аналогично примеру панели приложения.

<div data-win-control="WinJS.UI.ToggleSwitch" 
    data-win-res="{winControl: {labelOn:'switch1LabelOn',labelOff:'switch1LabelOff',
    title:'switch1Title'}}"
    data-win-options="">
</div>

Связанные разделы

Образец элемента управления AppBar HTML

Образец использования элемента управления "Всплывающий элемент", написанный на HTML

Образец использования элемента управления "Тумблер", написанный на HTML

Share via