[EXPERIMENTAL] The ABMCustomComponent is a component for advanced users with good knowledge on Javascript/HTML/CSS and wants to add their own components to the ABMaterial framework.

This is an example where we add a vertical noUISlider component to the framework.

First we have to add our javascript and css files to the page:

page.AddExtraJavaScriptFile("custom/nouislider.min.js")
page.AddExtraJavaScriptFile("custom/wNumb.js")
page.AddExtraCSSFile("custom/nouislider.css")

Create a new standard class. Here we call it CustomSlidebar. Add two variables to the global:

Dim ABM As ABMaterial // used for the modification methods.
Dim ABMComp As ABMCustomComponent // the component that holds the object.

The ABMComp object has 4 events:

Event Description
Build Runs when an object is created for the first time.
FirstRun Is useful to run some initialisation script.
Refresh runs when a refresh is called.
CleanUp Do the stuff needed when the object is removed.

Check out the full source code of the CustomSlidebar class for more info.

We're ready to add our new component to the page.

Dim custSlider As CustomSlidebar
custSlider.Initialize(page, "custSlider", 25)
page.CellR(2,1).AddComponent(custSlider.ABMComp)

In the Refresh() event you can use some helper methods to modify the object.

Method Description
HasClass Checks if a class is set on a tag
AddClass Adds a class to a tag
RemoveClass Removes a class from a tag
AddHTML Appends HTML to a tag
InsertHTMLAfter Finds the parent of the tag and adds the HTML at the end of it
RemoveHTML Removes the HTML from the tag
GetProperty Gets a property of a tag
SetProperty Sets a property of a tag
RemoveProperty Removes a property from a tag
GetStyleProperty Gets the value of a style property of a tag
SetStyleProperty Sets the value of a style property of a tag

All the Automatic events (clicked, mousemove, etc) will be automatically generated thanks to B4J. For specific events, you'll have to program them yourself using the b4j_raiseEvent() method in javascript. It will return the event on the page in the format: comp_event(params as Map).