LessonsIntermediate: Stacks, objects and dataLesson 26

Buttons and menus

The many kinds of button in the Tools palette: push buttons, check boxes and radio buttons, and the menus a button can be, from option menus to tabs.

  • Intermediate
  • Lesson 26 of 83
  • About 12 minutes
  • 12 examples

A button of every kind

The Tools palette has a tile for each common kind of button: Standard Button, Rectangle Button, Default Button, Check Box, Radio Button, and the menus, Option Menu, Pulldown Menu, Combo Box, Popup Menu and Tab Panel. They are all the same kind of object, a button, and its style property (Style in the Inspector's Basic section) decides what it is: change the style and a push button becomes a checkbox.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Standard Button, a Rectangle Button, a Check Box and a Radio Button into a column, each about 180 points wide.
  2. Name them standard, rectangle, checkbox and radio.
Message BoxType each line in the Message Box and press Return
put the style of button "rectangle"
put the style of button "radio"
create button "roundrect"
set the style of it to "roundrect"
set the rect of it to 40,212,220,244
put the number of buttons
Message Box (what each put shows)
rectangle
radiobutton
5
Your card as the OXT-Beyond engine draws it
Your card: a column of buttons of different styles, a standard button, a rectangle, a checkbox, a radio button and a rounded button, each labelled with its name.

A style reads back in lower case, whichever way it was written: radioButton and radiobutton are the same style. The last lines make a button style the palette has no tile for: a rounded one. You could make it by hand too, from a Standard Button, by choosing roundrect as its Style in the Inspector.

Check boxes and hilite

A check box is on or off, and its hilite says which. Clicking it in Run mode turns it on and off by itself (its autoHilite is true), and a script can read or set it.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag two Check Boxes, one under the other, and make each about 280 points wide.
  2. Name them Send me the newsletter and Remember me. The name is what a check box shows beside its box.

Give the first one this script, and click it three times in Run mode:

ScriptThe script of button "Send me the newsletter", then in Run mode click it 3 times
on mouseUp
   put the hilite of me
end mouseUp
Message Box (what it shows after each click)
true
false
true
Your card as the OXT-Beyond engine draws it
Your card: two checkboxes: Send me the newsletter, ticked, and Remember me, not ticked.

By the time mouseUp arrives, the box has already changed, so the handler sees the new state. A script sets it the same way:

Message BoxType each line in the Message Box and press Return
put the hilite of button "Remember me"
set the hilite of button "Remember me" to true
put the hilite of button "Remember me"
Message Box (what each put shows)
false
true

Radio buttons

Radio buttons offer a choice of one. Put them in a group whose radioBehavior is true (the Inspector's Hilite one radio button at a time, which a new group has already): choosing one then un-chooses the others, and the group's hilitedButtonName says which is on.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag three Radio Buttons into a column, and name them Small, Medium and Large.
  2. Select all three and choose Object > Group Selected. With the group selected, name it Size in the Property Inspector.

One handler in the group's script hears every radio button in it. Give it this one, then click Medium and then Large:

ScriptThe script of group "Size", then in Run mode click button "Medium", then button "Large"
on mouseUp
   put the hilitedButtonName of me
end mouseUp
Message Box (what it shows after each click)
Medium
Large
Your card as the OXT-Beyond engine draws it
Your card: three radio buttons, Small, Medium and Large, with Large chosen.
Message BoxType each line in the Message Box and press Return
set the hilitedButtonName of group "Size" to "Small"
put the hilite of button "Small"
put the hilite of button "Large"
Message Box (what each put shows)
true
false

A button with the style menu shows a menu, and its menuMode says which kind: option (a pop-up list that shows the choice), comboBox (a list you can also type into), pulldown, popup and tabbed. The lines of the button's text are the menu's items: the Inspector calls them Menu Items.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag an Option Menu and name it Colour.
  2. In the Property Inspector's Basic section, replace its Menu Items, Choice 1 to Choice 3, with Red, Green and Blue, a line each.
Message BoxType each line in the Message Box and press Return
set the menuHistory of button "Colour" to 2
put the label of button "Colour"
put the menuHistory of button "Colour"
Message Box (what each put shows)
Green
2
Your card as the OXT-Beyond engine draws it
Your card: an option menu showing Green, its chosen item.

the menuHistory is the number of the chosen item, and the button's label shows its text. Until something is chosen the label still says Choice 1, from the palette.

When the user picks an item, the button gets the message menuPick, with the item's text as its parameter. Give the menu Colour this script, and in Run mode choose Blue:

ScriptThe script of button "Colour"
on menuPick pItem
   put "You picked" && pItem
end menuPick

Setting the menuHistory from a script sends menuPick too, as if the user had chosen:

Message BoxType each line in the Message Box and press Return, with the script above in place
set the menuHistory of button "Colour" to 3
Message Box (what each put shows)
You picked Blue

A menu's script usually has one menuPick handler with a switch on pItem, one case for each item.

Tabs

The palette's Tab Panel is a button whose menuMode is tabbed: it draws a row of tabs, one for each line of its text. Picking one sends menuPick, and the script shows the controls that belong to that tab (often a group for each) and hides the others.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag a Tab Panel, make it nearly as big as the card, and name it Settings.
  2. Replace its Menu Items, Tab 1 to Tab 3, with General, Display and Advanced.
Message BoxType each line in the Message Box and press Return
set the menuHistory of button "Settings" to 2
put line (the menuHistory of button "Settings") of the text of button "Settings"
Message Box (what each put shows)
Display
Your card as the OXT-Beyond engine draws it
Your card: a tab panel whose tabs read General, Display and Advanced, with Display chosen.

Enabled, disabled and default

A button that cannot be used right now should say so: set its enabled to false (or disable it, or tick Disabled in the Inspector) and it greys out and ignores clicks. The default button of a dialog, the one Return presses, is drawn with a heavier outline on some systems: the palette's Default Button is a Standard Button with default already true.

Build it with the Tools palette and the Property Inspector
  1. On a new card, drag two Standard Buttons side by side and name them Save and Close.
Message BoxType each line in the Message Box and press Return
set the enabled of button "Save" to false
put the enabled of button "Save"
enable button "Save"
disable button "Save"
put the disabled of button "Save"
Message Box (what each put shows)
false
true
Your card as the OXT-Beyond engine draws it
Your card: two buttons side by side: Save, greyed out, and Close.

Try it yourself

On a new card, drag an Option Menu named Pizza with the items Margherita, Funghi and Diavola, and a Check Box named Extra cheese. Write a menuPick handler for the menu that puts the order, such as Funghi with extra cheese when the box is ticked. Then tick the box, and pick Funghi.

Build it with the Tools palette and the Property Inspector
  1. Drag an Option Menu, about 200 points wide, name it Pizza, and make its Menu Items Margherita, Funghi and Diavola.
  2. Drag a Check Box under it, about 200 points wide, and name it Extra cheese.
Show a solution
ScriptThe script of button "Pizza"
on menuPick pItem
   if the hilite of button "Extra cheese" then
      put pItem && "with extra cheese"
   else
      put pItem
   end if
end menuPick

To try it from the Message Box instead of the mouse:

Message BoxType each line in the Message Box and press Return, with the script above in place
set the hilite of button "Extra cheese" to true
set the menuHistory of button "Pizza" to 2
Message Box (what each put shows)
Funghi with extra cheese
Your card as the OXT-Beyond engine draws it
Your card: an option menu showing Funghi and a ticked checkbox labelled Extra cheese.

Words in this lesson

buttonstylehilitecheckboxradioButtonradioBehaviorhilitedButtonNamemenuModemenuHistorymenuPicklabelenableddefaultCheck BoxRadio ButtonOption MenuTab Panel

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