ViewModelファーストな開発（その１）

ViewMakerを利用したMVVMの開発では、まずViewModelを作成してViewを組み立てます。最初にViewModelを作ってそのあとでViewModelを利用してViewを作成する開発のことを「ViewModelファーストな開発」と勝手に呼ぶようにしました。この「ViewModelファーストな開発」のイメージを数回に渡って説明していきます。

ViewMakerのターゲットはLOBアプリであり、今回はEntity Frameworkを利用したDBアクセスするシナリオで説明します。なお、本来であれば3層のスマートクライアントシナリオで説明したいところですが、MVVMがメインの話なので、単純化のためクラサバの2層型で説明します。

1.WPFアプリケーションの作成

最初ステップとして、まずはWPFアプリを作成します。

2.ViewMakerアセンブリの参照

ViewMaker.Core.dllの参照を追加します

3.Entity Frameworkを利用してエンティティを作成

Entity FrameworkでPubsデータベースからエンティティを作成します

4.ViewModelの作成

エンティティの一覧を表示して選択したエンティティを単票で表示する汎用的なViewModelを作成します

    public class ListViewModel<T> : ViewModel where T : EntityObject
    {
        [View(ViewControlType.DataGrid)]
        [ViewProperty(DataGridViewControl.Properties.SelectedItem, "SelectedData")]
        public List<T> Data { get; set; }

        public T SelectedData { get; set; }

        public ListViewModel(List<T> data)
        {
            Data = data;
        }

        public ICommand ShowDetailCommand
        {
            get { return CreateCommand((x) => ViewUtil.ShowDialog(SelectedData), (x) => this.SelectedData != null); }
        }
    }

5.スタートアップ処理の修正

MainWindow.xamlの起動の代わりに、ViewMakerで生成するViewを表示するように修正

<Application x:Class="WpfSample.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Startup="Application_Startup">
    <Application.Resources>
    </Application.Resources>
</Application>

    public partial class App : Application
    {
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            using (var db = new pubsEntities())
            {
                ViewUtil.Show(new ListViewModel<authors>(db.authors.ToList()));
            }
        }
    }

まとめ

一気に羅列しましたが、これだけで、authorsテーブルを検索した結果をListViewModelを使って表示できるようになります。もちろん、authors以外のテーブルもListViewModelで表示できます。
ViewModelは通常のクラスでOOPの継承やMIX-INなどの技術がそのまま利用できます。今回の例のようなGenericsを使ってテンプレート的な定義もできます。このPlainなObjectで画面を作成することで、かなり強力なことができるようになります。

表示された結果は以下のようになります。

今回はここまです。次回上記の画面をViewMakerの編集機能を使ってカスタマイズしていきます