Блог

Создание кастомного виджета — интеграция с HipChat

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

Стандартный пакет Webix уже включает в себя JS файлы для интеграции с такими популярными решениями как Google Maps, FCK Editor, D3 charts и множество других. Однако, это всего лишь капля в море. Каждый день появляются новые JS библиотеки, и невозможно обеспечить поддержку всех их “из коробки”. Вместо этого, Webix позволяет создавать новую интеграцию для любой сторонней библиотеки, используя всего несколько строк. Давайте посмотрим, как это осуществляется.


Что такое HipChat

HipChat — это один из лучших профессиональных чатов. Первоначально, он был создан как десктопное приложение, однако в последней версии есть веб API, а также реализована возможность подключить компонент Chat на HTML-страницу. Таким образом, теперь вы можете разместить готовый чат на вашем сайте или приложении. Этот чат обладает набором всех функций, необходимых для профессионального общения между сотрудниками компании.

Создание виджета HipChat

Для создания нового виджета с Webix, мы можем использовать следующий код:

webix.protoUI({
    name:"hipchat",
    $init:function(config){
        //параметры конфигурации
        var params = [
            "anonymous=true",
            "minimal=true",
            "timezone="+config.timezone,
            "welcome_msg="+(config.welcome_msg||"Welcome to Webix Hub Chat")
        ];

        //построение полного url
        var url = config.url + (config.url.indexOf("?") > 0 ? "&" : "?") + params.join("&");
        if (url.indexOf("https://") !== 0)
            url = "https://" + url;

        //загрузка hipchat
        this.$view.innerHTML = "<iframe src='" + url + "' frameborder='0' width='100%' height='100%'></iframe>";
    },
}, webix.ui.view);

Код достаточно прост. Он создает новый виджет и определяет функцию-конструктор. Код конструктора создает url для HipChat и рисует виджет. Этого достаточно для того, чтобы создать кастомный виджет, который затем может быть использован так же, как и любой дефолтный компонент:

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

Два параметра, являющиеся обязательными для виджета HipChat — это url и timezone. URL можно взять из HipChat-клиента при совместном доступе в комнату.

Такой кастомный виджет будет работать так же, как и другие компоненты Webix. Его можно расположить прямо на странице, или он может стать частью Webix layout (например, находиться в компоненте tabbar, accordion или window). Посмотрите, для примера следующий сэмпл:

http://snippet.webix.io/29d9a102

Вы можете изменить размеры виджетов Webix, при этом виджет HipChat адаптируется под их размер соответствующе.

Webix хорош, не правда ли?

Как видите, для того чтобы встроить сторонний компонент в виджеты Webix, требуется всего несколько строк кода.

Единственная проблема заключается в том, что каждый раз нам приходится писать этот кода с нуля. Поэтому мы решили создать открытый репозиторий для таких решений. Он расположен по адресу https://github.com/webix-hub/components. Здесь мы планируем размещать все интеграции для сторонних библиотек и кастомных компонентов — все дополнения, которые могут быть использованы с библиотекой Webix.

Автор
The following two tabs change content below.

Maksim Kozhukh

Основные инструменты – Javascript, HTML и CSS. В детстве был благовоспитанным мальчиком, но начал программировать калькуляторы, контроллеры, компьютеры, связался с программистами и покатился…
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn VK Vote on Reddit