Tabs and Tabpane

A tab is a view that can contain tab panes. Each tab pane has a title and can store other components. The tab and tab panes are a good way to arrange components in a small area.

This section discusses the two classes, Tabs and Tabpane, and provides an example.

The Tabs Class

The tabs component contains one or more tabpanes. The size of the tabs will be resize to the largest tabpane, unless you specifically set the height and or width attributes of the tabs. The Tabs class represents tabs and is derived from the Basetabs class. Basetab is a subclass of Basecomponent. It is therefore appropriate to list the attributes and methods of both Tabs and Basetabs.

Table 11.7 lists the attributes of the Basetabs class.

Table 11.7. The attributes of the Basetabs class
NameUsageTypeDefaultAccessibility
barTag and JSstringnullread-only
 Description. A reference to its basetabsbar.
barclassTag onlystringbasetabsbarfinal
 Description. The concrete implementation of barclass.
bordersizeTag and JSnumber0read-write
 Description. The width of the border in pixels.
contentTag and JSstringnullread-only
 Description. A reference to the basetab’s content area.
contentclassTag onlystringbasetabscontentfinal
 Description. The concrete implementation of the content area to instantiate.
inset_bottomTag and JSnumber8read-write
 Description. The bottom inset (margin) of the content.
inset_leftTag and JSnumber8read-write
 Description. The left inset (margin) of the content.
inset_rightTag and JSnumber8read-write
 Description. The right inset (margin) of the content.
inset_topTag and JSnumber8read-write
 Description. The top inset (margin) of the content.
tabclassTag onlystringbasetabfinal
 Description. The concrete implementation for the tab.

The Tabs class adds two attributes, listed in Table 11.8.

Table 11.8. The attributes of the Tabs class
NameUsageTypeDefaultAccessibility
tabalignTag and JSstringleftread-write
 Description. The tab alignment. Valid values are “left”, “center”, and “right”.
tabspacingTag and JSnumber-15final
 Description. The spacing between tab panes in pixels. The default is –15 so panes overlap by default.

Both the Basetabs and Tabs classes do not add new methods or events.

The Tabpane Class

The Tabpane class represents a tab pane that can be added to a tab. This class is a subclass of Basetabpane, a direct subclass of Basecomponent. Table 11.9 shows the attributes of Basetabpane.

Table 11.9. The attributes of the Basetabpane class
NameUsageTypeDefaultAccessibility
datacontrolsvisibilityTag and JSbooleanfalseread-write
 Description. Indicates if the data control is visible.
inset_bottomTag and JSnumber read-write
 Description. The bottom inset (margin) of the tabpane.
inset_leftTag and JSnumber read-write
 Description. The left inset (margin) of the tabpane
inset_rightTag and JSnumber read-write
 Description. The right inset (margin) of the tabpane.
inset_topTag and JSnumber read-write
 Description. The top inset (margin) of the tabpane.
selectedTag and JSbooleanfalseread-write
 Description. Indicates if this tabpane is selected.
tabTag and JSstringnullread-only
 Description. A reference to the container tab.
tabclassTag onlystring final
 Description. The class to use for the containing tab.

Table 11.10. The attribute of the Tabpane class
NameUsageTypeDefaultAccessibility
tabwidthTag and JSnumber-1read-write
 Description. The width of the tab pane. A value of –1 means the tab pane will resize to fit its components.

Using Tabs and Tabpane

Now that you are familiar with both the Tabs and Tabpane classes, let’s look at the example in Listing 11.4.

Listing 11.4. Using Tabs and Tabpane
<canvas height="600" width="500">
    <form inset_top="10">
        <tabs tabalign="right">
            <tabpane text="Name" tabwidth="80">
                <simplelayout axis="y"/>
                <text>Customer Name</text>
                <edittext name="customerName"/>
                <text>Email</text>
                <edittext name="email"/>
                <radiogroup name="customerType">
                    <radiobutton>Individual</radiobutton>
                    <radiobutton>Organization</radiobutton>
                </radiogroup>
                <button>Submit</button>
            </tabpane>
            <tabpane text="Address" tabwidth="80">
                <simplelayout axis="y"/>
                <text>Address</text>
                <edittext name="address"/>
                <text>City</text>
                <edittext name="city"/>
                <text>State</text>
                <edittext name="state"/>
                <text>Zip Code</text>
                <edittext name="zipcode"/>
            </tabpane>
        </tabs>
    </form>
</canvas>

You can test and run the code in Listing 11.5 by invoking the OpenLaszlo compiler using this URL.

http://localhost:8080/lps-4.0.x/app11/tabTest1.lzx

If you run the code in Listing 11.5, you will see a tab with two tab panes, just like the one in Figure 11.6.

Figure 11.6. Using Tabs and Tabpane


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset