Using Buttons and Default 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 Mainstack 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 from the drop down list of the new dialog box. 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 tutorial Using Radio Buttons.

4 Comments

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

Add your comment

E-Mail me when someone replies to this comment