B4J Question (Banano) Test with Template "BANano PWA.b4xtemplate"

Filippo

Expert
Licensed User
Longtime User
Hi,

I'm doing my first steps with BaNano today and have encountered some problems, maybe because I have no idea about Banano?

1. I add some entries to the menu. But after compiling they are not displayed.
B4X:
    ' add our menu items
    MenuList.AddMenuItem("", "page1", "fas fa-user", "{NBSP}{NBSP}Home")
    MenuList.AddMenuItem("", "page2", "fas fa-user", "{NBSP}{NBSP}Hardware")
    MenuList.AddMenuItem("", "page3", "fas fa-user", "{NBSP}{NBSP}Software")
    MenuList.AddMenuItem("", "page4", "fas fa-user", "{NBSP}{NBSP}Test")
    MenuList.Start

2. I want to center the title of the web page, but it is always displayed more on the right side.
1672256236533.png


Ciao,
Filippo
 
Last edited:

angel_

Well-Known Member
Licensed User
Longtime User
I have not had any problems with the menu.

Captura.JPG


For the title maybe you can use this:

B4X:
Sub BANano_Ready()

    '...code
        
    ' load our first page
    MainPageHolder.Element.LoadLayout("WelcomePageLayout")
    
    ResizeTitle
End Sub

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

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

Sub ResizeTitle
    Dim AvailableSpace As Double = 100 - Round(100 * MainSidebar.Element.ClientWidth / BANano.Screen.Width)
    MainTitle.Style = $"{"width": "${AvailableSpace}%", "text-align": "right"}"$
End Sub
 
Upvote 0

Filippo

Expert
Licensed User
Longtime User
For the title maybe you can use this:
Hi @angel_ ,

Thank you very much for your answer.
I tried it now with your code, but unfortunately it doesn't work. The text should be centered, but it is not.
B4X:
Sub Bigger992px_Matched()
    MainSidebar.AlwaysOpen = True
    ' and hide the hamburger button
    MainHamburgerMenu.Element.SetStyle($"{"visibility": "hidden"}"$)
    ResizeTitle
End Sub

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

Sub ResizeTitle
    Dim AvailableSpace As Double = 100 - Round(100 * MainSidebar.Element.ClientWidth / BANano.Screen.Width)
    MainTitle.Style = $"{"width": "${AvailableSpace}%", "text-align": "center"}"$
End Sub

Strangely, all the menu items are now displayed without me changing my code.
Does the whole thing somehow work on a whim?

1672306795762.png
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
Couple of things first:
1. I notice you just 'open' the html from your disk. When developing for the web you better use something like https://www.b4x.com/android/forum/threads/banano-tip-running-a-test-server.100180/ as a lot of things will not work properly once you do some advanced things (like fetching, REST APIs etc).
2. De browser developer tools should be your new best friend. (F12 - console, network, ...)

Strangely, all the menu items are now displayed without me changing my code.
Does the whole thing somehow work on a whim?

Nope. It works perfectly fine and is in production within our company for over 4 years successfully used in many advanced web apps and daily used by tens of thousands of our users.
If something isn't reflected in the browser, you could have a cache problem. Try CTRL+F5, disable the caching in the network tab of the browsers developer tools, ...). Running a Web Server app like in (1) helps also with such problems.

When I first read Angels solution, I thought that would be working too. But testing it out I think this might be a better solution:

B4X:
Sub BANano_Ready()
    ...
       
    ' load our first page
    MainPageHolder.Element.LoadLayout("WelcomePageLayout")
   
    BANano_Resized  ' <- intital call
End Sub

Sub BANano_Resized()
    If MainSidebar.AlwaysOpen Then
        MainTitle.Style = $"{"width": "calc(100vw - 350px)", "text-align": "center"}"$ ' 350px is the width of the sidebar
    Else
        MainTitle.Style = $"{"width": "100vw", "text-align": "center"}"$ ' no sidebar, so use the full width
    End If       
End Sub

Alwaysbusy
 
Last edited:
Upvote 0

Filippo

Expert
Licensed User
Longtime User
Hi @alwaysbusy ,

I don't know what I'm doing wrong, but it just doesn't work for me.
Now I have also used your code, unfortunately without success.
1672323463230.png


Can you make me a screenshot with the text of "MainTitle" in the middle?
 
Upvote 0

Filippo

Expert
Licensed User
Longtime User
I don't understand it anymore, now it is displayed correctly, I didn't change anything in the code.

1672343334755.png
 
Upvote 0

Filippo

Expert
Licensed User
Longtime User
New test.
I deleted a menu entry and commented out the procedure "BANano_Resized".
I have deleted all form data and cache from the browser, but the browser still shows the title bar centered and 4 menu items.
What do I have to do so that all changes are always displayed?
I really do not understand it.
It's like there is a loose connection here.
I'm sure the fault lies with me, but it's no fun that way.
Am I perhaps spoiled by BAx?

1672345475290.png


1672345414018.png
 

Attachments

  • 1672345453976.png
    1672345453976.png
    68.5 KB · Views: 56
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
I'm beginning to suspect you always run it in release mode, which uses the PWAs special cache so it runs even if you are offline. Try running it in debug mode when developing. Read the chapter in the booklet: 17.4 on how to reset the service worker cache (which you would have to do then).

Try using this (if it isn't already so)
B4X:
' some general settings like the name of your PWA
BANano.Initialize("BANano", "BANanoSkeleton",DateTime.Now) ' <-----

' DateTime.Now is to make sure our app is reloaded on ReBuild
BANano.JAVASCRIPT_NAME = "app" & DateTime.Now & ".js" '<-------
 
Last edited:
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
Here is my test project: http://gorgeousapps.com/testCenter.zip

Because EnableLiveCodeSwapping is enabled, I can hide or add e.g. menu items while running in Debug mode just by commenting out one of those AddMenuItem lines, save and refreshing the browser. In the browser, on the Network tab, cache is disabled (shouldn't be needed as with most of our users it is not, but just in case...).

And I strongly advice you to install the Web Server App from post #4 when developing.

Alwaysbusy
 
Upvote 0

Filippo

Expert
Licensed User
Longtime User
Because EnableLiveCodeSwapping is enabled, I can hide or add e.g. menu items while running in Debug mode just by commenting out one of those AddMenuItem lines,
In release mode all changes are immediately visible, but not in debug mode.

And I strongly advice you to install the Web Server App from post #4 when developing.
I have now installed the Web Server App and disabled the cache, unfortunately without success.

I'm going to play with it some more now, see what I can get.
 
Upvote 0
Top