顧客フォームの構築

  • [アーティクル]

このラボでは、マスター詳細フォームを作成し、適切なフォームのパターンおよびサブパターンを適用します。 マスター詳細フォームには、多数のフィールドが含まれるプライマリ データが表示されます。 たとえば、作成するフォームは、顧客情報を表示します。

前提条件

このチュートリアルでは、リモート デスクトップを使用して環境にアクセスし、インスタンスの管理者としてプロビジョニングされる必要があります。 詳細については、「アクセス インスタンス」を参照してください。

概要

フォームを作成するには、既存のフォーム FmtCustomer から開始します。 フォームは、古いマスター詳細テンプレートをテーブルします。 チュートリアルの一環として、このフォーム タイプに一貫した構造を実行するマスターの詳細パターンを適用します。 次の図は、FmtCustomer 開始コンポーネントを示しています。

FmtCustomer 開始コンポーネントのスクリーン ショット。

重要な概念

  • マスター詳細フォームを作成します。
  • フォームにフォーム パターンを適用します。
  • Visual Studio のパターン アドインを使用して、フォーム/モデル パターンのカバレッジに関する情報を取得します。
  • フォーム コントロールにサブパターンを適用します。
  • Visual Studio とブラウザーを使用してフォームを表示します。
  • モデル内で残っているパターンの作業の量を決定します。

セットアップ

チュートリアル プロジェクトおよびトランザクション データのインポート

Visual Studio を使用してチュートリアル プロジェクトをインポートします。 チュートリアル プロジェクトには、このチュートリアルを完了するために使用する成果物が含まれています。 Visual Studio を使用して FMTutorial プロジェクトを開き、チュートリアル用のデータを読み込みます。 フリート管理チュートリアルのデータを読み込むために、FMTDataHelper クラスを使用します。 これが作業する最初のチュートリアルである場合は、アクセス インスタンスを確認し、ローカル VM で作業している場合に、管理者ユーザーを提供するかどうかを確認します。

  1. フリート管理のサンプルを https://github.com/Microsoft/FMLab からダウンロードし、C:\ に保存してから解凍します。

  2. デスクトップで、Visual Studio ショートカットをダブルクリックして、開発環境を開きます。

  3. 財務と運用メニューで、プロジェクトのインポートをクリックします。

  4. プロジェクトのインポート ウィンドウで、ファイル名テキスト ボックスの隣にある、省略記号ボタンをクリックします。

  5. インポートするファイルの選択ウィンドウで、C:\FMLab を参照して FMTutorialDataModel.axpp をクリックしてから開くをクリックします。

  6. プロジェクト ファイルの場所テキスト ボックスに、C:\FMLab と入力します。

  7. 要素の上書き オプションをオンにし、現在のソリューション ラジオ オプションをオンにします。 次の図は、完了した インポート プロジェクト ダイアログ ボックスを示しています。

    完了したプロジェクトのインポート ダイアログ ボックス。

  8. OKをクリックします。

  9. ソリューション エクスプローラーで、クラスを展開して、FMTutorial プロジェクトで FMTDataHelper を右クリックしてから、スタートアップ オブジェクトとして設定をクリックします。

  10. ビルドメニューで、ソリューションの再構築をクリックします。 タイムスタンプに関係なく、プロジェクトのすべてのファイルを確実に作成するには、リビルドを使用します。 出力ウィンドウでビルドの進行状況を表示できます。

  11. ビルドが完了すると、Ctrl + F5 を押してプロジェクトを実行します。 ブラウザーが開き、データをインポートするクラスが実行されます。

FMTutorial プロジェクトを開く

Visual Studio を使用して FMTutorial プロジェクトを開きます。 Visual Studio を開き、FMTutorial プロジェクトが既に読み込まれている場合は、次のセクションに続行することができます。

  1. 開発環境がまだ開いていない場合は、デスクトップで開発環境への Visual Studio ショートカットをダブルクリックして開発環境を開きます。
  2. ファイル メニューを開き、開く>プロジェクト/ソリューションをクリックします。
  3. プロジェクトを開くダイアログ ボックスで、C:\FmLab\FMTutorial を参照し、FMTutorial ソリューションを選択してから開くをクリックします。
  4. FMTutorial プロジェクトがソリューション エクスプローラーに表示されます。

テンプレートを使用してフォームを作成

