Использование ресурсов в приложениях WinJS

Ресурсы являются очень важной частью любого приложения, которое свободно распространяется. Благодаря ресурсам, приложение может подстраиваться под целевого пользователя, отображая надписи на его родном языке.

Особое значение локализация принимает при разработке Windows 8 приложений. Новая платформа для Windows 8 и сеть магазинов Windows Store позволили как никогда просто распространять свои приложения по всему миру.

В этой статье мы узнаем, как создавать ресурсные файлы в Windows Store JavaScript приложениях и использовать их в коде.

Строковые ресурсы

Самое распространённое использование ресурсов – локализация надписей на различных интерфейсах и системных сообщений. Все эти задачи попадают под категорию строковых ресурсов.

Создадим в проекте папку «strings». В этой папке будут хранится все строки ресурсы всех регионов. Добавим папку для английского языка «en-US». Теперь необходимо добавить в папку файл resources.resjson и заполнить его в формате JSON (ключ-значение):

   1:  {

   2:      "myKey"                 : "Hello World",

   3:      "myKey.someProperty"    : "I’m label of some sub property"    

   4:  }

Чтобы использовать созданные ресурсы в любом html теге используем атрибут data-win-res. Данный атрибут позволяет привязать ключ строки в ресурсах к любому свойству объекта:

   1:  <span data-win-res="{textContent: 'myKey'}"></span>

Также можно получить значение ресурса по ключу из JavaScript кода:

   1:  var res = WinJS.Resources.getString('myKey');

И самое главное, если вы используете ресурсы в своем приложении необходимо вызвать следующий код после загрузки страницы:

   1:  WinJS.Application.onloaded = function(){

   2:      WinJS.Resources.processAll();

   3:  }

Данный код инициализирует ресурсы, а также проходит DOM модель страницы, подставляя ресурсы в указанные свойства.

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

Кроме строк, от локализации могут зависеть и другие файлы, например картинки. Алгоритм действий аналогичный. Создадим папку «Images» в корне проекта, а в ней папку «en-US». В эту папку поместим картинку logo.png.

Готово, теперь данную картинку можно использовать в приложении следующий образом:

   1:  <img src="images/logo.png" />

Или сформировать на нее ссылку в JavaScript коде:

   1:  var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');

   2:  var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);

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

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

1. images/logo.scale-100.png
2. images/logo.scale-140.png
3. images/logo.scale-180.png

Первая картинка – оригинальная, вторая – 140%, третья – 180%. Теперь в вашем приложении всегда будет подставляться нужная картинка, что позволит избежать эффекта растягивания изображения при разных размерах экрана пользователя.

Переключение контекста

Текущий контекст локализации определяется языком установленным в операционной системе. Пользователь может переключать системную локализацию в любой момент. Если в этот момент ваше приложение запущено – можно перехватить данное событие:

   1:  WinJS.Resources.addEventListener('contextchanged', refresh, false);

   2:  function refresh(){

   3:      WinJS.Resources.processAll(); // Обновляем строковые ресурсы.

   4:  }

В обработчике нужно перезагрузить ресурсы приложения, обновив интерфейс.

Спасибо за внимание. Надеюсь эта статья позволит вам без проблем создавать мультиязычные приложения для Windows 8 и сполна пользоваться всеми преимуществами магазином приложений Windows Store. Полезные ссылки вы найдете ниже:

1. Инструкция по использования ресурсов
2. Пример приложения с локализацией