Краткое руководство: преобразование ресурсов пользовательского интерфейса (HTML)

  • Статья

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

Добавьте строковые ресурсы для своего пользовательского интерфейса в файлы ресурсов. После этого вы сможете ссылаться на эти строки из кода или разметки.

Инструкции

  1. Размещайте строки в файлах ресурсов, а не в коде или разметке.

    1. Откройте файл package.appxmanifest в Visual Studio, перейдите на вкладку Приложение и установите язык по умолчанию "en-US" (английский, США). Если приложение универсальное, повторите это действие для каждого файла package.appxmanifest в решении.Примечание  Таким образом для проекта будет задан язык по умолчанию. Ресурсы языка по умолчанию используются, если предпочитаемый язык пользователя или языки интерфейса не соответствуют языковым ресурсам, предоставляемым в приложении. См. раздел Страницы свойств, JavaScript.  
    2. Создайте папку для размещения файлов ресурсов.
      1. В обозревателе решений щелкните правой кнопкой мыши проект (Общий проект, если это универсальное приложение) и выберите команды Добавить > Новая папка.
      2. Назовите новую папку "strings".
      3. Если новая папка не отображается в обозревателе решений, выберите Проект > Показать все файлы из меню Microsoft Visual Studio (проект должен быть выбран).
    3. Создайте вложенную папку и файл ресурса для языка "английский (США)".

      1. Щелкните правой кнопкой мыши папку strings и создайте в ней новую папку. Назовите ее "en-US". Файл ресурсов сохраняется в папке, которая названа в соответствии со спецификацией языковых тегов BCP-47. Дополнительные сведения о различных языковых квалификаторах и список распространенных языковых тегов приводятся в разделе Именование ресурсов с помощью квалификаторов (приложения среды выполнения Windows на JavaScript и HTML).

      2. Щелкните правой кнопкой мыши папку en-US и выберите Добавить > Новый элемент….

      3. Выберите "Файл ресурсов (.resjson)".

      4. Щелкните Добавить. Будет добавлен файл ресурсов с именем по умолчанию resources.rejson. Рекомендуется использовать имя по умолчанию. Приложение может разделить свои ресурсы и разместить их в других файлах, но вам следует специально позаботиться о том, чтобы ссылки на них были правильными (см. Загрузка строковых ресурсов).

      5. Новый файл содержит содержимое по умолчанию. Замените его следующим содержимым (которое может очень мало отличаться от содержимого по умолчанию):

        strings/en-US/resources.resjson

        {
    "greeting"              : "Hello",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Goodbye",
    "_farewell.comment"     : "A goodbye."
}

        Это строгий синтаксис JSON, в котором запятая должна ставиться после каждой пары имя/значение, кроме последней. В этом примере "greeting" и "farewell" идентифицируют строки, которые должны отображаться. Остальные пары ("_greeting.comment" и "_farewell.comment") — это комментарии, которые описывают строки. В комментариях удобно размещать любые специальные указания для переводчиков, которые локализуют строки на другие языки.

  2. Добавьте идентификаторы строковых ресурсов в код и разметку.

    1. Добавьте ссылки на библиотеку Windows для JavaScript в HTML-файл, если вы этого еще не сделали.

      Примечание  В этом примере приведен HTML-код файла default.html проекта Windows, сгенерированного при создании нового проекта Пустое приложение (Универсальное приложение) в Visual Studio. Отметим, что файл уже содержит ссылки на WinJS.

      <!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

      Примечание  В следующем примере показан HTML-код файла default.html проекта WindowsPhone, сгенерированного при создании нового проекта Пустое приложение (Универсальное приложение) в Visual Studio. Отметим, что файл уже содержит ссылки на WinJS.

      <!-- WinJS references -->
<link href="/css/ui-themed.css" rel="stylesheet" />
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

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

      WinJS.Application.onloaded = function(){
    WinJS.Resources.processAll();
}

      Если дополнительный HTML-файл загружается в объект WinJS.UI.Pages.PageControl, вызовите WinJS.Resources.processAll(element) в методе IPageControlMembers.ready элемента управления страницей, где element является загружаемым элементом HTML (и его дочерними элементами). Этот пример основан на сценарии 6 в разделе Ресурсы приложения и пример локализации:

      var output;

