Index...
Centrallix Documentation
|
widget/tab
tab :: A tab (or notebook) widget allowing multiple pages to be layered and individually selected for viewing
Metadata:
| type: | widget/tab |
| visual: | yes |
| container: | yes |
| form element: | no |
Overview:
The TabControl widget provides a DHTML tab control within Centrallix. The widget behaves in the same way as tab controls in other GUI environments, providing a set of tab pages, layered one on top of the other, which can be selected (brought to the foreground) by clicking the mouse on the respective visible tab at the top of the tab control.
To further distinguish which tab at the top of the tab control is active, this widget slightly modifies the X/Y position of the tab as well as changing a thumbnail image (on the left edge of the tab) to further enhance the distinction between selected and inactive tab pages.
Usage:
The tab pages are containers, and as such, controls of various kinds, including other tab controls, can be placed inside the tab pages.
Tab pages are added to a tab control by including widgets of type "widget/tabpage" within the "widget/tab" widget in the structure file that defines the application. Any controls to appear inside a particular tab page should be placed inside their respective "widget/tabpage" widgets in the structure file.Only widgets of type "widget/tabpage" should be placed inside a "widget/tab", with the exception of nonvisuals such as connectors.
Tab pages also have a 'visible' property which allows them to be hidden and revealed. This is used if the type is set to dynamic, but can be used manually as well.
Properties:
| Property | Type | Description |
|---|
| background |
string |
An image to be used as the background of the tab control. |
| bgcolor |
string |
As an alternate to "background", "bgcolor" can specify a color, either named or RGB. |
| inactive_background |
string |
An image to be used as the background of the tabs which are inactive (in the background). |
| inactive_bgcolor |
string |
As an alternate to "inactive_background", "inactive_bgcolor" can specify a color, either named or RGB. |
| height |
integer |
the height, in pixels, of the tab control, including the page height but not including the height of the tabs at the top. |
| selected |
string |
The name of the tab page that should be initially selected. This can also contain a dynamic runclient() expression controlling which tab page is selected. |
| selected_index |
integer |
Similar to "selected", but selects the tab by numeric index. |
| textcolor |
string |
The color of the text to be used on the tabs to identify them. |
| width |
integer |
width, in pixels, of the tab control, including the page width but not the width of the tabs (if they are at the side). |
| x |
integer |
x-coordinate of the upper left corner of the tab control, relative to the container. |
| y |
integer |
y-coordinate of the upper left corner of the control, relative to its container. |
| tab_location |
string |
The location of the tabs: "top" (default), "bottom", "left", "right", or "none". |
| tab_width |
integer |
The width of the tabs in pixels. This is optional for tab_locations of "top", "bottom", and "none". |
Child Properties:
(of any child widgets)
| Property | Type | Description |
|---|
| title |
string |
The name of the tab page, which appears in the tab at the top of the control. |
| type |
string |
If this is set to dynamic then the tabpage will act as an objectsource client, displaying zero or more tabs: one tab for each item in the replica with title set to the value of the fieldname. In this way, a tab control can have a mix of dynamic tabs and static ones. |
| fieldname |
string |
This is the fieldname from the objectsource that the tabpage will use for its title. |
| visible |
integer |
0 or 1. Can contain a dynamic runclient() expression to control when the tab page is visible to the user. |
Events:
| Event | Description |
|---|
| MouseUp |
This event occurs when the user releases the mouse button on the widget. |
| MouseDown |
This event occurs when the user presses the mouse button on the widget. This differs from the 'Click' event in that the user must actually press and release the mouse button on the widget for a Click event to fire, whereas simply pressing the mouse button down will cause the MouseDown event to fire. |
| MouseOver |
This event occurs when the user first moves the mouse pointer over the widget. It will not occur again until the user moves the mouse off of the widget and then back over it again. |
| MouseOut |
This event occurs when the user moves the mouse pointer off of the widget. |
| MouseMove |
This event occurs when the user moves the mouse pointer while it is over the widget. The event will repeatedly fire each time the pointer moves. |
Sample Code:
$Version=2$
// Here's a tab control with two tab pages.
myTabControl "widget/tab"
{
x = 20; y = 100; width=360; height=200;
bgcolor="#c0c0c0";
selected = "FirstPage";
FirstPage "widget/tabpage" { title = "TheFirstPage";}
SecondPage "widget/tabpage" { title = "TheSecondTabPage"; }
}
Comments...
(none yet)
Add a Comment...
|
