B4J Question [BANano] multiple page PWA view events not fired


Well-Known Member
Licensed User
Longtime User
I'm trying to create a simple multiple-page PWA test app. The code from @alwaysbusy works:

But I need the nice layout of the default PWA app (the one you get after you select BANano PWA project type). Therefore I started with the default PWA project, added two pages containing a textbox and a button. I'm able to jump between the two pages using the sidebar menu, but TextBox_Changed and button_Clicked event were not fired.

The entire project is too large (more than 3M due to the image files) to be attached here, so for Files folder I include only page1 and page2 layout files in the attached zip file

Could somone tell me what I did wrong, please?


Main page content:
#Region Project Attributes
    #MainFormWidth: 600
    #MainFormHeight: 600
    #IgnoreWarnings: 16, 10, 14, 15       
#End Region

Sub Process_Globals
    Private BANano As BANano 'ignore
    ' your logical pages
    Dim myPage1 As page1
    Dim myPage2 As page2
    ' from the MainLayout   
    Private MainHamburgerMenu As SKLabel 'ignore
    Private MainSidebar As SKSidebar 'ignore
    Private MainPageHolder As SKContainer 'ignore
    ' from the WelcomeModalLayout
    Private WelcomeModal As SKModal 'ignore
    Private WelcomeModalMessage As SKLabel 'ignore
    ' from the WelcomePageLayout
    Private WelcomePageName As SKTextBox 'ignore
    Private WelcomePageButton As SKButton 'ignore
    ' from the MenuLayout
    Private MenuList As SKMenu 'ignore   
    ' some media queries for our responsive menu
    Private Bigger992px As BANanoMediaQuery
    Private Smaller992px As BANanoMediaQuery
    ' Public SQL As BANanoSQL
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    ' With this little snippet, the new B4J 9.30 logs with jump are activated
    #if Debug
        ' MUST be literally this line if you want to use the B4J Logs jump to code feature!
    #End if
    ' some general settings like the name of your PWA
    BANano.Initialize("BANano", "defaultpwa",DateTime.Now)
    BANano.Header.Title="BANano Skeleton"
    ' DateTime.Now is to make sure our app is reloaded on ReBuild
    BANano.JAVASCRIPT_NAME = "app" & DateTime.Now & ".js"
    ' a PWA must have a service worker.  Will be build automatically caching everything used in your Web App
    BANano.SERVICEWORKER_NAME = "service-worker.js"
    ' some directives for the Tranpiler
    BANano.TranspilerOptions.MergeAllCSSFiles = True
    BANano.TranspilerOptions.MergeAllJavascriptFiles = True
    BANano.TranspilerOptions.RemoveDeadCode = True
    BANano.TranspilerOptions.ShowWarningDeadCode = True
    BANano.TranspilerOptions.EnableLiveCodeSwapping = True
    ' this line makes sure our Web App becomes a PWA
    #if Release
        BANano.TranspilerOptions.UseServiceWorkerWithUpdateMessage(True, "#26AE60", "Update available", "Click here to update the app to the latest version")
    #end if   
    ' optional: if your WebApp is not in the root
    ' BANano.TranspilerOptions.SetPWAStartUrl("myPWA/index.html")
    BANano.Header.BackgroundColor = "#1e1e1e"

    ' additonal JavaScript and CSS files we want to include
    ' BANano.Header.AddJavascriptFile("jsstore.min.js")

    ' settings needed for the PWA app icons, splash screens, etc…
    BANano.Header.AddMSTileIcon("mstile-150x150.png", "150x150")
    BANano.Header.MSTileColor = "#ffc40d"
    BANano.Header.AddManifestIcon("android-chrome-192x192.png", "192x192")
    BANano.Header.AddManifestIcon("android-chrome-512x512.png", "512x512")
    BANano.Header.SetAndroidMaskIcon("maskable_icon.png", "731x731")
    BANano.Header.MaskIconColor = "#1e1e1e"
    BANano.Header.AddAppleTouchIcon("apple-touch-icon.png", "")
    BANano.Header.AddAppleTouchStartupImage("iphone5_splash.png", "320px", "568px", "2")
    BANano.Header.AddAppleTouchStartupImage("iphone6_splash.png", "375px", "667px", "2")
    BANano.Header.AddAppleTouchStartupImage("iphoneplus_splash.png", "621px", "1104px", "3")
    BANano.Header.AddAppleTouchStartupImage("iphonex_splash.png", "375px", "812px", "3")
    BANano.Header.AddAppleTouchStartupImage("iphonexr_splash.png", "414px", "896px", "2")
    BANano.Header.AddAppleTouchStartupImage("iphonexsmax_splash.png", "414px", "896px", "3")
    BANano.Header.AddAppleTouchStartupImage("ipad_splash.png", "768px", "1024px", "2")
    BANano.Header.AddAppleTouchStartupImage("ipadpro1_splash.png", "834px", "1112px", "2")
    BANano.Header.AddAppleTouchStartupImage("ipadpro2_splash.png", "834px", "1194px", "2")
    BANano.Header.AddAppleTouchStartupImage("ipadpro3_splash.png", "1024px", "1366px", "2")
    BANano.Header.AddFavicon("favicon-16x16.png", "16x16")
    BANano.Header.AddFavicon("favicon-32x32.png", "32x32")
    ' write the theme
    ' start the actual build
    ' stop running. We do not need the .jar file running anymore
    ' in release mode
    #if Release
    #End if
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
    Return True
