CTabFolder and CTabItem

Companies sometimes require further customizations, such as changing the tab colors to match the company's standard color theme. Because TabFolder and TabItem are native widgets, they aren't very customizable and may not satisfy all business customization needs. On the other hand, CTabFolder and CTabItem are custom-drawn counterparts that are customizable. CTabFolder includes all the customizations in TabFolder, along with a number of additions.

Tab height

You can make tabs stand out more by increasing their height. Alternatively, you can save space by decreasing their height. Both tasks can be accomplished using the setTabHeight method.

tabFolder.setTabHeight(25);

This technique can be used in conjunction with larger font sizes to make the tab titles really stand out.

Fancy look

You can give your tabs a fancy look that has round edges, just like the tabs used for editors and views in the Eclipse IDE by default. To do so, use the setSimple method and pass it a false Boolean value.

tabFolder.setSimple(false);

Border visibility

The rounded-tab border can be toggled off using the setBorderVisible method.

tabFolder.setBorderVisible(false);

Run the CTabFolderExample to see these properties in action.

Tabs can also have a number of their color properties modified. You can customize the background color of selected tabs to be a gradient formed from multiple colors. In addition, you can customize the foreground color of a selected tab to fit with the background color using the method setSelectionForeground. To demonstrate, open the CTabFolderExample in the Java editor. Add the code below after the construction of the CTabFolder.

                    
Display display = Display.getCurrent(); 
int colorCount = 3; 
Color[] colors = new Color[colorCount]; 
colors[0] = display.getSystemColor(SWT.COLOR_TITLE_BACKGROUND); 
colors[1] = display.getSystemColor(SWT.COLOR_TITLE_BACKGROUND_GRADIENT); 
colors[2] = colors[0]; 
int[] percents = new int[colorCount - 1]; 
percents[0] = 4; 
percents[1] = 60; 
tabFolder.setSelectionBackground(colors, percents, true); 
tabFolder.setSelectionForeground(display.getSystemColor(SWT.COLOR_TITLE_FOREGROUND)); 

Running the example results in a change in appearance similar to below.

setSelectionBackground takes three parameters:

• color[] array containing different colors involved in the gradient
• int[] array containing the percentage that each color must occupy in the gradient; the last color percentage isn't specified explicitly, but is implied
• boolean indicating whether the direction of the gradient is vertical (top to bottom) or horizontal (left to right)

setSelectionForeground takes one parameter representing the foreground color (text color) of the selected tab.

Note the use of system colors SWT.COLOR_TITLE_BACKGROUND, SWT.COLOR_TITLE_BACKGROUND_GRADIENT, and SWT.COLOR_TITLE_FOREGROUND. These are the operating system theme colors. Using them ensures that the application looks and feels like the platform it's running on. As a more extreme example, modify the colors array shown below. Running the example shows a tab similar to that below.

                    
			Display display = Display.getCurrent(); 
            int colorCount = 5; 
            Color[] colors = new Color[colorCount]; 
            colors[0] = display.getSystemColor(SWT.COLOR_DARK_BLUE); 
            colors[1] = display.getSystemColor(SWT.COLOR_DARK_CYAN); 
            colors[2] = display.getSystemColor(SWT.COLOR_DARK_GREEN); 
            colors[3] = display.getSystemColor(SWT.COLOR_DARK_YELLOW); 
            colors[4] = display.getSystemColor(SWT.COLOR_DARK_RED); 
            int[] percents = new int[colorCount - 1]; 
            percents[0] = 20; 
            percents[1] = 20; 
            percents[2] = 20; 
            percents[3] = 20; 
            tabFolder.setSelectionBackground(colors, percents, true); 
            tabFolder.setSelectionForeground\
            (display.getSystemColor(SWT.COLOR_TITLE_FOREGROUND));

Single tabs

Sometimes it's more visually appealing to show a single tab if the tab titles are long. This makes only one tab appear at a time; a drop-down lets users switch to other tabs. Modify the CTabFolderExample with the line of code below.

tabFolder.setSingle(true);

You should now see tabs appear similar to those shown in figures 19 and 20.

9 of 18 | Previous | Next

Comments

Back to top

Table of contents

• Before you start
• Heavyweight and lightweight widgets
• Operating system-level theming
• Workspace setup
• Change fonts and colors
• Buttons
• Tables
• Tabs
• CTabFolder and CTabItem
• Forms API customization
• FormToolkit
• Form title area
• Use the Forms API's look and feel with wizards
• Custom-view toolbar
• Conclusion
• Download
• Resources
• About the authors

---

9 of 18 | Previous | Next

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

Dig deeper into Open source on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.