Структура мобильного приложения


Каждое решение, написанное на основе платформы Grotem имеет одинаковую внутреннюю структуру:

 

  • device
    •  app
      • BusinessProcess
      • Configuration
      • Image
      • Screen
      • Script
      • Style
      • Translation
  • server
    • css
    • image
    • script
    • view
  • settings.xml

 

device


В каталоге device располагаются все исполняемые файлы мобильной части решения.

 / BusinessProcess - содержит файл BusinessProcess.xml со структурой бизнес процессов,  определяющей:

  • навигацию внутри решения;
  • подключение контролеров;
  • подключение дополнительных файлов с разметкой.

 

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> - указываются глобальные событиями и модули и миксины, к которым можно будет обращаться из любого экрана мобильного приложения.

Configuration.xml
<?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 - файлы локализации приложения. Каждый файл локализации содержит массив пар ключ/значение.

en.txt
forward     Next
back        Back
summary     Summary


ru.txt
forward     Далее
back        Назад
summary     Сводная информация

server


В каталоге server располагаются все исполняемые файлы административной части решения.

/css - CSS-стили приложения

/image - графические файлы, используемые в дизайне

/script - файлы с основным кодом приложения

/view - файлы, определяющие расположение визуальных компонентов экрана.

settings.xml


Файл настроек решения 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 режима:

  1. "ServerWins" - данные мобильного агента не сохраняются в базе данных.
  2. "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>

 

Термины и определения


Локализация


В директории /Translation находятся файлы, отвечающие за локализацию мобильного приложения. Каждый файл локализации содержит массив пар ключ/значение.
en.txt
forward     Next
back        Back
ru.txt
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/>.

Визуальные компоненты


Пространство имен: 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"/>
-
Keyboardauto | 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();
}
 

Стили

Версия

 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"/>
-
Keyboardauto |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>
-
AlignmentDefault | 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"/>
-
UrlTypeAbsolute |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"/>
-

* - в качестве параметра можно передавать константу, переменную, функцию или свойства соответствующего типа

** - при установке строкового свойства в разметке, применяются особые правила форматирования текста.

Стили

Невизуальные компоненты


Пространство имен: BitMobile.ValueStack.

Объявление по умолчанию: xmlns:s="BitMobile.ValueStack".

Условные операторы ветвления

Атрибуты

КомпонентАтрибутТипОписаниеПримерВерсия
IfTestстрокаЗадает логическое выражение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строка

Задает идентификатор переменной статуса итерации

Переменная статуса:

СвойстваТипОписаниеПримерВерсия
Indexчисло, целоеВозвращает порядковый номер текущего элемента в итерацииValue="$status_users.Index"-
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>

В случае пересечения стилей, приоритет остается за последним описанным или заданным для конкретного экрана стилем.

Зададим внешний вид по умолчанию для кнопки:

default.css
Button{
    height: 4mm;
    width: 100%;
    font: 80% arial;
}

Укажем, что в Android устройствах кнопки должны быть высотой 5mm и поменяем их шрифт на специфичный для платформы:

android.css
Button{
    height: 5mm;
    font-family: roboto;
}

Так как common.css объявлена позже остальных таблиц стилей, мы можем описывать в ней специфичные классы, стили которых будут переопределять заданные по умолчанию:

common.css
.menu-button{
    font-size: 70%;
}

Но, таблица стилей, заданная для экрана имеет максимальный приоритет:

Main.css
Button{
    font-size: 50%;
}
 
.menu-button{
    font: 80% arial;
}

 

 

  • Нет меток
Написать комментарий...