B4J Library [ABMaterial] new in 2.00: multiple sidebars

In ABMaterial 2.00, you will be able to define multiple side bars (sliding in from the right). I've tried to mimic the usage of ABMSideBar as much of the existing Side Navigation menu. The tricky part was making it work well with the NavigationBar, on all screensizes.

Note: Page_NavigationbarClicked() is NOT raised for such a sidebar!


Usage:

Make some Naviagtion bar themes. Note we disable the waveseffect because this looks ugly when we click on an item in the sidebar:

' another navbar theme
   MyTheme.AddNavigationBarTheme("nav2theme")
   MyTheme.NavigationBar("nav2theme").SideBarWavesEffect = ABM.WAVESEFFECT_NONE   
   MyTheme.NavigationBar("nav2theme").SideBarBackColor = ABM.COLOR_BLUEGREY
   MyTheme.NavigationBar("nav2theme").SideBarBackColorIntensity = ABM.INTENSITY_LIGHTEN4
   
   ' another navbar theme
   MyTheme.AddNavigationBarTheme("nav3theme")
   MyTheme.NavigationBar("nav3theme").SideBarWavesEffect = ABM.WAVESEFFECT_NONE   
   MyTheme.NavigationBar("nav3theme").SideBarBackColor = ABM.COLOR_LIME
   MyTheme.NavigationBar("nav3theme").SideBarBackColorIntensity = ABM.INTENSITY_LIGHTEN4
   
   ' another navbar theme
   MyTheme.AddNavigationBarTheme("nav4theme")
   MyTheme.NavigationBar("nav4theme").SideBarWavesEffect = ABM.WAVESEFFECT_NONE   
   MyTheme.NavigationBar("nav4theme").SideBarBackColor = ABM.COLOR_TEAL
   MyTheme.NavigationBar("nav4theme").SideBarBackColorIntensity = ABM.INTENSITY_LIGHTEN4

Now we can add the sidebars:

   Dim extraSideBar As ABMSideBar
   extraSideBar.Initialize(page, "extrasidebar", 530, 48, 56, Null, ABM.COLLAPSE_ACCORDION, "nav2theme")
   extraSideBar.AddSideBarComponent("esbHello", BuildSideBarComponent(page, "sidebarcomp", "../images2/16.jpg", "This is a sidebar component", "With an image and an editor"))
   page.NavigationBar.AddTopItemWithSideBar("SideBar", "", "mdi-action-dashboard", "", False, extraSideBar)
   
   Dim extraSideBar2 As ABMSideBar
   extraSideBar2.Initialize(page, "extrasidebar2", 330, 48,56, Null, ABM.COLLAPSE_ACCORDION, "nav3theme")
   extraSideBar2.AddSideBarDivider("")
   extraSideBar2.AddSideBarItem("esbHello2", "Hello Again!", "mdi-action-invert-colors")
   
   page.NavigationBar.AddTopItemWithSideBar("SideBar2", "", "mdi-action-dashboard", "", False, extraSideBar2)
   
   Dim extraSideBar3 As ABMSideBar
   extraSideBar3.Initialize(page, "extrasidebar3", 330, 48,56, Null, ABM.COLLAPSE_ACCORDION, "nav4theme")
   extraSideBar3.AddSideBarDivider("")
   extraSideBar3.AddSideBarItem("esbHello3", "Hello!", "mdi-action-invert-colors")
   
   page.NavigationBar.AddTopItemWithSideBar("SideBar3", "", "mdi-action-dashboard", "", False, extraSideBar3)

Here is the code for the component with some labels, an image and an ABMEditor

Sub BuildSideBarComponent(page As ABMPage, id As String, image As String, Title As String, Subtitle As String) As ABMContainer 'ignore
   Dim ItemCont As ABMContainer
   ItemCont.Initialize(page, id, "")   
   ItemCont.AddRowsM(1,False,0,0, "").AddCellsOSMP(1,0,0,0,3,3,3,4,0,0,0,"").AddCellsOSMP(1,0,0,0,9,9,9,4,0,0,0,"")
   ItemCont.AddRowsM(1,False,0,0, "").AddCells12(1, "")
   ItemCont.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
   
   Dim SubItemCont As ABMContainer
   SubItemCont.Initialize(page, id & "SubItemCont", "")   
   SubItemCont.AddRowsM(1,False, 0,0,"").AddCells12MP(1,-6,0,0,0,"").AddCells12(1,"")
   SubItemCont.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
   
   ItemCont.Cell(1,2).AddComponent(SubItemCont)
   
   Dim img As ABMImage
   img.Initialize(page, id & "img", image, 1)
   img.SetFixedSize(48,48)
   img.IsCircular = True
   img.IsResponsive = True
   
   ItemCont.Cell(1,1).AddComponent(img)
   
   Dim lbl1 As ABMLabel
   lbl1.Initialize(page, id & "lbl1", Title, ABM.SIZE_H6, False, "lightblue")
   lbl1.VerticalAlign = True
   
   SubItemCont.Cell(1,1).AddComponent(lbl1)
   
   Dim lbl2 As ABMLabel
   lbl2.Initialize(page, id & "lbl2", Subtitle, ABM.SIZE_H6, False, "")
   lbl2.VerticalAlign = True
   
   SubItemCont.Cell(1,2).AddComponent(lbl2)
   
   Dim editor As ABMEditor
   editor.Initialize(page, "editor", True, True, "editor")
   ItemCont.Cell(2,1).AddComponent(editor)
   
   Return ItemCont
