フォーム デザイナを使用してコンポーネントを追加する(IDE チュートリアル)

提供: Appmethod Topics
移動先: 案内検索

Appmethod アプリケーションを初めて作成する(IDE チュートリアル):インデックス への移動


これでメイン フォームのセットアップが完了したので、次に、テキスト エディタ アプリケーションの作成に必要なコンポーネントを配置します。まず、ファイル操作や編集のための基本オプションとワードラップの切り替えなどのその他のオプションを提供するメニュー バーを追加する必要があります。

アクション リストの追加

アプリケーションの基本機能を自動的に提供するため、フォームにアクション リストを追加します。それには、[デザイン]タブが選択されていることを確認したうえで、[ツール パレット]に移動し、検索ボックスに「action」と入力します。その結果、TActionList コンポーネントなど、名前に "action" という文字列が含まれるコンポーネントのみ表示されます。[ツール パレット]は次のようになります。

TutorialIDEFig3-7.png
[ツール パレット]action フィルタを使用して TActionList を選択する

[TActionList]をダブルクリックして、フォームに追加します。次に、この TActionList の名前をアプリケーションに合わせて変更します。TActionList のアイコン(ActionList.png)をクリックしてアクティブにします。[オブジェクト インスペクタ]で、[Name]プロパティをクリックしその値を ActionList に変更します。

ヒント: コードでは名前を使ってコンポーネントにアクセスしなければならない場合があるため、コンポーネントに適切な名前を付けることは非常に重要です。覚えやすい名前を設定すると役に立ちます。

メイン メニューの追加

次に、フォームにメイン メニュー バーを配置します。それには、[ツール パレット]の検索ボックスに「menu」と入力すると、TMainMenu コンポーネントが簡単に見つかります。このフィルタを使用した場合、[ツール パレット]は次のようになります。

ToolPaletteSearchForMenu.png
[ツール パレット]で menu フィルタを使用して TMainMenu を選択する

[TMainMenu]をダブルクリックしてフォームに追加し、[オブジェクト インスペクタ]を使用してその Name プロパティの値を MainMenu に変更します。

ステータス バーの追加

次に、フォームにステータス バーを配置します。それには、[ツール パレット]の検索ボックスに「status」と入力すると、TStatusBar コンポーネントが簡単に見つかります。このフィルタを使用した場合、[ツール パレット]は次のようになります。

TutorialIDEFig3-8.png
[ツール パレット]で status フィルタを使用して TStatusBar を選択する

これまでのコンポーネントの場合と同様に、[TStatusBar]をダブルクリックしてフォームに追加し、[オブジェクト インスペクタ]を使用してその Name プロパティの値を StatusBar に変更します。

テキスト ボックスの追加

追加する必要がある最も重要なコンポーネントは、アプリケーションの主要機能つまりテキスト エディタの機能を提供するテキスト ボックスです。[ツール パレット]の検索ボックスに「memo」と入力すると、TMemo コンポーネントが簡単に見つかります。このフィルタを使用した場合、[ツール パレット]は次のようになります。

TutorialIDEFig3-9.png
[ツール パレット]で memo フィルタを使用して TMemo を選択する

[TMemo]をダブルクリックしてフォームに追加し、[オブジェクト インスペクタ]を使用してその Name プロパティの値を Editor に変更します。

ファイルを開くおよび保存するためのダイアログの追加

追加するコンポーネントはあと、ファイルを開いたり保存するためのダイアログ ボックスを実現する非ビジュアル コンポーネントだけです。これらは、エディタの基本的なファイル オープン/保存機能を実装するために必要になります。[ツール パレット][Dialogs]カテゴリをクリックします。

MemoTutorialToolPaletteDialogsCategory.png

[TOpenDialog][TSaveDialog]の両方をダブルクリックして、それぞれのコンポーネントのインスタンスを 1 つずつフォームに追加します。そのあと、[オブジェクト インスペクタ]を使用して、それらの Name プロパティの値をそれぞれ OpenFileDialogSaveFileDialog に変更します。

これで、メイン フォームには、フォームに追加したアクション リスト、メイン メニュー バー、ステータス バー、メモ、ダイアログ ボックスの各 コンポーネントが表示されます。

TutorialIDEFig3-10.png
基本的なテキスト エディタ フォーム

アクションの定義

フォームの設計を完了するために、メイン メニューに項目を追加する必要があります。まず、フォーム上のアクション リスト コンポーネントをダブルクリックして、アクション リスト エディタを開きます。

TutorialIDEFig3-11.png

これで、メイン メニューに項目を作成できるようになりました。

テキスト エディタにはファイル操作機能が少し必要なので、アクションをいくつか定義しなければなりません。[新規アクション]ボタンをクリックして、カスタム アクションを新しく作成します。

その新規アクションが選択された状態で、[オブジェクト インスペクタ]でその Category プロパティの値を File に変更します。この新しいカテゴリは Appmethod のアクション リスト エディタの[カテゴリ]リストに表示され、その新規カテゴリ内に新しいアクションが表示されます。新規アクションがまだ選択されている状態で、その Name プロパティの値を NewAction に、Text プロパティの値を New に、ShortCut プロパティの値を Ctrl+N にそれぞれ変更します。

