The new tab widget also known as the TabEx has got some new properties. This small article shows how they work and what it looks like. The new properties are introduced to allow developers to mimic a kind of browser look and feel whereby tabs can be closed or opened based on events in the programming language. For this purpose we introduced a tab button which lives on top of the selected tab. Some developer talk about a close button but this depends on the programming code in the extended trigger of the Tab.
The UNIFACE lab has chosen to follow the MS Internet explorer look and feel. This means that the button is only shown on the active tab. There is no standard definition in Windows for showing the button on a tab se we had to choose.
The new properties should be defined in the more properties form.
A button on top of the active tab is shown when this property is set to true.
Property name: “TabButton”
Values: TRUE | FALSE (default)
The active tab shows a small cross when this property is set. By default the button is a cross with the foreground color of the tab. So it follows the label color. When hovered it shows a small button with a red cross.
The lab added some extra properties to allow the 4GL developer to design its own tab button. By default the tab works and looks nice however a developer who wants to be in control can use the following new properties to design a distinct look.
Defines the image on top of a tab button.
Property name: TabButtonImg
When a valid image is defined the button will show this instead of default cross. Following image shows the tab widget with the firstname.lastname@example.org and tabbutton=true
Defines the image on top of a tab button when the button is hovered by the mouse pointer.
Property name: TabButtonImgHover
Defines the image which is shown when the tab button is hovered.
Extended trigger onTabButton
When the button is clicked the tab widget fires the onTabButton extended trigger. There are no parameters. The developer can use the current field value to act on the active tab.
; -- start triggers for tab widget trigger onTabButton end ; trigger onTabButton
Overview of the sample
Following picture shows an overview of the used tabs in this document and the opened form.