Andrej Tozon's blog

In the Attic

NAVIGATION - SEARCH

My Month with Windows Phone 7

I had a pleasure of using a Windows Phone 7 device (LG Optimus 7 to be exact) for the past month and this is me sharing my experience with it. A quick note on my phone background: I’ve been using an iPhone for the past two years and am used to my wife’s HTC Hero (Android).

The thing is – I had to switch back to the iPhone after I returned my WP7 today (had it on a one month test drive) and it felt - weird. Let me just say that switching from the iPhone to WP7 and back felt a lot like switching from ZX Spectrum to a PC and back to the ZX (a 20-year old metaphor but who cares Smile). Something along the way of comparing serious, monochrome OS to a colorful, toyish one, if you will… Which OS suits you better remains a matter of personal taste, but to answer the question I got on one of my recent WP7 developer talks, I definitely don’t think that younger population won’t be attracted to Windows Phone 7; there are a lot of features that young audience will very much appreciate.

First, there’s the people hub – to track and manage everything and everybody from a single place is just awesome. Android is offering a similar story, but IMHO it’s not that well executed as it’s on WP7. My only wish here is that Microsoft would allow for 3rd party apps to easily integrate into the hub. And on the subject, twitter not being integrated into the hub is a huge miss, for example.

I also definitely love the Metro UI – simple, quickly recognizable graphics and large fonts. Easy for brains to process while on the move. There are, a couple of quirks I ran into… you can only add tiles on the single main screen (vertically, from the top down), and the main screen can hold up to 8 tiles. Imagine a live tile you put in the 7th row of the main screen. The gesture for unlocking the phone would be flick up, flick up. Except when you flick up the second time you can’t be sure where you’ll land - it depends on how hard you flicked. When in a hurry or on the go, that tile hunting game can be pretty time-consuming. And this is the phone that is supposed to save us from our phones, right? Either making flick up / down gestures to move a whole page up or down, or the ability to put tiles on the secondary screen on the left of the main screen would make more sense because your flick up, flick right gesture would land you exactly where you expected.
One additional thing that annoyed me was having to do two gestures to answer the call (unlock, answer) – why, oh why? Phone calls are the reason they are called phones – they should require the least amount of thinking and physical activities with this devices.
And, and I don’t know if this is related to WP7 OS or physical device - when answering a call, there was a certain lag involved before the microphone got switched on. That resulted in many confusing calls when I answered with ‘hello’, which the person on the other side didn’t hear, and waited for me to say something.

Build quality – I don’t know, the phone felt plasticky to me. I was especially worried I would accidentally pull out the Start button because of it’s embossed logo on it. And just to be clear – putting USB port on the side? That’s the worst place to put it. Cradle, anyone? Also, the photo button would be one of the greatest features on the phone if I wasn’t accidentally repeatedly hitting it when holding the phone in my left hand. It responds immediately, making your phone ready to take a photo in a matter of a second. But because of its position, it’s either a blessing, or a curse.

Ringtones – well, I tried to find a ring tone on my Optimus 7 but I couldn’t find one. The wide variety of beepy and clicky tones didn’t do much for me; I need noise to tell me it’s my phone ringing. Old phone, please!

Applications – tried them a few and they worked great… except for some with long(er), virtualized lists… jerky as hell. Hardly usable. Hard to keep up reading a list when every second or so you completely lose your track. Marketplace hung a couple of times. People’s hub crashed a couple of times, esp. when deleting a contact, imported from the SIM card. I was really impressed with the shipped IE browser. Very responsive and smooth. The whole being online experience is totally abstracted away from the phone, it feels really great.

A couple of other quirks: When trying to make a phone call, the contact info always tended to show in a landscape mode. I realized that I needed to hold my phone in a straight vertical position in order to be displayed correctly. The typing keyboard didn’t exactly liked my fingers’ typing, I was missing the keys constantly – wish there was a way to calibrate the keyboard.

In conclusion: yes, the OS has issues, some of them quite serious. From a casual user’s standpoint, I’d say the most annoying is the one with microphone lag and I hope this  will get fixed somehow, either by Microsoft or the device manufacturers. On the positive side, the phone is very easy to use and offers a great experience.
I have to say I got pretty used to it in the past month and I’m definitely considering buying my own WP7 in the near future. If I was living in a country, supported by the WP7 marketplace and the App hub, that would be a non-brainer.



Slides: Application Development for Windows Phone 7

I had the pleasure of participating in the local Microsoft roadshow that was going on in the past month.

4 talks. 4 cities. 1 subject: Application Development for Windows Phone 7.

I said I’d publish the slides. Here.

Also, from last I’ve heard, the situation for WP7 developers in Slovenia is improving. More details soon.



(Kind of) transparent Lock Screen for Windows Phone 7

Well, I thought it would be neat to have a transparent screen on my WP7 phone so I went and created a fully transparent 480x800 image and saved it as a PNG. Of course Zune software didn’t allow me to sync it with the phone (doesn’t support PNGs) so I renamed the image to JPG, which synced perfectly (shown as black image in the photo list).

I set the image as my lock screen image.

I now have a black lock screen on my phone, but whenever I touch the screen, the black fades away and reveals what’s beneath the lock screen (that’s when the lock screen is supposed to slide up a bit to hint the gesture to unlock).

Furthermore, it appears that this tap that hints the gesture also causes the reactivation of the app that was running (and deactivated) when the phone got locked. You can play a little game too… if you tap your finger fast enough to not let the lock screen fully reappear again, you can cause the app to fully reactivate (and continue to run)! I’ve got plenty of practice with this from my ZX Spectrum days so I managed to fully reactivate the official twitter app to load and refresh my timeline :) So what’s going on is the device is launching (and obviously terminating) the deactivated app each time you touch the lock screen?

I also noticed that sometimes the application bar from the deactivated app is displayed on my “transparent” locked screen even without touching it… I couldn’t figure out when this happens though.

Anyway, I’m enclosing my test transparent image here in case you’d want to give it a try.

phone



Reactive Extensions #3: Windows Phone 7

Following the theme from my previous two posts, this post will be about using Reactive Extensions on Windows Phone 7. I'll use a similar scenario as before – gradually load a few tiles into an ItemsControl. Let’s get started.

Starting a project

Create a new “Windows Phone Application”. Add references to assemblies Microsoft.Phone.Reactive and System.Observable to add support for Rx, then Microsoft.Phone.Controls.Toolkit (found in Silverlight Toolkit for Windows Phone 7) and System.Windows.Interactivity (Expression Blend for Windows Phone 7 SDK, should be already installed if you installed WP7 tools / Expresion Blend 4 SP1).

Layout

Put a ListBox on the main, name it list and possibly change the control to an ItemsControl (we don’t need to select items).

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ItemsControl Name="list" />
</Grid>

Create the ItemTemplate:

<DataTemplate x:Key="TileTemplate">
    <Grid Width="142"
          Height="142"
          Background="{StaticResource PhoneAccentBrush}"
          Margin="5">
        <TextBlock Text="{Binding}"
                   FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
                   Foreground="{StaticResource PhoneForegroundBrush}"
                   VerticalAlignment="Bottom"
                   HorizontalAlignment="Left"
                   Margin="20,0,0,10" />
    </Grid>
</DataTemplate>

… use WrapPanel for the ItemsPanel:

<ItemsPanelTemplate x:Key="WrapItemsPanelTemplate">
    <toolkit:WrapPanel />
</ItemsPanelTemplate>

… and update the ItemsControl to use them:

<ItemsControl Name="list" 
              ItemTemplate="{StaticResource TileTemplate}"
              ItemsPanel="{StaticResource WrapItemsPanelTemplate}" />

Reactive Extensions

I copied the code from my previous post:

public partial class MainPage : PhoneApplicationPage
{
    public MainPage()
    {
        InitializeComponent();

        Loaded += OnLoaded;
    }

    private readonly string text = "reactive wp7";

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
        text.ToObservable()
            .OnTimeline(TimeSpan.FromSeconds(.3))
            .ObserveOnDispatcher()
            .Subscribe(AddLetter);
    }

    private void AddLetter(char letter)
    {
        list.Items.Add(letter);
    }

Animating on appearance

