General

• Welcome
• Download
• Release History
• About Abstractics

Documentation

• Quick Start
• Layout Concepts
• Layout Examples
• Floating Components
• Component Factory
• Misc Properties
• Converter Utility
• JavaDoc

Layout Concepts

Panels, Rows, Cells and the Componentized Structure

The XML layout is similar to a HTML table structure in that there is a root <panel> tag that contains <row> tags, and the row tags contain <cell> tags. (Similar to HTML <table>, <tr>, and <td> tags.) But that's where the similarities end. Swing layout is centered around individual Swing components, and so the XML layout follows that structure. The most notable difference is that while all sorts of things can be stuffed into a HTML <td> tag, in the XML layout each cell represents a single Swing component.

So why is the tag called <cell> instead of <component>? For one thing, cell is faster to type. But more importantly, it actually does represent a cell of space. The component that it contains actually "floats" inside that space. Understanding the placement of a component inside a cell, setting its sizing and alignment, becomes the focal point of how the XML layout works.

Another difference is that while HTML tables force an actual grid structure with virtual columns, the XML layout does not. For each row, the number of cells in it, as well as their widths, is independent of any other row. There is no need for "column spanning" in the XML layout.

Panel

Panel is the root XML element and represent the root panel as well. Panels can have an arbitrary number of rows, but must have at least one.

Row

A row holds a collection of cells. Each cell is represented in the row from left to right in the order that the <cell> tags appear. Rows are independant of each other, so while one row may have three cells, another row could have ten cells.

Cell

A cell represents a region of space within the panel. The size and location of that region are determined by the attributes on the cell, as well as from inherited attributes of the row and panel. The placement of the component inside that cell is also determined by the attributes of the cell.

Nesting Panels Within Panels

Just when you thought you understood everything we raise the complexity level. The XmlPanel is not a one dimensional creature, panels can be nested inside of other panels. It might seem confusing at first, but developers that are familiar with nesting HTML table tags inside of td tags will begin to feel at home. Since a cell is a container for a single component, and the XmlPanel is a component, it becomes natural to want to use it as a component.

In order to nest a new panel within a cell, simply add one or more <row> tags as children to the cell tag. This forces the containing cell tag to serve a dual purpose. It is still a cell, so the cell attributes are available. However it is now also a panel container, so the attributes for panel are available as well.

An example might be the easiest way to see the effect. The following XML lays out a panel with a single row. In the first cell is a stretched button. In the second cell is a subpanel that contains two rows with a single button in each row. Note the use of the margin attribute in the cell with the embedded panel. Margin is not a cell attribute, but it is a panel attribute, and since the cell is the root of the subpanel, the attribute takes effect.

<panel cellpadding="10">
    <row height="100%">
        <cell type="button" width="50%" stretch="both">Left</cell>
        <cell width="50%" stretch="both" margin="10">
            <row height="50%">
                <cell type="button" width="*" stretch="both">Top</cell>
            </row>
            <row height="50%">
                <cell type="button" width="*" stretch="both">Bottom</cell>
            </row>
        </cell>
    </row>
</panel>
	

This example will be starting point for explaining layout attributes and other examples in the next section.

Next: Layout Examples