B4J Question [ABMaterial] Integrate Javascript Into

Harris

Expert
Licensed User
Longtime User
I am seeking examples of how to integrate Javascript into ABMaterial. How-to's...

I need to incorporate the Next-Reports engine within my app. The Next-Reports server would seem trivial - just add the url to where the server resides...

Also, I would like to add a chart lib that supports my special graph I need to produce.
iFrames are another case that may prove useful.

Any and all suggestions / examples are most welcome. I just don't know where to begin...

I promise when I get this mastered, I shall create a tutorial for others to learn by instruction.

Thanks
 

alwaysbusy

Expert
Licensed User
Longtime User
I'm trying to put together a new component: ABMCustomComponent that should make it easier to add your own objects. Work in progress, and it will be for the more advanced user!

It would look somewhat like this in B4X:

B4X:
'Class module

' on the page that uses this component, set extra javascript and CSS files
' page.AddExtraJavaScriptFile("mycomp.js")
' page.AddExtraCSSFile("mycomp.css")

Sub Class_Globals
    Dim ABM As ABMaterial
    Dim ABMComp As ABMCustomComponent
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(page As ABMPage, ID As String)
    ABMComp.Initialize("ABMComp", Me, page, ID)
    ' the automatic events will be raised on the page e.g. if the id = "mycomp" then the event will be mycomp_Click(params as Map)
    ' future: we'll see if some other mechanisme is needed for non automatic events
End Sub

' runs when an object is created for the first time. Expects a valid html string
' in the html file:
'<div ID="mycomp" class="">
'  <h1 ID="testh1">This Is a test</h1>
'</div>
Sub ABMComp_Build() As String
    Log("running Build")
    Return $"<h1 id="testh1">This is a test</h1>"$
End Sub

' Is useful to run some initalisation script

Sub ABMComp_FirstRun(Page As ABMPage)
    Log("running javascript")

    ' Dim script As String = "..."

    ' Page.ws.Eval(script, Array As Object(ABMComp.ID))
    ' flush not needed, it's done in the refresh method in the lib
End Sub

' runs when a refresh is called
Sub ABMComp_Refresh(Page As ABMPage)
    Log("running Refresh")
    ' use these methods to adjust the object
    ' ABM.HasClass
    ' ABM.AddClass
    ' ABM.RemoveClass

    ' ABM.AddHTML
    ' ABM.InsertHTMLAfter
    ' ABM.RemoveHTML

    ' ABM.GetProperty
    ' ABM.SetProperty
    ' ABM.RemoveProperty

   ' ABM.GetStyleProperty
   ' ABM.SetStyleProperty

    ' do some script stuff like you do in RunJavaScript
End Sub

' do the stuff needed when the object is removed
Sub ABMComp_CleanUp()

End Sub
 
Last edited:
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
It's looking promising: This is for example like the full source code to add a custom slider (in this case a vertical noUISlider):

upload_2016-1-14_16-12-44.png


B4X:
'Class module

'   on the page that uses this component, set extra javascript and CSS files

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

'   creating a slider and adding to the cell in BuildPage()
  
'    Dim custSlider As CustomSlidebar
'    custSlider.Initialize(page, "custSlider")
'    page.CellR(5,1).AddComponent(custSlider.ABMComp)

'   And here we catch our event in the page

'   Sub custSlider_Changed(Params As Map)
'        Log("changed")  
'   End Sub

Sub Class_Globals
    Dim ABMComp As ABMCustomComponent
    Private myValue As Double
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(page As ABMPage, ID As String, value As Double)
    ABMComp.Initialize("ABMComp", Me, page, ID)
    myValue = value
End Sub

' runs when an object is created for the first time
Sub ABMComp_Build() As String
    Return $"<div id="mycustomslider" style="height:200px" >"$  
End Sub

' Is useful to run some initalisation script.
Sub ABMComp_FirstRun(Page As ABMPage)
    Dim script As String = $"var mycustomslider = document.getElementById('mycustomslider');
                             noUiSlider.create(mycustomslider, {
                                start: [${myValue}],
                                connect: false,
                                step: 1.0,
                                orientation: 'vertical',
                                direction: 'ltr',
                                range: {
                                  'min': 0.0,
                                  'max':100.0
                                },
                                format: wNumb({ decimals: 0 }
                             )});
                             mycustomslider.noUiSlider.on('change', function( values, handle ){
                                console.log("changing");
                                b4j_raiseEvent('${ABMComp.ID}_changed', {'value':values[handle]});
                               });"$
  
     Page.ws.Eval(script, Array As Object(ABMComp.ID))
    ' flush not needed, it's done in the refresh method in the lib
End Sub

' runs when a refresh is called
Sub ABMComp_Refresh(Page As ABMPage)
    Dim script As String = $"var mycustomslider = document.getElementById('mycustomslider');
                             mycustomslider.noUiSlider.set(${myValue});");"$  
    Page.ws.Eval(script, Null)  
End Sub

' do the stuff needed when the object is removed
Sub ABMComp_CleanUp()
  
End Sub

Public Sub SetValue(Value As Double)
    myValue = Value
End Sub
 
Last edited:
Upvote 0

Mashiane

Expert
Licensed User
Longtime User
I am seeking examples of how to integrate Javascript into ABMaterial. How-to's...

I need to incorporate the Next-Reports engine within my app. The Next-Reports server would seem trivial - just add the url to where the server resides...

Also, I would like to add a chart lib that supports my special graph I need to produce.
iFrames are another case that may prove useful.

Any and all suggestions / examples are most welcome. I just don't know where to begin...

I promise when I get this mastered, I shall create a tutorial for others to learn by instruction.

Thanks
Hi Harris, did you ever get to finish the Next Report intergration?
 
Upvote 0
Top