var page = WinJS.UI.Pages.define("/html/scenario6.html", {
    ready: function (element, options) {
        output = element.querySelector('#output');
        WinJS.Resources.processAll(output); // Refetch string resources
        WinJS.Resources.addEventListener("contextchanged", refresh, false);
    }
    unload: function () { 
        WinJS.Resources.removeEventListener("contextchanged", refresh, false); 
    } 
});

    3. С помощью идентификаторов ("greeting" и "farewell") из файлов ресурсов добавьте в HTML-файл ссылки на строковые ресурсы.

      <h2><span data-win-res="{textContent: 'greeting'}"></span></h2>
<h2><span data-win-res="{textContent: 'farewell'}"></span></h2>

    4. Добавьте ссылки на строковые ресурсы для получения атрибутов.

      <div data-win-res="{attributes: {'aria-label' : 'String1'}}" >

    5. Добавьте ссылки на строковые ресурсы в JavaScript.

      var el = element.querySelector('#header');
var res = WinJS.Resources.getString('greeting');
el.textContent = res.value;
el.setAttribute('lang', res.lang);

    Общий шаблон атрибута data-win-res для замены в HTML-файле: data-win-res="{propertyname1: 'resource ID', propertyname2: 'resource ID2'}".

    Примечание  Если строка не содержит разметки, привяжите, где это возможно, ресурс к свойству textContent вместо innerHTML. Свойство textContent можно заменить гораздо быстрее, чем innerHTML.

     

  3. Добавьте папки и файлы ресурсов для двух других языков.

    1. Добавьте под папкой strings еще одну папку для немецкого языка. Присвойте папке имя "de-DE" для языка "немецкий (Германия)".

    2. Создайте еще один файл Resources.rejson в папке de-DE и замените его содержимое следующими данными:

      strings/de-DE/resources.resjson

      {
    "greeting"              : "Hallo",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Auf Wiedersehen",
    "_farewell.comment"     : "A goodbye."
}

    3. Создайте еще одну папку с именем "fr-FR" для языка "французский (Франция)". Создайте новый файл Resources.rejson и замените его содержимое следующими данными:

      strings/fr-FR/resources.resjson

      {
    "greeting"              : "Bonjour",
    "_greeting.comment"     : "A welcome greeting.",

    "farewell"              : "Au revoir",
    "_farewell.comment"     : "A goodbye."
}

  4. Выполните сборку и запустите приложение.

    Протестируйте приложение для языка интерфейса по умолчанию.

    1. Чтобы выполнить сборку и запустить приложение, нажмите клавишу F5.
    2. Обратите внимание, что приветствие и прощание отображаются на языке, который предпочитает пользователь.
    3. Закройте приложение.

    Примечание  Только приложения Магазина Windows. Протестируйте приложение для других языков.

    1. Откройте панель управления и выберите компонент Часы, язык и регион > Язык.
    2. Обратите внимание, что язык, который использовался для интерфейса при запуске приложения (т. е. английский, немецкий или французский), является первым языком в списке. Если первый язык в списке не является ни одним из этих трех, приложение переходит к следующему языку, который оно поддерживает.
    3. Если на вашем компьютере отсутствует какой-либо из этих трех языков, добавьте отсутствующий язык в список с помощью команды Добавить язык.
    4. Чтобы протестировать приложение с другим языком, выберите язык в списке и нажимайте кнопку Вверх до тех пор, пока он не окажется наверху. После этого запустите приложение.

    Примечание  Только для универсальных приложений Windows Phone. Протестируйте приложение для других языков.

    1. Откройте Настройки на телефоне (или на эмуляторе телефона).
    2. Выберите язык.
    3. Обратите внимание, что язык, который использовался для интерфейса при запуске приложения (т. е. английский, немецкий или французский), является первым языком в списке. Если первый язык в списке не является ни одним из этих трех, приложение переходит к следующему языку, который оно поддерживает.
    4. Если на вашем компьютере отсутствует какой-либо из этих трех языков, добавьте отсутствующий язык в список с помощью команды Добавить языки.
    5. Чтобы протестировать приложение с другим языком, нажмите и удерживайте язык в списке, а затем нажимайте кнопку Вверх до тех пор, пока он не окажется вверху списка. Затем перезагрузите телефон и запустите приложение.

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

Присвоение имен ресурсам с помощью квалификаторов

Загрузка строковых ресурсов

WinJS.Resources.processAll

Ресурсы приложения и пример локализации

Страницы свойств, JavaScript

Тег языка BCP-47