Сделай сам - пользовательский шаблон интеграции

Webix предлагает несколько готовых решений для интеграции с другими JavaScript библиотеками и фреймворками.

• интеграция с различными фреймворками
• интеграция с популярными текстовыми редакторами
• интеграция с диаграммами и инструментами планирования.

Тем не менее, невозможно обеспечить поддержку для всех существующих библиотек или инструментов. Если вы не нашли нужное вам решения среди предлагаемых, вы можете написать свой шаблон интеграции. Webix предлагает довольно элегантный способ сделать это.

Основное что нужно сделать, это создать компонент Webix, который будет отображать нужный инструмент на сранице.

webix.protoUI({
    name:"myCustomName",
    $init:function(config){..},
    // другие методы
}, webix.ui.view);

Этот прототип компонента должен наследоваться от view, базового класса для всех компонентов пользовательского интерфейса. View в чистом виде не содержит какой-либо информации и ведет себя как плейсхолдер.

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

• name - свойство определяющее имя, которое вы будете использовать при инициализации компонента
• $init - функция, которая выполняется при инициализации компонента. Ее аргумент является объектом конфигурации компонента.

Код ниже создаст экземпляр объекта и отобразит его на странице:

webix.ui({
    view:"myCustomName",
    // конфигурация
});

Подробнее о создании пользовательских объектов в Webix.

Интеграция HipChat

Давайте возьмем HipChat - популярное решение для создания профессиональных диаграмм с возможностью работы на веб.

Прототип компонента

webix.protoUI({
    name:"hipchat",
    $init:function(config){
        // параметры конфигурации
        var params = [
            "anonymous=true",
            "minimal=true",
            "timezone="+config.timezone,
            "welcome_msg="+(config.welcome_msg||"Добро пожаловать в Webix Hub Chat")
        ];
        // создание полного URL
        var url=config.url+(config.url.indexOf("?")>0?"&":"?")+params.join("&");
        if (url.indexOf("https://") !== 0)
            url = "https://" + url;
 
        // загружает hipchat
        var html="<iframe src='"+ url+"'frameborder='0' width='100%' height='100%'>
                    </iframe>";
        this.$view.innerHTML = html;                           
    },
}, webix.ui.view);

Инициализация HipChat:

webix.ui({
    view:"hipchat",  url: "YOUR_GUEST_ACCESS_URL", timezone: "PST"
});

Вы получаете значение URL через клиент Hipchat, когда разделяете доступ.

Пример по теме: HipChat Integration

Наверх