InterBase 2020 is here! 詳細はこちら

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

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

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

Visit the new Registered Products Portal こちらからダウンロード

CX_Logo_76x76px

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

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

さまざまなコンポーネントを使おう

日付型の情報入力ができるUIコンポーネント

出版日と購入日の情報入力ができるUIコンポーネントを配置します。日付の入力には、TDateEditコンポーネントを使います。このコンポーネントは日付入力用に用意されており、日付チェックなどの手間が省けます。

1 9
図1-9 TDateEditの配置

図1-9のように、TLabelとTDateEditを2組み配置して、それぞれプロパティを設定します。

Label5
プロパティ
Text
出版日
Name
lblPublshedDate
DateEdit1
プロパティ
Height
30
Name
dtePublishedDate
Label6
プロパティ
Text
購入日
Name
lblPurchaseDate
DateEdit2
プロパティ
Height
30
Name
dtePurchaseDate

FireMonkeyには日付や時間を扱うためのUIコンポーネントの他にもたくさんのUIコンポーネントが揃っています。この場合は日付でしたが、時刻の入力や表示、色の一覧をドロップダウンして選択できるコンポーネントなどもあります。

リスト項目を表示するUIコンポーネント

著者一覧を表示するUIを作成します。著者は複数人いることがありますのでリスト項目を使います。リスト項目のUIコンポーネントは、TListBoxです。

1 10
図1-10 TListBoxの配置

Label7
プロパティ
Text
著者
Name
lblAuthors
ListBox1
プロパティ
Anchors
[akLeft,akTop,akRight]
Height
105
Name
lstAuthors

画像を表示するUIコンポーネント

最後に、書影の画像を表示するコンポーネントを配置します。JPEGやPNGなどの画像フォーマットを表示させるグラフィックコンポーネントとしてTImageControlが用意されています。

1 11
図1-11 TImageControlの配置

図1-11のようにTLabelとTImageControlを配置し、プロパティを設定します。

Label8
プロパティ
Text
書影
Name
lblCover
ImageControl1
プロパティ
Anchors
[akLeft,akTop,akRight,akBottom]
Height
169
Name
imgCover

メインのユーザーインターフェイス作成は、これで完了です。最終的なコンポーネントの配置は図1-12を参考にしてください。

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

お気づきかと思いますが、C++のコードは一行も書いていません。これらのUIコンポーネントの配置をすべてコードで書くことを想像すると、デザイナ上でドラッグ&ドロップで設計する効率の良さがお分かりいただけると思います。

ビルドしてみよう

C++のコーディングは、次回以降で行います。今回作成したアプリケーションをビルドして、実行してみましょう。実行ボタン(または[実行|デバッガを使わずに実行]メニューを選択)をクリックすると、プロジェクトがビルドされ、ターゲットプラットフォーム(デフォルトでは「Win32」)でアプリケーションが起動します。

1 13
図1-13 Windows向けにビルドして実行

iPhoneやAndroidといったマルチデバイス向けのビルドもできるのですが、その辺はもう少し先で。次回はこの画面とデータベースを連携させます。