Готовые элементы управления """"""""""""""""""""""""""" Поддерживаемые элементы управления: * **Component** - встраивает внутрь себя макеты из других файлов. * **TextView** - показывает пользовательский текст. Можно оформить как кнопку. * **TextWeightView** - показывает текущий вес с весов. * **AppCompatImageView** - выводит пользовательское изображение. * **CardListViewRelativeLayout** - выводит список элементов, полученных из запроса к сервису, при загрузке экрана. Содержит следующие элементы: * **CardListViewWeightObserverRelativeLayout** - выводит список элементов, полученных из запроса к сервису, при каждой фиксации веса. * **NavigateButtonListView** - позволяет перелистывать список полученных объектов. * **Card** - отображает один элемент списка. * **PinPadContainerRelativeLayout** - контейнер для создания поиска по номеру. Должен содержать в себе следующие элементы: * **PinPadTextView** - текстовое поле, выводящее набранный номер. * **PinPadDigit** - цифра. * **PinPadRemove** - кнопка удаления последнего символа. * **PinPadAccept** - кнопка подтверждения ввода. * **AbcKeyboardView** - показывает клавиатуру с буквами в алфавитном порядке. * **QwertyKeyboardView** - показывает клавиатуру со стандартным порядком букв. * **NumericKeyboardView** - показывает клавиатуру с цифрами и кнопками "Сохранить" и "Закрыть". * **DataViewRelativeLayout** - предназначен для запроса данных по заданному url. * **ClickableRelativeLayout** - предназначен для выполнения действия или отправки запроса на сервер. * **AcceptDialogViewRelativeLayout** - отображает пользовательское диалоговое окно. * **PredictionsCardListViewRelativeLayout** - отображает список распознаваемых объектов. Принцип работы с данными ^^^^^^^^^^^^^^^^^^^^^^^^ Некоторые элементы управления поддерживают возможность получения данных, которые внутри этих элементов можно вывести произвольным образом. Работать с полученными данными можно двумя способами: 1. Указать напрямую нужному полю отображаемую переменную: .. code-block:: json "text": "@{item.name}" 2. Объявить переменную данных и использовать её: .. code-block:: json "text": "@{name}", "data": { "name": "@{item.productType}" } Component ^^^^^^^^^ Элемент управления, добавляющий внутрь себя разметку из указанного файла. Это позволяет разделить весь макет страницы на составляющие и описывать их по отдельности, что улучшит читаемость кода. Пример использования: .. code-block:: json { "type": "Component", "layout": "header", "layout_width": "wrap_content", "layout_height": "wrap_content", "layout_alignParentTop": "true", "layout_alignParentRight": "true" }, В параметре ``"layout"`` указывается, какой файл разметки должен быть внедрён внутрь компонента. .. note:: Все файлы разметки должны быть с расширением .json, иметь один корневой элемент, но в названии встраиваемого файла расширение не указывается. TextView ^^^^^^^^ Элемент управления позволяет выводить произвольный текст пользователя. Пример использования: .. code-block:: json { "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"`` задает размер текста. .. hint:: Для размера текста рекомендуется использовать ``"sp"`` вместо ``"dp"`` или ``"px"``. * Параметр ``"text"`` содержит пользовательский текст. * Параметр ``"font_family"`` предназначен для изменения шрифта. TextWeightView ^^^^^^^^^^^^^^ Элемент управления выводит вес с весов в реальном времени. Пример использования: .. code-block:: json { "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"`` - запятая. AppCompatImageView ^^^^^^^^^^^^^^^^^^ Элемент управления для вывода картинки. Пример использования: .. code-block:: json { "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"``. PinPadContainerRelativeLayout ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ``"PinPadContainerRelativeLayout"`` это не просто элемент управления, а целый контейнер, отвечающий за вывод "поиска по номеру". Элемент имеет два дополнительных параметра: * **accept_action** - задаёт, что должно произойти после подтверждения введённого номера. * **accept_timeout** - задаёт таймаут автоматического подтверждения введённого кода в миллисекундах. Поиск по номеру состоит из таких элементов, как: * Кнопки от 0 до 9. * Кнопка удаления последнего символа. * Поля для вывода уже введённых данных. * Кнопка подтверждения ввода. За **"цифровые кнопки"** отвечает элемент ``"PinPadDigit"``. Пример использования кнопки: .. code-block:: json { "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"`` указывает на файл макета этой кнопки. Пример использования макета кнопки приведён ниже: .. code-block:: json { "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" } .. figure:: ../../Сценарии/Создание/picture/btn_2.png :scale: 100 % :align: center Кнопка с цифрой 2 **Кнопка удаления последнего символа** ``"PinPadRemove"`` будет выглядеть следующим образом: .. code-block:: json { "type": "PinPadRemove", "layout_width": "wrap_content", "layout_height": "wrap_content", "id": "removeBtn", "layout_alignParentLeft": "true", "layout_below": "digit9", "layout": "remove" } Разметка файла выглядит так: .. code-block:: json { "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" } ] } .. figure:: ../../Сценарии/Создание/picture/btn_rem.png :scale: 100 % :align: center Кнопка для удаления последнего символа **Кнопка подтверждения ввода** ``"PinPadAccept"``: .. code-block:: json { "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" } ] } } } .. figure:: ../../Сценарии/Создание/picture/btn_enter.png :scale: 100 % :align: center Кнопка для подтверждения ввода **Поле для отображения введённой информацмм** ``"PinPadTextView"``: .. code-block:: json { "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"`` задаёт текст, который выводится поверх элемента, когда пользователем ещё ничего не введено. .. figure:: ../../Сценарии/Создание/picture/pinpad_text.png :scale: 100 % :align: center Поле вывода информации AbcKeyboardView ^^^^^^^^^^^^^^^ ``"AbcKeyboardView"`` отличается от ``"PinPadContainerRelativeLayout"`` по способу добавления. Для буквенных клавиатур не нужно описывать каждый элемент по отдельности, а настройка дизайна осуществляется сразу для всей группы кнопок. Пример добавления: .. code-block:: json { "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"``. QwertyKeyboardView ^^^^^^^^^^^^^^^^^^ Клавиатура ``"QwertyKeyboardView"`` по способу добавления очень похожа на клавиатуру ``"AbcKeyboardView"``. Пример добавления клавиатуры ``"QwertyKeyboardView"``: .. code-block:: json { "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"``, отвечающий за отрисовку кнопки "Пробел". .. hint:: Чтобы вывести список продуктов, подходящих под условия поиска, можно воспользоваться элементом ``"CardListViewRelativeLayout"``. NumericKeyboardView ^^^^^^^^^^^^^^^^^^^ Клавиатура ``"NumericKeyboadView"`` представляет окно с тремя связанными между собой областями: ``"header_image"``, ``"keyboard_num"`` и поле, включающеее в себя кнопки ``"ACCEPT_BUTTON"`` и ``"CANCEL_BUTTON"`` ("Сохранить" и "Закрыть" соответственно). Пример добавления клавиатуры ``"NumericKeyboardView"``: .. code-block:: json { "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"`` - задаёт максимальное количество знаков после запятой. CardListViewRelativeLayout ^^^^^^^^^^^^^^^^^^^^^^^^^^ ``"CardListViewRelativeLayout"`` предназначен для вывода списка элементов, каждый из которых можно оформить, как отдельную карточку. Внутри ``"CardListViewRelativeLayout"`` необходимо отдельно описать каждый внутренний элемент с типом ``"Card"`` (по синтаксису и поведению копирует элемент ``"Component"``). Пример использования взят из сценария "Mertech" и работает совместно с ``"QwertyKeyboardView"``, описанном выше. .. code-block:: json { "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}"`` является пользовательской и передаётся из другого окна. .. hint:: Значением должен быть идентификатор категории. Связь с данными. Внутри элемента ``"CardListViewRelativeLayout"``, отображающего список товаров, можно вывести следующую информацию для каждого элемента: * ``"id"`` - идентификатор товара в базе данных. * ``"plu"`` - ПЛУ товара. * ``"name"`` - название товара. * ``"price"`` - цена товара. * ``"tare"`` - значение тары, если имеется. * ``"information"`` - краткая информация о товаре, если есть. * ``"category"`` - идентификатор категории товара. Пример использования: .. code-block:: json { "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"`` - идентификатор категории товара. CardListViewWeightObserverRelativeLayout ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Совпадает по функционалу с контролом ``"CardListViewRelativeLayout"``, но данные с сервиса запрашиваются при каждой фиксации веса. NavigateButtonListView ^^^^^^^^^^^^^^^^^^^^^^ За навигацию между элементами, не попавшими на "первый экран" отвечает элемента ``"NavigateButtonListView"``. Пример использования: .. code-block:: json { "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" } Описание аттрибутов: * ``"cardListView"`` - id для списка элементов ``"CardListViewRelativeLayout"``. * ``"listViewAction"`` - отвечает за ориентацию навигации. Возможные варианты: ``"PREV"`` и ``"NEXT"``. Card ^^^^ По функционалу схож с контролом ``"Component"``, но используется исключительно с контролами для отображения списка: ``"CardListViewRelativeLayout"`` или ``"CardListViewWeightObserverRelativeLayout"``. DataViewRelativeLayout ^^^^^^^^^^^^^^^^^^^^^^ Предназначен для запроса данных по заданному url. Все дочерние элементы управления получают возможность работать с данными, полученными из этого контрола. Пример использования: .. code-block:: json { "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"`` - экран загрузки для первого срабатывания весов. ClickableRelativeLayout ^^^^^^^^^^^^^^^^^^^^^^^ ``"CliackbleRelativeLayout"`` предназначен для выполнения действия или отправки запроса на сервер. Пример использования: .. code-block:: json { "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** запрос на обновление. 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"``. Пример использования: .. code-block:: json { "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"`` - количество допустимых знаков после "." для ограничения ввода десятичных чисел. 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"`` - длительность анимации прогресс-бара. .. code-block:: json { "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"`` - название категории, к которой принадлежит товар.