Всем привет,

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

Если вы знаете sapui5, возможно, вы уже посещали эту ссылку API для ввода (наиболее распространенный элемент управления вводом, используемый в sapui5):



SAPUI5 SDK - Demo Kit v2.0
Изменить описание sapui5.hana.ondemand.com



На основе API, предоставляемого SAPUI5, мы можем предложить следующие методы проверки:

  • Установите тип ввода как String; напишите свой собственный метод проверки: простой для понимания реализации. Но это худший метод, поскольку требует наибольших усилий.
  • Установите тип ввода как Число; напишите небольшую дополнительную проверку: легко настроить. Но не работает со старой версией IE и Firefox.
  • Привязать ввод к модели с типом «sap.ui.model.type.float» и написать дополнительную проверку: лучший способ, требует наименьших усилий; но сложно понять и требует, чтобы вы знали механизм привязки в SAPUI5.

Начнем с каждого метода:

Установите тип ввода как String; напишите свой собственный метод проверки

Вы можете быстро настроить ввод:

1 / Пользователь ниже вводит данные в представлении:

Label text=”Input with type ‘String’: “/> 
<Input></Input>

По умолчанию тип ввода - String. Таким образом, вы позволите пользователю вводить любой текст без проверки.

2 / Проверка

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



Как проверить, является ли строка числом с плавающей запятой?
Я передаю параметр с именем value. Я хотел бы знать, является ли значение плавающим. Пока у меня есть следующее: если… stackoverflow.com



И есть много других способов проверить ввод, является ли он String или нет, но я советую вам забыть об этом подходе, если вы хотите сократить, но усилить код, поскольку:

  • Этот подход требовал проверки: которая не будет полной, если вы следите за решением в Интернете. (По крайней мере не для меня)
  • Это не может быть использовано в сценариях с несколькими странами. например, ваш пользователь из Англии (используйте точку «.» в качестве десятичного разделителя) и Германии (пользователь «,» в качестве десятичного разделителя). Если вы последуете этому подходу, у вас будет головная боль.
  • Вам необходимо настроить сообщение проверки самостоятельно. И поверьте мне, сообщение о валидации непросто, если вы хотите, чтобы оно выглядело хорошо.

Следовательно, со всем этим недостатком, я думаю, вам следует рассмотреть следующие подходы:

Установите тип ввода как Число; напишите небольшую дополнительную проверку.

Вид выглядит так:

<Label text="Input with type 'Number': "/>      
<Input type="Number"></Input>

Если ваш пользователь использует только Chrome, ура, проблема решена. Все, что вам нужно, это добавить код, и библиотека поможет вам все это завершить:

  • Разрешить пользователю вводить только числа и соответствующие символы (например, «,»; «.», «E» (для эпсилон)).
  • Вызовите цифровую клавиатуру на мобильных устройствах. (что отлично подходит для мобильных пользователей)

К сожалению, многие пользователи по-прежнему используют IE, Firefox и другие браузеры, которые еще не поддерживают этот тип ввода «Число».

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

Привязать ввод к модели с типом «sap.ui.model.type.float» и написать дополнительную проверку

Для проверки числа не нужно изобретать велосипед. SAP сделал это, и все, что нам нужно сделать, - это повторно использовать его. Единственная проблема в том, что повторно использовать это не так-то просто.

Предпосылкой для этого подхода является понимание концепции привязки sapui5, которая подробно объясняется в документах здесь.

Приступим к реализации проверки с плавающей запятой:

1 / Определить привязку к модели с типом Float

xml-представление можно определить по следующему адресу:

<Label text="bound to view's JSON model: "/>      
<Input value="{path: 'viewModel>/number', type:'sap.ui.model.type.Float'}" liveChange="onInputLiveChange" change="onInputChange"></Input>

И не забудьте создать модель в файле контроллера:

sap.ui.define([
  "sap/ui/core/mvc/Controller"
 ], function (Controller) {
 "use strict";
return Controller.extend("barcodescan.controller.barcode", {
onInit: function () {
   var oViewModel = new sap.ui.model.json.JSONModel({
     number: 0
    }, true);
   this.getView().setModel(oViewModel, "viewModel");
  }
 });
});

Вы можете видеть, что мы привязываем значение ввода к пути ‘viewModel› / number ’ (эта модель будет создана в контроллере). И у нас также есть вызов другого атрибута ‘type’, для которого установлено значение ‘ sap.ui.model.type.Float ’. Это означает, что тип значения этой привязки - Float. Настройка типа поплавка для привязки поможет вам:

  • Вызовите цифровую клавиатуру на мобильном телефоне (да, то же самое, что и номер входа)
  • Но что еще более удивительно, они разделяют представление (формат) и истинное значение числа. И это именно то, что нам нужно, чтобы сделать локализацию (или интернационализацию) идеальной. Позвольте мне объяснить об этом подробнее:

