Options
All
  • Public
  • Public/Protected
  • All
Menu

Namespace PageStr

Содержание:
  1. Сравнение строки и элемента
  2. Первоначальная установка данных
  3. IStr - html, markdown, hyperlink
  4. IStr с меню

Сразу посмотреть пример формы из раздела 4.

1. Сравнение строки и элемента

Для изучения IStr изменяйте содержимое файла simple.ts из примера в статье "Начало работы".

Для сравнения элемента IStr с элементом IElement и элементом IContextElement добавим на форму соответствующие элементы. Для визуализации размеров элементов мы к каждому элементу добавили свойство bordered. 

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

/*Описание формы simpleForm*/
import type { IContextElement, IElement, IForm, IStr} from "ui-organizer";
import { AppManager, UIForm } from "ui-organizer";

export let form: IForm = <IForm>{
    type: UIForm,
    name: 'simpleForm',
    elements: [
        <IElement>{
            type: 'IElement',
            value: 'Элемент',
            bordered: true
        },
        <IContextElement>{
            type: 'IContextElement',
            value: 'Элемент с меню',
            bordered: true
        },
        <IStr>{
            type: 'IStr',
            value: 'Строка',
            bordered: true
        },
    ]
}


/*Инициализация приложения AppManager*/
var Global: any = window;
Global.AppManager = AppManager;
Global.onpopstate = AppManager.onPopState;

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

Как можете заметить элемент IStr, в отличие от IElement, занимает все оставшиеся пространство формы (как и элемент IContextElement). Это связано с тем, что в элементе IStr как и в элементе IContextElement по умолчанию свойство flex установлено в Flex.flexible (описание выравнивания смотрите здесь).

Установите свойство flex в Flex.fixed. Увидите, что элементы в простейшем случае выглядят одинаково.

2. Первоначальная установка данных

Если на момент установки данных свойство value равно undefined, то текст элемента устанавливается данными. В примере ниже мы закомментировали свойство value.

Мы добавили свойство bindingProperty в каждый элемент, значение соответствует данным. И передаем данные в метод открытия формы. 

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

/*Описание формы simpleForm*/
import type { IContextElement, IDataElement, IElement, IForm, IStr} from "ui-organizer";
import { AppManager, UIForm } from "ui-organizer";

export let form: IForm = <IForm>{
    type: UIForm,
    name: 'simpleForm',
    elements: [
        <IDataElement>{
            type: 'IDataElement',
            // value: 'Элемент',
            bordered: true,
            bindingProperty: 'dataElement'
        },
        <IContextElement>{
            type: 'IContextElement',
            // value: 'Элемент с меню',
            bordered: true,
            bindingProperty: 'contextElement'
        },
        <IStr>{
            type: 'IStr',
            // value: 'Строка',
            bordered: true,
            bindingProperty: 'str'   
        },
    ]
}

let data = {
    dataElement: 'Данные элемента IDataElement',
    contextElement: 'Данные элемента IContextElement',
    str: 'Данные элемента IStr',
}

/*Инициализация приложения AppManager*/
var Global: any = window;
Global.AppManager = AppManager;
Global.onpopstate = AppManager.onPopState;

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

Свойство value было заполнено данными и они отображаются на экране. Повторная установка данных не влияет на значение value (если оно не undefined).

Если вы раскомментируете свойство value увидите результат из предыдущего раздела.

3. IStr - text, html, markdown

В примере ниже создадим три IStr элемента с разным типом контента. 

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

/*Описание формы simpleForm*/
import type { IForm, IStr} from "ui-organizer";
import { AppManager, ContentType, UIForm } from "ui-organizer";

export let form: IForm = <IForm>{
    type: UIForm,
    name: 'simpleForm',
    elements: [
        <IStr>{
            type: 'IStr',
            contentType: ContentType.text,
            value: 'IStr.contentType = ContentType.text. Простой текст в элементе IStr.',
            bordered: true,
        },
        <IStr>{
            type: 'IStr',
            contentType: ContentType.html,
            value: '<h1>IStr.contentType = ContentType.html</h1><p>Элемент IStr. Позволяет отображать текст, html, markdown.</p>',
            bordered: true,
        },
        <IStr>{
            type: 'IStr',
            contentType: ContentType.md,
            value: '# IStr.contentType = ContentType.md  \n\nЭлемент IStr. Позволяет отображать текст, html, markdown.',
            bordered: true,
        }
    ]
}

/*Инициализация приложения AppManager*/
var Global: any = window;
Global.AppManager = AppManager;
Global.onpopstate = AppManager.onPopState;

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

Первый элемент отображает text, который мы передали в свойство value элемента.

Второй элемент отображает html, который мы передали в свойство value элемента.

Второй элемент отображает html, который получается преобразованием markdown текста, который мы передали в свойство value элемента.

4. IStr с меню

Перед добавлением меню в IStr измените содержимое index.html для использования пиктограмм awesome.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ui-organizer simple form</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">    
    <!-- Например --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        /* Просто, поместили форму посередине страницы */
        body { width: 50%; margin: 0px auto 0px auto}
    </style>
</head>
<body>
    <div id="app">
    </div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

Но, в связи с блокированием cdn сервисов в России этот вариант вас может не устроить. Вы можете сделать по-другому - скачать бибилиотеку fontawesome:

Смотреть как...

  1. Установите необходимые библиотеки:

    npm install @fortawesome/fontawesome-free copy-webpack-plugin

  2. Измените файл webpack.config.js добавив copy-webpack-plugin: ```javascript const path = require('path'); const UIOrganizerWebpackPlugin = require('ui-organizer-webpack-plugin'); /---Добавили copy-webpack-plugin/ const CopyPlugin = require("copy-webpack-plugin"); /---/

module.exports = { mode: 'development', entry: './simple.ts', output: { filename: 'index.js', path: path.resolve(__dirname, ./dist), assetModuleFilename: '[name][ext]' }, module: { rules: [ { test: /.ts?$/, use: 'ts-loader' }, { test: /.css$/, type: 'asset/resource',
}, { test: /.html$/, type: 'asset/resource', },
], }, plugins: [ new UIOrganizerWebpackPlugin(), /---Добавили copy-webpack-plugin*/
new CopyPlugin({ patterns: [ /*Копируем шрифты и таблицы стилей в папку ./dist/ { from: "./node_modules/@fortawesome/fontawesome-free", to: "./fontawesome-free" }, ], }), /---*/ ], resolve: { extensions: ['.ts', '.js'], } };


3. Добавьте соответствующую строку в html:
```html
<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="fontawesome-free/css/all.min.css"><!--скопирован программой webpack в ./dist/fontawesome-free/css из папки node_modules/@fortawesome/fontawesome-free/css/all.min.css-->    
</head>
...

Добавим к элементу IStr меню, которое позволит просматривать данные переданные форме. В данных передадим набор элементов управления с описанием.

Для этого мы добавили интерфейс IMyForm, для облегчения написания программы. 

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

/*Описание формы simpleForm*/
import type { IElement, IFigAwesome, IForm, IMenu, IMenuItem, IStr} from "ui-organizer";
import { AppManager, ContentType, IconDisplay, UIForm, UIMenu, UIMenuItem, UISetDataEvent, UIMouseEvent } from "ui-organizer";

export interface IMyForm extends IForm {
    itemNumber: number, //Номер в массиве данных, который сейчас отображается на форме.
    //Чтобы каждый раз не выполнять form.getElement('<имя IStr>'), к тому же мы не задали имя IStr.
    textElement: IStr,//Элемент управления IStr, который отображает изначальный текст.    
    strElement: IStr,//Элемент управления IStr, который отображает преобразованный текст в соответствии с типом contentType.
    getValue(number:number): string//Формирует строку из данных и сохраняет номер в itemNumber.
}

