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

[toby]

I'm trying to create a simple multiple-page PWA test app. The code from @alwaysbusy works:

[BANano] multiple 'pages' without using router

I'm trying to figure out how to have multiple 'pages' like B4xPages or B4A activities without using BANano Router. The "B4X Getting Started Guide has instructions for Router with a comment "I personally do not use this in my PWA's. B4J has already so much organization of your code build-in with...

www.b4x.com

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?

TIA

#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!
        Log("BANanoLOGS")
    #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.SetAppleMaskIcon("safari.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
    SKTools.WriteTheme
    
    ' start the actual build
    BANano.Build(File.DirApp)
    
    ' stop running. We do not need the .jar file running anymore
    ' in release mode
    #if Release
        ExitApplication       
    #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

' HERE STARTS YOUR APP
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
    myPage1.Initialize
    myPage2.Initialize
    
    
    ' get the body tag
    Private body As BANanoElement
    body.Initialize("#body")
    
    ' 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
    MainSidebar.Element.LoadLayout("MenuLayout")
    
    ' 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")
    MenuList.Start
        
    ' load our first page
    MainPageHolder.Element.LoadLayout("page1")
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)
        Return
    End If
    WelcomeModalMessage.Text = "Welcome " & WelcomePageName.Text
    
    WelcomeModal.Open
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"
            MainPageHolder.Element.Empty
            MainPageHolder.Element.LoadLayout("page1")
        Case "page2"
            MainPageHolder.Element.Empty
            MainPageHolder.Element.LoadLayout("page2")
    End Select
    ' and close the menu, if not always open
    If MainSidebar.AlwaysOpen = False Then
        MainSidebar.Close
    End If   
End Sub

Sub MainHamburgerMenu_Click (event As BANanoEvent)
    MainSidebar.Open
End Sub

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)
    'Main.myPage2.Load
    Main.MenuList_Click("page2")
End Sub

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

 

[toby]

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?