Quantcast
Channel: かずきのBlog@hatena
Viewing all articles
Browse latest Browse all 1388
↧

MVVMをリアクティブプログラミングで快適にReactiveProperty v2.3オーバービュー

December 5, 2015, 7:56 am
$
0
0

MVVM + リアクティブプログラミングの組み合わせを快適にするためのライブラリのReactivePropertyのバージョン2.3を先日リリースしました。今回の目玉は、ReactivePropertyの初期化時のパフォーマンスの改善です。100000回初期化すると4秒近くかかっていたものを600ms程度に短縮しました。

github.com

以下のNuGetから入手できます。

www.nuget.org

ここらへんで、現バージョンのオーバービューを書いてみたいと思います。

ReactivePropertyの特徴

ReactivePropertyは、MVVM + Rxを支援するための機能を有したライブラリです。以下のような機能を持っています。

  • ReactivePropertyクラス
  • ReactiveCommandクラス
  • ReactiveCollectionクラス
  • ReadOnlyReactiveCollectionクラス
  • INotifyPropertyChanged/INotifyCollectionChangedをIObservableに変換するメソッド群
  • その他Reactive ExtensionsにないちょっとしたIObservableファクトリメソッド
  • 通知系のNotifier系クラス
  • IFilteredReadOnlyObservableCollectionインターフェース

ReactivePropertyクラス

このライブラリのコア機能です。変更通知プロパティを簡単に定義することが出来ます。その代りBinding時のPathが長くなるというデメリットもあります。例えばViewModelなどにNameという変更通知機能を持ったプロパティを定義するには以下のようにします。

publicclass PersonViewModel
{
    public ReactiveProperty<string> Name { get; } = new ReactiveProperty<string>();
}

ReactivePropertyクラスは、Valueプロパティで値の設定と取得ができます。またINotifyPropertyChangedを実装しています。以下のように使うことが出来ます。

// Console Applicationでは自分でSynchronizationContextをセットしないといけない
SynchronizationContext.SetSynchronizationContext(new SynchronizationContext());

var vm = new PersonViewModel();
vm.Name.PropertyChanged += (_, __) => Console.WriteLine($"Name changed {vm.Name.Value}");

vm.Name.Value = "tanaka";
Console.ReadKey();
vm.Name.Value = "kimura";
Console.ReadKey();

一行すると以下のようになります。

Name changed tanaka
Name changed kimura

XAML系プラットフォームでの使用

もともとMVVMパターンを補助するライブラリですので、XAML系プラットフォームで使います。Universal Windows PlatformやWPFやXamarinなどで使うことが出来ます。ここでは、UWPでの利用を説明したいと思います。

先ほどのPersonViewModelをバインドするために、コードビハインドにプロパティとして設定します。

publicsealedpartialclass MainPage : Page
{
    public PersonViewModel ViewModel { get; } = new PersonViewModel();

    public MainPage()
    {
        this.InitializeComponent();
    }
}

XAMLでは、以下のようにプロパティ名.Value（Valueをつけないといけない）でパスを指定します。

<Page x:Class="App1.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:App1"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><TextBox Text="{x:Bind ViewModel.Name.Value, Mode=TwoWay}" /><TextBlock Text="{x:Bind ViewModel.Name.Value, Mode=OneWay}" /></StackPanel></Page>

実行すると、以下のようにTextBoxとTextBlockで値の同期がとれます。

f:id:okazuki:20151202220451p:plain

ReactivePropertyはIObservableからも生成可能

このようにReactivePropertyを使うと、ViewModelの基本クラスを指定することなく簡単に変更通知機能を持ったプロパティを定義できます。この他にも、ReactivePropertyの名前の通りReactive Extensionsを使ってReactivePropertyを作成することが出来ます。

具体的にはIObservableに対してToReactivePropertyを呼ぶことでIObservableから値が発行されたら、それをValueに保持するというReactivePropertyが作成できます。

例えば以下のような感じになります。

publicclass PersonViewModel
{
    public ReactiveProperty<string> Name { get; } = Observable.Interval(TimeSpan.FromSeconds(1))
        .Select(x => $"tanaka {x}")
        .ToReactiveProperty();
}

1秒間隔で値を更新するReactivePropertyになります。実行すると1秒間隔で表示が更新されます。

f:id:okazuki:20151202221103p:plain

ReactivePropertyもIObservable

ReactivePropertyがIObservableから生成可能なことはわかりました。さらに言うと、ReactivePropertyもIObservableとしての特性を持っているので、ReactivePropertyを加工してさらに別のReactivePropertyを作るといったことも可能です。