export let form: IMyForm = <IMyForm>{
    type: UIForm,
    name: 'simpleForm',
    elements: [
        <IElement>{
            type: 'IElement',
            bordered: true,
            value: 'В первом элементе IStr отображается первоначальный текст c разметкой Markdown.\n\
Во втором элементе IStr отображается отформатированный текст Markdown.\n\
Используйте кнопки навигации вперед-назад в меню второго элемента IStr.',
        },
        <IStr>{
            type: 'IStr',
            caption: 'Первоначальный текст MD',
            bordered: true,
            async onAfterSetData(event: UISetDataEvent, form: IMyForm, elem: IStr) {
                form.textElement = elem;
                elem.value = form.getValue(0);
            }
        },
        <IStr>{
            type: 'IStr',
            caption: 'Отформатированный MD',
            contentType: ContentType.md,
            bordered: true,
            menu: <IMenu>{
                type: UIMenu,
                elements: [
                    <IMenuItem>{
                        type: UIMenuItem,
                        caption: 'Назад',
                        iconDisplay: IconDisplay.icon,
                        figAwesome: <IFigAwesome>{
                            faClass: ['fas', 'fa-chevron-left', 'fa-lg'],
                            faStyle: ['color: grey;']
                        },
                        async onClick(event: UIMouseEvent, form: IMyForm) {
                            if (form.itemNumber == 0) return;
                            let itemNumber: number = form.itemNumber - 1;
                            form.textElement.value = form.getValue(itemNumber);
                            form.strElement.value = form.getValue(itemNumber);
                        }
                    },
                    <IMenuItem>{
                        type: UIMenuItem,
                        caption: 'Вперед',
                        iconDisplay: IconDisplay.icon,
                        figAwesome: <IFigAwesome>{
                            faClass: ['fas', 'fa-chevron-right', 'fa-lg'],
                            faStyle: ['color: grey;']
                        },
                        async onClick(event: UIMouseEvent, form: IMyForm) {
                            let maxItemNumber: number = Array.isArray(form.getData()) ? form.getData().length -1 : 0;
                            if (form.itemNumber == maxItemNumber) return;
                            let itemNumber: number = form.itemNumber + 1;
                            form.textElement.value = form.getValue(itemNumber);                            
                            form.strElement.value = form.getValue(itemNumber);
                        }
                    },
                ]
            },
            async onAfterSetData(event: UISetDataEvent, form: IMyForm, elem: IStr) {
                form.strElement = elem;
                elem.value = form.getValue(0);
            }
        },  
    ],
    itemNumber: 0,
    textElement: undefined,
    strElement: undefined,
    getValue(number: number): string {
        (<IMyForm>this).itemNumber = number;
        let data = (<IMyForm>this).getData();
        if (!Array.isArray(data) || data.length == 0) throw new Error('Данные не являются массивом или пустой массив.');
        return `${data[number].header}  \n${data[number].description}  \n${data[number].parent}`;
    }
}

let data = [
    {
        header: '## IElement',
        description: 'Базовый элемент управления. Это обычный div элемент с текстом.',
        parent: `Нет родительского элемента`
    },
    {
        header: '## IDataElement',
        description: 'Элемент управления с данными. Здесь можно задать и получить данные элемента.',
        parent: `Является наследником **IElement**`
    },    
    {
        header: '## IContextElement',
        description: 'Элемент управления с меню и контекстным меню.',
        parent: `Является наследником **IDataElement**`
    },   
    {
        header: '## IProperty',
        description: 'Элемент управления поле ввода.',
        parent: `Является наследником **IDataElement**`
    },    
    {
        header: '## IList',
        description: 'Элемент управления список.',
        parent: `Является наследником **IContextElement**`
    }, 
    {
        header: '## IStr',
        description: 'Элемент "Строка". Позволяет отображать текст, html, markdown, ссылку.',
        parent: `Является наследником **IContextElement**`
    },
]

/*Инициализация приложения AppManager*/
var Global: any = window;
Global.AppManager = AppManager;
Global.onpopstate = AppManager.onPopState;

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

В методе onAfterSetData первого элемента управления IStr мы устанавливаем свойство textElement формы IMyForm и выполняем первоначальное заполнение свойства value первого элемента управления IStr (contentType = ContentType.text).

В методе onAfterSetData второго элемента управления IStr мы устанавливаем свойство strElement формы IMyForm и выполняем первоначальное заполнение свойства value второго элемента управления IStr (contentType = ContentType.md).

Далее обрабатываем click кнопок меню, где увеличиваем или уменьшаем счетчик индекса массива данных, которые должны отображаться, и заполняем свойство value обоих элементов управления IStr.

Generated using TypeDoc