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>