ToolbarButton

ToolbarButton is a button on a toolbar which is used to invoke actions.

ToolbarButton can include labels, icons, or tooltips.

Toolbar with 2 toolbar buttons and a separator inserted in a Grid panel as seen in Lycia Form Designer

Form XML code:

Theme element filter XML code:

CSS element selector code:

Inheritance diagram:

Most commonly used form properties:

classnames

Events: OnInvoke

identifier

image

preferredSize

text

tooltip

Most commonly used theme properties:

Image:

New Image

Image Url

Image Scaling

Image Position

Size

Associated 4gl syntax:

INPUT ↓

Associated functions:

fgl_setactionlabel()

fgl_getactionlabel()

fgl_setkeylabel()

fgl_getkeylabel()

fgl_dialog_setactionlabel()

fgl_dialog_getactionlabel()

fgl_dialog_setkeylabel()

Associated ui methods:

SetAllowNewLines →

GetAllowNewLines

SetIdentifier →

GetIdentifier →

SetText →

GetText

Influence and behavior:

To add a ToolbarButton to your form,

Step 1. Choose a ToolbarButton from the widgets palette by left-clicking its icon.

Step 2. Left-click the toolbar to place the ToolbarButton there.

Step 3. The ToolbarButton is now added to your form, and you can see it in the Structure view.

 

To make toolbar buttons active and trigger an event only when focus is a definite field,

4gl code sample:

runtime behavior:

 

At runtime, toolbar buttons can be manipulated with ui methods.

Here you can find out how to enable or disable tooltips at runtime using the setTooltip() method:

 

You can change appearance properties of a ToolbarButton in Lycia Form Designer. However, we recommend applying appearance properties via user themes and css.

To apply a property to a ToolbarButton, set its value in the user theme, directly or using filters.

In the example below, we specify the appearance of toolbar buttons by applying Fill Color property.

lycia theme designer

theme XML code

runtime appearance

 

Appearance and behavior of toolbar buttons depend on the Lycia version you use – jquery Lycia or Lycia with Material Design.

Here are the rules which are applied to toolbar buttons with MD Lycia:

1. With MD Lycia, toolbar consists of two logical parts – navigation bar (= application bar) and drop-down menu (= overflow menu).

   

   

2. In the navigation bar, toolbar buttons are always rendered as icon-only (= without text).

   Their text is displayed as a tooltip:

   

   In the drop-down menu, toolbar buttons can have both icon and text (or one of them, if the other is not set):

   

   Image-only buttons don't have a tooltip in the drop-down menu:

   

3. In the navigation bar, default icon is used for toolbar buttons which doesn't have an icon.

   

4. 1-6 toolbar buttons are rendered to the navigation bar. 7+ toolbar buttons are rendered to the drop-down menu.

   

   

5. Toolbar buttons with the class expose are always rendered to the navigation bar.

   

   You can read about setting class names here.

All these rules apply to both toolbar buttons created via the ToolbarButton widget, dynamically (by the corresponding ui methods), and by ON ACTION and COMMAND clauses (e.g., of the MENU statement).

The difference between these two types of toolbar buttons (in relation to MD Lycia) lies in how you set their text and icon:

• With toolbar buttons created by the widget, their text and icons can be set in the .fm2 form or via ui methods.

  in the .fm2 form:

  

  More details are here and here.

  via ui methods

  CALL img.SetImageUrl("qx://application/cloud_full.svg")

  CALL tb_ui.setImage(img)

  CALL tb_ui.setText("ui")

  More details are here and here.

• With toolbar buttons created dynamically, their text and icons can be set via ui methods.

  LET tbr_bttn = ui.ToolbarButton.Create("f1")

  CALL img.SetImageUrl("qx://application/cloud_full.svg")

  CALL tbr_bttn.setImage(img)

  CALL tbr_bttn.setText("ui")

  More details are here and here.

• With toolbar buttons created by ON ACTION and COMMAND clauses, their text and icons are set by fgl_setactionlabel().

  CALL fgl_setactionlabel("input" ,"input" , "qx://application/calendar.svg")

  More details are here and here.

 

With MD Lycia, if a toolbar includes more than 6 toolbar buttons, these buttons are rendered to the drop-down menu.

There are 5 ways to render the necessary toolbar buttons to the navigation bar:

• via the form property, place,
• via the .qxtheme property, place,
• via the class name, expose, set in LFD by the property, classnames,
• via the class name, expose, set in LTD with the filter, Apply class, and
• via the setPlace() method used on a variable of the ui.ToolbarButton datatype.

 

At runtime, you can create and manipulate toolbar buttons with ui methods.

If your .fm2 form has a Toolbar widget, you can populate it via ui methods:

To make this newly created toolbar button able to trigger any actions, you must set the event for it:

So the simple algorithm for adding toolbar buttons by ui methods is this:

1. Check that your form has a Toolbar widget.
2. Define variables of ui.ToolbarGroup, ui.ToolbarButton, and ui.BackgroundServerEventHandler data types in your 4gl code.
3. Use the create() method to create a toolbar group.
4. Use the create() method to create a toolbar button. Make sure that you have specified the correct toolbar group.
5. Set the event for this toolbar button.

 

All properties of a toolbar button can be changed at runtime by ui methods.

For example,

• text – by setText(),
• image – by setImageUrl() or setImage() with other methods,
• place – by setPlace(), or
• tooltip – by setTooltip().