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 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.
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
bar | Tag and JS | string | null | read-only |
Description. A reference to its basetabsbar. | ||||
barclass | Tag only | string | basetabsbar | final |
Description. The concrete implementation of barclass. | ||||
bordersize | Tag and JS | number | 0 | read-write |
Description. The width of the border in pixels. | ||||
content | Tag and JS | string | null | read-only |
Description. A reference to the basetab’s content area. | ||||
contentclass | Tag only | string | basetabscontent | final |
Description. The concrete implementation of the content area to instantiate. | ||||
inset_bottom | Tag and JS | number | 8 | read-write |
Description. The bottom inset (margin) of the content. | ||||
inset_left | Tag and JS | number | 8 | read-write |
Description. The left inset (margin) of the content. | ||||
inset_right | Tag and JS | number | 8 | read-write |
Description. The right inset (margin) of the content. | ||||
inset_top | Tag and JS | number | 8 | read-write |
Description. The top inset (margin) of the content. | ||||
tabclass | Tag only | string | basetab | final |
Description. The concrete implementation for the tab. |
The Tabs class adds two attributes, listed in Table 11.8.
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
tabalign | Tag and JS | string | left | read-write |
Description. The tab alignment. Valid values are “left”, “center”, and “right”. | ||||
tabspacing | Tag and JS | number | -15 | final |
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 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.
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
datacontrolsvisibility | Tag and JS | boolean | false | read-write |
Description. Indicates if the data control is visible. | ||||
inset_bottom | Tag and JS | number | read-write | |
Description. The bottom inset (margin) of the tabpane. | ||||
inset_left | Tag and JS | number | read-write | |
Description. The left inset (margin) of the tabpane | ||||
inset_right | Tag and JS | number | read-write | |
Description. The right inset (margin) of the tabpane. | ||||
inset_top | Tag and JS | number | read-write | |
Description. The top inset (margin) of the tabpane. | ||||
selected | Tag and JS | boolean | false | read-write |
Description. Indicates if this tabpane is selected. | ||||
tab | Tag and JS | string | null | read-only |
Description. A reference to the container tab. | ||||
tabclass | Tag only | string | final | |
Description. The class to use for the containing tab. |
Name | Usage | Type | Default | Accessibility |
---|---|---|---|---|
tabwidth | Tag and JS | number | -1 | read-write |
Description. The width of the tab pane. A value of –1 means the tab pane will resize to fit its components. |
Now that you are familiar with both the Tabs and Tabpane classes, let’s look at the example in Listing 11.4.
<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.