(Original creator: Jasper)
TabEx Widget
The new TabEx widget has so many properties that I thought that it would be nice to have an overview what is possible and what the default behavior of this modern widget is.
History
The tab widget implementation started in the UNIFACE lab after many requests from customers to have different colors on the tabs. The Windows tab control cannot handle this option. To see whether it was feasible to write a control from scratch I started to program at the max for one hour a day to see whether this would work. After half a year there was something what could be shown to product marketing and so the story started. There was enthusiasm and this caused the start of an official project with extra developers, testers and a technical writer. During this complete project, even from the trial, I looked at hundreds of tab widgets on the Web and other Windows applications and each time I found something the new tab could not do. The design changed until all possible tabs could be realized. So at the end, almost all possible tab widgets, how strange they may look, can be made with the new TabEx widget. After more than four thousand lines of C++ code with the use of the standard label widget implementation and shared code, the TabEx was born. This document will show you some examples and gives hints on how it works and what the best approach is to take.
Basic idea of the TabEx
If you do not specify a single property, it just works. It is by default a no brainer.
What is what
The following picture gives an overview of a selection of the properties supported in the new tab widget.
Who is the boss on a standard tab configuration with an horizontal tab strip?
The text in the label is the boss in all circumstances, this is the information which should be displayed correct and complete. What does this mean? It means that the size of a tab is defined by the length and height of the label text. The bigger the label is, the bigger the tab gets. There is one exception to this. If the tab has the property “imgdefault” set and the image is bigger than the text , the image takes over. This means we can do a trick with this information For the images on the tab it is not necessary to be big. If the text defines the size of the tab the image will be stretched. So the following small image:
Can be used to get green tabs. And you can even make it one pixel in width. That will make it difficult to maintain, but in theory this is possible. And of course you don’t do this when the corners need to be rounded for instance, in this case you make an image which is about the size you need. The tab will look as follows:
Here we see that the width has been defined by the label text and the height by the image. So let’s try the following image:
If we use that in the same tab it will look as follows:
Now the height and the width of the label is bigger than the image and so the label defines the final size. The label has some default padding around it and this make it look correct.
TabStrip image property
Of course this property is described in the user documentation, but it is always nice to see what you can do with this property. Look at this image:
The tabstrip image is the dark blue background. The image default for the tabs is a transparent image. The selection image is the light blue image shown in the selected tab with the label text, “Library”.
Transparent images to make the impossible possible
In the following tab uses a blue circular PNG image as the default. Red for the selected and green for the hovered tab. As you can see the sky is the limit. You can even make a stack based tab strip and by this place these balls in a column.
Colors versus images
You can specify an image to be displayed on the tab or use colors. Recommended is the use of an image when the shape is irregular, or when the texture cannot be met with a color. Otherwise the use of colors is recommended to avoid maintenance overhead with all the different images.
Gradient and default color fill
The following picture shows an accordion type tab with as tab colors “dodgerblue”. The images in front of the labels are defined in the valrep.
Some examples
The following picture shows a default tabEx widget and a version showing images together with the label text.
The following picture uses a selection image with a small triangular white area to emphasize the selection. For completeness the image shows a UNIFACE version of the tab and a Microsoft Office version.
List of recommendations
- Use colors when possible on the tabs. Use images when shape or a texture is needed.
- Use light text on dark tabs and even consider a special tab font with bold in it.
- If you have a common look and feel for tabs, define your own logical tab in the usys.ini. This makes the styling after the application is released a breeze.
- Avoid in all circumstances more tabs than the tab widget can show. The tab widget will show scroll buttons but the end user will not have an overview of all possible options.
- When each tab has its own color and the selection does not stand out, use the “activetablinecolor” property to emphasize the selected tab.