Minggu, 23 Januari 2011

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.

image

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.

image

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.

image

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...

image image

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

image

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

image

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

image

image

image

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.

image

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

image

Notice we get autocompletion in the source view in Eclipse

image

Then we can easily handle the click event in Eclipse

image

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

image

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

image

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.

image

image

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

image

Notice the great Xaml intellisense.

image

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.



image





Run it and check it out! works perfectly.



image





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



image



Notice Blend is built for Designers...



image



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



image



and finally a motion path..



image



The great thing is the project just refreshes in VS



image



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.



image



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.



image



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



image




[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();
}

}



image




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.



image





Hope you enjoyed it! Here is the completed sample.

Tidak ada komentar: