Integrate third-party libraries

Webix JS
#1

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?

#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)