Launch Visual Studio 2010 Express for Windows Phone and create a new Windows Phone Application project. Name it RxSample.

In this project, you will observe the messages generated by the Reactive Extensions framework in the text box on the phone screen.

From the Toolbox, select the textblock and drop it on the design surface. Since you are just getting your feet wet with Rx.NET, leave the name of the textblock (textBlock1) unchanged for now and adjust its height and width to occupy the full area of the screen. Highlight the textblock, press F4 to bring up its Properties window, and set the TextWrapping property to Wrap.

On Windows Phone 7, the Rx.Net implementation is contained within two separate assemblies –Microsoft.Phone.Reactive and System.Observable.

Add a reference to Microsoft.Phone.Reactive and System.Observable assemblies by right-clicking and selecting Add Reference.

Import the Rx.NET libraries to current code. To do that, open MainPage.xaml.cs (right-click MainPage.xaml and select View Code) and add the following statement to the top of the page:

using Microsoft.Phone.Reactive;

Remember how an Observable collection performs the role of the Subject in the Observer pattern. In Rx.NET, the IObservable<T> interface acts as that Subject. You will now create an Observable collection that will consist of a range of integer values.

In the MainPage() constructor, add the following code right after the InitializeComponent() statement:

IObservable<int> source = Observable.Range(5, 3);

Notice the use of the Observable.Range method to create an Observable collection that will consist of a range of integers from 5 to 7 inclusive (the Range method created three sequential values, from 5 to 7 inclusive).

You will now create an Observer for the source Subject created in Step 2. This Observer object will be notified of any changes to the source—in this case, every time a new integer is generated, or "pushed down" to the application. Notice that the Observer object implements IDisposable interface as well.

Add the following code to create the Observer:

IDisposable subscription = source.Subscribe(x =>
        textBlock1.Text += String.Format(" OnNext: {0}", x),
        ex => textBlock1.Text += String.Format(" OnError: {0}", ex.Message),
        () => textBlock1.Text += " OnCompleted");

The Subscribe method of IObservable<T> has several overloads; the one that you just used accepts three lambda expressions (see the "Lambda Expressions" sidebar) as its parameters: the first lambda expression contains the logic to invoke when another element becomes available to the Observer (OnNext), the second has logic to invoke if there is an exception in the Observer (OnError), and the last one contains logic that gets executed when the Subject completes its useful life (OnComplete). The "completion of useful life" condition varies from Subject to Subject, but generally means that there are no more elements to receive from the Subject. If you're not familiar with lambda expressions, the sidebar contains a brief introduction to this newer feature of the .NET Framework.

Finally, tell the Observer to discontinue its interest in the Subject's state by issuing a Dispose() method:

subscription.Dispose();

Press F5 to run the application. The Windows Phone 7 emulator screen will appear, showing messages OnNext: 5, OnNext: 6, OnNext: 7, and OnComplete, as shown in Figure 18-1. The Observable object generated three integer values, pushed them down to Observers, and called it quits.

Launch Visual Studio 2010 Express for Windows Phone and create a new Windows Phone Application project. Name it FlickrRx.

Change the name of the application to Flickr Search, and change the page title to "Rx at Work" (to accomplish this, highlight the application name, press F4, edit the Text property, and then do the same for the page title).

Add a reference (by right-clicking and selecting Add Reference) to Microsoft.Phone.Reactive and System.Observable assemblies.

From the Toolbox, select a text box and drop it on the design surface. Rename the text box to txtSearchTerms. Make the width of the text box equal the width of the screen and clear the Text property. Next, select a textblock, drop it underneath the text box, rename it lblSearchingFor, and resize it to be the width of the screen.

From the Toolbox, select the WebBrowser control and drop it on the design surface underneath the textblock. Rename the WebBrowser control webResults and make it the width of the screen.

Open MainPage.xaml.cs (right-click MainPage.xaml and select View Code) and paste the following using statement at the top of the page:

