Class UIElement<T>

Добавляет атрибут align-items в HTML элемент. Если свойство не задано, то атрибут не добавляется.

См. AlignItems.

Подробное описание способов выравнивания элементов смотрите здесь.

ПРИМЕР

export var list: IList = <IList>{
     ...
     alignSelf: AlignSelf.topCenter,
     ...
}

Если задано, то к html элементу добавляется соответствующий класс, например для элемента из примера topCenter.

Cм. AlignSelf

Подробное описание способов выравнивания элементов смотрите здесь.

ПРИМЕР

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>{
     ... ,
     onclick: function(form: IForm, elem: IList, item: IListItem): Promise<void> {
         var dom: HTMLElement = elem.dom; //IList inherit IElement
     }
}

См. Flex.

ПРИМЕР

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;
     }
}

ПРИМЕР

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');

Подробное описание способов выравнивания элементов смотрите здесь.

ПРИМЕР

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 elem: IElement = <IElement>{
     ... ,
     async onClick(e: IMouseEvent, form: IForm, elem: IElement, item: IElement): Promise<boolean> {
         var owner: IContextElement = elem.owner;
         return true;
     }
}

Элемент:

• либо имеет значение в свойстве owner - это значит, что создан и принадлежит какому-то элементу (например, является элементом строки IList IListItem.element), - тогда свойство parent = undefined;
• либо имеет значение в свойстве parent - это значит, что добавлен в группу IGroup.elements, - тогда свойство owner = undefined;
• либо оба свойства undefined - это только у формы IForm.

ПРИМЕР

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;
     }
}

Элемент:

• либо имеет значение в свойстве owner - это значит, что создан и принадлежит какому-то элементу (например, является элементом строки IList {@link IList.element}), - тогда свойство parent = undefined;
• либо имеет значение в свойстве parent - это значит, что добавлен в группу IGroup.elements, - тогда свойство owner = undefined;
• либо оба свойства undefined - это только у формы IForm.

ПРИМЕР

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) следующий:

• Элементы с положительным tabIndex фокусируются в порядке номера tabIndex. Навигация осуществляется от самого низкого tabIndex к самому высокому tabIndex.
• Элементы, у которых tabIndex = 0, и элементы, имеющие одинаковые tabIndex значения, фокусируются в порядке их расположения на форме.
• Элементы с отрицательным tabIndex фокусируются только программно.

ПРИМЕР

export var list: IList = <IList>{
     ...
     textSelect: false,
     ...
}

Если задано, и значение false, то к html элементу добавляется класс unselectable. CSS

.unselectable {
     user-select: none;
}

ПРИМЕР

export var list: IList = <IList>{
     type: 'IList',
     ...
}

По типу объекта формируется название класса HTML элемента. Для этого в начало типа добавляется префикс: "ui-".

Для html элемента объекта из примера результат следующий:

<div class="... ui-list" id="..." />

Если вы хотите установить текст 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,
     ...
}

При установке значения генерируются события:

• "show" при visibility = true,
• "hide" при visibility = false.

ПРИМЕР прослушивания этих событий

function addListener(elem: IElement) {
     elem.on("hide", ()=>{
         console.log("Элемент скрыт");
     })
}