Tuesday, December 23, 2008

Silverlight - Micorosoft's magic for RIA (Part 2)

For first part of this post, please visit Silverlight (Part 1).

Silverlight and Visual Studio 2008:


VS2008 does not support built in template for Silverlight application. You need to download Silverlight tools from following link:
http://www.microsoft.com/downloads/details.aspx?FamilyId=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en.

VS2010 will includes built in template for Silverlight application so be patient till release of VS2010 :).

There are two types of Silverlight web sites that you can create in Visual Studio:
(1) Ordinary HTML web site: In this case, the entry point to your Silverlight application is a basic HTML file that includes a Silverlight content region.

(2) ASP.NET web site: In this case, Visual Studio creates two projects—one to contain the Silverlight application files, and one to hold the server-side ASP.NET web site that will be deployed alongside your Silverlight files. The entry point to your Silverlight application can be an ordinary HTML file or an ASP.NET web form that also includes server-generated content.

ASP.NET is a better approach in the following cases:
- You want to create a web application that combines ASP.NET web pages with Silverlight- enhanced pages.
- You want to generate Silverlight content indirectly, using ASP.NET web controls.
- You want to create a Silverlight application that calls a web service, and you want to design the web service at the same time (and deploy it to the same web server).

Creating a Silverlight Project:
Now that you understand the two types of Silverlight web sites, you’re ready to create a new Silverlight application by following these steps:

1. Select File ->New ->Project in Visual Studio, choose the Visual C# group of project types, and select the Silverlight Application template. As usual, you need to pick a project name and a location on your hard drive before clicking OK to create the project.

2. At this point, Visual Studio will prompt you to choose whether you want to create an ordinary HTML web site or a full-fledged ASP.NET web site that can run server-side code. For now, choose the second option to create an ordinary web site and click OK.

The Anatomy of a Silverlight Application:
Every Silverlight project starts with a small set of essential files, as shown in Figure.



All the files that end with the extension .xaml use a flexible markup standard called XAML. All the files that end with the extension .cs hold the C# source code that powers your application.

Here’s a rundown of the files shown in above Figure:
- App.xaml and App.xaml.cs: These files allow you to configure your Silverlight application. They allow you to define resources that will be made available to all the pages in your application, and they allow you to react to application events such as startup, shutdown, and error conditions. In a newly generated project, the startup code in the App.xaml.cs file specifies that your application should begin by showing Page.xaml.

- Page.xaml: This file defines the user interface (the collection of controls,
images, and text) that will be shown for your first page. Technically, Silverlight pages are user controls. A Silverlight application can contain as many pages as you need—to add more, simply choose Project à Add New Item, pick the Silverlight User Control template, choose a file name, and click Add.

- Page.xaml.cs: This file includes the code that underpins your first page, including the event handlers that react to user actions.

Along with these four essential files, there are a few more ingredients that you’ll only find if you dig around. Under the Properties node in Solution Explorer, you’ll find a file named AppManifest.xml, which lists the assemblies that your application uses. You’ll also find a file named AssemblyInfo.cs that contains information about your project (such as its name, version, and publisher), which is embedded into your Silverlight assembly when it’s compiled. Neither of these files should be edited by hand—instead, they’re modified by Visual Studio when you add references or set projects properties. Lastly, the gateway to your Silverlight application is an automatically generated but hidden HTML file named TestPage.html. To see this file, click the Show All Files icon at the top of the Solution Explorer window, and expand the ClientBin folder (which is where your application is compiled).
Let’s add one textblock named “lblMessage” and one button named “cmdClickMe” on page.xaml.

Adding Event Handling Code:
You attach event handlers to the elements in your page using attributes, which is the same approach that developers take in WPF, ASP.NET, and JavaScript. For example, the Button element exposes an event named Click that fires when the button is triggered with the mouse or keyboard. To react to this event, you add the Click attribute to the Button element, and set it to the name of a method in your code.


This example assumes that you’ve created an event handling method named cmd_ClickMe. Here’s what it looks like in the Page.xaml.cs file:

private void cmdClickMe_Click(object sender, RoutedEventArgs e)
{
lblMessage.Text = "Goodbye, cruel world.";
}

You can’t coax Visual Studio into creating an event handler by doubleclicking
an element or using the Properties window (as you can in other types of projects). However, once you’ve added the event handler, you can use IntelliSense to quickly assign it to the right event. Begin by typing in the attribute name, followed by the equal sign. At this point, Visual Studio will pop up a menu that lists all the methods that have the right syntax to handle this event and currently exist in your code-behind class. Simply choose the right event handling method.


For next part of this post, please visit Silverlight (Part 3).

No comments: