II. GUI Basics

Chapter 6. Widgets - Using Widgets to Create Interfaces

---

Tabs

Tab Widget Tab widget consist of TabPanel and TabControl. You will always place Widget controls inside the TabPanel and Button controls inside the TabControl. You place as mane buttons as needed in the TabControl. For every Button you create a Widget in the TabPanel.

XML Element Name

<Tab>

<TabPanel>

<Widget/>

<Widget/>

<Widget/>

<Widget/>

</TabPanel>

<TabControl>

<Button/>

<Button/>

<Button/>

<Button/>

</TabControl>

</Tab>

Example

In the following example we set location and size through setShape property to the Tab widget. The location and size for the panels (widgets), and buttons are calculated automatically.

<Tab setShape="10,40,400,200">

<TabPanel setBorder="roundraised">

<Widget setLabel="panel0"/>

<Widget setLabel="panel1"/>

<Widget setLabel="panel2"/>

<Widget setLabel="panel3"/>

</TabPanel>

<TabControl>

<Button setLabel="tab0"/>

<Button setLabel="tab1"/>

<Button setLabel="tab2"/>

<Button setLabel="tab3"/>

</TabControl>

</Tab>

Tab's properties

Basic set of properties that applies to all widgets is described in the Chapter 9 for widgets styles, and Chapter 10 for widgets attributes. For event handling methods please refer to Chapter 12.

The specific to the Tab properties are setAlign and setControlSize.

Method signature

setAlign = "[direction]"
[direction] Valid values are: bottom, top, right, left. The default is top.

setAlign is placed in the Tab element.

Examples

<Tab setShape="10,40,400,200" setAlign="right">

<TabPanel setBorder="roundraised">

<Widget setLabel="panel0"/>

<Widget setLabel="panel1"/>

<Widget setLabel="panel2"/>

<Widget setLabel="panel3"/>

</TabPanel>

<TabControl>

<Button setLabel="tab0"/>

<Button setLabel="tab1"/>

<Button setLabel="tab2"/>

<Button setLabel="tab3"/>

</TabControl>

</Tab>

Method signature

setControlSize = "[int width, int height]"
[width,height] Valid values are integers.

The tabs controls (the buttons that are selected to change views) have their sizes set from the Tab element. The control size ALSO affects the height / width of the tab control (depending on alignment)

Examples

<Tab setShape="10,40,400,200" setControlSize="60,50">

<TabPanel setBorder="roundraised">

<Widget setLabel="panel0"/>

<Widget setLabel="panel1"/>

<Widget setLabel="panel2"/>

<Widget setLabel="panel3"/>

</TabPanel>

<TabControl>

<Button setLabel="tab0"/>

<Button setLabel="tab1"/>

<Button setLabel="tab2"/>

<Button setLabel="tab3"/>

</TabControl>

</Tab>

Back    Next