例えば以下のようになります。

publicclass PersonViewModel
{
    public ReactiveProperty<string> Input { get; } = new ReactiveProperty<string>("");

    public ReactiveProperty<string> Output { get; }

    public PersonViewModel()
    {
        this.Output = this.Input
            .Delay(TimeSpan.FromSeconds(1))
            .Select(x => x.ToUpper())
            .ToReactiveProperty();
    }
}

このようにしてXAMLからBindingします。x:BindではTextBoxのプロパティが変わったタイミングで値を反映することが出来ないのでここだけ、通常のBinidngをつかっています。

<Page x:Class="App1.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:App1"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"x:Name="Page"mc:Ignorable="d"><StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><TextBox Text="{Binding ViewModel.Input.Value, ElementName=Page, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" /><TextBlock Text="{x:Bind ViewModel.Output.Value, Mode=OneWay}" /></StackPanel></Page>

実行すると、1秒遅れで入力した文字が大文字になって出力されます。

f:id:okazuki:20151202222032p:plain

読み取り専用のReactiveProperty

先ほどの例のOutputプロパティのようにReactivePropertyのValueに値をセットされないほうが望ましいケースもあります。そういうときは、IObservableからToReadOnlyReactiveProperty()とすることで値をセットできないReadOnlyReactivePropertyが作成できます。

publicclass PersonViewModel
{
    public ReactiveProperty<string> Input { get; } = new ReactiveProperty<string>("");

    public ReadOnlyReactiveProperty<string> Output { get; }

    public PersonViewModel()
    {
        this.Output = this.Input
            .Delay(TimeSpan.FromSeconds(1))
            .Select(x => x.ToUpper())
            .ToReadOnlyReactiveProperty();
    }
}

値がセットできない以外は普通のReactivePropertyと、ほぼ同じように使うことができます。

ReactivePropertyのmode

ReactivePropertyは、コンストラクタやToReactivePropertyメソッドなどのファクトリメソッドでmodeを指定することが出来ます。modeにはReactivePropertyModeのEnum型が指定可能です。 以下のように定義されています。

[Flags]
publicenum ReactivePropertyMode
{
    None = 0,
    DistinctUntilChanged = 1,
    RaiseLatestValueOnSubscribe = 2
}

DistinctUntilChangedを指定すると、同じ値が設定されてもOnNextやOnPropertyChangedを発行しなくなります。RaiseLatestValueOnSubscribeを設定すると、ReactivePropertyをSubscribeしたタイミングで現在の値をOnNextに発行するかどうかを制御できます。デフォルトでは、両方のmodeが設定されています。

mode = ReactivePropertyMode.DistinctUntilChanged | ReactivePropertyMode.RaiseLatestValueSubscribe;

このmodeを設定することで、ReactiveProeprtyのIObservableとしての特性を多少カスタマイズできます。

既存のModelとの接続

ReactivePropertyは、MVVMパターンのVMで使うことを主目的として作られています。（別にModelで使っても構いません）そのため、既存のPlaneなC#のModelのプロパティと同期をとるための便利な方法が用意されています。

INotifyPropertyChangedを実装したModelからの作成

例として、以下のようなINotifyPropertyChangedを実装したクラスがあるとします。

publicclass Person : INotifyPropertyChanged
{
    publicevent PropertyChangedEventHandler PropertyChanged;

    privatestaticreadonly PropertyChangedEventArgs NamePropertyChangedEventArgs = new PropertyChangedEventArgs(nameof(Name));

    privatestring name;

    publicstring Name
    {
        get { returnthis.name; }
        set
        {
            if (this.name == value) { return; }
            this.name = value;
            this.PropertyChanged?.Invoke(this, NamePropertyChangedEventArgs);
        }
    }

}

このNameプロパティの変更を監視して、値を更新するViewModelはReactivePropertyの機能を使わないで書くと通常以下のような感じに書きます。

publicclass PersonViewModel : IDisposable
{
    private Person Model { get; set; }
    public ReactiveProperty<string> Name { get; } = new ReactiveProperty<string>();

    public PersonViewModel(Person model)
    {
        this.Model = model;
        model.PropertyChanged += this.Model_PropertyChanged;
    }

    privatevoid Model_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        switch (e.PropertyName)
        {
            case nameof(Person.Name):
                this.Name.Value = ((Person)sender).Name;
                break;
        }
    }

    publicvoid Dispose()
    {
        this.Model.PropertyChanged -= this.Model_PropertyChanged;
        this.Model = null;
    }
}

