[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).