Instead of using layout states as in Silverlight version (they are not supported in WP7’s ListBox), I was back on using a behavior to trigger the entrance animation:

public class LoadedBehavior : Behavior<FrameworkElement>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.Loaded += AssociatedObject_Loaded;
    }

    void AssociatedObject_Loaded(object sender, System.Windows.RoutedEventArgs e)
    {
        CreateStoryboard().Begin();
    }

    private Storyboard CreateStoryboard()
    {
        Storyboard sb = new Storyboard();
        DoubleAnimation animation = new DoubleAnimation
        {
            Duration = TimeSpan.FromMilliseconds(1000),
            From = -90,
            To = 0,
            EasingFunction = new CubicEase { EasingMode = EasingMode.EaseOut }
        };
        Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.Projection).(PlaneProjection.RotationY)"));

        sb.Children.Add(animation);

        animation = new DoubleAnimation
        {
            Duration = TimeSpan.FromMilliseconds(1000),
            From = 0,
            To = 1,
            EasingFunction =
                new CubicEase() { EasingMode = EasingMode.EaseOut }
        };
        Storyboard.SetTargetProperty(animation, new PropertyPath(UIElement.OpacityProperty));

        sb.Children.Add(animation);
        Storyboard.SetTarget(sb, AssociatedObject);
        return sb;
    }
}

Wrapping up

The last thing to do was adding the behavior to the ItemTemplate and prettify the layout a bit.

That’s it, pretty easy – tiled letters are now gradually filling up the space on the main page, each letter appearing on the screen with a subtle animation. For more details on how that works check out my previous posts on Reactive Extensions.

The demo project can be downloaded from here. In the future I’ll look into using more Reactive Extensions on Windows Phone 7 – stay tuned.

image



Lost in time? Zip it!

In my last blog post I wrote about using Reactive Extensions together with layout states in Silverlight to gradually introduce collections of data to a ListBoxes. One small problem with code from that post is that I’m generating the sequence of data myself, whereas in real-world scenario would be pulling it from some data source like database or web service. It’s easy to turn an existing collection to an Observable by using the ToObservable() operator, but the generated sequence wouldn’t be time-based, as it would have been if we had used the GenerateWithTime() constructor.

So how do we turn an existing enumerable collection into a time-based observable sequence?

First, we need to convert the enumerable to a plain observable. Here’s the example of such conversion:

private readonly string text = "REACTIVE";

IObservable<char> letters = text.ToObservable();

[Reminder: a string is a collection/sequence of chars – turning this collection into an observable sequence results in IObservable<char>]

Next, we need to create an observable sequence that will serve as a “beat” – a time-based sequence that would define points in time at which we want to “release” (or trigger) the next item in our data collection. The following code will create a fast “beat”, “thumping” at every 300 ms:

IObservable<long> beat = Observable.Interval(TimeSpan.FromSeconds(.3));

Now we only need to lay the numbers from the enumerable collection over created beat and for that, there is a convenient combinator operator available in Reactive Extensions. It’s called – Zip.

IObservable<string> dancingLetters = numbers.Zip(beat, (letter, time) => letter);

Zip operator will take two observable sequences (letters and beat) and produce a new value pair when a new value is present in both sequences, kind of like a zipper. In our case, the letters sequence starts with 8 values and beat starts with zero. As the beat sequence starts producing new values (one every 0.3 seconds), these new values are paired (zipped) with values from letters, resulting in a new pair of data (letter, time) releasing every 0.3 seconds. As we’re only interested in numbers from the numbers sequence, we return only those values, ignoring values values from the beat sequence (=> letter).

dancingLetters is now a time-based observable sequence which we can subscribe to:

dancingLetters.ObserveOnDispatcher().Subscribe(AddLetter);

… and get the same result as in previous post, only with letters.

One great thing about Reactive Extensions is they are very extensible, meaning you can write your own operators by creating new extension methods. For frequent operations like the one we’ve just performed, it’s a perfect fit. Here’s an example of an OnTimeline() operator that would put an observable sequence on a live timeline:

public static class ObservableEx
{
    public static IObservable<TSource> OnTimeline<TSource>(this IObservable<TSource> source, TimeSpan period)
    {
        return source.Zip(Observable.Interval(period), (d, t) => d);
    }
}

With the new operator handy and in place, we could rewrite the previous snippet as (full code ahead):

private readonly string text = "REACTIVE";

private void OnLoaded(object sender, RoutedEventArgs e)
{
    text.ToObservable()
        .OnTimeline(TimeSpan.FromSeconds(.3))
        .ObserveOnDispatcher()
        .Subscribe(AddLetter);
}

private void AddLetter(char letter)
{
    list.Items.Add(letter);
}

This application in action can be observed through this link

image

In this post, I extended the code sample from previous post by creating a new extension method that puts an existing observable sequence on a timeline, with delayed item notification.

Download source code from here.



Silverlight Layout States with Reactive Extensions

I’ve been working on several applications where I needed to display several items in a ListBox (or an ItemsControl) at startup, but they had to appear on the screen one by one, with a short delay, not all at once. Using ListBoxItem’s layout states took care of handling how an individual item would appear in the list, but I still needed to handle a short pause between each item being added to the list. Usually I resorted to using a Timer, which sorted out that needed delay for me, but that really felt like hacking that had nothing to do with the real problem.

Reactive Extensions, however, offer a much elegant solution. The GenerateFromTime() construction operator is a close relative to the Generate() operator used in my previous blog entry, except GenerateFromTime() adds an important time dimension to generated sequence – the last parameter in this operator lets you specify a delay between each call to OnNext():

private readonly IObservable<string> numbers = Observable.GenerateWithTime(1, i => i <= 8, i => i + 1, i => i.ToString(), i => TimeSpan.FromSeconds(.3));

The above code snippet will produce an observable sequence of 8 strings, progressing through these strings with a 0.3 seconds delay.

The rest of the code:

private void OnLoaded(object sender, RoutedEventArgs e)
{
    numbers.ObserveOnDispatcher().Subscribe(AddImage);
}

private void AddImage(string image)
{
    list.Items.Add(image);
}

Note the ObserveOnDispatcher() operator again – GenerateWithTime uses a timer operating on a background thread so we need to ensure the AddImage() method is called on the UI thread.

Layout states for this sample are kept really basic:

<VisualStateGroup x:Name="LayoutStates">
    <VisualStateGroup.Transitions>
        <VisualTransition GeneratedDuration="0:0:1">
            <VisualTransition.GeneratedEasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </VisualTransition.GeneratedEasingFunction>
        </VisualTransition>
    </VisualStateGroup.Transitions>
    <VisualState x:Name="AfterLoaded"/>
    <VisualState x:Name="BeforeLoaded">
        <Storyboard>
            <DoubleAnimation Duration="0" To="-94" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
        </Storyboard>
    </VisualState>
    <VisualState x:Name="BeforeUnloaded"/>
</VisualStateGroup>

And the final result can be observed by following this link.image

This post has shown how to use Reactive Extensions in Silverlight to gradually fill a ListBox, with a bonus of a nice item entry animation, provided by the layout states.

Download source code from here.



Reactive Extensions – from pull to push: where’s the block?

I’ve discussed Reactive Extensions with a few people after my Rx talk last week and thought I’d clear up some confusion by clarifying on this blog…

One thing to know about Reactive Extensions is that simply going from pull model (enumerating) to push model (observing) doesn’t give you immediate background thread processing – everything is still happening on the same thread.

For example, let’s look at the following code and put a few debugger breakpoints in it:

image

Right at the top, there’s an array of image names I’m adding to the ListBox (AddImage() method). In this WPF app, the OnLoaded() method handles the Loaded event, where foreach loop iterates through the array and calls the AddImage() method.

Red balls indicate the places where I’d put the breakpoints, and the number in it tells the order in which they would be hit. Following the track, it is obvious that the OnLoaded() method is blocking until all images in the array is added into the ListBox.

To transform this code to use the observer/pull model, the following changes are made:

  1. The array (now an IObservable<string>) is generated with the Generate() Observable constructor.
  2. foreach loop is removed from the OnLoaded() method and replaced with the Observable subscription, providing the methods for OnNext and OnCompleted.

