Category Archives: Javascript

B4J: ABMaterial 3.20 Public/3.50 Donators Released!

ABMB4JABMaterial 3.50 for B4J introduces Drag & Drop of ABMContainers between Cells! This new feature took a couple of weeks to implement, but I’m proud of the result.
It opens up a whole new range of possibilities for Web Apps.

Not many bug fixing needed in this release. Proves ABMaterial is really stable and truly production ready! (Happy face)

ABMGoogleMap also adds the possibility to use marker clusters, which cleans up your google map if you have many markers in one map.


Head to the ABMaterial section on this blog to get your free copy of 3.20, or make a small donation to support the development and get the latest 3.50 version + 9 extra libraries and tools to use in your own projects!

Have a great summer!


Click here to Donation and support ABMaterial


B4J: New in ABMaterial 3.50: Drag and Drop about anything


It may have been a bit silent the last few weeks around ABMaterial, but behind the scenes I have been working nights and weekends on maybe the biggest new feature since Chipmunk was introduced: Drag & Drop!

In 3.50, it will be possible to drag ABMContainers (and hence about anything in it) from one cell to another.

Let’s watch a video demonstration first:

Pretty cool hè!

How it works in B4J:
I explain the basics here, the DragDrop demo project included in the ABMaterial 3.50 download will show all tricks shown in the demo video.

1. Page_ParseEvent() gets a little bit of extra code to sync the moves made in the browser with our server

If SubExists(Me, eventName) Then
     If eventName = "page_dropped" Then
     End If
     Select Case Params.Size

2. Next we define a ‘DRAG’ group:

' name, minimum height of a cell
page.DragDropCreateGroup("DRAG", 150)

3. We add cells to this ‘DRAG’ group we want to drag & drop between. The last ‘null’ parameter can be any ABMComponent you want to use a title of the cell (e.g. the COLUMN X ABMLabel in the demo).

page.DragDropAddZone("DRAG", "DRAGCELL1", page.Cell(3,1),null)
page.DragDropAddZone("DRAG", "DRAGCELL2", page.Cell(3,2),null)
page.DragDropAddZone("DRAG", "DRAGCELL3", page.Cell(3,3),null)

4. We add our draggable ABMContainers to the cells. Note: they MUST be added with AddArrayComponent!

Here we also enable them to be draggable with cont.EnableDragDropZone().  There is also a shortcut method to enable/disable all ‘Zones/Cells’ in a group with cont.EnableDragDropAllZonesFromGroup() in one go.

page.Cell(3,1).AddArrayComponent(CreateCard("1", True, True, True, "I may be dragged everywhere", "../images/list1.jpg"), "Cards")

Sub CreateCard(ID As String, AllowInCell1 As Boolean, AllowInCell2 As Boolean, AllowInCell3 As Boolean, Title As String, image As String) As ABMContainer
  Dim cont As ABMContainer
  cont.Initialize(page, ID, "")
  cont.AddRows(1,True,"").AddCells12(1, "")

  cont.IsTextSelectable = False

  If AllowInCell1 Then
    ' can be dragged to zone 1 of 'DRAG'
  End If
  If AllowInCell2 Then
    ' can be dragged to zone 2 of 'DRAG'
  End If
  If AllowInCell3 Then
    ' can be dragged to zone 3 of 'DRAG'
  End If
  cont.EnableDragDropZone("DRAG","DRAGCELL4",True) ' for the sidebar

  Dim card As ABMCard
  card.InitializeAsCard(page, "card", "MY CARD", Title, ABM.CARD_SMALL, "")
  card.Image = image
  card.AddAction("Press me")

  ' add the card to the page
  Return cont
End Sub

5. There are three events you will receive (all on Page level):

Sub Page_DragStart(component As String, source As String)
  Log("Drag start: " & component)
End Sub

Sub Page_DragCancelled(component As String, source As String)
  Log("Drag cancelled: " & component)
End Sub

' there are four parameters: component, source , target, before
Sub Page_Dropped(Params As Map)
  Log("Dropped: " & Params.Get("component"))
End Sub

And this is basically it! Very simple without having to write any HTML, CSS, PHP or Javascript. All done in pure B4J!

I’m finishing up ABMaterial 3.50, ABMonitor (an upcoming article on this for B4J and B4A soon on the blog) and ABTreeTableView now and early next week I think I may be able to release it to the donators.



Click here to Donation and support ABMaterial

B4X: ABMaterial 3.03 Public/3.20 Donators released

