Namespace PageClass

Для описания элементов управления можно использовать классы вместо JSON.
Вот так было с JSON:

/*Инструкции для WebPack, который скопирует эти файлы в ваш каталог*/
import './index.html';
import 'ui-organizer/page.css';
import 'ui-organizer/style.css';
import 'ui-organizer/vars.css';

/*Описание формы simpleForm*/
import { AppManager } from "ui-organizer";//Импортируем объект - AppManager
import type { IForm, IElement } from "ui-organizer";

let elem = <IElement>{
    type: 'IElement',
    name: 'simpleElem',
    caption: 'Простой элемент'
}

let form = <IForm>{
    type: 'IForm',
    name:'simpleForm',
    elements:[
        elem
    ]
}

var Global: any = window;
Global.AppManager = AppManager;
Global.onpopstate = AppManager.onPopState;

AppManager.init(document.querySelector('#app'))
    .then(async ()=>{
        AppManager.add([form]);
        await AppManager.open(form.name, {})
    })

Как видите мы создаем объект elem и помещаем его в список элементов формы form.

Вот как описывается элемент с помощью класса:

/*Инструкции для WebPack, который скопирует эти файлы в ваш каталог*/
import './index.html';
import 'ui-organizer/page.css';
import 'ui-organizer/style.css';
import 'ui-organizer/vars.css';

/*Описание формы simpleForm*/
import { AppManager } from "ui-organizer";//Импортируем объект - AppManager
import { UIForm, UIElement } from "ui-organizer";

class Elem extends UIElement/**Специальный класс, реализующий IElement*/ {
    name = 'simpleElem';
    caption = 'Простой элемент, задан классом';
}

class Form extends UIForm/**Специальный класс, реализующий IForm*/ {
    constructor(name: string){
        super();
        this.name = name;
        this.elements.push(new Elem());
    }

}

var Global: any = window;
Global.AppManager = AppManager;
Global.onpopstate = AppManager.onPopState;

AppManager.init(document.querySelector('#app'))
    .then(async ()=>{
        let formName: string = 'simpleForm';
        AppManager.add([new Form(formName)]);
        await AppManager.open(formName, {})
    })

Описывая класс, вы можете задавать все свойства, определяемые интерфейсом IElement. В примере мы задали свойства name и caption.

А также можете задавать методы onClick, onAfterLoad и другие, которые определяются интерфейсом IElement.

Кроме этого, вы можете задавать свои свойства и методы.

/*Инструкции для WebPack, который скопирует эти файлы в ваш каталог*/
import './index.html';
import 'ui-organizer/page.css';
import 'ui-organizer/style.css';
import 'ui-organizer/vars.css';

/*Описание формы simpleForm*/
import { AppManager } from "ui-organizer";//Импортируем объект - AppManager
import { UIForm, UIElement } from "ui-organizer";

class Elem extends UIElement/**Специальный класс, реализующий IElement*/{
    caption = 'Мой элемент.';
}

/**
 * Класс ExtraElem наследует класс Elem и переопределяет свойство caption
 */
class ExtraElem extends Elem {
    caption = 'Мой экстра элемент.';
}

export class Form extends UIForm/**Специальный класс, реализующий IForm*/ {
    constructor(name: string){
        super();
        this.name = name;
        this.elements.push(new Elem());
        this.elements.push(new ExtraElem());
    }
}

var Global: any = window;
Global.AppManager = AppManager;
Global.onpopstate = AppManager.onPopState;

AppManager.init(document.querySelector('#app'))
    .then(async ()=>{
        let formName: string = 'simpleForm';
        AppManager.add([new Form(formName)]);
        await AppManager.open(formName, {})
    })