9 min read

We have come a long way from the day the WEB was created in 1992 by T.B.LEE in Switzerland. From hyper linking which was the only thing at that time, to streaming videos, instant gratification with AJAX, and a host of other do-dads that has breathed new life to JavaScript and internet usability. Silverlight among several others, is a push in this direction to satisfy the ever increasing needs of the internet users. Even so, the web application displays fall short of the rich experience one can achieve with desktop applications, and this is where the tools are being created and honed for creating RIA, short for Rich Internet Applications. In order to create such applications, a great deal of development has taken place in the Microsoft ecosystem . These are all described in the .NET and Windows Presentation Foundation which supports developers to create easily deployable Rich Internet Applications. We have to wait and see how it percolates to the Semantic Web in the future.

Silverlight is a cross-platform, cross-browser plug-in that renders XAML, the declarative tag-based files while exposing the JavaScript programming interface. It makes both developers and designers to collaborate and contribute to rich and interactive designs that are well integrated with Microsoft’s Expression series of programs.

Initial Steps to Take

In this article we will be using Silverlight 1.0 with JavaScript. Initially you need to make your browser understand the XAML, and for this you need to install Silverlight available here. There is no need for a server to work with these Silverlight application files as they will be either HTML pages, XAML pages, or JavaScript pages. Of course these files may be hosted on the server as well.

The next figure shows some details you need to know before installing the plug-in.

Understand and Use Microsoft Silverlight with JavaScript

Silverlight Project Details

After having enabled the browser to recognize XAML – the Extensible Application Mark up Language, you need to consider the different components that will make Silverlight happen. In the present tutorial we will look at using Silverlight 1.0. Silverlight 2.0 is still in Beta stage. If you have Silverlight already installed you may be able to verify the version in the Control Panel / Add Remove Programs and display information as shown in the next figure.

Understand and Use Microsoft Silverlight with JavaScript

To make Silverlight happen you need the following files:

  • An HTML page that you can browse to where the Silverlight plug-in is spawned
  • A XAML page which is all the talk is about which provides the ‘Richness’
  • Supporting script files that will create the plug-in and embeds it in the HTML page

The next figure shows how these interact with one another somewhat schematically.

Understand and Use Microsoft Silverlight with JavaScript

Basically you can start with your HTML page. You need to reference two .JS files as shown in the above figure. The script file Silverlight.js exposes the properties, methods, etc. of Silverlight. This file will be available in the SDK download. You can copy this file and move it around to any location. The second script createSilvelight.js creates a plug-in which you will embed in the HTML page using yet another short script. You will see how this is created later in the tutorial. The created plug-in then brings-in the XAML page which you will create as well.

The first step is to create a blank HTML page, herein called, TestSilverLight.htm as shown in the following listing:

Listing 1:TestSilverLight.htm Scaffold file

<html>
<head>
<script type="text/javascript" 
        src="Silverlight.js">
</script>

<script type="text/javascript" 
        src="createSilverlight.js">
</script>
<title> </title> 
</head> 

<body>

Next, you go ahead and create the createSilvelight.js file. The following listing shows how this is coded. This is slightly modified although taken from a web resource.

Listing 2: createSilverlight.js

function createSilverlight()
{  
    Silverlight.createObject(
        "TestSilver.xaml",              // Source property value.
        parentElement,                  // DOM reference to hosting DIV tag.
        "SilverlightPlugInHost1",       // Unique plug-in ID value.
        {                               // Plug-in properties.
            width:'1024',                   // Width of rectangular in pixels.
            height:'530',                   // Height of rectangular in pixels.
            inplaceInstallPrompt:false,     // install prompt if invalid version is detected.
            background:'white',             // Background color of plug-in.
            isWindowless:'false',           // Determines whether to display in windowless mode.
            framerate:'24',                 // MaxFrameRate property value.
            version:'1.0'                   // Silverlight version.
        },
        {
            onError:null,                   // OnError property value 
            onLoad:null                     // OnLoad property value 
        },
        null,                               // initParams 
        null);                              // Context value 
}

This function, createSilverlight(), when called from within a place holder location will create a Silverlight object at that location with some defined properties. You may go and look up the various customizable items in this code on the web. The object that is going to be created will be the TestSilver.xaml at the “id” of the location which will be found using the ECMA script we will see later. The “id” is also named here, found by the “parentElement”. To proceed further we need to create (a) the TestSilver.xaml file and (b) create a place holder in the HTML page.

At first the changes made to Listing 1 are shown in bold. This is the place holder <div> </div> tags inside the ‘body’ tags as shown in the next listing with the “id” used in the createSilverlight.js file. You may also use <span> </span> tags, provided you associate a “id” with it.

Listing 3: Place holder created in the HTML Page

<head>
<script type="text/javascript" 
        src="Silverlight.js">
</script>
<script type="text/javascript" 
        src="createSilverlight.js"></script>
