Введение#

Контролы – элементы интерфейса, располагаются на форме документа и описываются в XML-файле макета формы. Контролы служат как для управления работой программы, так и для вывода информации. По сложности работы, контролы условно можно разделить на:

Простые (кнопка, текстовое поле, чекбокс)

Сложные (таблица, чарт)

В описании контрол может содержать свойства и события. Пример:

В xml-файле макета

1	`<TextBox caption='Наименование' id='TextBoxName' valueChanged='TextBoxName_valueChanged' />`

В js-файле класса формы:

1
2
3

TextBoxName_valueChanged(s, e) {
    // реализация
  }

Текстовое поле содержит заголовок «Наименование» и идентификатор «TextBoxName», а так же название функции «TextBoxName_valueChanged», которая вызовется в классе при событии изменения значения в поле. В классе уже описывается логика работы.

В классе все контролы находятся в объекте controls, например, изменение доступности кнопки «Button1»:

1	`this.controls.Button1.enabled = false`

TextBox#

Текстовое поле, содержит заголовок и область для ввода/вывода текста.

Свойства

Наименование	Тип	Описание
bind	Строка	свойство, к которому биндится контрол
caption	Строка	заголовок контрола
captionTextAlign	Строка	выравнивание текста заголовка контрола. По умолчанию значение left. Разрешенные значения: left, right (доступно с версии 3.26.0)
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки). По умолчанию значение 1
editorWidth	Число	ширина контрола в колонках (для Bootstrap-верстки). По умолчанию значение 2
enabled	Bool	доступность контрола для редактирования. По умолчанию значение true
hint	Строка	всплывающая подсказка, которая появляется при наведении на контрол
id	Строка	nan
mask	Строка	структура маски. По умолчанию значение- пустая строка
maxLength	Число	максимальная длина строки. По умолчанию значение null
placeholder	Строка	вспомогательный текст в поле ввода контрола
readOnly	Bool	режим "только для чтения". По умолчанию значение false
tags	Строка	позволяет объединять контролы в группы, возвращает массив имен
validCharacters	Строка	список допустимых символов. По умолчанию значение null
value	Строка	значение контрола без биндинга
visible	Bool	видимость контрола. По умолчанию значение true
width	Строка	ширина контрола

Примеры:

Текстовое поле с маской для ввода

1	`<TextBox id="textBoxMask" editorWidth="2" captionWidth="3" caption="Ввод по маске ###-LLL-AAAA-[0-9A-F]" mask="###-LLL-AAAA-[0-9A-F]"/>`

Тестовое поле с ограниченным набором допустимых символов

<TextBox id="textBoxMask" editorWidth="2" captionWidth="3" caption="Ввод определенных символов" validCharacters="#KLOP123456" hint="Разрешённые символы: #KLOP123456" />

Тестовое поле ограниченной длины

<TextBox id="textBoxMask" editorWidth="2" captionWidth="3" caption="Ограниченная длина и символы" maxLength="10" validCharacters="1234567890" hint="Только 10 цифр" />

Текстовое поле по маске для ввода номера телефона

1	`<TextBox id="textBoxMask" editorWidth="2" captionWidth="3" caption="Ввод телефона" mask="8-(###)-###-##-##" hint="Маска: 8-(###)-###-##-##"/>`

Text#

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

Свойства

Наименование	Тип	Описание
bind	Строка	свойство, к которому биндится контрол
caption	Строка	заголовок контрола
captionColor	Строка	цвет текста заголовка.
captionFontSize	Строка	размер текста заголовка. Строка в формате Npx, где N - число
captionFontStyle	Строка	стиль начертания шрифта заголовка контрола. По умолчанию normal. Разрешеные значения: normal, italic, oblique
captionFontWeight	Строка	насыщенность шрифта заголовка контрола.По умолчанию normal. Разрешеные значения: normal, bold, bolder, lighter, number
captionTextAlign	Строка	выравнивание текста заголовка контрола. По умолчанию значение left. Разрешенные значения: left, right
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки). По умолчанию значение 1
editorWidth	Число	ширина контрола в колонках (для Bootstrap-верстки). По умолчанию значение 2
fontColor	Строка	цвет текста контрола
fontSize	Строка	размер текста контрола. Строка в формате Npx, где N - число
fontStyle	Строка	стиль начертания шрифта текста контрола. По умолчанию normal. Разрешеные значения: normal, italic, oblique
fontWeight	Строка	насыщенность шрифта текста контрола.По умолчанию normal
hint	Строка	всплывающая подсказка, которая появляется при наведении на контрол
id	Строка
tags	Строка	позволяет объединять контролы в группы, возвращает массив имен
textAlign	Строка	выравнивание текста контрола. По умолчанию значение left. Разрешенные значения: left, right, center
value	Строка	значение контрола без биндинга
visible	Bool	видимость контрола. По умолчанию значение true

