B4X: ABMaterials B4JS – 01 Getting Started

In this first tutorial, we are going to create a killer method to calculate the distance between two GEO locations. There are better ways to do so, but for demos sake…

Creating a B4JS class is very simple. Just use the menu in B4J and add a Standard Class.

'Class module
Sub Class_Globals

End Sub

Public Sub Initialize

End Sub

First thing we MUST do is renaming the Initialize method to InitializeB4JS. This is because the transpiler uses this method name to determine it has to translate this class to JavaScript.

This InitializeB4JS method can NOT have parameters!

Now we can start adding our code, just as usual in B4J. As almost the whole Core library of B4J is available, this is pretty forward. Except from the ABM methods, this could easily be seen as B4J.

'Class module
Sub Class_Globals
   ' use public or dim if you want to share this variable over ALL B4JS classes
   ' use private if only within this class
   Dim ToKM As Double = 1.609344
   Dim ToMiles As Double = 0.8684

   ' to access the constants
   Public ABM As ABMaterial 'ignore
   ' so we can use an msgbox
   Public Page As ABMPage 'ignore, just to be able to run ABMPage functions
End Sub

'Initializes the object. You can NOT add parameters to this method.
'MUST be called InitializeB4JS is automatically called when using this class
Public Sub InitializeB4JS

End Sub

public Sub CalcDistance(Lat1 As Double, Lon1 As Double, Lat2 As Double, Lon2 As Double, Unit As String)
   Dim theta As Double
   Dim Distance As Double
   theta = Lon1 - Lon2
   Distance = Sin(deg2rad(Lat1)) * Sin(deg2rad(Lat2)) + Cos(deg2rad(Lat1)) * Cos(deg2rad(Lat2)) * Cos(deg2rad(theta))
   ' logging some intermediate value
   Log("Distance = " & Distance)
   Distance = ACos(Distance)
   Distance = rad2deg(Distance)
   ' logging some intermediate value
   Log("Distance = " & Distance)
   Distance = Distance * 60 * 1.1515
   ' if we would use Page.Msgbox here, we would see in the logs an error: msgbox is NOT supported in B4JS!
   ' we must use the B4JS equivalent method Page.B4JSMsgbox
   Select Case Unit.ToUpperCase
       Case "K"
           Page.B4JSMsgbox("msgbox", "The distance is " & (Distance * ToKM) & " kilometers!", "Tutorial", "OK", False, ABM.MSGBOX_POS_CENTER_CENTER, "")
       Case "N"
           Page.B4JSMsgbox("msgbox", "The distance is " & (Distance * ToMiles) & " miles!", "Tutorial", "OK", False, ABM.MSGBOX_POS_CENTER_CENTER, "")
       Case Else
           Page.B4JSMsgbox("msgbox", "No idea what you are doing :-)", "Tutorial", "OK", False, ABM.MSGBOX_POS_CENTER_CENTER, "")
   End Select
End Sub

' some helper methods
Sub deg2rad(Deg As Double) As Double
   Return Deg * cPI / 180
End Sub

Sub rad2deg(Rad As Double) As Double
   Return Rad * 180 / cPI
End Sub

Depending on how you declare the variable in Class_Globals, a variable is shared between class instances or not:

This concept becomes very important when we start using ABMComponents because when you attach a B4JSOn… event to an ABMComponent, it gets its own instance of your class. The Public/Dim variables will be shared among all the components using this B4JS Class

To use our new method, I’ll make a button in ConnectPage() on the ABM page (this will be explained in a future tutorial) and when we click, we do a calculation:

Dim btn As ABMButton
btn.InitializeFlat(page, "btn", "", "", "Calculate", "")
' B4JSUniqueKey is explained in a later turorial
btn.B4JSUniqueKey = "btn001"
' define the B4JS OnClickedEvent
btn.B4JSOnClick("B4JSCalculateDistance", "CalcDistance", Array As Object(32.9697, -96.80322, 29.46786, -98.53506, "K"))

Alternative, not using an ABMButton but calling our method directly:

page.B4JSRunMethod("B4JSCalculateDistance", "CalcDistance", Array As Object(32.9697, -96.80322, 29.46786, -98.53506, "K"))

So let’s check our results (click to enlarge):


1. In the browsers log we see our two intermediate log() calls.
2. the solution to our call is shown in a message box.

But in the B4J log we also see that the normal btn_Click event is raised! That is not what we want.

To avoid this, we make a simple change to our CalcDistance method. We return a boolean true: this is saying ‘consume the click on the browser side and don’t go to the server‘.