非常にめんどくさいです。プロパティが増えたら大変なことになりそうです。ということで、ReactivePropertyでは、INotifyPropertyChangedを実装したクラスに対してObservePropertyというプロパティの変更をIObservableに変換する機能を提供しています。IObservableにしてしまえばToReactivePropertyメソッドを使ってReactivePropertyに変換できます。したがって上記のコードは以下のように書けます。

publicclass PersonViewModel : IDisposable
{
    private CompositeDisposable Disposable { get; } = new CompositeDisposable();
    public ReactiveProperty<string> Name { get; }

    public PersonViewModel(Person model)
    {
        this.Name = model.ObserveProperty(x => x.Name)
            .ToReactiveProperty()
            .AddTo(this.Disposable);
    }

    publicvoid Dispose()
    {
        this.Disposable.Dispose();
    }
}

ReactivePropertyのDisposeメソッドを呼び出すとModelのプロパティの変更監視を辞めるので、CompositeDisposableにReactivePropertyを集めておくことで、プロパティが増えてもあとで一括で購読を解除することが出来て便利です。

間にSelectメソッドなどを挟むことで、Modelの値を加工してViewModelに反映するということも簡単に書けるようになります。

public PersonViewModel(Person model)
{
    this.Name = model.ObserveProperty(x => x.Name)
        .Select(x => $"{x}さん")
        .ToReactiveProperty()
        .AddTo(this.Disposable);
}

双方向の値の同期

上記の例はModelからViewModelへの単一方向の値の同期の仕方になります。この方法に加えて何か任意のタイミングで値をModelに書き戻すことでViewModelからModelへの値の更新も可能です。ただ、単純なViewModelのプロパティとModelのプロパティの双方向同期の方法も提供しています。INotifyPropertyChangedを実装したクラスに対してToReactivePropertyAsSynchronizedを呼び出すことで、双方向同期のReactivePropertyが生成されます。

public PersonViewModel(Person model)
{
    this.Name = model.ToReactivePropertyAsSynchronized(x => x.Name)
        .AddTo(this.Disposable);
}

convert引数とconvertBack引数にラムダ式を指定することで単純な値の変換処理を間に挟み込むことが出来ます。

public PersonViewModel(Person model)
{
    // 名前にさんが入ってる人がいると破たんするロジックですが雰囲気をつかんでもらえれば…this.Name = model.ToReactivePropertyAsSynchronized(x => x.Name,
        convert: x => $"{x}さん",
        convertBack: x => x.Replace("さん", ""))
        .AddTo(this.Disposable);
}

INotifyPropertyChangedを実装していないModelとの接続

初期値としてModelの値をReactivePropertyに取り込み、ReactivePropertyの値に変更があったらModelに書き戻すだけの機能もあります。ModelがINotifyPropertyChangedを実装していないので、VMからMへの一方通行の値の同期です。

ReactiveProperty.FromObjectがその機能を提供します。以下のように使います。

public PersonViewModel(Person model)
{
    this.Name = ReactiveProperty.FromObject(model, x => x.Name);
}

ToReactivePropertyAsSynchronizedと同様にconvertとconvertBack引数を渡すことで間に値の変換をかませることが出来ます。

入力値のバリデーション

ReactivePropertyには、入力値の検証機能もあります。一番単純な方法はReactivePropertyの生成後にSetValidateNotifyErrorで検証ロジックを渡すことです。以下のようなコードで必須入力チェック機能付きのReactiveProeprtyを生成できます。

publicclass PersonViewModel
{
    public ReactiveProperty<string> Name { get; }

    public PersonViewModel()
    {
        this.Name = new ReactiveProperty<string>()
            .SetValidateNotifyError(x => string.IsNullOrWhiteSpace(x) ? "Error!!" : null);
    }

}

ReactivePropertyは、INotifyDataErrorInfoを実装しているためWPFではWPFの組み込みのバリデーションエラーメッセージの表示機能が使えます。UWPなどのINotifyDataErrorInfoによる検証エラーメッセージの無い環境では、ReactivePropertyのObserveErrorChangedをエラー情報にしてReadOnlyReactivePropertyなどに変換することでエラーメッセージを取得できます。

以下のような感じになります。