A lot of internal changes were made in the ABMaterial 3.20 ‘Chipmunk’ release.  For example, ABMContainer has been rewritten from the ground-up, but with minimal impact to your existing projects.  It allows adding them as array components, and has much shorter ID tags in the generated HTML.

Mindful and Stanmiller had another go on the cache issues.  They came up with a very nice solution (I had tears in my eyes) and both have done extensive testing on this subject. A big thanks again!  ABM 3.20 is backwards compatible with the previous 3.0.3 Cache System, but I would advice you to make the changes whenever you have the chance.

A nice new feature for mobile devices is the New Debug feature using a modified version of Conzole!

New Debug at work:

Using this new feature is very simple in B4J:

First, you have to enable the console in BuildPage():

' params are: open on load, width
page.DebugConsoleEnable(True, 300)

Two methods can be used to show or hide the console programmaticaly. Can be handy as a buid-in tool in your apps where the user enters a code on his device and you can then check the console.


Now you can start doing some cool stuff 🙂 Some examples:

Show some text, or a server value (note: strings must be between single quotes!)

page.DebugConsoleLog("'Server click at: " & DateTime.Time(DateTime.Now) & "'") ' shows the text

Now I generated an error on purpose, so the demo can show it catches the error:

page.DebugConsoleLog("'value: ' + $('#pi002-r2c1').html();") ' generates an error, the ; at the end is wrong

Same code, but with the correct javascript syntax, showing the html() value of the tag:

page.DebugConsoleLog("'value: ' + $('#pi002-r2c1').html()") ' generates the html value of the pi002-r2c1 tag

It works also on the desktop, although you probably will use the Chrome console as you can do more.

But there is more. You can also redirect all browser console message directly into the B4J log window!  You can use the following commands anywhere in your own code to start/stop receiving the browser console messages.


This is a very powerful feature if you develop Webapps for mobile devices.  It can be done otherwise, but it is a pain in the a$$ to set it up. Now, you can easily debug it on your iPhone, iPad, Android or any other device.

ABMaterial 3.20 has over 20 new features and bug fixes.  Following the same philosophy as B4X, the quick release cycle has proven to work very well for ABMaterial and its many users.  Donators will receive their download mail shortly.  The public version 3.03 can be downloaded from this blog too.

I’m also glad that with these releases, now everyone can work with ‘Chipmunk‘, and this does also mean the development cycle for ‘Butterfly‘  has ended.

I would like to take this opportunity to thank everyone for the support, hourless testing and inventive ideas you came up with in the last few years. You’ve made ABMaterial one hell of a WebApp Development Tool!


But we are not at the end! Far from it as I already have big ideas for the next releases.

Until then, happy programming!


Click here to Donation and support ABMaterial

B4J: New section and page navigation feature in ABMaterial (3.02)


ABMaterial 3.02 Maintenance Release will have a new feature, especially useful for ‘one page’ apps/websites to navigate. It intruduces ‘sections‘ within a page. A section is a logical grouping of rows, which can have its own background and a new extra navigation method/menu.

Sections must be declared at the BuildPage() stage, and are typically created right after the page.BuildGrid() method.

First, let me show you how it works and then I’ll explain how this is archieved with just 12 lines of B4J code!


Code (creating the Theme):

theme.Page.AddSection("section1", ABM.COLOR_BLACK, "", ABM.COLOR_WHITE, "")
theme.Page.AddSection("section3", ABM.COLOR_WHITE, "", ABM.COLOR_BLUE, ABM.INTENSITY_LIGHTEN3)
theme.Page.AddSection("section4", ABM.COLOR_WHITE, "", ABM.COLOR_GREY, ABM.INTENSITY_DARKEN3)

Code (Adding the sections & the navigation)

