B4J Tutorial [ABMaterial] New debug feature in 3.20

ABMaterial 3.20 will introduce a very cool debug feature! When developing web apps, the console (e.g. in Chrome) can be your best friend. But on mobile devices, you don't have that available. (can be set-up, but I find it a pain in the a$$).

In ABMaterial 3.20, there will be a build-in console. It is using the Conzole javascript library and is very easy to use in B4J.

Video:

Usage:
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.

page.DebugConsoleShow
page.DebugConsoleHide

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

Here 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

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

Alain

 

[alwaysbusy]

Two new commands are added:

page.DebugConsoleB4JStart
page.DebugConsoleB4JStop

You can add these commands to redirect all the web browsers console logs to the B4J log!

 

[incendio]

When I add

public Sub BuildPage()
    page.DebugConsoleB4JStart
    page.DebugConsoleEnable(True, 300)
    BuildTheme

    page.InitializeWithTheme(Name, "/ws/" & ABMShared.AppName & "/" & Name, False, ABMShared.SessionMaxInactiveIntervalSeconds, theme)
    page.ShowLoader                =True
    page.PageTitle                 = "Group"
    page.PageHTMLName             = "good-grp.html"
    page.ShowConnectedIndicator = True
           
    ABMShared.BuildControlBar(page, "{C:#FF8000}Add Group{/C}","../images/logo.png", "")
    page.AddRowsM(1,True,20,0, "").AddCells12(1,"")
    page.AddRowsM(1,True,30,0, "").AddCells12(1,"")
    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
End Sub

App run OK, but on Firefox 47.0.2 Console, got error
Error: Syntax error, unrecognized expression: unsupported pseudo: -webkit-autofill<br /><span>http://localhost:10000/js/<strong>c

Should I concern with this error? Thanks.

 

[alwaysbusy]

No, you can ignore it