Intermediate

Локализация компонентов

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

Набор правил для той или иной страны называется locale, который включает в себя методы для дат, времени, чисел, валюты и форматирования их ярлыков

Методы локализации находятся в классе i18n и обрабатывают данные согласно указанному формату.

По умолчанию конструктор Date() выводит необработанные данные, которые неудобно читать.

new Date(2020,10,30); //-->Tue Nov 30 2020 00:00:00

Вы можете форматировать дату и время через модуль Date или класс i18n.

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

У десятичных и целых чисел свой разделитель, в зависимости от особенностей страны. Например, цены следует показывать с определёнными валютными знаками.

Форматирование чисел происходит через модуль Number или класс i18n.

Встроенные локали

Стандартный пакет библиотеки Webix включает в себя 10 локалей:

  • "en-US" - Северная Америка (по умолчанию);
  • "ru-RU" - Русский;
  • "fr-FR" - Французский;
  • "ja-JP" - Японский;
  • "be-BY" - Беларусский;
  • "de-DE" - Немецкий;
  • "es-ES" - Испанский;
  • "it-IT" - Итальянский;
  • "zh-CN" - Китайский;
  • "pt-BR" - Португальский (Бразилия).

В пакете Webix Pro доступно более 300 локалей.

Структура локали

То, в каком виде отображаются отформатированные данные зависит от текущей локали. По умолчанию выбрана en-US локаль.

en-US локаль

