Tabbed Pane

Table of Contents

Markup Tutorial

Interfacing with Java™

Web Services

Split Pane

Layout

Tabbed Pane

A tabbed pane presents a collection of components organized by “tabs,” only one of which show their content at any given time. To see the content of another tab, you simply click on the tab’s title.

Setting up Tabs

A tabbed pane is represented by the tabbedPane element type, while a tab is represented by the tab element type.

The content of a tab is specified using element containment, just as it is done for panels. The title of a tab can be specified through the title attribute of a tab element. Tabs also support icons just like labels.

The following example shows how to set up tabs inside a tabbed pane. Note icon in the title for third tab.

<?xml version="1.0"?>
<resource xmlns="http://www.enode.com/xalt">
    <frame title="Tabbed Pane" resizable="false" visible="true">
        <tabbedPane>
            <tab title="Cash">
                <label icon="images/dollar20.jpg" background="white"/>
            </tab>
            <tab title="Bullion">
                <label icon="images/dollar1.gif" background="black"
                    opaque="true" horizontalAlignment="center"/>
            </tab>
            <tab title="Favorite Things" icon="images/heart.gif">
                <label icon="images/caution.jpg" background="white"
                    opaque="true" horizontalAlignment="center"/>
            </tab>
        </tabbedPane>
    </frame>
</resource>

Make this object in eNode Sandbox. The result should be similar to the following: