Специальные возможности

Форматирование данных, относящихся к культуре и календарные вычисления

Если вы осмотритесь в диалоговых окнах для настройки форматов и региона ( рис. 16.4), вы обнаружите, что возможны тонкие настройки форматирования чисел, которые могут выглядеть пугающе, уже не говоря о форматировании даты, времени и валюты!

К счастью, классы для форматирования в WinRT учитывают все детали, так что вы можете взять значение из new Date(), например, и получить строку, которая полностью отражает предпочтенияп пользователя. Эти API так же предоставляют функции разбора, которые работают в обратном направлении.

В Windows.Globalization.NumberFormatting имеется CurrencyFormatter (http://msdn.microsoft.com/library/windows/apps/windows.globalization.numberformatting.currencyformatter.aspx), DecimalFormatter (http://msdn.microsoft.com/library/windows/apps/windows.globalization.numberformatting.currencyformatter.aspx), PercentFormatter (http://msdn.microsoft.com/library/windows/apps/windows.globalization.numberformatting.percentformatter.aspx), и PermilleFormatter (http://msdn.microsoft.com/library/windows/apps/windows.globalization.numberformatting.permilleformatter.aspx), которые следует всегда использовать при конверсии значений данных в строки, которые отображаются в пользовательском интерфейсе. Работа со всеми этими средствами форматирования показана в примере "Форматирование и анализ числовых значений" (http://code.msdn.microsoft.com/windowsapps/Number-formatting-and-bb10ba3d), стандартный рабочий процесс выглядит как создание экземпляра класса со специальным кодом языка или без него, установка необходимых свойств для средства форматирования (таких, как количество цифр и использование разделителей), и затем вызвать его метод format для получения строкового представления данных, или, наоборот, один из его методов parse* для превращения строки в число.

Например, для форматирования значения валюты, создадим объект класса CurrencyFormatter с идентификатором валюты (или с идентификаторов валюты, списком языков и регионом), установим параметры и затем вызовем format (js/CurrencyFormatting.js):

  // Применяем значения по умолчанию для пользователя
  var userCurrencyFormat =
  new Windows.Globalization.NumberFormatting.CurrencyFormatter(userCurrency);
  var currencyDefault = userCurrencyFormat.format(fractionalNumber);

  // Применяем параметры форматирования валюты
  var currencyFormatUSD = new Windows.Globalization.NumberFormatting.CurrencyFormatter("USD");
  var currencyUSD = currencyFormatUSD.format(fractionalNumber);

  // Применяем параметры валюты, языка и региона (Франции, затем - Ирландии)
  var currencyFormatEuroFR =
  new Windows.Globalization.NumberFormatting.CurrencyFormatter("EUR",
  ["fr-FR"], "ZZ");
  var currencyEuroFR = currencyFormatEuroFR.format(fractionalNumber);

  var currencyFormatEuroIE =
  new Windows.Globalization.NumberFormatting.CurrencyFormatter("EUR",
  ["gd-IE"], "IE");
  var currencyEuroIE = currencyFormatEuroIE.format(fractionalNumber);

  // Включая дроби с целым числом
  var currencyFormatUSD1 =
  new Windows.Globalization.NumberFormatting.CurrencyFormatter("USD");
  currencyFormatUSD1.fractionDigits = 2;
  var currencyUSD1 = currencyFormatUSD1.format(wholeNumber);

  // Группируем целые числа
  var currencyFormatUSD2 =
  new Windows.Globalization.NumberFormatting.CurrencyFormatter("USD");
  currencyFormatUSD2.isGrouped = 1;
  var currencyUSD2 = currencyFormatUSD2.format(fractionalNumber);

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

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

Для форматирования даты и времени мы можем обратиться к пространству имен Windows.Globalization.DateTimeFormatting (http://msdn.microsoft.com/library/windows/apps/br206859.aspx), где можно найти класс DateTimeFormatter (http://msdn.microsoft.com/library/windows/apps/windows.globalization.datetimeformatting.datetimeformatter.aspx) вместе со множеством перечислений для различных способов форматирования секунд, минут, часов, дней, месяцев и лет. Для использования данного API, вы создаете объект для форматирования, задаете необходимые форматы и применимые языки. (У него не меньше восьми разных конструкторов!). Затем вы выбираете параметры, наподобие clock, geographicRegion, и так далее и вызываете его метод format со значением типа Date, которое вам нужно отформатировать. Вы даже можете применить форматы собственной разработки, если хотите. Множество вариантов его использования показаны в примере "Форматирование даты и времени" (http://code.msdn.microsoft.com/windowsapps/Date-and-time-formatting-2361f348), я думаю, небольшого фрагмента его кода будет вполне достаточно (из Сценария 2, js/stringtemplate.js):

var mydatefmt1 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
"month day");
var mytimefmt1 = new Windows.Globalization.DateTimeFormatting.DateTimeFormatter(
"hour minute ");
var dateToFormat = new Date();
var mydate1 = mydatefmt1.format(dateToFormat);
var mytime1 = mytimefmt1.format(dateToFormat);
      

Другой фрагмент кода из SDK, который сюда подходит, это пример "Подробные сведения о календаре и вычисления" (http://code.msdn.microsoft.com/windowsapps/Calendar-details-and-math-b1683bb7). Как было упомянуто выше в данной лекции, когда я говорил о времени истечения срока пробной лицензии приложения и покупок из приложения, приложение, готовое для мирового рынка, не должно делать предположений о том, как вычисляются или сравниваются временные отрезки, так как это может различаться в зависимости от регионального календаря. Именн поэтому весьма обширный класс Windows.Globalization.Calendar (http://msdn.microsoft.com/library/windows/apps/windows.globalization.calendar.aspx) содержит десять различных методов add*, которые находятся в диапазоне от addNanoseconds до addEras, вместе с его методами compare и compareDateTime (и множество механизмов для получения текстов, связанных с календарем). Другими словами, навсегда запомните сейчас, что вы никогда больше не будете использовать арифметические операции для работы со значениями даты и времени, так как они не работают соответствующим образом в каждом регионе. Даже в США вы придете к неправильным значениям, так как не учтете что-то вроде перехода на летнее время, когда число часов в двух днях каждого года, на самом деле, не 24!

Сортировка и группировка

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

Для приложений для Магазина Windows, написанных на HTML, CSS и JavaScript, вы можете использовать метод localeCompare (http://msdn.microsoft.com/library/62b7ahzy.aspx), который уже встроен в строки (даже для отдельных символов). Он производит сравнение, основываясь на текущем языке пользователя. Вы так же можете использовать методы строк tolocaleLowerCase (http://msdn.microsoft.com/library/94h6w1kx.aspx) и toLocaleUpperCase (http://msdn.microsoft.com/library/6t6xaca8.aspx). В Главе 5 курса "Введение в разработку приложений для Windows 8 с использованием HTML, CSS и JavaScript", в разделе, посвященном примеру группировки элементов ListView, рассмотрено, как использовать API Windows.Globalization.Collation.CharacterGroupings (http://msdn.microsoft.com/library/windows/apps/windows.globalization.collation.charactergroupings.aspx) для правильной группировки по первым символам заголовков элементов. Вы можете сравнить исходный пример в SDK с модифицированным примером, который находится в дополнительных материалах к вышеупомянутой лекции, для того, чтобы увидеть, как этот код был глобализован.

Шрифты и расположение текста

Благодаря Unicode и возможности HTML напрямую обрабатывать язык на различных языках, нужно сделать не так много, чтобы этот текст расположился соответствующим образом в вашем макете. Например, если вы посмотрите пример "Язык и сопоставление шрифтов" (http://code.msdn.microsoft.com/windowsapps/Language-font-mapping-919f08d4), то можете увидеть, что страницы вроде html/scenario2.html содержат подобную разметку:

<div id="scenario2Document">
<h2 lang="hi" id="scenario2Heading" contenteditable="true">
??????  ?????  ????????
</h2>
<p lang="hi" contenteditable="true">
??????  ?????  ????????  ???  ????  ????  ????  ??????  ?????  ?????  ????  ??????
????????  ????????  ????  ????  ????  ????  ????  ?????  ????  ?????  ???????
?????????  ????  ????  ?????  ??????????  ???  ?????? ??????????  ????????
??? ????  ????  ?????  ???????  ???????  ????  ??????  ?????  ????  ??????  ???????
????  ????  ?????  ?????  ????  ???  ????  ????  ?????  ?????  ????
</p>
</div>
      

Вот как это выглядит (и если вы читаете на Хинди, вы увидите, что это бессмысленный текст):

Что этот пример, на самом деле, демонстрирует, так это использование объекта Windows.Globalization.Font.LanguageFontGroup (http://msdn.microsoft.com/library/windows/apps/br206865.aspx), который предоставляет особые рекомендации по шрифтам для различных частей пользовательского интерфейса. Созданный с использованием конкретного тега BCP-47, объект содержит множество свойств, каждое – типа LanguageFont, как, например, uITextFont и uIHeadingFont (снова обратите внимание на странное изменение регистра). Каждый объект LanguageFont, в свою очередь, содержит такие свойства, как fontFamily, fontStretch, fontStyle, fontWeight, и scaleFactor. С помощью пары вспомогательных функций в js/langfont.js, которые расположены в пространстве имен WinJS.UI , не являясь частью WinJS, эти рекомендации применяются к элементам DOM путём простой установки соответствующего стиля для этих элементов.

Вам должно быть понятно, что эти рекомендации шрифтов – лишь улучшения и в них нет необходимости для реализации базовой функциональности. Как показывает Сценарий 4 примера, базовый английский шрифт (c Unicode-символами, конечно), примененный к смешанному английско-японскому тексту, выводит японский текст, но, возможно, неоптимально. Применение рекомендованного шрифта выполняет такое улучшение.

Другой аспект, касающийся работы с различными шрифтами и языками заключается в том, как всё это влияет на общий макет приложения. Этому посвящен материал документации "Настройка макета и шрифтов для различных языков и поддержка макетов с написанием справа налево" (http://msdn.microsoft.com/library/windows/apps/hh967757.aspx), однако, позвольте мне сделать сводку по этому материалу и добавить кое-что еще.

Во-первых, приложения, готовые к мировому рынку, оставляют дополнительное место для различных фрагментов содержимого, наподобие заголовков и подписей, так как слова и фразы длиннее в некоторых языках и короче в других. Общее правило – оставлять как минимум на 30% больше места, чем вам нужно для строк на английском, и до 300% для по-настоящему коротких предложений и отдельных слов. Например, английское слово "wrench" (гаечный ключ) переводится на немецкий как "Schraubenschl?ssel"; слово "click" (щелчок) (в этом я доверился Bing Translator), переводится на греческий как "????? ???? ??? ??????." В некоторых случаях вам может понадобиться перенос слов.

Для всех подобных целей вы можете использовать селекторы псевдо-классов :lang()/:-ms-lang() (http://msdn.microsoft.com/library/windows/apps/Hh996886.aspx) в CSS для настройки стилей наподобие width так, как нужно для конкретных языков. Не забудьте протестировать ваше приложение с этими языками, или протестируйте его с использованием псевдо-языка (смотрите "Тестирование с помощью псевдо-языка" далее"

Во-вторых, различные языки располагают текст в направлении, отличном от направления слева направо (и сверху вниз), принятое в английском и во многих индоевропейских языках. Арабский и иврит, например, читаются справа налево (RTL) вместо чтения слева направо. В некоторых символы располагаются сначала сверху вниз, потом – справа налево.

Подготавливая свое приложение для RTL-языков (учитывая, что подобные рынки очень важны), вам следует реализовать в своем макете то, что называется "зеркальным отражением". Это подразумевает реверсирование вашего макета, включая изображение, направление кнопки "Назад", направление анимаций, сдвига содержимого и так далее.

К счастью, HTML и CSS-макеты автоматически реализуют подобное, и таблицы стилей WinJS, ui-light.css and ui-dark.css, соответствующим образом задают стиль CSS direction (http://msdn.microsoft.com/library/windows/apps/hh996832.aspx), как показано ниже (это то, что вам следует использовать на уровне элементов для RTL-языков, а не обычное выравнивание):

      
html:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {
direction: rtl;
}

На самом деле, ознакомьтесь поближе с таблицами стилей WinJS, и вы найдете много настроек, выполненных для RTL-языков :-ms-lang, в частности, поля и отступы. Поэтому, если вы используете HTML, CSS и JavaScript, в том числе – встроенные элементы управления, основная часть техники зеркального отражения реализуется автоматически. Приложение "Here My Am!", например, просто работает на иврите.

Что касается изображений, то вы можете инвертировать их, применяя стиль transform: scaleX(-1) к необходиым элементам. Если, однако, у вас есть изображения, которые действительно нужно заменить (как когда некоторые части будут инвертированы, а некоторые – нет), вы можете использовать в имени файлов изображений layoutdir-RTL так же, как мы использовали для пиксельной плотности и контраста. На самом деле, есть много квалификаторов для использования с ресурсами, которые описаны в материале "Как именовать ресурсы, используя квалификаторы" (http://msdn.microsoft.com/library/windows/apps/hh965372.aspx), кое-что мы подробнее рассмотрим в следующем разделе.

Иногда вам понадобится задать обратное направление для некоторой части текста, как при смешивании языков в одном и том же абзаце. Для этого вы можете применить стиль unicode-bidi (http://msdn.microsoft.com/library/windows/apps/hh996988.aspx) вместе с параметром direction. (Заметьте, что цифры обычно нейтральны в смысле направления, они принимают направление элементов, которые их содержат, поэтому вам может понадобиться установить параметры направления их расположения отдельно). Аналогичным образом, вы можете так же использовать стиль -ms-writing-mode (http://msdn.microsoft.com/library/windows/apps/Hh997001.aspx) для того, чтобы задать практически любое направление текста, например, для представлений классической китайской, японской или корейской поэзии