publicclass PersonViewModel
{
    public ReactiveProperty<string> Name { get; }

    public ReadOnlyReactiveProperty<string> NameErrorMessage { get; }

    public PersonViewModel()
    {
        this.Name = new ReactiveProperty<string>()
            .SetValidateNotifyError(x => string.IsNullOrWhiteSpace(x) ? "Error!!" : null);
        this.NameErrorMessage = this.Name
            .ObserveErrorChanged
            .Select(x => x?.Cast<string>()?.FirstOrDefault())
            .ToReadOnlyReactiveProperty();
    }

}

このViewModelを以下のように画面でバインドすることでエラーメッセージが表示されるようになります。

<Page x:Class="App1.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:App1"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"><StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><TextBox Text="{x:Bind ViewModel.Name.Value, Mode=TwoWay}" /><TextBlock Text="{x:Bind ViewModel.NameErrorMessage.Value, Mode=OneWay}" /></StackPanel></Page>

実行すると以下のようになります。

f:id:okazuki:20151203210343p:plain

f:id:okazuki:20151203210411p:plain

DataAnnotationsをサポートしているプラットフォーム（Windows PhoneのSilverlight以外）では、DataAnnotationsを使った検証機能もサポートしています。SetValidateAttirbuteメソッドに、属性をつけたReactivePropertyを渡すことで設定可能です。必須入力の場合の例を以下に示します。

publicclass PersonViewModel
{
    [Required(ErrorMessage = "Error!!")]
    public ReactiveProperty<string> Name { get; }

    public ReadOnlyReactiveProperty<string> NameErrorMessage { get; }

    public PersonViewModel()
    {
        this.Name = new ReactiveProperty<string>()
            .SetValidateAttribute(() => this.Name);
        this.NameErrorMessage = this.Name
            .ObserveErrorChanged
            .Select(x => x?.Cast<string>()?.FirstOrDefault())
            .ToReadOnlyReactiveProperty();
    }

}

これで、先ほどと同じ結果になります。

検証エラーとModelとの同期

Modelと同期するためのToReactivePropertyAsSynchronizedとFromObjectメソッドには、ignoreValidationErrorValueという引数があり、この引数にtrueを設定することで検証エラーがあるときには、Modelに値を書き込まないようにするオプションがあります。必須入力チェックを通過したときのみModelに値を書き戻す場合のコード例をいかに示します。

publicclass PersonViewModel
{
    [Required(ErrorMessage = "Error!!")]
    public ReactiveProperty<string> Name { get; }

    public ReadOnlyReactiveProperty<string> NameErrorMessage { get; }

    public PersonViewModel(Person model)
    {
        this.Name = model.ToReactivePropertyAsSynchronized(x => x.Name,
            ignoreValidationErrorValue:true)
            .SetValidateAttribute(() => this.Name);
        this.NameErrorMessage = this.Name
            .ObserveErrorChanged
            .Select(x => x?.Cast<string>()?.FirstOrDefault())
            .ToReadOnlyReactiveProperty();
    }

}

検証エラーの監視

ReactivePropertyにはObserveHasErrorsプロパティがあり、このプロパティを通してReactivePropertyのエラーの有無を監視することが出来ます。ObserveHasErrorsプロパティはIObservable<bool>型なので、複数のReactivePropertyとCombineLatestで束ねることで、全てのReactivePropertyにエラーがないときなどの処理を簡単に記述できるようになっています。

publicclass PersonViewModel
{
    [Required(ErrorMessage = "Error!!")]
    public ReactiveProperty<string> Name { get; }

    [Required(ErrorMessage = "Error!!")]
    [RegularExpression("[0-9]+", ErrorMessage = "Error!!")]
    public ReactiveProperty<string> Age { get; }

    public PersonViewModel(Person model)
    {
        this.Name = new ReactiveProperty<string>()
            .SetValidateAttribute(() => this.Name);
        this.Age = new ReactiveProperty<string>()
            .SetValidateAttribute(() => this.Age);

        new[]
            {
                this.Name.ObserveHasErrors,
                this.Age.ObserveHasErrors
            }
            .CombineLatest(x => x.All(y => !y))
            .Where(x => x)
            .Subscribe(_ =>
            {
                Debug.WriteLine("エラーの無い時の処理");
            });

    }

}

ReactiveCommand

ReactivePropertyには、MVVMパターンのICommandの実装としてReactiveCommandクラスを提供しています。ReactiveCommandの特徴は、IObservable<bool>から生成可能という点です。IObservable<bool&lgt;に対して、ToReactiveCommand拡張メソッドを呼び出すことでTrueが発行されたときだけ実行可能なコマンドが作成されます。自前でプロパティを監視して、コマンドの実行可否を判定する必要がなくなる点が特徴です。

コマンドが実行されたときの処理はSubscribeメソッドで指定します。

例えばすべてのプロパティの入力にエラーがなくなったら処理をしたいというコマンドは以下のように定義できます。

publicclass PersonViewModel
{
    [Required(ErrorMessage = "Error!!")]
    public ReactiveProperty<string> Name { get; }

    [Required(ErrorMessage = "Error!!")]
    [RegularExpression("[0-9]+", ErrorMessage = "Error!!")]
    public ReactiveProperty<string> Age { get; }

    public ReactiveCommand CommitCommand { get; }

    public PersonViewModel()
    {
        this.Name = new ReactiveProperty<string>()
            .SetValidateAttribute(() => this.Name);
        this.Age = new ReactiveProperty<string>()
            .SetValidateAttribute(() => this.Age);

        this.CommitCommand = new[]
            {
                this.Name.ObserveHasErrors,
                this.Age.ObserveHasErrors
            }
            .CombineLatest(x => x.All(y => !y))
            .ToReactiveCommand();
        this.CommitCommand.Subscribe(async _ => await new MessageDialog("OK").ShowAsync());

    }

}

以下のようにXAMLにバインドできます。

<Page x:Class="App1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"      xmlns:local="using:App1"      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"      mc:Ignorable="d">

    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBox Text="{x:Bind ViewModel.Name.Value, Mode=TwoWay}" />
        <TextBox Text="{x:Bind ViewModel.Age.Value, Mode=TwoWay}" />
        <Button Content="Commit"
                Command="{x:Bind ViewModel.CommitCommand}" />
    </StackPanel>
</Page>

入力エラー（Ageとバインドしてるところに数字じゃない文字列が入っている）があるとボタンが押せなくて

f:id:okazuki:20151203212625p:plain

入力エラーがなくなるとボタンが押せるようになります。

f:id:okazuki:20151203212709p:plain

ReactiveCommandには、CommandParameterを受け取るReactiveCommand<T>という型引数を受け取るバージョンのものも用意しています。

ReactiveCollectionクラス

ReactiveCollectionクラスは、指定したスケジューラ上（何も指定しない場合はUIスレッド上）でコレクションの操作とイベントの発行を行う機能を追加したObservableCollectionクラスになります。また、IObservableからToReactiveCollectionを呼び出すことで、IObservableから値が発行されるたびにコレクションに要素を追加するという機能を持ったコレクションとして生成することも可能です。

例えば以下のようにすることで、1秒ごとに値を追加するコレクションが作成できます。

publicclass PersonViewModel
{
    public ReactiveCollection<long> TimerCollection { get; } = Observable
        .Interval(TimeSpan.FromSeconds(1))
        .ToReactiveCollection();
}

また、AddOnScheduler、RemoveOnSchedulerなどの追加削除などのメソッド名にOnSchedulerがついたメソッドを呼び出すことでReactiveCollectionが紐づいているSchedulerを使ってコレクション操作とイベントの発行を行うように指示することが出来ます。

publicclass PersonViewModel
{
    public ReactiveCollection<long> SampleCollection { get; } = new ReactiveCollection<long>();

    private Random Random { get; } = new Random();

    public ReactiveCommand AddCommand { get; } = new ReactiveCommand();

    public PersonViewModel()
    {
        this.AddCommand.Subscribe(async _ => await Task.Run(() => 
        {
            // バックグランドのスレッドからUIスレッド上で要素を追加することが可能this.SampleCollection.AddOnScheduler(this.Random.Next());
        }));
    }
}

重たいバックグラウンド処理の結果をUIスレッド上で要素を追加したいときなどに便利です。コンストラクタでSchedulerを渡すことで、デフォルトのUIスレッド上以外でのコレクション操作に対応させることも可能です。

ReadOnlyReactiveCollection

このクラスは、ObservableCollectionやReactiveCollectionと同期した読み取り専用のコレクションをとして機能します。ObservableCollectionやReactiveCollectionでToReadOnlyObservableCollectionメソッドを呼び出すことで生成できます。

その時に、Func<T, U>型の変換ロジックを渡すことで、ObservableCollectionの型を変換した結果のコレクションとして機能させることが出来ます。ちょうど、ModelのコレクションをViewModelのコレクションとして提供するといったケースで便利に使用できます。また、コレクションから値が削除されるタイミングで、IDisposable型の場合Disposeを自動で呼び出す機能もあります。

基本的な使い方を以下に示します。

publicclass MainPageViewModel
{
    private PeopleManager Model { get; } = new PeopleManager();
    public ReadOnlyReactiveCollection<PersonViewModel> People { get; }

    public MainPageViewModel()
    {
        // ModelのPersonのコレクションをPersonViewModelのコレクションにするthis.People = this.Model.People.ToReadOnlyReactiveCollection(x => new PersonViewModel(x));
    }
}

publicclass PersonViewModel
{
    //各種プロパティpublic PersonViewModel(Person model)
    {
        // modelとvmの接続処理
    }
}

publicclass PeopleManager
{
    public ObservableCollection<Person> People { get; } = new ObservableCollection<Person>();

    // Peopleを処理するコードなど
}

publicclass Person : INotifyPropertyChanged
{
    publicevent PropertyChangedEventHandler PropertyChanged;

    // 各種プロパティ
}

色々なものをIObservableに変換するメソッド

ReactivePropertyは、ReactivePropertyクラスやReactiveCommandクラスなどをIObservableから生成する関係上、色々なものをIObservableに変換するメソッドを提供しています。

INotifyPropertyChangedをIObservableに変換する

PropertyChangedAsObservable拡張メソッドはINotifyPropertyChangedのイベントの発生をIObservable>NotifyPropertyChangedEventArgs<に変換します。

var p = new Person();
p.PropertyChangedAsObservable()
    .Subscribe(x => Debug.WriteLine($"{x.PropertyName}が変更されました"));

さらに、特定のプロパティの変更に特化したObservePropertyメソッドがあります。これは、変更後のプロパティの値が流れてきます。

var p = new Person();
p.ObserveProperty(x => x.Name)
    .Subscribe(x => Debug.WriteLine($"変更後のプロパティの値 {x}"));

INotifyCollectionChangedをIObservableに変換する

CollectionChangedもPropertyChangedと同じようにIObservableに変換できます。

var col = new ObservableCollection<Person>();
col.CollectionChangedAsObservable()
    .Subscribe(x => Debug.WriteLine($"{x.Action}が実行されました"));

この他に、AddやRemoveなどに特化したObserveXXXChangedメソッドがあります。

var col = new ObservableCollection<Person>();
col.ObserveAddChanged()
    .Subscribe(x => Debug.WriteLine($"{x.Name}が追加されました"));

コレクションの要素の変更を監視する

あるようでなかなか無い処理として、コレクションの中の要素のプロパティが変更されたかどうかを監視する拡張メソッドがあります。ObserveElementPropertyChangedでPropertyChangedの監視を行い、ObserveElementPropertyで指定したプロパティの変更を監視します。

var col = new ObservableCollection<Person>();
// プロパティの変更を監視する
col.ObserveElementPropertyChanged()
    .Subscribe(x => Debug.WriteLine($"{x.EventArgs} {x.Sender}"));
// 特定のプロパティの変更を監視する
col.ObserveElementProperty(x => x.Name)
    .Subscribe(x => Debug.WriteLine($"{x.Instance} {x.Property} {x.Value}"));

ObserveElementPropertyのプロパティがReactivePropertyの場合のObserveElementObservablePropertyという拡張メソッドも提供しています。

そのほかにも

この他にも各種拡張メソッドを提供しています。リトライやエラーを無視するものなど小物もあります。Extensions名前空間にこれらのメソッドが定義してあるので覗いてみてください。

Notifier系クラス

ReactivePropertyには、IObservable>bool<, IObservable>CountChangedStatus<を便利に扱うためのBooleanNotifyerクラスとCountNotifierクラスがあります。さらに、指定した時間の後に、値を発行するScheduledNotifierというクラスを提供しています。

BooleanNotifier

TrueとFalseを切り替えるだけのシンプルなクラスです。TurnOnでTrueにしてTurnOffでFalseにしてValueプロパティに直接値を設定することでTrue,Falseを設定できます。

var n = new BooleanNotifier();
n.Subscribe(x => Debug.WriteLine(x));

n.TurnOn(); // true
n.TurnOff(); // false
n.Value = true; // true
n.Value = false; // false

ReactiveCommandのソースとして、単純にIObservable<bool>のソースとして使うことが出来ます。Subject<bool>との違いは、Valueで現在の状態をとれるという点です。

CountNotifier