Visual Studio を使用して FmtCustomer フォームを作成します。 テンプレートを使用して、新しいマスターの詳細フォームを作成します。 このチュートリアルのデータ ソースは、スターター形式によって提供されています。 ただし、グリッドと詳細ビューにフィールドを追加し、マスター詳細フォーム パターンを適用します。

  1. ソリューション エクスプローラーで、FMTutorial プロジェクトを右クリックして追加をポイントしてから既存の項目をクリックします。

  2. 既存の項目を追加ウィンドウで、C:\FmLab を参照し、AxForm_FmtCustomer を選択してから追加をクリックします。 ソリューション エクスプローラーの FMTutorial プロジェクトの下に FmtCustomer フォームが表示されます。

  3. ソリューション エクスプローラーで、FmtCustomer をダブルクリックします。 フォーム デザイナーで、フォームを開きます。

  4. フォーム デザイナーで、デザインをクリックします。 プロパティ ウィンドウで、次の値を指定します。

    プロパティ 値
    データ ソース FmtCustomer
    キャプション 顧客

  5. フォーム デザイナーでデザイン>GridDetailsTab>TabPageGrid>MainGrid とクリックしてから MainGrid をクリックします。

  6. プロパティ ウィンドウで、データ ソースをクリックしてから FmtCustomer を選択して FmtCustomer テーブルをグリッドにバインドします。 データ ソースからのフィールドを使用して、グリッドに列を追加できるようになりました。

  7. データ ソース>FmtCustomer>フィールドとクリックし、グリッドにフィールドを追加します。

    1. 名をクリックし、Ctrlキーを押しながら、表示された順序で次の追加フィールドを選択します。

      • 姓
      • CellPhone
      • DriverLicense
      • 電子メール

    2. 強調表示されたフィールドをデザイン>GridDetailsTab>TabPageGrid>MainGrid にドラッグします。 次の図は、グリッド ノードを展開してフィールドを追加した後のグリッドを示しています。

      ノードを展開しフィールドを追加した後の、グリッドを表示するスクリーン ショット。

  8. 保存 をクリックします。

  9. デザイン>GridDetailsTab>TabPageDetails>TitleGroup の順にクリックし、レコード ヘッダーを詳細ビューに追加します。

  10. HeaderTitle をクリックします。 プロパティ ウィンドウで、次の値を指定します。

    プロパティ 値
    データ ソース FmtCustomer
    データ メソッド titleFields

  11. 詳細ビューにコンテンツを追加するには、デザイン>GridDetailsTab>TabPageDetails>DetailsBodyTab>一般をクリックします。

    1. FmtCustomer>データ ソース>FmtCustomer>フィールドとクリックし、Ctrl キーを押したまま、次のフィールドを選択します。

      • 名
      • 姓
      • CellPhone
      • DriverLicense
      • 電子メール

    2. 協調表示されたフィールドを一般にドラッグし、保存をクリックします。

フォームの表示

正しく読み込まれることを確認するためにフォームを実行します。

  1. ソリューション エクスプローラーで、FmtCustomer を右クリックしてから、スタートアップ オブジェクトとして設定をクリックします。

  2. Ctrl+F5 キーを押します。 グリッド ビューは、次の図のように表示する必要があります。

    顧客とのグリッド ビューの説明。

  3. アプリケーション バーで、Microsoft Office を開く>Excel にエクスポート> 顧客をクリックして、グリッドビューの情報を Microsoft Excel スプレッドシートに送信します。 (ページを終了するかどうかを確認するダイアログが表示されたら、「このページを終了」をクリックします。) 求められたら、開くをクリックして Excel でデータを表示します。

  4. Excel を閉じます。

  5. Tony をクリックしてそのレコードの詳細ビューに移動します。

  6. 閉じる (またはブラウザーの戻るボタン) をクリックすると、グリッド ビューに戻ります。

フォームにパターンを適用します

