Using Tab Buttons

Upon completion of this tutorial, you should be able to:

•Create a tabbed button

  •Add one or more additional tabs to the tabbed button

  •Change the name of the tabs in a tabbed button

  •Script the tabbed button to navigate between cards using the selectedText function

  •Use a tabbed button to change content on a single card using the menuPick message and hide/show commands

•Reset the tabbed button to its initial selection state using menuHistory.

It is assumed that you are already familiar with the following:

  •Creating a stack

  •Creating additional cards/substacks

  •Naming cards

Attached Files

Creating Stack and Tabbed Control(s)

Creating Stack and Tabbed Control(s)

1.  Create a new revolution stack; name it and save it.  You should now have a stack consisting of a single card.

2.  Create a tabbed button control for your new stack by either double-clicking the tabbed button tool on the Tools palette or by click-dragging it to you stack; either should

result in the creation of a three tabbed button on your stack in which the tabs are assigned the generic names of Tab 1, Tab 2, and Tab 3.

 

Changing Tab Attributes

Changing Tab Attributes

3.  Now we'll learn how to both add tabs as well as rename the text that appears on each tab. To add tabs (as well as change their text), perform the menu command Object -> Object Properties:

The menu command Object -> Object Properties results in bringing up the Object Inspector for the tab button, where you can change the default text for the tabs as well as add additional tabs, as seen above.

The illustration above shows where to add and rename tabs; to follow along in recreating my sample stack,  rename Tabs 1, 2 & 3 to "Introduction", "Characters" and "Weapons" and add a fourth tab, "Spells" (only if you want to match the downloadable stack to which this lesson is linked).

4.  At this point, a brief discussion on the potential uses of a tabbed button may be in order.  A tabbed button can be used in Revolution to either navigate between panes (or, cards rather) or to change the information displayed on a single card (by using the hide and show  commands).   We'll start by demonstrating how to use a tab to navigate between cards (for my  example, it will navigate to different cards containing information on the mythical game of MIST).

 

 

Scripting the Tabbed Button to Navigate Between Cards

5.  The reason for changing the names of the various tabs is to make them match the names of the new cards we will be creating.  Basically, we will be creating a one-to-one correspondence between the card's name and the tab's name.  This isn't essential, but does allow you to write a much shorter script!  Open the script window of your tab by clicking on the tab, then performing the menu command Object -> Object Script, and then entering the following into the script editor window:

on mouseUp

get the selectedText of me -- gets user's choice

go card it -- it is the name of the tab, which in turn will also be the name of the appropriate card

end mouseUp

In the above script, the selectedText is the name of the particular tab that the user clicked on.  The selectedText is a function, not a property, which means it cannot be set, but instead returns a value. The process of "getting" it places it into the local variable it;.  Hence, when the next line commands "go card it" what that really means is 'go card "name of tabbed choice of user"'.

It's been pointed out to me that there's an even shorter way of doing this, namely:

on mouseUp

go cd value(the selectedline of btn "Tab Menu" )

end mouseUp

In the second example, the selectedLine function obtains the name of the tab that was clicked and sets it as the name of the card to which to navigate when the tab is clicked.

Giving the Tabs a Background Behavior as a Group of One

Giving the Tabs a Background Behavior as a Group of One

Wouldn't it be nice to do this just once, instead of doing it on each and every card?  To make this possible, we'll create a group of this tab button and give it background behavior so that it will appear on all subsequently-created cards.

4. Select the tab button (if it is not already selected) using the selection tool/author mode on the Tools Palette (the arrow with the little crosshairs).  Once it has been selected, turn it into a group by performing the menu command Object -> Group Selected.  

5.  Now it is time to give it background behavior so that it will appear on all subsequently-created cards in the stack.  To do so, we need to access its properties by using the menu command Object -> Object Properties; the menu command Object -> Object Properties results in the image above.  First, we should give our group some sort of obvious name other than "group ID 1004" and, secondly, we should check the box marked "Behave like a background".  This latter action will ensure that all subsequently-created cares will have this tabbed button/control automatically placed upon it.  Place a field object on this card and enter some information.

Creating the Appropriately-named Cards

Creating the Appropriately-named Cards

6.  Now we will give a name to this card.  Let's name this card identical to that of the first tab, namely, Introduction.  To change the name of the current card, perform the menu command Object -> Card Inspector and, from there, change the name of the current, only, first card to Introduction.  

Now we are ready to create the cards that will contain our hypothetical character, weapons and spells information cards.  

7.  To create an additional three cards (for a total of four: one for each tab), perform the menu command Object -> New Card; do this a total of three times.  When you have finished, your stack will display card 4 (all of which should contain your tab button!).

8.  Here we will repeat instruction #6 above for each card to create a correlation between the tabs themselves and the cards to which they navigate.  While we could just use a go to card 1 etc. or a go to card id 1002, it is often easier to simply rename each of the cards so that the name will match (or, at least, be named with an obviously correlating name!).  Give each of your four cards the same name as the corresponding text in the tab button tabs (so, in my case, card 1 = "Introduction", card 2 =  "Characters" and so on).

9.  Switch into run/browse mode and test!

Using Tabs on a Single Card to Hide/Show Content

The previous instructions demonstrated how to use a tabbed button control to navigate between cards to show content.  This section will demonstrate how to use a tabbed control on a single card to hide/show appropriate content.

10.  To do so, create a substack of your current mainStack by performing the menu command File -> New Substack of "the name of your mainstack".  On Card 4 (Spells) of your mainstack, create a button and give it the name "Tabs on a single card" or some such thing.  Decide what you are going to name your new substack.  Name it by performing the menu command Object -> Stack Inspector when the current focus is your substack.  I've titled mine, Tabs_on_Single_Card.  Switch the focus back to your mainstack by clicking on it, then assign the following script to your button by clicking on the new button and performing the menu command Object -> Object Script:

on mouseUp

go stack "Tabs_on_Single_Card"

end mouseUp

This will open your new substack when you/the user clicks on the button on Card 4.  

11.  Now switch to your new substack and create a tabbed control there (see instruction #2 above).  Create two or more groups of objects (such as radio buttons or checkbox buttons or images or text fields) and give those groups names that correspond to the two or more tabs you created for this stack.  Since this stack will use the tab button to hide and show groups of content on a single card (as opposed to navigating to particular cards in a stack), we won't need to group the tabbed button control.

12.  Give your tabbed button the following script:

on menuPick theItem,previousTab -- menuPick is what the user selected; previousTab is the previous tab selection

show group theItem

hide group previousTab

end menuPick

 

 

 

Resetting a Tab to its Initial Selection

13.  If you wish for the default presentation of the tabbed button to be the first tab or selection, you will need to insert a preOpenStack script which sets the menuHistory property of the button.  You can do this by performing the menu command Object -> Stack Script and entering the following script into the script editor:

on preOpenStack

set the menuHistory of btn "Tab Menu" of group "myTabs" to 1 -- where 1 is the first tab

end preOpenStack

The above is for the mainStack you created for this lesson;  substitute the appropriate button name for your subStack.

14.  Save and test!

18 Comments

Randy

This lesson was very helpful, thank you!

temitope

Well Judy, you sure spend a good amount of time trying to prepare these tutorials...Thats nice work....Thumbs up to you.

Geoff Taylor

Thanks for this! Very helpful

Guru

I guess it's a newbie mistake/question, but when I select the tab and chose object script from the menu, I'm presented with the following:
on menuPick pItemName
switch pItemName
end switch
end menuPick

And not the on mouseUp command (which I see on card scripts etc). So do I replace the above with 'on mouseUp get the selected text .....?'
Thanks

Elanor Buchanan

Hi Guru

Yes, in this case replace the pre-populated menuPick handler with the mouseUp handler given in the lesson.

An on menuPick handler is often used with tab buttons which is why it is automatically inserted but this example uses mouseUp instead.

If you are working with tab buttons you might also find this lesson useful

http://lessons.runrev.com/s/lessons/m/4603/l/44134-Text-in-the-Tab-Panel

I hope that helps.

Kind regards

Elanor

Guru

Thanks for the prompt responce Elanor, will look at the link right away.
Guru

Glenn

Great lesson, thanks!

I had a couple of follow-up questions:

How can I add a tab to my tab button (and also add a corresponding card)?

How do I delete a tab (and also delete its card)?

Thanks

Hanson Schmidt-Cornelius

Hi Glenn,

under step "Changing Tab Attributes" of this lesson you can see a field that contains:
Tab 1
Tab 2
Tab 3
Update this field, change the names of the tabs and add new ones here. You will need to use on line for each new tab. This inserts the tab for you. You can remove a tab again by removing a line from the field.

You add a new card by following steps 6, 7 and 8 under "Creating the appropriately-named Cards".

Ensure that the new card has the same name as the tab.

You can delete a card by opening the Application Browser (Tools -> Application Browser). Expand your application in the left window to show the cards that make up your application. Right click the card you want to delete and select "Delete Card".

Kind Regards,

Hanson

Liz

I'm having some trouble with resetting a tab to its initial selection. I've tried the following code (which is in the substack script) with various permutations:

on preOpenStack
set the menuHistory of btn "Tab Menu" of group "myTabs" to 1
end preOpenStack

I've tried replacing "Tab Menu" with the name of the button on the mainstack, "myTabs" with the name of the tab group in the substack, and "1" with the title of the first tab. Each time I get the following error:

stack "Tabs on One Card": execution error at line 2 (Chunk: can't find background)

Any ideas as to what is going wrong?

Hanson Schmidt-Cornelius

Hi Liz,

you would get this error if you missed out the steps in section: "Giving the Tabs a Background Behaviour as a Group of One". In this section you create a group and give it the name "myTabs".
If you do not want to use a background behaviour, try the following code on the tabbed button alone:

set the menuHistory of btn "Tab Menu" to 1

Kind Regards,

Hanson

tombo

Hi,

I have the tab menu working except for one key detail. It navigates fine between 3 cards, but the control often highlights the wrong tab after arriving on the card.

Example:
A click on tab Edit goes to card "Edit" but sometimes leaves tab "Play" as the highlighted (foremost) tab.

Do I need to set these manually?

Thanks,
Tom

Hanson Schmidt-Cornelius

Hi Tombo,

that is strange. Did you try the sample stack that is attached to this lesson? This should give you an idea of how the tabs work and how they are handled.

If you are still having problem then you may find someone in the LiveCode community who can help you. Have a look at the pages here: http://www.runrev.com/developers/community/

Failing that, try contacting our technical support with more information on the exact problem you are having and a copy of the sample stack. You can contact them at: support@runrev.com

Kind Regards,

Hanson

Gordon

I'm having some trouble with resetting a tab to its initial selection. I've tried what you have in the tutorial:

on preOpenStack
set the menuHistory of btn "Tab Menu" of group "myTabs" to 1
end preOpenStack

I'm certain that I've done everything in this tutorial as directed and have checked all groups that I have created in this substack "Tabs_on_Single_Card" I keep getting the same error message:
stack "Tabs_on_Single_Card": execution error at line 2 (Chunk: no such object) near "Tab Menu", char 24

Help!

Elanor Buchanan

Hi Gordon

This message usually means that you are referring to a control that doesn't exist, so where you are referring to a button called "Tab Menu" there isn't a button called "Tab Menu". Check the names of your controls and make sure they match the controls you refer to in your script.

I hope that helps.

Kind regards

Elanor

Dennis

Is this tut work for 6.1? I'm not seeing the commands mentioned here...

Hanson Schmidt-Cornelius

Hi Dennis,

yes this tutorial should work for LiveCode 6.1.

Can you elaborate in particular what you are having issues with?

Kind Regards,

Hanson

Wouter De Backer

Can it be that messages like preOpenCard, openCard, preOpenStack and the like are not executed in the development environment? But only in any standalone app?

Elanor Buchanan

Hi Wouter

These messages are sent in the development environment and standalones, however it is possible to turn off these messages in the development environment by clicking the Lock Messages button in the menubar, it is worth checking this is not switched on.

Kind regards

Elanor

Add your comment

E-Mail me when someone replies to this comment