Button Bar

An SVG button bar widget

The Button Bar widget builds a configurable bar of buttons having one or more SVG buttons.
The properties inspector enables configuration of the SVG icon, icon name, icon label, icon clicked color, icon default color (unpressed mode), border color and the button bar background color.
Using SVG buttons as GUI elements provides a resolution independent high quality graphical element which doesn’t need to be changed for different device display resolutions.
The default script uses a switch statement with case blocks based upon the name of the clicked button for ease of readability.
The Button Bar widget is based upon the LiveCode Navigation Bar widget, but it only highlights each button when clicked (instead of keeping the button highlighted as the Navigation Bar does.)

The Button Bar is an improvement over the standard SVG widget which doesn’t highlight itself when clicked, and provides multiple SVG buttons together in a row by default.

Compatibility:
All platforms supported by LiveCode

Stam Kapetanakis - Jul 6th, 2021
Very nice widget - however there seems to be an issue with the default script generated. Clearly the intention is that adding the 'buttonClicked' handler would generate handler script: on buttonClicked pButtonName -- boilerplate code to show a switch or conditional example end buttonClicked instead it just generates: on buttonClicked end buttonClicked which is very confusing unless you get onto this page to review the API...

The default script created by this widget uses a switch statement with case blocks based upon the name of the clicked button for ease of readability. More details are included in the API link above.

Button Bar

Type

widget

Summary
This widget is a button bar.Contributed by .com Solutions Inc.
www.FmProMigrator.com

Description

This widget is a button bar.

Contributed by .com Solutions Inc.
www.FmProMigrator.com

buttonClicked

Type

message

Syntax
on buttonClicked nameOfButtonClicked
Summary
Sent when a button is clicked
Examples
on buttonClicked pButtonName
   -- branch based upon name of clicked button
   switch pButtonName
      case "first"
         break
      case "previous"
         break
      case "next"
         break
      case "last"
         break
      default
         -- do nothing if empty
   end switch
end buttonClicked
Description

Handle the message in the widget’s object script to respond to
a button click made by the user.

showBorder

Type

property

Syntax
get the showBorder of widget
set the showBorder of widget to {true | false}
Summary
Whether the dividing line at the top of the buttonbar is drawn or not
Description

Use the property to determine whether the dividing line at the top
of the buttonbar is drawn or not.

itemEnabled

Type

property

Syntax
get the itemEnabled of widget
set the itemEnabled of widget to booleanItems
Summary
Whether each button is enabled.
Value
Name Type Description
value A comma-delimited list of true or false
Description

The property is a list of booleans (true or false
values) that controls whether each button in the button bar is enabled
or not. Buttons are enabled by default. When a button is disabled,
its icon and label are drawn in the and it does not
respond to mouse clicks.

disabledColor

Type

property

Syntax
get the disabledColor of widget
set the disabledColor of widget to color
Summary
The color of buttonbar icons and text when disabled.
Description

The is used to draw the icons and labels of buttons
that are disabled by setting the corresponding item of the

property to false.

opaque

Type

property

Syntax
get the opaque of widget
set the opaque of widget to {true | false}
Summary
Whether the background of the buttonbar is opaque
Description

If the property is false, the background of the buttonbar will be
transparent.

itemIcons

Type

property

Syntax
get the itemIcons of widget
set the itemIcons of widget to pIcons
Summary
The icons for the button items when not highlighted
Parameters
Name Type Description
pIcons A comma delimited list of icon names.
Description

The icons of the button items of the widget. Adding an item to the

causes a new button item to be created with the default label
and name.

Each icon name must be one of the predefined graphics provided by the “IconSVG”
library. You can get a list of available predefined path names by running
`put iconNames()` in the Message Box.

**Note:** Removing an item from the does not cause the
corresponding item to be removed from the button items, but merely resets
it to the default icon.

itemStyle

Type

property

Syntax
get the itemStyle of widget
set the itemStyle of widget to pItemStyle
Summary
The display style of the widget
Parameters
Name Type Description
pItemStyle The display style
-“icons”: display icons only
-“text”: display names only
-“both”: display icons and names
Description

Use the property to control which elements of the button items are displayed.

hilitedItemIcons

Type

property

Syntax
get the hilitedItemIcons of widget
set the hilitedItemIcons of widget to pIcons
Summary
The icons for the navigation items when pressed (hilited)
Parameters
Name Type Description
pIcons A comma delimited list icon names.
Description

The icons for the button items of the widget to be shown when the buttons are
in the pressed state. Adding an item to the causes a new button
item to be created with the default label and name.

The name of an icon must be one of the names returned by the iconNames() function of the com.livecode.library.iconSVG library.

Each icon name must be one of the predefined graphics provided by the “IconSVG”
library. You can get a list of available predefined path names by running
put iconNames() in the Message Box.

Note: Removing an item from the does not cause the
corresponding item to be removed from the button items, but merely resets
it to the default icon.

itemNames

Type

property

Syntax
get the itemNames of widget
set the itemNames of widget to pNames
Summary
The names of the button items
Parameters
Name Type Description
pNames A comma delimited list of the button item names.
Description

The names of the button items of the widget.

Adding an item to the of the buttonbar causes a new button item to
be created with the default icon and label. Removing an item from the

causes the corresponding item to be removed from the button
items.

desiredHeight

Type

property

Syntax
get the desiredHeight of widget
Summary
The height that the widget ought to be displayed at
Examples
create widget as "dotcomsolutionsinc.widget.buttonbar"
set the height of it to the desiredHeight of it
Description

Returns the height that the widget ought to be displayed at

editMode

Type

property

Syntax
get the editMode of widget
set the editMode of widget to (true | false)
Summary
Whether the widget is in edit mode or not
Description

This is currently an experimental feature of the navigation bar, and allows the icons to
be changed by clicking on the outlined regions, and new items to be added with the add button.

itemArray

Type

property

Syntax
get the itemArray of widget
set the itemArray of widget to pButtonArray
Summary
The itemArray is all the collective data of the icons and labels of the buttonbar
Parameters
Name Type Description
pButtonArray An array containing all the buttonbar data:
Description

The is a numerically keyed array, each element of which contains
an array describing the label and icons of the navigation item at that index.

The structure of the is:

{ key (integer): The index of the navigation item
    value (array): The array containing the data for the item at this index
    { key : "label"
        value (string): The label of this item
        key : "name"
        value (string): The name of this item
        key : "icon_name"
        value (string) : The name of the icon to display when the item is not highlighted
        key : "hilited_icon_name"
        value (string) : The name of the icon to display when the item is highlighted
    }
}

Any individual keys (“label”, “icon_name”, “hilited_icon_name”) missing when
setting the will be added, and set to their defaults – “circle” for
the icons, and “New Item” for the label.

Note: Setting the to a non-numerically keyed array will cause an
error to be thrown

itemLabels

Type

property

Syntax
get the itemLabels of widget
set the itemLabels of widget to pLabels
Summary
The labels displayed for the navigation items
Parameters
Name Type Description
pLabels A comma delimited list of labels.
Description

The display labels for button items of the widget. Adding an item to the

causes a new button item to be created with the default icon
and name.

**Note:** Removing an item from the does not cause the
corresponding item to be removed from the button items, but merely resets
it to the default label.