Примеры:

Без дополнительного форматирования

1	`<Text id="simpleText" editorWidth="2" captionWidth="3" caption="Простой текст" value="СООБЩЕНИЕ" />`

с форматированием заголовка

<Text id="captionOptions" editorWidth="2" captionWidth="3" caption="Оформление заголовка" value="СООБЩЕНИЕ" captionTextAlign="right" captionFontStyle="oblique" captionFontWeight="bolder" captionColor="teal" captionFontSize="15px"/>

с форматированием значения

<Text id="valueOptions" editorWidth="2" captionWidth="3" caption="Оформление значения" value="СООБЩЕНИЕ" fontStyle="italic" fontWeight="lighter" fontColor="purple" textAlign="left" fontSize="20px"/>

NumberInput#

Поле для ввода/вывода числового значения. Состоит из заголовка и части для ввода/вывода числа.

Свойства:

Наименование	Тип	Описание
bind	Строка	свойство, к которому биндится контрол
caption	Строка	заголовок контрола
captionTextAlign	Строка	выравнивание текста заголовка контрола. По умолчанию значение left. Разрешенные значения: left, right (доступно с версии 3.26.0)
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки). По умолчанию значение 1
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки). По умолчанию значение 1
decimalDigits	Число	количество знаков дробной части. По умолчанию значение 0
digits	nan	количество знаков целой части. По умолчанию значение 12
editorWidth	Число	ширина контрола в колонках (для Bootstrap-верстки). По умолчанию значение 2
enabled	Bool	доступность контрола для редактирования. По умолчанию значение true
groupping	Bool	отвечает за то, нужно ли применять "денежное форматирование" с разделением по разрядам. По умолчанию значение true
hint	Строка	всплывающая подсказка, которая появляется при наведении на контрол
id	Строка	nan
max	Число	максимально допустимое значение. По умолчанию значение 999999999999999
min	Число	минимально допустимое значение. По умолчанию значение -999999999999999
placeholder	Строка	вспомогательный текст в поле ввода контрола
readOnly	Bool	режим "только для чтения". По умолчанию значение false
showSpinButtons	Bool	позволяет скрыть/отобразить кнопки для изменения значения целой части числа на 1. По умолчанию значение false
symbol	Строка	символ отображающийся рядом со значением. По умолчанию значение пустая строка
symbolPosition	Число	положение символа относительно значения
tags	Строка	позволяет объединять контролы в группы, возвращает массив имен
value	Число	nan
visible	Bool	видимость контрола. По умолчанию значение true
width	Строка	nan

Примеры:

Ограничение значения (от -100 до 100).

1	`<NumberInput id="limitedNumberInput" caption="Пределы значений" captionWidth="2" editorWidth="1" min="-100" max="100"/>`

Знаки до и после запятой.

1	`<NumberInput id="decimalNumberInput" caption="Знаки до и после запятой" captionWidth="2" editorWidth="1" digits="6" decimalDigits="6"/>`

Денежный формат (2 знака после запятой).

1	`<NumberInput id="moneyNumberInput" caption="Денежное форматирование" captionWidth="2" editorWidth="1" decimalDigits="2" groupping="true"/>`

Денежный форма (с символом).

<NumberInput id="moneyNumberInput" caption="Денежное форматирование и символ" captionWidth="2" editorWidth="1" decimalDigits="2" groupping="true" symbol=" руб" symbolPosition="right" hint="Символ слева"/>

Memo#

