Версия: 4.0

Создание пользовательских приложений Mobile SMARTS

Методология разработки в Mobile SMARTS такова, что функционал приложения изначально неотделим от пользовательского интерфейса. Можно считать это отходом от идеалов разделения представления от дизайна, но в этом есть определенный смысл.

Имея определенный опыт в разработке заказных приложений для терминалов сбора данных (ТСД), разработчики «Клеверенс» наблюдали интересную закономерность, когда из ТЗ в ТЗ (хотя они и были составлены совершенно разными специалистами) кочуют примерно одни и те же формочки, отражающие примерно одинаковую логику работы персонала с мобильным устройством. Почти всегда есть окошко логина по паролю или штрихкоду. Просмотр строк задания с колонками требуемого и выполненного количества (план/ факт). Ввод каких-то дат. Сканирование адреса ячейки/ палеты/ коробки. «Esc для отмены, F4 - подтвердить» и т.д.

Еще одним характерным моментом было отличие между формочками «новичков», и теми интерфейсами, которые рисуют «ветераны» автоматизации.

Формочки за авторством «новичков» — перегруженные информацией формы, много мелких полей ввода, на каждом экране какие-то кнопочки — для работы требуют стилуса, хорошего зрения и инженерного образования.

Формочки за авторством «ветеранов» — это минимум текста, очень крупно, никаких кнопок. В первом случае: «для выбора товара отсканируйте ШК с упаковки или нажмите F1 для выбора из списка», во втором: «СКАНИРУЙ ТОВАР».

При этом не нужно забывать, что хотя почти каждое ТЗ для ТСД начинается со скриншотов, экраны устройства — это далеко не сама программа. За любой формочкой кроется большой пласт бизнес-логики, обменов данными и т.п. вещей.

В итоге разработчиками Mobile SMARTS было принято соломоново решение: создать систему, которая бы оперировала предопределенным набором наиболее полезных экранных форм с уже готовым отлаженным кодом обработки их поведения.

Каждая такая форма должна конфигурироваться только в тех пределах, в которых это не «сломает» работу приложения. При этом возможности по визуальному оформлению форм никак не ограничиваются, т.к. в платформу внедрен свой рендер HTML + CSS.

Наконец, конкретный набор форм и возможностей по их конфигурированию должен будет расширяться до тех пор, пока большинство ТЗ не смогут быть реализованы в таком виде без ущерба для итогового функционала приложения. Теоретически это путь без конца. На практике он заканчивается с набором определенной критической массы пользователей и приложений.

Программирование интерфейса приложения

Каждое визуальное действие, с которым связана экранная формочка на ТСД, имеет свои индивидуальные настройки, с которыми приходится ознакомиться для того, что составить представление о возможностях по конфигурированию той или иной формы.

Но что общее для всех форм — так это замечательная возможность применения шаблонов текстов и математических выражений. Шаблоны текстов — это возможность указать практически в любом месте вместо статического текста кусок псевдо-HTML, который вычисляется динамически и позволяет оформить/раскрасить по своему усмотрению любой элемент формы. Возможность указать в шаблоне элементы изображений позволяет максимально просто задавать иконки, картинки товаров, фотографии сотрудников и т.п. вещи.

Набор экранных форм

На текущий момент список возможных форм ТСД в Mobile SMARTS следующий:

Жесткие формы, составная часть основного приложения

Для примера — показаны четыре основные формы. Помимо них есть форма ввода пароля администратора, форма блокировки экрана и т.п.

Часть форм опциональные, т.е. в зависимости от настроек приложения они могут отсутствовать.

Несмотря на то, что формы называются «жесткими», в последних версиях андроид-клиента Mobile SMARTS присутствует возможность регулировать цвет, форму кнопок, содержимое «шторки» и еще некоторые параметры. Подробнее об этом читайте в статье «Доработка главного меню приложения Mobile SMARTS для Android».


Вход в программу	Главное меню
Опциональное окно. Не отображается, если пользователь в системе только 1 и у него нет пароля.	Обязательное окно. Но набор операций настраиваем для каждой группы пользователей. Можно настроить порядок и вид кнопок.


Выбор документа для работы	Создание нового документа
Опциональное окно, т.к. документы можно создавать автоматически при выборе операции в главном меню. Также можно разрешать/запрещать ручной выбор, выбор сканированием и т.п.	Опциональное окно. Можно запретить создавать документы на ТСД. Можно настроить автосоздание документа при выборе операции в главном меню.

Формы действий, из которых можно строить алгоритмы обработки

Порядок, количество, частично внешний вид и особенно поведение — настраиваемы в среде разработки Mobile SMARTS.


Выбор номенклатуры	Поле ввода со списком	Поля ввода
Действие «Выбор номенклатуры» любым из следующих способов (настраиваемо): сканированием, вводом цифр вручную, выбором вручную из списка, поиском по значению переменной, поиском по части названия.	Действие «Редактирование поля», с возможностью отображения списка вариантов для выбора значения.	Действие «Редактирование полей», с возможностью управлять отображением поля и форматом вводимых значений.


Ввод количества	Список или таблица	Сообщение
Действие «Ввод количества» номенклатуры. Позволяет редактировать сразу в нескольких единицах измерения (в зависимости от номенклатуры), есть встроенный калькулятор.	Действие «Просмотр записей», с возможностью задать источник данных, колонки, формат выводимых значений, реакцию на выбор строки.	Действие «Сообщение», выводит информацию в духе MessageBox (не путать с сообщениями, посылаемыми на ТСД в духе ICQ).


Ошибка	Выбор «Да/Нет»	Меню
Действие «Сообщение», в варианте «Отображать как ошибку (красным) = Да».	Действие «Выбор Да/ Нет», позволяет задать пользователю вопрос.	Действие меню из кнопок, подходит как для собственно меню, так и для вопросов с несколькими вариантами ответа.


Произвольный отчет	Фотографирование
Действие произвольного окна с таблицами, текстами, кнопками. Возможен просмотр с прокруткой.	Действие фотографирования. Возможность сделать фотографию, если поддержка такой функции реализована для конкретного устройства.

Доработка главного меню

Экранные формы главного меню приложения относятся к так называемым жестким формам, правка которых ранее была недоступна. Но сейчас в последних версиях андроид-клиента для приложений Mobile SMARTS это стало возможно.

Чаще всего для внесения изменений во внешний вид приложения потребуется добавить строки кода (см. примеры ниже) в файл global.css, который находится на ПК в папке по пути «C:\ProgramData\Cleverence\Databases\имя вашей базы\Documents» (путь указан по умолчанию). На ТСД этот файл дублируется, и может иметь названия global.css, global.android.css, global.cf.css.

Рассмотрим конкретнее на примере «Магазина 15», что можно изменить во внешнем виде приложения.

Стандартный фон шапки и цвет названия приложения

Потребуется изменить код в файле global.css (global.android.css, global.cf.css):


Было	Стало
[CSS] `{` colorTitle:#EBEBEB; colorSubTitle:#EBEBEB; colorHeader:#993535; colorStatusBar:#7f2a2a; iconColor:white; submenuiconcolor:#808080; `}`	[CSS] `{` colorTitle:#928907; colorSubTitle:#EBEBEB; colorHeader:#355899; colorStatusBar:#7f2a2a; iconColor:white; submenuiconcolor:#808080; `}`

Внешний вид «шторки»

Для этого потребуется на мобильном устройстве добавить папку FormTemplates в папку нужной вам базы и создать там файл MainMenu.xml, в который записываются следующие строки кода:

[XML]

<?xml version="1.0" encoding="utf-8"?>
<Menu xmlns:clr="http://schemas.cleverence.ru/clr" capacity="16" count="11">
<ChangeFontsAction actionName="Настройки" icon="Set" iconColor="#6A7F8D" />
<DocumentTypeAction actionName="Профиль" documentTypeName="FrontolParams" icon="Q" iconColor="#6A7F8D" />
<DocumentTypeAction actionName="Активировать лицензию" icon="abc_ic_star_black_16dp" documentTypeName="#clinternal_ObtainLicense" />
<Separator />
<ChangeUserInfoAction actionName="Сменить пользователя" icon="ic_book_black_24dp" iconColor="#6A7F8D" />
<ExitAction actionName="Выход" icon="E" iconColor="@null"/
</Menu>

Текст на кнопке обмена

Происходит путем добавления в ту же папку FormTemplates файла MainMenuRefreshButton.html со следующим содержимым:

[HTML]

<div class="__mainmenu_refresh_button_container">
<div>
<table style="width:100%;">
<tr>
<td width="15%" style="text-align:left; vertical-align:middle;padding-left:20dp;"><img tcolor="yes" maxwidth="70" maxheight="70">simple.Refresh</img>
</td><td style="text-align:left; vertical-align:middle;"><span class="list_name">
\{__NotSendDocCount>0:Измененный текст, когда есть документы;Измененный текст, когда нет документов\}</span></td>
</tr>
</table>
</div>
</div>

Внешний вид кнопок списка операций

Меняется путем удаления цветов кнопок, заданных в конфигурации, и добавления в файл global.css (global.android.css, global.cf.css) следующих строк:

[CSS]