End Sub

I'm rounding up the 2.00 release and it is scheduled to go out by the end of this week/early next week.

 

[jinyistudio]

Hi

Does it has any function to hide the sidebar !?

 

[mindful]

Page.ShowSideBar(sidebarID)
Page.CloseSideBar(sidebarID)
Page.ToggleSideBar(sidebarID)

 

[jinyistudio]

Hi

How to access listitem in sidebar when i click listitem !?

Sub BuildSideBarComponent(page As ABMPage, id As String,others As Object) As ABMContainer 'ignore
   Dim ItemCont As ABMContainer
   ItemCont.Initialize(page, id, "")
   ItemCont.AddRowsM(3,False,0,0, "").AddCellsOSMP(1,0,0,0,12,12,12,0,0,0,0,"")
   ItemCont.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components

   Dim lbl1 As ABMLabel
   lbl1.Initialize(page, id & "lbl1","請選擇此配方庫內的配方程序", ABM.SIZE_H5, False, "lightblue")
   lbl1.VerticalAlign = True
    ItemCont.Cell(1,1).AddComponent(lbl1)
    '
    Dim div1 As ABMDivider
    div1.Initialize(page,id&"div1","")
    ItemCont.Cell(2,1).AddComponent(div1)
    ' add items 
    Dim s1 As String=others 
    If db.RecipeLst.ContainsKey(s1) Then
        Dim mp1 As Map=db.RecipeLst.Get(s1)
        Dim mp2 As Map=mp1.Get("list") ' 取庫內所有的配方程序
        ' "A-1":{
        '    "description":"test1-A1",
        '    "list":{
        '        "abc":{
        '            "description":"五金",
        '            "images":{
        '                "1":{
        '                    "file":"",
        '                    "description":""
        '                }
        '            }
        '        }
        '    }
        ' }
        If mp2<>Null Then
            If mp2.IsInitialized Then
                If mp2.Size>0 Then
                    Dim list2 As ABMList
                    list2.Initialize(page, "list2", ABM.COLLAPSE_ACCORDION, "")
                    For n1=1 To mp2.size
                        Dim title As String = mp2.GetKeyAt(n1-1)
                        If title<>"" Then
                            Dim mp3 As Map=mp2.Getdefault(title,Null)
                            If mp3<>Null Then
                                Dim subt As String = mp3.Get("description")
                                Dim image As String = "..\images\part.png"                     
                                list2.AddItemWithTheme("H"&n1, BuildSideBarItem(page,"hc"&n1,image,title,subt),"list1theme")
                            End If
                        End If
                    Next
                    ItemCont.Cell(3,1).SetFixedHeightFromBottom(32,True)
                    ItemCont.Cell(3,1).AddComponent(list2)
                End If
            End If
        End If
       End If
    Return ItemCont
End Sub

lists item click event

Sub List2_Clicked(ItemId As String)
    If ItemId.StartsWith("H") Then
        Dim sidebar As ABMSideBar=page.GetSideBar("SideBar")
       
        page.CloseSideBar("extrasidebar")
    End If
End Sub

 

[mindful]

Did you initialize the sidebar as a panel ? If yes then you can do it like this:

Dim sb as Abmsidebar = page.GetSidebar(sidebarid)
Dim input as AbmInput = sb.Content.Component(inputid)

 

[jinyistudio]

I cann't getsidebar with following code but i can close sidebar with page.CloseSideBar("extrasidebar") Why !?
Dim sidebar As ABMSideBar=page.GetSideBar("extrasidebar")

 

[jinyistudio]

I am not initialize the sidebar as a panel !

Did you initialize the sidebar as a panel ? If yes then you can do it like this:

Dim sb as Abmsidebar = page.GetSidebar(sidebarid)
Dim input as AbmInput = sb.Content.Component(inputid)

 

[mindful]

I am not initialize the sidebar as a panel !

Please post how are you creating the sidebar and the item you want to get and how you are adding the extra sidebar to the nav bar (eg. AddTopItemWithSideBar)

Here is an example how to create an extra sidebar:
' code in ABMShared

