B4J Tutorial [ABMaterial] ABMNavigationBar changes in 1.08

I'm writing the last changes on v1.08. Still have to do some cleanup and updating the demo, but the release is near...

I got a couple of requests for the Navigation Bar since the first release. I've tried to make as little changes to the B4J code as possible for you, but still, there are some important ones.

e.g. the Initalize lost some params, and a couple are added.

1. The sidebar can now contain more complex menu items.
To do this a new method AddSideBarComponent() is introduced. In the screenshot below, it creates the menu items for mom, dad, etc...

Usage:

page.NavigationBar.AddSideBarComponent("TestComp1", BuildSideBarComponent(page, "tcS1", "../images/mom.jpg", "Mom", "The loving one"), "")

2. The 'logo' in the sidebar can be an ABMComponent too.
e.g. in this screenshot the top 'logo' is an ABMImage, some ABMLables and an ABMChart.

This does mean however in the page.NavigationBar.Initialize() method, you cannot longer pass just an image url but you have to create an ABMImage yourself. No big deal and it looks something like this to get the same effect:

 Dim sbtopimg As ABMImage
sbtopimg.Initialize(page, "sbtopimg", logo, 1)
sbtopimg.SetFixedSize(236, 49)

page.NavigationBar.Initialize(page, "nav1", ABM.SIDEBAR_MANUAL_HIDEMEDIUMSMALL, Title, True, True, 330, 48, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")

3. Two new behaviours of the sidebar:

First, the sidebar can now be hidden on ALL devices, including the desktop:

Second, you can use the AUTO sidebar functionality. You can specify which top menu items should appear in the sidebar menu if you run it on mobile devices. Note: Using AUTO implies you cannot create a sidebar menu manually!

Best to show the effect of AUTO:

On the desktop notice the menu items in the right top corner, no hamburger icon:

Now on a mobile device, these items are gone and moved to the sidebar (image 1 shows the closed version with the hamburger icon, image 2 shows it open)

The code (one extra param to allow you to choose if the item should be moved on resizing):

page.NavigationBar.AddTopItem("Contact", "", "mdi-action-account-circle", "", False)
page.NavigationBar.AddTopItem("About", "About", "", "", True)
page.NavigationBar.AddTopItem("Themes", "Themes", "", "", True)
page.NavigationBar.AddTopSubItem("Themes", "Lightblue", "Light Blue", "", "")
page.NavigationBar.AddTopSubItem("Themes", "Orange", "Orange", "", "")
page.NavigationBar.AddTopSubItem("Themes", "Black", "Black", "", "")
page.NavigationBar.AddTopItem("Layouts", "Layouts", "", "",True)

So lots of new functionality and the changes are acceptable. We'll have to see how far the 'advanced' menu items will take us. I expect some controls just will not work, but the future will tell.

Cheers,

Alain

 

[Cableguy]

Hi Alain,

I'm having trouble adding an Image to the topNavBar...
I have created the ABImage, and then add it to the navbar, but only the topNavbar is sown, no image...
I have placed the image in the images folder, under my ABM app folder, and use
myPhoto.Initialize(page, "myPhoto", "../images/photo.png", 1)
is this correct?

 

[mindful]

Hi Alain,

I'm having trouble adding an Image to the topNavBar...
I have created the ABImage, and then add it to the navbar, but only the topNavbar is sown, no image...
I have placed the image in the images folder, under my ABM app folder, and use
myPhoto.Initialize(page, "myPhoto", "../images/photo.png", 1)
is this correct?

You can see in the DemoDynamic provided with the library.
1. You need to create an image in the BuildNavigationBar Sub - in ABMShared before you initialize the page navigation bar

Sub BuildNavigationBar(page As ABMPage, Title As String, logo As String, ActiveTopReturnName As String, ActiveSideReturnName As String, ActiveSideSubReturnName As String)

    Dim sbtopimg As ABMImage
    sbtopimg.Initialize(page, "sbtopimg", logo, 1)

    page.NavigationBar.Initialize(page, "nav1", ABM.SIDEBAR_MANUAL_HIDEMEDIUMSMALL, Title, True, True, 330, 48, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")

2. You need to call the BuildNavigationBar in BuildPage of every page you wish to display the navigation bar
The navigation bar will be created when the app starts - you can't change the image in runtime - in 2.01 we will have the posibility to cast the sidebartopcomponent (the image in your case)

ABMShared.BuildNavigationBar(page, "ABMCodeLabel", "../images/photo.png", "", "Controls", "ABMCodeLabel")

3. Do a CTRL+F5 in browser if image still doesn't show and also increase you AppVersion

 

[Cableguy]

Thanks, the navbar is one of the puzzliest features of ABMaterial along with the grid design, until you finally understand it!

 

[Cableguy]

The navigation bar will be created when the app starts - you can't change the image in runtime

So until v2.01 we cannot have a different top image for each page?

 

[mindful]

So until v2.01 we cannot have a different top image for each page?

You can have a different image for each page .. but you cannot change the image after the app is started .. the buildpage is used so when you start the app it will create the page and save it on disk.

If you wish to have a different image in each page you can chage the logo parameter in BuildNavigationBar when called in each page ...

 

[Cableguy]

for the life of me I just cant get the image to show!

I must refer that I am trying to use the topnavbar as a fixed header, no navigation menu (for now).

my ABMPage is as basic as can be, only "new" thing it is the buildnavbar.
The header does show, with the correct title, but just not the picture!

Found it!!!
' you must add at least ONE dummy item if you want to add items to the topbar in ConnectNaviagationBar

' you must add at least ONE dummy item if you want to add items to the sidebar

 

[Ilya G.]

Is it possible to move the button to the left edge?

 

[Cableguy]

Is it possible to move the button to the left edge?

View attachment 156921

ABMATERIAL follows the Material framework guidelines. These guidelines set a few values for ui positioning and themming, so my hest heg would be, No, you canmove the burger button to the left.