SurfCube on Mango Part 1 – Passing the Smoke Test

Note: If you don’t know what SurfCube is and would like to follow this post series: it is a popular Windows Phone 7 web browser with a 3D twist. Here is a demo video you should look at to understand what I am talking about. Better yet, download SurfCube, see for yourself how it works – and if this series is useful for you, please consider buying!

I have just submitted SurfCube 3.1 to the WP7 Marketplace yesterday. Just as many other WP7 developers, I am excited about Mango, and with 3.1 out the door (and will hopefully pass the Marketplace digestion process just fine), I was eager to see how SurfCube behaves on the new Mango Beta 2 SDK and on my phone. I have updated my LG Optimus 7 to Mango, and I just love the new OS! It is even more fluid, responsive and delightful than the original WP7 was. However, this post series is not about Mango – it is about my experiences moving an existing and fairly complex app to Mango.

Step 0 – running SurfCube 3.1 on Mango

So, after installing Mango Beta on the phone, the first thing to try was see how SurfCube ran on it without any changes whatsoever. Here is the good part: scrolling is butter smooth, even the long history list is perfectly responsive. The web browser scrolling was sometimes a bit jerky on Nodo, but it is perfect on Mango. The cube’s rotation is faster, too, although it was pretty good on Nodo already. And the new IE9 engine is noticeably faster. Not just “well, it feels snappier, but it may just be my imagination” faster. More like “wow, that IS fast!” All in all, a huge gain in general performance, smoothness and user experience.

Of course, multitasking and fast app switching didn’t work. You have to recompile and modify your app a little bit for that. I also had some crashes, especially around viewing videos (more on this later). But the biggest issue is that our context menu didn’t work. Some of SurfCube’s most advanced features are behind the context menu: opening links in new or background tabs, saving images from the web, sharing a page via Twitter or Email, etc. And it doesn’t work at all. It seems like the Javascript “oncontextmenu” event does not work on Mango, not even in Internet Explorer (we are using the WebBrowser control, which relies on IE9 rendering and running scripts). If things don’t get better, this could end in SurfCube losing some of its most useful features in Mango I have been in touch with Microsoft about this issue, so I am hoping this will be resolved in time.

Step 1 – Compiling SurfCube for Mango

So, to get the multitasking and other new features working, the first step is to recompile your application for Mango. In theory, this should be as easy as flicking this switch to 7.1 in the project’s properties:

Then I was greeted with this rather scary dialog:

OK, I am on a different TFS branch anyway, so let’s go for it!

But it doesn’t build, I get some ambiguous reference errors for GestureEventArgs – no wonder, it was used from the Silverlight Toolkit for Windows Phone 7, and now it is built into the SDK. So I open up the relevant source files, and fix it with some ReSharper magic:

I am going to go with the Toolkit gesture for now, so I select the second option, and Resharper inserts the code:

using GestureEventArgs = Microsoft.Phone.Controls.GestureEventArgs;

to the top, and all is right.

After trying to compile again, I get a warning:

'My3DBrowser.Controls.WatermarkedTextBox.WatermarkProperty' hides inherited member 'System.Windows.Controls.TextBox.WatermarkProperty’

All right, TextBox now has a Watermark property, we can throw out our own WatermarkedTextBox control. Nice, but I will ignore it for now. But I also got an error:

error CS1705: Assembly 'Microsoft.Expression.Interactions, Version=3.8.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' uses 'System.Windows.Interactivity, Version=3.8.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Windows.Interactivity, Version=3.7.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'

Well, it looks like some other assemblies have been updated too, like System.Windows.Interactivity. So, let’s replace it:

Remove it, and add the right version:

By the way, if the above Add Reference dialog is from the Visual Studio Productivity Power Tools, which is pretty much a must have tool!

So, now we can compile, right? Well, yes, it compiles!

========== Build: 5 succeeded or up-to-date, 0 failed, 0 skipped ==========

So, let’s try to run it! It starts, but crashes before the first screen is loaded:

MarketPlaceSearch Action is the same code I shared earlier. What is important right now is that is uses the WP7 RTM, 3.7.5.0 version of the System.Windows.Interactivity dll, and needs to be updated to Mango. The exception is not very helpful – it is not really a type not found, but a type loading error in this case. This class is in a different project, which has to be updated to WP 7.1 as well. After doing that and replacing the reference for the WP7MarketplaceTools project (where the referenced MarketPlaceSearchAction is), we can try compiling and running again:

Next problem: WrappedException. This is really a mystery to me. After loading the app, the it comes from the UpdateLayout of a WebBrowser Control (which I had to call manually in WP7). Luckily just removing the call seems to work for now, but this definitely is a breaking change (or bug).

And finally, the app starts!

Or so it seems – because we have another one of the WrappedException error, again. It happens when our AdControl switches visual states at startup:

     System.Windows.dll!MS.Internal.XcpImports.CheckHResult(uint hr) + 0x1e bytes   
     System.Windows.dll!MS.Internal.XcpImports.UIElement_UpdateLayout(System.Windows.UIElement element) + 0x10 bytes   
     System.Windows.dll!System.Windows.UIElement.UpdateLayout() + 0x6 bytes   
     Microsoft.Expression.Interactions.dll!Microsoft.Expression.Interactivity.Core.ExtendedVisualStateManager.GoToStateCore(System.Windows.Controls.Control control, System.Windows.FrameworkElement templateRoot, string stateName, System.Windows.VisualStateGroup group, System.Windows.VisualState state, bool useTransitions) + 0x101 bytes   
     System.Windows.dll!System.Windows.VisualStateManager.GoToState(System.Windows.Controls.Control control, string stateName, bool useTransitions) + 0x52 bytes   

Well, all right – I will deal with this issue later, and turn off the ads for now. Just let me see the app running!

And it works!

Awesome! Let’s play around a little bit, and test YouTube playback – it crashes. Oh maaaaan. Here is the exception:

Not too helpful, is it? No usable call stack, no source code, and “Unspecified error” is not the most useful exception either. So, let’s put on the Sherlock hat and start to play detective.

After clicking on the video, the app is supposed to bring up the video player UI. If I disable the code that makes the player visible, the app doesn’t crash. So, the problem must be somewhere in the video player UI! Here is what it looks like in Blend:

Oops, not too nice… luckily in Blend, when we edit the code, the designer surface immediately updates. I removed everything in the main Grid to make sure the problem was indeed in it, and the designer was fixed:

So, I started to add and remove lines and chunks of code, until I managed to pinpoint the problem: the two Coding For Fun RoundButtons we are using for the “play/pause” and the “fill screen” functions. I removed those, and the app worked, video played. However, I didn’t want to leave it at that, and found out that there actually is a new Coding For Fun Toolkit released along with the Mango Beta 2 SDK. So, I have replaced the toolkit, and behold – we now have a working SurfCube video player! And the new emulator can playback H.264 videos, so I can show you what it looks like:

Summary

Getting an existing project to run on Mango is certainly not a trivial task with the Beta SDK. Apart from fixing library references, the biggest problem seems to be with the WrappedExceptions and other unspecified errors. These seem to be beta bugs for me, and mostly happen during the layout / measure cycle. But is is nothing a little detective work cannot fix.

Other than that, Mango is really pleasant from a developer point of view. The apps run much smoother, consume less memory. My biggest problem with lists (which is considered to be the Kryptonite of WP7 apps) is resolved, and 3rd party apps can now feel just as responsive and smooth as their native friends. Just check out the official Twitter app on Mango to see the difference. (my friend, René Schulte recorded a comparison video, too).

Next up in the blog post series: multitasking, fast app switching, then the real fun begins as I start to add Mango features to SurfCube. What Mango features should SurfCube take advantage of? Let me know in the comments!