webix.i18n.locales["en-US"]={
  groupDelimiter:",",
  groupSize:3,
  decimalDelimiter:".",
  decimalSize:2,
 
  dateFormat:"%m/%d/%Y",
  timeFormat:"%h:%i %A",
  longDateFormat:"%d %F %Y",
  fullDateFormat:"%m/%d/%Y %h:%i %A",
  am:["am","AM"],
  pm:["pm","PM"],
 
  price:"${obj}",
  priceSettings:{
    groupDelimiter:",",
    groupSize:3,
    decimalDelimiter:".",
    decimalSize:2
  },
 
  fileSize: ["b","Kb","Mb","Gb","Tb","Pb","Eb"],
 
  calendar: {
    monthFull:[
      "January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"
    ],
    monthShort:[
      "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", 
      "Sep", "Oct", "Nov", "Dec"
    ],
    dayFull:[
      "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
      "Friday", "Saturday"
    ],
    dayShort:["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    hours: "Hours",
    minutes: "Minutes",
    done:"Done",
    clear: "Clear",
    today: "Today"
  },
 
  dataExport:{
    page:"Page",
    of:"of"
  },
 
  PDFviewer:{
    of:"of",
    automaticZoom:"Automatic Zoom",
    actualSize:"Actual Size",
    pageFit:"Page Fit",
    pageWidth:"Page Width",
    pageHeight:"Page Height",
    enterPassword:"Enter password",
    passwordError:"Wrong password"
  },
 
  aria:{
    calendar:"Calendar",
    increaseValue:"Increase value",
    decreaseValue:"Decrease value",
    navMonth:["Previous month", "Next month"],
    navYear:["Previous year", "Next year"],
    navDecade:["Previous decade", "Next decade"],
    dateFormat:"%d %F %Y",
    monthFormat:"%F %Y",
    yearFormat:"%Y",
    hourFormat:"Hours: %h %A",
    minuteFormat:"Minutes: %i",
    removeItem:"Remove item",
    pages:["First page", "Previous page", "Next page", "Last page"],
    page:"Page",
    headermenu:"Header menu",
    openGroup:"Open column group",
    closeGroup:"Close column group",
    closeTab:"Close tab",
    showTabs:"Show more tabs",
    resetTreeMap:"Reset tree map",
    navTreeMap:"Level up",
    nextTab:"Next tab",
    prevTab:"Previous tab",
    multitextSection:"Add section",
    multitextextraSection:"Remove section",
    showChart:"Show chart",
    hideChart:"Hide chart",
    resizeChart:"Resize chart"
  },
 
  richtext:{
    underline: "Underline",
    bold: "Bold",
    italic: "Italic"
  },
 
  combo:{
    select:"Select",
    selectAll:"Select all",
    unselectAll:"Unselect all"
  },
 
  message:{
    ok:"OK",
    cancel:"Cancel"
  },
 
  comments:{
    send: "Send",
    confirmMessage: "The comment will be removed. Are you sure?",
    edit: "Edit",
    remove: "Remove",
    placeholder: "Type here..",
    moreComments:"More comments"
  }
};

Числа:

  • groupDelimiter (string) - знак, разделяющий группы чисел;
  • groupSize (number) - количество чисел в каждой из групп. Обычно количество равно 3, т.к. самая распространённая группа - тысячи;
  • decimalDelimiter - знак, разделяющий целое число и его десятичную часть;
  • decimalSize (number) - количество чисел в дробной части.

Дата и время:

  • dateFormat, longDateFormat, fullDateFormat - задаёт формат дней, месяцев и лет;
  • timeFormat - задаёт формат часов, минут и секунд;
  • am,pm - определяет, как обозначается время до и после полудня.

Начало недели:

По умолчанию неделя в календаре начинается с воскресенья. Однако вы можете указать любой день в качестве начала недели с помощью свойства webix.Date.startOnMonday.

webix.Date.startOnMonday = true;

Валюта задаёт денежную единицу для данных из объекта ({obj}).

Календарь:

  • monthFull, dayFull (string) - массив полных и сокращённых названий месяцев для текущей местности;
  • monthShort, dayShort (string) - массив полных и сокращённых названий дней для текущей местности.

При форматировании сокращённых/полных дат, дата из первого примера выглядела бы так:

Форматирование с en-US локалью

format:webix.i18n.dateFormatStr
    //--> 11/30/2010
 
format:webix.i18n.longDateFormatSt
    // --> 30 November 2010
  • hours, minutes - опции локализации ярлыков в календаре для часов и минут;
  • today, clear - конфигурации для кнопок "Today" и "Clear"; используются для выбора текущей даты и снятия выбора;
  • done - the text label of the "Done" button.

Контролы

Ярлыки для некоторых частей Webix компонентов, которые вероятнее всего изменяются. Например:

  • select - ярлык кнопки 'Select' компонента multisuggest (используется в поле, редакторе и фильтре multiselect). Значение по умолчанию для североамериканской локали - "Select".

Экспорт данных

Ярлыки, которые используются в нумерации страниц, в футере экспортируемого PDF документа:

  • page - ярлык для "Page" в линии с нумерацией;
  • of - ярлык для "of" в линии с нумерацией.

PDF Viewer

Ярлыки для переключения страниц и опции документа в PDF Viewer:

  • of - ярлык для "of" в выборе страницы;
  • automaticZoom - ярлык для опции увеличиения/уменьшения (для указания авторазмера документа);
  • actualSize - ярлык для опции увеличиения/уменьшения (для указания текущего размера документа);
  • pageFit - ярлык для опции увеличиения/уменьшения (для подгона размера документа под размеры страницы);
  • pageWidth - ярлык для опции увеличиения/уменьшения (для подгона размера документа под ширину страницы);
  • pageHeight - ярлык для опции увеличиения/уменьшения (для подгона размера документа под высоту страницы);
  • enterPassword - хедер для окна пароля ('password');
  • passwordError - текст ошибки (если валидация пороля не прошла).

Aria

Текстовые ярлыки для интерактивных областей, свойства которых нельзя настроить через публичное API. Эти ярлыки указываются как атрибут aria-label и используются устройствами для чтения с экрана (оглашают цель текущего элемента):

  • increaseValue - ярлык aria для кнопки "+";
  • decreaseValue - ярлык aria для кнопки "-"; ;
  • navMonth - ярлык aria для кнопок "следующий/предыдущий месяц" в календаре;
  • navYear - ярлык aria для кнопок "следующий/предыдущий год" в календаре;
  • navDecade - ярлык aria для кнопок "следующая/предыдущая декада" в календаре;
  • removeItem - ярлык aria для кнопки "x" в multicombo;
  • pages - ярлык aria для кнопок навигации по страницам;
  • page - ярлык aria для нумерованных кнопок;
  • headermenu - ярлык aria для иконки хедера меню datatable;
  • openGroup - ярлык aria для иконки "+" (открыть группу) в datatable;
  • closeGroup - ярлык aria для иконки "-" (закрыть группу) в datatable;
  • closeTab - ярлык aria для иконки "x" для вкладок, которые можно закрыть в tabbar;
  • showTabs - ярлык aria для иконки "show more tabs" в отзывчивом tabbar;
  • resetTreeMap - ярлык aria для иконки "reset tree map" в увеличенном treemap;
  • navTreeMap - ярлык aria для иконки "level up" в увеличенном treemap;
  • nextTab - ярлык aria для иконки ">" на панели навигации carousel;
  • prevTab - ярлык aria для иконки "<" на панели навигации carousel;
  • multitextSection - ярлык aria для иконки "+" в multitext ;
  • multitextextraSection - ярлык aria для иконки "-" в multitext;
  • showChart - ярлык aria для кнопки "show chart" в легенде чарта;
  • showChart - ярлык aria для кнопки "hide chart" в легенде чарта;
  • resizeChart - ярлык aria для изменения размеров в rangechart.

RichText

Ярлыки для стилизации шрифта кнопок в контроле RichText:

  • underline - ярлык кноки "Underline";
  • bold - ярлык кнопки "Bold";
  • italic - ярлык кнопки "Italic".

Combo

Ярлыки для кнопок в элементах selecting/unselecting:

  • select - ярлык кнопки для выбора элементов;
  • selectAll - ярлык для кнопки выбора всех элементов;
  • unselectAll - ярлык для кнопки снятия выбора со всех элементов;

Message

Ярлыки для кнопок в модальных окнах:

  • ok - ярлык кнопки "OK";
  • cancel - ярлык кнопки "Cancel".

Comments

Ярлыки для кнопок и контекстного меню в виджете Comments:

  • send - ярлык кнопки отправки сообщения;
  • confirmMessage - текст в теле окна подтверждения;
  • edit - ядрык для кнопки "Edit";
  • remove - ядрык для кнопки "Remove";
  • placeholder - текст плейсхолдера;
  • moreComments - ярлык для кнопки "More comments".

Как применить локаль

Как уже говорилось ранее локаль en-US указана по умочланию. Любая другая задаётся вручную.

С помощью метода setLocale() вы можете указать новую локаль. Метод принимает имя локали в качестве параметра.

webix.i18n.setLocale("fr-FR");

После того, как вы указали новую локаль, методы объекта webix.i18n будут перерисовывать даты и числа в соответствии с правилами этой локали.

format:webix.i18n.dateFormatStr 
    // --> 30/11/2010
 
format:webix.i18n.longDateFormatStr 
    // --> 30 Novembre 2010

Как менять локали

Чтобы изменить один или несколько параметров текущей локали, вам необходимо переопределить их и затем задать эту же локаль, чтобы изменения вступили в силу:

webix.i18n.fullDateFormat = "%Y-%m-%d %H:%i";
webix.i18n.setLocale(); // имя локали не указано

Как задать локализированный формат i18n

Локализация возможна благодаря классу i18n, который позволяет указывать форматы, объединённые одной и той же локалью.

В случае с DataTable, формат задаётся через свойство format, а данные определяются через ID столбца:

{ header:"Date",  id:"start", format:webix.i18n.dateFormatStr},
{ header:"Price", id:"price", format:webix.i18n.priceFormat}

Related sample:  DataTable Localization

У других компонентов (List, DataView and Tree) процесс отображения данных отличается. Чтобы обеспечить корректное форматирование, используйте функцию-темплейт:

template:function(obj){ 
    return webix.i18n.longDateFormatStr(obj.start)+"<br/>"+
       webix.i18n.priceFormat(obj.price);
}

Текущий формат определяется текущей локалью. Исходная локаль EN-US задаёт dateFormatStr как "%m/%d/%Y", а формат валюты как "{obj}currency", где obj это значение валюты.

Related sample:  Dataview Formatting

Наверх