Using Widgets

Widgets were introduced in LiveCode 8. Widgets add extensibility to the LiveCode control set by allowing anyone to create new, atomic controls for LiveCode. Widgets are more stable and efficient than custom controls created using groups. Widgets are also simple to install and use in LiveCode.


Widgets can be simple or complex and can provide a wide range of features and functionality.

You will see your set of widgets, both built-in and user installed, at the top of the Tools Palette.

Adding widgets to your stack

In this example we will add an SVG widget.

  1. Create a new mainstack
  2. Drag an SVG widget to the stack
  3. Drag the widget out to make it larger
  4. Open the Property Inspector for the widget
    1. Choose a preset path
    2. Set the rotation to 30
    3. Got to the Colors pane and set the Hilite color

Each widget will have a unique set of properties, defined by the developer who wrote the widget. There is a set of basic properties that all widgets have including name, visible, disabled, left, top, right, bottom, layer, textFont, textSize and some others.

Widget Messages

Like classic controls, widgets also receive and can respond to messages. The messages that a widget receives are defined by the developer.

The SVG widget responds to mouseUp, but does not have any custom messages.

Open the Script Editor for the widget. You will see it has a default mouseUp handler which toggles the hilited state of the widget.

on mouseUp
   -- Toggle the hilited property when clicked
   set the hilited of me to (not the hilited of me)
end mouseUp

Switch to Run mode and test it. The SVG widget should change color, from the normal color to the hilited color and back, when you click it and the hilited property toggles.

Including Widgets in Standalones

You need to make sure any widgets you use in your stack are included when you build a standalone.

If you leave your Standalone Application Setting on "Search for required inclusions" any widgets you used should be automatically included.

If you use "Select inclusions" make sure you go to the Inclusions pane and tick any widgets you want to include.

Widget Documentation

The documentation for widgets is included in the Dictionary.


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.