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

Filippo · Dec 28, 2022

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.

Ciao,
Filippo

angel_ · Dec 29, 2022

I have not had any problems with the menu.

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

Filippo · Dec 29, 2022

angel_ said:
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?

alwaysbusy · Dec 29, 2022

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, ...)

Filippo said:
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

Filippo · Dec 29, 2022

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 · Dec 29, 2022

angel_ · Dec 29, 2022

Filippo said:
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 · Dec 29, 2022

alwaysbusy said:
View attachment 137442

View attachment 137443

can you please include the project zip for this example?

thanx

Filippo · Dec 29, 2022

angel_ said:
Try to uncheck Auto ID in MainTitle properties.

it is already unchecked.

alwaysbusy · Dec 29, 2022

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 · Dec 29, 2022

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

Filippo · Dec 29, 2022

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 · Dec 29, 2022

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

alwaysbusy · Dec 29, 2022

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 · Dec 30, 2022

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 · Dec 30, 2022

alwaysbusy said:
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.

alwaysbusy said:
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.

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

Filippo

Expert

angel_

Well-Known Member

Filippo

Expert

alwaysbusy

Expert

Filippo

Expert

alwaysbusy

Expert

angel_

Well-Known Member

ilan

Expert

Filippo

Expert

alwaysbusy

Expert

Filippo

Expert

Filippo

Expert

Attachments

alwaysbusy

Expert

alwaysbusy

Expert

alwaysbusy

Expert

Filippo

Expert

Similar Threads

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

Expert

Well-Known Member

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency