Tutorial 11: Tabbers

The MaxGUI Beginner Tutorial Series - Tutorial 11: Tabbers
(c) Assari Dec 28 2005

In this tutorial we are going to look at Tabbers, A Tabber gadget provides a list of Tabs above a client area typically used for handling multiple documents.

Lets take a look at a simple Tabber:-

SuperStrict

Local MyWindow:TGadget=CreateWindow("Tabber Example", 200,200,320,240)
Local Tabber:TGadget=CreateTabber(10,10,290,140,MyWindow)

AddGadgetItem Tabber,"First Item"
AddGadgetItem Tabber,"Second Item"

Repeat
WaitEvent()
Select EventID()
Case EVENT_WINDOWCLOSE
End
End Select
Forever

As we can see below, each AddGadgetItem statement inserts a tab onto our tabber gadget. Go ahead and click on the tabs. At the moment though it does not do very much.

A tabber gadget needs to be used with other gadgets to be useful. In the program below I'm going to use label gadgets.

SuperStrict

Local MyWindow:TGadget=CreateWindow("Tabber Example", 200,200,320,240)
Local Tabber:TGadget=CreateTabber(10,10,290,140,MyWindow)

Local Label0:TGadget=CreateLabel("Some slightly longer text from Label 0",50,20,200,40,Tabber)
Local Label1:TGadget=CreateLabel("Some text from Label 1",50,20,200,40,Tabber)

AddGadgetItem Tabber,"Tab 0"
AddGadgetItem Tabber,"Tab 1"
SelectGadgetItem Tabber,1

Repeat
WaitEvent()
Select EventID()
Case EVENT_WINDOWCLOSE
End
Case EVENT_GADGETACTION
   Select EventData()
   Case 0
     HideGadget Label1
     ShowGadget Label0
   Case 1
     HideGadget Label0
     ShowGadget Label1
   End Select

End Select
Forever

When we click the respective tabs we get to see the relevant text appearing.

Tabbers require a bit of work to make the illusion of the tabs actually having content. They do not have content and rely on other gadgets (such as labels above) to provide the content.

What they provide are event information from which we can act upon. Lets study our program above in greater detail.

SelectGadgetItem Tabber,1

Just like other list-based gadgets (Listboxes and ComboBoxes), many of the gadget functions which we have covered earlier is also applicable to tabbers. The SelectGadgetItem function above selects Tab 1 as the default tab.

Case EVENT_GADGETACTION
   Select EventData()
   Case 0
     HideGadget Label1
     ShowGadget Label0
   Case 1
     HideGadget Label0
     ShowGadget Label1
   End Select

When a user click one of the tabs, a EVENT_GADGETACTION event will be triggered by MaxGUI. We then need to check the event's eventdata by using the EventData() function. When the user clicks the first tab, EvenData() returns zero and when the user clicks the 2nd tab, EventData() returns 1.

The HideGadget and ShowGadget functions are then used to display the correct gadget on our tabber area. I hope it is clear that tabbers do not have individual areas for each tab but instead rely on us programmers to manage what gadget is displayed when a user clicks on the tabs.

If we were to place lots of tabs on our tabber, a scroll bar will appear. Let's take a look at an example

SuperStrict

Local MyWindow:TGadget=CreateWindow("Tabber Example", 200,200,320,240)
Local Tabber:TGadget=CreateTabber(10,10,290,140,MyWindow)

For Local i:int=500 To 510
AddGadgetItem Tabber,i
Next

Repeat
WaitEvent()
Select EventID()
Case EVENT_WINDOWCLOSE
End
End Select
Forever

Clicking on the right and left arrow will move our tabs accordingly

We can also pretty up our tabs with icons, just as with listboxes and comboboxes. Here is an example:-

SuperStrict

Local MyWindow:TGadget=CreateWindow("Tabber Example", 200,200,320,240)
Local Tabber:TGadget=CreateTabber(10,10,290,140,MyWindow)

Local IconStrip:TIconStrip=LoadIconStrip("D:\My Documents on E\_Tutorials\toolbar.bmp")
SetGadgetIconStrip(Tabber, IconStrip)

AddGadgetItem Tabber,"First Item",0,5
AddGadgetItem Tabber,"Second Item",0,6

Repeat
WaitEvent()
Select EventID()
Case EVENT_WINDOWCLOSE
End
End Select
Forever

Our tabs now have icons. Again this demonstrates how the gadget functions that we covered extensively earlier in our listbox tutorials are also applicable for tabbers as well.

Summary

Tabbers are very simple gadgets, appearing in all modern GUIs. However they need a fair amount of management to use properly.

To recap what we have learnt so far

Tabbers can be created using the CreateTabbers function
Being also a list based gadget like listboxes and comboboxes, most of the gadget functions such as AddGadgetItems, ModifyGadgetItems also are applicable for tabbers
Icons can be added to items using the LoadIconStrip and SetGadgetIconStrip functions.

So thats ends our tutorial for now. Back to Tutorial Index.