using Microsoft.Phone.Reactive;

Now, write code to capture the KeyUp events of the text box. To accomplish this, you will use the FromEvent method of the Rx.NET library, which accepts the name of the object to capture events for, as well as name of the event on that object.

Paste the following code immediately following the InitializeComponent() statement in the MainPage() constructor:

var keys =  Observable.FromEvent<KeyEventArgs>(txtSearchTerms, "KeyUp");

keys.Subscribe(evt =>
{
  lblSearchingFor.Text = "Searching for ..." + txtSearchTerms.Text;

webResults.Navigate(new Uri("http://www.flickr.com/search/?q="
  + txtSearchTerms.Text));
});

The first statement creates an Observable data source, keys that will consist of all KeyUp events of the txtSearchTerms text box. The second statement is a lambda expression that creates an Observer on this collection and attempts to update the lblSearchingFor textblock with the text entered into the text box and show the web page representing the results of searching Flickr with the text supplied in the text box. Note the { symbol within the lambda expression—that symbol is used to define a lambda expression whose body has more than one statement within it, as you do in the previous example.

Press F5 to run the application. As you type the first character, you should see the WebBrowser control attempting to navigate to the Flickr search page specifying the only character entered as its search criteria. Notice how there is very little visual indication that there's some search or navigation performed behind the scenes. You will improve on that in the sections that follow, where you will create an animation to play while the WebBrowser control is loading with the results of an image search.

Change the code line declaring an Observable collection above from

var keys =  Observable.FromEvent<KeyEventArgs>(txtSearchTerms, "KeyUp");

to

var keys = Observable.FromEvent<KeyEventArgs>(txtSearchTerms,
               "KeyUp").Throttle(TimeSpan.FromSeconds(.5));

Change the code block declaring an Observer from

keys.Subscribe(evt =>
{
        lblSearchingFor.Text = "Searching for ..." + txtSearchTerms.Text;
        webResults.Navigate(new Uri("http://www.flickr.com/search/?q="
        + txtSearchTerms.Text));
});

to

keys.ObserveOn(Deployment.Current.Dispatcher).Subscribe(evt =>
         {
                if (txtSearchTerms.Text.Length>0)

{
                      lblSearchingFor.Text = "Searching for ..." +
txtSearchTerms.Text;
                      webResults.Navigate(new Uri("http://www.flickr.com/search/?q="
+
                      txtSearchTerms.Text));
                }
         });

Press F5 to run the application. Click the text box and enter the search terms for photo lookup in Flickr (for example, Barcelona) and watch the WebBrowser control retrieve the images of that beautiful European city from Flickr.

Let's examine the code that you added in the last section. You created an observable collection that consists of all of the KeyUp events generated on txtSearchTerms text box. When you added the Throttle(.5) statement, you effectively told Rx.NET that you wanted to observe only KeyUp events that occur more than half a second apart (0.5 seconds). Assume that an average user will be pressing the keys on the keyboard less than half a second apart; so a half-a-second pause between key presses will tell the application that the user is ready for the Flickr search to launch and the user is ready to "observe" the results of its execution.

In Step 2, you enhanced the application in two ways. First, you added logic not to invoke image search if nothing is entered in the text box (this could happen if the user erased the content with the Backspace key). Second, notice the ObserveOn(Deployment.Current.Dispatcher) construct that was used to help create an Observer. To understand its reason for being and to allow you to peek under the hood of Rx.NET, remove it. As a result, your code for Step 2 will look like the following snippet:

keys.Subscribe(evt =>
            {
                if (txtSearchTerms.Text.Length > 0)
                {
                    lblSearchingFor.Text = "Searching for ..." +txtSearchTerms.Text;
                    webResults.Navigate(new Uri("http://www.flickr.com/search/?q=" +
txtSearchTerms.Text));
                }
            });

Press F5 to run the application now, and you will see the screen shown in Figure 18-4, where Visual Studio displays an "Invalid cross-thread access" message.

Still in Visual Studio for Windows Phone, add a textblock to the phone's design surface and place it between the "Searching for" textblock and the WebBrowser control. Name that textblock lblLoading, set the caption to "Loading Images," and set its Visibility property to Collapsed.

Microsoft Expression Blend for Windows Phone is a powerful application for creating and editing graphics and animations for Windows Phone 7 devices. You have used it in the first part of this book to style controls and for other graphical tasks.

To launch Expression Blend and load it with the Flickr project, right-click MainPage.xaml in Visual Studio and select Open in Expression Blend. Microsoft Expression Blend launches with your solution open and ready to edit.

Your animation will be a progress bar in the form of a rectangle that will grow in width as the time passes. This animation will loop indefinitely, so that when it reaches maximum allowable size, the rectangle will go back to its beginning and the animation will be repeated.

In Expression Blend, select a Rectangle from the Toolbox, draw a very narrow, almost invisible rectangle right next to the Loading Images textblock, and set its Fill color to red.

Now, create what is called a timeline animation in Expression Blend. Timeline animations are created with the use of the storyboards, so you will create a new storyboard in this step.

In the Objects and Timeline window, click the New button (shown in Figure 18-5), name the storyboard loadingImages, and click OK.

The Objects and Timeline panel will now change to display a timeline, and Blend is ready to record your animation.

Select the rectangle that you placed on the Windows Phone design surface and click the Record Keyframe button, as shown in Figure 18-6.

Next, move the Animation Playhead (the yellow vertical line in the Timeline) to about 1.5 seconds, as shown in Figure 18-7. Click the Record Keyframe button again, and then resize the rectangle to be close to the full phone screen width.

Now you will now set the animation to loop as long as it is active.

In Objects and Timeline, click and select the loadingImages storyboard name. Common Properties for the Storyboard dialog appears. Select "Forever" in the Repeat Behavior property of this storyboard.

With the animation now complete, you are ready to show it when the user performs a search for Flickr images.

Figure 18.5. Creating a new storyboard animation in Expression Blend

Save everything in Expression Blend (File

Paste the following code at the end of the MainPage constructor:

var browser =
        Observable.FromEvent<System.Windows.Navigation.NavigationEventArgs>(webResults,
"Navigated");

        browser.ObserveOn(Deployment.Current.Dispatcher).Subscribe(evt =>
        {
                loadingImages.Stop();
        lblLoading.Visibility = System.Windows.Visibility.Collapsed;
        });

You are now ready to run the application.

Press F5, type a keyword into the text box, and observe the animation while the images are being loaded into the browser.

Launch Visual Studio 2010 Express for Windows Phone and create a new Windows Phone Application project. Name it WeatherRx.

In MainPage.xaml, change the name of the application to WeatherRx and change the page title to "Weather App" (you are also certainly welcome to name the application and the page according to your preference).

Since you will be using Rx.NET to build this application, add a reference (by right-clicking and selecting Add Reference) to Microsoft.Phone.Reactive and System.Observable assemblies.

You need to add a Service Reference to the weather service already mentioned. The weather service is an .asmx web service hosted at www.webservicex.net.

To add a reference to this service, right-click the Project Name and select Add Service Reference. In the dialog that comes up, enter the following value in the Address Textbox: http://www.webservicex.net/WeatherForecast.asmx. Press the Go button.

The WeatherForecast service should appear on the left. Click the arrow next to it, make sure to select WeatherForecastSoap service, and then rename the namespace to "svcWeather."

Your final Add Service screen should look like Figure 18-9.

Press the OK button.

Open MainPage.xaml and add the following code:

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <TextBox Height="72" HorizontalAlignment="Left" Margin="0,51,0,0"
Name="txtZipCode" Text="" VerticalAlignment="Top" Width="480" />
            <TextBlock Height="53" HorizontalAlignment="Left" Margin="6,13,0,0"
Name="lblLegend" Text="Enter Zip Code Below for Current Weather" VerticalAlignment="Top"
Width="462" />
            <TextBlock Height="30" HorizontalAlignment="Left" Margin="6,129,0,0"
Name="lblWeatherFahrenheit" Text="Current Weather, Fahrenheit " VerticalAlignment="Top"
Width="435" />
            <Image Height="150" HorizontalAlignment="Left" Margin="241,213,0,0"
Name="imgWeather" Stretch="Fill" VerticalAlignment="Top" Width="200" />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="6,162,0,0"
Name="lblCelsius" Text="Current Weather, Celsius" VerticalAlignment="Top" Width="435" />
    <TextBlock Height="30" Margin="6,379,39,0" Name="lblStatus" Text=""
VerticalAlignment="Top" />
        </Grid>
    </Grid>

Open MainPage.xaml.cs (by clicking MainPage.xaml and selecting View Code) and add the following using statements to the top of the page:

using Microsoft.Phone.Reactive;
using System.Windows.Media.Imaging;

Add the following code after the InitializeComponent() statement of the MainPage() constructor:

WireUpWeatherEvents();
WireUpKeyEvents();

Here, you are wiring up web service events and keystroke events in separate functions, a technique that will become very useful in the subsequent sections of this chapter when you deal with error recovery.

Create the WireUpWeatherEvents function and its supporting GetWeatherSubject function by pasting the following code. Note how you have created a separate function (GetWeatherSubject) to return an Observable collection from the weather web service event.

private void WireUpWeatherEvents()
               {
                       var weather = GetWeatherSubject();
               weather.ObserveOn(Deployment.Current.Dispatcher).Subscribe(evt =>
                       {
                               if (evt.EventArgs.Result.Details != null)
                               {
                               lblWeatherFahrenheit.Text = "Current Weather, Fahrenheit: " +
                               evt.EventArgs.Result.Details[0].MinTemperatureF.ToString() + "
                               - " +
                               evt.EventArgs.Result.Details[0].MaxTemperatureF.ToString();

                               lblCelsius.Text = "Current Weather, Celsius: " +
                               evt.EventArgs.Result.Details[0].MinTemperatureC.ToString() + "
                               - " +
                               evt.EventArgs.Result.Details[0].MaxTemperatureC.ToString();

                               imgWeather.Source = new BitmapImage(new
                               Uri(evt.EventArgs.Result.Details[0].WeatherImage,
                               UriKind.Absolute));
                               }
                 },
               ex => { lblStatus.Text = "Sorry, we encountered a problem: " + ex.Message; }
            );
         }

     private IObservable<IEvent<svcWeather.GetWeatherByZipCodeCompletedEventArgs>>
     GetWeatherSubject()
        {
            var weather =
Observable.FromEvent<svcWeather.GetWeatherByZipCodeCompletedEventArgs>(weatherClient,
"GetWeatherByZipCodeCompleted");
            return weather;
        }

Create the WireUpKeyEvents function that will define an Observable collection from the KeyUp events and create subscription to that collection by adding the following code:

private void WireUpKeyEvents()
        {
        var keys = Observable.FromEvent<KeyEventArgs>(txtZipCode,
                "KeyUp").Throttle(TimeSpan.FromSeconds(1)).DistinctUntilChanged();
        keys.ObserveOn(Deployment.Current.Dispatcher).Subscribe(evt =>
                {
                        if (txtZipCode.Text.Length >= 5)
                        {

weatherClient.GetWeatherByZipCodeAsync(txtZipCode.Text);
                        }
                });
        }

Press F5 to run the application. You should see a screen prompting you to enter the US ZIP code to retrieve the current weather for. If you enter your ZIP code, you should get a reasonable estimate of your current weather, both on the Fahrenheit and Celsius scales. You should also see a small picture with a visual representation of the current weather conditions. Figure 18-11 shows sample output for the Jacksonville, FL area (ZIP code of 32202).