This example shows how 3rd party widgets can be wrapped into Hashspace components.
[#output]
This example uses Chart.js that allows several types of charts to be drawn on a canvas component. For this example the chart.js script has been included in the main page of this application and is available as a global variable.
Wrapping a 3rd party widget into a component involves at least 2 methods:
- $refresh() which is an optional method that the component controller may implement. This method is automatically called when one of the component attribute changes - right after the component's template has been refreshed. As a consequence it is the right place to tell the 3rd party library used by the component to update its DOM.
- $getElement(idxOrSelector) that is automatically added to component controllers and that allows to retrieve any ELEMENT_NODEs generated by the component's template. Its argument can be either an index (number) or a CSS selector (string). When the index is used, this method will return the nth root element generated by the component's template. As such child elements cannot be retrieved with the index argument - CSS selectors have to be used instead. As Hashspace may manipulate the DOM, this method should be used with care, preferably on Element nodes that have few interactions with Hashspace (such as the canvas element of this example)
As a reminder there are 2 other methods that are likely to be used on component's controllers when wrapping 3rd party libraries:
- $init(parent) which is an optional initialization method that is called when the component's attributes have been initialized with the values assigned in the component's instance (in this example, the width attribute value would be 380 in $init() and not 100 which is the default value)
- $dispose() which is an optional method called just before the component is destroyed. This method allows object references that could cause memory leaks to be cleaned (e.g. DOM reference kept in the component's controller).