Implementing a TitleBar layout

(Using IT Mill Toolkit 5.2.4)

Almost all applications that I have worked with here at IT Mill have implemented some sort of TitleBar layout in the main application layout. It usually consists of the application/company logo in the top left corner of the screen and some very common menu options in the top right corner (e.g. "Preferences", "Help", "Logout").

Here's how to implement a similar title bar with IT Mill Toolkit layouts and components.

First, we need the logo on the top left and our buttons on the top right:

// I use the casual Label here for convinience, 
// since we don't have any real image to use now.
Label logo = new Label("Company Logo");

// The Three Common Buttons
Button prefs = new Button("Preferences");
Button help = new Button("Help");
Button logout = new Button("Logout");

Then all we need to do is to add these into an ExpandLayout, which will push the buttons to the right side of the screen:

ExpandLayout titlebar = new ExpandLayout(ExpandLayout.ORIENTATION_HORIZONTAL);

// ExpandLayout will by default take all available space 
// in both directions, so we'll set the height back to auto
titlebar.setHeight(-1);

// Then we add the components to the layout
titlebar.addComponent(logo);
titlebar.addComponent(prefs);
titlebar.addComponent(help);
titlebar.addComponent(logout);

// The following statement is redundant, since ExpandLayout will 
// by default expand the first component attached to it, but I'll use it 
// here just to show you how to use it. This will cause the layout to 
// give the "logo" component as much space as it can get within 
// the layout's dimensions.
titlebar.expand(logo);

To make the layout a bit more pleasing, we can add some spacing between the buttons, by using the setSpacing-method of the ExpandLayout.

titlebar.setSpacing(true);

And that's it! You have a title bar.

Here's the complete code:

Label logo = new Label("Company Logo");

Button prefs = new Button("Preferences");
Button help = new Button("Help");
Button logout = new Button("Logout");

ExpandLayout titlebar = new ExpandLayout(ExpandLayout.ORIENTATION_HORIZONTAL);
titlebar.setHeight(-1);
titlebar.addComponent(logo);
titlebar.addComponent(prefs);
titlebar.addComponent(help);
titlebar.addComponent(logout);
titlebar.setSpacing(true);

Note You need to place the ExpandLayout in a parent layout that allows 100% width. This can be achieved in your main window like so:

mainWindow.getLayout().setWidth("100%");
mainWindow.getLayout().addComponent(titleBar);

Back to layout examples