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

[Filippo]

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.

    ' 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.

Ciao,
Filippo

 

[angel_]

I have not had any problems with the menu.

For the title maybe you can use this:

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

 

[Filippo]

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.

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?

 

[alwaysbusy]

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:

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

 

[Filippo]

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.

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

 

[alwaysbusy]

 

[angel_]

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.
View attachment 137440

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

Try to uncheck Auto ID in MainTitle properties.

 

[ilan]

View attachment 137442

View attachment 137443

can you please include the project zip for this example?

thanx

 

[Filippo]

Try to uncheck Auto ID in MainTitle properties.

it is already unchecked.

 

[alwaysbusy]

I can't upload it right now, but it is just the template with that little snippet in it. @Filippo can you make a screenshot like my second one?

1. In browser press F12
2. Right click on the label -> Inspect

At least we can then see if the same style is applied to the label.

 

[Filippo]

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

 

[Filippo]

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?

 

[alwaysbusy]

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)

' 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" '<-------

 

[alwaysbusy]

On a side note, I just noticed your server is not https, which means it can not run as a real PWA so the service worker will probably not be active.

 

[alwaysbusy]

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

 

[Filippo]

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.