AjaxWorld Talk: Building Rich Internet Applications Using Microsoft Silverlight 2

It was another fun day AjaxWorld. I had a good time during my talk Silverlight 2.

Silverlight is a cross-browser, cross-platform, cross-device. Plug-in for building and delivering the next generation of .NET based media experiences and rich interactive applications for the Web.

Silverlight does not require Windows, .NET or IIS on the server.

Silverlight 2 just shipped a few days ago, and already we have some great customers going live.

NBC Olympics - NBC hosted the Olympics live on nbcolympics.com and served up 1.3 billion page views, 70 million video streams, and 600 million minutes of video content - making it the largest ever media event on the web. Users visiting the site spent an average of 27 minutes on the site when they watched a video - an unprecedented number for online traffic.

Notice the use of immediate seek to anywhere in the stream and adaptive streaming that gives you just the right bit-rate content for your connection.

Democratic National Convention - In August, the Democratic National Convention was streamed live using Silverlight, and broadcast a 2Mbit live video feed of the event and speeches - receiving outstanding feedback from audiences watching it.

This video was delivered live to millions of viewers all over the world at higher quality and bit rate than traditional TV. Now, all the content is available for viewing on demand.

Hard Rock - The folks at Hard Rock have the world's largest collection of Rock-and-roll memorial in the world. They hired the good folks at vertigo to build. Notice how the gigabytes of images are easy to zoom into and pan around. All streaming download of images...

Health Care Demonstrator - This is an example app that shows how to build a great line of business application with Silverlight.

Quake Game - Check out this very cool Quake game in Silverlight. Look at the frame rate... even in full screen!

Next I showed the latest progress on Moonlight with a Linux openSUSE 11.0 VPC (thanks Miguel!)

Next, I built a very simple Silverlight 2 application in Eclipse using the Eclipse Tools for Silverlight.

First we create a new Silverlight project in Eclipse.

Now, we just drag the button from the toolbox in Eclipse

Notice we get autocompletion in the source view in Eclipse

Then we can easily handle the click event in Eclipse

Then in code view, we get auto completion and error reporting in C# in Eclipse.

Next I built a simple Silverlight 2 application from scratch in the free VS2008...

For this demo, I only used freely available tools... In particular everything I show works in Visual Studio 2008 Web Developer Express and the Silverlight Tools for Visual Studio 2008.

Download the complete sample.

File, New Project

Next you can select what server side project to associated your Silverlight app with. Notice you can even have one dyamically generated for you. Also, notice you don't need .NET on the server, in fact you can deploy Silverlight from a Linux server.. all you need is http.

Notice the client and web project in the same solution and the Xaml view and the preview view.

Notice the great Xaml intellisense.

Now we get to write client side C# code... we can even do breakpoints, etc.

private void btn1_Click(object sender, RoutedEventArgs e)
{
   btn1.Content = "Oach!";
}

Now, check out the server project, it includes ClientBin with a Silverlight.xap file that includes our clientside code... The cool thing is this is just a zip file... so you can see inside it easily.

Run it and check it out! works perfectly.

But this is Silverlight, let's see if we can make it a little more sexy. Let's open it up in Express Blend.

Notice Blend is built for Designers...

Let's make the design surface a little bigger then do some gradients

and finally a motion path..

The great thing is the project just refreshes in VS

Now we need to get some real data into this app.

First we add a datagrid (we put it and the button in a StackPanel)

<StackPanel>
<Button x:Name="btn1" Width="100" Height="50" Content="Push Me!" Click="btn1_Click" Margin="49,73,0,0" d:LayoutOverrides="Width, Height" VerticalAlignment="Top" HorizontalAlignment="Left" RenderTransformOrigin="0.5,0.5">
    <Button.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="-49.157"/>
            <TranslateTransform/>
        </TransformGroup>
    </Button.RenderTransform>
</Button>

<data:DataGrid  Name="datagrid1"></data:DataGrid>
<StackPanel>

Then we go to the server project and add some data.. In this case an Entity Framework data model. This let's us use LINQ to get access to the data rather than doing queries in code rather than in T-SQL.

Select the employees tables we need then, you get this view in the designer. Notice the Photo filed is too big to pass to the client, so we can just remove it here.

Now let's add a web service to pass this to data to the client. Let's add a Silverlight-enabled WCF service.

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class NorthwindService
{
   [OperationContract]
   public IEnumerable<Employee> GetEmployees(string nameContains)
   {
       var db = new NORTHWNDEntities();
       var q = from emp in db.EmployeeSet
               where emp.FirstName.Contains(nameContains)
               orderby emp.LastName ascending
               select emp;
       return q.ToList();
   }

}

private void btn1_Click(object sender, RoutedEventArgs e)
{
   var client = new ServiceReference1.NorthwindServiceClient();
   client.GetEmployeesCompleted +=
       new EventHandler<GetEmployeesCompletedEventArgs>(client_GetEmployeesCompleted);
   client.GetEmployeesAsync("b");

   btn1.Content = "Oach!";
   Storyboard1.Begin();

}

void client_GetEmployeesCompleted(object sender, GetEmployeesCompletedEventArgs e)
{
   datagrid1.ItemsSource = e.Result;
}

Notice the column reordering, editable cells, sorting, etc.

Hope you enjoyed it! Here is the completed sample.