Добавляет атрибут align-items в HTML элемент. Если свойство не задано, то атрибут не добавляется.
См. AlignItems.
Подробное описание способов выравнивания элементов смотрите здесь.
Свойство указывает как выравнивать элементы. Выравнивание происходит поперек главной оси флекс контейнера.
Добавляет атрибут align-items в HTML элемент. Если свойство не задано, то атрибут не добавляется.
См. AlignItems.
Подробное описание способов выравнивания элементов смотрите здесь.
Расплагает элемент в одну из девяти позиций:
ПРИМЕР
export var list: IList = <IList>{
...
alignSelf: AlignSelf.topCenter,
...
}
Если задано, то к html элементу добавляется соответствующий класс, например для элемента из примера topCenter.
Cм. AlignSelf
Подробное описание способов выравнивания элементов смотрите здесь.
Расплагает элемент в одну из девяти позиций:
ПРИМЕР
export var list: IList = <IList>{
...
alignSelf: AlignSelf.topCenter,
...
}
Если задано, то к html элементу добавляется соответствующий класс, например для элемента из примера topCenter.
Cм. AlignSelf
Подробное описание способов выравнивания элементов смотрите здесь.
Свойство указывает на наличие полосы прокрутки. Если значение true, то добавляет атрибут overflow-auto в HTML элемент.
Свойство указывает на наличие полосы прокрутки. Если значение 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 | здесь}
Свойство указывающее на данные.
ПРИМЕР данных
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.
Устанавливает окантовку элементу управления. По умолчанию 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.
Заголовок элемента.
ПРИМЕР
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
}
}
Свойство, указывающее на способ позиционирования элемента внутри группы (по умолчанию гибкое - flexible):
См. Flex.
Свойство, указывающее на способ позиционирования элемента внутри группы (по умолчанию гибкое - 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>
Устанавливает в элемент гиперссылку
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
}
Выравнивание текста внутри элемента. Так как все элементы являются флекс контейнерами,
то и выравнивание внутри элемента или группы происходит с использованием HTML стиля justify-content.
Подробное описание способов выравнивания элементов смотрите здесь.
ПРИМЕР
export var someGroup: IGroup = <IGroup>{
...
justifyContent: JustifyContent.start,
...
}
Если задано, то соответствующий класс будет добавлен к html элементу.
<div class='... left'/>
.left{
justify-content: left
}
Наименование элемента латиницей. Не должно содержать управляющих символов и пробелов. Необязательно.
ПРИМЕР
export var productsList: IList = <IList>{
...
name: 'productsList',
...
}
Из названия формируется атрибут name HTML элемента.
Результат следующий:
<div class="..." name="productsList" />
По названию, также осуществляется доступ к элементу формы из любого метода объекта:
AppManager.ActiveForm.getElement('productsList');
Наименование элемента латиницей. Не должно содержать управляющих символов и пробелов. Необязательно.
ПРИМЕР
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>{
...
positionAbsolute: true,
...
}
Если задано, и значение true, то к html элементу добавляется класс positionAbsolute.
CSS
.positionAbsolute{
position: absolute;
}
Доступность элемента только для чтения.
ПРИМЕР
export var list: IList = <IList>{
...
readonly: true,
...
}
Если значение true, то к html элементу добавляется класс readonly.
<div class="... readonly"/>
Доступность элемента только для чтения.
ПРИМЕР
export var list: IList = <IList>{
...
readonly: true,
...
}
Если значение true, то к html элементу добавляется класс readonly.
<div class="... readonly"/>
Позволяет разработчикам делать элементы управления фокусируемыми, разрешать или запрещать их последовательную фокусировку (обычно с помощью клавиши tab, отсюда и название) и определять их относительный порядок для последовательной навигации между элементами формы
Порядок навигации (при нажатии клавиши tab) следующий:
Позволяет разработчикам делать элементы управления фокусируемыми, разрешать или запрещать их последовательную фокусировку (обычно с помощью клавиши tab, отсюда и название) и определять их относительный порядок для последовательной навигации между элементами формы
Порядок навигации (при нажатии клавиши tab) следующий:
Возможность выделения текста внутри элемента на html странице.
ПРИМЕР
export var list: IList = <IList>{
...
textSelect: false,
...
}
Если задано, и значение false, то к html элементу добавляется класс unselectable.
CSS
.unselectable {
user-select: none;
}
Возможность выделения текста внутри элемента на 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 элемента IElement задайте значение value.
В процессе описания:
let baseElem: IElement = <IElement>{
type: 'IElement',
name: 'baseElem',
value: 'Элемент'
}
Либо в процессе выполнения:
let baseElem: IElement = <IElement>{
type: 'IElement',
name: 'baseElem',
caption: 'Базовый элемент',
onAfterLoad: async function (event: UILoadEvent, form: IForm, elem: IElement) {
elem.value = 'Элемент';
}
}
Результат следующий:
<div class='app ui-element' id='a77ch448' name='baseElem'>
'Элемент'
<div>
Если value не задано, то текст элемента принимает значение свойства IElement.caption, если caption не задан, то текст элемента принимает значение свойства IElement.name для следующих элементов: IElement, IDataElement, IButton, IMenuItem.
Если value == undefined, то значение устанавливается из данных при первоначальном заполнении и последующих вызовах метода setData() для всех наследников IDataElement.
Текст HTML элемента.
Если вы хотите установить текст HTML элемента IElement задайте значение value.
В процессе описания:
let baseElem: IElement = <IElement>{
type: 'IElement',
name: 'baseElem',
value: 'Элемент'
}
Либо в процессе выполнения:
let baseElem: IElement = <IElement>{
type: 'IElement',
name: 'baseElem',
caption: 'Базовый элемент',
onAfterLoad: async function (event: UILoadEvent, form: IForm, elem: IElement) {
elem.value = 'Элемент';
}
}
Результат следующий:
<div class='app ui-element' id='a77ch448' name='baseElem'>
'Элемент'
<div>
Если value не задано, то текст элемента принимает значение свойства IElement.caption, если caption не задан, то текст элемента принимает значение свойства IElement.name для следующих элементов: IElement, IDataElement, IButton, IMenuItem.
Если value == undefined, то значение устанавливается из данных при первоначальном заполнении и последующих вызовах метода setData() для всех наследников IDataElement.
Видимость элемента.
ПРИМЕР
export var list: IList = <IList>{
...
visibility: true,
...
}
При установке значения генерируются события:
visibility = true,visibility = false.ПРИМЕР прослушивания этих событий
function addListener(elem: IElement) {
elem.on("hide", ()=>{
console.log("Элемент скрыт");
})
}
Видимость элемента.
ПРИМЕР
export var list: IList = <IList>{
...
visibility: true,
...
}
При установке значения генерируются события:
visibility = true,visibility = false.ПРИМЕР прослушивания этих событий
function addListener(elem: IElement) {
elem.on("hide", ()=>{
console.log("Элемент скрыт");
})
}
устанавливает класс focused в HTMLElement
подэлемент, для которого устанавливается фокус
Этот метод, перед вызовом передаваемой функции, вызывает метод onBeforeEdit(), а, после вызова передаваемой функции, вызывает метод onAfterEdit().
Возвращает значение HTML элемента, который является contenteditable для данного элемента управления.
Возвращает строку из данных, переданных элементу для установки в innerText
Выполняет загрузку элемента в браузере. Метод общедоступный, потому что UIForn._onLoad() вызывается в AppManager.
Определяет:
Метод вызывается другими элементами в цепочке вызова фокуса во время погружения, начиная от формы
цепочка вложенных элементов, для которых необходимо вызвать метод дальше. not protected потому что элемент вызывает этот метод формы.
Метод вызывается другими элементами в цепочке вызова keydown во время погружения, начиная от формы
цепочка вложенных элементов, для которых необходимо вызвать метод дальше.
Метод вызывается другими элементами в цепочке вызова keyup во время погружения, начиная от формы
цепочка вложенных элементов, для которых необходимо вызвать метод дальше.
Удаляет аттрибут contenteditable Вызывается в _stopEdit()
удаляет класс focused в HTMLElement
подэлемент, для которого устанавливается фокус
Устанавливает аттрибут contenteditable в передаваемый HTML элемент. Устанавливает курсор в нужную позицию.
Выполняет установку данных элемента. Метод не защищенный, потому что может вызываеться другими элементами.
Добавляет класс к 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;'>
Убирает фокус с элемента.
Собирает данные со всех подэлементов и сначала обновляет внутреннее свойство _data. Затем возвращает внутреннее свойство _data также как и getData().
Любые данные (обычно данные родительского объекта) или undefined.
Возвращаемые данные зависят от передаваемых данных.
Вызывает _edit() либо у самого элемента, либо вызывает edit() у первого элемента в иерархии элементов. Таким образом происходит иерархия вызовов edit у всех вложенных элементов.
Передает поиск следующего элемента для редактирования форме или owner
текущий редактируемый элемент (необязательно)
результат редактирования следующего элемента
Передает поиск предыдущего элемента для редактирования форме или owner
текущий редактируемый элемент (необязательно)
результат редактирования предыдущего элемента
Описание emit() в StrictEventEmitter
Устанавливает фокус на элементе.
Возвращает массив с цепочкой всех сфокусированных элементов, включая все элементы всех дочерних групп.
Получает данные элемента, записанные во внутреннем свойстве _data. Во внутреннем свойстве _data хранятся изначальные данные (если вы их, конечно, не изменяяете в методах) и не зависят от изменений подэлементов.
undefined, тогда будут возвращены непосредственно данные элемента.Любые данные (обычно данные родительского объекта) или undefined.
Возвращаемые данные зависят от передаваемых данных.
Осуществляет поиск элемента по названию.
Возвращает название типа элемента: "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.
Этот метод вызывается после загрузки элемента, но до установки данных, для каждого элемента формы.
ПРИМЕР
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: 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.
Этот метод вызывается перед загрузкой элемента, для каждого элемента формы.
ПРИМЕР
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.
Этот метод вызывается перед установкой данных элемента.
ПРИМЕР
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 не вызывается.
Этот метод вызывается при клике мыши по элементу.
ПРИМЕР
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.
Этот метод вызывается при двойном клике мыши по элементу.
ПРИМЕР
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.
Фокус на IElement появляется при клике и при навигации клавишами, только если установлено свойство tabindex, кроме IElements, являющихся подэлементом IList, ITable. Для них фокус если IList и ITable с tabindex.
Метод вызывается при фокусе на элементе в следующих случаях:
Перед выполнением метода генерируется событие IElementEvents.focus.
Сначала происходит погружение от формы к элементу, т.е. метод onFocus вызывается сначала у формы, потом по всей иерархии вложенных элементов. Затем всплытие от элемента к форме. При всплытии метод onFocus не вызывается.
Метод вызывается при нажатии клавиши на элементе, на котором установлен фокус (IElement.focus):
Перед выполнением метода генерируется событие IElementEvents.keydown.
Сначала происходит погружение от формы к элементу с фокусом, т.е. метод onKeyDown вызывается сначала у формы, потом по всей иерархии вложенных элементов до элемента с фокусом. Затем всплытие от элемента с фокусом к форме. При всплытии метод onKeyDown не вызывается.
Метод вызывается при отпускании клавиши на элементе, на котором установлен фокус (IElement.focus):
Перед выполнением метода генерируется событие IElementEvents.keyup.
Сначала происходит погружение от формы к элементу с фокусом, т.е. метод onKeyUp вызывается сначала у формы, потом по всей иерархии вложенных элементов до элемента с фокусом. Затем всплытие от элемента с фокусом к форме. При всплытии метод onKeyUp не вызывается.
Описание once() в StrictEventEmitter
Описание prependListener() в StrictEventEmitter
Описание prependOnceListener() в StrictEventEmitter
Удаляет класс из HTML элемента.
Описание removeListener() в StrictEventEmitter
Удаляет стиль из HTML элемента
Устанавливает данные элементу, в том числе, всем подэлементам. Переопределяется наследниками.
Останавливает редактирование элемента.
Generated using TypeDoc
Свойство указывает как выравнивать элементы. Выравнивание происходит поперек главной оси флекс контейнера.