CountNotifierは、名前の通りカウンターです。数値のカウントが出来ます。Increment, Decrementメソッドで指定した数だけ数値を加算したり、減算したりできます。特徴的なのは、IncrementメソッドとDecrementメソッドが返すIDisposableをDisposeすることで、インクリメントやデクリメントの逆が実行されて値がもとに戻ります。CountNotifierは、CountChangedStatusのIObservableになります。CountChangedStatusは以下のように定義されているenumになります。

/// <summary>Event kind of CountNotifier.</summary>publicenum CountChangedStatus
{
    /// <summary>Count incremented.</summary>
    Increment,
    /// <summary>Count decremented.</summary>
    Decrement,
    /// <summary>Count is zero.</summary>
    Empty,
    /// <summary>Count arrived max.</summary>
    Max
}

こんな感じで使えます。

var c = new CountNotifier();
// 現在のカウンタの状態を出力
c.Subscribe(x => Debug.WriteLine(x));
// 現在のカウンタ値を出力
c.Select(_ => c.Count).Subscribe(x => Debug.WriteLine(x));
// インクリメントして
var d = c.Increment(10);
// インクリメントを取り消し
d.Dispose();
// インクリメントしてデクリメント
c.Increment(10);
c.Decrement(5);
// 現在の値を出力
Debug.WriteLine(c.Count);

出力結果は以下のようになります。

Increment
10
Decrement
0
Empty
0
Increment
10
Decrement
55

コンストラクタで、カウンタのMax値を指定するとその値以上にならないカウンタとかも作ることができます。

ScheduledNotifier

ScueduledNotifierクラスは、指定したScheduler上で指定した時間に値を発行するだけのシンプルなクラスです。デフォルトだと現在のスレッド上になります。スケジューラを差し替える場合はコンストラクタにスケジューラを指定します。

使い方は以下のような感じになります。

var n = new ScheduledNotifier<string>();
n.Subscribe(x => Debug.WriteLine(x));
// 即時実行
n.Report("Hello world");
// 2病後実行
n.Report("After 2 second.", TimeSpan.FromSeconds(2));

VからVMへのイベントの伝搬

ReactivePropertyやReactiveCommandにViewで発生した"イベント"を渡す方法を提供しています。 EventToReactivePropertyとEventToReactiveCommandクラスがその機能を提供しています。このクラスはBehaviorのActionとして実装されていて、EventTrigger（WinRT系の場合はEventTriggerBehavior）などのTriggerに設定して使用します。EventToReactivePropertyクラスとEventToReactiveCommandクラスにはReactiveConverter<T, U>クラスを挟むことで非同期な処理を間に挟むことが出来ます。例えば以下のようなコンバーターを作成することでファイルを選択して選択したパスを返すことが出来ます（コンバータという名前が適当なのかというと自信がなくなってきますが…）

using Reactive.Bindings.Interactivity;
using System;
using System.Linq;
using System.Reactive.Linq;
using Windows.Storage.Pickers;
using Windows.UI.Xaml;

namespace App1
{
    publicclass FileOpenReactiveConverter : ReactiveConverter<RoutedEventArgs, string>
    {
        protectedoverride IObservable<string> OnConvert(IObservable<RoutedEventArgs> source)
        {
            return source.SelectMany(async _ =>
            {
                var picker = new FileOpenPicker();
                picker.FileTypeFilter.Add(".snippet");
                var f = await picker.PickSingleFileAsync();
                return f?.Path;
            })
            .Where(x => x != null);

        }
    }
}

このコンバータを使って以下のようにイベントをコマンドにバインドできます。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:App1"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"xmlns:Core="using:Microsoft.Xaml.Interactions.Core"xmlns:Interactivity1="using:Reactive.Bindings.Interactivity"x:Class="App1.MainPage"mc:Ignorable="d"><StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"><Button Content="OpenFile..."><Interactivity:Interaction.Behaviors><Core:EventTriggerBehavior EventName="Click"><Interactivity1:EventToReactiveCommand Command="{x:Bind ViewModel.SelectFileCommand}"><local:FileOpenReactiveConverter /></Interactivity1:EventToReactiveCommand></Core:EventTriggerBehavior></Interactivity:Interaction.Behaviors></Button><TextBlock Text="{x:Bind ViewModel.FileName.Value, Mode=OneWay}" /></StackPanel></Page>

コードビハインドとViewModelは以下のようになっています。

using Reactive.Bindings;
using Windows.UI.Xaml.Controls;

namespace App1
{
    publicsealedpartialclass MainPage : Page
    {
        public MainPageViewModel ViewModel { get; } = new MainPageViewModel();

        public MainPage()
        {
            this.InitializeComponent();
        }
    }

