Today there is a lot of buzz around a relatively new platform in the world of Rich Internet Application (RIA) development called Silverlight. Even with all of the buzz going around there are many who do not really know or understand what Silverlight is or what it can do. This DZone Refcard will put that mystery to rest along with providing an introduction to Blend, an application that is used to develop Silverlight applications. Also included is an introduction to some of the cool new features offered by the newest version of Silverlight 4, and a step by step guide through the development of your first Silverlight application.
Silverlight is a cross browser, cross platform plug-in for your browser that installs in seconds. It also allows for developers to designers to develop Rich Internet Applications (RIA) and deliver them through the web and now even Out of Browser (OOB) experiences.
The Silverlight plug-in installs in seconds and is free to users.
Silverlight applications leverage the .NET Framework which allow for rapid development and provide backend support. Silverlight offers support for delivery of high quality audio and video. Since the release of Silverlight 3 Silverlight offers rich, stutter-free, fullscreen experiences. Below is a list of video features offered with Silverlight:
Silverlight allows for rapid RIA development by making use of the improved designer/developer workflow. Because Silverlight UserControls make use of a front-end XML based language called XAML (pronounced ZAMEL) and a codebehind C# (Visual Basic can also be used) the developers can now work on the back end code-behind files while the designers can, at the same time work on the front-end XAML pages. This allows for the designer and developers to work on the same set of files at the same time thus making for more rapid application development.
Silverlight offers Out Of Browser (OOB) experiences. OOB support is offered since Silverlight 3 without any further downloads of the Silverlight runtime or the need to write applications any differently. There are new features in Silverlight 4 that make OOB development even more exciting. We will talk more about that in the new features of Silverlight 4 section.
Silverlight has improved performance by doing this such as application library caching. Now parts of the .NET Framework are cached on the client machine thus reducing the size of your applications. Further applications now communicate with the server via Binary XML thus increasing the speed by which data is exchanged.
Silverlight now has enhanced data support. This allows for features such as Element to Element DataBinding. In the past Silverlight only allowed Binding between UI elements and data objects. Now UI elements can bind directly to properties on other UI elements. For instance a Slider can now bind to properties of other UI elements such as the Volume property of a MediaElement, this allows for more interactive, user-friendly interactions.
At the Professional Developers Conference (PDC) 2009 in Los Angeles, CA Microsoft released Silverlight 4 Beta. Currently Silverlight 4 is still in the Beta phase with the release date expected to be in late March of 2010 and possibly to coincide with the Microsoft MIX conference in Las Vegas March 15-17. The Silverlight 4 Beta version can be download and installed from the Silverlight.net website located here:
There are still some features that have not been released but below you will find a list of the new features that have been released in the Beta version:
Below is a list of Silverlight 4 features that apply to Out Of Browser (OOB) applications:
Below is a list of Silverlight 4 features that apply to Out Of Browser (OOB) Trusted applications:
Now that you know what Silverlight is let's move ahead and examine the main tool by which you develop Silverlight applications.
There are two programs developed by Microsoft for developing Silverlight applications. They are Blend and Visual Studio. Visual Studio has been around for many years now and is the main tool for writing Silverlight code-behind. Because it is not new and not specific to Silverlight we will only mention it here. Blend, on the other hand is a tool that was developed by Microsoft specifically for developing Silverlight (and Silverlight's big brother WPF) applications. While Visual Studio is most often used to write Silverlight code-behind Blend can handle to task as well. So, that means an entire application can be developed with Blend alone.
Blend 3, released in July 2009 is an application developed by Microsoft (using WPF) specifically for developing Silverlight applications in a visual manner. Objects can be dragged from the toolbar on the artboard (analogous to a State in Flash). Properties for objects on the artboard can be set in the properties panel.
Further you can create Storyboard animations in Blend using Blend's Timeline in Blend's animation mode (as opposed to Blend's Design mode). Once you have created a Storyboard animation you can then preview that animation right inside of Blend. This allows you to perfect your animations before you even build and deploy your Silverlight applications. When you create a Storyboard you move a playhead out to a specific time on your Timeline, say for example 5 seconds. You then manipulate objects on your artboard. When you run the animations the manipulations you created on the artboard will occur over the timespan you set with your played, 5 seconds in our example. These Storyboards that you create are written in XAML by Blend. They then become resources that you can fire in code-behind or by Storyboard Behaviors (pre-defined Storyboard actions written in Code and dragged onto objects in Blend).
You can also use the Visual State Manager (VSM) to create Visual States in Blend using the States panel. These Visual States make use of Storyboards to control the Visual States. You then hook up these States to user actions by dragging Behaviors (pre-defined actions written in code-behind)onto objects on the Artboard or Blend's Objects and Timeline panel (a panel that provides a textual representation of objects in your Visual Tree). You can also fire these Visual States from code-behind in both Blend and Visual Studio.
When you develop visually in Blend code is written for you in the XAML file of the UserControl. This XAML can be written by hand in both Blend and Visual Studio but this can be both time consuming and laborious. Further, it would be nearly impossible to create some objects by hand such as a very complex Path object. For this type of development Blend is essential.
Most often the designer works in Blend doing things visually while the developer works in Visual Studio doing things in code-behind. This workflow is fuzzy and can overlap with some designers jumping into Visual Studio at times and some developers using Blend at times.
The tools in Blend are much like those that designers are used to from working with popular design programs such as Adobe's Photoshop, Illustrator and Fireworks. A designer can create vector graphics right inside of Blend or use tools like Expression Design to create the graphics and move them into Blend. Further, Photoshop and Illustrator files can be directly imported into Blend via the importer interface.
Blend now includes a Data panel where data can be imported from Silverlight data objects created in Visual Studio, from XML or from Sample Data that is shipped with Blend. Blend also includes an interface for doing complex DataBinding.
While coding is usually done in Visual Studio Blend does have an editor for code. The editor now even includes Intellisense which attempts to figure out what you are trying to do in code and then tries to auto-complete the code for you. Intellisense is also available for coding XAML in Blend as well.
Blend also has panels for: all of the files in the application, called the Projects panel; all of the Resources available to the application, called the Projects panel; We will go over all of the panels in Blend in the Blend IDE Refcard.
Now that you know what Silverlight is and what Blend is I think it is time that we create your first Silverlight application and I show you what we can do. In this example I am going to go over only what to do, not why or how we are doing it. We will go over the why's and how's in later Refcardz; this example is merely meant to show you that you can easily and quickly do some very cool things with Blend in Silverlight. With that, open Blend and let's get started.
Figure 1-1: Create a new Silverlight project named MyFristSLApp.
Figure 1-2: The TextBlock tool.
Figure 1-3: A default TextBlock.
Figure 1-4: Change the front to 20.
Figure 1-5: Drag your TextBlock to the center of the artboard.
Figure 1-6: Convert the TextBlock to a Path.
Figure 1-7: Release the Compound Path.
Now you will notice that each of your letters is now its very own Path. Now we can manipulate each individual letter of “Hello World”. Let's do that now.
Figure 1-8: Select all letters.
Figure 1-9: Move the letters off to the right of the artboard.
Now we can make a Storyboard that will make the letters fly into the screen.
Figure 1-10: Click the New Storyboard button.
Figure 1-11: Name the new Storyboard SlideInLetters.
Figure 1-12: Move your playhead out to one second.
Figure 1-13: Move the last letter “d” to the artboard.
Figure 1-14: With the playhead at 2 seconds move in your second to last letter.
When you have completed your Timeline should look like what I have in Figure 1-15.
Figure 1-15: Your Storyboard Timeline should look like this.
Now that we have created the Storyboard you can close it by clicking the Close Storyboard button like I am doing in Figure 1-16. Then Click F6 to exit the animation mode.
Figure 1-16: Close the Storyboard.
Now all we need to do it to trigger the Storyboards to start when the application loads. To do this we are going to use a Behavior.
Figure 1-17: Find the ControlStoryboardAction Behavior.
Figure 1-18: Drag the Behavior onto the [UserControl] in the Objects and Timeline panel.
Figure 1-19: Change the EventName to Loaded.
Figure 1-20: Change the Storyboard property to the Storyboard we created earlier.
Now hit F4 to run the application and you will see a browser open and run our SlideInLetters Storyboard. See Figure 1-21.
Figure 1-21: Our Silverlight application running in a browser.
You can see my application here:
This DZone Refcard provided a brief introduction to SIlverlight 4 and how Blend is used to develop Silverlight applications. You should now have the building blocks you need to grow as a Silverlight developer. For further information on Microsoft Silverlight and Expression Blend please visit the following sites: Silverlight.net, Learn Expression Blend, Download Silverlight and Download Expression Blend.