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

Webinar: What's New in RAD Studio 12.1 Athens リプレイを見る

Behind the Build: The new C++Builder Clang Toolchain! リプレイを見る

New IBLite Edition and IBToGo Subscription Offer 詳細はこちら

Python、C++、VC。新ツール登場!詳細はこちら

製品利用の情報はサポートナレッジベース

Delphi / C++Builder Community Edition 10.4.2

CX_Logo_76x76px

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

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

記事インデックス

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

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

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


図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 TListBoxの配置

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

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

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


図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 プロパティを設定した入力ボックス

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

ビルドしてみよう

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


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

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