Form layout

This document describes a method of setting up an application's UI XAL file to optimize the UI layout for the use of a form.

To create a form layout:

1. Create a horizontalBoxLayout.

The horizontalBoxPane lays out components from left-to-right.
You can align components in a horixontalBoxPane vertically and horizontally, using the attribute:

align="(start, center, end, or stretch)".

2. Create a verticalBoxPane for each column you want in your form.

The verticalBoxPane lays out components from top-to-bottom.
You can align components in a verticalBoxPane vertically and horizontally, using the attribute:

align="(start, center, end, or stretch)"

3. Create the label and textField components in each of the verticalBoxPanes.
You can align the text of these components using the attribute: horizontalAlignment="(right, center, or left)"

The following shows this layout pane configuration:

The following shows the entire form layout:

The following shows the XAL syntax that describes this layout:

<xal xmlns="http://openxal.org/ui/html">
  <horizontalBoxPane height="400px" width="500px" borderStyle="solid"
    borderWidth="1px" borderColor="#aaaaaa">
    <verticalBoxPane height="480px" width="120px" align="end" padding="0px 10px">
      <label height="25px" text="Artist" width="200px" horizontalAlignment="right" />
      <label height="25px" text="Recording" width="200px" horizontalAlignment="right" />
      <label height="25px" text="Release Date" width="200px"
        horizontalAlignment="right" />
    </verticalBoxPane>
    <verticalBoxPane height="480px" width="120px" align="start" padding="0px 10px">
      <textField height="25px" text="Value" horizontalAlignment="left" />
      <textField height="25px" text="Value"  width="200px" horizontalAlignment="left" />
      <textField height="25px" text="Value"  width="200px" horizontalAlignment="left" />
    </verticalBoxPane>
  </horizontalBoxPane>
 </xal>