The Subscribe() method looks harmless sitting alone on now shortened OnLoaded() method, but guess what – it’s still blocking it! Take a look at the execution path: the code would enter the method, and upon subscription, starts calling the AddImage() method. After that, it calls OnCompleted() and then, only then, continues the execution in the OnLoaded() method and finally exits.

The thing to be careful about here is the fact that even if the images.Subscribe() method looks innocent and instant, it may be executing a long(er) time, if an observable sequence is very long. Which also means that the current thread will be blocked for that time also. And we don’t want the UI thread blocked.

image

What we can do to achieve the behavior we want and expected (not blocking the UI) is forcing subscription on a new – background – thread and expect the observable to call us back on the UI thread. Note that the AddImage() method has to be called on the UI thread because the code accesses the ListBox and if called from a non-UI thread, the call would fail. The code below exercises these changes and results in a whole different flow: upon subscription, the UI thread exits the OnLoaded() method immediately, while the subscription processing is done in a new thread. ObserveOnDispatcher() operator ensures that for each element in the observable sequence, AddImage() method is safely called on the UI thread.

image



Bleeding Edge 2010: Reactive Extensions Slides and Demo

These are slides and demo from my talk on Reactive Extensions from Thursday’s Bleeding Edge conference:

Slides | Demo code

Thanks to all for attending the talk.



What's Wrong with *my* WCF Service?

While I was watching the Silverlight TV episode on common WCF service issues with Silverlight (Silverlight TV 46: What's Wrong with my WCF Service?) I remembered one more issue that bit my neck a while back and thought it was worth pointing it out again... It was one of those “Service returned ‘Not found’” issues, except nothing I would do seemed to help solving it.

My simple WCF service was returning an IEnumerable<T> and I was using a Linq query for filtering the results before returning them to the client. Can you guess where I’m going to?

Let’s step back and take a look at the symptoms I was facing: the original problem was that service call returned with the infamous “NotFound” exception.

I would try using Client Http Stack to get more info about the exception – nothing. Reverted to Browser Http Stack and implemented service stack to return Faults – still nothing. I wrapped my service method call into a try…catch statement inside service method – no errors would’ve been caught on the server side and the NotFound error would persist… Furthermore, stepping through the service code didn’t throw any exceptions and the error only happened when service call returned one or more records. When there was zero, it returned fine… Hmmm… Something happening on the wire? Fiddler wasn’t much of a help either.

What helped at last was a careful examination of the service method call. Facepalm! I was failing in materializing the Linq query by not forcing its evaluation with the .ToList() extension method (or similar) and data never made it to the other side.

Lesson learned – when your services return IEnumerable and you’re using Linq to query/transform data double check that you’re returning something that client would actually have a chance enumerating.



Watch Silverlight TV videos, pinned to full screen

One of the “annoyances” with Silverlight (and similar browser plugins) is with watching a video in a multi-monitor set up – you would pop out your Silverlight video player to full screen on one monitor and continue working on your other monitor – which would cause your video player to return to its normal size, ruining your watching experience. Well, that was the case until Silverlight 4 came out. Silverlight 4 supports “full-screen pinning” in a way that you can choose the Silverlight 4 app to remain pinned to full screen on one monitor even if you focus your work on the other.

Unfortunately, (the regular) Channel 9 still doesn’t use Silverlight 4 which means you don’t get this option of full-screen pinning, but guess what – Channel 9 is in a process of refurbishing and a preview of the new site is available at the http://preview.channel9.msdn.com. This is good news for us because they’re using Silverlight 4 for their player, which basically means you can watch your Silverlight TV full-screen pinned simply by prefixing Silverlight TV show’s URL with the word preview. For example, show 40: You Are Already a Windows Phone Developer is available on http://preview.channel9.msdn.com/shows/SilverlightTV/Silverlight-TV-40-You-Are-Already-a-Windows-Phone-Developer/.

However, there seems to be a lag with publishing new content, resulting in shows not being available on the preview site at the same time as on the regular time. At the time of this writing, it appears that Show 40 is the last one available on the preview site, with shows 41 and 42 remaining on the regular site only. Anyway, it’s good to see Channel 9 going Silverlight 4 – hope to the new site up and running soon.