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
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
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:
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
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:
go cd value(the selectedline of btn "Tab Menu" )
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
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
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:
go stack "Tabs_on_Single_Card"
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
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:
set the menuHistory of btn "Tab Menu" of group "myTabs" to 1 -- where 1 is the first tab
The above is for the mainStack you created for this lesson; substitute the appropriate button name for your subStack.
14. Save and test!