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この文書では、アプリケーションのUI XALファイルの設定をし、フォーム使用時のUIレイアウトを最適化する方法を説明しています。
フォームレイアウトを作成するためには :
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:
horizontalBoxPane でコンポーネントを左から右にレイアウトする。
次の属性を使用することにより、horixontalBoxPane のコンポーネントを、縦または横に並べることができます。
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:
フォームで必要なコラムにverticalBoxPane を作成する
verticalBoxPane で上から下にコンポーネントをレイアウトする。
次の属性を使用することにより、verticalBoxPane のコンポーネントを縦または横に並べることができます。
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:各verticalBoxPanes でラベルコンポーネントと textField コンポーネントを作成する。
horizontalAlignment=(left | center | right) 属性を使用することにより、これらのコンポーネントのテキストを並べることができます。
次の例はレイアウトペインを示しています :
次の例はレイアウトからの全体を示しています:
次の例はこのレイアウトを表す XAL 構文を示しています :
| Code Block | ||
|---|---|---|
| ||
<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> |