B4J Library [ABMaterial] Sneak Peek B4JS support for JQuery

Now that we have B4JS in ABM 4.25, the next update will also support a wrapper for JQuery. This means you will be able to use JQuery commands in the B4JS classes to manipulate the DOM in the browser

This is advanced stuff, and knowledge of JQuery will be required. But could be very helpful to create 'stand-alone' JavaScript libraries that can also work outside ABM.

In this video:
1. a timer to change a label (previously created with ABM in this case
2. a complete new switch object
3. a div where an object follows the mouse and when we leave, returns to the center


1. the timer B4JS code:

Sub Class_Globals
   Private Page As ABMPage 'ignore, just to be able to run ABMPage functions
   Private ABM As ABMaterial 'ignore, just to be able to use ABM constants
 
   Private JQ As B4JSJQuery

   Private labelTimer As Timer
   Private Counter As Int
End Sub

Public Sub InitializeB4JS
   labelTimer.Initialize("labelTimer", 1000)
   labelTimer.Enabled = True
End Sub

Sub labelTimer_Tick
   Counter = Counter + 1
   JQ.GetByUniqueKey("lblTimer001").SetText("Current value: " & Counter)
   ' GetByUniqueKey is a shortcut for the normal JQuery Get:
   ' JQ.Get("[data-b4js='lbltimer001']").SetText("Current value: " & Counter)
End Sub

2. the switch B4JS code:

Sub Class_Globals
   Private Page As ABMPage 'ignore, just to be able to run ABMPage functions
   Private ABM As ABMaterial 'ignore, just to be able to use ABM constants
 
   Private JQ As B4JSJQuery
End Sub

Public Sub InitializeB4JS
   Dim cssRules As B4JSJQueryElement = JQ.Get("<style>").SetProp("type", "text/css").appendTo(JQ.Get("head"))
   cssRules.append(".innerS, .outerS {height:20px;color:#FFF;}")
   cssRules.append(".outerS {height: 24px;cursor:pointer;background-color: rgb(51, 98, 118);width:200px;border-radius:5px;border: 2px solid rgb(51, 98, 118);}")
   cssRules.append(".innerS {text-align: center;background-color: rgb(41, 171, 226);width:120px;border-radius:3px;margin-left:0px;-webkit-transition-property: margin-left;-webkit-transition-duration: 0.5s;transition-property: margin-left;transition-duration: 0.5s;}")
   cssRules.append(".floatR {margin-left:76px;}")
 
   JQ.Get("#r9c1").append($"<h1>B4JS with JQuery</h1>
    <div class="outerS" id="defaultOff" togText="ON">
      <div class="innerS">DEFAULT OFF</div>
   </div>
    <br/>
    <div class="outerS" id="defaultOff" togText="OFF">
      <div class="innerS floatR">DEFAULT ON</div>
   </div>"$)
 
   JQ.Get(".outerS").SubOnEvents("click","")
       Dim innerS As B4JSJQueryElement = JQ.This.find(".innerS")
       innerS.toggleClass("floatR")
       Dim x As String = JQ.This.GetAttr("togText")
       JQ.This.SetAttr("togText", innerS.GetHtml)
       innerS.SetHtml(x)
   JQ.EndSub
End Sub

3. The mouse follower B4JS code:

Sub Class_Globals
   Private Page As ABMPage 'ignore, just to be able to run ABMPage functions
   Private ABM As ABMaterial 'ignore, just to be able to use ABM constants
 
   Private JQ As B4JSJQuery
 
   Private mouseX, mouseY, xp, yp As Int
   Private follower As B4JSJQueryElement
   Private looper As Timer
   Private LooperModus As Int
End Sub

Public Sub InitializeB4JS 
   Dim cssRules As B4JSJQueryElement = JQ.Get("<style>").SetProp("type", "text/css").appendTo(JQ.Get("head"))
   cssRules.append($".followcanvas {width:50%; height:350px; position:relative; background:green;}"$)
   cssRules.append($".followbadge{ display:inline-block; white-space: nowrap; padding:10px; background:blue; position:absolute; top:50%; left:50%; font-size:14px; text-transform:uppercase; transform: translateY(-50%) translateX(-50%);}"$)

   JQ.Get("#r10c1").append($"<div class="followcanvas"><span class="followbadge">Visit the website</span>"$)
 
   looper.Initialize("looper", 30)
   Dim canvas As B4JSJQueryElement = JQ.Get(".followcanvas")
 
   follower = JQ.Get(".followbadge")
 
   canvas.SubOnEvents("mouseenter", "")
       looper.Enabled = False
       mouseX = JQ.B4JSPARAM_JQUERYEVENT.PageX -  canvas.GetOffsetLeft
       mouseY = JQ.B4JSPARAM_JQUERYEVENT.PageY - canvas.GetOffsetTop
       xp = JQ.ParseInt(follower.GetCss("left"))
       yp = JQ.ParseInt(follower.GetCss("top"))
       LooperModus = 0
       looper.Enabled = True
   canvas.EndSub
 
   canvas.SubOnEvents("mousemove", "")
       mouseX = JQ.B4JSPARAM_JQUERYEVENT.PageX - canvas.GetOffsetLeft
       mouseY = JQ.B4JSPARAM_JQUERYEVENT.PageY - canvas.GetOffsetTop
       ' Check limit right
       If mouseX + (follower.getOuterWidth / 2) - 5 >= canvas.getInnerWidth Then
           mouseX = canvas.getInnerWidth - (follower.getOuterWidth / 2) - 5
       End If
       ' Check limit bottom
       If mouseY + (follower.GetOuterHeight / 2) - 5 >= canvas.getInnerHeight Then
           mouseY = canvas.getInnerHeight - (follower.getouterHeight / 2) - 5
       End If
       ' Check limit top
       If mouseY - (follower.getouterHeight / 2) + 5 <= 0 Then
           mouseY = (follower.getouterHeight / 2) + 5
       End If
       ' Check limit left
       If mouseX - (follower.getouterWidth / 2) + 5 <= 0 Then
           mouseX = (follower.getouterWidth / 2) + 5
       End If
   canvas.EndSub
 
   canvas.SubOnEvents("mouseleave", "")
       looper.Enabled = False    
       mouseX = canvas.GetInnerWidth / 2
       mouseY = canvas.GetInnerHeight / 2
       LooperModus = 1
       looper.Enabled = True
   canvas.EndSub
End Sub

Sub looper_Tick
   If LooperModus = 0 Then
       xp = xp + (mouseX - xp) / 15
       yp = yp + (mouseY - yp) / 15
       follower.SetCss("left", xp)
       follower.SetCss("top", yp)
   Else
       xp = xp + (mouseX - xp) / 20
        yp = yp + (mouseY - yp) / 20
       follower.SetCss("left", xp)
       follower.SetCss("top", yp)
        If mouseX = xp And mouseY = mouseY Then
            looper.Enabled = False
        End If
   End If
End Sub

Alwaysbusy

 

[Mashiane]

This is advanced stuff, and knowledge of JQuery will be required. But could be very helpful to create 'stand-alone' JavaScript libraries that can also work outside ABM. Alwaysbusy

I like that a lot. I sometimes wonder why my brain seems to struggle with the seemingly easy stuff and at times cruze with some difficult things. For a while I have been literally running away from B4JS (postponing learning), now I'm starting to see the whole connection. I have never developed a game in my life, so this is a try in the future of things to come but as soon as some ABM apps are out, a pro-bono app for an NGO etc etc.

This is good stuff. Thanks for this.

 

[mindful]

@alwaysbusy will this be available in 4.26 ?

 

[alwaysbusy]

Most likely

 

[Don Oso]

Wow! its possible add AngularJS support? or its too complex?

 

[Mashiane]

Can you do us a solid please? Because this internalizes the custom components more in some way (custom components are just css, js and some html code), can you work on an example to do that? Just a simple one as a start. Thanks.