AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=1334&pId=-1
Building Web Pages Using Microsoft Silverlight
page
by Jesudas Chinnathampi (Das)
Feedback
Average Rating: 
Views (Total / Last 10 Days): 45236/ 102

Introduction

Silverlight is a new technology from Microsoft. In simple words, Silverlight is a browser plug-in for delivering .NET based media experiences and rich interactive applications for the Web. Silverlight supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web applications. You can relate Silverlight to Adobe Flash. Using Silverlight, we can develop eye catching layouts, images, buttons, etc. In this article we will see some basic information regarding how to create a Silverlight application using Microsoft Visual Studio Orcas. Also for those who do not have Orcas, I have explained how to create and run a Silverlight Application using Microsoft Silverlight Streaming Service which provides us up to 4GB of storage space.

Basic requirements to run a Silverlight Application

In order to run a Silverlight Application, you should have Silverlight runtime files installed on your PC. These can be found at http://silverlight.net/GetStarted/.  This article will be based on the Silverlight 1.1 Alpha run time files. Basically you are installing a browser plug-in similar to Adobe Flash. Without this plug-in you cannot run any Silverlight application.

Create a Silverlight Application using Orcas

Now, let us discuss about the software that we need to create a Silverlight Application. To build a Silverlight project using Visual Studio, you need the following. Later in this article, you will see how you can create Silverlight Applications without installing Orcas and Silverlight Tools Alpha. 

·         Microsoft Visual Studio Code Name "Orcas" Beta 1

·         Microsoft Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1.

Depending upon your Internet connection, downloading Orcas will take a while. The entire file size is around 5.5 GB. The whole download is divided into 8 parts.  I installed Orcas on my Pentium 3 laptop which has a Processor speed of 1.13GHz with 1GB RAM. As per Microsoft, the minimum speed was 1.6GHz. However, Orcas is running fine in my system so far.

The entire installation of Orcas took around 3 hours for me. Along with the Orcas installation, you will get the latest .NET Framework (version 3.5).

Once, you have installed Orcas and the Silverlight Tools open Orcas and select File -> New Project. Select the project type as Silverlight as shown below.

Figure 1

 

Once the project is created, your solution explorer should look like the following.

Figure 2

You will notice a new type of file called XAML (Extensible Application Markup Language). In Silverlight, a XAML file will be used to represent the user interface screen. You can use the XAML file to design your display content. An alluring feature of Orcas is that we can open the XAML file in the design mode. To open up the Page.XAML in the design mode, you will have to install Microsoft Expression Blend, which is free to download at http://www.microsoft.com/expression/products/overview.aspx?key=blend.

After the successful installation of Blend, all you have to do is right click the Page.XAML file. When you right click the file, you should see the following options.

Figure 3

Select the option, "Open in Expression Blend…". Microsoft Expression Blend is now ready to design your web page. Initial screen will look like as follows.

Figure 4

Using the control toolbar that you see in the left hand side of the above screen shot, you can insert controls such as text, shapes, etc. Using the rectangle object and the textblock object I created a simple user interface which looked like as follows:

Figure 5

Now, you are ready to view your first Silverlight output in your webpage. Switch to the Orcas and Click F5, you will see the output in your default browser. The above project produced the following output in my Internet Explorer.

Figure 6

 

If you notice the source code for your XAML file, you will notice a bunch of XML tags. These XML tags are the ones which represents the user interface. The XAML file for the above example will look like as follows:

Listing 1

<Canvas 
xmlns="http://schemas.microsoft.com/client/2007 " 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml " 
x:Name="parentCanvas" 
Loaded="Page_Loaded" 
x:Class="MySilver.Page;assembly=ClientBin/MySilver.dll " 
Width="640" 
Height="480" 
Background="White" > 
<Rectangle RenderTransformOrigin=" -0.142,-0.457" Fill= "#FF1C1818" 
Stroke="#FF000000" Width= "352" Height=" 70" Canvas.Left=" 145" Canvas.Top=" 43"/> 
<TextBlock Width=" 306" Height="35 " Canvas.Left=" 174" Canvas.Top=" 64"
FontFamily=" Verdana" FontSize=" 18" FontStyle=" Normal" FontWeight=" Bold"
Foreground=" #FFF50C25" Text=" My First Silverlight Project" TextWrapping="Wrap"/> 
</Canvas> 

In the above code snippet if you carefully notice, you can see the reference to MySilver.dll.  Each XAML file has its own code behind file. You can change properties, invoke methods for the above rectangle object and Textblock object from the code behind file. If we do not have any code behind file, then we can remove the attribute, x:Class="………."

Create a Silverlight Project without using Orcas

Since the User Interface is represented by a bunch of XML tags, we can easily create a XAML file using a text editor such as notepad. Let us see how we can create a web page which will display a text as "Welcome to Silverlight!" To begin, copy the following code and save it as "welcome.xaml."

Listing 2

<Canvas 
xmlns="http://schemas.microsoft.com/client/2007" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
x:Name="parentCanvas" 
Width="640" 
Height="480" 
Background="White"> 
<TextBlock Width="306" Height="35" Canvas.Left="10" Canvas.Top="10" 
FontFamily="Verdana" FontSize="18" FontWeight="Bold" Foreground="#FFF50C25" 
Text="Welcome to Silverlight!" TextWrapping="Wrap"/>
</Canvas>

Here comes the tricky part. Well, how can you test the above code? Well, Microsoft now offers hosting of Silverlight applications for FREE (up to 4GB of storage space) at http://Silverlight.live.com. You will need to create a Silverlight streaming account (which is FREE) at https://silverlight.live.com/account/create.aspx.  Once an account is created, you can start uploading your silverlight applications to your account.

But, we need to follow certain procedures before we can upload an application. To begin with, you will have to create a file called, "manifest.xml." To know more about the manifest.xml file, please visit the following link http://dev.live.com/silverlight/createapp.aspx.

For our project, the manifest.xml file should like as follows:

Listing 3

<SilverlightApp>    
<source>welcome.xaml</source>    
<width>400</width>    
<height>100</height>
</SilverlightApp>
Upload your project to a Silverlight Streaming Account

a) Login using your windows LIVE User ID and password at https://silverlight.live.com/.

b) You should see the following options after your successful login.

Figure 7

c) Create a zip file with two files in it, the welcome.xaml and manifest.xml that we created earlier.

d) Click the link "Manage Applications."

e) Click "Upload a Silverlight Application."

f) Provide an Application name and choose the zip file that you created in step c.

g) Click the Upload button.

You have uploaded your Silverlight application. After the upload, you can test your application by clicking the link "Launch Application Test Page."  Now your application is hosted at your Silverlight Streaming account. You can add this Silverlight Application to your web page by following some guidelines.

If you modify your XAML file, then you should repeat steps c to g, so that all latest changes will be available in your streaming account.

Figure 8

In the above diagram, you should replace the XXXXX reference to your Windows LIVE Silverlight Streaming account ID which can be found at https://silverlight.live.com/account/manage.aspx.

Summary

This is a beginner's article. All we have seen is some basic information about how we can create a simple Silverlight Application.  Creating a better user interface is now easy with Silverlight. We can also host media files and audio files in the streaming account.  We can easily invoke the silverlight applications from any web page. Now, we can invoke a video file hosted at silverlight streaming from our blog. This can save us a lot of bandwidth since the video is hosted at Silverlight LIVE streaming.



©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-11-12 2:01:11 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search