Public Sub BuildExtraSideBar(Page as ABMPage) as ABMSideBar
  Dim extraSideBar As ABMSideBar
  extraSideBar.InitializeAsPanel(Page, "extrasidebar", 350, 0, Null, "", "extrasidebarcontent", "")
  extraSideBar.Content.AddRowsM(1, False, 0, 0, "").AddCells12MP(1, 0, 0, 0, 0, "")
  extraSideBar.Content.BuildGrid
  Dim lblTest As ABMLabel
  lblTest.Initialize(Page, "lbltest", "This is a test", ABM.SIZE_H5, False, "")
  esbChat.Content.Cell(1, 1).AddComponent(lblTest)
  
  ' later edit - i forgot to return the newly created sidebar, as I am writing from memory not copy-past ;)
  Return extraSideBar
End Sub

' code in ABMShared in ConnectNavigationBar

Page.NavigationBar.AddTopItemWithSideBar("extrasidebar", "", "notifications_none", "", ABM.VISIBILITY_ALL, BuildExtraSideBar(Page))

 

[mindful]

I am always using extra sidebar initialized as a panel. This way it can act kind as a modalsheet. I haven't used it like @alwaysbusy example (by adding sidebaritems).

 

[jinyistudio]

Dim extraSideBar As ABMSideBar
            extraSideBar.Initialize(page, "extrasidebar", 480, 48, 56, Null, ABM.COLLAPSE_ACCORDION, "nav2theme")
            'extraSideBar.InitializeAsPanel(page, "extrasidebar", 480, 48, Null, "nav2theme","rptpanel","")
            extraSideBar.AddSideBarComponent("esbHello", BuildSideBarComponent(page, "sbc",others))
            page.NavigationBar.AddTopItemWithSideBar("SideBar", "", "mdi-content-select-all", "", False, extraSideBar)

Sub BuildSideBarComponent(page As ABMPage, id As String,others As Object) As ABMContainer 'ignore
   Dim ItemCont As ABMContainer
   ItemCont.Initialize(page, id, "")  
   ItemCont.AddRowsM(3,False,0,0, "").AddCellsOSMP(1,0,0,0,12,12,12,0,0,0,0,"")
   ItemCont.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
  
   Dim lbl1 As ABMLabel
   lbl1.Initialize(page, id & "lbl1","請選擇此配方庫內的配方程序", ABM.SIZE_H5, False, "lightblue")
   lbl1.VerticalAlign = True  
    ItemCont.Cell(1,1).AddComponent(lbl1)
    '
    Dim div1 As ABMDivider
    div1.Initialize(page,id&"div1","")
    ItemCont.Cell(2,1).AddComponent(div1)
    ' add items   
    Dim s1 As String=others   
    If db.RecipeLst.ContainsKey(s1) Then
        Dim mp1 As Map=db.RecipeLst.Get(s1)
        Dim mp2 As Map=mp1.Get("list") ' 取庫內所有的配方程序
        ' "A-1":{
        '    "description":"test1-A1",
        '    "list":{
        '        "abc":{
        '            "description":"五金",
        '            "images":{
        '                "1":{
        '                    "file":"",
        '                    "description":""
        '                }
        '            }
        '        }
        '    }
        ' }
        If mp2<>Null Then
            If mp2.IsInitialized Then
                If mp2.Size>0 Then
                    Dim list2 As ABMList
                    list2.Initialize(page, "list2", ABM.COLLAPSE_ACCORDION, "")
                    For n1=1 To mp2.size
                        Dim title As String = mp2.GetKeyAt(n1-1)
                        If title<>"" Then
                            Dim mp3 As Map=mp2.Getdefault(title,Null)
                            If mp3<>Null Then
                                Dim subt As String = mp3.Get("description")
                                Dim image As String = "..\images\part.png"                       
                                list2.AddItemWithTheme("H"&n1, BuildSideBarItem(page,"hc"&n1,image,title,subt),"list1theme")
                            End If
                        End If
                    Next
                    ItemCont.Cell(3,1).SetFixedHeightFromBottom(32,True)
                    ItemCont.Cell(3,1).AddComponent(list2)
                End If
            End If
        End If
       End If
    Return ItemCont
End Sub

 

[mindful]

I think if the sidebar isn't initialized as a panel then you can't modify an sidebaritem after you add it (you can clear all the items an add them again) - it acts the same as the main sidebar but there are no Page_NavigationbarClicked events raised. So if you want to manipulate the content of the sidebar (update components after you add them - just like you add them to the page) then you need to initialize the sidebar as a panel and add you components in sidebar.Content just as my example.

In my opinion the extra sidebar should only be initialized as a panel as you can achive any view model. I may be wrong so I suggest to wait for @alwaysbusy clarification on this matter (if you can update an component added with AddSideBarComponent in runtime).

 

[jinyistudio]

Hi,mindful
I have try your code and it is OK.