Form layout

この文書では、アプリケーションのUI XALファイルの設定をし、フォーム使用時のUIレイアウトを最適化する方法を説明しています。

フォームレイアウトを作成するためには :

1. horizontalBoxLayout を作成する

horizontalBoxPane でコンポーネントを左から右にレイアウトする。
次の属性を使用することにより、horixontalBoxPane のコンポーネントを、縦または横に並べることができます。

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

2. フォームで必要なコラムにverticalBoxPane を作成する

verticalBoxPane で上から下にコンポーネントをレイアウトする。
次の属性を使用することにより、verticalBoxPane のコンポーネントを縦または横に並べることができます。

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

3. 各verticalBoxPanes でラベルコンポーネントと textField コンポーネントを作成する。

horizontalAlignment=(left | center | right)　属性を使用することにより、これらのコンポーネントのテキストを並べることができます。

次の例はレイアウトペインを示しています :

次の例はレイアウトからの全体を示しています:

次の例はこのレイアウトを表す XAL 構文を示しています :

<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>