Write Fast: AppMap を使用したアプリケーションのマッピング

手順1: プロジェクトのセットアップ

始めに Infragistics AppMap および Infragistics ツールボックスがインストールされていることを確認してください。Visual Studio のメニューから [ツール] - [拡張機能と更新プログラム] を選択します。Infragistics AppMap とInfragistics ツールボックスが一覧に表示され、有効化されている必要があります。

Infragistics App Map と Infragistics ツールボックスがインストールされていることを確認した後に「拡張機能と更新プログラム」ウィンドウを閉じます。メニューから [ファイル] - [新規作成] - [プロジェクト] を選択し、「新しいプロジェクト」ウィンドウを表示させます。左のツリーから [インストール済み] - [テンプレート] - [Visual C#] - [Infragistics] ノードを展開し、 [Xamarin.Forms] ノードをクリックします。右側のコンテンツ ビューに表示されている "AppMap Project (Xamarin.Forms)" を選択し、[OK] ボタンをクリックします。

INFRAGISTICS プロジェクト ウィザードが表示され、どのプラットフォームに対応するアプリケーションを生成するかを確認されます。このレッスンでは Android と iOS の双方が選択されていることを確認してください。また、DI コンテナーは "Unity" を選択します。最後に [AppMap の表示] オプションにチェックが入っていることを確認し、[プロジェクトの作成] ボタンをクリックします。

AppMap ウィンドウが表示されます。このウィンドウでは AppMap で使用できるページや関係、デザイン領域、プロパティ グリッド、コード生成のオプションが表示されています。

手順2: AppMap フローのデザイン

ツールボックスから ContentPage をデザイン領域にドラッグ & ドロップします。最初に追加された ContentPage は MainPage と名前付けられます。ドラッグしたページがメイン ページかどうかはプロパティ画面で設定することができます。Name プロパティを LoginScreen と変更し、Wrap In Navigation プロパティのチェックボックスのチェックを外します。

続けて別の ContentPage エレメントをツールボックスからドラッグ & ドロップで右側に追加します。その後、関係から移動先をドラッグ & ドロップし、LoginScreen ページから先ほど追加したページに接続します。追加した ContentPage を NewAccountScreen という名前に変更を行います。

アプリケーションのメイン ページがアカウントの新規作成を促す場合に、登録後にメイン ページに画面遷移を戻すという双方向の遷移シナリオを実現する場合は、別の移動先をドラッグ & ドロップし、NewAccountScreen から LoginScreen に戻るように設定します。下記の図のように矢印が双方向を向くような表示となります。

移動先エレメントを選択した際のプロパティも確認してみましょう。MasterDetailPage エレメントをデザイン エリアに追加し、MainPage と名前を設定します。自動的に 3 つの ContentPage エレメントとそれぞれに対応する移動先エレメントが追加されます。このレッスンでは 2 つのみ使用するため、MDChild2 と名前がついている ContentPage エレメントとそこに紐づく移動先エレメントを削除します。
残った 2 つの ContentPage エレメントにはそれぞれ CustomersList、AgendaView と Name プロパティを設定します。

自動的に追加された移動先エレメントのプロパティ画面において Wrap in NavigatonPage プロパティにチェックがついていることを確認してください。

Wrap in NavigationPage プロパティにチェックがついている移動先エレメントにはコンパス アイコンが表示されます。

更に別の画面の構成を確認するため、TabbedPage エレメントを CustomersList エレメントの右側に配置し、CustomerDetails と Name プロパティを設定します。CustomersList エレメントからこの CustomerDetails エレメントに遷移する移動先エレメントを追加します。

TabbedPage を追加した際にあらかじめ子ページが 3 つ、自動で追加されます。今回のレッスンでは 2 ページのみ使用するため、先ほどの MainPage (MasterDetailPage) を追加した際に行ったように、TabChild2 と、接続されている子順序:3 を削除します。残った TabChild、TabChild1 にはそれぞれ Sales、Employees と Name プロパティを設定します。

最後に、絶対ナビゲーション エレメントをドラッグ & ドロップで追加し、LoginScreen から MainPage に接続させます。このエレメントはログイン画面からメイン画面への 1 方向のナビゲーションを示しており、一旦画面遷移を行うと戻ることができないことを指し示しています。

ここまでの作業を完了すると下記のように各画面とナビゲーションが設定されているアプリケーションのフローが完成します。ご自身が作成したものと異なっていないかどうかを確認してください。その後、[AppMap を作成] ボタンをクリックするとアプリケーション コードが生成されます。

下図のように AppMap で作成した画面のフローを実現するための必要なファイルやコードが生成されます。