Visual Studio を使用して 顧客 フォームに Master Details のフォーム パターンを適用します。 フォーム パターンを適用すると、フォームに期待される構造が確実に適用されます。 また、パターンの一部であるノードでプロパティの値を自動的に設定することでデザイン体験を簡素化します。

  1. デザイン を右クリックして パターンの適用 をポイントし、詳細マスター をクリックします。

    詳細マスター フォーム パターンの適用。

    ナビゲーション リスト グループが表示されないスクリーン ショット。

  2. 欠落しているナビゲーション リスト グループを追加します。 パターン情報パネルが赤色でハイライトされると、このコントロールがないことを示します。

    1. デザイン を右クリックして 新規 をクリックし、グループ をクリックします。
    2. プロパティ ウィンドウの名前プロパティに、SidePanel と入力します。
    3. SidePanel をクリックし、Alt + ↑を押してこのグループを GridDetailsTab (タブ) の上の移動します。

  3. デザインを再度クリックします。 ナビゲーション リストとパネル タブの周りの黄色のハイライトは、パターンが正常に適用される前にこれらの各ノードの下で解決する必要のある問題があることを示します。

    デザインを再度クリックする。

    黄色の強調表示を含むノードを示すスクリーン ショット。

  4. パターン情報パネルで SidePanel をクリックします。

    情報パネルで選択した SidePanel。

    欠落しているコントロールを示す SidePanel。

  5. 欠落しているコントロールを追加します。

    1. SidePanel を右クリックして 新規 をクリックし、QuickFilter をクリックします。

    2. プロパティ ウィンドウで、次の値を指定します。

      プロパティ 値
      氏名 SidePanelQuickFilter
      ターゲット コントロール MainGrid この QuickFilter には、フォーム上の主要なグリッドと同じフィルター処理に使用できる列が必要です

    3. SidePanel を右クリックして 新規 をクリックし、グリッド をクリックします。

      プロパティ 値
      氏名 NavigationList
      データソース FmtCustomer

  6. ナビゲーション リストに識別するフィールドを追加します。 NavigationList を右クリックして 新規 をポイントし、文字列 をクリックします。

    1. プロパティ ウィンドウで、次の値を指定します。

      プロパティ 値
      DataSource FmtCustomer
      DataMethod fullName
      Name FmtCustomer_FullName

    2. 電話番号を簡易リストに追加するには、データ ソース>FmtCustomer>フィールドを展開します。

    3. CellPhone フィールドを Design > SidePanel > NavigationList の下のグリッドにドラッグします。

  7. SidePanel をクリックします。 パターン情報パネルは、このサブツリーのコントロールがパターンに完全に準拠していることを示しています。

    パターン情報パネル、デザイン。

    パターン情報パネル、ナビゲーション リスト。

  8. デザイン>GridDetailsTab とクリックします。 サブノードの周りの黄色のハイライトは、フォーム パターンが正常に適用される前に両方のノードの下で解決する必要のある問題があることを示します。

    GridDetailsTab。

    サブノードの周囲の黄色い強調表示。

  9. このパターンでは、グリッド パネルが詳細パネルの後にあることが想定されていることに注意してください。TabPageGrid をクリックし、Alt+Down を押してそのタブを詳細パネルの下に移動します。

  10. GridDetailsTab をクリックします。 TabPageDetails タブ ページはパターンに準拠するようになりました。 ただし、TabPageGrid タブ ページには更なる注意が必要です。

    デザインの GridDetailsTab.

    TabPageGrid タブ ページには更なる注意が必要です。

  11. TabPageGrid をクリックします。 デザイナーでフォーカスがすぐに TabPageGrid がオンになり、パターン情報パネルが更新されています。

    TabPageGrid のフォーカス。

    パターン情報パネル。

  12. パターン情報パネル には、TabPageGrid コンテナーの上部で欠落しているグループ コントロールが表示されるようになりました。

    1. TabPageGrid を右クリックして 新規 をポイントし、グループ をクリックします。
    2. Alt+上方向キーを 2 回押して、そのグループをグループの最初のコントロールとして配置します。
    3. プロパティ ウィンドウの名前プロパティに、GridCustomFilterGroup と入力します。 GridCustomFilterGroup の入力。

  13. パターンが、GridCustomFilterGroup に適用されるサブパターンをお探しています。 GridCustomFilterGroup を右クリックして パターンの適用 をポイントし、カスタムおよびクイック フィルター をクリックします。

    カスタムおよびクイック フィルターをクリックする。

    カスタムおよびクイック フィルター。

  14. カスタムおよびクイック フィルター サブパターンには、QuickFilter コントロールが必須です。

    1. GridCustomFilterGroup を右クリックして 新規 をクリックし、QuickFilter をクリックします。

    2. プロパティ ウィンドウで、次の値を指定します。

      プロパティ 値
      氏名 MainGridQuickFilter
      ターゲット コントロール MainGrid

  15. コントロール ツリーを参照して設計し、各コントロールでパターン情報パネルに問題が表示されなくなった方法に注意てください。

  16. Ctrl+S キーを押してフォームを保存します。

