【WPF】リファクタリングで学ぶMVVM、Prism。その② ～ Model,ViewModelを作成 ～

はじめに

下記の記事の続きとなります。
【WPF】リファクタリングで学ぶMVVM、Prism。その① ～ ＭＶＶＭ観点で処理を切り分ける ～

この記事では、責務分けした処理を実際に、MVVMの各層に処理を移管していきます。

この記事で行うリファクタリングの対象

• コントロールへのデータを表示**(ViewModel)**
  • グリッド(XamDataGrid)への社員情報データを反映
• 外部からのデータ読込**(Model)**
  • JSONファイルの読込
  • JSONファイルの読み込んだ内容をクラス化

Modelを作成

まずはViewModelから…といきたいところですが、データを取得するための処理がないとコンパイルエラーになってしまうので、下記の責務を移管したModelを作成します。社員情報を扱うため、EmployeeServiceModelというクラス名にしています。

• 外部からのデータ読込**(Model)**
  • JSONファイルの読込
  • JSONファイルの読み込んだ内容をクラス化

EmployeeServiceModel.cs

    public class EmployeeServiceModel
    {
        private string JSON_FILE_PATH = "./Assets/sampledata.json";

        public List<SampleData> Employees { get; set; }

        /// <summary>
        /// コンストクタ、初期データを読み込みます。
        /// </summary>
        public EmployeeServiceModel()
        {
            Employees = LoadJsonFile();
        }

        /// <summary>
        /// Jsonファイルを読み込み、社員情報(SampleData)へデシリアライズします。
        /// </summary>
        /// <returns></returns>
        private List<SampleData> LoadJsonFile()
        {
            // Jsonファイルを読み込み、デシリアライズ化し、SampleDataに設定します。
            string fileContent = System.IO.File.ReadAllText(JSON_FILE_PATH);
            return JsonConvert.DeserializeObject<List<SampleData>>(fileContent);
        }
    }

ViewModelを作成

Modelから社員情報を読み込めるようになりました。次は下記の責務をViewModelへ移管しましょう。

• コントロールへのデータを表示**(ViewModel)**
  • グリッド(XamDataGrid)への社員情報データを反映

MainWindowViewModel.cs

    public class MainWindowViewModel
    {
        private EmployeeServiceModel employeeServiceModel;

        public List<SampleData> EmployeeData { get; set; }

        public MainWindowViewModel()
        {
            // 社員情報サービスのModelを生成
            employeeServiceModel = new EmployeeServiceModel();
            //社員情報プロパティへデータを設定
            EmployeeData = employeeServiceModel.Employees;
        }

    }

先ほど作成したModel(EmployeeServiceModel)より、社員情報を取得し、EmployeeDataプロパティへ設定します。
このEmployeeDataプロパティはViewからバインディングを行う事により、グリッド(XamDataGrid)にて表示できるようになります。

View⇔ViewModelのバインディング

コードビハインドでXamDataGrid.DataSouceに直接データを設定していた処理を排除し、バインディングにより、
MainWindowViewModel.EmployeeDataデータを連携するようにします。

MainWindow.xaml

            <!--<igWPF:XamDataGrid x:Name="xamDataGrid" RecordActivated="XamDataGrid_RecordActivated" Height="300">-->
            <igWPF:XamDataGrid x:Name="xamDataGrid" RecordActivated="XamDataGrid_RecordActivated" Height="300" DataSource="{Binding EmployeeData}">

MainWindow.xaml.cs からリファクタリングされた処理

下記のコメントアウトの箇所がViewModelおよびModelへの処理が移管されました！

MainWindowViewModel.cs

    public partial class MainWindow : Window
    {
        //private string JSON_FILE_PATH = "./Assets/sampledata.json";

        public MainWindow()
        {
            InitializeComponent();

            // Jsonをシリアライズ化してサンプルデータを設定
            // this.xamDataGrid.DataSource = LoadJsonFile();
        }

        // private List<SampleData> LoadJsonFile()
        // {
            // Jsonファイルを読み込み、デシリアライズ化し、SampleDataに設定します。
            // string fileContent = System.IO.File.ReadAllText(JSON_FILE_PATH);
            // return JsonConvert.DeserializeObject<List<SampleData>>(fileContent);
        // }

まとめ

今回のリファクタ終了時点でのGithubはこちらです。
https://github.com/furugen/WPF-Try-Refactoring/tree/edition2

次の記事も引き続き、MainWindow.xaml.csをリファクタリングしていきます！

#次の記事

【WPF】リファクタリングで学ぶMVVM、Prism。その③ ～ 行追加ボタンのClick処理をリファクタリング ～