Navigating Around a Stack

Most stacks and applications you create have more than one card, so how do you navaigate between cards in your stack.

Create a New Stack

Create a New Stack

Create a new mainstack from the File menu. Open the Property Inspector and name the stack 'Navigation'.

Add Cards to the Stack

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

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 Application Browser

Navigating in the IDE - Using the Application Browser

You can also move between cards using the Application Browser. The Application Browser contains a list of all open stacks, the cards in each stack, and the controls on each card.

You can access the Application Browser by choosing Application Browser from the Tools menu.

You can navigate to a card by double clicking it in the Application Browser. You can also open the Property Inspector for, or edit the script of any object.

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

Adding Navigation Buttons

Go to the first card in your stack and add a button, name it 'Next' using the Property Inspector.

Opening the Code Editor

Opening the Code Editor

Open the Code Editor for the 'Next' button by selecting it and clicking 'Code' in the Menu Bar. The code for the button is already populated with a mouseUp handler.

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

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 of the the button

on mouseUp

go to the next card

end mouseUp

Compile the script by clicking Apply(1). The indicator is green(2) to show you that the script has compiled with no errors.

Using the Button

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

on mouseUp

go to the previous card

end mouseUp

 

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"

0 Comments

Add your comment

E-Mail me when someone replies to this comment