Share via


チュートリアル : MFC によるリッチ クライアント アプリケーションの作成

このチュートリアルでは、MFC ベースのリッチ クライアント アプリケーションを作成する手順と、Visual Studio .NET のその他の各種機能について説明します。

このチュートリアルでは、次の操作を行います。

  • 既存のデータベースからデータを表示し、複数のダイアログ ボックスを使って次の機能を表示する、MFC ベースのソリューションをデザインします。

    • ウィンドウなしの ActiveX コントロールのホスト

    • ダイナミック HTML (DHTML) ダイアログ ボックスの使用

    • 既存の XML Web サービスを使ったアプリケーション ユーザーの検証

チュートリアルを完了するには、既存のデータベースを 1 つと、1 つ以上の検索可能なテーブルを用意する必要があります。

メモ :

このチュートリアルでは、データベースの例として pubs データベースを、テーブルの例として authors テーブルを、それぞれ使用します。

MFC リッチ クライアント アプリケーションの作成

MFC アプリケーションを作成するには

  1. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスが表示されます。

  2. プロジェクトの種類ペインで、[Visual C++ プロジェクト] フォルダをクリックし、次にテンプレート ペインの [MFC アプリケーション] プロジェクト アイコンをクリックします。

  3. [プロジェクト名] ボックスに「MyProject」と入力します。

  4. [OK] をクリックしてダイアログ ボックスを閉じて、MFC アプリケーション ウィザードを開きます。

MFC アプリケーション ウィザードを使用すると、データベース アクセスをサポートし、リッチ クライアント アプリケーションの機能を表示するようにプロジェクトを変更できます。

メモ :

このチュートリアルでは、アクセス先のサーバーは SQL サーバーであり、このサーバー上に pubs データベースが存在することを前提としています。

データベース サポートを実装するには

  1. MFC アプリケーション ウィザードで、[データベース サポート] をクリックします。

  2. [ファイル サポートのあるデータベースビュー] オプションをオンにします。

  3. [データ ソース] をクリックします。

  4. [OLE DB プロバイダ] ボックスの一覧で、[Microsoft OLE DB Provider for SQL Server] をクリックし、[次へ] をクリックします。

  5. 既存のサーバー名を入力または選択します。

  6. [Windows NT の統合セキュリティを使用する] を選択します。

  7. [pubs] データベースを選択します。

  8. [OK] をクリックして接続を確立します。

  9. [データベース オブジェクトの選択] ダイアログ ボックスで、authors テーブルを選択します。

  10. [OK] をクリックしてダイアログ ボックスを閉じます。

  11. [完了] をクリックし、フレームワーク アプリケーションを作成します。

  12. プロジェクトの作成が完了したら、MyProjectSet.h から #error 行を削除する必要があります。

作成したフレームワーク アプリケーションには、主な機能を追加できます。

既存のデータベースでのデータのアクセスおよび表示

ここでは、単純なフォームとコントロールを使って、authors テーブルでのデータのアクセスと表示について説明します。わかりやすくするために、クエリと表示を単純にしてあります。クエリの結果 (テーブル内の作成者すべて) は、リスト ボックスに表示されます。

MyProject アプリケーションには既にフォーム オブジェクト (IDD_MYPROJECT_FORM) が含まれています。これは、リソース ビューでは [Dialog] ノードの下にあります。このフォームを変更して、authors テーブルで作成者の簡単なリストを表示するようにします。

フォームを変更するには

  1. リソース ビューで、プロジェクトを展開し、[Dialog] ノードを展開します。次に、既定のフォーム オブジェクト (IDD_MYPROJECT_FORM) をダブルクリックします。

  2. List Box コントロールを既定のフォームにドラッグします。

  3. List Box コントロールを右クリックし、ショートカット メニューの [変数の追加] をクリックします。

    メンバ変数の追加ウィザードが表示されます。

  4. [変数名] ボックスで、「m_DataList」と入力し、[完了] をクリックします。

  5. Button コントロールを既定のフォームにドラッグします。[プロパティ] ウィンドウで、[Caption] ボックスを「Control Host」に変更します。

  6. Button コントロールを既定のフォームにドラッグします。[プロパティ] ウィンドウで、[Caption] ボックスを「DHTML ダイアログ」に変更します。

    メモ :

    これら 2 つのコントロールをチュートリアルの後半で使用して、アプリケーションの他の機能にアクセスします。