.__mainmenu_button
\{
margin-bottom: 4px;
margin-right: 0px;
margin-left: 0px;
background-color: #3A6721;
corner-radius: 8%;
border: 0px solid #706f6f;
color: white;
\}
.__mainmenu_button:hover
\{
margin-bottom: 4px;
margin-right: 0px;
margin-left: 0px;
background-color: #6CBC3E;
corner-radius: 8%;
border: 0px solid #706f6f;
color: white;
\}
.__mainmenu_button:active
\{
margin-bottom: 4px;
margin-right: 0px;
margin-left: 0px;
background-color: #6CBC3E;
corner-radius: 8%;
border: 0px solid #706f6f;
color: white;
\}
.__mainmenu_button:disabled
\{
margin-bottom: 4px;
margin-right: 0px;
margin-left: 0px;
background-color: #9E9E9E;
corner-radius: 8%;
border: 0px solid #9E9E9E; color: white;

Итог:

После того как вы внесли правки в файл global.css на ПК, потребуется удалить из папки «MobileSMARTSv3 --> Documents» на ТСД папку базы, для которой вы вносили изменения, и заново подключиться к ней. В противном случае внесенные правки не будут применены к приложению на ТСД.

Добавление и форматирование изображений

В Mobile SMARTS реализована возможность отображения произвольных изображений в процессе выполнения операций. Это может быть картинка товара, полученная из учетной системы, снимок с фотокамеры, встроенной в терминал, или просто произвольные изображения, записанные на карту памяти.

Изображения могут быть вставлены практически в любом месте интерфейса, где позволяется настраивать вывод текста: в шапках действий, на кнопках меню, строках «подвала», в отображении списков строк документа и т.д.

роме текста с различным форматированием клиент Mobile SMARTS позволяет вставлять изображения.

Для вставки изображений используется тег <img>…</img>.

<img tcolor="yes,no,цвет" size="normal,stretch" maxwidth="…" maxheight="…">здесь необходимо указать путь к картинке или задать шаблон</img>

| Атрибут | Значение | | size ="normal" | Изображение вставляется «как есть», без масштабирования. Если места для полного отображения недостаточно, то она будет обрезана. | | size="stretch" | Увеличивает (уменьшает) размер картинки до необходимого размера. Возможный размер определяется свойствамиmaxwidth, maxheight или размером области, куда отображается картинка (например, шириной экрана, или размерами ячейки в действии отображения отчета). | | tcolor ="yes" | Используется прозрачность цвета фона, которая задается, используя цвет, взятый из первого пикселя картинки с координатами (0,0). | | tcolor = "no" | Прозрачность фона не используется. | | tcolor ="Blue" | Прозрачность цвета фона задается названием цвета или в виде #XXXXXX. | | maxwidth = "200" | Максимальная ширина картинки (задается в пикселях или в % от ширины экрана). | | maxheight = "100" | Максимальная высота картинки (задается в пикселях или в % от высоты экрана). | | align="top" | Выравнивание текста по верхней границе изображения. | | align="center" | Выравнивание текста по центру изображения. | | align="bottom" | Выравнивание текста по нижней границе изображения. Задан по умолчанию. |

Само изображение для отображения может быть задано несколькими путями:


Шаблон	Путь к файлу	Описание
`<img>\Images\picture.jpg</img>` `<img>\Flash\Images\picture.jpg</img>`	\Images\picture.jpg `\Flash\Images\picture.jpg	Изображение находится по заданному абсолютному пути на терминале.
`<img>picture.jpg</img>` `<img>Images\picture.jpg</img>`	\Application\MobileSMARTS\picture.jpg \ Application\MobilesSMARTS\Images\picture.jpg Программа установлена в папку \Application\MobileSMARTS	Изображение ищется по пути `<Папка программы на терминале>\<заданный относительный путь>`
`<img>{ПеременнаяСПутем}</img>`	\Flash\Images\pic1.jpg Переменная в сессии `{ПеременнаяСПутем}=”\Flash\Images\pic1.jpg”`	Изображение ищется по пути, лежащему в переменной сессии.
`<img>{ПеременнаяСОбъектом}</img>`	> Нет пути, отображается картинки из памяти.	Отображается объект картинки, лежащий в памяти терминала в переменной `{ПеременнаяСОбъектом}`. Такой объект может быть получен, например, запросом в учетную систему, и не требует физического сохранения, а может быть просто отображен из переменной, в которой он хранится.

Примеры добавления изображений

Пример 1 | Относительный и абсолютный пути к изображению

Путь к изображению может быть относительный и абсолютный.

Возьмем два разных изображения, но с одинаковым названием (picture.jpg), лежащих в разных папках на ТСД. Первое в папке Images установки программы на ТСД, второе в папке Images на флеш накопителе ТСД.

Зададим относительный и абсолютные пути к изображениям.

Относительный путь к изображению:

Images\picture.jpg
<img size="stretch" max>Images\picture.jpg</img>
<hr/>

Абсолютный путь к изображению:

\Images\picture.jpg
<img size="stretch" max>\Images\picture.jpg</img>

Результат на терминале:

Первое изображение находилось в папке Images установки программы на ТСД (относительный путь), второе в папке Images на флеш накопителе ТСД (абсолютный путь – любое место на ТСД).

Пример 2 | Изображение задано переменной

Чтобы вставлять изображения в виде переменных сначала необходимо их создать. Переменные имеют вид {любое название}=путь к изображению.

После того, как переменная создана, можно вместо пути указывать нужную переменную.

<img size="stretch">\{картинка\}</img>

Пример 3 | Вставка изображения в текст

Существует возможность вставлять изображения в текст. Для этого тег <img>…</img> необходимо размещать в нужном месте текста.

Изображение <img size="stretch" max>Images\picture.jpg</img> вставлено в текст.

Результат на терминале:

Пример 4 | Выравнивание текста по отношению к изображению

При вставке изображения в текст, можно задавать выравнивание текста по отношению к изображению (по верху, по центру, по низу). Для этого необходимо указать одно из значений выравнивания.

<img size="stretch" align="top" max>Images\picture.jpg</img> выравнивание текста по верхней границе изображения

<img size="stretch" align="center" max>Images\picture.jpg</img> выравнивание текста по центру изображения

<img size="stretch" align="bottom" max>Images\picture.jpg</img> выравнивание текста по нижней границе изображения

Если атрибут «align» не прописан, происходит выравнивание по нижнему краю изображения.

Результат на терминале:

Пример 3 | Несколько изображений на одной строке с разными выравниваниями

Если на одной строчке вставлено несколько изображений с разными выравниваниями, то весь текст выравнивается по значению заданному у первого изображения.

1 - center <img size="stretch" align="center" max>Images\picture.jpg</img> 2 - bottom <img size="stretch" align="bottom" max>Images\picture.jpg</img>

Результат на терминале:

Пример 5 | Вставка изображения в кнопку меню с ограничением размеров

Для вставки изображения в кнопку меню тег <img>…</img> необходимо размещать в самой кнопке.

<img size="stretch" max max>{картинка1\}</img>

В данном примере, мы указали размер области, в которую вставляем изображение, задав максимальную ширину и высоту. Дополнительно задали атрибут «size="stretch"», который увеличит (уменьшит) изображение до этих размеров. Само изображение задано переменной.

Не обязательно указывать оба параметра размеров, можно указать только один (высоту или ширину изображения).

Результат на терминале:

Пример 6 | Вставка изображения в кнопку меню без конкретных заданных размеров

Посмотрим, что будет, если не задавать конкретные размеры области изображения.

<img size="stretch">{картинка1\}</img>

Результат на терминале:

Изображение растянулось до максимально возможного размера.

Рекомендуется задавать конкретные размеры области изображения для вставки в кнопку меню, для корректного отображения картинки.

Пример 7 | Размер без масштабирования

Чтобы вставить изображение без масштабирования необходимо задать атрибут size ="normal".

<img size ="normal">Images\picture.jpg</img>

Результат на терминале:

Изображение было обрезано, т.к. полностью не уместилось на экране.

Пример 8 | Размер с масштабированием

Чтобы увеличить (уменьшить) размер изображения до размера области вставки, необходимо задать атрибут size ="stretch".

<img size="stretch">{картинка\}</img>

Результат на терминале:

Пример 9 | Задание конкретных размеров изображения

Максимальный размер (высоту и ширину) изображения можно указывать в процентах или пикселях. В данном примере у изображения 1 указана максимальная высота в процентах, у изображения 2 указана в пикселях.

1 <img size="stretch" max>{картинка\}</img> 2<img size="stretch" max>{картинка\}</img>

Результат на терминале:

Если высота или ширина изображения задана в процентах, то на разных терминалах (в зависимости от размеров экрана) размер картинки будет разным.

Пример 10 | Прозрачность цвета фона задается названием цвета

Посмотрим, как работает прозрачность цвета фона изображения. Возьмем одно изображение. В первом случае не будем задавать прозрачность (оригинал), во втором случае добавим прозрачность зеленого цвета фона, задав атрибут «tcolor="Green"».

Оригинал изображения
<img size="stretch" max>{картинка2\}</img><hr/>
Добавлен атрибут tcolor="Green"
Прозрачность зеленого цвета фона
<img tcolor="Green" size="stretch" max>{картинка2\}</img>

Результат на терминале:

Зеленый цвет в изображении стал прозрачным.

Пример 11 | Прозрачность цвета фона задается кодом цвета

Задать прозрачности цвета фона можно не только написав цвет, но и введя код цвета #000000 (черный).

Оригинал изображения
<img size="stretch" max>{картинка2\}</img><hr/>
Добавлен атрибут tcolor="#000000"
Прозрачность черного цвета фона
<img tcolor="#000000" size="stretch" max>{картинка2\}</img>

Результат на терминале:

Черный цвет в изображении стал прозрачным.

Пример 12 | Прозрачность цвета фона задается первым пикселем изображения

Кроме задания конкретного цвета прозрачности фона, можно задать прозрачность, указав цвет, взятый у первого пикселя вставляемого изображения с координатами (0,0), добавив атрибут «tcolor="yes"». В данном примере это красный цвет.

Оригинал изображения
<img size="stretch" max>{картинка2\}</img><hr/>
Добавлен атрибут tcolor="yes"
Прозрачность цвета фона взятого из первого пикселя картинки (красный)
<img tcolor="yes" size="stretch" max>{картинка2\}</img>

Результат на терминале:

Красный цвет в изображении стал прозрачным.

Добавление управляющих кнопок

Начиная с версии 2.6.7.11, в Mobile SMARTS предусмотрена возможность добавлять дополнительные управляющие кнопки в визуальных действиях. При нажатии на кнопку будет происходить переход на другое действие, которое было задано в её описании, аналогично переходу по быстрым клавишам или управляющим штрихкодам, добавленных с помощью обработчиков визуальных действий. Кнопки можно вставлять практически в любом месте интерфейса, где может быть настроен вывод текста: в шапках действий, на кнопках меню, строках «подвала», в отображении списков строк документа и т. д.

Выражение, которое задает кнопку, имеет следующий вид:

[HTML] 

<button direction="…" width="…" height="…" align="…" enabled="{…}">Текст кнопки или картинка</button>

Для перехода по нажатию кнопки на какое-нибудь действие необходимо указать атрибут direction="имя действия для перехода».

[HTML] 

<button direction="имя действия для перехода">Текст кнопки или картинка</button>
например,
<button direction="Сканирование">Текст кнопки или картинка</button>

Для задания размеров кнопки в пикселях или процентах используются атрибуты width=»…» (ширина) и height=»…» (высота). Размеры кнопки задавать не обязательно. Когда размеры не указываются, тогда они задаются автоматически по ширине и высоте текста или изображения.

[HTML] 

<button width="…" height="…">Текст кнопки или картинка</button>,
например,
<button width="220" height="25">Текст кнопки или картинка</button>
<button width="80%" height="10%">Текст кнопки или картинка</button>
<button width="80%" height="30">Текст кнопки или картинка</button>

Текст относительно кнопки можно выравнивать по центру (center), верхней (top) или нижней (bottom) границе. По умолчанию выравнивается по нижней границе (если атрибут align не указан).

[HTML] 

<button align="…">Текст кнопки или картинка</button>,
например,
<button align="top">Текст кнопки или картинка</button>
<button align="center">Текст кнопки или картинка</button>
<button align="bottom">Текст кнопки или картинка</button>

В Mobile SMARTS предусмотрена возможность при определенных условиях делать кнопки активными (можно нажать кнопку) или пассивными (на кнопку нажать нельзя).

[HTML] 

<button enabled="{условие}">Текст кнопки или картинка</button>,
например,
<button enabled="{Document.CurrentItems.Count>0}">Текст кнопки или картинка</button> если введенное условие (Document.CurrentItems.Count>0) выполняется, то кнопка будет активна, если не выполняется, то на кнопку нажать нельзя.

Также есть возможность полностью скрыть кнопку при соблюдении введенных условий.

[HTML] 

<button visible="{условие}">Текст кнопки или картинка</button>,
например,
<button visible="{Document.CurrentItems.Count>0}">Текст кнопки или картинка</button> если введенное условие (Document.CurrentItems.Count>0) выполняется, то кнопка отображается, если нет, то не отображается.

Разрешается использовать форматирование, как текстов кнопки, так и изображений.

Примеры cоздания кнопок

Пример 1 | Кнопка задана в строке текстом

Посмотрим, как сделать кнопку в строке при просмотре записей.

В действие «Просмотр записей» добавим новую колонку.

В формат ячейки напишем выражение для добавления кнопки.

Наше выражение для добавления кнопки выглядит так:

[HTML] 

<button direction="Удаление фактической строки">Удалить</button>,
где
Удаление фактической строки – имя действия, на который будет выполнен переход по нажатию кнопки;
Удалить – надпись на кнопке.

Теперь при нажатии на кнопку будет выполняться переход на действие по удалению строки.

Пример 2 | Кнопка задана изображением

Рассмотрим, как сделать кнопку в верхней части окна сканирования с изображением и выравниванием по центру относительно текста.

Для этого в действие «Ввод количества» у свойства «Текст в верхней части окна» нужно добавить кнопку с указанием на действие для перехода и атрибутом выравнивания align =" center " (по центру). Изображение добавляется тегами <img>…</img>, с возможностью форматирования.

Наше выражение для добавления кнопки выглядит так:

[HTML] 

<button align="center" direction="Сканирование"><img tcolor ="yes"> \Application\MobileSMARTS\Images\2.png</img></button>,
где
align =" center " – выравнивание текста по центру, относительно кнопки в строке;
Сканирование – имя действия, на который будет выполнен переход по нажатию кнопки;
<img tcolor ="yes"> \Application\MobileSMARTS\Images\2.png</img> – вставленная картинка с указанием пути до нее на терминале и форматированием (прозрачность цвета фона).

Результатом нажатия кнопки будет переход на действие «Сканирование».

Пример 3 | Кнопка задана в верхней части окна текстом с изображением

Рассмотрим, как сделать кнопку с заданными размерами в верхней части окна сканирования с текстом и изображением.

Для этого в действие «Выбор номенклатуры» у свойства «Текст в верхней части окна» нужно добавить кнопку с указанием на действие для перехода. Изображение добавляется тегами <img>…</img>, с возможностью форматирования (подробнее про вставку изображения смотрите здесь).

Наше выражение для добавления кнопки в текст выглядит так:

[HTML] 

<button width="80%" height="30" direction="ПросмотрФакт"><img>\Application\MobileSMARTS\Images\1.png</img> просмотр строк</button>,
где
width="80%" – ширина кнопки в процентах;
height="30" – высота кнопки в пикселях;
ПросмотрФакт – имя действия, на который будет выполнен переход по нажатию кнопки;
< img >\ Application \ MobileSMARTS \ Images \1. png </ img > – вставленная картинка с указанием пути до нее на терминале;
просмотр строк – надпись на кнопке.

Результатом нажатия кнопки будет переход на действие «ПросмотрФакт» (просмотр строк фактически отсканированных позиций).

Пример 4 | Кнопка задана с атрибутом enabled

Рассмотрим, как сделать кнопку, которая будет активна или нет при задании определенных условий.

Для примера добавим такую кнопку в верхнюю часть окна в действии «Выбор номенклатуры».

Добавим атрибут «enabled» и напишем условие, при выполнении которого кнопка будет активна.

[HTML] 

<button width="220" height="25" direction="ПросмотрФакт" enabled="{Document.CurrentItems.Count>0}"><img> \Application\MobileSMARTS\Images\1.png</img> просмотр строк</button>,
где
width="220" – ширина кнопки в пикселях;
height="25" – высота кнопки в пикселях;
ПросмотрФакт – имя действия, на который будет выполнен переход по нажатию кнопки;
enabled ="{ Document . CurrentItems . Count >0}" – условие, при выполнении которого кнопка будет активна;
< img >\ Application \ MobileSMARTS \ Images \1. png </ img > – вставленная картинка с указанием пути до нее на терминале;
просмотр строк – надпись на кнопке.

Результатом будет активная кнопка, при выполнении введенного условия, в нашем случае, если в документе количество строк с набранным товаром больше нуля (когда сканировался хоть один товар). Кнопка будет неактивна, например, когда в новом документе сканирование еще не проводилось, и нет еще ни одной строки с набранным товаром или строки были удалены.

Пример 5 | Кнопка задана с атрибутом visible

Рассмотрим, как сделать кнопку, которая будет появляться только в случае выполнения определенных условий и кнопки не будет, если это условие не выполняется.

Для примера добавим такую кнопку в верхнюю часть окна в действии «Выбор номенклатуры».

Добавим атрибут «visible» и напишем условие, при выполнении которого кнопка будет отображаться.

[HTML] 

<button width="220" height="25" direction="ПросмотрФакт" visible ="{Document.CurrentItems.Count>0}"><img> \Application\MobileSMARTS\Images\1.png</img> просмотр строк</button>,
где
width="220" – ширина кнопки в пикселях;
height="25" – высота кнопки в пикселях;
ПросмотрФакт – имя действия, на который будет выполнен переход по нажатию кнопки;
visible ="{Document.CurrentItems.Count>0}" – условие, при выполнении которого кнопка будет отображаться;
< img >\ Application \ MobileSMARTS \ Images \1. png </ img > – вставленная картинка с указанием пути до нее на терминале;
просмотр строк – надпись на кнопке.

Результатом будет отображена кнопка, при выполнении введенного условия, в нашем случае, если в документе количество строк с набранным товаром больше нуля (когда сканировался хоть один товар). Кнопка не будет отображаться, например, когда в новом документе сканирование еще не проводилось, и нет еще ни одной строки с набранным товаром или строки были удалены.

Изменение размера шрифта

На кнопках

Для изменения относительного размера шрифта задаем в редакторе строк нужный размер (например, size="+2" –увеличивает шрифт на 2 размера, , size="-1" – уменьшает на 1 размер).
В тексте

Для изменения относительного размера шрифта задаем в редакторе строк нужный размер (например, size="+2").

По умолчанию отсканированная позиция отображается с размером шрифта size="+2". Например, если в стиле "NormalFont" установлен размер size="9", то отсканированная позиция будет отображаться размером size="11".
В тексте списка

Для изменения относительного размера шрифта задаем в редакторе нужный размер (например, size="-2").

Тексты и математические выражения

Практически все тексты в окнах, любой расчет значений и обработчик шаблонов этикеток используют специальный синтаксис вычислимых выражений для вставки данных. Такие вставки обрамляются фигурными скобками {…}, между которыми пишется выражение. Вычислимым выражением является всё, помещенное в фигурные скобки. Синтаксис выражения следующий:

{выражение[:формат]} или {выражение}

Таким образом, вместо статического текста мы можем использовать текст с «шаблонами» — вставками в текст, которые будут заменены на конкретные значения выражений. Такой путь может быть простым, состоящим просто из имени объекта, либо составным, ссылающимся на данные внутри объекта.

{ScannedBarcode} — действие выбора номенклатуры заносит в эту переменную отсканированный штрихкод (либо введенный вручную штрихкод, код или артикул). {SelectedProduct} — действие выбора номенклатуры заносит в эту переменную товар, который был распознан по штрихкоду (коду, артикулу) или выбран пользователем. {SelectedProduct.Product.Name} — название товара, который был отсканирован или выбран вручную.

Шаблоны текстов и выражений

Шаблон текста для отображения в окне может содержать любое количество выражений вперемешку с обычным текстом. Например, «Выбрано: {ScanedBarcode} —{SelectedProduct}». Такая строка позволит выводить на экран сообщения вида «Выбрано: 2345069545 — картофель мороженый (пачка)», где ScanedBarcode и SelectedProduct заменяются соответствующими значениями, хранящимися в сессии.

Всё до первого двоеточия ({путь к значению[:формат]}) является указанием на то, что выводить, всё после — форматом вывода значения в строку. Формат зависит от типа значения — строка это, число, дата или что-то другое. Для правильного использования формата нужно знать, каков будет тип значения. Двоеточия может и не быть, т.е. часть с форматом необязательная — если формат не указан, то используется формат по умолчанию для соответствующего типа значений.

Для написания шаблонов в редакторе текстов в «Панели управления» встроена помощь по шаблонам, куда внесены наиболее часто используемые варианты.

И синтаксис пути к значению, и синтаксис формата взяты из языка C# и спецификаций библиотеки Microsoft .NET. В .NET и, соответственно, в Mobile SMARTS всё является объектами — и строки, и числа, и более сложные вещи, такие как номенклатура, штрихкоды или складские документы. Источником данных для выражений является сессия исполнения документа, которая представляет собой просто набор переменных. Системные переменные и все переменные, заведенные разработчиком операции, складываются в одну кучу — сессию. В сессии лежит и сам обрабатываемый документ.

Поля в объекте, такие как номер документа или набор его строк, в .NET называются свойствами объекта. У каждого такого свойства есть своё имя. Зная имя свойства можно получить значение этого свойства у конкретного объекта. Это значение также будет являться объектом, у которого есть свои свойства и т.д., при этом одно имя свойства отделяется от другого точкой. Кроме свойств у объектов есть методы — это функции, значение которых вычисляет сам объект. Синтаксис вызова метода — имя метода с круглыми скобками «()», в которых указываются передаваемые параметры. Таким образом, можно строить цепочки из обращения к свойствам и методам, чтобы получить из объекта нужные данные.

Соответственно, самый простой пример пути к значению — строка из имен свойств и методов со скобками, разделенных точками. Кроме этого выражения могут содержать арифметические операции, т.е. не просто значение свойства или вызов метода, но и сумма значений двух свойств или произведение результата вызова метода на число + sin(10).

Следует всегда иметь в виду, что результатом обработки шаблона является текст. Поэтому, если a = 7 и b = 1, например, то не стоит путать следующие шаблоны:

«{a} - {b}» даст в результате «7 - 1», и только шаблон

«{a - b}» даст «6».

Другой из примеров пути к значению — указание специального объекта «global::», после которого идет указание на вызов статического метода или взятие значения статического свойства (.NET), а далее можно указать путь от полученного результата.

В том случае, если система не может вычислить значения или оно равно (null), ничего выведено не будет.

При задании шаблона можно указывать шаблон вывода значения. Например, {SelectedProduct.ExpireDate: Срок годности — (0)} отобразит что-то вроде «Срок годности — 01 мая 2009». А {SelectedProduct.ExpireDate: Срок годности — (0:MM36683yyyy) отобразит что-то вроде «Срок годности — 05366832009».

Если срок годности не задан (т.е. если поле не существует или равно null), то не будет выведено ничего: ни даты, ни текста «Срок годности –». Это очень удобно для условного вывода значений. Можно указать целую страницу шаблонов для вывода различных возможных свойств номенклатуры, например, а на экране получить строки только для тех свойств, которые реально присутствуют. Не существующие или не проставленные свойства, а также их «окаймление» в виде разных подписей и пояснений, просто не будут отображены.

Примеры шаблонов

| Текст в шаблоне | Пример результата и описание | | Накладная №{Document.Id} | Накладная №1742

Выражение {Document.Id} было заменено на значение свойства с именем {Id} текущего документа, лежащего в сессии под именем «Document». | | Длина номера: {Document.Id.Length} цифр | Длина номера: 4 цифр

Выражение {Document.Id.Length} было заменено на значение свойства «Length» объекта (текстовой строки в данном случае), полученного как значение свойства с именем «Id» у документа. | | Итого строк: {Document.CurrentItems.Count} | Итого строк: 16

Выражение {Document.CurrentItems.Count} было заменено на значение свойства «Count» табличной части фактических строк документа. | | {Document.CurrentItems.Count:Итого строк: (0)} | Итого строк: 16

То же самое. Первое двоеточие — отделяет путь от формата. Второе — просто двоеточие. «(0)» в формате было заменено на результат выражения. | | Результат: {Document.abcdefgh ()} строк | Результат: строк

У документа не существует метода abcdefgh, поэтому результатом выражения будет пустая строка. | | {Document.abcdefgh ():Результат: (0) строк} | У документа не существует метода abcdefgh, поэтому результатом всего выражения в скобках будет пустая строка. | | Дата: {global:System.DateTime.Today} | Дата: 20.04.2009

У класса System.DateTime (дата и время) есть статическое свойство Today, которое всегда возвращает текущую дату (сегодняшнюю дату, которая сегодня). | | {global:System.DateTime.Today.Day} ! | 4 !

У класса System.DateTime (дата и время) есть статическое свойство Today, которое всегда возвращает текущую дату. У текущей даты взято значение свойства Day (номер дня), а потом ко всему этому прибавились пробел и восклицательный знак. |

| Текст в шаблоне | Пример результата и описание | | Итого: {SelectedProduct.Quantity+SelectedProduct.Quantity} шт. | Итого: 15 шт.

Выражение «SelectedProduct.Quantity» было заменено на значение свойства «Quantity» (количество) и выполнено сложение. | | Итого: {SelectedProduct.Quantity:(0)}+{SelectedProduct.Quantity:(0)} шт. | Итого: 9+6 шт.

В данном примере «+» (знак плюс) написан как текст и ничего не суммирует. | | {Document.DeclaredItems.DeclaredQuantity- Document.DeclaredItems.CurrentQuantity: Осталось набрать: (0) шт.} | Осталось набрать: 6 шт.

Получили разницу планового количества и фактического. | | {SelectedProduct.ЦенаСклад: Цена: (0) с}

{SelectedProduct.Quantity: Количество: (0) шт.}

Сумма: {SelectedProduct.ЦенаСклад*SelectedProduct.Quantity: (0) с} | Цена: 1035 р.

Количество: 5 шт.

Сумма: 5175 р.

Вывели цену и количество товара и, перемножив их значения «(0)» получили сумму.

Первое двоеточие — отделяет путь от формата. Второе — просто двоеточие. «с» — означает р. (рубли). | | {SelectedProduct.ЦенаСклад: Цена: (0) с}

{SelectedProduct.Quantity: Количество: (0) шт.}

Сумма: {SelectedProduct.ЦенаСклад*SelectedProduct.Quantity: (0) с} | Если у товара не указана цена, то результат будет таким:

Количество: 5 шт.

На экран будет выведено только количество товара. |

Если при разборе строки из имен свойств и методов будет обнаружено, что таких свойств или методов нет или нет объектов, у которых их следует брать, в качестве результата выражения ничего не будет отображено.

Шаблоны с условием

Использование условий в шаблонах серьёзно упрощает жизнь разработчику на Mobile SMARTS. Условия в шаблонах позволяют избежать лишнего применения действия «Проверка условий».

Рассмотрим синтаксис условий и примеры их использования.


`{Условие:результат_истина;результат_ложь}`

Условие – некоторое булево выражение или переменная, принимающая значения true или false. Условие может состоять из нескольких условий, в таком случае они объединяются с помощью логических операторов:

|| — или;
&& — и.

результат_истина – результат работы шаблона когда выражение условия принимает значение true;

результат_ложь – результат работы шаблона когда выражение условия принимает значение false.

Значения результатов могут быть также заданы шаблонами с условием.

Итогом использования этого шаблона будет вывод результата, соответствующего значению условия. Если условие принимает значение null, то ни один результат выведен не будет.

Рассмотрим примеры.

Пример составного условия

Шаблон используется в конфигурации «Mobile SMARTS: Магазин 15» для показа кнопки выбора склада в зависимости от нескольких условий.

Значение шаблона: {Document.CreatedOnPDA || Document.СкладВведенНаТСД || Document.КодСклада==null: Склад: {Document.СкладОтобр};}

Шаблон размещён в тексте кнопки «Меню».

Разберёмся, как это работает . Для выражения условия в примере используется несколько переменных:

Document.CreatedOnPDA – true, если документ создан на мобильном устройстве, если нет – false;

Document.СкладВведенНаТСД – true, если склад был выбран на мобильном устройстве, если нет – false;

Document.КодСклада==null – выражение сравнения поля документа КодСклада с null. True, если КодСклада – null.

Все составляющие общего условия объединены между собой логическим оператором «или» («||»). Это значит, что итоговое значение всегда будет true, кроме случая, когда все три элемента будут иметь значение false.

Иными словами, кнопка будет выводиться всегда, кроме случая, когда документ выгружен из учётной системы, имеет заполненное поле шапки КодСклада и склад не выбирался на мобильном устройстве. В этом случае кнопка отображаться не будет.

Вывод текста в зависимости от условия

Текст в самом окне: {Условие:Правда;Ложь}

Текст на первой кнопке: {Условие:true;false}

Текст на второй кнопке: «Выход»

Результат работы:


Условие = true	Условие = false

Скрытие текста по значению условия

Текст в самом окне: {Условие:Значение условия - {Условие};}

Текст на первой кнопке: Условие = {Условие:true;false}

Текст на второй кнопке: «Выход»

Обратите внимание, что результат, который будет выведен при значении условия true, может содержать шаблоны для вывода значений переменных, в данном случае это переменная Условие.

Результат, выводимый при значении false, отсутствует. Это позволяет ничего не выводить на экран, когда условие принимает значение false.

Шаблон размещён в свойстве «Текст» в самом окне действия «Меню».

Результат работы: