Silverlight in action – Part 1

The Road Show

Recently, I participated in this autumn's Microsoft Academic Road-show around Bulgaria's universities. I was talking to the students about Silverlight and sharing my experience from Imagine Cup finals. To be honest I was expecting more people to have interest in the competition. Still I expect more competitors this year as more people now know about it compared to last year.

Lecturing about Silverlight, I realized that a few people in Bulgaria know about it. Gladly to say, now this has been corrected as a few hundred more students know what it is now and what it can do. For each presentation I gave, I was using Bookvar and build a map for the subject. The presentation can be found here in the form of a zip archive. Unzip it and use Bookvar to open the .bmm file.

Demonstrations

As part of the demonstration I used some sample Silverlight applications – Popfly and others from Silverlight.net. Additionally to that, I created a sample Silverlight application to show key features of the technology. It is an application that presents the program for the event in some university. Primarily I thought to make it for a single university but to be more generic I decided to make it customizable. Now data is supplied to the application from a service and thus it can be easily changed.

The PosterDemo App

It consists of two parts - one is a simple web service with only one method - GetPosters() that returns all available posters. This serves as the backend of the application and allows demonstrating the seamless integration with web services. The backend returns a list of objects from type Poster. Here all backend objects serve only to hold and transfer data. For this demo application the objects that are returned are dummy ones – not taken from a database – so that things are simpler. So the Poster class has the following properties:

public string Title { get; set; }
public string UniversityLogo { get; set; }
public DateTime EventDate { get; set; }
public DateTime EventEndTime { get; set; }
public bool IsEnabled { get; set; }
public List<ProgramItem> ProgramItems { get; set; }

Each one of them is self explanatory and I will skip explaining what they are for. The last property is a collection of type ProgramItem. It holds all items (meaning lectures) that are in the particular poster instance. Here are the properties of that class too:

public string Title { get; set; }
public string LecturerDetails { get; set; }
public DateTime StartTime { get; set; }
public string Color { get; set; }
public string LecturerImage { get; set; }
public string LectureDescription { get; set; }

To integrate a silverlight application with a web service is as easy as it is for standard .NET application (web or windows). For the alpha version that is available now the only different thing that you must do is put the ScriptService attribute to the web service so that the data is transferred in JSON instead of SOAP format. Eventually for version 1.1 the SOAP will also be supported for Silverlight. The application looks like this:

On the top of it there is a dropdown which lists all enabled posters for viewing. When you change the dropdown – details on it are changed. Everything on it (except the main image and the text "ПРОГРАМА") is dynamic. Key features that I wanted to show is simple animation creation with Blend as well as other – more "developer friendly" stuff.

One is LINQ support. The service as you saw does filter posters in any way. To filter only the enabled posters I've used a simple LINQ query:

private void FillInPosterNames()
{
var posterNames = from p in posters
where p.IsEnabled == true
select p.Title;
HtmlElement posterElements = HtmlPage.Document.GetElementByID("posters");
foreach (string title in posterNames)
{
HtmlElement option = HtmlPage.Document.CreateElement("option");
option.SetProperty("innerHTML", title);
posterElements.AppendChild(option);
}
}

After filtering, we take the dropdown html DOM element, create an option for each poster title and add it to the dropdown. Here also there is the way you can manipulate Html elements form C# code ;)

For the list of program items I have created a custom control ProgramList and for each item a control ProgramListElement. Each one of them has quite a number of specifics which I will start explaining in other posts.

Download it!

The whole sample can be downloaded from here. To be able to open and start it you will need Silverlight 1.1 Alpha Refresh and Visual Studio 2008 Beta 2 with Silverlight tools for Visual Studio 2008 Beta 2. Unfortunately, yesterday Visual Studio 2008 was officially released without Silverlight Tools for VS 2008. In a couple of weeks the tools are expected so then I'll be able to post an updated version.

What next …

In next few days I'll take care to explain more details on the demo that will uncover tricky parts while working with Silverlight.