Web Application Development with Microsoft Technologies

Last Friday Iang and me attended to an online Microsoft Update for Developers about Silverlight (If you don’t have a clue about Silverlight and want to have an idea quickly, read my post about Silverlight in the “Tech Snacks” section.

I never had a chance to see how Visual Studio and Expression can play together to build a Rich User Interface using XAML and Silverlight. I finally saw in action all the theory behind the slides presented by Microsoft in all latest communications.

Presenter was Rob Camer, a Microsoft Evangelist for the Communications and Media sector, from Chicago region. He went through a walkthrough for creating a very Simple Media Player from scracth. A similar walkthrough is available for downloading at Silverlight Quickstarts.

He started creating a new Project in Expression Blend 2 August Preview. Available Project types are Silverlight JavaScript, Silverlight .NET and Silverlight .NET Orcas.

He used the JavaScript Type for Orcas, and he started to design the User Interface using (A professional tool for helping you to build the Xaml file). Even it is oriented for web designers (because you can use layers and motion like flash, nice visual effects, and so on), Expression has a very user friendly layout and you can easily locate controls/functionalities and add a special touch to your user interface having your customer happier.

After adding the buttons, applying some colorfull gradient (this gives the controls a very neat look&feel), he played with layers to create a visual effect when pressing the buttons. He also used a Media Element from the Expression Asset Library to host the video:

At the end, this is how the xaml file would look like in the Expression Designer:

So, when you have the layout ready, you can save the Project and open it from Visual Studio. Have in mind that Visual Studio 2005 doesn’t support Xaml format in Designer View, but VS 2008 does.

You then need to add the code for the media player to work. You do it by using the “events” you find in the toolbox and writing the JavaScript functions to handle those events. You can have complete control over the xaml defined controls and events. You can also locate the controls using the document.GetElementByID or findMethod from Silverlight. Additionaly, you have JS Intellisense to minimize coding errors.

So when coding is done, you need to reference the Xaml from the Default page and that’s it, you have a nice Media Player in the browser being rendered through Silverlight, and it looks like this:

In part 2, I will cover the C# version of the code, wich will be much useful for you if, like me, don’t feel so comfortable coding in JavaScript as in C#