Одним из главных преимуществ Webix является возможность использования сторонних компонентов. Очевидно, что вместо того, чтобы изобретать велосипед, гораздо проще и эффективнее воспользоваться преимуществами надежных готовых решений. Сейчас это особенно актуально, поскольку в настоящее время сообщество свободного программного обеспечения активно разрабатывает и поддерживает целый ряд интересных библиотек.
Стандартный пакет Webix уже включает в себя JS файлы для интеграции с такими популярными решениями как Google Maps, FCK Editor, D3 charts и множество других. Однако, это всего лишь капля в море. Каждый день появляются новые JS библиотеки, и невозможно обеспечить поддержку всех их “из коробки”. Вместо этого, Webix позволяет создавать новую интеграцию для любой сторонней библиотеки, используя всего несколько строк. Давайте посмотрим, как это осуществляется.
Что такое HipChat
HipChat — это один из лучших профессиональных чатов. Первоначально, он был создан как десктопное приложение, однако в последней версии есть веб API, а также реализована возможность подключить компонент Chat на HTML-страницу. Таким образом, теперь вы можете разместить готовый чат на вашем сайте или приложении. Этот чат обладает набором всех функций, необходимых для профессионального общения между сотрудниками компании.
Создание виджета HipChat
Для создания нового виджета с Webix, мы можем использовать следующий код:
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 и рисует виджет. Этого достаточно для того, чтобы создать кастомный виджет, который затем может быть использован так же, как и любой дефолтный компонент:
view:"hipchat", url: "YOUR_GUEST_ACCESS_URL", timezone: "PST"
})
Два параметра, являющиеся обязательными для виджета HipChat — это url и timezone. URL можно взять из HipChat-клиента при совместном доступе в комнату.
Такой кастомный виджет будет работать так же, как и другие компоненты Webix. Его можно расположить прямо на странице, или он может стать частью Webix layout (например, находиться в компоненте tabbar, accordion или window).
Вы можете изменить размеры виджетов Webix, при этом виджет HipChat адаптируется под их размер соответствующе.
Webix хорош, не правда ли?
Как видите, для того чтобы встроить сторонний компонент в виджеты Webix, требуется всего несколько строк кода.
Единственная проблема заключается в том, что каждый раз нам приходится писать этот кода с нуля. Поэтому мы решили создать открытый репозиторий для таких решений. Он расположен по адресу https://github.com/webix-hub/components. Здесь мы планируем размещать все интеграции для сторонних библиотек и кастомных компонентов — все дополнения, которые могут быть использованы с библиотекой Webix.