クエリ結果を表示するには

  1. クラス ビュー で、プロジェクト ノードを展開し、CMyProjectView クラスの OnInitialUpdate メソッドをダブルクリックします。

  2. 関数内で既存のコードの後に次のコードを追加します。

       HRESULT hr = S_OK;
       TCHAR szAuthor[80];
    
       CMyProjectSet &dbset = GetDocument()->m_MyProjectSet;
       [db_command(name="cmd", source_name="dbset", hresult=hr)
       {
          SELECT au_lname
          ([bindto]szAuthor)
          FROM AUTHORS
       }];
    
       while(cmd.MoveNext() == S_OK)
          m_DataList.InsertString(-1, szAuthor);
    

    このコードでは、db_command 属性を使って、ドキュメント オブジェクトのデータセット (m_MyProjectSet) をテーブルにある現在の全作成者のラスト ネームで初期化します。

  3. [ビルド] メニューの [ソリューションのビルド] をクリックします。

  4. [デバッグ] メニューの [デバッグなしで開始] をクリックします。

    クエリの結果は、子ビュー フォームのリスト ボックスに表示されます。

ウィンドウなしの ActiveX コントロールの作成とホスト

リッチ クライアント アプリケーションに対して、次に、単純なウィンドウなしのカスタム コントロールをホストするダイアログ ボックスを変更します。まず、単純なイベントを設定したカスタム ActiveX コントロールを作成します。次に、そのコントロールを保持し、コントロール イベントを処理するダイアログ ボックスを作成します。

