Integrate third-party libraries

Hello! I am trying to integrate my own js-library into webix. I took ace-editor integration as an example. Everything went well while there were only one ui using my own view. When I add more ui there is mess begining (reinicialization and other stuff). The reason is the realization of my library in my opinion. Can you give some advice/instruction how to create basic library to intergate it with webix?

Tagged:

Comments

  • edited January 2

    Hello,

    In general, a custom Webix widget (usually based on primary ui.view) can serve as a container for a third-party widget (in other words, for any html content).

    As a better start point, you can try to explore a basic example with Wijmo charts:

    http://jsfiddle.net/8qpem2xv/

    The webix.protoUI which results in a Webix custom component is quite simple here. It features just

    • rendering,
    • passing Wijmo config from configuration of Webix view
    • resizing
    • ability to get the nested instance of Wijmo chart to use its API

    All mentioned features are implemented in the following code:

    // custom Webix-Wijmo view
    webix.protoUI({
      name:"wijmoChart",
      $init:function(config){
        this.$view.innerHTML = "<div style='width:100%; height:100%;'></div>";
        this._initChart(config);
      },
      // resize chart on Webix view resize
      $setSize:function(x,y){  
        if (webix.ui.view.prototype.$setSize.call(this,x,y))
          this.getChart().refresh();      
      },
      // a custom 'private' method
      _initChart:function(config){
        var chart = config.chartConfig;      
        new wijmo.chart.FlexChart(this.$view.firstChild, chart);
      },
      // a custom 'public' method
      getChart:function(){
        return wijmo.Control.getControl(this.$view.firstChild);
      }
    }, webix.ui.view);
    

    When I add more ui there is mess begining (reinicialization and other stuff)

    Unfortunately, it is possible if the instance of a widget from you framework is initialized globally with no possibility to reference the exact instance. Otherwise, there is a way to locate particular widget by its Webix container (as implemented above in getChart)

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion