Добавляет атрибут align-items в HTML элемент. Если свойство не задано, то атрибут не добавляется.
См. AlignItems.
Подробное описание способов выравнивания элементов смотрите здесь.
Расплагает элемент в одну из девяти позиций:
Свойство указывает на наличие полосы прокрутки. Если значение true, то добавляет атрибут overflow-auto в HTML элемент.
Свойство указывающее на данные.
ПРИМЕР данных
const person = {
"firstName": "Иван",
"secondName": "Иванович",
}
ПРИМЕР описания формы, где в коментариях указано, какие данные будет содержать элемент, после установки данных AppManager.forms.setData('dataForm', person).
export var form: IForm = <IForm>{
...
name: "dataForm",
bindingProperty: '', //data = {"firstName": "Иван", "secondName": "Иванович"}
elements: [
<IProperty>{
...
bindingProperty: 'firstName', //data = "Иван"
},
<IProperty>{
...
bindingProperty: 'secondNamae', //data = "Иванович"
},
<IButton>{
...
onClick: function () {
alert("Data sent!")
}
},
]
}
Как система управляет данными в элементах формы смотрите {@link UseData | здесь}
Устанавливает окантовку элементу управления. По умолчанию false.
Заголовок элемента.
ПРИМЕР
export var list: IList = <IList>{
...
caption: "Список продуктов",
...
}
Заголовок отображается в верхней части элемента. Например:
<div class='app ui-list' id='a57cf348' name='productsList'>
'Список продуктов'
<div class='menu fixed'>...</div>
<div class='content flexible'>...</div>
<div>
Заголовок подставляется в текст элемента, если свойство IElement.value не задано, для следующих элементов: IElement, IDataElement, IButton, IMenuItem.
Описывает контекстное меню элемента.
Возвращает узел HTML элемента.
ПРИМЕР
export var list: IList = <IList>{
... ,
onclick: function(form: IForm, elem: IList, item: IListItem): Promise<void> {
var dom: HTMLElement = elem.dom; //IList inherit IElement
}
}
Возвращает узел HTML элемента контента. Так как IElement.dom разделяется на два элемента menu и content.
Возвращает узел HTML элемента меню. Так как IElement.dom разделяется на два элемента menu и content.
Свойство, указывающее на способ позиционирования элемента внутри группы (по умолчанию гибкое - flexible):
См. Flex.
Возвращает форму (IForm), которой принадлежит элемент.
ПРИМЕР
export var list: IList = <IList>{
... ,
async onClick(e: IMouseEvent, form: IForm, elem: IList, item: IListItem): Promise<boolean> {
var _form: IForm = elem.form; //IList inherit IElement
return true;
}
}
Устанавливает в элемент гиперссылку
let elem: IElement = <IElement>{
type: 'IElement',
href: 'https://ui-organizer.ru',
value: 'ui-organizer',
}
Результат:
<div class='app ui-element'>
<a href='https://ui-organizer.ru'>ui-organizer</a>
</div>
Возвращает идентификатор элемента. Идентификатор задается системой при создании элемента.
ПРИМЕР
export var list: IList = <IList>{
... ,
async onСlick(event:UIMouseEvent, form: IForm, elem: IList, item: IListItem): Promise<void> {
console.log(`Идентификатор элемента ${elem.id}`);
}
}
Из идентификатора формируется атрибут id HTML элемента.
Результат следующий:
<div class="..." id="abcff8d5" />
По id, также осуществляется доступ к элементу формы из любого метода объекта:
AppManager.ActiveForm.getElementById('abcff8d5');
Выравнивание текста внутри элемента. Так как все элементы являются флекс контейнерами,
то и выравнивание внутри элемента или группы происходит с использованием HTML стиля justify-content.
Подробное описание способов выравнивания элементов смотрите здесь.
ПРИМЕР
export var someGroup: IGroup = <IGroup>{
...
justifyContent: JustifyContent.start,
...
}
Если задано, то соответствующий класс будет добавлен к html элементу.
<div class='... left'/>
.left{
justify-content: left
}
Описывает меню элемента. Это меню встроится в элемент в соотвествии с {@link IMenuElement.menuPosition}.
Указывает где разместить меню внутри элемента (top, bottom, left, right).
Наименование элемента латиницей. Не должно содержать управляющих символов и пробелов. Необязательно.
ПРИМЕР
export var productsList: IList = <IList>{
...
name: 'productsList',
...
}
Из названия формируется атрибут name HTML элемента.
Результат следующий:
<div class="..." name="productsList" />
По названию, также осуществляется доступ к элементу формы из любого метода объекта:
AppManager.ActiveForm.getElement('productsList');
Возвращает элемент (наследник IContextElement), которому принадлежит этот элемент.
ПРИМЕР
export var elem: IElement = <IElement>{
... ,
async onClick(e: IMouseEvent, form: IForm, elem: IElement, item: IElement): Promise<boolean> {
var owner: IContextElement = elem.owner;
return true;
}
}
Элемент:
Возвращает родительскую группу (IGroup), которой принадлежит элемент.
ПРИМЕР
export var list: IList = <IList>{
... ,
async onClick(e: IMouseEvent, form: IForm, elem: IList, item: IListItem): Promise<boolean> {
var form: IGroup = elem.parent; //IList inherit IElement
return true;
}
}
Элемент:
Устанавливает элемент в абсолютную позицию. Чаще испльзуется для задания контекстного меню или всплывающего диалога.
ПРИМЕР
export var list: IList = <IList>{
...
positionAbsolute: true,
...
}
Если задано, и значение true, то к html элементу добавляется класс positionAbsolute.
CSS
.positionAbsolute{
position: absolute;
}
Доступность элемента только для чтения.
ПРИМЕР
export var list: IList = <IList>{
...
readonly: true,
...
}
Если значение true, то к html элементу добавляется класс readonly.
<div class="... readonly"/>
Позволяет разработчикам делать элементы управления фокусируемыми, разрешать или запрещать их последовательную фокусировку (обычно с помощью клавиши tab, отсюда и название) и определять их относительный порядок для последовательной навигации между элементами формы
Порядок навигации (при нажатии клавиши tab) следующий:
Возможность выделения текста внутри элемента на html странице.
ПРИМЕР
export var list: IList = <IList>{
...
textSelect: false,
...
}
Если задано, и значение false, то к html элементу добавляется класс unselectable.
CSS
.unselectable {
user-select: none;
}
Свойство, которое описывает тип объекта, который будет создан. Тип должет реализовывать этот интерфейс. В примере ниже тип UIList реализует интерфейс IList.
ПРИМЕР
export var list: IList = <IList>{
type: 'IList',
...
}
По типу объекта формируется название класса HTML элемента. Для этого в начало типа добавляется префикс: "ui-".
Для html элемента объекта из примера результат следующий:
<div class="... ui-list" id="..." />
Текст HTML элемента.
Если вы хотите установить текст HTML элемента IContextElement задайте значение value.
В процессе описания:
let contextElem: IContextElement = <IContextElement>{
type: 'IContextElement',
value: 'Элемент с меню и контекстным меню'
}
Либо в процессе выполнения:
let contextElem: IContextElement = <IContextElement>{
type: 'IContextElement',
onAfterLoad: async function (event: UILoadEvent, form: IForm, elem: IContextElement) {
elem.value = 'Элемент с меню и контекстным меню';
}
}
Результат следующий:
<div class='app ui-context-element' id='a57cf348'>
<div class='menu fixed'>...</div>//Не добавляется если не указано свойство menu
<div class='content flexible'>
Элемент с меню и контекстным меню
</div>
<div>
В отличие от элементов IElement, IDataElement, IButton, IMenuItem, - IElement.caption и IElement.name не влияют на содержание
.Если value == undefined, то значение устанавливается из данных при первоначальном заполнении и последующих вызовах метода setData() для всех наследников IDataElement.
Видимость элемента.
ПРИМЕР
export var list: IList = <IList>{
...
visibility: true,
...
}
При установке значения генерируются события:
visibility = true,visibility = false.ПРИМЕР прослушивания этих событий
function addListener(elem: IElement) {
elem.on("hide", ()=>{
console.log("Элемент скрыт");
})
}
Добавляет класс к HTML элементу.
ПРИМЕР
function someFunction(elem: IElement) {
elem.addClass("someClass");
}
РЕЗУЛЬТАТ
<div class="someClass"></div>
Описание addListener() в StrictEventEmitter
Добавляет стиль к HTML элементу.
addStyle('color', 'grey');
Добавит к HTML элементу атрибут style:
<div class='app ui-element' style='color:grey;'>
Название свойства, например: color
Значение свойства, например: grey
Убирает фокус с элемента.
Собирает данные со всех подэлементов. Внутреннее свойство _data остается неизменным. т.е. метод getData() вернет данные, переданные изначально.
Подробнее в getData().
Любые данные (обычно данные родительского объекта) или undefined.
Возвращаемые данные зависят от передаваемых данных.
Вызывает режим редактирования элемента. По завершении редактирования устанавливает значение IElement.value. Возвращает результат редактирования.
Идентификатор подэлемента (если есть). Если не указан, то используется идентификатор самого элемента IElement.id или идентификатор выбранного подэлемента, например, выбранная строка в списке IList.
Описание emit() в StrictEventEmitter
Устанавливает фокус на элементе.
Получает данные элемента, записанные во внутреннем свойстве _data. Во внутреннем свойстве _data хранятся изначальные данные (если вы их, конечно, не изменяяете в методах) и не зависят от изменений подэлементов.
ПРИМЕР сначала устанавливаем данные
export var dataElem: IDataElement = <IDataElement>{
type: 'IDataElement',
name: 'dataElement',
bindingProperty: "firstName"
}
...
(async function setData(){
var elem = AppManager.activeForm.getElement("dataElement");
await elem.setData({firstName: "Иван"});//во внутреннем свойстве elem._data сохранены данные "Иван".
})();
ПРИМЕР теперь получаем данные:
var elem = AppManager.activeForm.getElement("dataElement");
console.log(elem.getData({firstName: "Петр", secondName: "Петров"}));
{
firstName: "Иван",
secondName: "Петров"
}
var elem = AppManager.activeForm.getElement("dataElement");
console.log(elem.getData({}));
{
firstName: "Иван"
}
undefined, тогда будут возвращены непосредственно данные элемента. var elem = AppManager.activeForm.getElement("dataElement");
console.log(elem.getData(undefined));
"Иван"
Любые данные (обычно данные родительского объекта) или undefined.
Возвращаемые данные зависят от передаваемых данных.
Осуществляет поиск элемента по названию.
Название элемента
Если true, то выдает исключение.
Возвращает название типа элемента: "RuntimeElement", "RuntimeDataElement" и т.д.
Проверяет наличие класса в HTML элементе.
Имеет ли элемент фокус.
Проверяет тип элемента. Тип элемента, который определен в свойстве IElement.type.
Описание removeListener() в StrictEventEmitter
Описание on() в StrictEventEmitter
Этот метод вызывается после редактирования элемента в результате вызова метода IElement.edit.
Для получения или изменения значения после редактирования используйте UIEditEvent.value.
По завершении метода результат редактирования UIEditEvent.value будет подставлен в IElement.value.
Так как редактирование завершено вызов UIEditEvent.stop игнорируется.
На данные (если элемент - наследник IDataElement) возвращаемое значение никак не влияет. Если вы хотите изменить данные элемента вызывайте метод this.setData(...).
ПРИМЕР
export var form: IForm = <IForm>{
type: 'IForm',
name: "emptyForm",
...
elements: [
<IElement> {
type: 'IElement',
name: 'elem',
async onAfterEdit(editEvent:UIEditEvent, form: IForm, elem: IElement, item:IElement): Promise<void> {
editEvent.value = 'prefix-' + editEvent.value;
}
}
],
}
Перед выполнением метода генерируется событие afterEdit.
Метод не вызывается, если в методе onBeforeEdit() вызван UIEditEvent.stop.
Объект для управлиения событием onBeforeedit.
Объект формы, которая содержит элемент.
Текущий элемент формы, для которого вызывается метод.
Подэлемент, если у элемента редактируется подэлемент (например, в IList или IGroup).
Этот метод вызывается после загрузки элемента, но до установки данных, для каждого элемента формы.
ПРИМЕР
export var form: IForm = <IForm>{
type: 'IForm',
name: "emptyForm",
caption: "Пустая форма",
...
elements: [],
async onAfterLoad(event: UILoadEvent, form: IForm, elem: IElement): Promise<void> {
console.log(`Форма ${form.name} после загрузки`);
}
}
Перед выполнением метода генерируется событие afterLoad.
Метод не вызывается, если в методе IElement.onBeforeLoad или событии IElementEvents.beforeLoad вызвали UILoadEvent.stop.
Объект события загузки.
Объект формы, которая содержит элемент.
Текущий элемент формы, для которого вызывается метод.
Вызывается после открытия контекстного меню.
ПРИМЕР
export var form: IList = <IList>{
type: 'IList',
name: "IList",
...
onAfterOpenContextMenu: async function(form: IForm, elem: IList, data: any) {
console.log(`Элемент ${elem.name} после открытия контекстного меню`);
return true;
}
}
Перед выполнением метода генерируется событие {@link IContextMenuElementEvents.afterOpenContextMenu | afterOpenContextMenu}.
Метод не вызывается, если метод {@link IContextMenuElement.onBeforeOpenContextMenu | onBeforeOpenContextMenu()} вернул false.
Объект формы, которая содержит элемент.
Текущий элемент формы, для которого вызывается метод.
Данные элемента.
Возвращаемое значение ни на что не влияет. Тип boolean введен для унификации с onBeforeOpenContextMenu().
Этот метод вызывается после установки данных элемента.
ПРИМЕР
export var form: IForm = <IForm>{
type: 'IForm',
name: "emptyForm",
caption: "Пустая форма",
...
elements: [],
async onAfterSetData(event: UISetDataEvent, form: IForm, elem: IDataElement): Promise<void> {
console.log(`Форма ${form.name} после установки данных`);
}
}
Перед выполнением метода генерируется событие IDataElementEvents.afterSetData.
Метод не вызывается, если в методе IDataElement.onBeforeSetData вызван UISetDataEvent.stop.
Объект события установки данных.
Объект формы, которая содержит элемент.
Текущий элемент формы, для которого вызывается метод.
Этот метод вызывается перед редактированием элемента в результате вызова метода IElement.edit.
Для получения значения до изменения используйте UIEditEvent.value.
Для отмены редактирования выполните UIEditEvent.stop.
ПРИМЕР:
export var form: IForm = <IForm>{
type: 'IForm',
name: "emptyForm",
...
elements: [
<IElement> {
type: 'IElement',
name: 'elem',
async onBeforeEdit(editEvent:UIEditEvent, form: IForm, elem: IElement, item:IElement): Promise<void> {
console.log(`Значение перед редактированием: ${editEvent.value}`);
if (editEvent.value === '') {
editEvent.stopPropagation();//Отменить редактирование
}
}
}
],
}
Перед выполнением метода генерируется событие beforeEdit.
Объект для управлиения событием onBeforeedit.
Объект формы, которая содержит элемент.
Текущий элемент формы, для которого вызывается метод.
Подэлемент, если у элемента редактируется подэлемент (например, в IList или IGroup).
Этот метод вызывается перед загрузкой элемента, для каждого элемента формы.
ПРИМЕР
export var form: IForm = <IForm>{
type: 'IForm',
name: "emptyForm",
caption: "Пустая форма",
...
elements: [],
async onBeforeLoad(event: UILoadEvent, form: IForm, elem: IElement): Promise<void> {
console.log(`Форма ${form.name} перед загрузкой`);
}
}
Перед выполнением метода генерируется событие IElementEvents.beforeLoad.
Если вы хотите получить данные, переданные в событие onBeforeLoad, или хотите остановить загрузку элемента, используйте объект event: UILoadEvent, соответственно UILoadEvent.data и UILoadEvent.stop.
Объект события загузки.
Объект формы, которая содержит элемент. В примере form будет иметь тип IForm.
Текущий элемент формы, для которого вызывается метод. В примере elem будет иметь тип IForm и будет совпадать с form.
Вызывается перед открытием контекстного меню.
ПРИМЕР
export var form: IList = <IList>{
type: 'IList',
name: "IList",
...
onBeforeOpenContextMenu: async function(form: IForm, elem: IList, data: any) {
console.log(`Элемент ${elem.name} перед открытием контекстного меню`);
return true;
}
}
Перед выполнением метода генерируется событие beforeOpenContextMenu.
Объект формы, которая содержит элемент.
Текущий элемент формы, для которого вызывается метод.
Данные элемента.
Если вернуть false, то открытие контекстного меню прекратится.
Этот метод вызывается перед установкой данных элемента.
ПРИМЕР
export var form: IForm = <IForm>{
type: 'IForm',
name: "emptyForm",
caption: "Пустая форма",
...
elements: [],
async onBeforeSetData(event: UISetDataEvent, form: IForm, elem: IDataElement): Promise<void> {
console.log(`Форма ${form.name} перед установкой данных`);
}
}
Перед выполнением метода генерируется событие IDataElementEvents.beforeSetData.
Если внутри метода вызвать UISetDataEvent.stop, то установка данных для элемента прекратится.
Объект события установки данных.
Объект формы, которая содержит элемент.
Текущий элемент формы, для которого вызывается метод.
Метод вызывается при потере фокуса элементом в следующих случаях:
Перед выполнением метода генерируется событие IElementEvents.blur.
Сначала происходит погружение от элемента ко всем подэлементам, т.е. метод onBlur вызывается сначала у элемента, потом по всей иерархии вложенных элементов с фокусом. Затем всплытие от вложенного элемента с фокусом к элементу. При всплытии метод onBlur не вызывается.
Объект формы, которая содержит элемент.
Элемент формы, на котором происходит событие.
Подэлемент, если элемент формы включает другие элементы (например, подэлемент IList - элемент IListItem).
Этот метод вызывается при клике мыши по элементу.
ПРИМЕР
export var sendButton: IElement = <IElement>{
type: 'IElement',
name: 'elem',
...
async onClick(event: UIMouseEvent, form: IForm, elem: IElement, item: IElement: Promise<void> {
console.log(`Клик по элементу ${elem.name}!`);
return;
}
}
Перед выполнением метода генерируется событие click.
Объект формы, которая содержит элемент.
Элемент формы, на котором клик.
Подэлемент, на котором клик, если элемент формы включает другие элементы (например, подэлемент IList - элемент IListItem).
Этот метод вызывается при двойном клике мыши по элементу.
ПРИМЕР
export var sendButton: IElement = <IElement>{
type: 'IElement',
name: 'elem',
...
async ondblClick(event: UIMouseEvent, form: IForm, elem: IElement, item: IElement: Promise<void> {
console.log(`Двойной клик по элементу ${elem.name}!`);
return;
}
}
Перед выполнением метода генерируется событие dblclick.
Объект формы, которая содержит элемент.
Элемент формы, на котором клик.
Подэлемент, на котором клик, если элемент формы включает другие элементы (например, подэлемент IList - элемент IListItem).
Фокус на IElement появляется при клике и при навигации клавишами, только если установлено свойство tabindex, кроме IElements, являющихся подэлементом IList, ITable. Для них фокус если IList и ITable с tabindex.
Метод вызывается при фокусе на элементе в следующих случаях:
Перед выполнением метода генерируется событие IElementEvents.focus.
Сначала происходит погружение от формы к элементу, т.е. метод onFocus вызывается сначала у формы, потом по всей иерархии вложенных элементов. Затем всплытие от элемента к форме. При всплытии метод onFocus не вызывается.
Объект формы, которая содержит элемент.
Элемент формы, на котором происходит событие.
Подэлемент, если элемент формы включает другие элементы (например, подэлемент IList - элемент IListItem).
Метод вызывается при нажатии клавиши на элементе, на котором установлен фокус (IElement.focus):
Перед выполнением метода генерируется событие IElementEvents.keydown.
Сначала происходит погружение от формы к элементу с фокусом, т.е. метод onKeyDown вызывается сначала у формы, потом по всей иерархии вложенных элементов до элемента с фокусом. Затем всплытие от элемента с фокусом к форме. При всплытии метод onKeyDown не вызывается.
Объект формы, которая содержит элемент.
Элемент формы, на котором происходит событие.
Подэлемент, если элемент формы включает другие элементы с фокусом (например, подэлемент IList - элемент IListItem).
Метод вызывается при отпускании клавиши на элементе, на котором установлен фокус (IElement.focus):
Перед выполнением метода генерируется событие IElementEvents.keyup.
Сначала происходит погружение от формы к элементу с фокусом, т.е. метод onKeyUp вызывается сначала у формы, потом по всей иерархии вложенных элементов до элемента с фокусом. Затем всплытие от элемента с фокусом к форме. При всплытии метод onKeyUp не вызывается.
Объект формы, которая содержит элемент.
Элемент формы.
Подэлемент, если элемент формы включает другие элементы с фокусом (например, подэлемент IList - элемент IListItem).
Описание once() в StrictEventEmitter
Описание prependListener() в StrictEventEmitter
Описание prependOnceListener() в StrictEventEmitter
Удаляет класс из HTML элемента.
Описание removeListener() в StrictEventEmitter
Удаляет стиль из HTML элемента
Название стиля, например: color
Устанавливает данные элементу, в том числе, всем подэлементам. Если у элемента задано свойство 'bindingProperty', тогда будут установленны данные соответствующие этому свойству.
ПРИМЕР
export var dataElem: IDataElement = <IDataElement>{
type: 'IDataElement',
name: 'dataElement',
bindingProperty: "firstName"
}
...
(async function setData(){
var elem = AppManager.activeForm.getElement("dataElement");
await elem.setData({firstName: "Иван"});//во внутреннем свойстве elem._data сохранены данные "Иван".
})();
Любые данные. Обычно передается JSON объект, который содержит свойство, определенное в свойстве 'bindingProperty' элемента. Если свойство 'bindingProperty' элемента не задано, то элементу устанавливается весь объект данных.
Если хотите выяснить, почему не устанавливаются данные, задайте значение true (используется для отладки). Необязательно.
Возвращаются данные, которые установлены элементу.
Останавливает редактирование элемента.
Generated using TypeDoc
Свойство указывает как выравнивать элементы. Выравнивание происходит поперек главной оси флекс контейнера.