カスタム コントロールを作成するには

  1. ソリューション エクスプローラで、MyProject ソリューションを右クリックします。

  2. ショートカット メニューの [追加] をポイントし、[新しいプロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスが表示されます。

  3. プロジェクトの種類ペインで、[Visual C++ プロジェクト] フォルダをクリックし、次にテンプレート ペインの [ATL プロジェクト] アイコンをクリックします。

  4. 新しいプロジェクトの名前を「CustomCtl」と入力し、[OK] をクリックします。

    ATL プロジェクト ウィザードが表示されます。

  5. [完了] をクリックして既定の設定を承認し、プロジェクトを作成します。

  6. CustomCtl プロジェクトを右クリックします。

  7. ショートカット メニューの [追加] をポイントし、[クラスの追加] をクリックします。

    [クラスの追加] ダイアログ ボックスが表示されます。

  8. [ATL コントロール] 項目をダブルクリックします。

    ATL コントロール ウィザードが表示されます。

  9. ATL コントロール ウィザードで、[短い名前] ボックスに「MyCtl」と入力します。

  10. [オプション] ページの [接続ポイント] をオンにします。

  11. [完了] をクリックし、カスタム コントロール オブジェクトを作成します。

コントロールを作成したら、Click という単純なイベントを追加します。このイベントは、マウス ボタンをコントロールの領域内でクリックすることにより、コントロールにより起動されます。

Click イベントを作成するには

  1. クラス ビュー で、CustomCtl ノードを展開します。

  2. カスタム コントロールのイベント インターフェイス (_IMyCtlEvents) を右クリックします。

  3. ショートカット メニューの [追加] をポイントし、[メソッドの追加] をクリックします。

  4. メソッド追加 ウィザード を使って次の値を入力します。

    • [戻り値の型] : void

    • [メソッド名] : Click

  5. [完了] をクリックして、Click イベントを作成します。

  6. クラス ビューで、コントロール クラス (CMyCtl) を選択します。

  7. [プロパティ] ウィンドウの [メッセージ] ボタンをクリックし、WM_LBUTTONDOWN メッセージの OnLButtonDown ハンドラを追加します。

  8. ハンドラ本体に次のコードを追加します。

       Click();
       return 0;
    
  9. [ビルド] メニューの [ソリューションのビルド] をクリックします。

正常にビルドされたソリューションでは、このコントロールを単純なダイアログ ボックスによってホストできます。

コントロールをホストするには

  1. リソース ビューで、MyProject ソリューションを右クリックします。

  2. ショートカット メニューの [追加] をクリックし、[リソースの追加] をクリックします。

  3. [Dialog] 項目をポイントし、[新規作成] をクリックします。

  4. IDD_DIALOG1 ダイアログ ボックスを右クリックし、ショートカット メニューの [クラスの追加] をクリックします。

    MFC クラス ウィザードが表示されます。

  5. MFC クラス ウィザードで、次の値を入力します。

    • [クラス名]: CMyCtlDlg

    • [基本クラス]: CDialog

  6. [完了] をクリックします。

  7. IDD_DIALOG1 ダイアログ ボックスを右クリックし、ショートカット メニューの [ActiveX コントロールの挿入] をクリックします。

  8. [ActiveX コントロールの挿入] ダイアログ ボックスで、CMyCtl Object を選択し、[OK] をクリックしてコントロールを追加します。

  9. ダイアログのテンプレートで ActiveX コントロールを選択します。

  10. [プロパティ] ウィンドウの [イベント コントロール] をクリックし、Click イベントの ClickMyctl1 ハンドラを追加します。

  11. イベント ハンドラ本体に次のコードを追加します。

       AfxMessageBox("Click event fired");
    

最後に、ダイアログ ボックスをリッチ クライアント アプリケーションにフックする必要があります。これは、[Control Host] ボタンのハンドラ内のコードで実行します。このコードは、以前の「既存データベースのデータのアクセスおよび表示」トピックで作成しました。

[Control Host] ダイアログ ボックスを表示するには

  1. リソース ビューで、MyProject ソリューションのリソース ファイルの [Dialog] ノードの下にある、IDD_MYPROJECT_FORM をダブルクリックしてメイン フォームを表示します。

  2. 以前に追加した [Control Host] をダブルクリックします。

  3. ハンドラ関数に次のコードを追加します。

       CMyCtlDlg dlg;
       dlg.DoModal( );
    
  4. 現在のソース ファイルで、最後の #include ステートメントの後に次のコードを追加します。

    #include "MyCtlDlg.h"
    

    これにより、[Control Host] ダイアログ ボックスを実装するクラスの .h ファイルがインクルードされます。

  5. [ビルド] メニューの [ソリューションのビルド] をクリックします。

  6. [デバッグ] メニューの [デバッグなしで開始] をクリックします。

[Control Host] ボタンをクリックすると、[Control Host] ダイアログ ボックスが表示されます。カスタムの Click イベントは、コントロール内でマウスの左ボタンをクリックすると起動できます。

DHTML ダイアログ ボックスの実装

リッチ クライアント アプリケーションのもう 1 つの特徴は、ユーザー インターフェイスに従来のダイアログ リソースではなく HTML を使用するダイアログ ボックスを使用できることです。このチュートリアルの目的は、単純なビットマップを表示するイメージ コントロールを含む、単純な DHTML ダイアログ ボックスを実装することです。

DHTML ダイアログ ボックスを実装するには

  1. リソース ビューで、MyProject プロジェクトを右クリックします。

  2. ショートカット メニューの [追加] をクリックし、[リソースの追加] をクリックします。

  3. [Dialog] 項目をクリックし、[新規作成] をクリックして新しいダイアログ ボックスを作成します。

  4. [OK] ボタンと [キャンセル] ボタンをダイアログ テンプレートから削除します。これらは、後続の手順で HTML に実装されます。

  5. IDD_DIALOG2 ダイアログ ボックス フォームを右クリックし、[クラスの追加] をクリックします。

  6. 次の値を入力します。

    • [クラス名]: CMyDhtmlDlg

    • [基本クラス]: CDHtmlDialog

  7. [完了] をクリックします。

  8. リソース ビューで、[HTML] ノードの下にある IDR_HTML_MYDHTMLDLG をダブルクリックします。次に、デザイン ペインの下にある [HTML] タブをクリックし、関連付けられている HTML ファイルを編集します。

  9. 既存のテキスト ("TODO: コントロールをここに置く" など) を「DHTML ダイアログ ボックスのテキスト コンテンツです。」というテキストに置き換えます。

以前に実装した [Control Host] ダイアログ ボックスと同様に、このダイアログ ボックスは、ユーザーがアプリケーションのメイン フォームでボタン ([DHTML ダイアログ]) をクリックすると表示されます。

DHTML ダイアログ ボックスを表示するには

  1. リソース ビューで、MyProject ソリューションのリソース ファイルの [Dialog] ノードの下にある、IDD_MYPROJECT_FORM をダブルクリックしてメイン フォームを表示します。

  2. 以前に追加した [DHTML ダイアログ] ボタンをダブルクリックします。

  3. ハンドラ関数に次のコードを追加します。

       CMyDhtmlDlg dlg;
       dlg.DoModal( );
    
  4. 現在のソース ファイルで、最後の #include ステートメントの後に次のコードを追加します。

    #include "MyDhtmlDlg.h"
    

    これにより、DHTML ダイアログ ボックスを実装するクラスの .h ファイルがインクルードされます。

  5. [ビルド] メニューの [ソリューションのビルド] をクリックします。

  6. [デバッグ] メニューの [デバッグなしで開始] をクリックします。

ダイアログが表示されたら、[DHTML ダイアログ] をクリックして DHTML ダイアログ ボックスを開きます。

DHTML ダイアログと完全なコード例の詳細については、CDHtmlDialog Class クラスと DHtmlExplore サンプルを参照してください。

既存の XML Web サービスの作成と使用

既存データベースにリッチ フロントエンドを用意すると、リッチ クライアント アプリケーションが外部の XML Web サービスと対話する場合があります。その結果、ユーザーは従来の方式やグラフィカル インターフェイスでデータを操作できます。

ここでは、Microsoft IIS (インターネット インフォメーション サービス) を使って Web サーバーで実行するように設計された、単純な XML Web サービスを作成します。

XML Web サービスを作成するには

  1. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスが表示されます。

  2. プロジェクトの種類ペインで、[Visual Basic プロジェクト] または [Visual C# プロジェクト] をクリックし、次にテンプレート ペインの [ASP.NET Web サービス] アイコンをクリックします。

  3. [場所] ボックスに「https://localhost/MyService」と入力します。

  4. [OK] をクリックしてダイアログ ボックスを閉じ、ソリューションを作成します。

XML Web サービスに共通する役割は、アプリケーションの各ユーザーを検証することです。ソリューションの作成が完了したら、簡単な検証メソッドを実装します。この検証ルーチンは、概念を明確に説明するために、あえて簡単な手順になっています。

ソリューションが作成されたら、検証メソッドを Service1.asmx ソース ファイルに追加します。これを行うには、Service1.asmx.cs のデザイン サーフェイスを右クリックし、[コードの表示] を選択します。ファイルの最後にある HelloWorld Web メソッドを次のコードに置き換えます。

' Visual Basic
<WebMethod()> Function Validate(ByVal s1 As String, ByVal s2 As String) As Boolean
   Return s1 = s2
End Function

// C#
[WebMethod]
   public bool Validate(string s1, string s2)
   {
    return s1 == s2;
   }

ソース ファイルを変更してから、ソリューションをビルドします。

XML Web サービスが存在する場合は、[Web 参照の追加] ダイアログ ボックスで Web 参照を追加および設定できます。

Web 参照をクライアント アプリケーションに追加するには

  1. MyProject ソリューションを開きます。

  2. ソリューション エクスプローラで、[MyProject] を右クリックし、[Web 参照の追加] をクリックします。

    [Web 参照の追加] ダイアログ ボックスが表示されます。

  3. [参照] で、[ローカル コンピュータの Web サービス] を選択します。ローカル コンピュータ上の既存の XML Web サービスの一覧が表示されます。先ほど作成した XML Web サービス (Service1) を選択します。Web サービスが見つかると、左ペインにサービスの説明が表示され、[参照の追加] ボタンがアクティブになります。また、Web サービスの .asmx ファイルの URL が、[URL] ボックスに次のように表示されます。

    https://localhost/MyService/Service1.asmx
    
  4. [参照の追加] をクリックします。

Web 参照を追加したら、アプリケーションと XML Web サービス間の対話を示す検証用のダイアログ ボックスを追加します。

検証用のダイアログ ボックスを追加するには

  1. リソース ビューで、MyProject プロジェクトを右クリックします。

  2. ショートカット メニューの [追加] をクリックし、[リソースの追加] をクリックします。

  3. [Dialog] 項目をダブルクリックします。

  4. IDD_DIALOG3 ダイアログ ボックス フォームをダブルクリックします。

    MFC クラス ウィザードが表示されます。

  5. 次の値を入力します。

    • [クラス名]: CMyValidateDlg

    • [基本クラス]: CDialog

  6. [完了] をクリックします。

作成したダイアログ ボックスに、ユーザーへの検証サービスを用意するコントロールを追加します。

ユーザーを検証するには

  1. Edit control コントロールを 2 つ IDD_DIALOG3 ダイアログ ボックス フォームにドラッグします。

  2. 1 つ目の Edit control を右クリックします。

  3. ショートカット メニューの [変数の追加] をクリックします。

  4. [変数名] ボックスに「m_Name」と入力します。

  5. [カテゴリ] ドロップダウン メニューの [Value] をクリックします。

  6. [完了] をクリックします。

  7. 2 つ目の Edit control コントロールを右クリックします。

  8. 2 つ目の変数 m_Password を追加し、[カテゴリ] の [Value] をクリックします。

  9. ダイアログ ボックス フォームの [OK] ボタンをダブルクリックします。

  10. ハンドラ関数に次のコードを追加します。

       Service1::CService1 *s = new Service1::CService1();
    
       UpdateData(TRUE);
       bool result = false;
       s->Validate(CComBSTR(m_Name), CComBSTR(m_Password), &result);
       if (result)
          CDialog::OnOK();
    
  11. 現在のソース ファイルで、最後の #include ステートメントの後に次のコードを追加します。

    #include "WebService.h"
    

    これにより、検証用のダイアログ ボックスで使用する Web サービスの .h ファイルがインクルードされます。

検証ルーチンを有効にするためには、最初に表示されるユーザー インターフェイス オブジェクトが検証用のダイアログ ボックスである必要があります。ユーザーが正しい名前とパスワードを入力すると、リッチ クライアント アプリケーションが表示されます。不正な名前またはパスワードを入力すると、入力したユーザーはリッチ クライアント アプリケーションにアクセスできなくなります。

この動作を実装するには、メイン アプリケーション クラスの InitInstance 関数を変更して、最初にこのダイアログ ボックスを呼び出すようにします。ダイアログ ボックスが正常に終了した場合に限り、アプリケーションが続行します。

最初に検証用のダイアログ ボックスを表示するには

  1. クラス ビューで、[CMyProjectApp] ノードを展開します。

  2. InitInstance 関数をダブルクリックして、関数の本体を編集します。

  3. pMainFrame オブジェクトの ShowWindow 関数呼び出しの前に次のコードを追加します。

       // Display the validation dialog box first
       CMyValidateDlg dlg;
       if (dlg.DoModal() != IDOK)
          return FALSE;
    
  4. 現在のソース ファイルで、最後の #include ステートメントの後に次のコードを追加します。

    #include "MyValidateDlg.h"
    

    これにより、検証用のダイアログ ボックスの .h ファイルがインクルードされます。

  5. ソリューションをビルドします。[ビルド] メニューの [ソリューションのビルド] をクリックします。

  6. [デバッグ] メニューの [デバッグなしで開始] をクリックします。検証ダイアログ ボックスで [名前] および [パスワード] の編集ボックスに同じテキストを入力し、[OK] をクリックします。リッチ クライアント アプリケーションが実行され、メインのダイアログ ボックスが表示されます。

セットアップ プロジェクトの作成

Visual C++ アプリケーション開発の最後の手順は、セットアップ プロジェクトを作成することです。

セットアップ プロジェクトを作成するには

  1. ソリューション エクスプローラで、MyProject ソリューションを右クリックします。

  2. ショートカット メニューの [追加] をポイントし、[新しいプロジェクト] をクリックします。

    [新しいプロジェクト] ダイアログ ボックスが表示されます。

  3. プロジェクトの種類ペインで、[セットアップ/配置プロジェクト] をクリックし、次にテンプレート ペインの [セットアップ ウィザード] アイコンをクリックします。

  4. セットアップ プロジェクトの名前を「MySetup」と入力し、[OK] をクリックします。

    セットアップ ウィザードが表示されます。

  5. [次へ] を 2 回クリックします。

  6. 次の出力グループを選択します。

    • [MyProject のプライマリ出力]

    • [CustomCtl のプライマリ出力]

  7. [次へ] を 2 回クリックします。

  8. [完了] をクリックします。

  9. [ビルド] メニューの [MySetup のビルド] をクリックします。

結果のファイル (MySetup) は、リッチ クライアント アプリケーションをインストールするコンピュータにコピーできます。配置プロジェクトとセットアップ ウィザードの詳細については、「アプリケーションの配置」、「配置プロジェクト」、および「配置に関するチュートリアル」を参照してください。

参照

概念

リッチ クライアント アプリケーションのチュートリアル

Visual Studio に関するチュートリアル