2.3.2. Готовые элементы управления¶
Поддерживаемые элементы управления:
Component - встраивает внутрь себя макеты из других файлов.
TextView - показывает пользовательский текст. Можно оформить как кнопку.
TextWeightView - показывает текущий вес с весов.
AppCompatImageView - выводит пользовательское изображение.
CardListViewRelativeLayout - выводит список элементов, полученных из запроса к сервису, при загрузке экрана. Содержит следующие элементы:
CardListViewWeightObserverRelativeLayout - выводит список элементов, полученных из запроса к сервису, при каждой фиксации веса.
NavigateButtonListView - позволяет перелистывать список полученных объектов.
Card - отображает один элемент списка.
PinPadContainerRelativeLayout - контейнер для создания поиска по номеру. Должен содержать в себе следующие элементы:
PinPadTextView - текстовое поле, выводящее набранный номер.
PinPadDigit - цифра.
PinPadRemove - кнопка удаления последнего символа.
PinPadAccept - кнопка подтверждения ввода.
AbcKeyboardView - показывает клавиатуру с буквами в алфавитном порядке.
QwertyKeyboardView - показывает клавиатуру со стандартным порядком букв.
NumericKeyboardView - показывает клавиатуру с цифрами и кнопками «Сохранить» и «Закрыть».
DataViewRelativeLayout - предназначен для запроса данных по заданному url.
ClickableRelativeLayout - предназначен для выполнения действия или отправки запроса на сервер.
AcceptDialogViewRelativeLayout - отображает пользовательское диалоговое окно.
PredictionsCardListViewRelativeLayout - отображает список распознаваемых объектов.
2.3.2.1. Принцип работы с данными¶
Некоторые элементы управления поддерживают возможность получения данных, которые внутри этих элементов можно вывести произвольным образом. Работать с полученными данными можно двумя способами:
Указать напрямую нужному полю отображаемую переменную:
"text": "@{item.name}"
Объявить переменную данных и использовать её:
"text": "@{name}",
"data": {
"name": "@{item.productType}"
}
2.3.2.2. Component¶
Элемент управления, добавляющий внутрь себя разметку из указанного файла. Это позволяет разделить весь макет страницы на составляющие и описывать их по отдельности, что улучшит читаемость кода.
Пример использования:
{
"type": "Component",
"layout": "header",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_alignParentTop": "true",
"layout_alignParentRight": "true"
},
В параметре "layout" указывается, какой файл разметки должен быть внедрён внутрь компонента.
Примечание
Все файлы разметки должны быть с расширением .json, иметь один корневой элемент, но в названии встраиваемого файла расширение не указывается.
2.3.2.3. TextView¶
Элемент управления позволяет выводить произвольный текст пользователя.
Пример использования:
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"textSize": "19sp",
"textColor": "#000000",
"layout_alignParentRight": "true",
"layout_alignParentTop": "true",
"text": "Произвольный текст",
"font_family": "geometria_medium"
}
Параметр
"textColor"задает цвет текста.Параметр
"textSize"задает размер текста.
Подсказка
Для размера текста рекомендуется использовать "sp" вместо "dp" или "px".
Параметр
"text"содержит пользовательский текст.Параметр
"font_family"предназначен для изменения шрифта.
2.3.2.4. TextWeightView¶
Элемент управления выводит вес с весов в реальном времени.
Пример использования:
{
"type": "TextWeightView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"textSize": "45sp",
"format": "%.3f",
"point": "false",
"textColor": "#000000",
"layout_alignParentRight": "true",
"layout_alignParentBottom": "true",
"font_family": "geometria_medium",
"background": "#FFFFFF"
}
Параметр
"format"позволяет указать сколько знаков после запятой нужно показывать.Параметр
"point"отвечает за символ разделения целой и дробной части. Если значение"true", то используется точка, еслиfalse"- запятая.
2.3.2.5. AppCompatImageView¶
Элемент управления для вывода картинки.
Пример использования:
{
"type": "AppCompatImageView",
"layout_width": "280dp",
"layout_height": "87dp",
"layout_alignParentLeft": "true",
"layout_alignParentTop": "true",
"jpg": "$scenario/images/logo"
}
Чтобы указать, какую картинку нужно показать пользователю, нужно добавить атрибут с расширением файла изображения и указать путь к картинке.
Например, для файла /images/logo.jpeg внутри папки сценария, нужно прописать следующий параметр: "jpg": "$scenario/images/logo".
2.3.2.6. PinPadContainerRelativeLayout¶
"PinPadContainerRelativeLayout" это не просто элемент управления, а целый контейнер, отвечающий за вывод «поиска по номеру».
Элемент имеет два дополнительных параметра:
accept_action - задаёт, что должно произойти после подтверждения введённого номера.
accept_timeout - задаёт таймаут автоматического подтверждения введённого кода в миллисекундах.
Поиск по номеру состоит из таких элементов, как:
Кнопки от 0 до 9.
Кнопка удаления последнего символа.
Поля для вывода уже введённых данных.
Кнопка подтверждения ввода.
За «цифровые кнопки» отвечает элемент "PinPadDigit".
Пример использования кнопки:
{
"type": "PinPadDigit",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"id": "digit2",
"layout_below": "pinPadText",
"layout_toRightOf": "digit1",
"digit": "2",
"layout": "digit"
}
Поле "digit" указывает на то, какую цифру будет содержать кнопка.
В случае с компонентом "PinPadDigit", поле "layout" указывает на файл макета этой кнопки.
Пример использования макета кнопки приведён ниже:
{
"type": "TextView",
"layout_width": "91dp",
"layout_height": "91dp",
"gravity": "center",
"layout_margin": "8dp",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "solid",
"color": "#5AB031"
},
{
"type": "corners",
"radius": "12dp"
}
]
},
"textSize": "45sp",
"textColor": "#FFFFFF",
"font_family": "geometria_bold"
}
Кнопка с цифрой 2¶
Кнопка удаления последнего символа "PinPadRemove" будет выглядеть следующим образом:
{
"type": "PinPadRemove",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"id": "removeBtn",
"layout_alignParentLeft": "true",
"layout_below": "digit9",
"layout": "remove"
}
Разметка файла выглядит так:
{
"type": "RelativeLayout",
"layout_width": "92dp",
"layout_height": "92dp",
"layout_margin": "8dp",
"background": {
"type": "shape",
"shape": "rectangle",
"children":[
{
"type": "stroke",
"color": "#E6E6E6"
},
{
"type":"corners",
"radius": "12dp"
}
]
},
"children": [
{
"type": "AppCompatImageView",
"layout_width": "match_parent",
"layout_height": "100dp",
"scaleType": "centerInside",
"png": "mertech_left_enable"
}
]
}
Кнопка для удаления последнего символа¶
Кнопка подтверждения ввода "PinPadAccept":
{
"type": "PinPadAccept",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_toRightOf": "digit0",
"layout_below": "digit9",
"digit": "0",
"layout_object": {
"type": "TextView",
"layout_width": "91dp",
"layout_height": "91dp",
"layout_margin": "8dp",
"font_family": "geometria_bold",
"textSize": "31sp",
"textColor": "#FFFFFF",
"gravity": "center",
"text": "Ввод",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "solid",
"color": "#EC1C24"
},
{
"type": "corners",
"radius": "12dp"
}
]
}
}
}
Кнопка для подтверждения ввода¶
Поле для отображения введённой информацмм "PinPadTextView":
{
"type": "PinPadTextView",
"id": "pinPadText",
"layout_width": "306dp",
"layout_height": "135dp",
"layout_alignParentTop": "true",
"gravity": "center",
"layout_marginLeft": "8dp",
"layout_marginBottom": "15dp",
"hint": "Поиск по номеру",
"font_family": "geometria_medium",
"textSize": "50sp",
"textSizeHint": "30sp",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "corners",
"radius": "10dp"
},
{
"type": "stroke",
"color": "#CCCCCC",
"width": "2dp"
}
]
}
}
Параметр "hint" задаёт текст, который выводится поверх элемента, когда пользователем ещё ничего не введено.
Поле вывода информации¶
2.3.2.7. AbcKeyboardView¶
"AbcKeyboardView" отличается от "PinPadContainerRelativeLayout" по способу добавления.
Для буквенных клавиатур не нужно описывать каждый элемент по отдельности, а настройка дизайна осуществляется сразу для всей группы кнопок.
Пример добавления:
{
"type": "AbcKeyboardView",
"layout_width": "316dp",
"layout_height": "600dp",
"layout_alignParentRight": "true",
"layout_centerInParent": "true",
"action_startInput": {
"type": "DEEPLINK",
"data": "app://mertech.ru/scales/keyboard_products"
},
"key_layout_object": {
"type": "TextView",
"layout_width": "54dp",
"layout_height": "54dp",
"layout_marginLeft": "4dp",
"layout_marginTop": "4dp",
"layout_marginRight": "5dp",
"layout_marginBottom": "5dp",
"gravity": "center",
"textSize": "31sp",
"textColor": "#000000",
"text": "@{latter}",
"font_family": "geometria_bold",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
},
{
"type": "corners",
"radius": "6dp"
}
]
}
},
"remove_layout_object": {
"type": "LinearLayout",
"layout_width": "243dp",
"layout_height": "52dp",
"layout_margin": "4dp",
"gravity": "center",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
},
{
"type": "corners",
"radius": "6dp"
}
]
},
"children": [
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"gravity": "center",
"textSize": "30sp",
"layout_marginRight": "16dp",
"layout_marginBottom": "2dp",
"textColor": "#000000",
"text": "←",
"font_family": "geometria_bold"
},
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"gravity": "center",
"textSize": "19sp",
"textColor": "#000000",
"text": "стереть",
"font_family": "geometria_bold"
}
]
},
"text_layout_object": {
"type": "TextView",
"hint": "Поиск по названию",
"layout_width": "307dp",
"layout_height": "56dp",
"gravity": "center",
"textSize": "28sp",
"textColor": "#000000",
"font_family": "geometria_medium",
"layout_marginBottom": "14dp",
"layout_paddingLeft": "20dp",
"layout_marginLeft": "4dp",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "corners",
"radius": "5dp"
},
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
}
]
}
}
}
Описание примера:
В примере каждая буквенная кнопка клавиатуры состоит из элементов с типом "TextView".
И чтобы оформить дизайн этих кнопок, не требуется описывать их по отдельности.
Достаточно описать шаблон, по которому будут оформлены все кнопки сразу.
Шаблон текстовой кнопки присваивается параметру "key_layout_object".
Кнопка удаления последнего введённого символа представляет из себя элемент "LinearLayout"
(фактически может быть любым элементом), дизайн которого в данном примере описывается отдельно.
Описание элемента должно быть присвоено параметру "remove_layout_object".
Текстовое поле для вывода уже введенных данных состоит из элемента "TextView", описание которого нужно присвоить параметру "text_layout_object".
После того, как пользователь нажмёт на одну из кнопок, выполнится действие "action_startInput".
В случае сценария «Mertech», откроется окно "keyboard_products", на котором добавлена "AbcKeyboardView" и предпросмотр найденных товаров.
Поля свойственные для клавиатур:
"sorted_grid"- указывается id элемента"CardListViewRelativeLayout", в который выводится результат поиска."key_layout_object"- указывается дизайн для буквенной кнопки, важно, чтобы внутри элемента была переменная"@{latter}", для подстановки конкретной буквы."remove_layout_object"- указывается дизайн для кнопки удаления последней буквы."text_layout_object"- указывается дизайн для текстового поля, для отображения вводимых символов (должен иметь тип"TextView")."action_startInput"- указывается Action, который выполняется при начале ввода."action_clearInput"- указывается Action, который выполняется при очистке всего поиска, то есть при удалении последнего символа."start_search"- указывается начальный текст для поиска."prefix_data_url"- указывается url данных, который используется для получения элементов для"CardListViewRelativeLayout"без фильтрации, то есть если указан префикс"prefix_data_url": "app://mertech.ru/scales/products?order_by=name",``(все товары отсортированные по имени) и первая буква для поиска была введена "а", то в итоге данные будут загружаться относительно url: ``"app://mertech.ru/scales/products?order_by=name&q=а"(все товары отсортированные по имени и содеражщие букву «а»). Если данное поле не указано, то в качестве префикса выбирается"data_url"у"CardListViewRelativeLayout".
2.3.2.8. QwertyKeyboardView¶
Клавиатура "QwertyKeyboardView" по способу добавления очень похожа на клавиатуру "AbcKeyboardView".
Пример добавления клавиатуры "QwertyKeyboardView":
{
"type": "QwertyKeyboardView",
"layout_width": "935dp",
"data": {
"search": "@{search}"
},
"sorted_grid": "ProductGrid",
"start_search": "@{search}",
"prefix_data_url": "app://mertech.ru/scales/products?order_by=name",
"layout_height": "600dp",
"layout_marginTop": "31dp",
"layout_marginLeft": "44dp",
"layout_alignParentLeft": "true",
"layout_alignParentTop": "true",
"key_layout_object": {
"type": "TextView",
"layout_width": "59dp",
"layout_height": "59dp",
"layout_marginLeft": "5dp",
"layout_marginTop": "5dp",
"layout_marginRight": "5dp",
"layout_marginBottom": "5dp",
"gravity": "center",
"textSize": "33sp",
"textColor": "#000000",
"text": "@{latter}",
"font_family": "geometria_bold",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
},
{
"type": "corners",
"radius": "8dp"
}
]
}
},
"remove_layout_object": {
"type": "LinearLayout",
"layout_width": "197dp",
"layout_height": "59dp",
"layout_marginLeft": "5dp",
"layout_marginTop": "5dp",
"layout_marginRight": "5dp",
"layout_marginBottom": "5dp",
"gravity": "center",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
},
{
"type": "corners",
"radius": "6dp"
}
]
},
"children": [
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"gravity": "center",
"textSize": "30sp",
"layout_marginRight": "16dp",
"layout_marginBottom": "2dp",
"textColor": "#000000",
"text": "←",
"font_family": "geometria_bold"
},
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"gravity": "center",
"textSize": "19sp",
"textColor": "#000000",
"text": "стереть",
"font_family": "geometria_bold"
}
]
},
"space_layout_object": {
"type": "LinearLayout",
"layout_width": "404dp",
"layout_height": "59dp",
"layout_margin": "5dp",
"gravity": "center",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
},
{
"type": "corners",
"radius": "6dp"
}
]
}
},
"text_layout_object": {
"type": "TextView",
"hint": "Поиск по названию",
"layout_width": "455dp",
"layout_height": "75dp",
"gravity": "center",
"textSize": "28sp",
"textColor": "#000000",
"font_family": "geometria_medium",
"layout_marginBottom": "18dp",
"layout_paddingLeft": "20dp",
"layout_marginLeft": "4dp",
"input": "textCapWords",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "corners",
"radius": "10dp"
},
{
"type": "stroke",
"color": "#CCCCCC",
"width": "2dp"
}
]
}
}
}
В этот элемент добавился новый параметр "space_layout_object", отвечающий за отрисовку кнопки «Пробел».
Подсказка
Чтобы вывести список продуктов, подходящих под условия поиска, можно воспользоваться элементом "CardListViewRelativeLayout".
2.3.2.9. NumericKeyboardView¶
Клавиатура "NumericKeyboadView" представляет окно с тремя связанными между собой областями: "header_image", "keyboard_num" и поле, включающеее в себя кнопки "ACCEPT_BUTTON" и "CANCEL_BUTTON" («Сохранить» и «Закрыть» соответственно).
Пример добавления клавиатуры "NumericKeyboardView":
{
"type": "RelativeLayout",
"layout_width": "match_parent",
"layout_height": "wrap_content",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "solid",
"color": "#FFFFFF"
},
{
"type": "corners",
"radius": "20dp"
}
]
},
"children": [
{
"type": "AppCompatImageView",
"id": "header_image",
"layout_width": "380dp",
"layout_height": "117dp",
"layout_alignParentLeft": "true",
"layout_alignParentTop": "true",
"jpg": "$scenario/images/logo",
"action_long": {
"type": "GO_TO_SERVICE"
},
"grid_next_page": "ProductGrid",
"layout_marginTop": "16dp"
},
{
"type": "NumericKeyboardView",
"id": "keyboard_num",
"layout_width": "316dp",
"layout_height": "400dp",
"start_search": "@{dialogDataValue}",
"mask": "@{mask}",
"layout_marginTop": "16dp",
"layout_centerHorizontal": "true",
"layout_below": "header_image",
"action_startInput": {
"type": "DEEPLINK",
"data": "app://mertech.ru/scales/keyboard_products"
},
"key_layout_object": {
"type": "TextView",
"layout_width": "94dp",
"layout_height": "74dp",
"layout_marginLeft": "6dp",
"layout_marginTop": "6dp",
"layout_marginRight": "7dp",
"layout_marginBottom": "7dp",
"gravity": "center",
"textSize": "37sp",
"textColor": "#000000",
"text": "@{latter}",
"font_family": "geometria_bold",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
},
{
"type": "corners",
"radius": "6dp"
}
]
}
},
"remove_layout_object": {
"type": "LinearLayout",
"layout_width": "180dp",
"layout_height": "52dp",
"layout_margin": "4dp",
"gravity": "center",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
},
{
"type": "corners",
"radius": "6dp"
}
]
},
"children": [
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"gravity": "center",
"textSize": "30sp",
"layout_marginRight": "16dp",
"layout_marginBottom": "2dp",
"textColor": "#000000",
"text": "←",
"font_family": "geometria_bold"
},
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"gravity": "center",
"textSize": "19sp",
"textColor": "#000000",
"text": "@{param}",
"font_family": "geometria_bold"
}
]
},
"zero_layout_object": {
"type": "LinearLayout",
"layout_width": "52dp",
"layout_height": "52dp",
"layout_margin": "4dp",
"gravity": "center",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
},
{
"type": "corners",
"radius": "6dp"
}
]
},
"children": [
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"gravity": "center",
"textSize": "30sp",
"layout_marginRight": "2dp",
"layout_marginBottom": "2dp",
"textColor": "#000000",
"text": "0",
"font_family": "geometria_bold"
}
]
},
"dot_layout_object": {
"type": "LinearLayout",
"layout_width": "52dp",
"layout_height": "52dp",
"layout_margin": "4dp",
"gravity": "center",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
},
{
"type": "corners",
"radius": "6dp"
}
]
},
"children": [
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"gravity": "center",
"textSize": "30sp",
"layout_marginRight": "2dp",
"layout_marginBottom": "2dp",
"textColor": "#000000",
"text": ".",
"font_family": "geometria_bold"
}
]
},
"text_layout_object": {
"type": "TextView",
"id": "TEXT_VALUE_VIEW",
"hint": "",
"layout_width": "307dp",
"layout_height": "56dp",
"gravity": "center",
"textSize": "28sp",
"textColor": "#000000",
"font_family": "geometria_medium",
"layout_marginBottom": "14dp",
"layout_paddingLeft": "20dp",
"layout_marginLeft": "4dp",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "corners",
"radius": "5dp"
},
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
}
]
}
}
},
{
"type": "LinearLayout",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_below": "keyboard_num",
"layout_centerHorizontal": "true",
"orientation": "horizontal",
"children": [
{
"type": "TextView",
"id": "ACCEPT_BUTTON",
"text": "Сохранить",
"layout_width": "170dp",
"layout_height": "56dp",
"gravity": "center",
"textSize": "28sp",
"textColor": "#000000",
"font_family": "geometria_medium",
"layout_marginBottom": "14dp",
"layout_paddingLeft": "20dp",
"layout_marginLeft": "4dp",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "corners",
"radius": "5dp"
},
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
}
]
}
},
{
"type": "TextView",
"id": "CANCEL_BUTTON",
"text": "Закрыть",
"layout_width": "170dp",
"layout_height": "56dp",
"gravity": "center",
"textSize": "28sp",
"textColor": "#000000",
"font_family": "geometria_medium",
"layout_toRightOf": "ACCEPT_BUTTON",
"layout_marginBottom": "14dp",
"layout_paddingLeft": "20dp",
"layout_marginLeft": "4dp",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "corners",
"radius": "5dp"
},
{
"type": "stroke",
"color": "#5AB031",
"width": "2dp"
}
]
}
}
]
}
]
}
Описание примера:
"key_layout_object"- указывает дизайн для кнопок от 1 до 9."remove_layout_object"- указывает дизайн только для кнопки посимвольного удаления."zero_layout_object"- отдельно указывает дизайн для кнопки 0."dot_layout_object"- указывает дизайн для точки."text_layout_object"- указывает дизайн для текстового поля, для отображения текстовых символов (должен иметь тип"TextView")."decimal_places"- задаёт максимальное количество знаков после запятой.
2.3.2.10. CardListViewRelativeLayout¶
"CardListViewRelativeLayout" предназначен для вывода списка элементов, каждый из которых можно оформить, как отдельную карточку.
Внутри "CardListViewRelativeLayout" необходимо отдельно описать каждый внутренний элемент с типом "Card" (по синтаксису и поведению копирует элемент "Component").
Пример использования взят из сценария «Mertech» и работает совместно с "QwertyKeyboardView", описанном выше.
{
"type": "CardListViewRelativeLayout",
"layout_width": "match_parent",
"layout_marginBottom": "107dp",
"id": "ProductGrid",
"data-url": "@{fn:format('app://mertech.ru/scales/products?order_by=name&q=%s', @{search})}",
"layout_height": "150dp",
"layout_alignParentLeft": "true",
"layout_alignParentBottom": "true",
"children": [
{
"type": "NavigateButtonListView",
"id": "navigate_left",
"layout_width": "94dp",
"layout_height": "94dp",
"textSize": "40sp",
"textColor": "#0000FF",
"cardListView": "ProductGrid",
"layout_alignParentBottom": "true",
"layout_alignParentLeft": "true",
"layout_marginBottom": "10dp",
"layout_marginLeft": "50dp",
"font_family": "geometria_medium",
"enableImageSrc": "mertech_left_enable.png",
"disableImageSrc": "mertech_left_enable.png",
"listViewAction": "PREV"
},
{
"type": "Card",
"layout": "product",
"id": "several1",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_alignParentLeft": "true",
"layout_alignParentBottom": "true",
"layout_marginRight": "8dp",
"layout_marginLeft": "205dp",
"background": "#FFFFFF"
},
{
"type": "Card",
"layout": "product",
"id": "several2",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_alignParentBottom": "true",
"layout_marginRight": "8dp",
"background": "#FFFFFF",
"layout_toRightOf": "several1"
},
{
"type": "Card",
"layout": "product",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_alignParentBottom": "true",
"layout_marginRight": "8dp",
"background": "#FFFFFF",
"layout_toRightOf": "several2",
"id": "several3"
},
{
"type": "Card",
"layout": "product",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"layout_alignParentBottom": "true",
"background": "#FFFFFF",
"layout_toRightOf": "several3",
"id": "several4"
},
{
"type": "NavigateButtonListView",
"layout_width": "94dp",
"layout_height": "94dp",
"textSize": "40sp",
"textColor": "#0000FF",
"cardListView": "ProductGrid",
"layout_marginBottom": "10dp",
"layout_marginRight": "50dp",
"layout_alignParentBottom": "true",
"layout_alignParentRight": "true",
"font_family": "geometria_medium",
"enableImageSrc": "mertech_right_enable.png",
"disableImageSrc": "mertech_right_enable.png",
"listViewAction": "NEXT"
}
]
}
Параметр "data-url" указывает на то, какие данные нужно получить.
Список товаров
"app://mertech.ru/scales/products"
Поддерживаемые дополнительные параметры для запроса товаров:
Сортировка по имени:
"order_by=name"Товары для конкретной категории:
"category=[КОНКРЕТНАЯ КАТЕГОРИЯ]"Товары, имя которых содержит текст:
"q=[КОНКРЕТНЫЙ ТЕКСТ]"
Пример использования: "@{fn:format('app://mertech.ru/scales/products?order_by=name&q=%s&category=%s', @{search}, @{category})}"
Подобная конструкция формирует обычную ссылку с автоматически добавленными значениями параметров "q" и "category".
Значения будут подставлены в места, обозначенные символами "%s" из переменных "@{search}" и "@{category}".
Переменная "@{search}" доступна из "AbcKeyboardView" и "QwertyKeyboardView".
Переменная "@{category}" является пользовательской и передаётся из другого окна.
Подсказка
Значением должен быть идентификатор категории.
Связь с данными.
Внутри элемента "CardListViewRelativeLayout", отображающего список товаров, можно вывести следующую информацию для каждого элемента:
"id"- идентификатор товара в базе данных."plu"- ПЛУ товара."name"- название товара."price"- цена товара."tare"- значение тары, если имеется."information"- краткая информация о товаре, если есть."category"- идентификатор категории товара.
Пример использования:
{
"type": "AppCompatImageView",
"layout_width": "143dp",
"layout_height": "wrap_content",
"layout_margin": "4dp",
"scaleType": "centerInside",
"jpg": "@{fn:format('/images/product_plu%s', @{item.plu})}"
},
{
"type": "TextView",
"layout_width": "wrap_content",
"layout_height": "30dp",
"layout_alignParentLeft": "true",
"layout_alignParentTop": "true",
"textStyle": "bold",
"textSize": "25sp",
"text": "@{fn:format(' %s ', @{item.plu})}"
},
{
"type": "TextView",
"layout_width": "match_parent",
"layout_height": "30dp",
"layout_alignParentBottom": "true",
"gravity": "center",
"textSize": "14sp",
"text": "@{name}",
"data": {
"name": "@{item.name}"
}
}
Данный пример позволяет вывести три элемента и наполнить их данными товара. Первый элемент выведет .jpg картинку из папки «images» с названием «product_plu%s», где вместо «%s» будет подставлен номер товара. Другие два элемента выведут текст с номером товара и его именем.
Список категорий
"app://mertech.ru/scales/categories"
Внутри элемента "CardListViewRelativeLayout", отображающего список категорий, можно вывести следующую информацию:
"id"- идентификатор категории в базе данных.""name"- название категории.
Список распознаваний
"app://mertech.ru/scales/products/predict?limit=6"
Доступная информация для каждого элемента списка:
"id"- идентификатор товара в базе данных."plu"- ПЛУ товара."name"- название товара."price"- цена товара."tare"- значение тары, если имеется."information"- краткая информация о товаре, если есть."category"- идентификатор категории товара.
Список избранных товаров
"app://mertech.ru/scales/products/favorites"
Доступная информация для каждого элемента списка:
"id"- идентификатор товара в базе данных."plu"- ПЛУ товара."name"- название товара."price"- цена товара."tare"- значение тары, если имеется."information"- краткая информация о товаре, если есть."category"- идентификатор категории товара.
2.3.2.11. CardListViewWeightObserverRelativeLayout¶
Совпадает по функционалу с контролом "CardListViewRelativeLayout", но данные с сервиса запрашиваются при каждой фиксации веса.
2.3.2.13. Card¶
По функционалу схож с контролом "Component", но используется исключительно с контролами для отображения списка: "CardListViewRelativeLayout" или "CardListViewWeightObserverRelativeLayout".
2.3.2.14. DataViewRelativeLayout¶
Предназначен для запроса данных по заданному url. Все дочерние элементы управления получают возможность работать с данными, полученными из этого контрола.
Пример использования:
{
"type": "DataViewRelativeLayout",
"data-url": "app://mertech.ru/scales/weighing/product/current",
"layout_width": "wrap_content",
"layout_height": "wrap_content",
"background": {
"type": "shape",
"shape": "rectangle",
},
"loading-layout": {
"type": "TextView",
"layout_width": "match_parent",
"layout_height": "match_parent",
"gravity": "center",
"textSize": "19sp",
"textColor": "#666666",
"text": "Загрузка...",
"font_family": "geometria_bold"
},
"children": [
{
"type": "TextView",
"layout_width": "match_parent",
"layout_height": "wrap_content",
"text": "@{packer.name}",
},
]
}
Описание аттрибутов:
"data-url"- указывает на то, какие данные нужно получить."link-to"- включает в себя 4 различных значения: none (ничего не произошло), StandartWeight (на весах появился объект), IncorrectWeight (вес объекта выходит за пределы минимального и максимального ограничений), FixedWeight (срабатывает после промежутка времени, за которое весы точно и без колебаний зафиксируют вес)."loading-layout"- экран загрузки для первого срабатывания весов.
2.3.2.15. ClickableRelativeLayout¶
"CliackbleRelativeLayout" предназначен для выполнения действия или отправки запроса на сервер.
Пример использования:
{
"type": "ClickableRelativeLayout",
"id": "printButton",
"layout_width": "wrap_content",
"layout_height": "match_parent",
"layout_alignParentTop": "true",
"layout_toEndOf": "returnButton",
"update-dataview": "True",
"gravity": "center",
"orientation": "horizontal",
"action-url": "app://mertech.ru/scales/weighing/product/print",
"children":[
{
"type": "TextView",
"layout_width": "160dp",
"layout_height": "match_parent",
"gravity": "center",
"textSize": "25sp",
"textStyle": "bold",
"textColor": "#FFFFFF",
"text": "Печать",
"background": {
"type": "shape",
"shape": "rectangle",
"children": [
{
"type": "solid",
"color": "#e3000f"
},
{
"type": "corners",
"radius": "7dp"
}
]
}
}
]
}
Описание аттрибутов:
"action"- действие, выполняемое после нажатия на сам контрол или его дочерние."action-url"- строка выполняемого запроса."update-dataview"- булево значение, обозначающее нужно ли отправить родительской DataView запрос на обновление.
2.3.2.16. AcceptDialogViewRelativeLayout¶
"AcceptDialogViewRelativeLayout" служит для отображения пользовательского диалогового окна.
Может помочь в реализации инструмента редактирования данных.
Нажатие на содержимое контрола выводит диалоговое окно с пользовательским интерфейсом, описанным в файле сценария.
Файл укзыватся в атрибуте "dialog-layout".
Результат работы диалогового окна можно обработать, добавив в макет пользовательского интерфейса кнопки подтверждения ("TextView" с идентификатором "ACCEPT_BUTTON") и отмены ("TextView" с идентификатором "CANCEL_BUTTON").
С помощью элемента "AcceptDialogViewRelativeLayout" можно, например, реализовать функционал редактирования параметра товара в режиме фасовки.
Элемент с идентификатором «TEXT_VALUE_VIEW» должен быть типа «TextView» и выводит текст, переданный в атрибуте "data-value".
Нажатие на элемент с идентификатором «ACCEPT_BUTTON» выполнит утвердительное действие или запрос к сервису, указанные в атрибутах "action-url" и "action-accept".
Если запрос содержит «[data-text..]», то вместо этого значения будет подставлен текст из элемента с идентификатором «TEXT_VALUE_VIEW».
Нажатие на элемент с идентификатором «CANCEL_BUTTON» выполнит отрицательное действие или запрос к сервису, указанные в атрибутах "dismiss-url" и "action-dismiss".
Пример использования:
{
"type": "AcceptDialogViewRelativeLayout",
"dialog-layout": "keyboard_num.json",
"data-value": "@{fn:format('%s', @{scaleTare})}",
"data-key": "scaleTare",
"layout_width": "110dp",
"layout_height": "match_parent",
"action-url": "app://mertech.ru/scales/weighing/product/set-field?field=scaleTare&value=[accept-dialog-value]",
"layout_toEndOf": "taraTitle",
"layout_marginLeft": "15dp",
"layout_marginRight": "15dp",
"dialog-layout-parameters": {
"@": {
"data": "decimal_places=3"
}
},
"children": [
{
"type": "TextView",
"layout_height": "match_parent",
"layout_width": "match_parent",
"gravity": "center_vertical",
"textSize": "15sp",
"textColor": "#606060",
"text": "@{fn:format('%s кг', @{scaleTare})}"
}
]
}
Описание аттрибутов:
"data-key"и"data-value"- два параметра, значения которых доступны внутри разметки layout."mask"- позволяет задать маску выводимых данных в поле с идентификатором «TEXT_VALUE_VIEW»."dialog-layout"- json-файл, описывающий внешний вид диалогового окна."dialog-layout-parameters"- позволяет передать список параметров со значениями в разметку, указанную в"dialog-layout". Параметры указываются в формате"key1=value1&key2=value2"."action-accept"- действие, выполняющееся при нажатии на кнопку с идентификатором «ACCEPT_BUTTON»."action-url"- строка запроса, выполняющаяся после нажатия на кнопку с идентификатором «ACCEPT_BUTTON»."dismiss-url"- строка запроса, выполняющаяся после нажатия на кнопку с идентификатором «CANCEL_BUTTON»."action-dismis"- действие, выполняющееся при нажатии на кнопку с идентификатором «CANCEL_BUTTON»."dialog-layout-parameters"- количество допустимых знаков после «.» для ограничения ввода десятичных чисел.
2.3.2.17. AcceptDialogViewRelativeLayout¶
"AcceptDialogViewRelativeLayout" служит для отображения списка распознанных объектов.
Описание аттрибутов:
"use_progress_bar"- позволяет включить прогресс-бар в макете."pb_color"- цвет прогресс-бара."pb_type"- тип прогресс-бара (CURVES или PUZZLE)."pb_min_side_squares"- минимальное количество квадратов в прогресс-баре."pb_use_fade_in_fade_out"- позволяет включить анимацию прогресс-бара."pb_fade_in_fade_out_duration"- длительность анимации прогресс-бара.
{
"type": "PredictionsCardListViewRelativeLayout",
"id": "ProductGrid",
"backgroundWithContent": "#27292d",
"use_progress_bar": "true",
"pb_min_side_squares": "12",
"pb_use_fade_in_fade_out": "true",
"pb_fade_in_fade_out_duration": "200",
"pb_color": "#386e1e",
"pb_type": "CURVES",
"children": [
{
"type": "RelativeLayout",
"children": [
{
"type": "TextView",
"text": "@{fn:format(' %s ', @{item.plu})}"
},
{
"type": "TextView",
"text": "@{item.name}"
}
]
},
{
"type": "RelativeLayout",
"children": [
{
"type": "TextView",
"text": "@{fn:format(' %s ', @{item.plu})}"
},
{
"type": "TextView",
"text": "@{item.name}"
}
]
}
]
}
Доступная информация для каждого элемента списка:
"id"- идентификатор товара в базе данных."code"- код товара."plu"- ПЛУ товара."buttonNumber"- номер кнопки."name"- название товара."price"- цена товара."categoryId"- идентификатор категории, к которой принадлежит товар."categoryName"- название категории, к которой принадлежит товар.