フォーム デザイナ
RAD Studio 入門 への移動
フォーム デザイナ（またはデザイナ）は、Windows VCL アプリケーション や HD マルチデバイス アプリケーションなどのフォームを作成または編集する際に、自動的に表示されます。フォーム デザイナは、フォーム ファイル（.dfm ファイルまたは .fmx ファイル）を使用するグラフィカル アプリケーションを作成すると、自動的に起動します。
フォーム デザイナ（またはデザイナ）は、HD マルチデバイス アプリケーションなどのフォームを作成または編集する際に、自動的に表示されます。フォーム デザイナは、フォーム ファイル（.fmx ファイル）を使用するグラフィカル アプリケーションを作成する時に自動的に起動します。
IDE でビジュアル プロジェクトを開いているときにフォーム デザイナにフォーカスを移動するには、メイン編集ウィンドウの最下部にある［デザイン］タブをクリックします。
デザイナの外観と機能は、作成または編集しているフォームの種類によって変わります。たとえば HTML 要素を使用している場合には、 ［表示｜タグ エディタ］を選択すると、デザイナに HTML タグ エディタを表示することができます。
目次
フォーム デザイナ ウィンドウ
これは マルチデバイス フォーム（FireMonkey） と Windows VCL アプリケーション で、マルチデバイス アプリケーション、または、Windows VCL アプリケーションを作成すると、フォーム デザイナに（個別に）表示されます。
|
マルチデバイス フォーム
|
|
|
VCL フォーム |
|
これら 2 つのフォームは外見が異なりますが、それは、VCL フォームがネイティブの Windows フォームであるのに対して、マルチデバイス フォームはプラットフォームに依存せず、FireMonkey ツールでカスタム描画されるためです。たとえば、VCL フォームには、最小化やサイズ変更を行ったり閉じるためのコマンドを実行する、標準の Windows ボタンが表示されます。マルチデバイス フォームには、プラットフォーム非依存の［マスタ］ビューがデフォルトで表示されます。マルチデバイス アプリケーションは使用可能なプラットフォームのどれでもターゲットとすることができますが、VCL のターゲットとなるのは Windows だけです。
見た目は異なりますが、フォーム デザイナの動作は FireMonkey と VCL でほとんど同じです。1 つ異なるのは、サポートされいてるコンテキスト メニュー コマンドが、FireMonkey と VCL ではいくつか異なる点です。
以下に示すのは、マルチデバイス アプリケーションの作成時にフォーム デザイナに表示されるマルチデバイス フォームです。
|
マルチデバイス フォーム |
|
スタイル セレクタ
マルチデバイス フォーム デザイナには、［マスタ］ビューで使用する基本の設計時プラットフォーム スタイルを選択するためのスタイル セレクタがあります。ここには、マルチデバイス アプリケーションのターゲットとなり得るプラットフォームに合わせて、以下のスタイルが含まれています。
- ［Windows］
- macOS
- ［iOS］
- ［Android］
設計時にマスタビューのスタイルを選択すると、選択されたスタイル/プラットフォームに関係するすべてのプロパティが表示されます。たとえば、Android デバイスの TButton の StyleLookup プロパティを定義したい場合には、Android スタイルを選択します。StyleLookup プロパティのオブジェクト インスペクタ のドロップダウン メニューで利用可能なオプションには、Android デバイス用の選択肢が含まれている点に注目してください。
ビュー セレクタ
マルチデバイス フォーム デザイナにはビュー セレクタがあり、このドロップダウン メニューには、iOS、Android、Windows、OS X などのさまざまな具体的なデバイスを表す［使用可能］なビューがすべて表示されます。［使用可能］リストからプロジェクト用のビューを選択すると、そのビューは［作成済み］リストに追加されます。「FireMonkey ビューの使用」を参照してください。
ビュー セレクタには以下のコントロールがあります。
| アイコン | 説明 |
|---|---|
|
|
ビューのドロップダウン リストから現在のビューを選択します。 ［使用可能］リストでビューをクリックするだけで、プロジェクトにビューを追加することができます。「マルチデバイス プロジェクトへのビューの追加」を参照。 ビューを作成してカスタマイズし、ビュー セレクタに追加することもできます。「カスタマイズしたビューのビュー セレクタへの追加」を参照。 |
|
|
現在のビューを削除します。［確認］ダイアログ ボックスが表示されます。 ビューはコードから削除されます。 |
|
|
現在のビューを時計回りに 90 度回転させます。モバイル ビューでのみ使用可能です（デスクトップ ビューでは使用できません）。 |
|
|
選択したビューのフレームを非表示にします（または既に非表示になっている場合にはフレームを表示します）。 |
ビューの削除
現在のビューを回転
フォーム フレームの表示/非表示
ビジュアル コンポーネント
ビジュアル コンポーネントをお使いの マルチデバイスや VCL のフォームに IDE の右下のセクションにあるツール パレットから、フォームに作成された選択コンポーネントをドラッグすることで、追加することができます。これらは、実行時にエンド ユーザーに表示されるコンポーネントです。ツール パレットで使用できるオブジェクトは設計しているアプリケーションやフォームのタイプによって、動的に変わります。
［ツール パレット］には、ボタン、ラベル、ツールバー、リスト ボックスなどのコントロールが、さまざまなツール カテゴリごとに表示されます。プロジェクト レベルで作業している場合は、アプリケーションのタイプ（DLL ウィザード、コンソール アプリケーションやロゴ アプリケーションなど）が、Web アプリケーションに対して作業している場合は、Web コントロール、HTML 要素、およびデータ コンポーネントが表示されます。
フォーム デザイナ上のビジュアル コンポーネントおよび非ビジュアル コンポーネントのプロパティやイベントは、［オブジェクト インスペクタ］を使って表示したり設定することができます。
非ビジュアル コンポーネント
GestureManager などの非ビジュアル コンポーネントもフォームに配置されますが、設計時にしか表示されず、実行時にエンド ユーザーに表示されることはありません。また、非ビジュアル コンポーネントを使用して、データベース オブジェクトやシステム オブジェクトをグループで再利用したり、アプリケーションのうちデータベース接続やビジネス ルールを処理する部分を分離したりできます。
IDE では、設計時に非ビジュアル コンポーネントの非表示または表示を切り替えることができます。
コンテキスト メニュー
フォーム デザイナでフォームを右クリックすると、コンテキスト メニューが表示されます。コンテキスト メニュー コマンドは、以下の表で特に言及しない限り、VCL と FireMonkey の両方で使用できます。
| 項目 | 説明 |
|---|---|
|
［クイック設計フォーム］ |
一般 VCL フォーム設計レイアウトを表示します。 |
|
［編集］ |
次の［編集］サブコマンドから選択して、フォーム デザイナの各種コンテンツに適用します。
|
|
［コントロール］ |
選択したコントロールを前面または背面に移動します。次のサブコマンドから選択します。 |
|
［コントロールの追加］ |
VCL デザイナに追加できる共通コントロールを一覧表示します。これらのコントロールはアクティブなコントロールの親になります。 |
|
［コンポーネントの追加］ |
VCL デザイナに追加できる一般的なコンポーネントを一覧表示します。 |
|
コントロール編集可能なダイアログ ボックスを開きます。 | |
|
［クイック編集アイコン…］ |
フォーム アイコン編集可能なダイアログ ボックスを開きます。 |
|
（［ツール｜オプション...｜LiveBinding］で有効にした場合のみ） |
［LiveBinding ウィザード］が開きます。 |
|
［LiveBinding デザイナ］が開きます。 | |
|
［位置］ |
選択したコントロールの位置、サイズ、およびスケールを設定します。次のサブコマンドから選択します。
|
|
左右を入れ替えます。次のサブコマンドから選択します。
| |
|
［タブ順序...］ |
［タブ順序の設定］ダイアログ ボックスを表示します。 |
|
［作成順序...］ （非ビジュアル コンポーネント） |
［作成順序］ダイアログ ボックスが開きます。 |
|
設計時に非ビジュアル コンポーネントの非表示/表示を切り替えることができます。 | |
|
選択したコントロールのプロパティ、メソッド、およびイベントを、基底クラス コントﾛールの値でリセットします。「［継承元の値に戻す］」を参照。 | |
|
［リポジトリに追加...］ |
［リポジトリに追加］ダイアログ ボックスが開きます。 |
|
［テキスト形式 FMX］ |
フォーム ファイルをテキスト形式（オンの場合）またはバイナリ形式（オフの場合）で保存します。「［テキスト形式 DFM］または［テキスト形式 FMX］」を参照。 |
|
［項目エディタ...］ （一部の FireMonkey コンポーネント） |
選択しているコントロールに対する項目デザイナが開きます。 |
|
［項目の追加］ （一部の FireMonkey コンポーネント） |
フォーム上で選択したコントロールに項目を追加することができます。たとえば、マルチデバイス フォームに TEdit コントロールを追加した場合、TEdit コントロールを右クリックして［項目の追加］を選択し、TPasswordEditButton などの組み込みグリフを追加することができます。 |
|
［デフォルト スタイルの編集...］ （FireMonkey デスクトップ コントロール） |
FireMonkey スタイル デザイナが開きます。 詳細は、「スタイルを使った FireMonkey アプリケーションのカスタマイズ」を参照。 |
|
［ダイアログのテスト］ （VCL のみ） |
任意のモーダル VCL ダイアログ ボックスに対して、ダイアログをテストします。フォーム デザイナ上の OpenDialog を右クリックして ［ダイアログのテスト］を選択すると、標準の「ファイルを開く］ダイアログが表示されます。 |
フォーム デザイナのショートカット キー
以下のショートカット キーを使用して、フォーム デザイナ上のコンポーネントを移動したりサイズ変更することができます。
| ショートカット | 動作 |
|---|---|
|
|
マウスによって選択されている領域の内部にある親コントロールから、すべての子コントロールを選択します。 |
|
|
複数のコントロールを同時に選択します。 選択する別のコントロールをクリックしている間、〔Shift〕キーを押しておきます。 |
|
|
選択したコンポーネントをゆっくりと移動します。 |
|
|
コンポーネントを高速で移動します。 |
|
|
コンポーネント間でフォーカスを移動します。 |
|
|
コンポーネントのサイズを変更します。 |
|
|
親コンポーネントを選択します。 |
|
|
次の編集タブに移動します。 |
|
|
前の編集タブに移動します。 |
ガイドラインと機能
RAD Studio は、VCL および FMX に対して、キャプション エディタやクイック設定オプションといった、複数のデザイナが含まれています。以下は、エディタやクイック設定機能の概要説明です。
文字列リスト エディタ
文字列リスト エディタは、stringlist プロパティを持つコンポーネントで利用できます。文字列リスト エディタでは、文字列リスト（個々の文字列のセット）を編集することができます。
このエディタには、以下の機能のツールバーが含まれています：
- ファイルを開く。
- 作業を保存する。
- 作業を標準のクリップボード操作（切り取り、貼り付け、選択、削除、元に戻す、などの各オプション）で編集する。
- 位置情報を持つステータス バー
- ［コード エディタ…］オプションをクリックすると、文字列リスト エディタをコード エディタに変更できます。.
- ヘルプでは、この機能の使用中に疑問が生じた場合にサポートします。
次の手順で、文字列リスト エディタにアクセスします：
- TMemo コントロールなどのオブジェクトを選択します。
- オブジェクト インスペクタで Lines プロパティを探します。
- 省略ボタンをクリックします。
- 文字列リスト エディタが開いたら、テキストを希望通りに編集します。
複数行文字列エディタ
複数行文字列エディタは、一部の VCL コントロールで利用でき、Caption プロパティに複数行のテキストを表示することができます。このプロパティは、すべてのコントロールの Hint プロパティで利用可能です。
このエディタでは、改行文字を手動で追加することは避けてください。コードで複数行文字列を指定する代わりに、単純に Enter を押して、新しい行を追加してください。
次の手順で、複数行文字列エディタにアクセスします：
- TButton コントロールなどのオブジェクトを選択します。
- オブジェクト インスペクタで Caption プロパティを探します。
- 省略ボタンをクリックします。
- 複数行文字列エディタが開いたら、テキストで改行セパレータを使用しながら、テキストを希望通りに編集します。
クイック設定
RAD Studio では、さまざまなクイック設定オプションが用意されており、簡単な方法でオブジェクトの設定をすることができます。 それらには、次のものがあります：
FireMonkey スタイル デザイナ
FireMonkey スタイル デザイナでは、 VCL デザイナにあるガイドラインとその他機能を、異なる実装で導入しています。 これら新機能には次のようなものがあります：
1. コンポーネント ヒントが、ユーザーが移動またはサイズ変更した際に表示されます。
2. コントロールでは、辺に整列のためのガイドラインが提供されています（基本的なテキスト整列については予定はありません。スタイル付きコントロールに対するテキストの配置は複雑なためです：
3. コントロールは、マージンやパディングの距離と一致する場合には、標準マージン距離をクロスの線と距離表記で表示します。
4. フォームおよびコンポーネントのサイズ変更コントロール（コントロールが選択したら、ハンドルを握り、フォームやフレームのデザイン エッジをサイズ変更します）は、VCL フォーム デザイナと同じルック＆フィールを使用するよう変更されました。