Navigating Around a Stack
Most stacks and applications you create have more than one card, so how do you navigate between cards in your stack?
Create a New Stack
Create a new stack from the File menu. Open the Property Inspector by double clicking the stack, and name the stack 'Navigation' in the name field (1).
Add Cards to the Stack
Add an additional card to the stack by selecting 'New Card' from the Object menu. Do this twice so you have a stack with 3 cards.
You will notice that the title bar of the stack now says 'Navigation (3)'. This is to tell you that you are on card 3 of the stack.
Navigating in the IDE - Using the View Menu
While you are developing you can change between cards in your stack using the View menu.
There are options to go to the first card, go the previous card, go to the last card etc. There are also keyboard shortcuts for these options.
Try them, notice that the number shown in the title bar of the stack changes to show you which card you are on. So if you choose 'Go First' the number will change to 1 as you will be on the first card.
Navigating in the IDE - Using the Project Browser
You can also move between cards using the Project Browser. The Project Browser contains a list of all open stacks, the cards in each stack, and the controls on each card.
You can access the Project Browser by choosing Project Browser from the Tools menu.
Expand your view by clicking on the + icon next to Navigation (1)
You can navigate to a card by double clicking it in the Project Browser (2).
You can also edit the script of any object (3).
Navigating Using Objects and Scripts
When you build your application into a standalone, whether for desktop or mobile, your users won't be able to navigate around the stack as described above so you need to provide ways for them move between cards.
You can do this by adding objects to your stack and adding LiveCode scripts to those objects that will change the current card.
Adding Navigation Buttons
Go to the first card in your stack and add a button, name it 'Next'(1) using the Property Inspector.
Opening the Code Editor
Open the Code Editor for the 'Next' button by selecting it and clicking 'Code' in the Menu Bar. You can type "on mouseUp" here and it will automatically add "end mouseUp", or you can select "mouseUp" from the list of possible handlers on the left.
The mouseUp message is automatically sent by LiveCode when a button is clicked. While developing you need to be in 'Run' mode for this message to be sent.
Adding a Script to a Button
In order to make something happen when the button is clicked we need to tell the application what to do when it receives the mouseUp message, in this case we want to go to the next card. Using LiveCode's English like script add a line to the mouseUp handler (1) of the the button
go to the next card
Compile the script by clicking Apply(2). The indicator is green(3) to show you that the script has compiled with no errors.
Using the Button
To see if our script works switch to 'Run' mode and click the 'Next' button. You should see that we move to card 2.
Completing the Stack
Now all you need to do to allow the user to navigate around the stack is add 'Next' buttons to all the cards. You can also add 'Back' buttons which take you to the previous card. The script of a 'Back' button would be
go to the previous card
Other Options for Navigation
As well as going to the 'next' or 'previous' card you can go to a specific card by giving its name, number or id.
go to card "main menu"
go to card 2
go to card id "1004"