Contents of this article:
- Contents
- Overview
- What is Silverlight
- Definition
- Platform Support
- Rich Interactive Application
- RIA Stats
- Why Silverlight
- Silverlight vs. Flash
- Silverlight vs. WPF
- Rich vs. Reach
- Showcase
- Deep Zoom
- Deep Inside
- Silverlight and XAML
- Deployment Process
- Silverlight Architecture
- Silverlight 5
- Tooling
- Microsoft Visual Studio 2010
- Microsoft Expression Studio 4
- What's Next
- Demo
- Summary
Overview
In this article we'll have a brief introduction to Microsoft Silverlight, see
how it fits with other technologies today, and watch it in action. Get ready!
What is Silverlight
Definition
Silverlight is a Microsoft technology aimed to help developers create rich
interactive Web applications with the best user interface features and
functionalities. It's available as a plugin for almost all famous browsers
available today, and it's used to deliver the next generation media and Web
applications.
Figure 1 - Silverlight Logo
When we say rich applications we don't mean those with amazing interfaces and
lots of graphics. Indeed, we mean by "rich" those have lots of functionalities
not available for standard Web applications. Common examples of rich
applications are online document editors and image processors; both are very
interactive and offer lots of functionalities that are usually not available for
standard Web applications. And that actually what Silverlight is devoted for,
its main goal is to allow for developing rich interactive applications for the
Web.
Platform Support
Unlike many other Microsoft technologies, Silverlight applications can run
everywhere. It's said to be cross-platform, cross-browser, and cross-device. It
can run on Windows, Linux, and even Mac, it can run on Internet Explorer,
Mozilla Firefox, Google Chrome, and many others, and it also can run on PCs,
mobile devices, and handhelds. Really it can run everywhere without any code
changes!
One more interesting thing is that Silverlight Web applications can be hosted on
any server. You can host your Silverlight application on a Windows, Linux, or
Mac server without any additional code changes or configuration.
Rich Interactive Applications
We have been talking about rich interactive applications for a while; now let's
see what a rich interactive application really means.
A Rich Interactive/Internet Application (RIA) is a Web application that's very
interactive with the user and has lots of functionalities. It's very similar to
desktop applications comparing interactivity and features; however, it's a Web
application that runs on the browser not the desktop. So we can say that RIA
applications have the best functionalities and user interface features of
desktop applications and Web applications.
Figure 2 - RIA
Today, there're lots of technologies available for creating RIA applications.
The most famous platforms are Adobe Flash, Microsoft Silverlight, and Sun Java.
Worth mentioning that every platform of the above mentioned (that includes
Silverlight of course) is available through a plugin for the browser, and
therefore its runtime must be installed on user's machine in order to be able to
run the application.
RIA Stats
Now someone asks: Who wins the race? What's the best RIA platform that one can
spend his time and effort to learn?
First of all, let's have a look at the following diagrams that represent
penetration rates of Adobe Flash, Microsoft Silverlight, and Sun Java. The first
diagram we have comes from http://riastats.com
and it shows that Adobe Flash is installed on almost 96% of internet-connected
machines. Microsoft Silverlight comes in the second place with about 74% of
total internet-connected machines. And Sun Java comes third with about 73% of
internet-connected machines.
Figure 3 - RIA Stats
StatOWL shows a bit different data with more details:
Figure 4 - Stats from StatOWL
Looking at the above diagrams we can see that Microsoft Silverlight did a great
job in a very short time (first release was on 2007.) However, we can't depend
much on this data since, as you know, Microsoft Silverlight is installed
automatically on Windows machines via Windows Update.
Now, let's have a look at Microsoft Silverlight features and see what makes it
the best RIA platform yet.
Why Silverlight
Other than being delivered by Microsoft, some features of Silverlight are:
- It's FREE.
- It runs on all popular browsers,
platforms, and devices.
- It can be run in browser and as a desktop
application.
- Easy to create excellent UIs that looks
"WOW".
- Enables business application development.
- Supports 2D/3D animations/graphics.
- Natively supports CLR and .NET Framework.
- Can be automated using JavaScript.
- Supports a variety of media (audio/video)
formats with streaming capabilities.
- Supports a variety of rich controls
including the DataGrid.
- Supports a variety of enterprise
technologies including WCF.
In addition, Silverlight is considered to be
the main development framework for Windows Phone.
Figure 5 - Windows Phone
Silverlight vs. Flash
Silverlight and Flash are very similar, so which is better, Silverlight or
Flash? Since I'm a Microsoft developer and since you are reading now in a .NET
blog, and although I haven't ever developed for Flash, I can say that
Silverlight is the best RIA platform ever!!! However, we need to be more
serious.
InfoWorld did a review and compared between Silverlight and Flash, and the
results were so great, Silverlight passed Flash and scored 8.3 points, while
Flash got 7.8 points only.
Figure 6 - Silverlight vs. Flash, InfoWorld
Silverlight vs. WPF
Windows Presentation Foundation (WPF) is a graphical subsystem utilizing DirectX
for rendering UI in Windows-based application, developed by Microsoft and
introduced as part of Microsoft .NET Framework 3.0 and Windows Vista. WPF is
considered to be the replacement for WinForms (that considered now
Feature-Complete,) while WinForms relies on the older GDI subsystem, WPF relies
on DirectX.
On the other hand, Silverlight is actually a subset of WPF, and formerly
Silverlight was codenamed WPF/E (WPF/Everywhere) because it's considered to be
the cross-platform version of WPF. And while WPF focuses on desktop development,
Silverlight focuses on Web development.
Figure 7 - Silverlight vs. WPF
Rich vs. Reach
The following diagram compares some of the available Web development
technologies in terms of richness (i.e. UI functionalities) and reach (platform
and browser support.)
Figure 8 - Rich vs. Reach
From the above diagram we can see that WPF has the best UI features today.
However, it's devoted primarily for desktop development, and it can run only on
Windows platforms.
On the other hand, ASP.NET can run everywhere, but unfortunately it doesn't
support the UI functionalities required for today's Web.
And finally, Silverlight has the best of UI functionalities, and it also
supports a wide range of platforms and browsers (its platform/browser support is
expanded each release.)
Showcase
To get a solid understanding of what Silverlight can do, check out some of the
Silverlight applications from around the world:
And one of the most impressive applications is
SilveOs (http://silveos.com/); a
mini-operating system for the Web.
And thousands of Silverlight applications are available here too:
http://www.silverlight.net/showcase.
Deep Zoom
And another great feature of Silverlight is the DeepZoom technology that was
introduced by Microsoft as part of Silverlight. DeepZoom allows you to view very
large high resolution images. It reduces the time of initial load by downloading
only the region being viewed at the resolution it's displayed at. Subsequent
regions are downloaded as the user pans to (or zooms into) them.
Figure 9 - Deep Zoom, Microsoft Silverlight
Deep Inside
Silverlight and XAML
Like WPF, user interface in Silverlight is declared in a specific language
called Extensible Markup Language (or XAML, pronounced 'Zammel'.) XAML is an
XML-based language created by Microsoft which is used to initialize structured
values and objects. XAML elements are mapped directly to CLR objects (e.g. a
<Button> element maps to a Button object.)
Figure 10 - XAML Logo
Former ASP.NET developers are somewhat familiar with the nature of XAML. You
have a WYSIWYG XAML designer that you use to design the interface of your
application. The code for this interface is available through a code-behind
file, where you can write in your preferred .NET language.
The concept of two files for the same page (e.g. a XAML file for the interface
and a CS file for the C# code) separates two main roles in application
development, design and development. The designer can work in the XAML file, and
the developer can work in the code file, and both files are linked together.
This also leads to a loosely-coupled design that separates user interface code
from the business logic.
Figure 11 - Designer vs. Developer
Deployment Process
What steps you would follow to deploy your Silverlight application to your
users? That's what this section is devoted for.
When you build your Silverlight application, the XAML markup, as well as the
code and all other resources, is compiled into .NET assemblies which are then
compressed using ZIP and stored in a XAP (.xap) file.
Figure 12 - XAP Files
The XAP file can then be hosted in a Web server and referenced by Web pages
declaring the Silverlight plugin object. And when the user navigates to the
page, the XAP file is downloaded to his PC and executed on the Web page by the
Silverlight runtime.
Figure 13 - Silverlight Application Deployment Process
So all you need is just to develop your application, get the XAP file, insert
the plugin into a Web page, and then publish the page and the XAP file to the
Web.
Silverlight Architecture
The following illustration shows the essential architecture and components of
Microsoft Silverlight. It shows how the presentation (interface) core components
fit together with other .NET and Silverlight components, and what services does
the provider offer.
Figure 14 - Silverlight Architecture
Silverlight 5
The current stable version of Silverlight is Silverlight 4. Back to PDC 2010 the
5th version of Silverlight was introduced, it's still in Beta but it's supposed
to be released soon.
Figure 15 - Silverlight 5 Logo
Here's a brief overview of the forthcoming Silverlight 5 features:
- Media:
-
Hardware Video Decode
- Better Power Management
- Remote Control Support
- Text and Printing:
-
Better Text Rendering
- Full OpenType Support
- Graphics:
-
GPU Accelerated Graphics
- 3D Graphics Support
- XAML:
- Application Development:
-
Windows Azure Support
- P/Invoke
- Testing and Performance:
-
Automated UI Testing
- Faster Startup
- o Hardware Acceleration
- 64-bit Support
More about Silverlight 5 can be found here:
http://www.microsoft.com/silverlight/future.
Tooling
The most common tools for Silverlight are Microsoft Visual Studio 2010 and
Microsoft Expression Studio 4.
Microsoft Visual Studio 2010
Best for developers, good for designers. Check it out here:
http://www.microsoft.com/visualstudio/en-us.
Figure 16 - Microsoft Visual Studio 2010
Microsoft Expression Studio 4
Consists of a 5 tools:
- Microsoft Expression Blend
Visual user interface builder for Silverlight and WPF.
- Microsoft Expression Web
WYSIWYG website designer and editor.
- Microsoft Expression Design
Raster and vector graphics editor.
- Microsoft Expression Media
Digital asset and media manager.
- Microsoft Expression Encoder
Profession media (video/audio) encoder
Figure 17 - Microsoft Expression Studio 4
What's Next
To start with Silverlight, you have to install the following components:
Demo
In the following example, we'll create the Hello World application in
Silverlight. Follow those steps:
First, ensure that Silverlight SDK is installed on your PC, and launch Visual
Studio 2010 and select New Project.
Figure 18 - Creating a New Silverlight Application
From the New Project dialog, select your desired language from the left and
select Silverlight as project type. From the middle pane, select Silverlight
Application to start.
Now another dialog appears asks you to specify whether to create another Web
application to host the Silverlight application or not. As you know, Silverlight
applications run inside a plugin defined in a Web page, and that dialog asks if
to create a new Web Application project for you to host the Silverlight
application or to create just a simple HTML page to host it. Leave the dialog
with no changes and ensure that you have selected Silverlight 4 from the
Silverlight Version combo box and click OK to proceed.
Figure 19 - New Silverlight Application Settings
Now let's have a look at what Visual Studio has created for us. Looking at the
Solution Explorer we can see that Visual Studio has created two projects, one is
the Silverlight project, and the other is a Web project that's going to host
this Silverlight application.
Figure 20 - Silverlight Project in Solution Explorer
Looking at the Web project we can see that VS has included two test pages in
that project, the first is an ASPX page and the second is a simple HTML page,
both define the Silverlight plugin and both are ready to show you your
Silverlight application when you browse to them. The difference is that ASPX
pages can define ASP.NET elements and code, while the simple static HTML cannot.
Back to the Silverlight application, we can see that it define 4 files:
- App.xaml:
Define application-wide interface elements.
- App.xaml.cs (C# code file, linked to
App.xaml):
Define the startup logic and any other application-wide code.
- MainPage.xaml:
The main application page; contains the interface elements.
- MainPage.xaml.cs (C# code file, linked
to MainPage.cs):
The business logic and code for the main application page.
Then we have two pages, the first is App.xaml
that defines the application-wide elements and code (inside App.xaml.cs,) and
the second is MainPage.xaml that defines the main page of your application where
you can define your interface elements and code them (inside MainPage.xaml.cs.)
Now let's design our interface. Go to MainPage.xaml and inside the <Grid>
element define a Button (you can also drag the button from the Toolbox to the
designer to define it):
<
Button
Width
=
"100"
Height
=
"25"
Content
=
"Say
Hello"
Click
=
"Button_Click"
/>
Figure 21 - Button in the Page
From the previous line of code we can see that we have defined a Button control
using a <Button> element, and we have also set the control's characteristics and
properties using the element attributes. And to have our button respond to user
clicks, we have wired up the Click event into the function Button_Click() that
we're going to define it in the code file.
Now go to MainPage.xaml.cs and define the Click event handler for the button:
private
void
Button_Click(
object
sender, RoutedEventArgs e)
{
MessageBox.Show(
"Hello
,
World!"
);
}
Figure 22 - The Code-Behind File
Now run the application and try it.
Figure 23 - Running Silverlight Application
Before we leave this section, let's have a look over the plugin required for
Silverlight. Go to and of the test pages on the Web project and step down until
you reach the <object> element that defines the plugin. Simply, the Silverlight
application requires only the following HTML code to define its plugin:
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightApplication1.xap"/>
</object>
<iframe id="_sl_historyFrame"
style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
As you see, we have references the XAP file in the page by using the source
parameter. When you build your application in Visual Studio, it will create a
new folder besides the test page called ClientBin and put the XAP file inside it
so you can reference it in the page.
Clear, aih?
Summary
- Silverlight is a cross-platform
application framework for writing and running rich Internet applications (RIA.)
- Its runtime is available as a
cross-browser, cross-platform, and cross-device plug-in.
- It's the main development framework for
Windows Phone.
- It's a subset of WPF so it depends on XAML
for UI design.
- You define the interface using XAML, and
write the code using your preferred .NET language.
- The XAML markup, as well as the code, is
compiled into .NET assemblies and compressed into a XAP file.
- The XAP file is then referenced by a
prepared Web page and then downloaded to client's PC when he navigates to
the page.
- Version 4 is the current stable version of
Silverlight.
- Silverlight 5 is currently in beta and it
will be released soon.
- You use Visual Studio 2010 and Microsoft
Expression Studio for developing and designing your Silverlight application.
- Microsoft Expression Studio is preferred
for you if you are a designer.