    publicclass MainPageViewModel
    {
        public ReactiveCommand<string> SelectFileCommand { get; }
        public ReadOnlyReactiveProperty<string> FileName { get; }

        public MainPageViewModel()
        {
            this.SelectFileCommand = new ReactiveCommand<string>();
            this.FileName = this.SelectFileCommand.ToReadOnlyReactiveProperty();
        }
    }

}

これでファイルを選択するとファイル名が表示されるようになります。EventToReactiveCommandとEventToReactivePropertyは、指定できるのがReactiveCommandかReactivePropertyかという違いだけなのでEventToReactivePropertyの使い方は割愛します。

IFilteredReadOnlyObservableCollectionインターフェース

Reactiveっぽくない機能ですが、プロパティの値をリアルタイムに監視してフィルタリングする機能を持ったコレクションです。コレクションに対して、ToFilteredReadOnlyObservableCollectionメソッドを呼び出すことで生成できます。 引数で、コレクションの対象にしたい条件を指定します。例えば以下のように使います。

var collection = new ObservableCollection<Person>();
// tanakaさん以外を含んだコレクション
var filtered = collection.ToFilteredReadOnlyObservableCollection(x => x.Name.IndexOf("tanaka") == -1);

collection.Add(new Person { Name = "okazuki1" });
collection.Add(new Person { Name = "okazuki2" });
collection.Add(new Person { Name = "okazuki3" });
collection.Add(new Person { Name = "tanaka1" });

// okazuki1, okazuki2, okazuki3
Console.WriteLine("---");
foreach (var p in filtered)
{
    Console.WriteLine(p.Name);
}

collection[1].Name = "tanaka2";

// okazuki1, okazuki3
Console.WriteLine("---");
foreach (var p in filtered)
{
    Console.WriteLine(p.Name);
}

まとめ

長々と書きましたが、ReactivePropertyの機能をなんとなく書き出してみました。 これでしばらくは、こういう記事はいいかな？

↧
Search
Viewing all articles
Browse latest Browse all 1388

Trending Articles

モーツァルト ディヴェルティメント 変ホ長調 K.563 の名盤

December 23, 2017, 2:32 am

井上貴博アナウンサー彼女や結婚の噂は？実家や親が話題？人気は？

September 15, 2013, 1:59 am

Ke Aloha Kalikimakaの歌詞を和訳します

January 9, 2014, 6:10 pm

PaliのLepe `Ula`ulaと歌詞の和訳

July 19, 2012, 7:10 pm

2014年6月6日号　三菱東京ＵＦＪ銀行（5月14日付）

June 9, 2014, 1:51 am

LNK2019:未解決の外部シンボル と LNK1120:外部参照 1 が未解決について

October 23, 2005, 9:03 pm

ヴァンパイア・ノーツ　攻略

December 11, 2018, 6:10 am

大阪・泉南イオンで飛び降り自殺とみられる転落事件が発生：ネットで拡散された理由とは

July 15, 2016, 12:05 pm

メールディーラーで受信するアドレスを追加できますか？

July 30, 2019, 1:56 am

Robocopy のエラー (戻り値) について

January 23, 2018, 11:28 pm

林要の結婚や経歴&評判とWikiプロフやLOVOT(ラボット)とグルーブエックス株価は

December 23, 2018, 6:18 am

【極☆寒】「凍った髪」を競い合う『国際ヘア・フリージング・コンテスト』！ 寒〜い写真に身震いしつつ過ぎ行く冬にサヨナラだ!!

March 10, 2015, 2:00 pm

滋賀の部落（同和地区）一覧

March 24, 2010, 6:39 am

【銃刀法違反】吉田総業組長代行 恩田達志容疑者を再逮捕

November 17, 2016, 6:39 pm

和歌山県代表決まる　都道府県対抗中学バレー

September 10, 2013, 2:00 am

大浦街道で重体事故

August 31, 2016, 1:35 am

【世界大学ランキング】 第１位にジュリアード音楽院とウィーン国立音大、日本勢は？

August 23, 2019, 1:32 am

【対策済】「SKYSEA Client View」のアップデートに失敗する問題についてのお知らせ

December 27, 2007, 7:00 am

Lahaina Lunaの歌詞を和訳しました

January 14, 2016, 6:10 pm

画像・写真】ららぽーと横浜で16歳男子高校生が転落死 不審な動き→逃走し警備員に追いかけられ→柵越え飛び降り・12m転落 窃盗・万引き？それとも盗撮？

September 17, 2016, 8:50 am
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>