Criando visualização personalizada – integração HipChat

Uma das grandes vantagens do Webix ( http://webix.com/ ) é a possibilidade de utilizar componentes de terceiros. Obviamente, em vez de reinventar a roda, é melhor tirar proveito de soluções confiáveis ​​e prontas para usar. Especialmente agora, quando a comunidade de código aberto está ativamente desenvolvendo e apoiando uma variedade de bibliotecas interessantes.

O pacote Webix padrão já inclui wrappers para soluções populares como Google Maps, FCK Editor, gráficos D3 e muitos outros. No entanto, é uma gota no oceano. Todos os dias surgem novas bibliotecas js e é impossível fornecer suporte a todas elas fora da caixa. Em vez disso, o Webix permite criar uma nova integração para qualquer biblioteca de terceiros por, literalmente, várias linhas. Vamos verificar como isso pode ser feito.

<b> O que é HipChat </b>

O HipChat é uma das melhores soluções de chat profissional. Originalmente, ele foi criado como um aplicativo de desktop, mas mudanças recentes introduziram a API da web e a capacidade de incluir o componente de bate-papo em uma página html. Portanto, agora você pode colocar a solução de bate-papo pronta para uso em escala empresarial em seu site ou aplicativo.

<b> Construindo visualização HipChat </b>

Para criar uma nova visualização para webix, podemos usar o código semelhante a este:

  webix.protoUI({
name:"hipchat",
$init:function(config){
    //configuration params
    var params = [
        "anonymous=true",
        "minimal=true",
        "timezone="+config.timezone,
        "welcome_msg="+(config.welcome_msg||"Welcome to Webix Hub Chat")
    ];

    //building full url
    var url = config.url + (config.url.indexOf("?") > 0 ? "&" : "?") + params.join("&");
    if (url.indexOf("https://") !== 0)
        url = "https://" + url;

    //loading the hipchat
    this.$view.innerHTML = "<iframe src='" + url + "' frameborder='0' width='100%'  height='100%'></iframe>";
  },
  }, webix.ui.view);

O código é muito simples. Ele cria uma nova visualização e define a função do construtor. O código do construtor cria o url do HipChat e renderiza a visualização. Isso é o suficiente para criar uma visualização personalizada, que mais tarde pode ser usada da mesma forma que qualquer componente padrão:

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

Existem dois parâmetros obrigatórios – url e fuso horário. A URL pode ser obtida do cliente hipchat, quando você está compartilhando o acesso à sala.

Essa visualização personalizada funcionará da mesma forma que qualquer componente webix comum. Ele pode ser colocado diretamente na página ou pode fazer parte do layout do webix (colocado na barra de guias, acordeão ou janela). Por exemplo, verifique a próxima amostra:

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

Você pode redimensionar (recolher) as visualizações do webix e a visualização do HipChat se ajustará de acordo.

<b> Tudo bem? </b>

Como você pode ver, são necessárias apenas algumas linhas de código para incorporar um componente de terceiros nas visualizações do Webix.

Ao adicionar wrappers simples, é possível usar qualquer biblioteca personalizada com a IU do Webix. Ainda assim, há um problema que cada vez que temos que começar a criar esses invólucros do zero. É por isso que decidimos criar um repositório aberto para soluções desse tipo. Ele está localizado em https://github.com/webix-hub/components . Aqui, planejamos colocar todas as integrações para bibliotecas de terceiros e componentes personalizados – todos os extras que podem ser usados ​​com a biblioteca Webix.