詳細フォームの表示

詳細ビューとグリッド ビューに表示するフォームを実行します。

  1. Ctrl+F5 キーを押してプロジェクトを実行します。 次の図は、グリッド ビューの表示方法を示しています。

    グリッド ビューの図。

  2. Phil をクリックしてそのレコードの詳細ビューに移動します。

  3. ナビゲーション リストを開くには、フォームの左側にあるリストを表示ボタンをクリックします。

    ナビゲーション リストを表示するために開かれたフォーム。

  4. グリッド表示に戻るには、閉じる (またはブラウザーの [戻る] ボタン) をクリックします。

  5. Visual Studio に戻ります。

サブパターンの追加

  1. Visual Studio の、フォーム デザイナーで、FmtCustomer を右クリックして アドイン をポイントしてから、フォーム統計情報 を選択します。

    フォーム デザイナーで選択されたフォームの統計情報。

    フォーム統計 アドインは、フォームの状態に関するいくつかの役に立つデータ ポイントを提供します。 これには、次のものが含まれます。

    • パターン = 未指定のカウント – フォーム パターンまたはサブパターンが適用されていないノードの数。

    • パターン = カスタム カウント – カスタム パターンが適用されたノードの数。構造が既存のパターンに適合しなかったことを意味します。

    • パターン カバレッジ – フォーム上のコントロールのうち、フォーム パターンまたはサブパターンの対象となるものの割合。 100% の値は、完全に対象となるフォームを示します。

      フォームに関するデータを示すダイアログ ボックス。

  2. このフォームのパターン カバレッジを完成させるには、Pattern = Unspecified カウントをゼロにする必要があります。 Visual Studio のフォーム検索を使用して、フォーム内の「指定されていない」すべてのインスタンスを検索します。

    検索からの Visual Studio の例。

  3. 一般タブ ページには入力コントロールのみが含まれており、このクイックタブにはカスタム レイアウトが不要なため、応答レイアウトを保証するためにフィールドおよびフィールド グループのパターンを適用する必要があります。 全般 を右クリックして パターンの適用 をポイントし、フィールドおよびフィールド グループ を選択します。

  4. 画面の右端で、検索のクリアをクリックします。

    画面の右端にある検索のクリア オプションを示すスクリーン ショット。

  5. Ctrl+S キーを押してフォームを保存します。

  6. 手順 1 を繰り返してフォーム統計アドインを再度実行し、フォームがパターンによって完全にカバーされていることを確認します。

    100% パターン カバレッジを示すダイアログ ボックス。

  7. Ctrl+F5 キーを押してプロジェクトを実行し、更新されたフォームを表示します。

  8. 里美 (サンプル) をクリックし、詳細ビューに移動します。 次の図は、フィールドおよびフィールド グループのサブパターンを適用し、フィールドが反応しやすいようにレイアウトした後に詳細ビューがどのように表示されるかを示しています。 ブラウザーの幅を変更することで、ブラウザーの幅を十分に埋めるためにフィールド レイアウトがどのように調整されるのかが分かります。

    フィールドおよびフィールド グループのサブパターンを適用した後の詳細ビュー。

  9. Visual Studio に戻る

モデル内で残っているパターンの作業の量を決定する

  1. 財務と運用をクリックし、アドインをポイントします。次にフォーム パターン レポートを実行を選択します。

    フォームのパターン レポートが生成されたときに表示される通知ダイアログです。

    レポートが生成されたことを示すダイアログ ボックス。

  2. PatternsReport ファイルを Excel で開きます。

  3. フリート管理チュートリアル モデルへのレポートをフィルター処理します。

    1. データ>フィルターの順にクリックします。

    2. FleetMgmntTutorial へのモデル列をフィルター処理します。

      フィルター処理されたレポートのスクリーン ショット。

レポートには、現在適用されている最上位のフォーム パターンと、パターンでカバーされているフォーム上のコントロールの割合など、このモデルのフォームに関するパターン関連の情報が表示されます。 これは、1 つまたは複数のモデルの残りのパターンの作業を追跡するために使用できます。