Properties

In order to make a widget useful to end users it is likely that you'll want to expose properties that allow them to specify how your widget should behave.

To specify a property you must provide a name and the method to get and set the property .

property <name> get <variable/handler> set <variable/handler>

Now open the extension builder stack as shown above and click on the folder icon at the top right to load your .lcb file into the builder.

Click test. Your widget should be displayed on the new stack. If you can't see it, check behind the extension stack.

The simplest properties to get/set are numbers or strings. So lets create a circleMargin property that allows users to define a margin.

property circleMargin get mMargin set setMargin

In the above example, when the circleMargin property is requested, the variable mMargin is returned; when the property is set, the handler setMargin is called. To have a property linked directly to the value of a variable, simply provide the variable name.

There will be no other side effects - notably, a redraw will not automatically be triggered in the case that a variable name is used for a setter.

To process the value coming from and going into LiveCode Script, or to add side-effects when getting and setting properties, provide handler names. In our case we're defining a setter for the circleMargin property because we need to trigger a redraw when it is set.

private variable mMargin as Real

W e'll define a member variable to store the value for the margin. LiveCode Builder is typed so you must also specify the type of your variable. Remember, the canvas you are drawing to has subpixel precision so our margin is a real number rather than an integer.

For a full list of types available in LiveCode Builder please see the T yping section of the language specification guide.

We also suggest a naming convention for variables in the section on variable and case sensitivity . Finally we have to implement our setMargin handler.

public handler setMargin(in pMargin as Real) returns nothing put pMargin into mMargin redraw all end handler

Implementing the "setter" ourselves provides us with a little more flexibility . In this case when the property is set we want our pink circle to immediately redraw to reflect the property change.

We do this by calling "redraw all".

To test the property click "test" and from the message box set the property.

set the cicleMargin of widget 1 to 15