ui-organizer-monaco v0.0.4

Установка

Установите node.js. Скачать можно здесь https://nodejs.org/ru/download/.

Создайте папку my-project, перейдите в нее и инициализируйте проект:

cd my-project
npm init

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

npm install ui-organizer 
npm install --save-dev typescript @types/node 

Настройка typescript

Для настройки компилятора typescript в папке my-project создайте файл tsconfig.json и добавьте в него скрипт:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2020",
    "lib": [
      "es6",
      "dom",
      "dom.iterable",
      "scripthost"
    ],
    "isolatedModules": true,
    "sourceMap": true,
  },
  "exclude": [
    "node_modules"
  ]
}

Настройка webpack

Для создания файлов javascript, которые будут работать в браузере используйте любую библиотеку, например webpack. Сначала установите ее:

npm install webpack webpack-cli ts-loader file-loader extract-loader css-loader --save-dev

Создайте файл webpack.config.js и добавьте в него скрипт:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './simple.ts',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, `./`)
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader'
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]"
            }
          },
          "extract-loader",
          {
            loader: "css-loader",
            options: {
              import: true,
            },
          }
        ]
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  }
};

Здесь webpack находит файлы с расширением ts и использует загрузчик ts-loader для компиляции скриптов typescript в javascript.

Также webpack ищет файлы с расширеним css и использует загрузчики по порядку css-loader, extract-loader, file-loader. Это необходимо для загрузки таблиц стилей, которые поставляются с библиотекой ui-organizer.

Создание приложения

В папке my-project создайте файл simple.ts и добавьте программный код:

/*Инструкции для WebPack*/
require('ui-organizer/page.css');
require('ui-organizer/style.css');

/*Описание формы simpleForm*/
import type {IForm, IButton, IProperty} from "ui-organizer";
import { AppManager, Grouping, Flex, Input, Position, AlignSelf} from "ui-organizer";

export var form: IForm = <IForm>{
    type: 'IForm',
    name: 'simpleForm',
    caption: 'Приложение',
    flex: Flex.flexible,
    grouping: Grouping.vertical,
	  alignSelf: AlignSelf.topCenter,
    elements: [
        <IProperty>{
            type: 'IProperty',
            name: 'email',
            caption: 'Логин',
            input: Input.text,
            captionPosition: Position.none, //не отображать заголовок
            placeholder: 'Логин',
        },
        <IProperty>{
            type: 'IProperty',
            name: 'password',
            caption: 'Пароль',
            input: Input.password,
            captionPosition: Position.none, //не отображать заголовок
            placeholder: 'Пароль',
        },
        <IButton>{
            type: 'IButton',
            name: 'sendData',
            caption: 'Отправить',
            onClick: async function () {
                alert("Data sent!");
                return true;
            }
        },
    ]
}

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

AppManager.parent = document.querySelector('#app');
AppManager.add([form]);
AppManager.open('simpleForm', {}, undefined);

На форму добавлено два свойства: объекты typescript, которые реализуют интерфейс IProperty, и кнопка: объект typescript, который реализует интерфейс IButton. Ну, и сама форма: объект, который реализует интерфейс IForm.

Обратите внимание, что можно использовать файлы .css с настроенными стилями, которые поставляются с библиотекой. Для этого в начале файла указаны инструкции для пакета WebPack, где взять файлы с таблицами стилей. Файл page.css содержит описание компоновки элементов управления (этот файл нельзя изменять). Файл style.css содержит описание оформления, так называемую "тему" (этот файл может быть заменен любой другой темой).

В папке my-project создайте файл index.html и добавьте программный код:

<!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">
</head>
<body>
    <div id="app">
    </div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

Компиляция и запуск

Скомпилируйте и соберите файлы для работы в браузере с помощью webpack:

npx webpack

Пакет webpack скомпилирует ваш simple.ts в index.js. И скопирует файлы page.css и style.css из библиотеки ui-organizer.

Запустите index.html.