public Sub CalcDistance(Lat1 As Double, Lon1 As Double, Lat2 As Double, Lon2 As Double, Unit As String) As Boolean
   ' important, if we do not want to raise the servers btn_click events, we must return true
   Return True
End Sub

And hooray, our server is not contacted any more! :)


Ultimate proof we are not contacting the server for this code. I’ve stopped the server app and I can still use the button:


This concludes the first tutorial.

For those interested in the JavaScript generated for our class, here it is:

var _tomiles=0.8684;
var _abm;
var _page;
function b4js_b4jscalculatedistance() {
     var self;
          try {
          catch(err) {
               console.log(err.message + ' ' + err.stack);
          try {
               var _theta=0;
               var _distance=0;
               _theta = _lon1-_lon2;
               _distance = (Math.sin(self.deg2rad(_lat1)))*(Math.sin(self.deg2rad(_lat2)))+(Math.cos(self.deg2rad(_lat1)))*(Math.cos(self.deg2rad(_lat2)))*(Math.cos(self.deg2rad(_theta)));
               console.log("Distance = "+_distance);
               _distance = (Math.acos(_distance));
               _distance = self.rad2deg(_distance);
               console.log("Distance = "+_distance);
               _distance = _distance*60*1.1515;
               switch ("" + _unit.toUpperCase()) {
                    case "" + "K":
                         var _b4js_returnname="msgbox";
                         b4js_msgbox("default","Tutorial","The distance is "+(_distance*_tokm)+" kilometers!","OK",'swal2pos-cc', false);;
                    case "" + "N":
                         var _b4js_returnname="msgbox";
                         b4js_msgbox("default","Tutorial","The distance is "+(_distance*_tomiles)+" miles!","OK",'swal2pos-cc', false);;
                         var _b4js_returnname="msgbox";
                         b4js_msgbox("default","Tutorial","No idea what you are doing :-)","OK",'swal2pos-cc', false);;
               callAjax("https://jsonplaceholder.typicode.com/posts/1","GET","jsonp", "","myJob1", true,"b4jscalculatedistance");
               return true;
          catch(err) {
               console.log(err.message + ' ' + err.stack);

          try {
               return _deg*Math.PI/180;
          catch(err) {
               console.log(err.message + ' ' + err.stack);
          try {
               return _rad*180/Math.PI;
          catch(err) {
               console.log(err.message + ' ' + err.stack);

In the text tutorial we are going to see how we can use inline JavaScript snippets within our B4JS classes!


Click here to Donation and support ABMaterial


B4X: ABMaterial 3.75 Public/4.00 Donators released


ABMaterial Dragonfly (4.00) for B4X is available. Yes, it has a new name! What started as version 3.81 got upgraded to a new major version, especially since it uses a new cache control system.

ABMaterial has always been one of the fastest RADs from its start, now over 2 years ago.  But with 4.00, we’ll take it to a whole new level!

Mindful and I have spend 5 days (and nights) checking out how we could cache ABMaterial to the extreme without losing any of its functionality.  The results are just ridiculous…

Finish times are less than 10% of the time on the second and next loads. So on 3G, on the users next visit(s), the WebApp is almost just as fast as on high speed cable!

And this system not only works with the same page. Once one page has been loaded, all the other pages can take gain of this system. Even when the user revisits your app much later.

Furthermore there is the new debug feature to check how your apps work on different device sizes.  See it at work here:

Add this snippet to you main module, AFTER starting the server:

' in debug mode, start the browser and open the app on all devices (DOES NOT WORK IF EDGE IS YOUR DEFAULT BROWSER!)
ABM.ViewerOpenAllDevices("http://localhost:" & port & "/" & ABMShared.AppName & "/", 100)

' or open a specific device as default (DOES NOT WORK IF EDGE IS YOUR DEFAULT BROWSER!)
'ABM.ViewerOpenDevice("http://localhost:" & port & "/" & ABMShared.AppName & "/", 300, ABM.VIEWER_TABLET)

' or just open de browser, no multiple devices (should work in Edge)
'ABM.ViewerOpen("http://localhost:" & port & "/" & ABMShared.AppName & "/")
#End If

Lots of new theme properties! Check out the demo on how to use  them in the new Dragonfly theme.  As winter is coming and days are getting shorter (at least here in the northern hemisphere), I went for a ‘Night’ theme this time.

ABMaterial DragonFly is now available on 750+ locations worldwide on CDN!  If you use the CDN, you do not need to upload the css/js/fonts folders to your own server anymore!

This means only your own assets (images etc) from the www folder have to be available on your server. De demo running on abmaterial.com for example is working like this.


ABM.ActivateUseCDN("DONATORKEY", "https://cdn.jsdelivr.net/gh/RealAlwaysbusy/ABMaterial@v4.03/")

The over 20 new fixes and fulfilled wishes make ABMaterial 4.00 very stable, just like its ‘parent’ programming language: B4X.  It is a real joy knowing one can depend on a strong, bug free environment.  Erel from Anywhere Software rulez!

Happy programming!


Click here to Donation and support ABMaterial

B4J: Using Google Analytics with ABMaterial

ABMaterial and Google Analytics

As ABMaterial is a hybrid website/webapp framework, you can use SEO (see previous article), and now even Google Analytics in the upcoming version 1.07. This article shows how you can use Google Analytics by adding just one extra line of B4J code on your page!

Note: This post is an ABMaterial adaptation of an excellent article for beginners on Google Analytics by Kristi Hines. Just to make it easier for you, I used and changed it just up to where ABMaterial comes in.  At the end of this post you can then continue reading the original one for more tips and tricks.

Why every website/webapp needs Google Analytics

Here are just a few of the many questions about your ABMaterial website/webapp that you can answer using Google Analytics.

  • How many people visit my website/webapp?
  • Where do my visitors live?
  • What websites send traffic to my website/webapp?
  • What marketing tactics drive the most traffic to my website/webapp?
  • Which pages on my website/webapp are the most popular?
  • How many visitors have I converted into leads or customers?
  • Where did my converting visitors come from and go on my website/webapp?
  • What content do my visitors like the most?

There are many, many additional questions that Google Analytics can answer, but these are the ones that are most important for most website/webapp owners. Now let’s look at how you can get Google Analytics on your ABMaterial website/webapp.

How to install Google Analytics

First, you need a Google Analytics account. If you have a primary Google account that you use for other services like Gmail, Google Drive, Google Calendar, Google+, or YouTube, then you should set up your Google Analytics using that Google account. Or you will need to create a new one.

This should be a Google account you plan to keep forever and that only you have access to. You can always grant access to your Google Analytics to other people down the road, but you don’t want someone else to have full control over it.

Big tip:

don’t let anyone (your web designer, web developer, web host, SEO person, etc.) create your website’s Google Analytics account under their own Google account so they can “manage” it for you. If you and this person part ways, they will take your Google Analytics data with them, and you will have to start all over.

Set up your account and property

Once you have a Google account, you can go to Google Analytics and click the Sign into Google Analytics button. You will then be greeted with the three steps you must take to set up Google Analytics.

google analytics setup

After you click the Sign Up button, you will fill out information for your website.

For the absolute beginner’s guide, we’re going to assume you have one website and only need one view (the default, all data view. The setup would look something like this.

new account information google analytics

Beneath this, you will have the option to configure where your Google Analytics data can be shared.

configuring shared info for google analytics

Our google account is setup and all we need now is get our Tracking ID and add it in ABMaterial.

Click the Get Tracking ID button. You will get a popup of the Google Analytics terms and conditions, which you have to agree to. Then you will get your Google Analytics Tracking ID.

Tracking ID in the Google Analytics Console

In our ABMaterial app, all we have to do is add this single line to each of our pages in the BuildPage() method:

page.Initialize(Name, “/ws/appName/Name, False)
page.UseGoogleAnalytics(“UA-64248213-1”, Null)

I guess it can’t get much easier, no?

If you want to go deeper into Google Analytics, I suggest reading the original article The Absolute Beginner’s Guide to Google Analytics.

ABMaterial 1.07 will be realeased in a couple of weeks for the donators. Addidtional to Google Analytics support, two new components ABMEditor and ABMSocialShare will be included, but more on this in a next article.

Happy programming!




B4J: ABMaterial Public 1.05/Donators 1.06 now released

The public version 1.05 of ABMaterial is now available from the B4J website!  Three new controls:

ABMSlider: Add a slider for values with a wide range.


ABMRange: Add a range slider for values with two handlers.


ABMCustomControl: add your own components to the ABMaterial framework.


Some more highlights on this release:

  • Complete rewrite of the Refresh system
  • Material Icon Fonts are now loaded locally
  • Disable the back button in the browser
  • ABMModalSheet FULL size option
  • LocalStorage support
  • ABMPlatform object containing basic info on the users browser and device
  • Integrate variables for SEO-optimization
  • Responsive tables

Read the README1.05.TXT for the full release notes.

Download ABMaterial Public version 1.05

Donators will receive an email with the download link to ABMaterial 1.06 containing two new controls, ABMDataTimeScroller and ABMDateTimePicker.

Happy programming!


Click here to Donation if you like my work

B4J: ABMaterial WebApps and SEO (Search Engine Optimization)


A feedback case I got from one of the users of ABMaterial, Herbert, was the question how ABMaterial for B4X coped with SEO-optimization. To be perfectly honest, I hadn’t really though about it. I  had a couple of things already, like headers, bold text, a page title and description.

As any good programmer,  if it looks nice, is user friendly and works as expected, my work is done and users will find and like it. No?

And it kept me thinking.  So this morning, lying awake at 4  o’clock (sleeping is highly overrated IMHO and an invention of the Bed Consortium, but I’m sidetracking), I decided to learn more about SEO and how it could be implemented in ABMaterial for B4X.

Herbert gave me some links, so I started reading up.

Looked like I had some things right already, but ABMaterial could use some polishing.

For starters, I added some extra properties to the ABMaterial page object that will be saved in the generated html file:

pageTitle: very important, pick good keywords
pageDescription: keep it around 140 to 160 chars
pageKeywords: a comma delimited string containing your page keywords
pageHTMLName: it is always index.html in ABMaterial, but it’s better to give it some name using keywords, like ‘abmaterial-custom-component.html’, use hyphens (-) between words to improve readability
pageSiteMapPriority: a value between 0.00 and 1.00, see further
pageSiteMapFrequency: how frequently the page is updated (never, none, always, hourly, weekly, yearly, …), see further


Covered!  ABMaterials labels can have headers like <h1>, <h2> so we’re ok.  Tip: create only one <h1>!

<h1>Most Important</h1>
<h2>Second Most Important</h2>
<h3>Third Most Important</h3>


Got it: You can use markers like {B}{/B} in labels to set text in bold/strong.

Use tag in a image:

Ah, needed some changes.  I misused it.  Thinking ‘who the #?@! can’t show images anymore these days‘, I used it as an image toggle property.  Changed it now so it can be used properly.


Added some extra markers {AS}{/AS} in the ABMLabel Component so you can add a title.

{AL}http://www.website.com/page.html{AS}keyword{/AS}{AT}my visible text{/A}

will result in:

<a rel=”nofollow” target=”_black” href=”http://www.website.com/page.html” title=”keyword”>my visible text</a>

sitemap.xml and robots.txt:

The Sitemaps protocol allows a webmaster to inform search engines about URLs on a website that are available for crawling. ABMaterial has the possibility to generate a sitemap.xml file and a robots.txt file (for sites like Ask.com).

What does it look like Alwaysbusy, I hear you ask. Well, something like this:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!– created with ABMaterial and B4J –>

To generate this is easy in ABMaterial, and needs just a couple of things:

  1. In ABMShared, add a property  public AppPublishedStartUrl as String = “http://yoururl.com”.

  2. In the initalize() method of ABMApplication, add ‘ABM.AppPublishedStartUrl=ABMShared.AppPublishedStartUrl.

  3. In the BuildPage() method of each page, set page.PageHTMLName=”your-good-keywords.html”

  4. Also in BuildPage(), add page.PageSiteMapPriority = “0.50” (number between 0.00 and 1.00, and don’t set them all to 1.00, that makes them equally important)

  5. Also add page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_MONTHLY (use one of the contstants)

  6. If you use a ABMNavigationBar, update the url of each sidebar item in ABMShared, e.g. page.NavigationBar.AddSideBarItem(“Contacten”, “Contacten”, “mdi-action-dashboard”, “../StartPage/your-good-keywords.html”)

  7. In ABMApplication, also change your InitialPage=”your-good-keywords.html”

  8. In ABMApplication, change ‘index.html’ in the AddPage() method to Page.PageHTMLName

When you start your app, the sitemap.xml and robots.txt files will be generated next to your apps html file. After publishing it to your final site, you let the search engines know you want to submit your site.

You should be able to use these sitemap-submission URLS. Put the full URL to your sitemap, including http://, after the = sign:






So, you’re already one step ahead of many other tools when you use B4J and ABMaterial!

Of course, your content will be the most important part to atract users and get high rankings in the search engines, but it never hurts giving them some help.

If any SEO expert reading this article has some other ideas, please post them.

ABMaterial 1.05, supporting all this, will be send to the donators early next week. Quite some goodies included in this release!

Head to the B4X website, download your free copy of B4J and go to the forum to download the ABMaterial framework.


Some good rerading on SEO:





Click here to Donation if you like my work