Class UIPanel<T>

ПРИМЕР

function someFunction(elem: IElement) {
     elem.addClass("someClass");
}

РЕЗУЛЬТАТ

<div class="someClass"></div>

ПРИМЕР

export var someGroup:IGroup = <IGroup>{
      type: 'IGroup',
      name: 'someGroup',
      bindingProperty: '',
      grouping: Grouping.vertical,
      flex: Flex.flexible,
      elements: [],
      onBeforeLoad: function (form: IForm, group: IGroup, data: any) {
         //data.elements Должен содержать массив JSON объектов IElement
         if(data && data.elements) {
             (<Array<IElement>>data.elements).forEach(item => {
                 group.addElement(item);
             })
         }
      }
}

addStyle('color', 'grey');

Добавит к HTML элементу атрибут style:

<div class='app ui-element' style='color:grey;'>

• Если передать данные текущего элемента, тогда в передавемых данных изменится только атрибут, соответствующий свойству 'bindingProperty' подэлемента.
• Если передать данные, в которых нет атрибута, соответствующего свойству 'bindingProperty', тогда такой атрибут с данными элемента добавится.
• Если передать undefined, тогда будет создан объект с данными подэлементов, у которых есть свойство 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 сохранены данные "Иван".
})();

ПРИМЕР теперь получаем данные:

• Если передать данные родительского элемента, тогда в передавемых данных изменится только атрибут, соответствующий свойству 'bindingProperty'.

     var elem = AppManager.activeForm.getElement("dataElement");
     console.log(elem.getData({firstName: "Петр", secondName: "Петров"}));
  

  РЕЗУЛЬТАТ

  {
     firstName: "Иван", 
     secondName: "Петров"
  }
  

• Если передать данные, в которых нет атрибута, соответствующего свойству 'bindingProperty', тогда такой атрибут с данными элемента добавится.

     var elem = AppManager.activeForm.getElement("dataElement");
     console.log(elem.getData({}));
  

  РЕЗУЛЬТАТ

  {
     firstName: "Иван"
  }
  

• Если передать undefined, тогда будут возвращены непосредственно данные элемента.

     var elem = AppManager.activeForm.getElement("dataElement");
     console.log(elem.getData(undefined));
  

  РЕЗУЛЬТАТ

  "Иван"
  

Для получения или изменения значения после редактирования используйте 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.

Для получения значения до изменения используйте 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.

Метод вызывается при фокусе на элементе в следующих случаях:

• при клике мыши (если установлено свойство tabindex),
• при переключении между элементами с помощью клавиатуры (если установлено свойство tabindex),
• при вызове метода IElement.focus.

Перед выполнением метода генерируется событие IElementEvents.focus.

Сначала происходит погружение от формы к элементу, т.е. метод onFocus вызывается сначала у формы, потом по всей иерархии вложенных элементов. Затем всплытие от элемента к форме. При всплытии метод onFocus не вызывается.

Перед выполнением метода генерируется событие IElementEvents.keydown.

Сначала происходит погружение от формы к элементу с фокусом, т.е. метод onKeyDown вызывается сначала у формы, потом по всей иерархии вложенных элементов до элемента с фокусом. Затем всплытие от элемента с фокусом к форме. При всплытии метод onKeyDown не вызывается.

Перед выполнением метода генерируется событие IElementEvents.keyup.

Сначала происходит погружение от формы к элементу с фокусом, т.е. метод onKeyUp вызывается сначала у формы, потом по всей иерархии вложенных элементов до элемента с фокусом. Затем всплытие от элемента с фокусом к форме. При всплытии метод onKeyUp не вызывается.

ПРИМЕР

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 сохранены данные "Иван".
})();