How do I use the same controls on multiple cards?

This lesson will show you how to share one set of controls across multiple cards. Using the same controls on multiple cards makes it much easier to make changes as you only have to update the controls in one place.

The Stack

The Stack

Here is a stack that has two cards. We are currently looking at card 1. Each card displays a single image (1) and has some navigation controls to move from one image to another (2).

The buttons have simple scripts that just navigate to the card that houses the image.

Navigate to Card 2

The problem is that the navigation controls are only on card 1. By navigating to card 2 by selecting the View > Go Next menu item you can see that the navigation controls are not on card 2.

Using Groups to Share Controls

Using Groups to Share Controls

One approach to having the navigation controls show up on two cards would be to copy and paste the controls. While this might look right it creates a problem if I want to modify the navigation controls later on as I will have to update the controls on every single card!

Fortunately LiveCode provides a better way. With LiveCode you can share controls across multiple cards by using groups.

Grouping controls is easy. With the Edit tool active, just drag over the controls that you want to be in the same group. Here you can see that I've selected all of the navigation controls. Click on "Group" in the menubar.

Group Controls from the Menu

Group Controls

You can also do this from the main menu. With the controls selected select the Object > Group Selected menu item. This will place all of the controls into a single group.

You can view your new group in the Project Browser. Open this from the Tools menu and you can see the group displayed (id 1010 in the screenshot above).

Name The Group

Name The Group

Initially the group doesn't have a name. It is a good idea to name the group for identification purposes. Double click or right click on the group to bring up the Property Inspector for it, and name it. I have named the group MyControls.

Place Group on Other Cards

Place Group on Other Cards

Currently the group only exists on card 1. Now it is time to place the group on card 2. Go to card 2 using View->go next.

With card 2 showing, select the Object > Place Group > MyControls menu item. Placing a group on a card adds a shared instance of the group to the card rather than making a copy.

Now the navigation controls appear on card 2 as well.

Modify Group

Modify Group

Since the group is being shared between card 1 and card 2, updating the group will update it on all cards. For example, here you can see that I have changed the color of the background, and moved the group to the center of the card.

If I go back to card 1 you can see that the color and position have been updated!

Now that you know how to share controls you should read up on the backgroundBehavior property. The backgroundBehavior property of a group affects whether or not it is added to new cards you create and where in the message hierarchy the group's script is placed.

0 Comments

Add your comment

E-Mail me when someone replies to this comment