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!
This lesson was very helpful, thank you!