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
You can download the sample stack from this url: https://tinyurl.com/ybqurozf
Creating Stack and Tabbed Control(s)
Create a new LiveCode stack; name it and save it. You should now have a stack consisting of a single card.
Create a tabbed button control for your new stack by dragging it to your stack; you should see 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
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), open the Property inspector from the menu Object -> Object Inspector.
Here you can name the tab panel (1), change the default text for the tabs (2) as well as add additional tabs.
To follow along in recreating the sample stack, rename Tabs 1, 2 & 3 to "Introduction", "Characters" and "Weapons" and add a fourth tab, "Spells". You may want to resize the tab panel to accommodate all the tabs. You can do this from the "Position" tab in the Property Inspector for the object. Click on "Fit content" next to Width, and you should see all your tabs.
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 LiveCode to either navigate between panes (or cards) 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
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"'.
There is an even shorter way of doing this, namely:
on mouseUp
go cd value(the selectedline of btn "Tab Menu" )
end mouseUpIn 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 navigate to when the tab is clicked.
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.
Select the tab button. Bring up the Property Inspector by right clicking and selecting Property Inspector, or by double clicking on it. Once it has been selected, turn it into a group by clicking on the "group" button in the toolbar (1). You will see the Property Inspector change to an inspector for the group.
Now it is time to give it background behavior so that it will appear on all subsequently-created cards in the stack. First, we should give our group some sort of obvious name other than "group ID 1004" (1) and, secondly, we should check the box marked "Behave like a background" (2). This latter action will ensure that all subsequently-created cards will have this tabbed button/control automatically placed upon it.
Creating the Appropriately-named Cards
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 (1) and, from there, change the name of the current, only, first card to Introduction (1).
Now we are ready to create the cards that will contain our hypothetical character, weapons and spells information cards.
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!).
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).
Adding Fields
Go to Card 1. You can use the View menu to do this, choose "Go First". Drag a field out onto your tabbed button (1), resize it to an appropriate size, and switch to run mode (2). Enter some text in the field, such as "this is an introduction"(3). Repeat for cards 2, 3 and 4.
Switch to Run mode and try it out! You should see the tab content switch as you click on the headings.
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.
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 mouseUpThis will open your new substack when you/the user clicks on the button on Card 4.
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.
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
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 preOpenStackThe above is for the mainStack you created for this lesson; substitute the appropriate button name for your subStack.
Save and test!
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: [email protected]
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
EL_C
Hi everybody, thanks for the tips so far.
I have a problem when adding fields to the tabs. How can i bind a text field or button ta a specific tab. I want to be able to click through my tabs, with them showing those buttons and field i assigned to it. When I do it like in the tutorial the field just stays on top of the tabs and doesn´t change at all.
Also, if I want to have more tabs, they dont all fit in a row and some are cut off and dont fit in the stack. Is it possible scroll through them?
Thanks in advance for helping me with this one.
Elanor Buchanan
Hi EL_C, if you are using the groups method you will need to ensure that any controls you create are part of the relevant group. New controls are created on the card and not as part of any particular group.
To do this you would
- Ensure "Selected Grouped" is off in the Menubar
- Select the group
- Click "Edit Group" in the Menubar
- Add controls
This will allow you to add controls to an existing group. You can also cut and paste existing controls into groups in a similar way.
I hope that helps.
Kind regards
Elanor
Elanor Buchanan
Hi EL_C, there is not a way to scroll through the tabs if there are too many to fit. You could add an enhancement request for this feature at
https://quality.livecode.com/
Kind regards
Elanor
EL_C
Thanks for the quick answer.
I'm now able to connect Buttons and text to the respective Tab from the Tab Menu. However what I couldn't do so far is having a buttan that changes the Tab that is opend.
I can click the tabs to switch them but I also want to have a button on each tab that does the same. Something like "go to the next tab".
This is how I tried to do it:
on MouseUp
set tab of "Tab Menu" (this is how I Named and Labeld my Tab menu) to "Tab 2" (what I wrote in "Tabs" in the property inspector)
end MouseUp
This is what I have as scribt for the Button.
The Button is in a group and the group has the scribt:on mouseup
set tab of "Tab Menu" to "Tab 2"
end mouseup
also tried both with: set "Tab Menu" to "Tab 2"
and tried only having either the group or the button scrbt empty.
Doesn't work unfortunatly. Any Ideas?
Thanks in advance
Elanor Buchanan
Hi EL_C
I'm glad I could help. The property you need for this is the menuHistory, so you would do
on mouseUp
set the menuHistory of button "Tab Menu" to 2
end mouseUp
I hope that helps.
Elanor
Rob Cozens
People who want to use a Tab Button in apps to be distributed across multiple platforms should be aware that this control is visually and behaviorally different between MacOS and Win32. For example, the tabs are centered in MacOS and left justified in Win 32. Also, if the button's backgroundColor is set, the text of the selected tab is set to that color in MacOS but unchanged in Win32. One should test a stack with a Tab Button on both platforms before distribution.