B4J Question [SOLVED] Custom View ButtonToolbar with FontAwesome Icons

[rwblinn]

Enhancing the jRLViews CV Library with a ButtonToolbar CV. A toolbar can contain buttons text or icon and separators.
Despite using icons from the bitmaps located in the dirassets folder, want to use FontAwesome Icons.

Seeking help for: Whilst the fontawesome icons are displayed, encountered following issues:
1. the fontawesome icon aligment is always center_right instead of center.
Tried several options, like a resize sub called using subdelayed after the CV is loaded = no change, or setting the alignment property = no change.
Example fontawesome Android Icon, plus 2 icons from files:

2. when resizing the toolbar till the >> appear, the fontawesome icon is empty when clicking on the >>, wheras the icons created from file are displayed:

Code Snippet creating icon button
The button properties are read from JSON string like for a Menu.
The fontawesome font is stored in an additional jar and added to the Project Attributes.

...
Dim ic As String = colroot.Get("icon")
' Fontawesome icon is hex string, i.e. 0x.
If ic.StartsWith("0x") Then
   b.Tag = ic
   b.Font = fx.CreateFontAwesome(b.PrefHeight)
   b.Text = Chr(Bit.ParseInt(ic.Replace("0x",""), 16))
   b.Alignment = "CENTER"
Else
   ' Icon from file located in the dirassets folder
   AddButtonIcon(b, colroot.Get("icon"), mProps.Get("Transparent"))
  End If
End If
' Add the button to the list
l.Add(b)
End If
Next
' Add the list of buttons to the toolbar
mJOToolbar.RunMethodJO("getItems", Null).RunMethod("addAll", Array(l))
' Add the toolbar node to the base
mBase.AddNode(mJOToolbar, 0, 0, 0, 0)

The CV lib attached, see class ButtonToolbar.

 

[keirS]

It doesn't appear to be an issue with FontAwesome per se.



That's from my own Toolbar implementation (wrapped in Java). I would check what (if any) the Padding and Insets are set to for that button.

Dim JO As JavaObject = Button1
Log ("Padding: " & JO.RunMethodJO("getPadding",Null).RunMethod("toString",Null))
Log ("Insets: " & JO.RunMethodJO("getInsets",Null).RunMethod("toString",Null))

 

[Erel]

You can try to add the button to a pane. Call Pane.SetLayoutAnimated to set the pane size. This will allow you to control the button's offset.

 

[rwblinn]

Explored further and found out that the JavaFX Toolbar auto computes the size of a toolbar button with FontAwesome Icon to a minimum of 35px (width/height) if the FontAwesome Font Size is set to 16 = did some debugging to find out.
Did check the padding/inserts, these are 0.

EDIT
To set the font size of the button holding a FontAwesome Icon used formula (b is a button):

Dim fs As Double = (b.PrefHeight / 2) - Round(b.PrefHeight / 16)
If fs < 0 Then fs = 16
b.Font = fx.CreateFontAwesome(fs)

The fontawesome icon is displayed at the center and when resizing the toolbar, clicking on >> is working fine.
After compling the example and the docu, will post the enhanced jRLViews in the Library Section

Example Properties for a Vertical Toolbar Button using width/heigth 40:

[
{"id":"dateinsert","width":40,"height":40,"tooltiptext":"Date Insert","icon":"dateinsert16.png"},
{"id":"email","width":40,"height":40,"tooltiptext":"EMail","icon":"email16.png"},
{"id":"android","width":40,"height":40,"tooltiptext":"Android","icon":"0xF17B"}
]

If someone knows a better solution using the Toolbar Node, pls share.
Thanks for the hints.