Switches, choices and colours · Lessons

A card of choices

Classic buttons can be radio buttons and check boxes (Buttons and menus), but phones and today's programs have taught people other shapes for choosing: a row of segments, a switch that slides, a swatch of colour. These are widgets (Using extensions), and they are dragged onto a card from the Tools palette like any control. Build a card that styles a line of text:

Build it with the Tools palette and the Property Inspector

Make a new stack, or go to an empty card. In Edit mode, scroll the Tools palette down to its widgets and drag a Segmented Control to the top left of the card. Double-click it, name it Size, and in its Property Inspector set the labels of its three segments to Small, Medium and Large.
Drag a Switch Button under it, and name it Bold.
Drag a Color Swatch to the right of the switch, and name it Ink.
Drag a classic Field across the card under them, name it Sample, and type Hello there into it.

One of a few: the Segmented Control

A Segmented Control is a row of buttons joined into one, of which one is lit, like radio buttons that take less room. Each segment has a label, the word the reader sees, and a name, for scripts. hilitedItems is the number of the lit segment, and hilitedItemNames its name:

Your card: Small, Medium and Large in a row of segments at the top, Medium lit; under it a switch, turned off, and a colour swatch of pale, see-through green; and the field with Hello there.

The names are made up for you as segment1 and so on; give them names of your own in the Property Inspector when a script will use them. A click on a segment lights it and sends hiliteChanged, and so does setting hilitedItems from a script. Put this in the Segmented Control's script:

ScriptThe script of widget "Size"

on hiliteChanged
   set the textSize of field "Sample" to item (the hilitedItems of me) of "12,20,32"
end hiliteChanged

In Run mode a click on Large makes the text big. The Message Box can do the same:

Your card with Large lit at the top right of the segments, and Hello there in big letters in the field.

A widget sends its messages once the script that changed it has finished, not at the moment it changes, so the handler has not run yet on the line straight after the set. wait 0 milliseconds with messages lets the message through first. A script that changes a widget and then needs what its handler did must do the same; lines typed into the Message Box one at a time each finish before the next, so there it happens by itself.

Set multipleHilites to true and any number of segments can be lit at once, like check boxes, with hilitedItems a list such as 1,3. Set itemStyle to icons and the segments show itemIcons instead of words, as the Property Inspector's own text alignment does.

On or off: the Switch Button

A Switch Button is a check box that slides. Its highlight is true when it is on. A click turns it over and sends hiliteChanged; setting its highlight from a script does not, so send the message too when a script should act as a click. Put this in the switch's script:

ScriptThe script of widget "Bold"

on hiliteChanged
   if the highlight of me then
      set the textStyle of field "Sample" to "bold"
   else
      set the textStyle of field "Sample" to "plain"
   end if
end hiliteChanged

Your card with Medium lit, the switch turned on, and Hello there in bold, middle-sized letters.

A colour: the Color Swatch

A Color Swatch shows a colour, its swatchColor: red, green, blue and an alpha, how solid it is, each from 0 to 255. It does not choose a colour by itself: a click sends it mouseUp, and its script asks with answer color, the system's colour picker (Dialogs). Put this in the swatch's script:

ScriptThe script of widget "Ink"

on mouseUp
   answer color with item 1 to 3 of the swatchColor of me
   if it is empty then exit mouseUp
   set the swatchColor of me to it
   set the textColor of field "Sample" to it
end mouseUp

it is empty when the person cancels, so the colour stays as it was. A script can set the swatch's colour as any property:

Your card with a dark red colour swatch, and Hello there in the same dark red.

A gradient's colours: the Gradient Ramp Editor

A gradient, a colour that fades into others across a graphic (Graphics and images), has stops: at each point along it, a colour. The Gradient Ramp Editor is the strip the Property Inspector shows for a gradient, where the stops can be dragged and recoloured. Its gradientStops are a line a stop, its place from 0 to 1 and then its red, green, blue and alpha, which is how a graphic's fillGradient["ramp"] holds them too:

A strip from orange through yellow to teal at the top of the card, with a scale from 0 to 100 and a marker under each of its three stops, and a rounded box below it filled with the same gradient from left to right.

When someone drags a stop, the editor sends gradientStopsChanged; a handler of it that copies the stops to the graphic, as the last line here does, makes a live gradient designer.

Please wait: the Spinner

The Spinner is a ring of marks that turns for as long as it is shown, the sign that a program is busy. Show it before something slow and hide it after; markerCount is the number of its marks. It only turns while the program waits with messages, so in a long loop of your own, wait 0 milliseconds with messages now and then lets it move:

ExampleRun it in the playground

create widget "Busy" as "com.livecode.widget.spinner"
set the rect of it to 220, 160, 260, 200
set the markerCount of it to 12
show widget "Busy"
put 0 into tTotal
repeat with tIndex = 1 to 100000
   add tIndex to tTotal
   if tIndex mod 10000 is 0 then wait 0 milliseconds with messages
end repeat
hide widget "Busy"
put tTotal
put the visible of widget "Busy"

Output

5000050000
false

Try it yourself

Write a command makeChoice that takes a name and a list of labels, such as "Tea,Coffee,Water", and makes a Segmented Control with that name and one segment a label, with the first one lit.

Show a solution

A row of four segments at the top left, Tea, Coffee, Water and Juice, with Tea lit.

Words in this lesson

widgetSegmented ControlitemLabelsitemNameshilitedItemshilitedItemNamesmultipleHiliteshiliteChangedSwitch ButtonhighlightColor SwatchswatchColoranswer colorGradient Ramp EditorgradientStopsfillGradientSpinner

Each one finds every lesson that uses it. The Dictionary has the whole story of each, with its syntax and more examples.