B4J Tutorial [ABMaterial] Extend the Navigation top Bar (3.02)

In the ABMaterial 3.02 Maintenance Update there will, next to bug fixes, also be introduced something new: you'll be able to extend the Navigation TopBar!

1. Add extra content under the default TopBar. This is an ABMContainer, so you can add all ABMComponents.
2. Add a Search input on top, next to the other buttons (always on the right). You can set its visibility too, as e.g. on a phone you want to hide it due to a lack of space.
3. Add one floating 'Half' button to let the user access a common functionality.

This video demonstrates it:


Where you put everything is rather important!

All 'Extras' you plan to use must be initialized in the Build()
Sub BuildNavigationBar(page As ABMPage, Title As String, logo As String, ActiveTopReturnName As String, ActiveSideReturnName As String, ActiveSideSubReturnName As String)

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

   page.NavigationBar.InitializeSearchButton(180, 240, 360, ABM.VISIBILITY_HIDE_ON_SMALL_ONLY)

   ' do NOT use page.NavigationBar.Initialize(): it will not work!
   page.NavigationBar.InitializeExtraContent("extracontent", false, "")  
   page.NavigationBar.ExtraContent.AddRowsM(1,True,0,0 ,"").AddCellsOSMP(1,0,0,0,12,12,12,0,0,20,20,"")     

   page.NavigationBar.InitializeExtraHalfButton("ExtraButton", "fa fa-plus", ABM.BUTTONSIZE_LARGE, ABM.HALFBUTTON_CENTER, "dark")

End Sub

The Extra content must be filled in the Connect()
Sub ConnectNavigationBar(page As ABMPage) 'ignore
   ' Clear the dummies

   ' add the content in the Connect().  It will not work correctly if done in the Build()!

   Dim duration As ABMPercentSlider
   duration.Initialize(page, "duration", "demo")
   duration.AddBlock("Monthly", "awesome!", 10)
   duration.AddBlock("Quarterly", "great", 25)
   duration.AddBlock("Half-Yearly", "half is good", 55)
   duration.AddBlock("Yearly", "too long!", 100)

   Dim ch5 As ABMChip
   ch5.Initialize(page, "5", "Dad", False, "dark")
   ch5.Image = "../images/dad.jpg"
   page.NavigationBar.ExtraContent.Cell(2,1).AddArrayComponent(ch5, "mycheck")

   Dim ch6 As ABMChip
   ch6.Initialize(page, "6", "Mom", False, "dark")
   ch6.Image = "../images/mom.jpg"
   page.NavigationBar.ExtraContent.Cell(2,1).AddArrayComponent(ch6, "mycheck")

   Dim ch7 As ABMChip
   ch7.Initialize(page, "7", "Brother", True, "dark")
   ch7.Image = "../images/brother.jpg"
   page.NavigationBar.ExtraContent.Cell(2,1).AddArrayComponent(ch7, "mycheck")

   Dim ch8 As ABMChip
   ch8.Initialize(page, "8", "Sister", True, "dark")
   ch8.Image = "../images/sister.jpg"
   page.NavigationBar.ExtraContent.Cell(2,1).AddArrayComponent(ch8, "mycheck")

   page.NavigationBar.Refresh ' IMPORTANT
End Sub


Page has an extra event to catch the search:

Sub page_NavigationbarSearch(search As String)
   myToastId = myToastId + 1
   page.ShowToast("toast" & myToastId, "toastgreen","Searching for: " & search, 5000)
End Sub

The extra 'Half' button will, just like all components in ExtraContent, raise normal events.

Sub ExtraButton_Clicked(Target As String)
   myToastId = myToastId + 1
   page.ShowToast("toast" & myToastId, "toastgreen","floating button clicked", 5000)
End Sub


You can open/close the ExtraContents with:

This 3.02 Maintenance Update will be sent to the donators in a couple of days.

Last edited:


Active Member
Licensed User
Can this be made collapsable ? So the user can extend it only when needed ? This way we could create some kind of toolbar that can be hidden when not needed ...