TMemoTutorialNewActionConfiguration.png

アクション リスト エディタで File カテゴリが使用可能になったので、[カテゴリ]リストからこのカテゴリを選択し、[新規アクション]ボタンを 4 回クリックして[File]メニューに追加アクションを 4 つ作成します。次に、新しく作成したアクションをカスタマイズします。

  • [Action1]を選択し、その Name プロパティの値を OpenAction に、Text プロパティの値を Open... に、ShortCut プロパティの値を Ctrl+O にそれぞれ変更します。
  • [Action2]を選択し、その Name プロパティの値を SaveAction に、Text プロパティの値を Save に、ShortCut プロパティの値を Ctrl+S にそれぞれ変更します。
  • [Action3]を選択し、その Name プロパティの値を SaveAsAction に、Text プロパティの値を Save As... にそれぞれ変更します。
  • [Action4]を選択し、その Name プロパティの値を ExitAction に、Text プロパティの値を Exit にそれぞれ変更します。

アクション リスト エディタは次のようになります。

TutorialIDEFig3-14.png
[File]メニューのアクションを定義する

テキスト エディタには編集機能も少し必要です。

[カテゴリ]リストから[(カテゴリなし)]を選択し、[新規アクション]ボタンをクリックしてカスタム アクションを新しく作成します。その新規アクションが選択された状態で、[オブジェクト インスペクタ]でその Category プロパティの値を Edit に、Name プロパティの値を CutAction に、Text プロパティの値を Cut に、ShortCut プロパティの値を Ctrl+X にそれぞれ変更します。

[カテゴリ]リストで[Edit]カテゴリがまだ選択されている状態で、[新規アクション]ボタンを 5 回クリックして[Edit]メニューに追加アクションを 5 つ作成します。次に、新しく作成したアクションをカスタマイズします。

  • [Action1]を選択し、その Name プロパティの値を CopyAction に、Text プロパティの値を Copy に、ShortCut プロパティの値を Ctrl+C にそれぞれ変更します。
  • [Action2]を選択し、その Name プロパティの値を PasteAction に、Text プロパティの値を Paste に、ShortCut プロパティの値を Ctrl+V にそれぞれ変更します。
  • [Action3]を選択し、その Name プロパティの値を SelectAllAction に、Text プロパティの値を Select All に、ShortCut プロパティの値を Ctrl+A にそれぞれ変更します。
  • [Action4]を選択し、その Name プロパティの値を UndoAction に、Text プロパティの値を Undo に、ShortCut プロパティの値を Ctrl+Z にそれぞれ変更します。
  • [Action5]を選択し、その Name プロパティの値を DeleteAction に、Text プロパティの値を Delete に、ShortCut プロパティの値を Del にそれぞれ変更します。

さらに、テキスト エディタのワードラップ機能を実現するアクションが必要です。[カテゴリ]リストから[(カテゴリなし)]を選択し、[新規アクション]ボタンをクリックしてカスタム アクションを新しく作成します。その新規アクションが選択された状態で、[オブジェクト インスペクタ]でその Category プロパティの値を Format に、Name プロパティの値を WordWrapAction に、Text プロパティの値を Word Wrap にそれぞれ変更します。

使用するアクションがこれで定義されました。アクション リスト エディタを閉じて、先に進みます。

メイン メニューへのアクションの追加

フォーム デザイナで、メイン メニュー コンポーネントをダブルクリックして[項目デザイナ]を開きます。

TMemoTutorialEmptyItemsDesigner.png

[項目デザイナ]で、上記で定義したアクションを表すビジュアル項目を定義する必要があります。[項目の追加]ボタンを 3 回クリックして、[File][Edit][Format]の各メニュー項目の TMenuItem インスタンスを追加します。次に、追加したそれぞれの TMenuItem インスタンスをリストから選択し、[子項目の追加]ボタンを、1 番目のメニュー項目の場合には 5 回、2 番目のメニュー項目の場合には 6 回、3 番目のメニュー項目の場合には 1 回、それぞれクリックします。

TMemoTutorialFilledItemsDesigner.png

これらのビジュアルなメニュー項目とそれらのアクションを関連付けるには:

  1. 3 つのメイン メニュー項目をそれぞれ選択し、[オブジェクト インスペクタ]で以下を行います。
    1. それぞれの Name プロパティを FileMenuEditMenuFormatMenu に変更します。
    2. それぞれの Text プロパティを FileEditFormat に変更します。
  2. 各メニュー項目のサブメニュー項目を 1 つずつ選択し、[オブジェクト インスペクタ]で、それぞれに適切な名前を付け、Action プロパティの値を対応するアクションに変更します。たとえば、[項目デザイナ]内のリストで[File]下の最初のサブメニュー項目を選択し、[オブジェクト インスペクタ]で、その Name プロパティの値を NewMenu に、Action プロパティの値を NewAction にそれぞれ変更します。

次の図は、この時点で[項目デザイナ]内のリストがどう表示されるかを示しています。

TutorialIDEFig3-15.png
[項目デザイナ]の最終的な内容

[項目デザイナ]を閉じます。

次のチュートリアル

コンポーネントをカスタマイズする