Контрол Memo предоставляет более комфортный способ ввода и отображения текстовых данных большого объема. Для этого в контроле реализован режим редактирования во всплывающем окне (свойство editMode) и режим, поддерживающий форматирование текста (свойство format). Также можно настроить количество отображаемых строк текста (свойство controlRows).

Свойства:

Наименование	Тип	Описание
bind	Строка	свойство, к которому биндится контрол
caption	Строка	заголовок контрола
captionTextAlign	Строка	выравнивание текста заголовка контрола. По умолчанию значение left. Разрешенные значения: left, right (доступно с версии 3.26.0)
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки). По умолчанию значение 1
controlRows	Число	количество однострочных контролов, по общей высоте которых (с учетом расстояния между ними) вычисляется высота memo
editMode	Bool	режим редактирования (значения: popup, inline). По умолчанию значение inline. Для memo в гриде - только popup.
editorWidth	Число	ширина контрола в колонках (для Bootstrap-верстки). По умолчанию значение 2
enabled	Bool	доступность контрола для редактирования. По умолчанию значение true
format	Строка	задает формат редактирования/отображения текста. Значения: html, text. По умолчанию значение text
hint	Строка	всплывающая подсказка, которая появляется при наведении на контрол
id	Строка	nan
placeholder	Строка	вспомогательный текст в поле ввода контрола
readOnly	Bool	режим "только для чтения". По умолчанию значение false
tags	Строка	позволяет объединять контролы в группы, возвращает массив имен
value	Строка	задает значение контрола.
visible	Bool	видимость контрола. По умолчанию значение true
width	Строка	nan

Примеры:

Поле с 5 строками.

1	`<Memo id="memoInput" caption="Большой текст" captionWidth="1" editorWidth="4" controlRows="5"/>`

Поле с всплывающим окном для редактирования.

1	`<Memo id="memoInputPopup" caption="Всплывающий редактор" captionWidth="1" editorWidth="4" controlRows="3" editMode="popup"/>`

Поле с всплывающим тестом в формате HTML.

1	`<Memo id="memoInputFormat" caption="Всплывающее окно и формат" editorWidth="4" captionWidth="1" controlRows="3" editMode="popup" format="html"/>`

DateTimeInput#

Контрол DateTimeInput предоставляет возможность ввода даты / времени.

Свойства:

Наименование	Тип	Описание
bind	Строка	свойство, к которому биндится контрол
bindingMode	Строка	позволяет биндить контрол на тип данных Time (значение time) или DateTimeOffset/Date (значение date).
calendarButtonVisible	Bool	флаг отображения кнопки вызова календаря
caption	Строка	заголовок контрола
captionTextAlign	Строка	выравнивание текста заголовка контрола. По умолчанию значение left. Разрешенные значения: left, right (доступно с версии 3.26.0)
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки)
editorWidth	Число	ширина контрола в колонках (для Bootstrap-верстки)
enabled	Bool	доступность контрола для редактирования. По умолчанию значение true
format	Строка	формат значения. По умолчанию значение dd.MM.yyyy HH:mm
hint	Строка	всплывающая подсказка, которая появляется при наведении на контрол
id	Строка	nan
placeholder	Строка	вспомогательный текст в поле ввода контрола
readOnly	Bool	режим "только для чтения". По умолчанию значение false
showCalendar	Bool	скрыть/показать календарь
showTimePicker	Bool	скрыть/показать окно с выбором времени
tags	Строка	позволяет объединять контролы в группы, возвращает массив имен
value	Строка	значение, которое устанавливается контролу в случае отсутствия биндинга. В случае если биндинг назначен - будет установлено значение из прибинденного поля
visible	Bool	видимость контрола. По умолчанию значение true
width	Строка	Ширина контрола

Примеры:

Поле ввода даты и времени.

1	`<DateTimeInput id="dateTimeInput" caption="Календарь" captionWidth="1" editorWidth="2"/>`

Поле ввода даты с форматированием.

1	`<DateTimeInput id="dateTimeFormat" caption="Настраиваемый формат" captionWidth="1" editorWidth="2" format="yyyy-MM-dd"/>`

Календарь отключён, ввод с клавиатуры.

