フォーム・レイアウト

現在、フォーム上のコントロール・コンポーネントは、縦向きに並べられ、間にスペースはありません。そこで、spacer コンポーネントと hgroup コンポーネントを追加して、フォーム・レイアウトを改善します。

まず、State テキスト・コントロールと Zip Code テキスト・コントロールを表している最後の 2 つの text コンポーネントを、hgroup コンポーネントの内側に配置します。続けて、その間に spacer コンポーネントを配置します。結果は以下のようになります。

<hgroup>
 <text label="State:" dataBinding = "State" size="2"/>
 <spacer width="5"/>
 <text label="Zip Code:" dataBinding = "Zip"  size="10"/>
</hgroup>

次に、フォーム上の最初の 4 つの各コントロール・コンポーネントの後に spacer コンポーネントを追加します。結果は以下のようになります。


<text label="Name:" dataBinding="Name" size="25" />
<spacer height=".5"/>  
<dataCombo label="Type" name="ContactType" id="ContactType" size="25"
              dropdownHeight="150px" editable="false" unrestricted="true"
              dataBinding="ContactType" />                                
<spacer height=".5"/>
<text label="Street:" dataBinding = "Street" size="25"/>
<spacer height=".5"/>
<text label="City:" dataBinding = "City" size="25"/>
<spacer height=".5"/>