0097: The HeaderBar

Sometimes, a plain-jane Titlebar isn’t flexible enough and so we turn to the HeaderBar. This Widget allows:

reordering (or omission) of the standard minimize, maximize, and close buttons,
adding a sub-title below the title, and
extra widgets before or after the title and sub-title.

It’s also got rounded corners that would go nicely with the round-shouldered Notebook tabs we played with a while ago.

Let’s start with the simplest incarnation and build from there…

A Simple HeaderBar

Results of this example:

Current example terminal output (click for enlarged view)

Current example terminal output (click for enlarged view)

We’ll need a new import statement:

import gtk.HeaderBar;

Note: When using the HeaderBar widget, be sure to make the ‘B’ in ‘bar’ uppercase. This is unlike other GTK entities like Titlebar, Toolbar, Scrollbar, and Sidebar.

For this level of simplicity, we won’t bother deriving our own class/object from the HeaderBar class, we’ll just toss it into the TestRigWindow and as you may expect, we’ll do some declarations in the preamble:

string title = "HeaderBar Basics";
HeaderBar headerBar;

Nothing we haven’t seen before, so let’s look at how the HeaderBar gets attached to a window, which we’ll do in the constructor:

headerBar = new HeaderBar();
setTitlebar(headerBar);

Just instantiate it and tack it on with setTitlebar(). And that’s about as simple as we get with a HeaderBar.

One other thing you’ll notice if you compile and run this demo is that there’s no obvious way to close the Window. You’ll have to either kill it from the terminal (assuming you ran it from a terminal) with Ctrl-C or go through the Task Manager on Windows or, if you’re on Linux, the Gnome System Monitor. Or, also for Linux or whatever other UNIX-alike OS you may be running, top or htop will help you track down and kill the process.

Now let’s look at some of this flexibility we were talking about…

A Decorated HeaderBar

Results of this example:

This time, we’ll go the whole nine yards and derive our own version of the HeaderBar and it’ll look something like this:

class MyHeaderBar : HeaderBar
{
	bool decorationsOn = true;
	string title = "HeaderBar Demo";
	string subtitle = "complete with a full array of titlebar buttons";
	
	this()
	{
		super();
		setShowCloseButton(decorationsOn); // turns on all buttons: close, max, min
		setTitle(title);
		setSubtitle(subtitle);
		
	} // this()
	
} // class MyHeaderBar

Notice in the preamble, we’ve got a decorationsOn flag and a subtitle string. And when you look at the constructor, you’ll notice a call to setShowCloseButton(). From the name of this function, you might think there are corresponding functions for showing the minimize and maximize buttons, but that’s not the case. This one function, setShowCloseButton(), turns them all on.

And a little further down in the constructor, you’ll see how simple it is to stick a subtitle in there with setSubtitle().

Now let’s look at one more thing, how to take control of the layout within the HeaderBar…

HeaderBar Layout

Results of this example:

Let’s say, for sake of argument, we have reason to go all Mac-like and put the close button on the left. And for similar reasons, we want the Window’s custom icon on the right. With a HeaderBar, the order of things is controlled by the setDecorationLayout() function.

All else being more or less the same as our previous demo, all we have to do is make the call from within the constructor:

setDecorationLayout("close:minimize,maximize,icon");

There are some simple rules with this function:

no spaces anywhere,
anything before the colon appears to the left of the title and subtitle,
anything after the colon appears to the right of the title and subtitle.

Conclusion

Next time, we’ll continue exploring the HeaderBar, looking at how to toss other widgets into the mix. Until then…

Previous: Hardware III - Keyboard & Pointer

Is this article useful? Educational? Entertaining, perhaps?

You're free to accept or decline this invitation to become our newest sponsor.

Comments? Questions? Observations?

Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.

come on over to the D Language Forum and look for one of the gtkDcoding announcement posts,
drop by the GtkD Forum,
follow the link below to email me, or
go to the gtkDcoding Facebook page.

You can also subscribe via RSS so you won't miss anything. Thank you very much for dropping by.