1	`<DateTimeInput id="dateTimeManual" caption="Отключенная кнопка" captionWidth="1" editorWidth="2" calendarButtonVisible="false" hint="Ввод с клавиатуры"/>`

123

1	`<DateTimeInput id="dateTimeDisplay" caption="Выбор даты и времени" captionWidth="1" editorWidth="2" showTimePicker="true"/>`

Поле ввода времени.

1	`<DateTimeInput id="timeDisplay" caption="Выбор времени" captionWidth="1" editorWidth="2" format="HH:mm" showTimePicker="true" showCalendar="false" bindingMode="time"/>`

CheckBox#

Элемент управления, предназначенный для выбора логического значения (true или false), выглядит как галочка.

Свойства:

Наименование	Тип	Описание
bind	Строка	свойство, к которому биндится контрол
caption	Строка	заголовок контрола
captionTextAlign	Строка	выравнивание текста заголовка контрола. По умолчанию значение left. Разрешенные значения: left, right
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки)
editorWidth	Число	ширина контрола в колонках (для Bootstrap-верстки)
enabled	Bool	доступность контрола для редактирования
hint	Строка	всплывающая подсказка, которая появляется при наведении на контрол
id	Строка	nan
tags	Строка	позволяет объединять контролы в группы, возвращает массив имен
value	Bool	значение контрола без биндинга
visible	Bool	видимость контрола. По умолчанию значение true
width	Строка	Ширина контрола

Примеры:

Галочка с заголовком.

1	`<CheckBox id="checkBox" caption="Пример галки" captionWidth="1" editorWidth="1" />`

Button#

Контрол Button выглядит как кнопка.

Свойства:

Наименование	Тип	Описание
captionTextAlign	Строка	выравнивание текста заголовка контрола. По умолчанию значение left. Разрешенные значения: left, right
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки). По умолчанию значение 1
editorWidth	Число	ширина контрола в колонках (для Bootstrap-верстки). По умолчанию значение 2
enabled	Bool	доступность контрола для редактирования. По умолчанию значение true
hint	Строка	всплывающая подсказка, которая появляется при наведении на контрол
id	Строка	nan
tags	Строка	позволяет объединять контролы в группы, возвращает массив имен
value	Строка	текст на кнопке
visible	Bool	видимость контрола. По умолчанию значение true
width	Строка	nan

Примеры:

Простая кнопка. Реализация события нажатия должна быть описана в функции "simpleButtonClick" в классе формы.

1	`<Button id="simpleButton" value="Нажать cюда" captionWidth="0" editorWidth="1" clicked="simpleButtonClick" />`

FileUpload#

Контрол FileUpload даёт возможность пользователю загружать и скачивать файлы с сервера.

Свойства:

Наименование	Тип	Описание
bind	Строка	свойство, к которому биндится контрол
caption	Строка	заголовок
captionTextAlign	Строка	выравнивание текста заголовка контрола. По умолчанию значение left. Разрешенные значения: left, right
captionWidth	Число	ширина заголовка в колонках (для Bootstrap-верстки)
editorWidth	Число	ширина контрола в колонках (для Bootstrap-верстки)
fileId	Строка	уникальный идентификатор, использующийся для составления url, по которому будет загружен файл
hint	Строка	всплывающая подсказка, которая появляется при наведении на контрол
id	Строка	nan
tags	Строка	позволяет объединять контролы в группы, возвращает массив имен
visible	Bool	видимость контрола. По умолчанию значение true
width	Строка	nan

Методы:

Наименование

Описание

choose

статический метод класса FileUpload. Предназначен для выбора файла и загрузки его в базу данных. Метод в качестве параметров принимает объект, содержащий свойства:
multiple - флаг, разрешающий загрузку нескольких файлов. По умолчанию значение false. Разрешенные значения: true, false.
deniedExtensions - список запрещенных к загрузке расширений файлов. По умолчанию пустой массив.
maxSize - максимально допустимый размер загружаемого файла в Кбайтах.

Примеры:

Простой выбор файла для загрузки.

1	`<FileUpload id="fileUpload" captionTextAlign="right" caption="Выберите новый файл"/>`