Absolute Positioning

One of the biggest challenges to Swing development is the Swing layout manager. The genius of this architecture is that it supports almost any conceivable mechanism for laying out controls, with many different implementations available right out of the box. The downfall is that it can make simple GUI layout difficult and confusing.

The quickest and most intuitive way to design a GUI is absolute positioning. Simply add, position and size controls into a suitable design and you're done. Most other successful platforms have been doing it this way for years.

The challenge with Swing is that controls are rendered natively on individual platforms. So a button on Mac OS X may need to be several points wider and taller than its counterpart on Windows. Ribs solution to this is to determine how much additional space may be required when loading a UI on a specific platform and growing the panel proportionally to accommodate the minimum requirement.

At that point there is the additional concept of user resizing. For this, Ribs utilizes a simple and powerful springs and struts interface, commonly used on the Mac.

Springs and Struts

The Ribs interface for configuring a control's springs and struts is found in the Location/Size inspector. Below is a screenshot of that inspector. It is currently configured with the default springs and struts settings. These settings instructs a control to maintain its position relative to the top/left of its window, to maintain its width/height and to allow its right/bottom margins to expand.

Fig 1 - Default spring settings keep controls position relative to top/left margins

Grow Horizontally

Now in this simple example, the label and button would probably never need to grow or change position, however, the text field and text area could certainly take advantage of space made available when the window grows. So for those two controls, we'll simply turn on the spring for the width and make the right margin a strut (turn off the spring).

Fig 2 - Turning on the width spring lets the text field and text area grow with the window

Grow Vertically

Now that's probably the best behavior for the text field, but the text area could further benefit from using any extra height made available. So for the text area, we'll turn on the height spring and make the bottom margin a strut.

Fig 3 - Turning on the height spring let's the text area grow vertically, too.

Grow Simultaneously

Finally, we'll show an example with two side by side lists. Each one grows horizontally and vertically, but each also allows its opposite margin to expand, so room is provided for the opposite control.

Fig 4 - Opposing, expandable controls should have a spring in opposing margin
(notice, too, how second label is anchored to top/right corner)

Only 32 Permutations!

It may take a bit of experimentation to get the hang of the sizing control, but remember, there are only six on/off settings (top, left, width, height, bottom, right). Try making some simple GUI screens and test the sizing using the Ribs preview button.

Ribs XML shorthand

If you inspect a .rib file in a text editor, you'll see that the sizing control is expressed with the attribute name "asize" using spring characters ("~") and strut characters ("-"). For example, the default sizing is represented as "--~,--~" (although Ribs will omit the attribute for the default configuration). The format is "horizontal,vertical" or "[left][width][right],[top][height][bottom]". Our examples above would be represented as thus:

• Label & Button: "--~,--~"
• Text Field: "-~-,--~"
• Text Area: "-~-,-~-"

You may never need this short hand directly, but if you do, it's a straight forward representation of the sizing control.