Saturday, April 5, 2008

Introduction to Silverlight Development Environment

Hi All,
Its been a long time since i last posted, i apologise for that, if you are a regular visitor that is. So here is the first one for all you silverlight developers. I have seen many of the new Visual Studio 08 developers wondering around the silverlight technology and all the tools associated with it and how they are important and useful for a Visual Studio 08 developer. So here it is...

In simple words, Silverlight is a plug-in. Many people who have not begun development on Silverlight, confuse it to be a tool of some sort with a UI. I have observed that this notion usually comes from Flash developers/designers. In the case of Flash, the tool used to build applications is called Adobe Flash and the plug-in required to run Flash applications is called the Flash Player.

On the Microsoft end, Silverlight is the name of the plug-in - which contains all the runtime elements required to render the UI of your applications and execute the code of your applications. The Silverlight runtime is installed one-time on your computer. You could install this be going to www.microsoft.com/silverlight or by visiting any page that uses Silverlight and clicking on the "Get Microsoft Silverlight" icon when prompted.

Installing Silverlight has enabled your browsers to view Silverlight content. For development of Silverlight content, you require a set of tools.

These can be categorized as designer and developer tools.The designer tools you'll require is primarily Microsoft Expression Blend. Expression Blend helps you create Silverlight projects and WPF projects. WPF stands for Windows Presentation Foundation, which is part of .NET Framework and is a superset that is used to create rich desktop applications. Silverlight projects created in Expression Blend follow the same project structure that developers working with Microsoft Visual Studio are familiar with.

Expression Blend is primarily used by designers to:

Create the front-end design for your application: This is created using vector elements from the toolbox such as Rectangle, Ellipse, Line, Path, MediaElement, Canvas, etc. and using the properties pane to set various properties such as Fill color, Fill type (Solid, Linear Gradient, Radial Gradient, etc.), Stroke color, Width, Height, etc. Each element has several properties that can be applied to it and most of these can be set from the property pane directly.
Organize elements: Elements added to the application can be named to help in identifying them later on. Multiple elements can also be grouped. Grouping automatically creates a Canvas element (with the width and height of the boundary of elements) and groups the elements as child elements of the newly created Canvas element. (Remember: Canvas is the only container element in Silverlight 1.0). You can also use Expression Blend to change the z-order of the elements. This basically means which element resides on top of which other element - something that is done automatically based on the order of the elements - and can be changed by either changing the order itself or by changing the Canvas.ZIndex property. Animation: Animations are created using Storyboards. It is helpful to switch to the Animation workspace (from the Window menu) to help in creating Storyboards. Once a Storyboard is created, timelines are recorded using the Timeline Recording feature. Microsoft Expression Blend is currently available in two versions - Expression Blend v1 was released in May 2007 and only supports WPF development. For Silverlight development, you will need Expression Blend v2 which is currently under development and preview releases are available from www.microsoft.com/expression. Look for the latest preview release and be sure to download Blend 2!

All design created in Expression Blend is automatically translated (as you add elements) to XAML. XAML is an XML-markup to describe the UI. The Silverlight plug-in parses the XAML when a Silverlight project to render the UI in the browser. Anything you do in Expression Blend creates the XAML in the background. You can also switch to the XAML view in Expression Blend to view the markup. This is akin to creating HTML pages using a tool when the tool is generating HTML markup in the background. XAML is a common UI description language across WPF and Silverlight, though the number of XAML elements you can use in WPF is much larger than Silverlight 1.0. Expression Blend automatically changes the available toolbox elements based on whether you are creating a WPF project or a Silverlight project.

Microsoft Expression Design is the other tool you can use in the Silverlight development environment. Expression Design is used for much finer elements of design, with support for layers, various brushes, effects, path transformation tools, etc. It is a vector design tool that can help you create design assets for use in Silverlight. Say that really cool looking button with extra-fine detail. Since many of the tools and shapes you use in Expression Design do not have a straight-forward mapping to XAML (which is what Silverlight can understand), you export your design to XAML once it is ready. The export process looks at the design, rasterizes (converts to images) stuff that is incompatible with XAML, converts vector shapes to paths or other supported elements and provides XAML that is compatible. Such XAML can then be included into Expression Blend to add further animation or interactivity.

Microsoft Visual Studio is what developers use to add event-handling code that can then call back web services or can trigger other actions based on user-input. Every element has event handlers for mouse, keyboard or ink input and these are handled in code - JavaScript is used as the programming language for Silverlight 1.0.

As a developer, you can use notepad for authoring both the XAML and the JavaScript and for embedding the Silverlight object on to the HTML page. However, Blend and Visual Studio provide a much richer development experience and most of the code for embedding the object is automatically generated.

To get Visual Studio to understand the XAML semantics, it is worthwhile to install the Silverlight SDK available on www.silverlight.net. The Silverlight SDK also comes with some sample code and quickstart examples, as well as the all-important documentation. The documentation contains a full reference for all objects, methods, properties and events and also several basic articles to get you started with the concepts.

So in summary, Silverlight is the plug-in that you or your end-users require to install to enable your browser to render Silverlight content. Expression Blend and Expression Design are part of the Microsoft Expression Studio which enable designers to design Silverlight projects. Visual Studio is the developer tool for developers to write the required code for the applications. Silverlight SDK gets you started with required files, project templates, documentation and samples.

Really simple, right? Happy coding!

Source : Pandurang Nayak's Blog