Text in the Tab Panel

This tutorial introduces the tab panel and shows you how to populate the display area with text information.

Introduction

The tab panel is versatile and can be configured for navigation around cards and stacks or simply to display information in the panel itself. This tutorial demonstrates how to create four tabs and populate the panel with the names of people who fall into a category that can be selected from the tabs.

Creating Tabbed Buttons

Creating Tabbed Buttons

Open LiveCode and select New stack from the File menu. This creates a new stack window on which to create the tab panel. Drag and drop a tab panel onto the card of the stack (1), then right click on the tab panel and select the Property Inspector (2). Make sure that you have selected the Basic Properties from the Property Inspector tabs. In order to display content on the tab panel ensure that Show name is ticked (3). Then update the content of the Tabs (One tab per line) field (4). You need to separate the names of each tab by returns. The default is "Tab 1" return "Tab 2" return "Tab 3". We are replacing this list with "Family" return "Friends" return "School Friends" return "Colleagues". Once you have made these change, close the Property Inspector. You may find that the tab panel window is not wide enough to fit the content from all four tabs. Widen the window by dragging and dropping the small rectangle boxes at the sides. You should be able to fit all four tabs into the LiveCode stack window without having to resize that.

 

The Code

Once you have updated the graphical layout and names of the tabs, you can write the code that displays the information in the panels. Right click on the tab panel you created and select Edit Script, to open the code editor. We are using a case construct to switch between the different tabs. Notice how the names of the tabs are reflected in the case statements. Each case statement is ended by a break statement. The code in each case statement produces a return delimited list of names that is to be displayed. You can update and alter the lists in order to experiment with the functionality. Add this code to the code editor:

on menuPick pItemName
   switch pItemName
      case "Family"
         set the label of me to "Mum" & return & "Dad"
         break
      case "Friends"
         set the label of me to "Scott Barnett" & return & "Nic O'Goramn" & \
            return & "Fred Small" & return & "Michael Ralph" & return & \
            "Sylvia Brown"  & return & "Steve Smith" & return & \
            "Morgan McDonald"
         break
      case "School Friends"
         set the label of me to "Claus Knorr" & return & "Gunnar Diem"
         break
      case "Colleagues"
         set the label of me to "Ben" & return & "Michael" & return & "Steve" & \
            return & "Sharron" & return & "Jean"
         break
   end switch
end menuPick

Don't forget to click Apply.

Putting it Together

Putting it Together

Switch to Run mode, and try out your tab panel. You should see it switch between the different lists of people entered in the code.

Further Reading

If you like this tutorial and would like to find out more about using the tab buttons, then you can read more about how to use the tab panel in the lesson: Using Tab Buttons.

11 Comments

Tom Bodine

Nice tutorial! But if you want to create or change a tabbed menu at runtime, you need another way.

You can do that by first getting the return delimited list of your button's current tabs with this line:

put the text of button "myTabs" into ttabs

Modify ttabs to change your tabs, then update the button with this line:

set the text of button "myTabs" to ttabs

franco

hi there,
how can I close a substack and go back to the main stack?
and how can I close all (when in run mode)?

thanks for your attention
franco

Michel Bujardet

For some reason, nothing displays in the tabbed menu label. Neither at design or at run time. I copied the code and verified it. Nothing :(

Alejandro Tejada

Hi Michel,

Notice this important step:

Make sure that you have selected the Basic Properties from the drop down list of the Property Inspector. In order to display content on the tab panel ensure that "Display name" is ticked...

Sometimes instead of "Display Name" appears "showName".
Just tick the checkbox and each tab displays all names correctly.

Elanor Buchanan

Hi Franco

You can do this is script using the close command, e.g.

close stack "mySubstack"

The close command closes the stack window immediately, but it does not necessarily remove the stack from memory. A stack that is closed but in memory still takes up space in RAM and its objects are still accessible to scripts.

If you want to explicityly navigate to another stack you can use the go command.

I hope that helps.

Kind regards

Elanor

Puzzle Secretary

Is there a way to make the tabs appear at the bottom or one of the sides of a tab panel instead of the top?

Elanor Buchanan

You can't do this with a tab panel, however we have a Segmented Control widget which you could use to achieve a similar effect. This would allow you to place the control at the top or bottom on the panel. In LiveCode 9.0-dp-9 we have also added the option to create a vertical segmented control.

I hope that helps.

Elanor

EL_C

Hello,
I have a Question regarding these Tab Menues.
Is there a way to bind buttons and fields to a specific tab? Lets say I want to add a Button to Tab 1 that brings me to Tab 2. Problem is that the button stays even if im already there.
Do I have to make them dissapear everytime I switch or can I connect the button to the tab?
Thanks in advance.

Elanor Buchanan

Hi EL_C, the way to do this would be to have a group of controls associated with each tab, the show and hide the groups when the user selects a tab.

This is described in more detail in this lesson

http://lessons.livecode.com/m/4071/l/7574-using-tab-buttons

I hope that helps.

Elanor

Oskar

Hello
When would I use Tab buttons instead of normal buttons?

Elanor Buchanan

Hi Oskar

Tab buttons are a User Interface element. You can use them to display different groups of controls on a single card, a button would usually be for an action.

You might find this lesson useful

http://lessons.livecode.com/m/4071/l/7574-using-tab-buttons

And you can read a bit about where tabs are usually used here

https://docs.microsoft.com/en-us/windows/win32/controls/tab-controls
https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/tab-views/

I hope that helps.

Kind regards

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.