This tutorial introduces the concepts of buttons and default buttons to you.
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:
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.
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)
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 ->
This opens a new window. On the left hand side of the new window, navigate to: "Tutorials -> Graphical Interface -> Skinning"
I think the code for Button 1 and Button 3 has to be interchanged. Kind regards.
Hi Wouter, thanks for pointing this out. The lesson has been updated.
The link above, in the "Further Reading" section to "Using Radio Buttons", is broken.
Hi Linda, thanks for mentioning this. Link was fixed.
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 ?
You probably want the launch command e.g.
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.