Namespace PageAppManager

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

import { AppManager } from "ui-organizer";//Импортируем объект - AppManager
import type {IForm, IElement} from "ui-organizer";

export let form: IForm = <IForm>{//Описываем форму один
    type: 'IForm',
    name: 'simpleForm',
    caption: 'Форма один',
    elements: [
        <IElement>{
            type: 'IElement',
            value: 'Двойной клик, чтобы редактировать',
            bordered: true,
            async onDblClick(){
                this.edit();
            }
        },
        <IElement>{
            type: 'IElement',
            value: 'Клик, чтобы открыть форму два',
            bordered: true,
            async onClick(){
                AppManager.open(form2.name, {}, this.form);//Открываем форму два
            }
        }
    ]
}

export let form2: IForm = <IForm>{//Описываем форму два
    type: 'IForm',
    name: 'secondForm',
    caption: 'Форма два',
    elements: [
        <IElement>{
            type: 'IElement',
            value: 'Двойной клик, чтобы редактировать',
            bordered: true,
            async onDblClick(){
                this.edit();
            }
        },        
        <IElement>{
            type: 'IElement',
            value: 'Клик, чтобы вернуться',
            bordered: true,
            async onClick(){
                AppManager.back();//Возвращаемся к форме один
            }
        }
    ]
}

var Global: any = window;
Global.AppManager = AppManager; //Передаем AppManager на глобальный уровень для доступа к нему из любого места приложения
Global.onpopstate = AppManager.onPopState; //Переопределяем функцию для возможности навигации между формами

AppManager.init(document.querySelector('#app'))//Инициализирум приложение и устанавливаем корневой HTMLElement для приложения
    .then(async ()=>{
        AppManager.add([form, form2]);//Добавляем формы в список форм приложения
        AppManager.open(form.name, {}); //Открываем форму один и передаем ей данные
    })

Мы создали две формы form и form2. Первый элемент в каждой форме для демонстрации сохранения данных формы, второй элемент для переключения между формами.

В первой форме клик по элементу вызывает открытие формы два:

AppManager.open(form2.name, {}, this.form);//Открываем форму два

Во второй форме клик по элементу вызывает команду "Назад" в истории браузера:

AppManager.back();//Возвращаемся к форме один

Именно для этого мы переопределили метод onpopstate, заменив его на AppManager.onPopState.

Обратите внимание, что навигация между формами идентична разделу три. Это потому, что вызов метода AppManger.open() не загружает каждый раз форму заново, а проверяет в списке уже загруженных. И метод AppManager.back() также вызывает метод активации формы, сохраненной в истории браузера.

Но, во втором способе, описанном в этом разделе, мы можем каждый раз передавать данные открываемой форме.