Tabs and Tabbox

Your browser displays probably several web pages in windows accessible by tabs. We will describe step by step how to achieve such a tabbed interface in XUL language with tabbox .

Tabbox is a special box that contains a collection of pages accessed via tabs. This can be done by defining a list of tabs, followed by a list of panels that contain pages or widgets.

The comprehensive code looks like this:

<tabbox>
    <tabs>
        <tab label="" />
    </tabs>
    <tabpanels>
        <tabpanel>
              ... widgets...
         </tabpanel>
    </tabpanels>
</tabbox>

There are as many tab tags and tabpanel as tabs and pages.

The tags for defining tabbed pages

All these tags are used in the previous code of a tabbed structure:

Tabbox

Box to contain specific panels with tabs.

Tabs

List of tabs.

Tab

Definition of a tab.

Tabpanels

List of panels.

Tabpanel

Definition of a panel, container of other widgets that are contained within the page.

The tabbox container tells the runtime that panels are stacked and displayed one at a time. The remaining tags are specialized containers.

Demonstration

An example to achieve an interface made of pages accessible via tabs. The interface consists of two pages, so two tabs, each page will contain a textbox that allows you to enter text. All other widgets or sets of elements could form the content of pages too.

That is the simplified code:

<tabbox>
    <tabs>
        <tab label="Page 1" />
        <tab label="Page 2" />
    </tabs>
    <tabpanels>
        <tabpanel>
            <textbox value="First page"></textbox>
        </tabpanel>
        <tabpanel>
            <textbox value="Second page"></textbox>
        </tabpanel>
    </tabpanels>
</tabbox>

• Demo code.zip.

<tabbox  flex="1">
    <tabs >
       <tab label="A"  />
       <tab label="B" />
       <tab label="C"  />
       <tab label="D" />
    </tabs>
    <tabpanels flex="1" >
       <label value="Tab A" />    
       <label value="Tab  B" />        
       <label value="Tab C" />    
       <label value="Tab  D" />
    </tabpanels>
  </tabbox>