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

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 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 Application 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).

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'(1) 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. 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

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

on mouseUp
	go to the next card
end mouseUp

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

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"

24 Comments

Liz

I have two cards in a program. I have a button on the first page and a scrolling field on the second one (which I named inputContents). If I bring up a message box and enter "put "this is a test" into field inputContents" while on the card with the scrolling field, it works fine. If I try to do it on the page with only the button, it gives me the following error:
Message execution error:
Error description: Chunk: no such object
Hint: inputContents
I can fix this by making the button on the first page go to the next card, but I would like to avoid that. Is there a way to direct the program to look at the next card for the inputContents field?

Hanson Schmidt-Cornelius

Hi Liz,

yes, you can do that. With this kind of instruction, LiveCode assumes that you are referring to data on the card that is currently visible. So in order for your instruction to work with other cards, you have to specify on what card the scrolling field exists. You can use the card ID of the second card, but I would recommend changing the name of the second card to something like "card 2". Right-click on the card and select "Card Property Inspector" to change the name of the card. You would then write the following syntax to populate the scrolling field:

put "this is a test" into field "inputContent" of card "card 2"

Kind Regards,

Hanson

Tim

Hi, I'm just starting to work with your software tutorials before I even download the programming environment because I'm not at home. I just have a quick question. When you add cards to the stack, I take it the cards are windows? I mean, why not just add controls to the stack itself if I only want to use one window in a program? Sorry, I come from a VB programming environment..
Tim

Hanson Schmidt-Cornelius

Hi Tim,

of course, there are many LiveCode applications that only use a stack with one card, but it really depends on the application you are implementing. LiveCode uses the concept of a stack of cards, similar to a stack of playing cards.

Imagine that you could add a number of different buttons, fields, scrollers ... to each card. You can then move to another card with a totally different arrangement of buttons, fields, scrollers ... in the same application.

This would be very useful if you were to create an application like an interactive story book for children with pictures and features they could interact with. It could also be used for a test framework in which you may want to validate certain features in an application you are writing. Each card could contain one test.
There are many other applications that benefit from the stack of card concept. Once working with this concept, it allows you think the development of applications in a very different way.

Kind Regards,

Hanson

Pierre

Hi,

How do I pass parameters between cards? My first card logs the user in and I would like to make use of that in the next cards. Do I have to declare global variables or can pass the parameters between cards: e.g. get card(1).txtUsername

Thanks,
Pierre

Hanson Schmidt-Cornelius

Hi Pierre,

yes, you could use global variables, but you could also use something called "Custom Properties". You can find more on this topic under the same named heading on this page: http://lessons.runrev.com/m/4071

The syntax for launching a dialog with custom property from another card would be something like:

answer the cCustomPropertyVariableName of card "loginCard".

Where "cCustomPropertyVariableName" is an arbitrary variable name you may use to store a value on a card, and "loginCard" is an arbitrary name of the card on which the variable is stored.

Kind Regards,

Hanson

Mike

I am having problems using the go to card command between stacks. I am able to make buttons that go to cards within the same stack, but as soon as I try to go to a card in a different substack the command does not work. I do not get any kind of an error, it just doesn't go.

Any suggestions would be greatly appreciated from a newbie.

Hanson Schmidt-Cornelius

Hi Mike,

you did not post the syntax you were using in your comment, so I can only assume that something was not quite right there. You should be able to go to a card on a different stack. Try something like the following:

go card of stack

Kind Regards,

Hanson

ab

It is not clear if one should use:

go to the next card

Or

go to next card

Both are working by the way.

Hanson Schmidt-Cornelius

Hi ab,

LiveCode is a forgiving language and it allows you to achieve the same goal in different ways. This is one good example. As you point out, both versions work, and both version are legal. Use the form that suits you best.

Kind Regards,

Hanson

lorie

Hi there

First, thanks for the tutorial,
I got one question, can i give the cards name so we can revere to them by name instead by number?
like screenOne, screenTwo instead of card1 and card2?

Hanson Schmidt-Cornelius

Hi Lorie,

sure. You can open the "Property Inspector" for the cards you want to rename and give them the names you want them to have.

When you refer to them or navigate to them you can then use their names.

For example: go to card "screenOne"

Kind Regards,

Hanson

Adam

How would I move to a new card after a specific length of time without user input.

Its for a splash screen, so after 3 seconds I am looking to move on to a new card, i.e. go to card "login" after 3 seconds

Hanson Schmidt-Cornelius

Hi Adam,

you can use the wait command:

wait for 3 seconds
go to card "login"

Kind Regards,

Hanson

franco

Hi,
one of the options for navigation is
< go to card "main menu" >
"main menu" I suppose, is a default keyword...... or not?
because I have no effects using this option.

Kind Regards
franco

Elanor Buchanan

Hi Franco

This just an example, if you had a card and you had set its "name" property to "main menu" you could use this line to navigate to it, "main menu" is not a LiveCode keyword, the name of a card.

You can "go" to a card using its name, number id property, or by its positione e.g.first, last, next.

I hope that helps.

Kind regards

Elanor

Yaman

I have a qwestion,if you have a field and a push button how can you make it where you type a specific thing in the field and then it will take you to a card?

Elanor Buchanan

Hi Yaman,

You can check the contents of the field in the button script and then go to a card if the text matches. Something like this should work.

on mouseUp pMouseButton
if field "entry" is "menu" then
go to card "home"
end if
end mouseUp

I hope that helps.

Kind regards

Elanor

Olivier

Hi,
The View menu works well (go to the first card, go the previous card, go to the last card etc.) but keyboard shortcuts do not work. Have you ever encountered this problem ?
(MacOS 10.12.6 Sierra with LiveCode 8.1.9)
Kind Regards

Elanor Buchanan

Hi Olivier

We've done some testing here and can't recreate the issue, is it a particular shortcut that doesn't work or is it all of them? One thing that might affect the keyboard shortcuts is if you have custom settings in the System Preferences. If you can let us know we can look into it a bit more.

Kind regards

Elanor

Olivier

Hi Elanor

Thanks for your response.The concerned shortcuts are the numeric ones (cmd-0 to cmd-9). The shortcuts with letters (cmd-m, cmd-t...) are OK. Trying with another keyboard give the same result. But the numeric shortcuts work in others applications like Vienna. I work at the same time with an older Mac (10.11.6 with LiveCode 6.5.0) and all is OK. Maybe my stacks created with various LC versions under LC 6 are now too old for LC 8.1.9 (successive conversions problem ?).

Kind regards

Olivier

Elanor Buchanan

Hi Olivier, could you test this with a new stack created in 8.1.9, just a simple stack with 3 cards or so? Then we will know if it is related to the version the stack was made with.

Thank you.

Elanor

Olivier

Hi Elanor, I have the same problem with the shortcuts in a new stack in 8.1.9.
Kind Regards.
Olivier

Elanor Buchanan

Hi Olivier, unfortunately we still can't recreate this issue but we the Development Team are aware of it and will look into it further.

Thanks for reporting it.

Kind regards

Elanor

Add your comment

E-Mail me when someone replies to this comment