初めてのデスクトップ プラットフォーム用 FireMonkey アプリケーションを作成する(C++)

提供: RAD Studio
移動先: 案内検索

FireMonkey クイック スタート ガイド - チュートリアル - 初めての FireMonkey アプリケーション への移動

このチュートリアルでは、2 つの異なるプラットフォーム(Windows と macOS)で動作する FireMonkey アプリケーションを作成します。このアプリケーションには、次のユーザー インターフェイス要素があります。

  • 名前を入力するためのテキスト フィールド
  • クリックすると "Hello" と表示されるボタン
  • "Hello + <名前>!" というメッセージを表示するラベル

この初めての FireMonkey アプリケーションは、Windows と macOS でそれぞれ次のスクリーンショットのように表示されます。

My First FireMonkey Application on Windows.png My First FireMonkey Application on Mac OS X.png

ステップ 1:空のアプリケーションを新規作成する

RAD Studio IDE の[ファイル]メニューでは、FireMonkey アプリケーションを新規作成することができます。新しい空のアプリケーションを作成するには、 [ファイル|新規作成|その他...|C++Builder プロジェクト|空のアプリケーション] を選択します。

Blank app.png

メモ: RAD Studio ではなく個別の C++Builder バージョンを持っている場合でも、上記の[ファイル|新規作成]アプリケーション メニューのステップは同じです。

次に示すのは、5 つの異なるペインが表示された IDE のスクリーンショットです。これらのペインは、好みに応じてドッキング/ドッキング解除したり閉じることができます。

5 つのペインとは次のとおりです。

IDE1.png


ステップ 2:FireMonkey HD フォームにコンポーネントを配置する

FireMonkey アプリケーションを作成するには、まず、ユーザー インターフェイスを設計します。IDE では、ユーザー インターフェイスを作成するための再利用可能なコンポーネントが何百も提供されています。カーソルを[ツール パレット]に移動し、[Standard]カテゴリのプラス(+)アイコンをクリックして展開します。その後、[TEdit]コンポーネントを選択して、フォーム デザイナにドロップします。TEdit コンポーネントのインスタンスがフォーム上に表示されます。

Palette.png Tedit.png

同じ手順で[TLabel]コンポーネントと[TButton]コンポーネントをフォームに追加します。

Tlabel.1.png Tbutton.1.png

これで 3 つのコンポーネントがフォーム デザイナ上にあるはずです。マウスを使って好きな位置にコンポーネントを配置し直します。

FireMonkey HelloWorld UI design.png

フォーム上でコンポーネントを選択した後、[オブジェクト インスペクタ]を使ってコンポーネントのプロパティを確認したり変更することができます。

Say hello.1.png Hello world.png

次に、TButton コンポーネントのボタン キャプションをビジュアルに変更します。この後のステップ 3 では、コードを記述することで、TEdit および TLabel のプロパティをプログラムで変更します。

上に示したスクリーンショットのように TButton のプロパティを変更するには、フォームで TButton コンポーネントを選択し、[オブジェクト インスペクタ]に表示された[Text]プロパティを "Say Hello" に変更します。その後、Enter キーを押すと変更が反映されます。


ステップ 3:ユーザーがボタンをクリックしたときの応答を C++ コードで記述する

GUI アプリケーションでは、ボタンをクリックしたりテキスト フィールドに入力するといったユーザーのアクションに対する応答のほとんどは、イベントに対する応答として実装できます。RAD Studio では、そのような応答のことをイベント ハンドラと呼びます。

TButton コンポーネントの場合、最も典型的なイベントはボタンのクリックです。フォーム デザイナでボタンをダブルクリックすると、ボタン クリック イベントのイベント ハンドラを実装するためのスケルトン コードが RAD Studio によって生成されます。

New form code cpp.png

これで、Button1Click メソッドの中かっこの間に応答を実装できます。小さいダイアログに "Hello + <編集ボックスに入力した名前>" と表示するよう応答を実装します。

 Label1->Text = "Hello " + Edit1->Text + " !";

C++ では、文字列リテラルを囲む引用符は " " です。また、プラス(+)記号を使用して文字列を連結することもできます。

コードを入力している途中に、指定しなければならないパラメータの種類を示すヒントが表示されます。また、クラスでサポートされているメンバの種類もヒントで示されます。

CodeInsight in action for FireMonkey application cpp.png


ステップ 4:アプリケーションを実行する

アプリケーションの実装が終わったので、実行することができます。IDE の[実行]ボタンをクリックするか、F9 キーを押すか、RAD Studio のメイン メニューで[実行|実行]を選択します。

Run my first FireMonkey application cpp.png

アプリケーションを実行すると、編集ボックスとボタンを持つフォームが表示されます。編集ボックスにテキストを入力し、[Say Hello]ボタンをクリックします。

My First FireMonkey Application on Windows.png


ステップ 5: macOS をサポートする

デフォルトでは、RAD Studio は 32 ビット版の Windows オペレーティング システムを対象としたアプリケーションを作成します。 macOS をターゲット プラットフォームに追加するには、[プロジェクト マネージャ]の[ターゲット プラットフォーム]ノードを右クリックし、[プラットフォームの追加...|macOS]を選択します。 これで Win32 と macOS の両方のプラットフォーム向けにプロジェクトをビルドすることができます。

Add platform.1.png MacOS.1.png

メモ: 開発環境は Windows 上にあります。 つまり、ネイティブの macOS アプリケーションを Windows マシンで実行することはできません。 IDE を macOS マシンに接続する必要があります。

アプリケーションを macOS に配置してリモート デバッグ セッションを自動的に確立できるよう、RAD Studio ではプラットフォーム アシスタント(PAServer)というツールを提供しています。

WhiteSpace50.png

接続プロファイルを定義する

macOS マシンに PAServer をインストールした後、次の手順で IDE を Mac に接続します。

  1. [プロジェクト マネージャ]で[ターゲット プラットフォーム]の下の[macOS]ノードを右クリックし、[プロパティ...]を選択します。
    Target platforms1.png
  2. [プラットフォーム プロパティ]ダイアログ ボックスの[プロファイル]コンボ ボックスで、[新規追加...]を選択します。
    Platform properties.1.png
  3. プロファイルの名前を入力します。
    Specify name for remote profile.png
  4. Mac の名前(または IP アドレス)を指定します。
    Specify name of your mac.png


SDK を定義する

接続プロファイルを作成した後で、開発用システムに SDK を追加し、macOS マシンからファイルを取り込むことができます。手順は以下のとおりです。

  1. [プロジェクト マネージャ]で[ターゲット プラットフォーム]の下の[macOS]ノードを右クリックし、[プロパティ...]を選択します。
    Target platforms1.png
  2. [プラットフォーム プロパティ]ダイアログ ボックスの[SDK (ソフトウェア開発キット)]コンボ ボックスで、[新規追加...]を選択します。
    Platform properties1.png
  3. [接続するプロファイルの選択]コンボ ボックスで、新しく追加した接続プロファイルを選択します。
    Add sdk1.png
  4. [SDK バージョンの選択]コンボ ボックスで、最も基本の SDK バージョンである[Command Line Tools]を選択します。
    Add sdk2.png


ステップ 6: macOS でアプリケーションを実行する

これで IDE が Mac と接続されています。もう一度 F9 キーを押して、アプリケーションを Mac 上で実行します。アプリケーションは次の画像のように表示されるはずです。

My first FireMonkey application running on Mac.png

詳細情報