Настройка Desktop

Так как Desktop - это комплексный виджет, он состоит из множества отдельных Webix компонентов со своим API.
Эти компоненты можно переопределить или же работать с отдельными настройками.

Базовая конфигурация

Чтобы настроить общую конфигурацию виджета, используйте следующие свойства:

• systemParams (object) - содержит пользовательские параметры, передаваемые методу launch;
• apps (array) - массив приложений.

webix.ui({
    view: "desktop",
    systemParams: user,
    apps: myApps,
    ...
});

Существуют дополнительные свойства, которые могут быть переопределены, если вам необходимо внести изменения в конфигурацию по умолчанию, например tileAlign, grid, tileLayout и barPosition.

Структура приложения

Каждый объект в массиве apps содержит настройки для конкретного приложения:

• name - (string) название приложения (должно быть уникальным)
• icon - (string) необязательно, иконка приложения
• id - (number | string) необязательно, id приложения
• pin - (array) необязательно, определяет, где должен быть прикреплена иконка приложения. Возможные значения: "bar" и "desktop".
• showNew - (boolean) необязательно, позволяет открывать несколько окон одного и того же приложения
• launch - (function) метод, вызываемый при запуске приложения. Он загружает необходимые библиотеки и возвращает обещание, которое разрешается с помощью обработчиков приложения.

Обработчики

Метод launch() возвращает объект, содержащий обработчики. Они используются для инициализации приложения и реагирования на изменения состояния:

• "init" - обрабатывает инициализацию приложения
• "destroy" - обрабатывает события до уничтожения окна приложения
• "on" - обрабатывает различные изменения состояния

Related sample:  Desktop: App Handlers

"Init"

Событие "init " срабатывает при создании окна приложения. Обработчик этого события обязателен для корректной работы приложения. Он принимает 2 параметра:

• container - {object} HTML-контейнер, который можно использовать для инициализации сторонних приложений;
• appDataObj - {object} объект данных приложения, который получает каждый обработчик. Изначально он содержит только свойство "$view" для компонентов Webix, но вы можете добавить в него любые дополнительные свойства.

В случае инициализации компонента Webix, обработчик "init" должен вернуть объект с конфигурацией этого компонета:

view: "desktop",
apps: [
    { 
        name: "My App",
        icon: "imgs/myapp.png",
        launch: () => ({ init: () => ({ template: "My app" }) }),
   }
]

Для приложений Webix Jet (например, Scheduler, FileManager) "init " должен возвращать само приложение:

view: "desktop",
apps: [
    { 
        name: "filemanager",
        icon: "imgs/fm.png",
        launch: () => {
        webix.require("//cdn.webix.com/pro/edge/filemanager/skins/material.css");
        return webix.require("//cdn.webix.com/site/filemanager/filemanager.js").then(() => ({
            init: () =>
             new fileManager.App({
            url: "https://docs.webix.com/filemanager-backend/",
             })
        }));
        },
    }
]

"init" не должен ничего возвращать для сторонних приложений. Первый аргумент используется для инициализации пользовательского приложения внутри контейнера:

view: "desktop",
apps: [
    { 
        name: "TinyMCE",
        icon: "imgs/editor.png",
        launch: (sysParams) => {
        return webix.require(
            "https://cdn.tiny.cloud/1/no-api-key/tinymce/4.9.6-54/tinymce.min.js")
            .then(() => ({
                init: (container, options) =>{
                    container.innerHTML = "<textarea id='my_editor'></textarea>";
                    tinymce.init({              
                        selector: "#my_editor",
                        ...
                    });
                    ...
                }
        }));
        },
    }
]

Related sample:  Desktop: External App

"Destroy"

Событие "destroy " срабатывает перед уничтожением окна приложения. Обработчик этого события принимает один параметр:

• appDataObj - {object} объект данных приложения, который получает каждый обработчик

view: "desktop",
apps: [
    { 
        name: "MyEditor",
        icon: "imgs/editor.png",
        launch: (sysParams) => {
        return webix.require(
            "https://cdn.tiny.cloud/1/no-api-key/tinymce/4.9.6-54/tinymce.min.js")
            .then(() => ({
            ...
                destroy: appDataObj =>{
                    appDataObj.myEditor.remove();
                    appDataObj.myEditor = null;
                },
        }));
        },
    }
]

"On"

Есть еще несколько событий, для которых вы можете назначить обработчик:

• "resize" - срабатывает при изменении размеров окна и принимает в качестве параметра размер body.
• "deactivate" - срабатывает, когда приложение сворачивают;
• "activate" - срабатывает, когда приложение разворачивают;
• "afterinit" - срабатывает после события "init".

Обработчики этих событий устанавливаются с помощью метода "on", который принимает 3 параметра:

• eventName - {string} название события;
• params - {object} объект с параметрами события (напр. "width" и "height" для события "resize");
• appDataObj - {object} объект данных приложения, который получает каждый обработчик.

view: "desktop",
    apps: [{
            name: "MyApp",
            launch: (sParams) => {
                ...
                return {
                    ...
                    on: (evName, params, appDataObj) => {
                        if (evName == "resize") {
                            const {
                                width,
                                height
                            } = params;
                            ...
                        }
                    }
 
                },
            },
            ...
        ],

Компактный режим

Вы можете установить компактный режим через свойство compact и указать значение width:

webix.ui({
    view: "desktop",
    systemParams: user,
    apps: myApps,
    width: 400,
    compact: true
});

Related sample:  Desktop: Compact Mode

Наверх