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.

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

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 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 navigate to when the tab is clicked.

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.  

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

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.

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 mouseUp

This 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

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.

Save and test!