How do I move between cards in my stack?

When creating a LiveCode application you will usually want to be able to move between the cards in your stack, in this lesson we will see how to do this.

Example Stack

Example Stack

For this lesson we will use a very simple example stack made up of three cards.

Create a new stack from the File Menu and add 2 additional cards using the New Card item in the Object menu. If you open the Project Browser from the Tools menu you will be able to see the 3 cards in your stack.

You can name the cards using the card inspector, for this example I have also added a number field to each card so we can see which card we are on as we develop the application. I unchecked opaque and show border for this field, used the Text tab to increase the text size to 24, and centered it.

Adding navigation buttons

Adding navigation buttons

Now we will add "Back" and "Next" buttons to each card. These will allow us to navigate between card. Drag 2 buttons on to the card from the Tools Palette and name them "Back" and "Next".

We will need to add these buttons to each card. Right click on a button, and copy it.  Double clicking a card in the Project Browser will take you to that card, so double click on card 2 in the Project Browser, and then use right click again to paste the button using "Paste Objects".

Scripting the navigation buttons

Scripting the navigation buttons

Now we need to add some LiveCode to the buttons so that we can move between cards. Right click on the "Next" button (1) on card 1 and open the script editor (2). Set its script (3) to:

on mouseUp

  go to the next card

end mouseUp

similarly the script for the back button is

on mouseUp

  go to the previous card

end mouseUp

Now try clicking the "Next" button, you should move to card 2.

Now add the same scripts to the other buttons.

Adding checks for the first and last card

Adding checks for the first and last card

What if we are on the first card and we try to go back, or the last card and we try to go next. We will set the buttons to disabled as appropriate.

Move to the first card and select the "Back" button, open the Property Inspector for the button and tick the Disabled property. The button is visible, which is good for layout consistency across the cards, but it is inactive.

Now move to card 3, we know this is the last card so in this case we want to disable the "Next" button.

Disabling a button in script

If you do not want to manually set the disabled status of all your buttons you can check what status the should have in the card script instead. For example if you want to check whether you are on the first card and therefore the "Back" button should be disabled you can use this script in the card script.

on preOpenCard

if the number of this card is 1 then

disable button "back" of me

end if

end preOpenCard

You can use a similar script to check if you are on the last card.

Using groups

This is a good example of a case where you might want to use the same controls over multiple cards, for example the "Back" button, "Next" button and card number field. This means you only need to write the script once and any changes you make are applied to all cards. For more information on this see the lesson How do I use the same controls on multiple cards?

3 Comments

Nick

Thanks for all the help, I just have a question that I can't find the answer to.

I would like the user to go to a page "notes" make their notes then be able to go to the previous card they came from. Putting previous card obviously just takes them to the previous card in the list not the card from where they came from. I was thinking "go to last card" or something similar but nothing appears to work.

Thanks.

Elanor Buchanan

Hi Nick

I think what you are looking for is the "recent" keyword. If you do

go to recent card

it will take the user to the previously visited card.

I hope that helps.

Kind regards

Elanor

Nick

Thanks Elanor!
That's exactly what I was looking for.
Thanks again.

Add your comment

E-Mail me when someone replies to this comment