Все элементы разметки имеют обязательный параметр "type". Константа в значении этого параметра определяет способ отображения элемента. Список возможных элементов - ниже. Элемент без type или с неизвестным type игнорируются, также игнорируются все вложенные элементы.
Элементы с типом "row" и "col" являются контейнерами т.е. содержат другие элементы в массиве "items". Вложенные элементы отображаются внутри контейнера горизонтально или вертикально соответственно.
Некоторые свойства элементов разметки наследуются. Например если контейнер верхнего уровня определяет цвет фона, а нижнего уровня - нет, то в контейнере нижнего уровня по умолчанию будет отображаться тот же цвет фона что и в контейнере верхнего уровня.
Если в описании элемента разметки не задано какое-нибудь свойство (например отступ, положение и т.п.) то принимается по умолчанию то значение, что подразумевается в стандартной разметке для данной платформы.
Числовые значения свойств элементов разметки - относительные величины, для каждой платформы максимально соответствующие пикселю.
row
Контейнер с горизонтальным расположением элементов.
col
Контейнер с вертикальным расположением элементов. Корень дерева элементов всегда col.
text
Нередактируемое текстовое поле.
edit
Редактируемое текстовое поле.
img
Изображение.
check
Единичный элемент выбора true/false. На текущий момент val может быть и булеаном и строкой.
radio
Элемент выбора одного из группы. При отправке формы значением является выбранный элемент или пустая строка, если ничего не выбрано
select
Элемент выбора одного из выпадающего списка. При отправке формы значением является выбранный элемент.
completeselect
Элемент выбора одного из выпадающего списка. Допускает ввод значения или выбор из вариантов. Набор вариантов меняется по мере ввода.
После изменения длины введённого значения (не раньше чем после ввода 3 символа), (не чаще чем раз в 2 секунды) выполняется отправка на сервер заполняемой формы, при чем в model присутствуют только поле, которое заполняется. Если у поля есть связанное (параметр relative), оно посылается тоже. В model отправляемой формы также присутствует поле "acomplete", в котором указано имя редактируемого поля.
Асинхронный ответ будет получен как невизуальная форма с классом .acomplete.sender. В model этой формы вернётся поле с именем редактируемого поля и введённым на момент запроса значением и новым атрибутом vars для этого поля. LinkId этой формы будет равен packetId первоначальной формы, как и при обычном обновлении формы.
button
Кнопка. Может быть несколько кнопок на форме.
У этого элемента может быть свойство action - тип объект, может быть не задано.
Если action не задано - при нажатии кнопки клиент-приложение должен послать ключ - name кнопки, а значение - val кнопки. Не нажатые кнопки клиент-приложением не посылается вообще. Если хотите чтобы значением отсылалось не текст кнопки - используйте title для отображения текста и отдельно val для отсылки значения при вводе формы.
Если action задано - поведение описано по свойству action.
loader
Компонент предварительной загрузки ресурсов для сложных форм (игры, насыщенные формы предприятий). Внедряется в предидущую форму бизнес-процесса. Содержит список url для загрузки в кэш и (опционально) имя класса формы, которую нужно вызвать по окончании загрузки.
timer
Компонент для отображения процесса с заданной продолжительностью. В значении атрибута val указывается время ожидания в секундах. Компонент визуализирует истечение времени от указанного до 0 и выполняет action при достижении 0
map
Компонент для выбора координат по карте. Отображается в виде кнопки. Надпись на кнопке перед выбором "Выбрать". После выбора надпись устанавливается значением title, полученным с сервера. Выбранное значение в формате lat,lon помещается в поле val элемента. По клику по кнопке отображается карта в полноэкранном режиме. Если переданы элементы vars, они отображаются маркерами на карте.
tarea
Компонент для ввода многострочного текста. По умолчанию отображается как многострочное поле ввода, число строк определяется платформой. При вводе большего количества строк появляется скролл.
web (not implemented)
WebView внутри нативной формы..
Свойства которые наследуются от родителя к детям, явно помечены коричневым цветом.
bgfill
Константа, определяющее поведение фонового изображения. Принимает варианты true (растянуть) и false (центрировать) По умолчанию false.
name
Имя элемента формы. Используется для передачи на сервер данных из формы в ответной форме. Если параметр не задан, то значение элемента на сервер не передаётся.
bg
Цвет фона (всегда hex вида #a3fc1c) или ссылка на фоновое изображение (всегда вида http...). По умолчанию прозрачный.
relative
Имя элемента от которого засисит данный элемент. При наличии данного параметра элемент активируется только после ввода данных в элемент указанный в relative. Если тип элемента completeselect - в запросе новых вариантов выбора отправляется значение relative-элемента вместе с значением текущего элемента.
val
Значение элемента (текст в строке или поле ввода, true/false в check или значение "v" выбранного элемента в radio или select). По умолчанию равно "".
title
Надпись на элементе. Если не задано, выводится значение val. Пока можно использовать только для type="button","check" По умолчанию не задано.
hint
Подсказка в поле ввода. По умолчанию равно "".
Также может быть использовано для картинок в качестве pop-up подсказки.
size
Размер шрифта текста в элементе, содержащем текст (text, edit, ...). По умолчанию равно 12.
Наследуется.
color
Цвет текста в элементе, содержащем текст (text, edit, ...). По умолчанию равно "#000000".
Наследуется.
tstyle
Стиль текста. Массив констант. Возможные значения bold, italic, underline. По умолчанию.
Наследуется.
talign
Выравнивание текста в элементе по горизонтали. Возможные значения left, center, right. По умолчанию left.
valign
Выравнивание элемента в родителе по вертикали. Возможные значения top, center, bottom. По умолчанию top.
halign
Выравнивание элемента в родителе по горизонтали. Возможные значения left, center, right. По умолчанию left.
it
Тип ввода. Определяет вариант возможных значений и вид soft keyboard в edit. Возможные варианты: text, number, float, phone, cardnumber, datetime, mail, uri, pass_text, pass_num. По умолчанию равно text.
Наследуется.
w (not recommended to use)
Ширина элемента, при чём высота h (если она явно не задана) рассчитывается автоматически чтобы избежать искажения пропорций. Нет значения по умолчанию - когда не задано то используется свойство weight.
h (not recommended to use)
Высота элемента, при чём ширина w (если она явно не задана) рассчитывается автоматически чтобы избежать искажения пропорций. Нет значения по умолчанию - когда не задано то используется свойство weight.
pd
Массив целочисленных значений, каждое из которых определяет отступ содержимого от края элемента соответственно [top right bottom left]. Используется только для col и row
По умолчанию равно [0, 0, 0, 0].
mg
Массив целочисленных значений, каждое из которых определяет величину наружного отступа до родительского контейнера или соседнего объекта в контейнере. [top right bottom left].
По умолчанию равно [0, 0, 0, 0].
weight
Число "условных ячеек", которое занимает элемент в родительском контейнере. Например, в горизонтальном контейнере 2 элемента, первый имеет weight=2, второй weight=1. При отображении первый элемент будет вдвое шире второго и оба они будут растянуты на всю ширину родителя (не считая его pd-ов). По умолчанию равно 1, т.е. все элементы делят пространство поровну, если w/h их не указан. Если w/h указан у одного из элементов, остальные делят оставшееся пространство.
src
Ссылка на ресурс в сети или локальной файловой системе (assets приложения). По умолчанию равно "".
loads
Массив строк, представляющих собой url ресурсов, которые помещаются в кэш клиентского приложения при получении данного элемента (применяется в loader)
onload
Имя класса формы, которую нужно вызвать после окончания загрузки всех ресурсов из списка loads
state
Состояние элемента.
Варианты:
"enable" - отрисовать и дать возможность пользователю взаимодействовать с ним.
"disable" - только отрисовать (возможно полупрозрачным).
"invisible" - не рисовать, но выделить место.
"gone" - не рисовать и не выделять место.
Состояние элемента не влияет на передачу его val на сервер. По умолчанию равно "enable".
Наследуется по безусловному признаку.
gravity
@Deprecated: use valign & halign Позиционирование элемента в родителе. Если у элемента не заданы размеры, игнорируется, т.е. элемент всегда занимает всё доступное пространство. Массив из двух строковых констант. Первая определяет выравнивание по горизонтали, вторая - по вертикали. Значения горизонтальные - left, center, right, вертикальные - top, middle, bottom. Соответственно: слева, по центру, справа, вверху, посредине, внизу. По умолчанию равно ["left", "top"].
abs
Массив из двух целочисленных величин, определяющих отступ от левого и верхнего края родительского элемента. При наличии этого атрибута для указанного элемента игнорируются любые правила расположения и размеров элементов внутри его родителя. Элемент отрисовывается с учётом только своих размеров и abs. Остальные элементы в этом родителе игнорируют данный элемент при расчёте своего положения и размеров. При наложении элементы располагаются в порядке их описания в родителе. По умолчанию не задан.
vars
Массив объектов, описывающий варианты выбора для radio и select. При отправке формы на сервер, указывается значение поля "v" выбранного элемента из массива. Для отображения используется поле "t". Выбранным ставим тот элемент, "v" которого совпадает с атрибутом "val". Опционально может также содержать параметр "img" - значением его является url картинки, которая будет отрисована. По умолчанию равно [].
vars_type
Тип элементов в массиве vars. Принимает одно из значений: STR, MPOINT, CARD, STAT (строка, точка на карте, платежная карта, выписка). Для всех случаев json имеет вид соответственно:
{
"t": "<строка в списке>",
"v": "<значение>"
}
{
"t": "<надпись на маркере>",
"lt": "<широта>",
"lg": "<долгота>",
"v": "<значение>"
}
{
"n": "<имя карты>",
"a": "<баланс>",
"c": "<валюта>",
"v": "<значение>"
}
{
"d": "<описание транзакции>",
"a": "<сумма>",
"c": "<валюта>",
"v": "<значение>"
}
По умолчанию равно STR.
wrap
Поведение содержимого элемента в случае если содержимое требует больше места, чем предоставляет элемент. Принимает значения cut, ext, trans (обрезать, выйти за границу, перенести на след. строку). По умолчанию для всех "cut", только для type="text" по умолчанию "trans".
maxlen
Максимально допустимое число символов в поле ввода. По умолчанию не задан.
b_size
Толщина обводки вокруг элемента. Int, пиксели.
b_color
Цвет обводки вокруг элемента. Hex.
b_radius
Радиус скруглений обводки вокруг элемента. Int, пиксели.
multiplatform images
Изображения на сервере могут быть представлены наборами копий для различных разрешений экрана. Если в названии изображения (src) присутствует подстрока _scaled, то для получения изображения с нужным разрешением в имя файла следует добавить суффикс (подстроку перед расширением) из набора:
_x1 - минимальное разрешение (ldpi Android), IOS _x2 - увеличенное в 2 раза (mdpi Android), web _x3 - увеличенное в 3 раза (hdpi Android) _x4 - увеличенное в 4 раза (xhdpi Android), планшеты
text styles
Текст или его фрагменты в полях типа text или radio может быть стилизован с помощью html-тегов. Допускается использование следующих тегов:
{
<a href="...">
<b>
<big>
<blockquote>
<br>
<cite>
<dfn>
<div align="...">
<em>
<font size="..." color="..." face="...">
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<i>
<img src="...">
<p>
<small>
<strike>
<strong>
<sub>
<sup>
<tt>
<u>
}
У элемента формы может быть свойство *action, *значением которого является объект, описывающий клиентскую логику, которая срабатывает при активации этого элемента.
action
Определяется для любого активного элемента формы. Декларирует действия, которые должно выполинть клиентское приложение при клиен на элемент.
oper
Поле объекта action, определяющее выполняемую операцию, обязательное поле.
oper callPhone call phone number
В поле "phone" передается телефон в международном формате, без плюса, поле обязательно.
Пример:
{
"actions":
[
{
"oper":"callPhone",
"phone":"380501234567"
}
]
}
oper callRobot call robot in current chat
Вызывается робот в текущем чате (чате в котором форма находится).
В поле "class" передается класс робота который вызывается, поле обязательно.
При нажатии в model посылаются все те же элементы что и при нажатии на обычную кнопку.
Используется стандартная модель, а не встроенная, потому что роботу может быть нужны введенные поля.
Пример:
{
"actions":
[
{
"oper":"callRobot",
"class":"<robotClass>",
"data":
{
"name":"value"
}
}
]
}
Данные из обьекта "data" передаются в model вместе с данными формы. Если имена полей совпадают с именами полей в форме данные из "data" считаются более приоритетными
При нажатии клиент-приложение должно послать в этот чат обычный fsubmit запрос:
POST /fsubmit
{
"sid": "<sid>",
"chatId": "<chatId>",
"model": {},
"class": "<robotClass>"
}
oper callRobotInP2PChat call robot in p2p chat
В поле "userId" передается UserId пользователя или компании в p2p чат с которым нужно перейти, поле обязательно.
В поле "class" передается класс робота который вызывается, поле обязательно.
При нажатии в model посылаются все те же элементы что и при нажатии на обычную кнопку.
Используется стандартная модель, а не встроенная, потому что роботу может быть нужны введенные поля.
Пример:
{
"actions":
[
{
"oper": "callRobotInP2PChat",
"userId": "<userId>",
"class": "<robotClass>"
}
]
}
При нажатии клиент-приложение должно по найти/создать p2p чат и перейти в него, и послать в этот чат обычный fsubmit запрос:
POST /fsubmit
{
"sid": "<sid>",
"chatId": "<chatId>",
"model": {},
"class": "<robotClass>"
}
oper startP2PChat move to p2p chat
В поле "userId" передается UserId пользователя или компании в p2p чат с которым нужно перейти, поле обязательно.
Пример:
{
"actions":
[
{
"oper": "startP2PChat",
"userId": "<userId>"
}
]
}
oper selectUser
При выборе элемента в поле action которого указан этот oper нужно открыть нативный диалог выбора пользователей из списка контактов.
В диалоге отображаются только зарегистрированные пользователи при "reg":true иначе - все пользователи.
При выборе конкретного пользователя его номер телефона помещается в поле формы, имя которого задано в атрибуте "to".
Если "autosubmit":true форма отправляется на сервер сразу после того, как клиент сделал выбор в списке контактов, иначе - после выбора форма доступна для работы и отправки на сервер обычным способом (кнопкой в форме)
Например:
{
"actions":
[
{
"oper": "selectUser",
"reg": true,
"to": "<field name>",
"autosubmit": true
}
]
}
oper switchView
При выборе элемента в поле action которого указан этот oper нужно скрыть элементы, name которых указаны в массиве "hide", и показать элементы, name которых указаны в массиве "show". Т.е. первой группе должен быть назначен "state":"gone" а второй - "state":"visible" выполнена перерисовка формы
{
"actions":
[
{
"oper": "switchView",
"hide":
[
elem1, elem2
],
"show":
[
elem3, elem4
]
}
]
}
oper coords
При выборе элемента в поле action которого указан этот oper нужно открыть окно с картой (google maps), при выборе точки на карте значение поля val должно быть равно занчению широты и долготы с разделителем ";" а поле title должно быть равно адресу выбранной точки.
{
"actions":
[
{
"oper": "coords"
}
]
}
oper qrScan
При выборе элемента в поле action которого указан этот oper нужно вызвать окно сканирования qr-кода и отсканированный результат отправить роботу, указанному в поле "class". model отправляемой формы должна содержать результат распознавания кода в поле "qr". Форму результата отправляем в чат указанный в поле "chatId".
Например:
{
"actions":
[
{
"oper": "qrScan",
"class":"<robotClass>",
"chatId":"<chatId>"
}
]
}
В результает отправляем форму:
{
"sid": "<sid>",
"chatId": "<chatId>",
"model": {
"qr":"<value>"
},
"class": "<robotClass>"
}
meta
Урл собственной аватарки или пользователя из списка контакотов {{!meta.<userId_or_me>.photo}} Например:
Свое имя или имя контакта {{!meta.<userId_or_me>.name}}
Свой номер телефона или номер телефона контакта {{!meta.<userId_or_me>.phone}}
loops
Циклы в формах
{
"loops": [
{
"target": "<targetAttributeName1>",
"array": "<modelViewArrayElementName1>",
"fml": {"<fmlObj1>":1}
},
{
"target": "<targetAttributeNameN>",
"array": "<modelViewArrayElementNameN>",
"fml": {"<fmlObjN>":1}
}
]
}
Любой элемент fml может иметь атрибут loops. После обработки, атрибут loops удаляется. Атрибут fml может содержать имена переменных с $ вначале - {{$varName}} - локальные переменные цикла.
target : имя атрибута в который будет помещен результат работы цикла
array: имя массива элементов из modelView для работы с циклом
fml: часть формы, шаблона, используемой в цикле
Пример
modelView
{
"userList": [
{name: "Anton"},
{name: "Ivan"}
]
}
Fml
{
"loops": [
{
"target": "items",
"array": "userList",
"fml": {
"type": "text",
"size": "18",
"val": "{{$name}}"
}
}
]
}
Результат
{
"items": [
{
"type": "text",
"size": "18",
"val": "Anton"
},
{
"type": "text",
"size": "18",
"val": "Ivan"
}
]
}
