Свойство указывает как выравнивать элементы. Выравнивание происходит поперек главной оси флекс контейнера.
Добавляет атрибут align-items в HTML элемент. Если свойство не задано, то атрибут не добавляется.
См. AlignItems.
Подробное описание способов выравнивания элементов смотрите здесь.
Расплагает элемент в одну из девяти позиций:
Свойство указывает на наличие полосы прокрутки. Если значение true, то добавляет атрибут overflow-auto в HTML элемент.
Устанавливает окантовку элементу управления. По умолчанию 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
}
}
Свойство, указывающее на способ позиционирования элемента внутри группы (по умолчанию гибкое - 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
}
Наименование элемента латиницей. Не должно содержать управляющих символов и пробелов. Необязательно.
ПРИМЕР
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 элемента 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("Элемент скрыт");
})
}
Добавляет класс к 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
Убирает фокус с элемента.
Вызывает режим редактирования элемента. По завершении редактирования устанавливает значение IElement.value. Возвращает результат редактирования.
Идентификатор подэлемента (если есть). Если не указан, то используется идентификатор самого элемента IElement.id или идентификатор выбранного подэлемента, например, выбранная строка в списке IList.
Описание emit() в StrictEventEmitter
Устанавливает фокус на элементе.
Осуществляет поиск элемента по названию.
Название элемента
Если 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.
Объект события загузки.
Объект формы, которая содержит элемент.
Текущий элемент формы, для которого вызывается метод.
Этот метод вызывается перед редактированием элемента в результате вызова метода 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.
Метод вызывается при потере фокуса элементом в следующих случаях:
Перед выполнением метода генерируется событие 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
Останавливает редактирование элемента.
Generated using TypeDoc
Корневой интерфейс, описывающий базовые свойства и методы всех елементов формы.
От этого интерфейса наследуются интерфейсы всех других элементов формы.
Этот интерфейс реализуют все элементы формы.
ПРИМЕР
Вы можете описывать любые дополнительные свойства или методы, которые будете потом использовать. То есть использовать как обычный объект javascript.
ПРИМЕР