PDC09 Talk: Building Amazing Business Applications with Silverlight 4, RIA Services and Visual Studio 2010

I had a great time at my talk today at PDC2009.  I was able to spend much of the time in a demo…   Here is a summary of that demo so you can walk through it on your own machine:

What you need to get started:

 

Starting Off

I am starting off with the new Business Application Template that gets installed with RIA Services. 

image

This new template includes:

    • Pattern for page navigation
    • Log\Logout and new user registration support
    • Localizable
    • User settings
    • Shared Code

 

For this demo, I am going to used a customized version of the template..

After you create the project, you see we have a simple solution setup that follows the “RIA Application” pattern.  That is one application that happens to span a client (Silverlight) and server (asp.net) tiers.  These two are tied such that any change in the Silverlight client is reflected in the server project (a new XAP is placed in client bin) and appropriate changes in the server result in new functionality being exposed to the Silverlight client. To parts of the same application.

image

 

Exposing the Data

I started out with an Entity Framework model.  RIA Services supports any DAL including Linq2Sql, NHibernate as well as DataSets and DataReader\Writer.   But EF has made some great improvements in .NET 4, so I felt it was a good place to start. 

So here is the EF model I created.  Basically we have a set of restaurants, each of which has a set of plates they serve.  A very simple model designed many to show off the concepts.  

image

 

Then we need to place to write our business logic that controls how the Silverlight client can interact with this data.    To do this create a new DomainService.  

image

Then select the tables you want to expose:

image

Now, let’s look at our code for the DomainService…

  1. using System.Linq;
  2. using System.Web.Ria;
  3. using System.Web.DomainServices.Providers;
  4.  
  5. namespace MyApp.Web
  6. {
  7.     [EnableClientAccess]
  8.     public class DishViewDomainService :
  9.             LinqToEntitiesDomainService<DishViewEntities>
  10.     {
  11.         public IQueryable<Restaurant> GetRestaurants()
  12.         {
  13.             return this.ObjectContext.Restaurants
  14.                 .Where (r=>r.City != "Raleigh")
  15.                 .OrderBy(r=>r.ID);
  16.         }
  17.     }
  18. }

 

In line 7 – we are enabling this service to be accessed from clients.. without this, the DomainService is only accessible from on the machine (for example for an ASP.NET hosted on the same machine).

In line 8: we are defining the DomainService – you should think of a DomainService as just a special kind of WCF Service.. one that is higher level and has all the right defaults set so that there is zero configuration needed.   Of course the good news is that if you *need* to you can get access to the full richness of WCF and configure the services however you’d like.

In line 9: you see we are using the LinqToEntitiesDomainService.  RIA Services supports any DAL including LinqToSql or NHibernate.  Or what I think is very common is just POCO.. that is deriving from DomainService directly.  See examples of these here…

 

In line 11:  We are defining a Query method.. this is based on LINQ support added in VS2008.  Here we define the business logic involved in return data to the client.  When the framework calls this method, it will compose a LINQ query including paging, sorting, filtering from the client then execute it directly against the EF model which translate it into optimized TSQL code.  So no big chunks of unused data are brought to the mid-tier or the client. 

 

Consuming the data on the client

Now let’s switch over the client project and look at how we consume this. 

in Views\Home.xaml we have a very simple page with just a DataGrid defined.

  1. <Grid x:Name="LayoutRoot">
  2.     <data:DataGrid AutoGenerateColumns="True"
  3.                    Name="dataGrid1"
  4.                    Height="456"
  5.                    Width="618" />
  6. </Grid>
  7.  

now let’s flip over to codebhind..

Notice we have a MyApp.Web namespace available on the client. Notice that is the same namespace we defined our DomainService in..

image

 

So, let’s create a local context for accessing our DomainService.  First thing you will notice is that VS2010 Intellisense makes it very easy to find what we want.. it now matches on any part of the class name..  So just typing “domainc” narrows our options to the right one.. 

image

  1. var context = new DishViewDomainContext();
  2. dataGrid1.ItemsSource = context.Restaurants;
  3.  
  4. context.Load(context.GetRestaurantsQuery());
  5.  

In line 2, notice there is a property on context called Restaurants.  How did we get that there?  Well, there is a query method defined on the DomainService returning a type of type Restaurant.  This gives us a very clean way to do databinding.  Notice this call is actually happening async, but we don’t have to deal with any of that complexity.  No event handlers, callbacks, etc. 

In line 4, while the whole point of RIA Services is to make n-tier development as easy as two-tier development that most of us are used to, we want to make sure the applications that are created are well behaved.   So part of this is we want to be explicit when a network call is being made.. this is not transparent remoting.  Network calls must be explicit.    In this line we are mentioning which query method to use as you might define more than one for the same type with different logic. 

Now we run it..

image

This is very cool and simple.  But in a real world case, i am guessing you have more than 20 records… sometimes you might have 100s, or thousands or more.  You can’t just send all those back to the client.  Let’s see how you can implement paging and look at some of the new design time features in VS2010 as well. 

 

RIA Services support in Visual Studio 2010

Let’s delete that code we just wrote and flip over to the design surface and delete that datagrid. 

Drop down the DataSources window (you may need to look under the Data menu for “Show Data Sources”

image

If you are familiar with WinForms or WPF development, this will look at least somewhat familiar to you.   Notice our DishViewDomainContext is listed there with a table called Restaurant.  Notice this is exactly what we saw in the code above because this window is driven off that same DomainContext. 

Dropping down the options on Restaurant, we see we have a number of options for different controls that can be used to view this data… of course this is extensible and we expect 3rd party as well as your custom controls to work here.    Next see the query method here that is checked.  That lists all the available options for query methods that return Restaurant.

image 

Now if we expand the view on Restaurant, we see all the data member we have exposed.  This view gives us a chance to change how each data member will be rendered.  Notice I have turned off the ID and changed the Imagepath to an Image control.  Again this is an extensible and we expect 3rd party controls to plug in here nicely. 

image

Now, drag and drop Restaurant onto the form and we get some UI

image

 

And for you Xaml heads that want to know what really happens… Two things.  First if the DomainDataSource is not already created, one is created for you.

  1. <riaControls:DomainDataSource AutoLoad="True"
  2.                               Height="0"
  3.                               LoadedData="restaurantDomainDataSource_LoadedData"
  4.                               Name="restaurantDomainDataSource"
  5.                               QueryName="GetRestaurantsQuery"
  6.                               Width="0"
  7.                               Margin="320,240,320,144">
  8.     <riaControls:DomainDataSource.DomainContext>
  9.         <my:DishViewDomainContext />
  10.     </riaControls:DomainDataSource.DomainContext>
  11. </riaControls:DomainDataSource>
  12.  

If you notice the LoadedData event is wired up… This is to give a nice user experience in the case of an error.  You should certainly customize what is defaulted for you… but it is a good place to start.

  1. private void restaurantDomainDataSource_LoadedData(object sender,
  2.     LoadedDataEventArgs e)
  3. {
  4.     if (e.HasError)
  5.     {
  6.         MessageBox.Show(e.Error.ToString(), "Load Error",
  7.             MessageBoxButton.OK);
  8.         e.MarkErrorAsHandled();
  9.     }
  10. }

 

Finally, the DataGrid is created with a set of columns. 

  1. <data:DataGrid AutoGenerateColumns="False"
  2.                ItemsSource="{Binding ElementName=restaurantDomainDataSource, Path=Data}"
  3.                Name="restaurantDataGrid"
  4.                RowDetailsVisibilityMode="VisibleWhenSelected">
  5.     <data:DataGrid.Columns>
  6.         <data:DataGridTemplateColumn x:Name="imagePathColumn"
  7.                                      Header="Image Path"
  8.                                      Width="SizeToHeader">
  9.             <data:DataGridTemplateColumn.CellTemplate>
  10.                 <DataTemplate>
  11.                     <Image Source="{Binding Path=ImagePath}" />
  12.                 </DataTemplate>
  13.             </data:DataGridTemplateColumn.CellTemplate>
  14.         </data:DataGridTemplateColumn>
  15.         <data:DataGridTextColumn x:Name="nameColumn"
  16.                                  Binding="{Binding Path=Name}"
  17.                                  Header="Name"
  18.                                  Width="SizeToHeader" />
  19.         <data:DataGridTextColumn x:Name="addressColumn"
  20.                                  Binding="{Binding Path=Address}"
  21.                                  Header="Address"
  22.                                  Width="SizeToHeader" />
  23.  

 

Then setup a grid cell by click 4/5ths of the way down on the left grid adorner.  Then select the grid, right click, select reset layout all. 

image

.. add poof! VS automatically lays out the DataGrid to fill the cell just right. 

image

Now, personally, I always like the Name column to come first.  Let’s go fix that by using the DataGrid column designer.  Right click on the DataGrid select properties then click on the Columns property..

image

In this designer you can control the order of columns and the layout, etc.   I moved the image and name fields to the top.

Now, let’s add a DataPager such that we only download a manageable number of records at a time. From the toolbox, simply drag the datapager out.

image

 

We use our same trick to have VS auto layout the control  Right click on it and select Reset Layout\All. 

image

That is cool, but there is a big  gap between the DataGrid and the DataPager.. I really want them to be right.  This is easy to fix.  Right click on the grid adorner and select “Auto”..

 

image

 

Perfect!

image

Now, we just need to wire this up to the same DataSource our DataGrid is using “connect-the-dots” databinding.  Simply drag the Restaurant from the DataSources window on top of the DataGrid. 

image

For you Xaml heads, you’ll be interested in the Xaml this creates..

  1. <data:DataPager Grid.Row="1"
  2.                 Name="dataPager1"
  3.                 Source="{Binding ElementName=restaurantDomainDataSource, Path=Data}" />
  4.  

Notice, we don’t need to create a new DomainDataSource here… we will use the one that is already on the page.

Now, we are doing an async call.. so let’s drag a  BusyIndicator from the new Silverlight 4 Toolkit.

image

We need to write up the IsBusy to the restaurantDomainDataSource.DomainContext.IsLoading… Luckily there is some nice databinding  helper in VS2010.  Select properties, then IsBusy, then DataBinding.

image

Again, for you Xaml heads, the Xaml that gets generated is pretty much what you’d expect.

  1. <controlsToolkit:BusyIndicator Height="78"
  2.                                HorizontalAlignment="Left"
  3.                                Margin="226,201,0,0"
  4.                                Name="busyIndicator1"
  5.                                VerticalAlignment="Top"
  6.                                Width="177"
  7.                                IsBusy="{Binding ElementName=restaurantDomainDataSource, Path=DomainContext.IsLoading}" />
  8.  

Loading…

image

 

and once it is loaded…

image

Very cool…  that was a very easy was to get your data.    Page through it and notice that with each page we are going back all the way to the data tier to load more data.  So you could just as easily do this on a dataset of million+ records.    But what is more, is that sorting works as well and just as you’d expect.  It doesn’t sort just the local data, it sorts the full dataset and it does it all way back onto the data tier and just pulls forward the page of data you need to display.

But our pictures are not showing up… let’s look at how we wire up the pictures.  The reason they are not showing up is that our database returns just the simple name of the image, not the full path.  This allows us to be flexible about the where the images are stored.   The standard way to handle this is to write a value converter.     Here is a simple example:

  1. public class ImagePathConverter : IValueConverter
  2. {
  3.  
  4.     public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
  5.     {
  6.         string path = value.ToString();
  7.         path = path.Replace(":", "");
  8.         path = path.Replace("/", "");
  9.         path = path.Replace("\\", "");
  10.         if (path.Length > 100)
  11.             path = path.Substring(0, 100)
  12.         return "https://localhost/Images/" + path
  13.     }
  14.  

 

Now, let’s look at how we wire this converter to the UI.   First, let’s use the Document Outline to drill through the visual tree to find the Image control. 

image  

Then we select the properties on the image and wire up this converter.  If you have done this in Xaml directly before, you know it is hard to get right.  VS2010 makes this very easy!

image

Oh, and for you Xaml heads… here is what VS created..

  1. <navigation:Page.Resources>
  2.     <my1:ImagePathConverter x:Key="ImagePathConverter1" />
  3. </navigation:Page.Resources>
  4.  

and

  1. <data:DataGridTemplateColumn.CellTemplate>
  2.     <DataTemplate>
  3.         <Image Source="{Binding Path=ImagePath, Converter={StaticResource ImagePathConverter1}}" />
  4.     </DataTemplate>
  5. </data:DataGridTemplateColumn.CellTemplate>
  6.  

Silverlight Navigation

Now let’s look at how we drill down and get the details associated with each of these records.  I want to show this is a “web” way… So I’ll show how to create a deep link to a new page that will list just the plates for the restaurant you select. 

First we add a bit of Xaml to add the link to the datagrid..

  1. <data:DataGrid.Columns>
  2.     <data:DataGridTemplateColumn Header="">
  3.         <data:DataGridTemplateColumn.CellTemplate>
  4.             <DataTemplate>
  5.                 <Button Content="+"
  6.                         Style="{StaticResource DetailsButtonStyle}"
  7.                         Click="Button_Click"></Button>
  8.             </DataTemplate>
  9.         </data:DataGridTemplateColumn.CellTemplate>
  10.     </data:DataGridTemplateColumn>
  11.  

And to implement the button click handler…

  1. private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
  2.  {
  3.  
  4.      var res = this.restaurantDomainDataSource.DataView.CurrentItem
  5.          as Restaurant;
  6.  
  7.      NavigationService.Navigate(new Uri("/Plates?restaurantId="
  8.          + res.ID, UriKind.Relative));
  9.  
  10.  }
  11.  

Here we are getting the currently selected Restaurant, then we cons up a new URL to the page “Plates”.  We pass a query string parameter of restaurantId…

Now, let’s build out the Plates page that will the list of Plates for this restaurant.  First let’s great a a Plates page.  Let’s add a new Plates under the Views directory. 

image

Now we need to define a query to return the Plates.  Notice that only the data you select is exposed.  So we get to go back to the server, to our DishViewDomainService and add a new query method.

  1. public IQueryable<Plate> GetPlates()
  2. {
  3.     return this.ObjectContext.Plates
  4.         .OrderBy(p => p.Name);
  5. }
  6.  

Now we go back to the client, and see your DataSources window now offers a new datasource: Plates.

image

 

Now, just as we saw above, I will drag and drop that data source onto the form and i get a nice datagrid alreayd wired up to a DomainDataSource. 

image

Then, with a little formatting exactly as we saw above, we end up with…

image

And when we run it… First, you see the link we added to the list of Restaurants..

image

Clicking on anyone of them navigates us to our Plates page we just built. 

image

 

Customized Data Access

This is cool, but notice we are actually returning *all* the plates, not just the plates from the restaurant selected.    To address this first we need modify our GetPlates() query method to take in a resource id. 

  1. public IQueryable<Plate> GetPlates(int resId)
  2. {
  3.     return this.ObjectContext.Plates
  4.         .Where (p=>p.RestaurantID == resId)
  5.         .OrderBy(p => p.Name);
  6. }

Now, back on the client, we just need to pass the query string param… 

  1. protected override void OnNavigatedTo(NavigationEventArgs e)
  2. {
  3.     plateDomainDataSource.QueryParameters.Add(
  4.     new System.Windows.Data.Parameter()
  5.     {
  6.         ParameterName = "resId",
  7.         Value = NavigationContext.QueryString["restaurantId"]
  8.     });
  9. }
  10.  

Now, we run it and we get the just the plates for the restaurant we selected.

image

 

what’s more is we now have a deep link such that it works when I email, IM or tweet this link to my buddy who happens to run a different browser ;-)

  image

Ok… now for a details view…  Let’s do a bit more layout in the Plates.xaml.   First, let’s split the form in half vertically to give us some cells to work in. 

image

In the bottom left we will put the details view to allow us to edit this plate data.  Let’s go back to the DataSources window and change the UI type to Details. 

image

Dragging that Details onto the form… we get some great UI generation that we can go in and customize.

image

In particular, let’s format that Price textbox as a “currency”… using the new String Formatting support in Silverlight 4. 

image

And again, for you Xaml heads… this created:

  1. Text="{Binding Path=Price, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true, StringFormat=\{0:c\}}"

Now, let’s add an image to the other side.  Simply drop an Image control on the form and select Reset Layout\All

image

Now we can easily change the image to be “Uniform”

image

Now we need to write up the binding here so that as selection changes, this image is update.  Luckily, that is very easy to do.    Simply drag and drop from the Data Sources window…

image

Then we need to wire up our converter just as we saw before..

image

Run it…

image

That looks great! 

But when we try edit something, we get this error..

image

 

Editing Data

Ahh, that is a good point, we need to go back and explicitly define a Update method to our DomainService on the server.

  1. public void UpdatePlate(Plate currentPlate)
  2. {
  3.     currentPlate.NumberUpdates++;
  4.  
  5.     var orginal = this.ChangeSet.GetOriginal(currentPlate);
  6.  
  7.     if (orginal.Price != currentPlate.Price)
  8.     {
  9.         currentPlate.Price += 1; // add 1 dollar fee for changing price
  10.     }
  11.  
  12.     this.ObjectContext
  13.         .AttachAsModified(currentPlate, orginal);
  14. }
  15.  

In line 3, notice we take the NumberUpdates and increment by one.  it is nice that we send the entry entity back and forth, so we can do entity level operations very easily.   

Next in line 5, we pull out the original value.. .this is the plate instance as the client saw it before it was updated. 

In line 7-10, we first check to see if the price has changed, if it has, we add a fee of one dollar for a price change. 

Finally  in line 12-13, we submit this change to the database. 

Now we just need to drop a button on the form.

 

image

Then write some codebehind..

  1. private void button1_Click(object sender, RoutedEventArgs e)
  2. {
  3.     this.plateDomainDataSource.SubmitChanges();
  4. }
  5.  

What this is going to do is find all the entities that are dirty (that have changes) and package them up and send them to the server. 

Now notice if you make a change price to the data and hit submit the NumberUpdates goes up by one and the the price has the one dollar fee added.

image

Then submit..  NumberUpdates is now 63 and the price is $73.84..

image

Then if you set a breakpoint on the server, change two or three records on the client.  Notice the breakpoint gets hit for each change.    We are batching these changes to make an efficient communication pattern. 

image

 

Great.. now let’s look at data validation.

We get some validation for free.  for example Calorie Count is a int, if we put a string in, we get a stock error message. 

image

If we want to customize this a bit more, we can go back to the server and specify our validation there.  It is important to do it on the server because you want validation to happen  on the client for good UI, but on the server for the tightest security.  Following the DRY principle (Don’t Repeat Yourself) we have a single place to put this validation data that works on the client and the server.

 

  1. [Required(ErrorMessage = "Please provide a name")]
  2. public string Name;
  3.  
  4. public Nullable<int> NumberUpdates;
  5.  
  6. [Range(0, 999)]
  7. public Nullable<decimal> Price;
  8.  
  9. [RegularExpression(@"^http\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$",
  10.     ErrorMessage = "Please use standard Url format")]
  11. public string Uri;
  12.  

The data validation attributes are a core part of .NET with ASP.NET Dynamic Data and ASP.NET MVC using the exact same model.

But what if they are not expressive enough for you?  For example, say I have a custom validation I have for making sure the description is valid..   To do that, I can write some .NET code that executes on the server AND the client.  Let’s see how to do that.  First I create a class on the server..

image

Notice the name here PlateValidationRules.shared.cs…. the “.shared” part is important… it is what tells us that this code is meant to be on the client and the server.

In this case, i am saying a valid description is one that has 5 more more words

  1. public class PlateValidationRules
  2. {
  3.     public static ValidationResult IsDescriptionValid(string description)
  4.     {
  5.         if (description != null && description.Split().Length < 5)
  6.         {
  7.             var vr = new ValidationResult("Valid descriptions must have 5 or more words.");
  8.             return vr;
  9.         }
  10.  
  11.         return ValidationResult.Success;
  12.     }
  13.  

Then to wire this up to the description property…

  1. [CustomValidation(typeof(MyApp.Web.PlateValidationRules),
  2.        "IsDescriptionValid")]
  3. public string Description;
  4.  

 

Then running the app, we see all our validations…

image

 

Personalization and Authentication

Lots of times in business applications we are dealing with valuable data that we need to make sure the user is authentication before we return in.  Luckily this is very easy to do with RIA Services.  Let’s go back to our DomainServices on the server and add the RequiresAuthentication attribute. 

  1. [EnableClientAccess]
  2. [RequiresAuthentication]
  3. public class DishViewDomainService :
  4.         LinqToEntitiesDomainService<DishViewEntities>
  5. {
  6.  
  7.  

Then when you run the application..

image

So let’s log in…  I don’t have an account created yet, luckily the Business Application Template supports new user registration.  All this is based on ASP.NET Authentication system that has been around sense ASP.NET 2.0. 

Here we are creating a new user…

image

And now we get our data…

image

Now, that we have a user concept.. why don’t we add one more setting to let the user customize this page.    So we edit the web.config file to add a BackgroundColor. 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <configuration>
  3.   <system.web>
  4.  
  5.     <profile>
  6.       <properties>
  7.         <add name="FriendlyName" />
  8.         <add name="BackgroundColor"/>
  9.       </properties>
  10.     </profile>
  11.  

And we go into the User.cs class on the server and add our BackgroundColor. 

  1. public partial class User : UserBase
  2. {
  3.     public string FriendlyName { get; set; }
  4.     public string BackgroundColor { get; set; }
  5. }
  6.  

Now, back on the client, let’s build out UI using the DataSources window just as we have seen above.  But this time, I have created a very simple ColorPicker control in order to show that it is possible to use your own custom control. 

image

Drag and drop that onto the form..

image

 

Then change the binding to be TwoWay using the databinding picker. 

image

Then I think we need a nice header here with the User name in it.  To so that, let’s add a TextBlock, set the fontsize to be big.   Then do connect the dots databinding to write up to the user name. 

image

Then let’s use the string format databinding to customize this a bit..

image

 

Next we put a Submit button. 

  1. private void button1_Click(object sender, System.Windows.RoutedEventArgs e)
  2. {
  3.     var context = WebContext.Current.Authentication;
  4.  
  5.     this.userDomainDataSource.SubmitChanges();
  6.     userDomainDataSource.SubmittedChanges += (s, ev) =>
  7.     {
  8.         if (!context.IsBusy) context.LoadUser();
  9.     };
  10. }
  11.  

Now when we run it… we can modify the user settings. 

image

The really cool part is that if the user goes to another machine and logs in, they get the exact same experience. 

 

image

 

Summary

Wow, we have seen a lot here.. We walked through end-to-end how to build a Business Application in Silverlight with .NET RIA Services.  We saw the query support, validating update, authorization and personalization as well as all the great new support in VS2010.    Enjoy!