Using Radio Buttons

This tutorial shows you how to create and use a group of radio buttons.

Introduction

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 Mainstack 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. Then select a 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

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 does not only provide 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). Then select the Group button to create the group. 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. 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.

Comments (2)

Filip Wednesday Jun 26 at 04:20 AM

I typed the literal code as in the example:

"on mouseUp
answer "You selected" && the short name of target with "Okay"
end mouseUp"

but nothing is happening. Do I need to replace the && and/or the 'short name' with another text? Do I have to duplicate the text?

I am completely new to livecode, and so far the tutorials have been great, but it is sometimes confusing when you guys are talking about something, but do not specify what exactly needs to be done.

Thanks for the help,

Elanor Buchanan Thursday Jun 27 at 06:24 AM

Hi Filip

This code looks okay, the only thing I can see that might be wrong is the quote marks. If you have put " at the start and end of the code it won't work. Other than that it should be okay.

I hope that helps.

Kind regards

Elanor

Add your comment

E-Mail me when someone replies to this comment