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 mouseUp
Add the following code to "Button 2":
on mouseUp
answer "Default Button" with "Okay"
end mouseUp
Add the following code to "Button 3":
on mouseUp
answer "Rounded Button" with "Okay"
end mouseUp
Buttons 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.
Chris
How do you add an image to a button? (regular)
Hanson Schmidt-Cornelius
Hi Chris,
there is a tutorial in the LiveCode Resource Centre that answers this question and runs you through the required steps.
You can access the tutorial by opening LiveCode and selecting: "Help ->
Resource Centre".
This opens a new window. On the left hand side of the new window, navigate to: "Tutorials -> Graphical Interface -> Skinning"
Kind Regards,
Hanson
Wouter
I think the code for Button 1 and Button 3 has to be interchanged. Kind regards.
Elanor Buchanan
Hi Wouter, thanks for pointing this out. The lesson has been updated.
Kind regards
Elanor
Linda
The link above, in the "Further Reading" section to "Using Radio Buttons", is broken.
Matthias Rebbe
Hi Linda, thanks for mentioning this. Link was fixed.
Regards,
Matthias
vanlb
how do you call or execute a program upon clicking a button? like if you have button that says, "Open CMD", "Open Paint", etc... how do you point/link that button to a program/exe ?
Elanor Buchanan
Hi vanlb
You probably want the launch command e.g.
on mouseUp
launch "mspaint.exe"
end mouseUp
You can find more details on the Dictionary entry for the launch command. You might also find the launch document command useful.
I hope that helps.
Elanor