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.
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
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
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
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.
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?