Curl Global Community

Structure of the Program that uses Tab Containers

First, let's look at the functions that we can use to create a layout. Each tab container can contain multiple pages. Let’s take a look at the source code.

1. Declaring a TabContainer

Code:
let tab-container:TabContainer = 

    {TabContainer

        control-color = #EEFFFF,

    }

By using TabContainer, we can integrate multiple pages, and then select and display any one of those pages. The control-color option is used to specify the background color for the TabContainer.

2. First TabPane

Code:
{TabPane

    label = Page 1,

    margin = 5pt,

    Contents of Page 1

},

Each page is created using a TabPane. Using the label option, we can specify the display of a label. Only one object can be directly incorporated into TabPane. In our example, the character string “Contents of first page” is incorporated into the TabPane.

3. Second TabPane

Code:
{TabPane

    label = Page 2,

    margin = 5pt,

    {image source = {url curl_logo.gif}}

},

The second pane displays an image.

4. Third TabPane

Code:
{TabPane

    label = Page 3,

    margin = 5pt,

    {VBox

        spacing = 5pt,

        Display multiple objects using a VBox,

        {image source = {url curl_logo.gif}}

    }

}

The third pane displays both a character string and an image. Since each TabPane can only contain one object we use VBox (as in this example) or another container such as HBox.

5. TabContainer display

Code:
tab-container

Finally, we display the tab container.

ashimo