B4J Question [ABMaterial] Integrate Javascript Into

[Harris]

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]

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:

'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

 

[alwaysbusy]

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

'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

 

[Mashiane]

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?

 

[Harris]

Hi Harris, did you ever get to finish the Next Report intergration?

No I have not. I did however master Google charts which works wonderful. Quite simple as well.