ThinWire Handbook: Layout Management

[next]

ThinWire Handbook: Layout Management

By Joshua Gertzen, Ted C. Howard

Digg This Add to del.icio.us

This chapter is excerpted from ThinWire Handbook: A Guide to Creating Effective Ajax Applications (Digital Short Cut), authored by Joshua Gertzen and Ted C. Howard, published by Prentice Hall, © Copyright 2007 Prentice Hall. All rights reserved.

ThinWire is an LGPL open source, free for commercial use, development framework that allows you to easily build applications for the Web that have responsive, expressive & interactive user interfaces without the complexity of the alternatives.

As you can see from the previous chapters, ThinWire greatly simplifies Web application development. Assembling a simple form is as easy as creating a Panel, creating Components, and placing the Components on the Panel, provided you specify the exact positions and sizes (in pixels) where you want to place the Components. Unfortunately, by bringing the desktop development model to the Web, we've also brought along the frustrations of calculating fixed pixel coordinates.

It starts out simple enough. You can make some basic assumptions about sizes and spacing between the Components, and do the calculations as you add a new Component. But what happens when you need to insert a Component in the middle of your form? Just imagining having to recalculate the ycoordinates of 20 Components makes me shudder. Or, what if you have a Panel that you want to resize with the browser? You could have a PropertyChangeListener on the Frame that recalculates the dimensions of your Panel, but, again, this can get tedious. There has to be a better way, and there is!

Enter Layout Managers

My long-standing rule is that if a task is too cumbersome or time-consuming, make somebody else do it. As a programmer, that "somebody else" is often times my computer. There's nothing like a computer for handling repetitive calculations, and that's pretty much the point behind a layout manager.

A layout manager is a common user interface helper found in many frameworks and in many languages. The ThinWire framework currently comes with just two layout managers that are designed for very different purposes. In this chapter, we discuss both layout managers in detail and wrap things up by showing you how to create your own layout manager.

First, let's talk about what makes up a layout manager. Although different layout managers may employ different concepts and techniques, all layout managers do fundamentally the same thing. By definition, they arrange or "lay out" where the Components of a Container should be positioned, and in some cases, what size the Components should be. Because of this commonality, all layout managers for ThinWire implement the thinwire.ui.layout.Layout interface. The interface defines an apply method and a set of common properties. The apply method is where the "magic" happens. Normally, the apply method is called automatically by the framework, but you can invoke it at will. It will recalculate the sizes and positions of all the Components in the Container.

Margin and Spacing

All Layouts have two common properties: margin and spacing. The margin is the space (in pixels) from the edge of the Container to the edge of the first Component. The spacing is the space (in pixels) between the Components. By having these properties be an inherent feature of a layout manager, you can line your Components right next to each other, and then later determine that they need to be spaced 2px apart.

[next]

URL: