読者です 読者をやめる 読者になる 読者になる

なか日記

一度きりの人生、楽しく生きよう。

MVVMに触れてみた(1)

Android Bindingを使ってみた(3) - タイトルは未定の.Net版というか、.Netの方がオリジナルなので、こっちの方がきれいに実装できますね。というわけで、ちょっとずつ試してみます。

まずはMVVMの構成になってないプログラムを作ってそこから発展させていくことにします。

画面

この前のAndroidと同じような画面構成にします。
f:id:nakaji999:20110628230513p:image

MainWindow.xaml

画面のXAMLはこんな感じです。

<Window x:Class="MVVMSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="237" Width="318">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="71*" />
            <ColumnDefinition Width="225*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="10*" />
            <RowDefinition Height="10*" />
            <RowDefinition Height="10*" />
            <RowDefinition Height="10*" />
        </Grid.RowDefinitions>
        <Label Content="身長" Name="label1" VerticalAlignment="Center" HorizontalAlignment="Center" />
        <Label Content="体重" Grid.Row="1" Name="label2" VerticalAlignment="Center" HorizontalAlignment="Center" />
        <Label Content="BMI" Name="label3" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" />
        <TextBox Name="heightText" Grid.Column="1" Margin="10" />
        <TextBox Name="weightText" Grid.Row="1" Grid.Column="1" Margin="10" />
        <TextBlock Name="bmiText" Grid.Row="2" Text="" Grid.Column="1" Margin="10" VerticalAlignment="Center" />
        <Button Content="計算" Grid.Row="3" Name="calcButton" Grid.ColumnSpan="2" Margin="50,10,50,10" Click="calcButton_Click" />
    </Grid>
</Window>

MainWindow.xaml.cs

コードビハインドの方ですが、まずは難しいこと考えずにがりがり書いちゃいましょう。といっても、そんなに書いてません。
エラーチェックもザルです。

using System;
using System.Windows;

namespace MVVMSample
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void calcButton_Click(object sender, RoutedEventArgs e)
        {
            double height = double.Parse(heightText.Text);
            double weight = double.Parse(weightText.Text);

            double bmi = Math.Truncate(weight / Math.Pow((height / 100), 2) * 100) / 100;
            bmiText.Text = string.Format("{0,5:##.##}", bmi);
        }
    }
}

まとめ

エラーチェックはザルですが、上記のようにあっという間に完成しました。
しかし、このアプリってテストを手動で行うしかなくて面倒ですね。
テスト自動化するにはどうすればいいか…画面とロジックを分離するのが良さそうです*1
というわけで、次回は画面とロジックを分離してみましょう。

ソース

このエントリで作成したソースはこちら
BMI計算のロジックを追加 · 50694de · nakaji/MVVMSample · GitHub

*1:Visual StudioのUltimateならUIの単体テストもできるみたいですが…