Text in the Tab Panel

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


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

Open LiveCode and select New Mainstack 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 drop down list of the Property Inspector. In order to display content on the tab panel ensure that Display 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. The script editor appears and populates the editor with four lines of code that provide you with a basic framework into which to add the functionality you want to implement. 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.

on menuPick pItemName
    switch pItemName
        case "Family"
            set the label of me to " "
        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"
        case "School Friends"
            set the label of me to "Claus Knorr" & return & "Gunnar Diem"
        case "Colleagues"
            set the label of me to "Ben" & return & "Michael" & return & "Steve" & \
                return & "Sharron" & return & "Jean"
    end switch
end menuPick

Putting it Together

The image in this step shows you the tab panel in operation and the code that is used to provide the information that is displayed.

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.