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

Discussion in 'B4J Tutorials' started by alwaysbusy, Mar 21, 2017.

  1. alwaysbusy

    alwaysbusy Expert Licensed User

    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()
    Code:
    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, TrueTrue33048, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")

       
    page.NavigationBar.InitializeSearchButton(180240360, 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()
    Code:
    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:

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

    Code:
    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:
    Code:
    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: Mar 22, 2017
  2. amminf

    amminf Active Member Licensed User

    superb !
     
    joulongleu and alwaysbusy like this.
  3. mindful

    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 ...
     
    joulongleu and Harris like this.
  4. Mashiane

    Mashiane Expert Licensed User

    Wow, this is brilliant...
     
    joulongleu likes this.
  5. alwaysbusy

    alwaysbusy Expert Licensed User

    Done! added two methods:

    Page.NavigationBar.OpenExtraContent
    Page.NavigationBar.CloseExtraContent
     
    Last edited: Mar 22, 2017
    magi6162, Harris, MichalK73 and 3 others like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice