ThinWire Handbook: Layout Management
ThinWire Handbook: Layout Management
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
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
Layout Ignores Other Position/Dimension Settings
Container is managed by a layout manager, the x, y, width, and height properties should not be used on the
Components. If you set values for these properties, they will be ignored and will be overwritten by the calculated values from the layout manager.
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.
Controlling When Layout Occurs with Auto Apply
The two Layouts included with ThinWire are both set to auto apply by default. This means that when the dimensions or the content of the
Container change, the layout is recalculated and applied automatically. There is usually no need for the developer to ever invoke the apply method. If for some reason this behavior is not desired, you may call setAutoApply(false).