- Локализация(ver. 2.7)
- Разметка(ver. 2.7)
- Скрипт(ver. 2.7)
- Структура мобильного приложения(ver. 2.7)
- Таблицы стилей(ver. 2.7)
- Термины и определения(ver. 2.6)
Структура мобильного приложения
- device
- app
- BusinessProcess
- Configuration
- Image
- Screen
- Script
- Style
- Translation
- app
- server
- css
- image
- script
- view
- settings.xml
device
В каталоге device располагаются все исполняемые файлы мобильной части решения.
/ BusinessProcess - содержит файл BusinessProcess.xml со структурой бизнес процессов, определяющей:
- навигацию внутри решения;
- подключение контролеров;
подключение дополнительных файлов с разметкой.
<?xml version="1.0" encoding="utf-8" ?> <bp:BusinessProcess xmlns:bp="BitMobile.BusinessProcess" xmlns:s="BitMobile.ValueStack"> <bp:Workflow Name="Main" Controller="Main\Main.js"> <bp:Step Name="Visits" Screen="Visit\Visits.xml" Controller="Visits\Main.js"> <bp:Action Name="ShowMap" NextStep="ShowMap"></bp:Action> <bp:Action Name="Select" NextWorkflow="Visit"></bp:Action> <bp:Action Name="SelectUnscheduled" NextWorkflow="Visit"></bp:Action> <s:Include File="\Components\SideMenuActions.xml"/> </bp:Step> </bp:Workflow> </bp:BusinessProcess>
/Configuration - содержит файл Configuration.xml с общей конфигурацией мобильного приложения:
<c:BusinessProcess File=" ....xml "/> - задается файл, описывающий, бизнес процессы мобильного приложения.
<c:Style> </c:Style> - указываются файлы с css-стилями, которые будут использоваться по умолчанию и для различных форм-факторов.
- <c:Script> <c:GlobalEvents File=" ....js" /> <c:GlobalModules> </c:Script> - указываются глобальные событиями и модули и миксины, к которым можно будет обращаться из любого экрана мобильного приложения.
<?xml version="1.0" encoding="utf-8" ?> <c:Configuration xmlns:c="BitMobile.Configuration" xmlns:s="BitMobile.ValueStack"> <c:BusinessProcess File="BusinessProcess.xml" /> <c:Style> <c:DefaultStyles> <c:DefaultStyle File="default.css" /> <s:If Test="$isTablet"> <c:DefaultStyle File="tablet.css" /> </s:If> <s:Else> <c:DefaultStyle File="phone.css" /> </s:Else> </c:DefaultStyles> </c:Style> <c:Script> <c:GlobalEvents File="Global\Events.js" /> <c:GlobalModules> <c:Module Name="Global" File="Global\Global.js" /> </c:GlobalModules> <c:Mixins> <c:Mixin File="Mixins\SideMenu.js" Target="*\Main.js" /> <c:Mixin File="Mixins\Common.js" Target="*.js" /> <c:Mixin File="Mixins\Workflow.js" Target="*.js" /> <c:Mixin File="Mixins\DB.js" Target="*.js" /> </c:Mixins> </c:Script> </c:Configuration>
/Image - графические файлы, используемые в дизайне мобильного решения
/Screen - файлы, определяющие расположение визуальных компонентов экрана. Все файлы должны иметь кодировку UTF-8
/Script - файлы с основным кодом приложения
/Style - CSS-стили приложения
/Translation - файлы локализации приложения. Каждый файл локализации содержит массив пар ключ/значение.
forward Next back Back summary Summary
forward Далее back Назад summary Сводная информация
server
В каталоге server располагаются все исполняемые файлы административной части решения.
/css - CSS-стили приложения
/image - графические файлы, используемые в дизайне
/script - файлы с основным кодом приложения
/view - файлы, определяющие расположение визуальных компонентов экрана.
settings.xml
Файл настроек решения settings.xml должен всегда находится в корне папки с мобильным решением
<?xml version="1.0" encoding="UTF-8"?> <configuration> <resource> <version version="1.0.2.13"/> </resource> <client> <supportedCore version="2.2.2.91"/> </client> <server> <supportedMeta version="2.0.0.1"/> <filterShared value="yes"/> <conflictPolicy value="ServerWins"/> </server> </configuration>
Описание:
- resource\version - версия ресурсов решения
- client\supportedCore - минимальная версия платформы, необходимая для работы ресурсов
- server\supportedMeta - версия метаданных, необходимая для работы ресурсов
- server\filterShared - режим фильтрации файлов папки shared, допустимые значения 'yes' и 'no', подробнее см. раздел "Фильтрация каталога shared"
- server\conflictPolicy - режим разрешения конфликтов синхронизации, допустимые значения 'ServerWins' и 'ClientWins'.
Разрешение конфликтов server\conflictPolicy
В момент обмена данными мобильного агента с сервером Grotem в случае если запись в базе данных, которую необходимо обновить, была в свою очередь изменена с момента последней синхронизации (например обменом с 1С) - возникает конфликт.
Для разрешения конфликтов существует 2 режима:
- "ServerWins" - данные мобильного агента не сохраняются в базе данных.
- "ClientWins" - данные мобильного агента затирают данные в базе данных.
Режим "ServerWins" включен по умолчанию.
Изменить режим можно настройкой файла конфигурации решения:
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<server>
<conflictPolicy value="ServerWins" />
</server>
</configuration>
или
<?xml version="1.0" encoding="utf-8" ?>
<configuration>
<server>
<conflictPolicy value="ClientWins" />
</server>
</configuration>
Термины и определения
Локализация
forward Next back Back
forward Далее back Назад
Для добавления поддержки дополнительного языка в мобильном приложении необходимо:
1. Создать файл локализации, например pl.txt для поддержки польского языка
2. Заполнить файл массивами ключей
3. Перенести файл в каталог /Translation
Разметка
Xml файлы, на основе которых строятся экраны
Расположение: device/<application_name>/Screen/
Для того, что бы задать разметку для шага рабочего процесса необходимо установить значение атрибута Screen:
<bp:Workflow Name="Main" Controller="Main\Main.js"> <bp:Step Name="Menu" Screen="Main.xml"/> </bp:Workflow>
Обратите внимание, что в разметке экрана корневым элементов должен быть <c:Screen/>, а в разметке компонента - <c:Component/>.
Визуальные компоненты
- Button(ver. 2.7)
- CheckBox(ver. 2.7)
- Component(ver. 2.7)
- DockLayout(ver. 2.7)
- EditText(ver. 2.7)
- HorizontalLayout(ver. 2.7)
- HorizontalLine(ver. 2.7)
- Image(ver. 2.7)
- Indicator(ver. 2.7)
- MediaPlayer(ver. 2.7)
- MemoEdit(ver. 2.7)
- Screen(ver. 2.7)
- ScrollView(ver. 2.7)
- SwipeHorizontalLayout(ver. 2.7)
- SwipeVerticalLayout(ver. 2.7)
- TextView(ver. 2.7)
- VerticalLayout(ver. 2.7)
- WebImage(ver. 2.7)
- WebMapGoogle(ver. 2.7)
- WebView(ver. 2.7)
Пространство имен: BitMobile.Controls.
Объявление по умолчанию: xmlns:c="BitMobile.Controls".
Button
Кнопка, обладающая базовой анимацией касания и стандартными свойствами отображения.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:Button Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:Button CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:Button Id="main"/> function HideMain() { $.main.Visible = true; } | |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | |
OnClick | функция | разметка | Задает ссылку на функцию из основного контроллера, вызываемую при нажатии на кнопку. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:Button OnClick="$Print($editOutlet.Text)"/> function Print(sender, text) { Dialog.Message(text); sender.Visible = false; } | - |
OnClickAction | функция | разметка | Задает ссылку на функцию из основного контроллера, вызываемую при нажатии на кнопку. | <c:Button OnClick="$Print($editOutlet.Text)"/> function Print(text) { Dialog.Message(text); } | - |
Text | строка** | разметка и скрипт | Задает текст, отображаемый на кнопке. | <c:Button Text="#hello_world#" OnClick="$Rename($editText.Text)"/> function Rename(sender, text) { sender.Text = text; } | - |
OnEvent | строка** | Задает событие, при выполнении которого будет вызвана функция, указанная в свойстве OnClick или OnClickAction. Пример события: Back - вызывается при нажатии на кнопку "Назад" в Android устройствах. | <c:Button OnClick="$DoBack()" OnEvent="Back"/> | - | |
SubmitScope | строка** | Задает область валидации. Возможные значения: "all" - проверяются все компоненты окна; список идентификаторов компонентов через знак ";". Обратите внимание: постусловием для контейнеров является выполнение всех постусловий его потомков. | <c:Button OnClick="$DoForward()" SubmitScope="edtName; grValues"/> <c:EditText Id="edtName" Required="true"/> <c:HorizontalLayout Id="grValues"> <c:EditText Id="edtAddress" Length="20"/> <c:EditText Id="edtUrl" Length="10"/> <c:EditText Id="edtPhone" Length="11" Mask="[0-9]+"/> </c:HorizontalLayout> | 2.3.3.107 |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
CheckBox
Нативный флажок.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Enabled | логический | разметка и скрипт | Задает доступность компонента для редактирования | <c:CheckBox Enabled="false"/> | |
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:CheckBox Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:CheckBox CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:CheckBox Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Checked | логический | разметка и скрипт | Задает логическое состояние поля выбора. | <c:CheckBox Checked="True"/> function Uncheck() { $.main.Checked = false; } | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
Component
Контейнер. Содержит не более одного вложенного компонента. Корневой элемент подключаемого компонента. (см. Include)
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:Component Id="main"> ... </c:Component> function HideMain() { $.main.Visible = true; } | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
DockLayout
Контейнер. Содержит любое количество вложенных компонентов. Каждый вложенный компонент добавляется на экран в соответствие с очередностью, заданной в разметке. При добавлении вложенного компонента, его положение вычисляется на основе заданного для него же стиля dock-align. После этого свободное место, для расположения следующего вложенного компонента, уменьшается на величину занятого предыдущим вложенным компонентом места.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:DockLayout Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:DockLayout CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:DockLayout Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Controls | список | скрипт, только чтение | Возвращает список визуальных компонентов, вложенных в данный контейнер. | function HideContent(sender) { for(control in sender.Controls) control.Visible = false; } | - |
OnClick | функция | разметка | Задает ссылку на функцию из основного контроллера, вызываемую при нажатии на кнопку. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:DockLayout OnClick="$Print($editOutlet.Text)"/> function Print(sender, text) { Dialog.Message(text); sender.Visible = false; } | - |
OnClickAction | функция | разметка | Задает ссылку на функцию из основного контроллера, вызываемую при нажатии на кнопку. | <c:DockLayout OnClick="$Print($editOutlet.Text)"/> function Print(text) { Dialog.Message(text); } | - |
OnEvent | строка** | разметка | Задает событие, при выполнении которого будет вызвана функция, указанная в свойстве OnClick или OnClickAction. Пример события: Back - вызывается при нажатии на кнопку "Назад" в Android устройствах. | <c:DockLayout OnClick="$DoBack()" OnEvent="Back"/> | - |
SubmitScope | строка** | разметка и скрипт | Задает область валидации. Возможные значения: "all" - проверяются все компоненты окна; список идентификаторов компонентов через знак ";". Обратите внимание: постусловием для контейнеров является выполнение всех постусловий его потомков. | <c:DockLayout OnClick="$DoForward()" SubmitScope="edtName; grValues"/> <c:EditText Id="edtName" Required="true"/> <c:HorizontalLayout Id="grValues"> <c:EditText Id="edtAddress" Length="20"/> <c:EditText Id="edtUrl" Length="10"/> <c:EditText Id="edtPhone" Length="11" Mask="[0-9]+"/> </c:HorizontalLayout> | 2.3.3.107 |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
EditText
Однострочное поле ввода
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:EditText Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:EditText CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:EditText Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Text | строка** | разметка и скрипт | Задает текст, отображаемый в поле ввода. | <c:EditText Text="#helloworld#"/> | - |
Value | переменная | разметка | Задает свойство объекта, значение которого будет изменяться по мере ввода данных в поле. | <c:EditText Value="$orderitem.Qty"/> | - |
OnChange | функция | разметка | Задает ссылку на функцию*** из основного контроллера, вызываемую при изменении содержимого поля. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:EditText OnChange="$Validate()"/> | - |
OnGetFocus | функция | разметка | Задает ссылку на функцию*** из основного контроллера, вызываемую при выборе поля для редактирования. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:EditText OnGetFocus="$HideTooltip()"/> | - |
OnLostFocus | функция | разметка | Задает ссылку на функцию*** из основного контроллера, вызываемую при окончании редактирования. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:EditText OnLostFocus="$ShowTooltip()"/> | 2.2.2.91 |
Length**** | число | разметка и скрипт | Задает постусловие: максимальная длина текста в поле при валидации. | <c:EditText /> Length="8" | - |
Required**** | логический | разметка и скрипт | Задает постусловие: необходимость наличия текста в поле при валидации. | <c:EditText Required="true"/> | - |
Mask**** | строка** | разметка и скрипт | Задает постусловие: регулярное выражение, применяемое при валидации. Для того, что бы проверять на соответствие всю строку, а не только ее часть, необходимо экранировать выражение символами начала(^) и конца строки($). | <c:EditText Mask="^\d+$"/> | - |
AutoFocus | логический | разметка | Задает необходимость получения фокуса компонентом при загрузке экрана. Если данное свойство задано для нескольких компонентов на одном экране, фокус получит первый. | <c:EditText AutoFocus="True"/> | - |
Keyboard | auto | default | numeric | email | url | phone | разметка | Задает тип, выводимой при редактировании, клавиатуры. Если задано значение "auto", вид клавиатуры будет зависеть от типа данных, установленных в свойстве Value. | <c:EditText Keyboard="numeric"/> | - |
Placeholder | строка** | разметка и скрипт | Задает текст-подсказку, отображаемый в пустом поле. | <c:EditText Placeholder="#search#"/> | - |
Enabled | логический | разметка и скрипт | Задает доступность компонента для редактирования | <c:EditText Enabled="False"/> $.edtName.Enabled = false; | 2.4.0.110 |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
*** - первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке.
**** - данные свойства применяются при валидации
Методы
Метод | Описание | Параметры | Пример | Версия |
---|---|---|---|---|
SetFocus() | Устанавливает фокус на данном элементе | function LayoutClick(sender){ $.sender.Controls[0].SetFocus(); } | - |
Стили
HorizontalLayout
Контейнер. Содержит любое количество вложенных компонентов. Каждый вложенный компонент добавляется на экран в соответствие с очередностью, заданной в разметке. Каждый следующий вложенный компонент располагается правее предыдущего. Если сумма высоты и отступов компонента меньше высоты контейнера, расположение по вертикали определяется согласно стилю vertical-align вложенного компонента.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:HorizontalLayout Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:HorizontalLayout CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:HorizontalLayout Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Controls | список | скрипт, только чтение | Возвращает список визуальных компонентов, вложенных в данный контейнер. | function HideContent(sender) { for(control in sender.Controls) control.Visible = false; } | - |
OnClick | функция | разметка | Задает ссылку на функцию из основного контроллера, вызываемую при нажатии на кнопку. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:HorizontalLayout OnClick="$Print($editOutlet.Text)"/> function Print(sender, text) { Dialog.Message(text); sender.Visible = false; } | - |
OnClickAction | функция | разметка | Задает ссылку на функцию из основного контроллера, вызываемую при нажатии на кнопку. | <c:HorizontalLayout OnClick="$Print($editOutlet.Text)"/> function Print(text) { Dialog.Message(text); } | - |
OnEvent | строка** | Задает событие, при выполнении которого будет вызвана функция, указанная в свойстве OnClick или OnClickAction. Пример события: Back - вызывается при нажатии на кнопку "Назад" в Android устройствах. | <c:HorizontalLayout OnClick="$DoBack()" OnEvent="Back"/> | - | |
SubmitScope | строка** | Задает область валидации. Возможные значения: "all" - проверяются все компоненты окна; список идентификаторов компонентов через знак ";". Обратите внимание: постусловием для контейнеров является выполнение всех постусловий его потомков. | <c:HorizontalLayout OnClick="$DoForward()" SubmitScope="edtName; grValues"/> <c:EditText Id="edtName" Required="true"/> <c:HorizontalLayout Id="grValues"> <c:EditText Id="edtAddress" Length="20"/> <c:EditText Id="edtUrl" Length="10"/> <c:EditText Id="edtPhone" Length="11" Mask="[0-9]+"/> </c:HorizontalLayout> | 2.3.3.107 |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
HorizontalLine
Горизонтальная линия, выполняющая роль графического разделителя.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:HorizontalLine Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:HorizontalLine CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:HorizontalLine Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
Image
Графическое изображение. Если высота или ширина не задана (равна нулю), этот параметр вычисляется на основе пропорций исходного файла.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:Image Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:Image CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:Image Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Source | строка** | разметка | Задает путь к файлу изображения. Имеет больший приоритет, чем стиль. | <c:Image Source="\public\logo.jpg"/> | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
Indicator
Бесконечный круглый индикатор загрузки. Блокирует любое взаимодействие с UI во время анимации.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:Indicator Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:Indicator CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:Indicator Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Методы
Метод | Описание | Параметры | Пример | Версия |
---|---|---|---|---|
Start() | Запускает анимацию. Рекомендуется вызывать перед операцией синхронизации | function Sync(sender){ $.indicator.Visible = true; $.indicator.Start(); } | - | |
Stop() | Останавливает анимацию. Рекомендуется вызывать по окончании операции синхронизации, в функции обратного вызова. | function OnSync(sender){ $.indicator.Stop(); $.indicator.Visible = false; } | - |
Стили
MediaPlayer
Плеер, способный проигрывать видео записи из файловой системы. Для корректной работы на всех платформах желательно использовать mp4 файлы и задавать размеры проигрывателя соответственно содержимому.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:Button Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:Button CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:Button Id="main"/> function HideMain() { $.main.Visible = true; } | |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | |
Path | строка | разметка и скрипт | Задает пусть к медиа-файлу | <c:MediaPlayer Path="/private/movie.mp4"/> function Change(path) { $.player.Path = path; } | - |
AutoPlay | логический | разметка | Если задано true, воспроизведение начнется при открытии экрана | <c:MediaPlayer Path="/private/movie.mp4" AutoPlay="true"/> | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Методы
Метод | Описание | Параметры | Пример | Версия |
---|---|---|---|---|
Play() | Запускает воспроизведение. Возвращает true, если операция была произведена успешно | function Start(){ $.player.Play(); } | - | |
Pause() | Приостанавливает воспроизведение | function OnSwipeOut(){ $.player.Pause(); } | - | |
Stop() | Останавливает воспроизведение | function CloseNotification(){ $.player.Stop(); } |
Стили
Стиль | Версия |
---|---|
width | - |
height(ver. 2.6) | - |
margin-left(ver. 2.6) | - |
margin-top(ver. 2.6) | - |
margin-right(ver. 2.6) | - |
margin-bottom(ver. 2.6) | - |
horizontal-align(ver. 2.6) | - |
vertical-align | - |
dock-align(ver. 2.7) | - |
Версия
2.4.0.130
MemoEdit
Многострочное поле ввода
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:MemoEdit Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:MemoEdit CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:MemoEdit Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Text | строка** | разметка и скрипт | Задает текст, отображаемый в поле ввода. | <c:MemoEdit Text="#helloworld#"/> | - |
Value | переменная | разметка | Задает свойство объекта, значение которого будет изменяться по мере ввода данных в поле. | <c:MemoEdit Value="$orderitem.Qty"/> | - |
OnChange | функция | разметка | Задает ссылку на функцию*** из основного контроллера, вызываемую при изменении содержимого поля. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:MemoEdit OnChange="$Validate()"/> | - |
OnGetFocus | функция | разметка | Задает ссылку на функцию*** из основного контроллера, вызываемую при выборе поля для редактирования. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:MemoEdit OnGetFocus="$HideTooltip()"/> | - |
OnLostFocus | функция | разметка | Задает ссылку на функцию*** из основного контроллера, вызываемую при окончании редактирования. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:MemoEdit OnLostFocus="$ShowTooltip()"/> | 2.2.2.91 |
Length**** | число | разметка и скрипт | Задает постусловие: максимальная длина текста в поле при валидации. | <c:MemoEdit /> Length="8" | - |
Required**** | логический | разметка и скрипт | Задает постусловие: необходимость наличия текста в поле при валидации. | <c:MemoEdit Required="true"/> | - |
Mask**** | строка** | разметка и скрипт | Задает постусловие: регулярное выражение, применяемое при валидации. Для того, что бы проверять на соответствие всю строку, а не только ее часть, необходимо экранировать выражение символами начала(^) и конца строки($). | <c:MemoEdit Mask="^\d+$"/> | - |
AutoFocus | логический | разметка | Задает необходимость получения фокуса компонентом при загрузке экрана. Если данное свойство задано для нескольких компонентов на одном экране, фокус получит первый. | <c:MemoEdit AutoFocus="True"/> | - |
Keyboard | auto |default |numeric |email | url | phone | разметка | Задает тип, выводимой при редактировании, клавиатуры. Если задано значение "auto", вид клавиатуры будет зависеть от типа данных, установленных в свойстве Value. | <c:MemoEdit Keyboard="numeric"/> | - |
Placeholder | строка** | разметка и скрипт | Задает текст-подсказку, отображаемый в пустом поле. | <c:MemoEdit Placeholder="#search#"/> | - |
Enabled | логический | разметка и скрипт | Задает доступность компонента для редактирования | <c:EditText Enabled="False"/> $.edtName.Enabled = false; | 2.4.0.110 |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
*** - первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке.
**** - данные свойства применяются при вводе с использованием визуального компонента SubmitButton.
Методы
Метод | Описание | Параметры | Пример | Версия |
---|---|---|---|---|
SetFocus() | Устанавливает фокус на данном элементе | function LayoutClick(sender){ $.sender.Controls[0].SetFocus(); } | - |
Стили
Screen
Контейнер. Содержит не более одного вложенного компонента. Корневой элемент экрана.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:Screen Visible="false"> ... </c:Screen > function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:Screen CssClass="main_row"> ... </c:Screen > | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:Screen Id="main"> ... </c:Screen > function HideMain() { $.main.Visible = true; } | - |
Controls | список | скрипт, только чтение | Возвращает список визуальных компонентов, вложенных в данный контейнер. | function HideContent(sender) { for(control in sender.Controls) control.Visible = false; } | - |
StyleSheet | строка** | разметка | Задает название css файла, стили которого дополнительно применяются к экрану | <c:Screen StyleSheet="Order.css"> ... </c:Screen > | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
Стиль | Версия |
---|---|
background-color | - |
ScrollView
Контейнер. Содержит любое количество вложенных компонентов. Каждый вложенный компонент добавляется на экран в соответствие с очередностью, заданной в разметке. Вертикальный динамический список с областью прокрутки. Сохраняет свое положение при возвращение на предыдущий экран, если компоненту присвоен Id.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:ScrollView Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:ScrollView CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:ScrollView Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Controls | список | скрипт, только чтение | Возвращает список визуальных компонентов, вложенных в данный контейнер. | function HideContent(sender) { for(control in sender.Controls) control.Visible = false; } | - |
Index | число | разметка и скрипт | Задает индекс видимого элемента. Позволяет прокрутить список до соответствующего вложенного компонента, согласно очередности добавления. | function ScrollTo(scrollview, index) { scrollview.Index = index; } | - |
OnScroll | функция | разметка | Задает ссылку на функцию*** из основного контроллера, вызываемую при начале прокрутки списка. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:ScrollView OnScroll="$HideContent()"/> | - |
ScrollIndex | число | скрипт, только чтение | Возвращает индекс элемента, к которому пользователь прикасался при прокрутке | function OnLayoutClick(sender) { if($.scrollview.ScrollIndex != currentIndex) Hide(currentIndex); } | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
SwipeHorizontalLayout
Контейнер. Содержит любое количество вложенных компонентов. Каждый вложенный компонент добавляется на экран в соответствие с очередностью, заданной в разметке. Позволяет прокручивать компоненты с эффектом "прилипания". Алгоритм расположения вложений соответствует HorizontalLayout.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:SwipeHorizontalLayout Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:SwipeHorizontalLayout CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:SwipeHorizontalLayout Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Controls | список | скрипт, только чтение | Возвращает список визуальных компонентов, вложенных в данный контейнер. | function HideContent(sender) { for(control in sender.Controls) control.Visible = false; } | - |
Index | число | разметка и скрипт | Задает индекс видимого элемента. Позволяет прокрутить контейнер до соответствующего вложенного компонента, согласно очередности добавления. | <c:SwipeHorizontalLayout Id="main" Index="1"> ... </c:SwipeHorizontalLayout> function OpenMenu() { $.main.Index = 0; } | - |
Percent | число (0..100) | разметка и скрипт | Задает меру, на сколько необходимо прокрутить вложенный элемент контейнера, что бы он остался отображенным. | <c:SwipeHorizontalLayout Percent="25"> ... </c:SwipeHorizontalLayout> | - |
Alignment | Default | Center | разметка | Задает способ отображения вложенных компонентов. Если задать значение свойства как Center, они будут центрироваться. | <c:SwipeHorizontalLayout Alignment="Center"> ... </c:SwipeHorizontalLayout> | - |
Scrollable | логический | разметка и скрипт | Задает возможность прокручивать содержимое. Еслизадать значение свойства как false, единственным способом прокрутки будет изменение свойства Index. | <c:SwipeHorizontalLayout Scrollable= "False"> ... </c:SwipeHorizontalLayout> | - |
OnSwipe | функция | разметка | Задает ссылку на функцию*** из основного контроллера, вызываемую при прокрутке. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:SwipeHorizontalLayout OnSwipe="$HandleContentVisiblity()"> ... </c:SwipeHorizontalLayout> | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
TextView
VerticalLayout
Контейнер. Содержит любое количество вложенных компонентов. Каждый вложенный компонент добавляется на экран в соответствие с очередностью, заданной в разметке. Каждый следующий вложенный компонент располагается ниже предыдущего. Если сумма ширины и отступов компонента меньше ширины контейнера, расположение по вертикали определяется согласно стилю horizontal-align вложенного компонента.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:VerticalLayout Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:VerticalLayout CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:VerticalLayout Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Controls | список | скрипт, только чтение | Возвращает список визуальных компонентов, вложенных в данный контейнер. | function HideContent(sender) { for(control in sender.Controls) control.Visible = false; } | - |
OnClick | функция | разметка | Задает ссылку на функцию из основного контроллера, вызываемую при нажатии на кнопку. Первым параметром в функцию передается ссылка на объект (sender), последующим - объекты переданные в разметке. | <c:VerticalLayout OnClick="$Print($editOutlet.Text)"/> function Print(sender, text) { Dialog.Message(text); sender.Visible = false; } | - |
OnClickAction | функция | разметка | Задает ссылку на функцию из основного контроллера, вызываемую при нажатии на кнопку. | <c:VerticalLayout OnClick="$Print($editOutlet.Text)"/> function Print(text) { Dialog.Message(text); } | - |
OnEvent | строка** | разметка | Задает событие, при выполнении которого будет вызвана функция, указанная в свойстве OnClick или OnClickAction. Пример события: Back - вызывается при нажатии на кнопку "Назад" в Android устройствах. | <c:VerticalLayout OnClick="$DoBack()" OnEvent="Back"/> | - |
SubmitScope | строка** | разметка и скрипт | Задает область валидации. Возможные значения: "all" - проверяются все компоненты окна; список идентификаторов компонентов через знак ";". Обратите внимание: постусловием для контейнеров является выполнение всех постусловий его потомков. | <c:VerticalLayout OnClick="$DoForward()" SubmitScope="edtName; grValues"/> <c:EditText Id="edtName" Required="true"/> <c:HorizontalLayout Id="grValues"> <c:EditText Id="edtAddress" Length="20"/> <c:EditText Id="edtUrl" Length="10"/> <c:EditText Id="edtPhone" Length="11" Mask="[0-9]+"/> </c:HorizontalLayout> | 2.3.3.107 |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
WebImage
Изображение, получаемое по внешней ссылке.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:WebImage Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:WebImage CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:WebImage Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:WebImage OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Url | строка** | разметка | Задает полный или относительный адрес изображения. | <c:WebImage Url="http://imgstr.com/im.jpg"/> | - |
UrlType | Absolute |Relative | разметка | Задает вид адреса изображения: "Absolute" - абсолютный адрес; "Relative" - адрес, относительно <solution_url>/image/, например "/my_img.jpg" транслируется в "http://bitmobile2.cloudapp.net/demosr/image/my_img.jpg", если адрес решения"http://bitmobile2.cloudapp.net/demosr" | <c:WebImage UrlType="Absolute"/> | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
WebMapGoogle
Web версия карт GoogleMaps.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c: Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c: CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c: Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:Button OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Методы
Метод | Описание | Параметры | Пример | Версия |
---|---|---|---|---|
AddMarker(caption, latitude, longitude, color) | Добавляет маркер на карту | caption - заголовок маркера; latitude - широта точки; longitude - долгота точки; color - цвет маркера ("red", "green", "blue", "yellow", "orange") | function AddOutletLocation(outlet) { $.main.AddMarker("#marker#", outlet.Lat, outlet.Lon, "red"); } | - |
Стили
WebView
Веб страница, встроенная в разметку.
Свойства
Свойство | Тип* | Область | Описание | Пример | Версия |
---|---|---|---|---|---|
Visible | логический | разметка и скрипт | Задает видимость компонента. Если он невидим, его размеры, тем не менее, учитываются в контейнерах | <c:WebView Visible="false"/> function Hide(control) { control.Visible = false; } | - |
CssClass | строка** | разметка | Задает название CSS класса, стили которого будут применяться к данному компоненту | <c:WebView CssClass="main_row"/> | - |
Id | строка** | разметка | Задает идентификатор компонента в области видимости данного экрана. Таким образом можно получить доступ к его свойствам из произвольного места разметки или скрипта. Так же задавать значение идентификатора необходимо для сохранения состояния некоторых визуальных компонентов при возврате по бизнес процессу. | <c:WebView Id="main"/> function HideMain() { $.main.Visible = true; } | - |
Parent | компонент | разметка и скрипт, только чтение | Возвращает ссылку на родительский компонент. Возвращает null если текущий объект на верху дерева. | <c:WebView OnClick="$Hide($main.Parent)"/> function HideRoot() { $.main.Parent = false; } | - |
Url | строка** | разметка | Задает полный или относительный адрес страницы. | <c:WebView Url="https://google.com"/> | - |
* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа
** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.
Стили
Невизуальные компоненты
Объявление по умолчанию: xmlns:s="BitMobile.ValueStack".
Условные операторы ветвления
Атрибуты
Компонент | Атрибут | Тип | Описание | Пример | Версия |
---|---|---|---|---|---|
If | Test | строка | Задает логическое выражение | Test="$user_name != $current_user.Name" | - |
Пример:
<s:If Test="$user_name != $current_user.Name"> <s:If Test="$CheckUserName($user_name)"> <c:TextView Text="$user_name"/> <c:HorizontalLine /> </s:If> </s:If> <s:Else> <c:TextView Text="$current_user.Info"/> </s:Else>
Внедряет в разметку указанный подключаемый компонент
Атрибуты
Атрибут | Тип | Описание | Пример | Версия |
---|---|---|---|---|
File | строка | Задает имя файла с внедряемым кодом | File="Navigator.xml" | - |
Пример:
<c:Component xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack"> <c:DockLayout CssClass="navigator"> <c:Button CssClass="back" OnClick="$DoBack()"/> <c:Button CssClass="forward" OnClick="$DoForward()"/> <c:TextView Text="$screen_name"/> </c:DockLayout> </c:Component>
<s:Push Id="screen_name" Value="#user_info#"/> <s:Include File="\Components\Navigator.xml"/>
Производит итерацию по заданной коллекции
Атрибуты
Атрибут | Тип | Описание | Пример | Версия | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Id | строка | Задает идентификатор ссылки на текущий элемент итерируемой коллекции | Id="current_user" | - | ||||||||||
Value | коллекция | Задает итерируемую коллекцию | Value="$users" | - | ||||||||||
Status | строка | Задает идентификатор переменной статуса итерации Переменная статуса:
| Status="status_users" | - |
Пример:
<s:Iterator Id="current_user" Value="users" Status="status_users"> <s:Iterator Id="current_phone" Value="$GetPhonesByUser($current_user)"> <s:Push Id="index" Value="$status_users.Index"/> <c:TextView Text="{index}: {$current_phone}"/> <c:HorizontalLine/> </s:Iterator> </s:Iterator>
Добавляет новую переменную разметки или перезаписывает значение существующей
Атрибуты
Атрибут | Тип | Описание | Пример | Версия |
---|---|---|---|---|
Id | строка | Задает идентификатор переменной | Id="outlet" | - |
Value | объект | Задает значение переменной | Value="$GetOutlet()" | - |
Пример:
<s:Push Id="outlet" Value="$GetOutlet"/> <s:Push Id="old_outlet" Value="$outlet"/> <s:Push Id="outlet" Value="$CloneOutlet($outlet)" />
Скрипт
JavaScript код (контроллер), отвечающий за логику приложения
Расположение: device/<application_name>/Script/
Для того, что бы задать контроллер для шага рабочего процесса необходимо установить значение атрибута Controller в Step или Workflow. Если он задан в обоих случаях, использоваться будет контроллер шага рабочего процесса (Step):
<bp:Workflow Name="Main" Controller="Main\Main.js"> <bp:Step Name="Menu" Screen="Main.xml" > <bp:Action Name="Help" NextStep="Help" /> </bp:Step> <bp:Step Name="Help" Screen="Help.xml" Controller="Main\Help.js"/> </bp:Workflow>
Таблицы стилей
Каскадные таблицы стилей (CSS), отвечающие за внешний вид экранов приложения
Расположение: device/<application_name>/Style/Default/
Для того, что бы задать таблицу стилей по умолчанию, необходимо объявить ее в файле конфигурации:
<?xml version="1.0" encoding="utf-8" ?> <c:Configuration xmlns:c="BitMobile.Configuration" xmlns:s="BitMobile.ValueStack"> ... <c:Style> <c:DefaultStyles> <c:DefaultStyle File="default.css" /><!-- Стили по умолчанию --> <s:If Test="$isTablet"> <c:DefaultStyle File="tablet.css" /><!-- Стили, специфичные для планетов --> </s:If> <s:Else> <c:DefaultStyle File="phone.css" /><!-- Стили, специфичные для телефонов--> </s:Else> <s:If Test="$common.OS == 'Android'"> <c:DefaultStyle File="android.css" /><!-- Стили, специфичные для Android устройств--> </s:If> <s:If Test="$common.OS == 'IOS'"> <c:DefaultStyle File="ios.css" /><!-- Стили, специфичные для IOS устройств--> </s:If> <c:DefaultStyle File="common.css" /><!-- Общие стили --> </c:DefaultStyles> </c:Style> ... </c:Configuration>
Кроме того, таблицу стилей можно задать для каждого конкретного экрана через атрибут StyleSheet в компоненте <c:Screen/>:
<c:Screen xmlns:c="BitMobile.Controls" xmlns:s="BitMobile.ValueStack" StyleSheet="Main.css"> ... </c:Screen>
В случае пересечения стилей, приоритет остается за последним описанным или заданным для конкретного экрана стилем.
Зададим внешний вид по умолчанию для кнопки:
Button{ height: 4mm; width: 100%; font: 80% arial; }
Укажем, что в Android устройствах кнопки должны быть высотой 5mm и поменяем их шрифт на специфичный для платформы:
Button{ height: 5mm; font-family: roboto; }
Так как common.css объявлена позже остальных таблиц стилей, мы можем описывать в ней специфичные классы, стили которых будут переопределять заданные по умолчанию:
.menu-button{ font-size: 70%; }
Но, таблица стилей, заданная для экрана имеет максимальный приоритет:
Button{ font-size: 50%; } .menu-button{ font: 80% arial; }
Добавить комментарий