Serving Silverlight Apps from Windows Mobile

For the last Paris mobility briefing, my colleague Pierre Cauchois asked me to co-animate the Coding4Fun session…hard to refuse.

Even if mobile dev is not my every day work, thanks to the .Net Compact Framework, it’s still .Net programming.

Here is the scenario:

You come back home, you have a windows mobile phone wifi capable and you want to quickly get access to your phone pictures from your home network.
You just activate the Wifi, run my app and then browse to the provided link from any computer on the network.

image

Then a silverlight application is loaded from the phone and you can see any of your pictures.

image

Here is how it works:

I decided to use windows mobile to host a Silverlight application.

I had just needed a Mobile Web Server that I found here (thanks to Pavel Bánský). The code is full C# and really small and easy to use. I just had to add cookie support but I will talk about it later.

Now I have a basic web server hosted on my phone, I will publish some stuff.

- the main html page containing the silverlight application. I renamed the one provided by Visual Studio to “Default.html” to make it the default page of my web site.

- the xap file which is the Silverlight application itself.

- a web service to expose the list of pictures available on my phone. As I had no web service infrastructure available on my very small web server, I have decided to expose a rss feed which is made with just a few lines of Linq to Xml. Exposing pictures on http gives a lot of advantages like getting the benefits of the browser local cache. In this project it’s very useful because the mobile phone does not have a large and powerful bandwidth, so we appreciate not to reload pictures ever time. Now we just need to link some Silverlight Image controls to the pictures urls and the Silverlight image loader will work for us.

- make the pictures visible. The web server contains a virtual folder feature. I just had to make it point to the local pictures path.

Linq to Xml rss content creation on server side (Compact Framework):

var files = Directory.GetFiles(picturesPath, "*.jpg");

XElement response = new XElement("rss",
    new XAttribute("version", "2.0"),
    new XElement("channel",
        new XElement("title", "Mobile pictures"),
        new XElement("description", "Mobile pictures from my phone"),
        new XElement("link", ""),
        (from file in files.Select(f => Path.GetFileName(f))
         select 
             new XElement("item",
                 new XElement("title", file),
                 new XElement("description", file),
                 new XElement("link", string.Format("https://{0}/photos/{1}",ipAddress,file))
                 )
        ).ToArray()
    )
);

Regarding the client development, I have created a simple Silverlight 3 application (yes I also wanted to play with those new features like 3D and non linear animations).

The Silverlight application calls the web service, reads the rss content (using Linq to Xml again !) and binds the pictures paths to a listbox. The selected picture is displayed in the biggest part of the window. When you change the selected picture, an animation wipes out the existing one and another is bringing the new one with a 3D effect.

Analysing rss content with Linq to Xml on client side (Silverlight):

var root = XElement.Parse(e.Result);

var items = root.Element("channel").Elements("item").Select(i => i.Element("link").Value);
lb.ItemsSource = items;

And that’s it !

image

Now let’s talk about security. Once again, it’s just a little demo but we can not talk about opening a web server on your phone without talking about security.

The web server is made to respond to the user for a short time. https is complex and even basic authentication needs credentials on the server side. I have chosen another solution that I found to be more appropriate. In my scenario, the web server is requested by a single user who’s got the phone in his hands. So when a first request comes (no cookie), I am asking for a human validation (MessageBox). Of course during this time the server is stopped. The user just has to validate on the phone and then the server answers and provides an authentication cookie. Next requests will carry the cookie and the user will not have to validate again.

image

 

 

 

This remains a really really small demo. We could of course imagine having a more robust web server and some optimizations like thumbnails creation on server side but this was just a test and I hope it gave some interesting ideas to some of you.

In addition to hosting a Silverlight application on my mobile phone, the funniest was to be able to use .Net both on server and client side (Compact Framework and Silverlight) without using the Windows .Net Framework !

The source code is attached to this post.