Category Archives: Rx

A Reactive Extension (Rx) use case in a Windows Phone app

Rx, Tools, Windows Phone, ,

While working on my todo-list application 2Day, I encountered a situation where Rx came to the rescue. Rx (Reactive Extension) is a framework which has been available for a couple of years now. It is possible to use it on the phone very easily. In this blog post, I share a piece of code which use Rx to implement a specific feature in 2Day.

2Day’s users have requested a search feature. The idea is simple: give the user a new page where he can type some text which then filters his tasks. Here is the feature in action in 2Day:

2Day - global search

Even though it seems very basic, I wanted to add an extra feature: perform the search a couple of milliseconds after the user actually stops typing. This prevents the search result to blink while the user types. It turns out it’s very easy to implement this using Rx which is dedicated to manipulate stream of observable items. Here is the code:

var seq = Observable
    .FromEventPattern(this.textbox, "TextChanged")
    .Throttle(TimeSpan.FromMilliseconds(500))
    .ObserveOnDispatcher()
    .Subscribe(e =>
    {
        this.viewmodel.SearchText = this.textbox.Text;
    });

The first step is to create the observable sequence using the FromEventPattern method which can turn an event into an observable stream. Then the Throttle method allows to “calm down” the stream, by requiring the specified amount of time to be spent before sending the item in the output stream.

This can be shown using the following diagram:

RxExampleThrottle

If the user presses quickly the letters “p”, “a”, “i” and “r” we will start the search only after the specified amount of time and not for each new letter. Notice that the subscribe method does not do a lot of things: it only sets a property on the ViewModel layer which actually performs the search.

Here is a simple yet useful use case for Rx. It’s very nice to have the library available out of the box on the phone. Hope it helps 🙂

TechDays 2011: Rx talk, slides and source code

Rx, Silverlight, Windows Phone, WPF,

As promised, here is a blog post which shares source code and slides for the Rx talk I gave during last TechDays in Paris. I animated this session with my co-worker Charlotte and with Mitsu.

Download slides here.
Download source code here.

Demo1: Drag’n’drop in a WPF application

The goal was to implement a basic drag’n’drop functionality in a WPF application. The Rx query looks like the following:

var query = from mouseDown in this.image.GetMouseLeftButtonDownObservable()
            let downPosition = mouseDown.EventArgs.GetPosition(this)
            let rect = new Rect(downPosition.X - 10, downPosition.Y - 10, 20, 20)
            let delta = mouseDown.EventArgs.GetPosition(this.image)
            from mouseMove in this.GetMouseMoveObservable()
                .Select(ea => ea.EventArgs.GetPosition(this))
                .SkipWhile(p => rect.Contains(p))
                .DoOnce(p => this.onMouseEnter.Begin(this.image))
                .Select(p => p.Offset(delta))
                .TakeUntil(this.GetMouseLeftButtonUpObservable())
                .Finally(() => this.onMouseLeave.Begin(this.image))
            select mouseMove;

query.Subscribe(p => this.image.SetPosition(p));

Demo2: online Twitter search and Bing map geolocalization

This time, the goal was to query Twitter asynchronously and to geolocalize the associated Tweets. The Rx query:

this.textbox.GetTextChangedObservable()
    .DistinctUntilChanged((ea) => this.textbox.Text)
    .Throttle(TimeSpan.FromMilliseconds(300))
    .ObserveOnDispatcher()
    .Do(ea => this.ShowLoadingIndicator())
    .Select(ea => TweeterHelper.Search(this.textbox.Text))
    .Switch()
    .ObserveOn(Scheduler.Dispatcher)
    .Select(page => TweeterHelper.ParseTwitterSearch(page))
    .Subscribe((tweets) =>
                    {
                        this.HideLoadingIndicator();
                        this.listbox.ItemsSource = tweets;

                        TweeterHelper.LocalizeTweets(this.map, tweets);
                    });

Demo3: using the accelerometer in a Windows Phone 7 application

The last demo was about the usage of the accelerometer in a Windows Phone 7 application. Here is the relevant Rx query:

private void MoveEllipse(IObservable accelerationObservable)
{
    accelerationObservable
        .SlidingBuffer(2)
        .Select(accCouple => new Acceleration(accCouple.First(), accCouple.Last()))
        .ObserveOnDispatcher()
        .Do(acc => this.textBlock.Text = acc.ToString())
        .Scan(new Point(x0, y0), (point, acc) => point.Move(acc).ClipTo(horizontalInterval, verticaInterval))
        .Subscribe(p => this.ellipse.SetCenter(p));
}

Doing this session was a really great experience ! I’d like to thank Charlotte and Mitsu for doing it with me. Also, I’d like to thank all users who came to the presentation !

TechDays 2011: Rx talk in Paris

Rx, Silverlight, Windows Phone, WPF,

During the next 3 days, the “Palais des Congrès” in Paris will hosting the TechDays 2011. For the very first time, I’ll have the chance to be part of it as a speaker for a talk about Rx (Reactive Extensions).

The session will take place in room 241, tomorrow Thursday 8, from 1pm to 2pm. Here is the link to the session’s description (in French).

I’ll share presentation slides and source code by the end of the week 🙂