ScottGu Mix Keynote coding demo posted

A ton of folks have asked us about getting the source code to Scott’s cool coding demo. 

image

 Watch the demo

download the completed example code

Note, there are a couple of prereqs:

  1. Sql Server 2008 to run it.. works great with the free Sql Express 2008
  2. .NET RIA Services March '09 Preview
  3. Silverlight 3 Beta

Enjoy!

Complete demo steps:

1. In Views/CustomersPage.xaml.cs, in OnNavigatedTo(), add the following:

 var context = new CustomersDomainContext(); 
 customersList.ItemsSource = context.Customers; 
 context.LoadCustomers();

This code loads the data from the DomainService class on the server.  Notice the data is loaded asynchronously, but no ugly, hard to debug async code is needed. 

2. In CustomerDetailsPage.xaml.cs OnNavigatedTo, add this code:

 this.DataContext = context; 
 int customerID = int.Parse(NavigationContext.QueryString["CustomerID"]); 
 context.LoadCustomerOrders(customerID);

 

This code grabs the Customer id off the query string and loads it up.. effectively a detailsview.

3. F5 the app, click on one of the customers.clip_image002clip_image004

4. Then sign up for the SaveButton Click event (last line in the following XAML snippet):

 <Button x:Name="SaveButton" 
 Style="{StaticResource SaveButtonStyle}" 
 Click="SaveButton_Click"/>

5. In the code-behind CustomerDetailsPage.xaml.cs, add the following code to the newly-created event handler:

 private void SaveButton_Click(object sender, RoutedEventArgs e) 
 { 
     context.SubmitChanges(); 
 }

Notice how simple it is to save all your pending changes back to the server.  The client has kept up with what has changed and sends back a smart diff-gram.

6. Ctrl+F5 the app , go back to the details page, now try editing the phone number and see how it’s validated nicely. Note that this validation occurs both client-side and server-side.
clip_image006

7. Click one of the items in the DataGrid, show how the chart updates. Select something in another group in the DataGrid and show cool chart animation.

8. Click “Save” to save data in the DataForm back to the database.