ViewMakerで作成するリアルアプリケーション　主要機能の開発（その３）

MVVM ViewMaker

今回は自動的に作成されたViewをモックアップで示された構造にレイアウトエディターを使って構成し直します。構成は以下の手順で行います。

  1. 全体構成をトップレベル（第1レベル）のGridで構成
  2. 第2レベルにアイテムをグルーピングする目的のパネルを配置
  3. 第3レベル以下に実際に入出力するアイテムを配置

今回は全体をまず縦２ｘ横２の4等分します。そして、1行1列目に検索文字列入力とツリービュー、1行2列目に詳細表示、2行目1列名に開くとクリアのボタンを配置します。レイアウトエディターの詳細な操作を説明してもあまり意味がないかもしれませんが、どのように編集するかの感じをみるために、今回だけ操作イメージ付きで説明します。

    1. トップレベルのGridを選択してGrid ColumnSizeとGrid RowSizeをそれぞれ２に指定
    2. CurrentContentを選択してLeft矢印を選択し、詳細情報の配置レベルを変更
    3. さらにCurrentContentに対してInsertPanelを実行（nameにContentPanelを指定）
    4. 最後にCurrentContentのHeader PositionをTopに変更

この編集によってモックアップに近い構造のレイアウトになります。もちろんこの状態で実行することもできます。

さらに同様に検索ボタンについてもレイアウトエディターを使って、既存のものを一旦削除した後に、「Add Item」を使って目的の位置に追加し配置の調整をすることでモックアップのレイアウトになりました。最後にルートを選択して「Window Settings」からWindowの初期のサイズの設定を行い全体レイアウトについては一旦完成になります。レイアウトを保存すると次回の起動から作成したレイアウトで表示されるようになります。なお、レイアウト用のデータがXML形式で実行EXEと同じフォルダに配置されています。

ファイルオープン機能の実装の補足

今回のViewModelにはファイルをオープンする機能があります。この機能をViewModelの中にそのまま入れるとテクノロジが変化した場合にViewModelがそのままでは利用できません。このような機能に対して外だしをする方法がいくつかあります。すぐに考えつく方法として、１つはView側に通知してViewで処理をする方法、もう１つはサービス化して利用する方法です。どちらも一長一短ありますが、今回は一番シンプルな（安易な？）拡張メソッドを利用してサービス化する方法で対応しました。*1

public static class ViewModelExtension
{
    public static string[] OpenFileDialog(this ViewModel @this, string filter)
    {
        var result = new string[] { };
        var opd = new OpenFileDialog();
        opd.Filter = filter;
        opd.Multiselect = true;
        if (opd.ShowDialog() == true) result = opd.FileNames;
        Mouse.SetCursor(((FrameworkElement)App.MainView.Content).Cursor);
        return result;
    }
}

このサービス化による対処ですが、提供する機能がViewと密結合でなければ十分に利用できます。もっと言えば、共通的な仕組みについては、Messagerパターン（ViewModelのイベント通知）で処理するのではなくできるだけサービス化してしまう方が、責務分割が行いやすくベターな方式と考えています。画面遷移制御するシナリオでもこのサービス化の方式で十分対応できます。

*1:ViewMakerのViewModelにもファイルオープン機能がありますがマルチファイルのオープンができないため追加しています。ViewMakerではWPFとSilverlight共通で提供できるレベルを基本にしています