書籍情報の入力項目を準備しよう
TLayoutを使う
ツールバーができたら、次に書籍情報を入力／表示するためのユーザーインターフェイスを作成します。ここで使用するのは、TLayoutです。書籍情報の入力／表示では、複数のUIコンポーネントを配置します。TLayoutは、これらのUIコンポーネントを、その領域内に配置して管理できます。次回以降でページの切り替えを実装しますが、あらかじめTLayoutで各UIコンポーネントをひとかたまりとして扱えるようにすることで、実装が容易になります。
TLayoutを配置したら、プロパティを設定します。設定するプロパティはAlignです。このプロパティを「Client」に設定することで、TLayoutが画面いっぱいに広がります。Nameプロパティを設定して、名前も設定します。
Layout1
TLabelとTEdit
作成するユーザーインターフェイスを図1-8に示します。ラベルにはTLabelを、入力ボックスにはTEditを使います。図を参考に、コンポーネントを配置してみましょう。
Tips:コンポーネントは、コピー＆ペーストが出来ます。Ctrl+Cでコンポーネントをクリップボードにコピーし、配置先（この場合はlayDetai）を選択してCtrl+Vでペーストすると、コンポーネントをコピー出来ます。また、IDEの[編集|位置揃え]を使って、コンポーネントの位置を揃えることも可能です。
図1-8 プロパティを設定した入力ボックス
配置したコンポーネントのプロパティを、それぞれ次のように設定します。
Label1
Edit1
Label2
Edit2
Label3
Edit3
Label4
Edit4
Anchorsプロパティは、アンカー（錨）のようにコンポーネントの4辺を固定する設定を行えます。akLeftを指定すると、そのコンポーネントの親（この場合はLayout1）に対して、左辺が固定されます。親のサイズや場所が変更されると、左辺がそれに追従していきます。akRightを指定すると、右辺が固定されます。akLeftとakRightの両方を指定すると、親の横幅が変わる（この場合は画面サイズが変わると横幅も変わります）と、それに合わせて幅が広がります。
UIコンポーネントの配置は、設計フォーム上で可視化されていますので、画面を見ながら調整ができますね。