page.CreateSection("section1", 1,1,ABM.COLOR_WHITE, "", "", "", "","calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL,"Section1")
page.SetSectionNavigation("section1", "section2", "Go to Section 2", ABM.SECTION_BUTTONTYPE_DOWN, "section1", "Section 1" )
page.CreateSection("section2", 2,2,ABM.COLOR_GREEN, "", "../images/bg-1.jpg", ABM.CONTAINERIMAGE_REPEAT_NOREPEAT, ABM.CONTAINERIMAGE_POSITION_COVER, "calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL, "Section2")
page.SetSectionNavigation("section2", "section3", "Go to Section 3", ABM.SECTION_BUTTONTYPE_DOWN, "section2", "Section 2")
page.CreateSection("section3", 3,3,ABM.COLOR_BLUE, "", "", "", "", "calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL,"Section3")
page.SetSectionNavigation("section3", "section4", "Go to Section 4", ABM.SECTION_BUTTONTYPE_DOWN, "section3", "Section 3")
page.CreateSection("section4", 4,4,ABM.COLOR_BLACK, "", "", "", "", "calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL, "Section4")
page.SetSectionNavigation("section4", "section1", "Back to Section 1", ABM.SECTION_BUTTONTYPE_UP, "section4", "Section 4")

In this example each section has only a height of 1 row (hence the from row 1 to row 1, from row 2 to row 2,…)

But, this can be any size, e.g. from row 5 to row 25. Something like:

page.CreateSection("section5", 5,25,ABM.COLOR_BLACK, "", "", "", "", "calc(100vh - 56px)", 56, 500, ABM.VISIBILITY_ALL, "Section4")

NOTE: Sections cannot be nested or overlapping!

The tricky part are the minHeight and scrollTop params. In the above examples, I’ve set the minHeight to the browsers height, minus the height of the TopBar: “calc(100vh – 56px)”.
For scrollTop, I’ve set it the the height of the TopBar so the top of the section is right under the navigation bar: 56

ABMaterial 3.02 Maintenance Release will go out in acouple of days to the donators with 25 bug fixes and implemented wishes!


Click here to Donation and get the latest ABMaterial first!

B4J: ABMaterial Facebook-like timeline in less than 200 lines!


I recently had a question if it was possible to create a Facebook-like WebApp with ABMaterial for B4J. I had some time to spare tonight (yeah right):rolleyes: and decided to give it a go…

All I needed were a couple of ABMContainers and the new CloseContent/OpenContent feature introduced in 3.02. The existing NextContent system would provide the infinite page.

It also uses a ABMCustomComponent for the ‘Like’ feature (I based it on this project), and you can find the source code of the class under the video:

About an hour, and 200 lines of B4J code later, I had a working timeline!  A real project would of course need some way to add an article, save them in the database, user management, etc but this is out of scope of this article.

Note: This example will be included in the upcoming 3.02 Maintenance Update, but I would like to share the source source code for the ‘Like’ functionality beforehand.

Source code for the ‘Like’ custom component.
You’ll need this zip file for the images and js/css files. Put the images and css in the /www/css/custom folder, the js file in the /www/js/custom/ folder.

The class LikeComponent:

'Class module
Sub Class_Globals
   Public ABMComp As ABMCustomComponent
   Public Counter As Int
End Sub

'Initializes the object. Countries and data are Json Strings
Public Sub Initialize(InternalPage As ABMPage, ID As String, AlreadyLiked As Int)
   ABMComp.Initialize("ABMComp", Me, InternalPage, ID)
   Counter = AlreadyLiked
End Sub

Sub ABMComp_Build(internalID As String) As String
   Return $"
<div id="${internalID} class="facebook-reaction"><!-- container div for reaction system -->
        <span class="like-btn"> <!-- Default like button -->
          <span class="like-btn-emo like-btn-default"></span> <!-- Default like button emotion-->
           <span class="like-btn-text">Like</span> <!-- Default like button text,(Like, wow, sad..) default:Like  -->
<ul class="reactions-box"> <!-- Reaction buttons container-->
	<li class="reaction reaction-like" data-reaction="Like"></li>
	<li class="reaction reaction-love" data-reaction="Love"></li>
	<li class="reaction reaction-haha" data-reaction="HaHa"></li>
	<li class="reaction reaction-wow" data-reaction="Wow"></li>
	<li class="reaction reaction-sad" data-reaction="Sad"></li>
	<li class="reaction reaction-angry" data-reaction="Angry"></li>
<div class="like-stat"> <!-- Like statistic container-->
           <span class="like-emo"> <!-- like emotions container -->
             <span class="like-btn-like"></span> <!-- given emotions like, wow, sad (default:Like) -->
           <span class="like-details">${Counter} others</span></div>
End Sub

Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
   Dim script As String = $"$("#${internalID} .reaction").on("click",function(){  // like click
     var data_reaction = $(this).attr("data-reaction");
     $("#${internalID} .like-details").html("You and ${Counter} others");
     $("#${internalID} .like-btn-emo").removeClass().addClass('like-btn-emo').addClass('like-btn-'+data_reaction.toLowerCase());
     $("#${internalID} .like-btn-text").text(data_reaction).removeClass().addClass('like-btn-text').addClass('like-btn-text-'+data_reaction.toLowerCase()).addClass("active");;

     if(data_reaction == "Like") {
         $("#${internalID} .like-emo").html('<span class="like-btn-like"></span>');
     } else {
         $("#${internalID} .like-emo").html('<span class="like-btn-like"></span><span class="like-btn-'+data_reaction.toLowerCase()+'"></span>');
     var json = {'target': '${internalID}', 'like': data_reaction};
     b4j_raiseEvent('likecomponent_liked', json);

     $("#${internalID} .like-btn-text").on("click",function(){ // undo like click
       $("#${internalID} .like-btn-text").text("Like").removeClass().addClass('like-btn-text');
       $("#${internalID} .like-btn-emo").removeClass().addClass('like-btn-emo').addClass("like-btn-default");
       $("#${internalID} .like-emo").html('<span class="like-btn-like"></span>');
       $("#${internalID} .like-details").html("${Counter} others");
       var json = {'target':'${internalID}'};
         b4j_raiseEvent('likecomponent_unliked', json);
     })"$, Array As Object(ABMComp.ID))
   ' flush not needed, it's done in the refresh method in the lib
End Sub

Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)

End Sub

' do the stuff needed when the object is removed
Sub ABMComp_CleanUp(InternalPage As ABMPage, internalID As String)

End Sub


Sub Class_Globals
   Dim myLike As LikeComponent
End Sub

' adding the component
myLike.initialize(page, ID & "Like", Rnd(20, 500))

Events (the name LikeComponent is set in the FirstRun() method of the class:

public Sub LikeComponent_Liked(value As Map)
   Log(value.Get("like") & " ----> " & value.Get("target"))
End Sub

public Sub LikeComponent_UnLiked(value As Map)
   Log("Unliked ----> " & value.Get("target"))
End Sub

Et voila,  a nice little demonstration of what you can make using B4J and ABMaterial.

I’ll end with a little word of advice:

If you only plan to learn one programming language this year, B4X is definitely the one you should pick!  With ABMaterial, I give you the power to write responsive, professional WebApps, and with the other B4X tools you write native Android, iOS, Desktop (Mac, Windows, Linux), Raspberry Pi and Arduino apps.  All with the same language!  You’ll wonder why you ever bothered looking at all those other pricy programming tools out there…

Happy programming!


Click here to Donation and get the latest ABMaterial first!

B4J: ABMaterial 2.51 Public/3.00 ‘Chipmunk’ for Donators Released!


I’m very happy to release ABMaterial 3.00 “Chipmunk” for B4J with over 35 new features and bugfixes!  The most easy-to-use framework for developing professional responsive WebApps for all platforms is now at its third major release.

‘Chipmunk?’, I hear you think… Yes, from now on, every major version of ABMaterial will have a codename. Those names were already used internally and are animal names, matching the versions position in the alphabet. (FYI, version 1.x was “Albatros“, 2.x was “Butterfly“). For version 4.0, I’ll let you decide what it is called… :)

For the occasion, I also gave the demo app a new Theme. Make sure to check it out.

Please express your thanks to Mindful, who has done a remarkable effort to join me for a 3 day program-jam session to solve the reconnecting issues. The solution looks very clean and is easy to understand. A big thanks Mihai!

Chipmunk now also has the possibility to generate template projects for both B4J and B4A using a WebView wich makes it possible to use the Native functionalities (like accessing a camera, contacts, folders and much more) on your Android and Desktop/Raspberry Pi devices. An extra ABMController library makes it easy to communicate bidirectional between the WebView and the B4X code. The ABMController library for B4i is in the making.

The public version 2.51 with the Google Analytics bugfix is available to download here.

Donators will receive their download link for Chipmunk shortly.


Click here to Donation and get the latest ABMaterial first!


Warning: Malicious link to Google Analytics cached page!


As an alert user of ABMaterial pointed out some malicious site is abusing a much used cache of the Google Analytics script.  A lot of web developers used the cache on (do not click!), and up to ABMaterial 2.20, so did I as it was a lot faster than the default Google one.


Make sure your script points to Googles secure site:

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

For users working with ABMaterial 2.20 or less, disable Google Analytics by commenting out the following lines:

' page.UseGoogleAnalytics("YourTrackingID", "")

In later versions (2.50+), this is not an issue, as it already points to Googles secure site.

I’ll release a new public version with the fix as soon as possible, but for now, just disable this feature.


Click here to Donation and get the latest ABMaterial first!


%d bloggers like this: