Форматирование чисел в SAPUI5

- adminРубрика: SAPUI5Метки: , , , , ,

В SAPUI5 числа представляются типами:

  • sap.ui.model.type.Integer
  • sap.ui.model.type.Float

Создадим проект в SAP Web IDE, чтобы вывести в различных форматах числа:

форматирование чисел ы sapui5

Для изучения и загрузки в SAP Web IDE вы можете скачать здесь:abc.training.test7 

В представлении abc.training.test7.view.ViewMain в тегах <Text> выведем числа из JSON модели:

вывод чисел в sapui5

Модель опишем в контроллере abc.training.test7.controller.ViewMain и привяжем в функции onInit:

JSON model с данными Float

Также для наглядности с форматированием рассмотрите фрагмент кода с тегами <RadioButton> в проекте:

formatOptions type Float SAPUI5

В контроллере обрабатывается событие radiobuttonselect:

формат Float в SAPUI5

Код представления abc.training.test7.view.ViewMain проекта:

 
 
  1. <mvc:View controllerName="abc.training.test7.controller.ViewMain" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
  2.       displayBlock="true" xmlns="sap.m" xmlns:form="sap.ui.layout.form">
  3.       <App>
  4.             <pages>
  5.                   <Page title="{i18n>title}">
  6.                         <content>
  7.                               <form:SimpleForm editable="true" width="auto" class="sapUiResponsiveMargin" layout="ResponsiveGridLayout"
  8.                                     title="Форматирование чисел (min-maxIntegerDigits, min-maxFractionDigits)">
  9.                                     <form:content>
  10.                                           <RadioButtonGroup id="rbgid" columns="1" width="auto" class="sapUiMediumMarginBottom" selectedIndex="3" select="radiobuttonselect">
  11.                                                 <buttons>
  12.                                            <RadioButton id="RB1" text="Число 1.1. Формат minIntegerDigits: 3, minFractionDigits: 2" />
  13.                                            <RadioButton id="RB2" text="Число 1234.567. Формат minIntegerDigits: 3, maxFractionDigits: 4" />
  14.                                            <RadioButton id="RB3" text="Число 123456.56789. Формат maxIntegerDigits: 5, maxFractionDigits: 4" />
  15.                                            <RadioButton id="RB4" text="Обнуление" />
  16.                                            </buttons>
  17.                                           </RadioButtonGroup>                              
  18.                                           <Text id="mytxt" text="0"/>
  19.                                     </form:content>
  20.                               </form:SimpleForm>
  21.                               <form:SimpleForm editable="true" width="auto" class="sapUiResponsiveMargin"
  22.                                     layout="ResponsiveGridLayout" labelSpanL="3" labelSpanM="3" emptySpanL="4"
  23.                                     emptySpanM="4" columnsL="1" columnsM="1" title="Форматирование чисел">
  24.                                     <form:content>
  25.                                           <Label text="С группировкой разрядов"/>
  26.                                           <Text
  27.                                                 text="{ path: '/floatVal', type: 'sap.ui.model.type.Float',
  28.                                                 formatOptions: { groupingEnabled: true, groupingSeparator: ',', decimalSeparator: '.' } }"/>
  29.                                           <Label text="2 десятичных разряда"/>
  30.                                           <Text
  31.                                                 text="{ path: '/floatVal', type: 'sap.ui.model.type.Float',
  32.                                                 formatOptions: { maxFractionDigits: 2, groupingEnabled: false, groupingSeparator: ',', decimalSeparator: '.' } }"/>
  33.                                           <Label text="C ведущими нулями"/>
  34.                                           <Text
  35.                                                 text="{ path: '/floatVal', type: 'sap.ui.model.type.Float',
  36.                                                 formatOptions: { minIntegerDigits: 20, groupingEnabled: false, groupingSeparator: ',', decimalSeparator: '.' } }"/>
  37.                                     </form:content>
  38.                               </form:SimpleForm>
  39.                         </content>
  40.                   </Page>
  41.             </pages>
  42.       </App>
  43. </mvc:View>

Код контроллера abc.training.test7.controller.ViewMain проекта:

 
 
  1. sap.ui.define([
  2.       "sap/ui/core/mvc/Controller",
  3.       "sap/ui/model/json/JSONModel"
  4. ], function(Controller, JSONModel) {
  5.       "use strict";
  6.       return Controller.extend("abc.training.test7.controller.ViewMain", {
  7.             _data: {
  8.                   "floatVal": "121464562246.24893",
  9.                   "number": "987.741"
  10.             },
  11.             onInit: function(evt) {
  12.                   var oModel = new JSONModel(this._data);
  13.                   this.getView().setModel(oModel);
  14.             },
  15.             radiobuttonselect: function(evt) {
  16.                   var txt = evt.getParameter('selectedIndex');
  17.                   var oLocale = new sap.ui.core.Locale("ru-RU");
  18.                   var oFormatOptions = {
  19.                    minIntegerDigits: 3,
  20.                    maxIntegerDigits: 5,
  21.                    minFractionDigits: 2,
  22.                    maxFractionDigits: 4
  23.                   };
  24.                   
  25.                   var oFloatFormat = sap.ui.core.format.NumberFormat.getFloatInstance(oFormatOptions, oLocale);
  26.                   switch(txt) {
  27.                    case 0:
  28.                          this.getView().byId("mytxt").setText(oFloatFormat.format(1.1));
  29.                    break;
  30.                    case 1:
  31.                    this.getView().byId("mytxt").setText(oFloatFormat.format(1234.567));
  32.                    break;
  33.                    case 2:
  34.                    this.getView().byId("mytxt").setText(oFloatFormat.format(123456.56789));
  35.                    break;
  36.                    case 3:
  37.                    this.getView().byId("mytxt").setText(0);
  38.                    break;
  39.                    default:
  40.                    break;
  41.                   }                  
  42.                   
  43.             }
  44.       });
  45. });

Параметры formatOptions

  • minIntegerDigits: минимальное количество целых цифр. Если в числе меньше целочисленных цифр, чем указанно в данном параметре, то в начало будут добавлены нули. Смотрите пример выше “C ведущими нулями”.
  • maxIntegerDigits: максимальное количество целых цифр. Если в числе целых чисел больше, чем указанно в данном параметре, то все целые цифры будут заменены на “?”.
  • minFractionDigits: минимальное количество цифр в дробной части числа. Если в числе меньше дробных цифр, чем значение данного параметра, то будут добавлены нули.
  • maxFractionDigits: максимальное количество цифр в дробной части числа. Если в числе больше дробных цифр, чем значение данного параметра, то эти цифры будут исключены, а наименьшая значащая цифра округляется (вычисляется с использованием roundingMode).
  • decimals: число дробных цифр.
  • precision: количество цифр, используемых для отображения числа. Например, если установить данный параметр = 5, то итоговое число может быть 1.3456 или 134.45.
  • shortDecimals: количество цифр в сокращенном числе. Если параметр style не задан как short, то используется значение из decimals.
  • groupingEnabled определяет, будут ли целая часть числа разделена на группы, которые разделены параметром groupingSeparator.
  • groupingType определяет тип группировки. Здесь можно установить либо Arabic, либо Indian.
  • groupingSeparator определяет разделитель группировки.
  • decimalSeparator определяет символ десятичной точки.
  • groupingSize размер групп.
  • groupingBaseSize определяет определенный размер группы, если она отличается от размера группировки (например, Indian).
  • plusSign – знак плюса.
  • minusSign – знак минуса.
  • roundingMode параметр, отвечающий за то, как будут округляться числа. округления для отбрасывания цифр после максимальных десятичных цифр, определяемых maxFractionDigits или десятичными знаками. Округление будет применяться только в том случае, если значение форматирования имеет номер типа.

Примеры форматирования чисел:

 
 
  1. var oLocale = new sap.ui.core.Locale("en-US");
  2. var oFormatOptions = {
  3. style: "short",
  4. decimals: 1,
  5. shortDecimals: 2
  6. };
  8. var oFloatFormat = sap.ui.core.format.NumberFormat.getFloatInstance(oFormatOptions, oLocale);
  9. oFloatFormat.format(1234.56); // результат - 1.23K (применяется параметр shortDecimals)
  10. oFloatFormat.format(123.456); // результат - 123.5 (число не "короткое", применяется параметр decimals)
 
 
  1. var oLocale = new sap.ui.core.Locale("en-US");
  2. var oFormatOptions = {
  3. minIntegerDigits: 3,
  4. maxIntegerDigits: 5,
  5. minFractionDigits: 2,
  6. maxFractionDigits: 4
  7. };
  9. var oFloatFormat = sap.ui.core.format.NumberFormat.getFloatInstance(oFormatOptions, oLocale);
  10. oFloatFormat.format(1.1); // результат - 001.10
  11. oFloatFormat.format(1234.567); // результат - 1,234.567
  12. oFloatFormat.format(123456.56789); // результат - ??,???.5679

Форматирования “ценовых” чисел:

  • showMeasure — показывать единицу измерения числа.
  • currencyCode — использовать код или символ, только при установке showMeasure в true.
  • currencyContext определяет, какой шаблон используется для форматирования номера валюты. Может использоваться либо standard, либо accounting.

Пример:

 
 
  1. var oLocale = new sap.ui.core.Locale("en-US");
  2. var oFormatOptions = {
  3. showMeasure: true,
  4. currencyCode: false,
  5. currencyContext: 'standard'
  6. };
  8. var oCurrencyFormat = sap.ui.core.format.NumberFormat.getCurrencyInstance(oFormatOptions, oLocale);
  9. oCurrencyFormat.format(1234.567, "USD"); // результат US$1,234.57 (дробная часть по умолчанию = 2 для USD)
  10. oCurrencyFormat.format(1234.567, "JPY"); // результат JP¥1,235 (дробная часть по умолчанию = 0 для JPY)
  12. oFormatOptions = {
  13. showMeasure: true,
  14. currencyCode: true,
  15. currencyContext: 'standard'
  16. };
  17. oCurrencyFormat = sap.ui.core.format.NumberFormat.getCurrencyInstance(oFormatOptions, oLocale);
  18. oCurrencyFormat.format(1234.567, "USD"); // результат - USD1,234.57 (вместо символа валюты используется код валюты)
  19. oCurrencyFormat.format(1234.567, "JPY"); // результат JPY1,235 (вместо символа валюты используется код валюты)

Форматирование чисел Integer

В проекте нет форматирование чисел типа Integer, вот добавил фрагмент кода для type: sap.ui.model.type.Integer. Можете скопировать в проект и увидеть результат работы.

 
 
  1. <Label text="Число в формате Integer"/>
  2.      <Text
  3.          text="{ path: '/floatVal', type: 'sap.ui.model.type.Integer',
  4.                  formatOptions: { groupingEnabled: true, groupingSeparator: ','},
  5.                  constraints: {minimum: 1, maximum: 5000000 } }"/>

Подробней про все параметры числовых форматов можно найти здесь — https://openui5.hana.ondemand.com/#/api/sap.ui.core.format.NumberFormat.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.