B4J Tutorial [ABMaterial] New debug feature in 3.20

Discussion in 'B4J Tutorials' started by alwaysbusy, Apr 13, 2017.

  1. alwaysbusy

    alwaysbusy Expert Licensed User

    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()
    Code:
    ' params are: open on load, width
    page.DebugConsoleEnable(True300)
    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.
    Code:
    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!)
    Code:
    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:
    Code:
    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:
    Code:
    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
     
    Last edited: Apr 15, 2017
    jmon, Jmu5667, DonManfred and 6 others like this.
  2. alwaysbusy

    alwaysbusy Expert Licensed User

    Two new commands are added:

    Code:
    page.DebugConsoleB4JStart
    page.DebugConsoleB4JStop
    You can add these commands to redirect all the web browsers console logs to the B4J log!
     
    joulongleu, Jmu5667, Mashiane and 3 others like this.
  3. incendio

    incendio Well-Known Member Licensed User

    When I add
    Code:
    public Sub BuildPage()
        
    page.DebugConsoleB4JStart
        
    page.DebugConsoleEnable(True300)
        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.
     
  4. alwaysbusy

    alwaysbusy Expert Licensed User

    No, you can ignore it
     
    incendio likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice