[Article] Roll Your Own Tab Buttons

by David Workman
Data Mosaic

Did I mention that I LOVE tab panels? What you can do with tab panels is unbelievable. At the most basic level, a tab panel is a window to another form (or multiple forms). That form can be related or unrelated data; it can contain no data at all; it can contain other tab panels (where does it stop?!); a tab panel can even make dinner for you (just checking to see if you're paying attention).

The default tab set is displayed at the top left of the tab panel. You can change this to any axis and even hide the tabs completely (set the property "tabOrientation" to "hide"). I'm in the habit of hiding tabs and creating my own tabs. Why? I'm a mac dude at heart and I hate the tab look of Java in Panther. I wish Apple had kept the Jaguar tab look. Oh well, the side benefit of making my own tabs is that they look the same on all platforms! Unless you are on windows and you use the XP look and feel. That L&F messes everything up because buttons get a border no matter what you do in Servoy design mode (thankfully Servoy defaults to Kunststoff L&F on Windows, Linux and Unix).

Anyway, it's easy to create your own tabs to a tab panel. Create your tab panel like you normally do with all the forms that the tab panel is associated with. Then set the "tabOrientation" to "hide". Even though the tabs are not visible, you can change the "tabIndex" of the tab panel via a method (at runtime) with your own buttons.

The next step is to create a button for each of the tabs. I usually set the border property of each of these buttons to "empty" and choose a distinctive background and font for the "active" tab and the same for the "inactive" tabs. In this example, for the "active" tab I've chosen a grey color (bgcolor = '#999999') for the background and a black and non-bold font for the text (fgcolor = '#000000', setFont('Tahoma,0,11')).

For the "inactive" tabs I've chosen an orange color (bgcolor = '#CC6600') for the background and a white and bold font for the text (fgcolor = '#FFFFFF', setFont('Tahoma,1,11')).

This sets up a tab panel that looks like this:

.

Note that I've arranged the buttons along the top of this tab panel along with a long horizontal grey rectangle to give a top border to the tab panel.

The last step is to create a method for each button that changes the active tab to an inactive tab and the appropriate inactive tab to an active tab if clicked. As it turns out, you can use ONE method for each button due to the "application.getMethodTriggerElementName()" function. This returns the name of the button that calls the function. The trick is to name your buttons in a logical manner with an ascending number pattern that you can predict in the method:

Once you have this in place, the following function will work for all the tabs. Additionally, it takes no additional programming to add a tab to the tab panel. Just add the new form to the tab panel, create and place a new inactive tab button, name the new button in the numerical sequence, and attach the same method to it that all the other tabs have:

Note that if this method is a global function, you will need to prefix each of the "element" functions with the exact form that you are referring to (i.e., forms.my_form_name.elements[tab_name].bgcolor = ...).

Notice also that the brackets in the object hierarchy denote a text string that will be replaced with the variable between the brackets (elements[tab_name].bgcolor = ...). Each time the loop goes by, this function call is resolved to "elements.tab_(replace with loop number).bgcolor = ...".

26 lines of commented, spaced and bracketed code to manipulate your own tabs. This is the level of abstraction you can attain with an object oriented and run-time event driven interface.