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:


Usage:

Note:
Where you put everything is rather important!

All 'Extras' you plan to use must be initialized in the Build()
B4X:
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.ExtraContent.AddRowsM(1,True,0,0,"").AddCellsOSMP(1,0,0,0,12,12,12,0,40,20,20,"")
   page.NavigationBar.ExtraContent.BuildGrid

   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()
B4X:
Sub ConnectNavigationBar(page As ABMPage) 'ignore
   ' Clear the dummies
   page.NavigationBar.Clear

   ' 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)
   duration.SetActiveUntilBlock(1)
   page.NavigationBar.ExtraContent.Cell(1,1).Addcomponent(duration)

   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

Events:

Page has an extra event to catch the search:

B4X:
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.

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

Methods:

You can open/close the ExtraContents with:
B4X:
Page.NavigationBar.OpenExtraContent
Page.NavigationBar.CloseExtraContent

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

Alain
 
Last edited:

mindful

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