Using Buttons
This tutorial introduces the concepts of buttons and default buttons to you.
Introduction
Buttons are fundamental entities that allow you to interact with devices, for example with mechanical buttons on a keyboard or a remote control, or graphical buttons on a touch sensitive computer display. This tutorial looks at how to use buttons to interact with a LiveCode application.
Creating the Buttons
Start LiveCode and open a stack window by selecting New Stack from the File Menu. Then drag and drop a Rectangle Button (1), a Default Button (2) and a Push Button (3) onto the card. You can space these buttons out as you like. Then rename the buttons from left to right "Button 1", "Button 2" and "Button 3". You can rename the buttons by right clicking on a button and selecting Property Inspector (4). This opens a new dialog box. Make sure that Basic Properties is selected in the tabs across the top. Then change the name in the "Name" field (5). You can also view the types of buttons that are available to you in the style drop down list (6). For this example it is not necessary to select any other button types from the drop down list.
Adding the Code
Once you have created the button controls on the card and renamed them, you can add code to each button. Right click on each button and select Edit Script, this opens the script editor with two default lines of code:
on mouseUp
end mouseUp
mouseUp is a handler that is called each time a button receives a mouse event. You can populate the area between on mouseUp and end mouseUp, in order to provide functionality to the buttons.
Add the following code to "Button 1":
on mouseUp
answer "Square Button" with "Okay"
end mouseUpAdd the following code to "Button 2":
on mouseUp
answer "Default Button" with "Okay"
end mouseUpAdd the following code to "Button 3":
on mouseUp
answer "Rounded Button" with "Okay"
end mouseUpButtons in Action
All of the button that were created in this tutorial can be selected with the mouse, but "Button 2" also acts as a default button, allowing it to be selected using the Enter or Return keys on a keyboard. This is a useful feature that is often used in installers or applications that lead you through a sequence of steps that have a default option. In this case the user would not have to select a particular button each time a new step was presented but could rapidly run through all pages by pressing the Enter or Return key for each screen or step. The LiveCode application you created operates in a similar way. Try pressing the Enter or Return key and see how "Button 2" is pressed, a dialog appears and "Okay" is pressed. This loop of pressing "Button 2" a dialog appearing and pressing "Okay" can continue indefinitely.
Further Reading
If you are interested in more information on using buttons, then have a look at the tutorial Using Radio Buttons.
How do you add an image to a button? (regular)