End Sub

Sub BANano_Ready()
    ' Initialize your local browser database
    ' SQL.OpenWait("SQL", "MyDB")
    ' SQL.ExecuteWait("CREATE TABLE IF NOT EXISTS tTable (tblid INT, tblcode STRING, tbldesc STRING)", Null)

    ' initialize your pages
    ' get the body tag
    Private body As BANanoElement
    ' append and load our main layout
    body.Append($"<div id="mainHolder"></div>"$).Get("#mainHolder").LoadLayout("MainLayout")
    ' append and load a modal sheet
    body.Append($"<div id="modalHolder"></div>"$).Get("#modalHolder").LoadLayout("WelcomeModalLayout")
    ' loading our menu in our sidebar
    ' making the menu layout responsive: always open when screen size is bigger than 992px
    Bigger992px.Initialize("(min-width: 992px)")
    Smaller992px.Initialize("(max-width: 991px)")
    ' add our menu items
    MenuList.AddMenuItem("", "page1", "fas fa-user", "{NBSP}{NBSP}page 1")
    MenuList.AddMenuItem("", "page2", "fas fa-user", "{NBSP}{NBSP}page 2")
    ' load our first page
End Sub

Sub Bigger992px_Matched()
    MainSidebar.AlwaysOpen = True
    ' and hide the hamburger button
    MainHamburgerMenu.Element.SetStyle($"{"visibility": "hidden"}"$)
End Sub

Sub Smaller992px_Matched()
    MainSidebar.AlwaysOpen = False
    ' and show the hamburger button
    MainHamburgerMenu.Element.SetStyle($"{"visibility": "unset"}"$)
End Sub

Sub WelcomePageButton_Click (event As BANanoEvent)
    If WelcomePageName.Text = "" Then
        SKTools.ShowToast("Please enter your name!", "info", 3000, True)
    End If
    WelcomeModalMessage.Text = "Welcome " & WelcomePageName.Text
End Sub

Sub MenuList_Click (returnName As String)
    SKTools.ShowToast("Clicked on " & returnName & "!", "info", 3000, True)
    ' here we can load the layout of the menu item we clicked
    Select Case returnName
        Case "page1"
        Case "page2"
    End Select
    ' and close the menu, if not always open
    If MainSidebar.AlwaysOpen = False Then
    End If   
End Sub

Sub MainHamburgerMenu_Click (event As BANanoEvent)
End Sub
page 1 content; page2 is almost identical:
Sub Class_Globals
    Dim BANano As BANano 'ignore
    Public SKButton1 As SKButton
    Public SKTextBox1 As SKTextBox
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize

End Sub

Private Sub SKButton1_Click (event As BANanoEvent)
    SKTools.ShowToast("page1.SKButton1_Click", "info", 3000, True)
End Sub

Private Sub SKTextBox1_Change (event As BANanoEvent)
    If SKTextBox1.Text = "" Then
        SKTools.ShowToast("Please enter something!", "info", 3000, True)
    End If
    SKTools.ShowToast("You've entered: " & SKTextBox1.Text, "info", 3000, True)
End Sub


  • ImportantProjectFiles.zip
    8.2 KB · Views: 28


Well-Known Member
Licensed User
Longtime User
I've found out that I have to place those two events in the main page for them to be triggered.

How to trigger the events in the current page, but not in the main page?
Upvote 0