В последних версиях клиента Mobile SMARTS были сильно расширены возможности псевдо-html верстки, например, появилась возможность добавлять произвольное количество тегов input на форму и обрабатывать пользовательские действия с ними с помощью события onblur/ onselected.
Рассмотрим на примере окна первичной настройки приходной накладной из продукта Frontol Simple Mobile.
Код первого поля для ввода ИНН:
HTML
<div style="padding:1dp 16dp 0dp 13dp;"> <input value="{INN}" tabindex="1" datatype="Decimal" onblur="ПроверкаИНН" title="ИНН от 10 до 12 символов" style="border-color:#C8D6DE;" /> </div>
В данном случае INN - переменная в сессии, которой присваивается результат ввода пользователем. Событие onblur определяет, на действие с каким именем перейдет алгоритм после нажатия на кнопку Еnter). В данном случае алгоритм переходит на действие ПроверкаИНН.
Еще один пример - поле с выпадающим списком контрагентов.
Предварительно в конфигурации отберем коллекцию строк СтрокиПоказа
Код выпадающего списка (switch):
HTML
div style="padding:1dp 0dp 10dp 17dp;border:0px solid black;margin:13dp 0dp 20dp 0dp;"><switch source="СтрокиПоказа" value="{INN_Text}" tabindex="2" listItemDisplayTemplate="{Item.ShortName==null:{Item.Имя};{Item.ShortName}}" placeholder="Или выберите из списка" onselected="ВыборИзСписка"/> </div>
Source - источник элементов для показа (в данном примере - предварительно отобранная коллекция строк СтрокиПоказа).
Value - переменная в сессии, в которую заносится результат выбора (строка из коллекции СтрокиПоказа).
Tabindex - определяет порядок перехода фокуса на форме.
listItemDisplayTemplate - шаблон отображения элемента в выпадающем списке. В данном случае, если строка имеет поле ShortName, то будет отображаться оно, если нет - поле Имя.
Placeholder - текст внутри поля формы, который исчезает при получении фокуса.
Onselected - событие, которое произойдет после выбора элемента из выпадающего списка. В качестве значения - имя действия в конфигурации, в нашем примере ВыборИзСписка.
Поле ввода даты демонстрирует новые возможности:
HTML
<div style="padding:1dp 16dp 20dp 0dp;"> <div style="padding:1dp 16dp 0dp 13dp;"> <input type="text" value="{OrderDate}" pattern="dd.MM.yy" placeholder="ДД.ММ.ГГ" datatype="datetime" tabindex="4" onblur="1725 1" onselected=""/> </div>
Здесь все аналогично предыдущим пунктам, кроме:
Pattern - указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы
Datatype - если предыдущие примеры были в случае с ИНН - формата Decimal, в случае с INN - Text, то в данном примере OrderDate имеет формат DateTime со всеми вытекающими проверками.
Если появляется необходимость отформатировать список вывода, например, элементов номенклатуры в действии выбор номенклатуры, то ниже приведен пример кода, как это можно сделать:
HTML
<div class="div_warelist" > <div style="margin-bottom:10dp;" > <table border="0" width="100%"> <tr> <td width="95%"> <span class="list_name" >{Item.Product.Name}</span> </td> <td width="5%" align="right"> <img size="stretch" >simple.ChevronRigth</img> </td> </tr> </table > </div> <div > <table border="0" > <tr> <td width="50%" > <span class="tb_header">Цена: {Item.Packing.Цена:0.00} ₽</span> </td> <td width="50%" align="right" > <span class="tb_quantity" >{Item.Packing.Остаток} {Item.Packing.Name}.</span> </td> </tr> </table> </div> </div>