<title> </title> 
</head> 
<body>
<div id="SilverlightPlugInHost1"> 
</div>
</body> 
</html>

Creating the XAML File

If you have neither used XAML, nor created a XAML page you should access the internet where you will find tons of this stuff. A good location is MSDN’s Silvelight home page. You may also want to read up this article which will give some idea about XAML. Although this article is focusing on ‘Windows’ and not ‘Web’, the idea of what XAML is the same. The next listing describes the declarative syntax that will show a ‘canvas’, a defined space on your web page in which an image has been brought in. The ‘Canvas’ is the container and the image is the contained object. A XAML file should be well formed similar to an XML file.

Listing 4: A Simple XAML file

<Canvas 
 
Width="200" Height="200" Background="powderblue">
<Image Canvas.Left="50" Canvas.Top="50" Width="200"

Source="Fish.JPG"/>
</Canvas>

Save the above file (text) with the extension XAML. If your Silverlight 1.0 is working correctly you should see this displayed on the browser when you browse to it. You also note the [.] notation to access the properties of the Canvas. For example, Canvas.Left is 50 pixels relative to the Canvas. The namespace is very important, more about it later.

Understand and Use Microsoft Silverlight with JavaScript

Without going into too much details, the pale blue area is the canvas whose width and height are 200 pixels each. The fish image is off set by the amounts shown relative to the canvas. Canvas is the portion of the browser window which functions as a place holder. While you use “Canvas” in web, you will have “Window” for desktop applications. The namespace of the canvas should be as shown otherwise you may get errors of various types depending on the typos.

Inside the canvas you may place any type of object, buttons, textboxes, shapes, and even other canvases. If and when you design using the Visual Studio designer with intellisense guiding you along you will see a bewildering array of controls, styles, etc. The details of the various XAML tags are outside the scope of this tutorial. Although Notepad is used in this tutorial, you really should use a designer as you cannot possibly remember correctly the various Properties, Methods and Events supported.

In some web references you may notice one more additional namespace . Remove this namespace reference as “Canvas” does not exist in this namespace. If you use it, you will get an XamlParseException. Also if you are of the cut and paste type make sure you save the XAML file as of type “All files” with XAML extension.

With the above brief background review the TestSilver.xaml file whose listing is shown in the next paragraph.

Listing 5: TestSilver.xaml file referenced in Plug-in script

<Canvas
Width=”200″ Height=”150″ Background=”powderblue”>

<Canvas
Width=”150″ Height=”250″
Background=”PaleGoldenRod”>
<Ellipse Width=”100″ Height=”100″
Stroke=”Black” StrokeThickness=”2″
Fill=”Green” />
</Canvas>

<Image Canvas.Left=”50″ Canvas.Top=”50″ Width=”200″
Source=”http://localhost/IMG_0086.JPG”/>

</Canvas>

In the above code you see a second canvas embedded inside the first with its own independent window. The order they would appear will depend on where they are in the code unless the default order is changed. You also see that the image is now referenced to a graphic file on the local server. Later on you will see the Silverlight.htm hosted on the server. If you are using more recent versions of ASP.NET used on your site, or version of IE you may get to see the complete file and some times you may get to see only part of the XMAL content and additional error message such as this one. For example, while the image in the project folder is displayed, the image on the local server may be skipped.

Understand and Use Microsoft Silverlight with JavaScript

If the setting and versions are optimum, you will get to see this displayed on your browser when you browse to the above file.

Understand and Use Microsoft Silverlight with JavaScript

Script in HTML to Embed Silverlight Plug-in

This really is the last piece left to be taken care of to complete this project. The code shown in the next listing shows how this is done. The code segment shown in bold is the script that is added to the place holder we created earlier.

Listing 6: Script added to bring Plug-in

<html>
<head>
<script type=”text/javascript”
src=”Silverlight.js”>
</script>

<script type=”text/javascript”
src=”createSilverlight.js”></script>
<title> </title>
</head>

<body>
<div id=”SilverlightPlugInHost1″>
<script type=”text/javascript”>
var parentElement = document.getElementById(“SilverlightPluginHost1”);
createSilverlight();
</script>
</div>
</body>
</html>

Hosted Files on the IIS

The various files used are then saved to a folder and can be set up as the target of a virtual directory on your IIS as shown.

Understand and Use Microsoft Silverlight with JavaScript

Now you can browse the Silverlight123.htm file on your browser to see the following displayed on your IE.

Understand and Use Microsoft Silverlight with JavaScript

Summary

The present tutorial shows how to create a Silverlight project describing the various files used and how they interact with each other. The importance of using the correct namespace and some tips on creating the XAML files as well as hosting them on IIS are also described. A Windows XP with SP2 was used and the Silverlight.htm file tested on IIS 5.1; IE Ver 7.0.5370IC and web site enabled for ASP.NET Version 2.0.50727 with the registered MimeType application/xaml+xml.





 











 
Packt
  






LEAVE A REPLY 





Please enter your comment!





Please enter your name here