InterBase 2020 is here! 詳細はこちら

RAD Studio 10.3.2リリース!詳細はこちら

お得なキャンペーン情報はこちら

Renew your Update Subscription license now 詳細はこちら

CX_Logo_76x76px

実践!ビジュアルC++プログラミングで学ぶマルチデバイスアプリ開発

C++Builder Community Editionで始めるビジュアルC++開発

書籍情報の入力項目を準備しよう

TLayoutを使う

ツールバーができたら、次に書籍情報を入力/表示するためのユーザーインターフェイスを作成します。ここで使用するのは、TLayoutです。書籍情報の入力/表示では、複数のUIコンポーネントを配置します。TLayoutは、これらのUIコンポーネントを、その領域内に配置して管理できます。次回以降でページの切り替えを実装しますが、あらかじめTLayoutで各UIコンポーネントをひとかたまりとして扱えるようにすることで、実装が容易になります。

TLayoutを配置したら、プロパティを設定します。設定するプロパティはAlignです。このプロパティを「Client」に設定することで、TLayoutが画面いっぱいに広がります。Nameプロパティを設定して、名前も設定します。

Layout1
プロパティ
Align
Client
Name
layDetail

TLabelとTEdit

作成するユーザーインターフェイスを図1-8に示します。ラベルにはTLabelを、入力ボックスにはTEditを使います。図を参考に、コンポーネントを配置してみましょう。

Tips:コンポーネントは、コピー&ペーストが出来ます。Ctrl+Cでコンポーネントをクリップボードにコピーし、配置先(この場合はlayDetai)を選択してCtrl+Vでペーストすると、コンポーネントをコピー出来ます。また、IDEの[編集|位置揃え]を使って、コンポーネントの位置を揃えることも可能です。

1 8
図1-8 プロパティを設定した入力ボックス

配置したコンポーネントのプロパティを、それぞれ次のように設定します。

Label1
プロパティ
Text
ISBN13
Name
lblISBN13
Edit1
プロパティ
Anchors
[akLeft,akTop,akRight]
Height
30
Name
edtISBN13
Label2
プロパティ
Text
ISBN10
Name
lblISBN10
Edit2
プロパティ
Anchors
[akLeft,akTop,akRight]
Height
30
Name
edtISBN10
Label3
プロパティ
Text
書名
Name
lblTitle
Edit3
プロパティ
Anchors
[akLeft,akTop,akRight]
Height
30
Name
edtTitle
Label4
プロパティ
Text
副題
Name
lblSubTitle
Edit4
プロパティ
Anchors
[akLeft,akTop,akRight]
Height
30
Name
edtSubTitle

Anchorsプロパティは、アンカー(錨)のようにコンポーネントの4辺を固定する設定を行えます。akLeftを指定すると、そのコンポーネントの親(この場合はLayout1)に対して、左辺が固定されます。親のサイズや場所が変更されると、左辺がそれに追従していきます。akRightを指定すると、右辺が固定されます。akLeftとakRightの両方を指定すると、親の横幅が変わる(この場合は画面サイズが変わると横幅も変わります)と、それに合わせて幅が広がります。

UIコンポーネントの配置は、設計フォーム上で可視化されていますので、画面を見ながら調整ができますね。