B4J Question Navigation Menu - how do I build one

[mfstuart]

Hi All,
I'd like to know how to build a left side navigation menu that would be loaded with menu items that when clicked would load layouts to the right of the navigation menu.

What are all the views/controls needed in building it?
How do you build it based on each menu item having an icon and text or button as the menu description?
I would like to use the icons from the FontAwesome/Material Icons, Icon Picker if possible. I see it's available in the code editor with a right-click.

I've searched the forum for such a thing, but haven't found something that I can build.

Thanx,
Mark S.

 

[Erel]

You can use ListView to create such a menu. Each item in the list can be a Pane with other nodes inside.

 

[mfstuart]

Thanx for the tips Erel.

I'd like to get started on this little sample project, so how do I access/use the B4J icons in building the menu ListView?
I tried with the Icon Picker and code, but no success.

Do I use the B4J designer and manually build them? I'd really like to use code to build the ListView, and by your comment above, I presume that's the preferred way.
I've used your forum entry on what you mention above by building a layout with Labels but do not understand how to get icons from the B4J library, as they are there and would like to use them.

I've tried this but errors out:

Sub lvMenu_Load
    lvMenu.Items.Clear
    Dim img As Image = fx.CreateFontAwesome(12)     'what is the value 12?
    lvMenu.Items.Add(Menu_CreateItem(img,"First menu option"))
End Sub

Sub Menu_CreateItem(Icon As Image, Text As String) As Pane
    Dim p As Pane
    p.Initialize("")
 
    Dim l As Label
    l.Initialize("")
    l.Text = Text
 
    p.AddNode(Icon,0,0,lvMenu.Width,40)
    p.AddNode(lvMenu,40,0,lvMenu.Width,40)
    Return p
End Sub

Error:
B4J Version: 5.82
Parsing code. (0.00s)
Compiling code. (0.04s)
Compiling layouts code. (0.00s)
Organizing libraries. (0.00s)
Compiling generated Java code. Error
B4J line: 37
Dim img As Image = fx.CreateFontAwesome(12)
javac 1.8.0_131
src\b4j\example\main.java:111: error: incompatible types: Font cannot be converted to Image
_img.setObject((javafx.scene.image.Image)(_fx.CreateFontAwesome(12).getObject()));
^
1 error

Help would be appreciated as this will be the building blocks of other apps I'd like to build.

Here's a nice example I found on the web:


Thanx,
Mark S.

 

[Daestrum]

Fontawesome and Materialicons do not return an image, the are fonts.

Dim myFont as Font
...
myFont = FX.CreateFontAwesome(20) ' 20 is the font size
...

You can simply (in your example above) tell the label to use the font, then its just a case of finding the correct chr() code for the fonticon you want.

...
l.Font = myFont
...
l.Text = chr(0xf2b9) & " the text of the label" ' chr(0xf2b9) is the address book icon
...

To find the codes you want look here http://fontawesome.io/cheatsheet/

 

[Erel]

To find the codes you want look here http://fontawesome.io/cheatsheet/

Or use the built-in picker:

Right click in the code editor and choose icon picker.

 

[mfstuart]

Thanx all for showing me hints on how this works.
I've gotten this far with building the navigation menu, but would like to enhance the UI colors of the menu.

As you can see in the attached png, the icons and menu text has been added, but again, I would like to have the icons and menu text color white and the background color the same blue as in the top of the menu.

I've set the ListView.Style with this:

'lvMenu.Alpha = 0.0
lvMenu.Style = "-fx-background-color: transparent; -fx-border-color: transparent;"

But is not working as I would like. As you can see in the code, I tried setting the Alpha to 0.0, but all the menu items disappeared with the whole menu color as blue.

So how do I set the background color of the ListView and the panels to a color (blue) and the menu items text to another color (white)?

Here's the complete code that loads the ListView:

Sub lvMenu_Load
    Dim Wid As Double = lvMenu.Width
 
    Dim lbl As Label
    lbl.Initialize("")
 
    lvMenu.Items.Clear
    'lvMenu.Alpha = 0.0
    lvMenu.Style = "-fx-background-color: transparent; -fx-border-color: transparent;"
 
    'NAVIGATE
    lvMenu.Items.Add(Menu_CreateItem(1,"NAVIGATE",Wid))
 
    lbl.Text = Chr(0xF017) & " Timeline"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF0E4) & " Dashboard"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF1FE) & " Statistics"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF085) & " Analytics"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF145) & " Tickets"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
 
    'MANAGE
    lvMenu.Items.Add(Menu_CreateItem(1,"MANAGE",Wid))
 
    lbl.Text = Chr(0xF0F6) & " Projects"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF2C3) & " Clients"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF2BE) & " Teams"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF02C) & " Tags"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF233) & " Settings"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
 
    'ACTION
    lvMenu.Items.Add(Menu_CreateItem(1,"ACTION",Wid))
 
    lbl.Text = Chr(0xF24D) & " New"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF0C5) & " Duplicate"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
 
    lbl.Text = Chr(0xF014) & " Delete"
    lvMenu.Items.Add(Menu_CreateItem(2,lbl.Text,Wid))
End Sub

Sub Menu_CreateItem(MenuType As Int, Text As String, W As Double) As Pane
    Dim p As Pane
    p.Initialize("")
    p.Style = "-fx-background-color: transparent; -fx-border-radius: 10; -fx-background-radius: 10;"
 
    Dim l As Label
    l.Initialize("")
    l.Text = Text
 
    Dim tFont As Font
 
    Select MenuType
        Case 1        'header item
            tFont = fx.CreateFontAwesome(10)
            l.Font = tFont
            l.Style = "-fx-text-fill: black; -fx-alignment: BOTTOM_LEFT; -fx-background-color: transparent;"
            p.AddNode(l,-1,-1,W,30dip)
            p.PrefHeight = 30dip
        Case 2        ' menu item
            tFont = fx.CreateFontAwesome(16)
            l.Font = tFont
            l.Style = "-fx-text-fill: black; -fx-text-alignment: left; -fx-background-color: transparent;"
            p.AddNode(l,-1,-1,W,22dip)
            p.PrefHeight = 22dip
    End Select
 
    Return p
End Sub

Any ideas?

Thanx,
Mark S.