Using Radio Buttons
This tutorial shows you how to create and use a group of radio buttons.
Radio buttons usually occur in a cluster or group and mostly only allow you to select one of the buttons at a time. If you select a radio button in a group, all the other possible radio buttons are automatically unselected. This behavior is analogous to the way radio stations used to be selected by some analogue radios.
This tutorial shows you how to create a group of radio buttons and execute code with a particular button.
Creating a Group of Buttons
Start LiveCode and create a new stack by selecting New Stack from the File menu. Then start to create a group of radio buttons by dragging and dropping a number of radio button controls onto an area of the LiveCode stack (1). The position and alignment of the radio buttons is not important. Select each button in turn (2) and use the Property Inspector to update the properties of each button. The Property Inspector is launched by right clicking on the radio button you want to update and selecting Property Inspector. You may want to give each button a name in the Property Inspector (3). In this example, the radio buttons are called "Radio1", "Radio 2" and "Radio 3".
Where to add Code
There are a number of ways to add code to radio buttons and the place where you add the code is very much dependent on what you are trying to achieve. You can add code to each button, allowing each button to execute a particular set of instructions. You can add code to a group of radio buttons, allowing that group of buttons to execute a set of instructions that are specific to that group. You can add code to the card, that catches all button selections on a particular card, reacting to any group of buttons that you may have on a card.
This tutorial provides examples for adding code to button "Radio 1" and to the group in which the radio buttons are.
Adding Code to a Button
Right click on radio button "Radio 1" and select Edit Script. This opens the script editor, allowing you to write code that is specific to the button you selected. Add the following code:
on mouseUp answer "You pressed Radio button 1" with "Okay" end mouseUp
Click Apply to apply the code. This code waits for the mouseUp event for radio button "Radio 1" and opens a dialog box with the message "You pressed Radio button 1", when it is pressed.
This code is private to radio button "Radio 1" and is not executed by any other button.
Creating the Group
Before code can be added to the group of radio buttons, it is necessary to create a group with which the radio buttons are associated. This not only provides a logical unit for the radio buttons, it also indicates to LiveCode that the radio buttons belong together, allowing one radio button to be unselected when one other radio button is selected.
You create a group of radio buttons by selecting all of the radio buttons that are to appear in one group (1) by dragging over them with the mouse. Then select the Group button to create the group (2). The three selection boxes around the three radio buttons change to one large selection box that surrounds the radio button group.
Adding Code to the Group
Right click on the group you created in the previous step and select Edit Script. This opens the script editor, allowing you to write code that is specific to the group of button you created. Ensure you select the group, not the card or a radio button. To do this click on "Select Grouped" in the toolbar, then drag over the buttons.
If you have trouble selecting the group, you can also access it by opening the Project Browser (1) from the Tools menu, clicking on the expand icon (2) and clicking the tiny 0 opposite the group (3). The code editor for the group will open (4).
Add the following code:
on mouseUp answer "You selected" && the short name of target with "Okay" end mouseUp
This code waits for mouseUp events that are caused by controls in the group of radio buttons and opens a dialog box with the message: "You selected Radio 2" or "You selected Radio 3", depending on which button you selected. The message: "You selected Radio 1" is not raised because "Radio 1" has its own code that is executed when it is selected.
This code is private to the group of radio buttons.