How do I move between cards in my 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 Application Browser from the Tools menu you will be able or 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.

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, you can use the Application Browser to move between cards. Double clicking a card in the Application Browser will take you to that card.

Now we need to add some LiveCode to the buttons so that we can move between cards. Open the script of the "Next" button on card 1 and set its script 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.

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 visble, 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.

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.

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?