Using Option Menus

This tutorial describes how to use the option menu for selecting an item from a list of items.

Introduction

The option menu is a configurable list of a fixed number of items from which you can select an item. For example, you may want to use this kind of menu when selecting the title someone has, or the color of paint when you are buying a new car. In this tutorial we cover how to set up an option menu and return the value someone selected.

Creating the Option Menu Control

Open LiveCode and select New Mainstack from the File menu. This creates a new stack window on which to create the option menu. Drag and drop an option menu control onto the LiveCode card (1). By default, this control has three values from which you can select an item. Open the Property Inspector by right clicking the option menu and selecting Property Inspector (2). In the Basic Properties view, you can change the name of the Label to a default value that is displayed when the option menu is first displayed. You can also change the Menu Items (3) to the values that should be selectable from the list of items.

In this example we are setting the Label to "cat", and the Menu Items to "cat", "dog", "mouse", "elephant", "whale" and "crocodile".

Adding the Option Menu Code

Once you have specified the options that are to be displayed in the option menu, you can add the code that processes the selection. Right click on the option menu you created and select Edit Script (1). This opens the script editor with four lines of default code, as is shown in the figure above. The code provides you with a handler that is called when someone makes a selection, and a framework that allows you to process the selected item. The switch statement provides you with the means to identify what item was selected from the options menu.

Processing the Selection

In order to process the selections from the list, it is necessary to expand the case statement in the default code. In this example the case statement creates small dialog boxes with information about each animal that is selected. Individual case statements are ended with break statements.

on menuPick pItemName

switch pItemName

case "cat"

answer "A cat is larger than a mouse." with "Okay"

break

case "dog"

answer "A dog is man's best friend." with "Okay"

break

case "mouse"

answer "A mouse does not only eat cheese." with "Okay"

break

case "elephant"

answer "An elephant has a good memory." with "Okay"

break

case "whale"

answer "A whale is not a fish." with "Okay"

break

case "crocodile"

answer "A crocodile is reptile." with "Okay"

break

end switch

end menuPick

Also notice the way the items are displayed (1). Only five of the possible selections are displayed on the screen. This is because Display in the Property Inspector is set to 5. Try changing this value and see if you can make the scroll bar disappear.

0 Comments

Add your comment

E-Mail me when someone replies to this comment