B4J Tutorial [ABMaterial]: Related MaterialCSS Experiments

Hi there

I'm working on some webapps however needed to tweak to my liking some of the components. Sadly the ABMNavigation bar at the moment cannot add top items to the "left" of the navigation bar and secondly, the Title is fixed due to some media queries and it overlaps in some instances with the 'burger'. Hopefully someone will crack the title issue one day.

Anyway...

1. I wanted to add navbar items to the "left" section of the navbar.
2. I wanted to be able to add a navigationbar on any RC (for my project) without any sidebars)
3. I dint want to define a lot of ABMContainers here, they are not used in the code here (off course) the elements themselves and htmlelements like divs, anchors, lists etc.
4. I wanted this to be easy as ABC.
5. I wanted a way to have dismissable listview items (would be nice to trap that event, perhaps someone can advice)
6. I liked the Collections article in materialcss.com

To Do..

Implement click methods. For now these have links that one can specify. I tried to use the navbarclick method (from BuildPage) methods.

NB: There are no external dependencies here as this is using the built in materialcss framework of ABMaterial. This is coded with ABMaterial 3.50

 

[Mashiane]

On the added NavBar, the title has been removed... its always centered and I wanted an option to left or right align it, dololo. One is able to add items on the left or also on the right of the navbar. The navbar is sitting at R2C1.

Reproduction:

In Class_Globals of your page...

Dim navbar As MashNavBar
    Dim collection As MashCollections
    Dim colsecondary As MashCollections
    Dim colAvatars As MashCollections

In your ConnectPage...

ABMShared.AddSubHeader(page,"l1","Add a NavBar On Any Cell with Left and Right Buttons...",2,1)
    'create a navbar
    navbar.Initialize(page,"nav1","TheExplorer","transparent")
    navbar.LogoPlacement = "center"        ' this does not work due to media queries
    'navbar.SetLogoIcon("mdi-cloud","right")
    navbar.Title = ""
    navbar.AddFAB("mdi-add","orange","medium", True)
    navbar.AddLeftItem("lnk1","mdi-view_module","right","Statistics","#r1","red",True,True)
    navbar.AddLeftItem("lnk2","mdi-search","left","Charts","#r2","green",False,True)
    navbar.AddLeftItem("lnk3","mdi-refresh","","Tasks","#r3","orange",False,True)
    navbar.AddLeftItem("lnk5","mdi-dashboard","","NavPills","#r5","yellow",False,True)
    navbar.AddButton("btnx","mdi-cloud","right","Button","#","green","left",True)
       
    navbar.AddDropDown("notif","Profile","blue","right", "mdi-more_vert")
    navbar.AddDropDownItem("notif","inbox","","","Inbox","","red",False)
    navbar.AddDropDownItem("notif","one","","","Profile","","yellow",False)
    navbar.AddDropDownItem("notif","two","","","Settings","","green",True)
    navbar.AddDropDownItem("notif","three","","","Sign Out","","orange",False)

ABMShared.AddSubHeader(page,"l2","Add a ListView/Collection with Anchors...",3,1)
    collection.Initialize(page,"cols",True)
    collection.AddItem("first","mdi-send","","First","#","red",False)
    collection.AddItem("second","","","Second","#","green",False)
    collection.AddItem("third","","","Third","#","yellow",False)
    collection.AddItem("fourth","","","Fourth","#","orange",False)
    collection.AddItem("fifth","","","Fifth","#","blue",False)   
    page.Cell(3,1).AddComponent(collection.ABMComp)
   
    ABMShared.AddSubHeader(page,"l3","Add a ListView/Collection with Dismissable Items (select the icons)...",4,1)
    'collections with secondary items
    colsecondary.Initialize(page,"cols1",False)
    colsecondary.AddItemSecondary("first1","mdi-send","First 1","#","red",True)
    colsecondary.AddItemSecondary("second1","mdi-send","Second 1","#","green",True)
    colsecondary.AddItemSecondary("third1","mdi-send","Third 1","#","yellow",True)
    colsecondary.AddItemSecondary("fourth1","mdi-send","Fourth 1","#","orange",True)
    colsecondary.AddItemSecondary("fifth1","mdi-send","Fifth 1","#","blue",True)
    page.Cell(4,1).AddComponent(colsecondary.ABMComp)
   
    ABMShared.AddSubHeader(page,"l4","Add a ListView/Collection Avatars & Dismissable Items (select the icons)...",5,1)
    colAvatars.Initialize(page,"avatars",False)
    colAvatars.AddItemAvatar("first1", "../images/1.jpg", "<b>First</b>","First Picture","#","mdi-reply","red",True)
    colAvatars.AddItemAvatar("second2","../images/2.jpg", "Second","Second Picture","#","mdi-reply","green",True)
    colAvatars.AddItemAvatar("third3","../images/3.jpg", "Third","<i>Third Picture</i>","#","mdi-reply","blue",True)
    colAvatars.AddItemAvatar("fourth4","../images/4.jpg", "Fourth","Fourth Picture","#","mdi-reply","orange",True)
    colAvatars.AddItemAvatar("fifth5","../images/5.jpg", "Fifth","<u>Fifth Picture</u>","#","mdi-reply","yellow",True)
    page.Cell(5,1).AddComponent(colAvatars.ABMComp)

Setting the badges, these can be done anywhere on the code bot not in BuildPage and after PageFinishedLoading...

navbar.SetBadge("lnk1",2,True,"blue")
    navbar.SetBadge("lnk1",5,False,"red")
   
    navbar.SetBadge("inbox",23,False,"orange")
   
    collection.SetBadge("first",1,True, "red")
    collection.SetBadge("second",2,False,"")
    collection.SetBadge("fifth",5,True,"purple")
    collection.SetBadge("fifth",7,True, "green")

 

[Mashiane]

Here are the components...

Happy coding...