Давайте рассмотрим пример, который я показал в верхней части этого сообщения:

Вы можете видеть, что после того, как я ввел «123456.1456», ввод был преобразован в «123,456,15» в соответствии с этим английским форматом. Поскольку у нас есть привязка к модели, модель будет хранить 2 типа входного значения:

  • Истинное значение: точное значение числа, которое находится в типе Javascript с плавающей запятой. В данном случае это 123456.1456.
  • Форматированное значение: форматированное значение, основанное на местоположении пользователя, хранящееся как строковый тип в Javascript. В данном случае это «123,456,15».

Тип привязки - это основная концепция и механизм, который помогает нам форматировать число в зависимости от местоположения пользователя.

После настройки библиотека поможет вам со всеми задачами форматирования. Как показано в демонстрации выше, как только вы вводите номер, библиотека автоматически запускает функцию для переформатирования значения в соответствии с его локализацией. И если вы проверяете модель, вы всегда найдете 2 значения ввода (одно для точного значения, а другое для форматированного значения).

ОК, теперь вы успешно настроили привязку. Но если вы введете нечисловое значение в свой ввод, ничего не произойдет. Библиотека преобразует текст в число, не сообщая об ошибке проверки. Как вы можете видеть ниже:

2 / Добавить проверку изменений в реальном времени

Проблема в том, что мы не уверены, правильно ли проанализирован номер. И нет смысла так хранить число с латинскими буквами внутри него. Вот почему нам нужно добавить дополнительную проверку к нашему вводу. И вы уже можете увидеть проверку, определенную в представлении, когда ввод change или liveChange:

<Input value="{path: 'viewModel>/number', type:'sap.ui.model.type.Float'}" liveChange="onInputLiveChange" change="onInputChange"></Input>

Нам нужно добавить соответствующую функцию для обработки валидации внутри контроллера:

onInputLiveChange: function (oEvt) {
 var oControl = oEvent.getSource();
 this.validateFloatInput(oControl);
},
onInputChange: function (oEvent) {
 var oControl = oEvent.getSource();
 this.validateFloatInput(oControl);
},
validateFloatInput: function (oControl) {
 var oBinding = oControl.getBinding("value");
 var oValue = oControl.getValue();
 try {
  var oParsedValue = oBinding.getType().parseValue(oValue, oBinding.sInternalType); // throw error if cannot parse value
  if (oParsedValue) {
   oControl.setValueState(sap.ui.core.ValueState.None);
  } else {
   oControl.setValueState(sap.ui.core.ValueState.Error);
  }
 } catch (ex) {
  oControl.setValueState(sap.ui.core.ValueState.Error);
 }
}

Давайте разберемся с кодом:

  • Когда пользователь вводит данные, запускается событие liveChange. Или, если пользователь завершит ввод, будет инициировано событие «изменение».
  • В обработчике событий мы получаем oControl, который является нашим Вводом, нуждающимся в проверке, и отправляем в качестве параметра функции validateFloatInput.
  • validateFloatInput: проверяет, является ли введенное значение числом или нет. Идея здесь заключается в использовании библиотечной функции oBinding.getType (). ParseValue (), которая выдает ошибку, если не может преобразовать строку в число (что нам нужно знать, если входное значение является числом ).
  • Если во время синтаксического анализа возникла ошибка, мы установим для параметра Value State входа значение «Error», в противном случае - «None», чтобы ошибки не было. И что удивительно, библиотека SAPUI5 поможет вам выполнить все форматирование выделения ввода и показать текст информирующему пользователю. SAPUI5 также автоматически переводит сообщение об ошибке на местный язык, экономя вам много усилий.

И, наконец, вы сделали простой пример проверки чисел с плавающей запятой для нескольких языков и регионов.

Что дальше?

SAPUI5 не только имеет тип для числа, но также поддерживает такие популярные типы ввода, как:

  • Валюта
  • DateTime
  • Размер файла
  • Временной интервал
  • Единица измерения
  • …

Что поможет вам в 99% требований к вашим входам.

Если есть время, загляните в его документацию.

А пока ура и до свидания!

— V —

Обработка больших чисел:

Это редкий вариант использования, но вы можете столкнуться с этим при работе с международным предприятием, где число в базе данных может быть огромным. Пока Javascript поддерживает только 64-битные числа. Если вы введете большое число в SAPUI5 Input с типом привязки как float / Integer, число будет округлено, и вы потеряете детали.

Чтобы избежать этой ситуации, самый простой способ - добавить эту опцию формата «parseAsString: true» в вашу привязку:

oInput.bindProperty("value", {
        path: sBindingPath,
        type: new sap.ui.model.type.Float({
         maxIntegerDigits: 18,
         maxFractionDigits: 2,
         minFractionDigits: 2,
         parseAsString: true,
         style: "standard"
        })
       });

Платформа UI5 сохранит число как String, чтобы избежать проблемы переполнения с 64-битным числом.

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

Спасибо.