Silverlight architecture

Silverlight is a plugin installed in web browsers in a quick and clean way similar to Flash. That is, Flash is in a controlled environment, and applications run under a sandbox environment.

As for the architecture, if we compare it to a standard web application, we can substitute XAML for HTML, C# or VB.NET for JavaScript, and so on. We can also make use of a reduced version of the.NET Framework as shown in the following figure:

Silverlight architecture

The plugin is about 4 MB in size and does not depend on the desktop version of Microsoft .NET Framework.

All this is fine but there a few questions to be answered such as how is the Silverlight application installed on a server? How is it executed on a client machine? Let's see how it works:

  • When we build a Silverlight project, an XAP file is generated (Silverlight can also be configured to generate several files).
  • This file is just a ZIP file with all the necessary assemblies and resources to execute the application.
  • This XAP file is stored on our web server.
  • In an HTML page, we reference it using an OBJECT tag.
  • When the user navigates to that page, the XAP file of the application is downloaded and unzipped. Then, the application starting point is sought and the application is executed.

Application execution takes place in a controlled sandbox environment, so a malicious developer cannot format the client's HDD (in some cases, user confirmation is required to interact with the hardware, otherwise interaction is simply denied to the application).

Silverlight architecture

To get a better idea of how it works, let's compare an HTML web application with a Silverlight one:

Silverlight architecture

Creating the Hello World project

Now that we have our development environment ready, we will create our first Silverlight project. Of course, it will be the classic Hello World. On this occasion, we will use the example to learn:

  • How to create a new project
  • How to encode directly into the markup language
  • How to drag elements from the Toolbox palette and configure them using Properties
  • How to respond to an event and call a Code-Behind method

Creating a new project

Let's open Visual Studio and start creating the app:

  1. To create a new project, we must launch Visual Studio. Select File | New Project and choose the Silverlight Application option:
    Creating a new project
  2. Once the route and type of project has been chosen, a dialog will appear, asking us if we want to create a web project to host our Silverlight application.
  3. Click on OK (a Silverlight application needs a web page which instantiates it with an OBJECT tag).
    Creating a new project

    We now have the solution created. It consists of two projects:

    • Silverlight project: The wizard creates an entry point (.app file) and a default page (MainPage). In the default MainPage, we can see the layout definition (MainPage.xaml) and its associated Code-Behind (mainpage.cs). It is advisable to remember that this Code-Behind is executed at the client side and not at the server side.
    • Web project: This simply consists of an ASP.NET page and an HTML page to try our Silverlight application.

      We can clearly see every element of the solution in the following figure:

      Creating a new project

Coding directly into the markup language

In this section, we will add our first Silverlight controls, encoding them directly into the markup language. We will see next how to carry out the same operation via drag-and-drop:

  1. Open the file MainPage.xaml.
  2. Add a text block containing the expression Hello World. To do this, we will enter the following code: 
    <Grid x:Name="LayoutRoot" Background="White">
 <TextBlock Text="Hello World!" FontSize="20"/>
</Grid>

    Tip

    Downloading the example code

    You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

  3. We must build the project and execute the example by clicking on the play icon.
    Coding directly into the markup language
  4. We can now see our first Silverlight application in action!
    Coding directly into the markup language
上一章目录下一章