Debugging Silverlight 1.1 Alpha Refresh in Visual Studio

I have gotten back into some Silverlight code and have been playing with the new version of Visual Studio 2008 and the Silverlight 1.1 alpha refresh. Since picking it back up I have run into some interesting speed bumps that were not there my first time around.

The 1.1 alpha refresh introduced a stricter Silverlight security model which completely disables access to any asset on the local file system. This means if your app utilizes external resources, you have to debug it via a web project of some sort. I was already using an IIS project for deployment so switching over wasn’t a big deal for me, but I had to go through some rigmarole to get it set up initially. For ASP web developers, it is probably all old hat, but for someone with no prior experience, it is an annoyance to have to set it up just so you can debug a Silverlight application. Plus you have to be running certain versions of Windows. Overall not a very friendly way to get your feet wet with Silverlight.

So what is the answer? Well there is an internal web server built into Visual Studio called Cassini. Using it and VS you can quickly create a web project that you can then link to your Silverlight application and test locally.

The process goes like this: right click on your solution that houses your Silverlight application and select Add -> New Website. In the dialog box that appears, select ASP.NET web site as the template, make sure the Location combobox is set to “File System”, and enter the path you would like the site created in. Once the project for the site is created, right click on it and select Add Silverlight Link. A dialog should appear that lists your Silverlight projects within the same solution. Click on the one you want linked in. If it asks you if you want to enable Silverlight debugging, say YES! You should now see the files for your application that are set with a build action copied into your web application. All that remains is to right click on your start page and select Set As Start Page. You should now be able to launch your Silverlight application locally and do anything you need to for testing.

If for some reason you find that the debugger isn’t loading your symbols for your application, or inexplicably skips over your break points, check that the debugging properties are correctly configured. Right click on the web project and select Property Pages. In the dialog box, select Start Options on the left side. At the bottom you will see the debuggers that are enabled for your project. If Silverlight is already checked and you still can’t debug it properly, try enabling Native Code as well. I have run into several instances where I have had to do this to get the debugger working.

-Casey

Reflections of Style

I’ve been playing around with the new Reflex Utility from Alon Kandov. It is a very useful little application that allows Flex authors to easily examine and modify the properties of any visual component at runtime. You can experiment with styles and designs similar to the Flex Style Explorer while your application is running. It has obvious general utility, but especially so for those that cannot or will not use the Flex Builder design editor.

There are several different ways to get it into your app, including direct compilation. However I prefer the modularized version that was just added. You can load it via a ModuleLoader when it is appropriate and don’t have to worry about changing your code around when it isn’t.

There was only one gotcha that I experienced integrating it. I use Ant to compile my Flex 2 applications and in order for Reflex to be able to show style information, the compiler must be told to preserve the related metadata, which by default it does not. The command line syntax to do this is listed on the Reflex code site, but the Ant syntax is a little more enigmatic. So after a little bit of digging and some trial and error, I finally pinned it down. Here you go:

<!– compile application –>
<mxmlc file=”${mySourcePath}/MyApplication.mxml”
output=”${myBuildPath}/MyApplication.swf”
default-background-color=”#FFFFFF”
actionscript-file-encoding=”UTF-8″>

<load-config filename=”${FLEX_CONFIG}”/>
<source-path path-element=”${FLEX_FRAMEWORKS}”/>

<keep-as3-metadata name=”Bindable”/>
<keep-as3-metadata name=”Managed”/>
<keep-as3-metadata name=”ChangeEvent”/>
<keep-as3-metadata name=”NonCommittingChangeEvent”/>
<keep-as3-metadata name=”Transient”/>
<keep-as3-metadata name=”Style”/>
</mxmlc>

I hope that helps get Reflex going for you because it is a big chunk of cool.

-Casey