Brad Abrams

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

BradA — Thu, 19 Nov 2009 21:30:00 GMT

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:

Visual Studio 2010 Beta2
Silverlight 4 Beta (now includes RIA Services)
Completed Solution (starting step and demo files)
Check out the slides

Starting Off

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

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.

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.

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.

Then select the tables you want to expose:

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

 using System.Linq;
using System.Web.Ria;
using System.Web.DomainServices.Providers;
 
namespace MyApp.Web
{
    [EnableClientAccess]
    public class DishViewDomainService : 
            LinqToEntitiesDomainService<DishViewEntities>
    {
        public IQueryable<Restaurant> GetRestaurants()
        {
            return this.ObjectContext.Restaurants
                .Where (r=>r.City != "Raleigh")
                .OrderBy(r=>r.ID);
        }
    }
}
 

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.

 <Grid x:Name="LayoutRoot">
    <data:DataGrid AutoGenerateColumns="True"
                   Name="dataGrid1"
                   Height="456"
                   Width="618" />
</Grid>
 
 

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

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

 var context = new DishViewDomainContext();
dataGrid1.ItemsSource = context.Restaurants;
 
context.Load(context.GetRestaurantsQuery());

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

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”

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.

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.

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

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.

 <riaControls:DomainDataSource AutoLoad="True"
                              Height="0"
                              LoadedData="restaurantDomainDataSource_LoadedData"
                              Name="restaurantDomainDataSource"
                              QueryName="GetRestaurantsQuery"
                              Width="0"
                              Margin="320,240,320,144">
    <riaControls:DomainDataSource.DomainContext>
        <my:DishViewDomainContext />
    </riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>
 
 

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.

 private void restaurantDomainDataSource_LoadedData(object sender, 
    LoadedDataEventArgs e)
{
    if (e.HasError)
    {
        MessageBox.Show(e.Error.ToString(), "Load Error",
            MessageBoxButton.OK);
        e.MarkErrorAsHandled();
    }
}
 

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

 <data:DataGrid AutoGenerateColumns="False"
               ItemsSource="{Binding ElementName=restaurantDomainDataSource, Path=Data}"
               Name="restaurantDataGrid"
               RowDetailsVisibilityMode="VisibleWhenSelected">
    <data:DataGrid.Columns>
        <data:DataGridTemplateColumn x:Name="imagePathColumn"
                                     Header="Image Path"
                                     Width="SizeToHeader">
            <data:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding Path=ImagePath}" />
                </DataTemplate>
            </data:DataGridTemplateColumn.CellTemplate>
        </data:DataGridTemplateColumn>
        <data:DataGridTextColumn x:Name="nameColumn"
                                 Binding="{Binding Path=Name}"
                                 Header="Name"
                                 Width="SizeToHeader" />
        <data:DataGridTextColumn x:Name="addressColumn"
                                 Binding="{Binding Path=Address}"
                                 Header="Address"
                                 Width="SizeToHeader" />
 
 

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.

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

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

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.

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

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

Perfect!

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.

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

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

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.

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.

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

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

Loading…

and once it is loaded…

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:

 public class ImagePathConverter : IValueConverter
{
 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string path = value.ToString();
        path = path.Replace(":", "");
        path = path.Replace("/", "");
        path = path.Replace("\\", "");
        if (path.Length > 100)
            path = path.Substring(0, 100)
        return "http://localhost/Images/" + path
    }
 
 

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.

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!

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

 <navigation:Page.Resources>
    <my1:ImagePathConverter x:Key="ImagePathConverter1" />
</navigation:Page.Resources>
 
 

and

 <data:DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <Image Source="{Binding Path=ImagePath, Converter={StaticResource ImagePathConverter1}}" />
    </DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
 
 

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

 <data:DataGrid.Columns>
    <data:DataGridTemplateColumn Header="">
        <data:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Button Content="+"
                        Style="{StaticResource DetailsButtonStyle}"
                        Click="Button_Click"></Button>
            </DataTemplate>
        </data:DataGridTemplateColumn.CellTemplate>
    </data:DataGridTemplateColumn>
 
 

And to implement the button click handler…

 private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
 {
 
     var res = this.restaurantDomainDataSource.DataView.CurrentItem 
         as Restaurant;
 
     NavigationService.Navigate(new Uri("/Plates?restaurantId="
         + res.ID, UriKind.Relative));
 
 }

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.

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.

 public IQueryable<Plate> GetPlates()
{
    return this.ObjectContext.Plates
        .OrderBy(p => p.Name);
}
 
 

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

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.

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

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

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

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.

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

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

 protected override void OnNavigatedTo(NavigationEventArgs e)
{
    plateDomainDataSource.QueryParameters.Add(
    new System.Windows.Data.Parameter()
    {
        ParameterName = "resId",
        Value = NavigationContext.QueryString["restaurantId"]
    });
}
 
 

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

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 ;-)

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.

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.

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

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

And again, for you Xaml heads… this created:

 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

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

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…

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

Run it…

That looks great!

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

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.

 public void UpdatePlate(Plate currentPlate)
{
    currentPlate.NumberUpdates++;
 
    var orginal = this.ChangeSet.GetOriginal(currentPlate);
 
    if (orginal.Price != currentPlate.Price)
    {
        currentPlate.Price += 1; // add 1 dollar fee for changing price
    }
 
    this.ObjectContext
        .AttachAsModified(currentPlate, orginal);
}
 
 

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.

Then write some codebehind..

 private void button1_Click(object sender, RoutedEventArgs e)
{
    this.plateDomainDataSource.SubmitChanges();
}
 
 

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.

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

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.

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.

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.

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

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

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

 public class PlateValidationRules
{
    public static ValidationResult IsDescriptionValid(string description)
    {
        if (description != null && description.Split().Length < 5)
        {
            var vr = new ValidationResult("Valid descriptions must have 5 or more words.");
            return vr;
        }
 
        return ValidationResult.Success;
    }
 
 

Then to wire this up to the description property…

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

Then running the app, we see all our validations…

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.

 [EnableClientAccess]
[RequiresAuthentication] 
public class DishViewDomainService : 
        LinqToEntitiesDomainService<DishViewEntities>
{
 
 
 

Then when you run the application..

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…

And now we get our data…

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.

 <?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
 
    <profile>
      <properties>
        <add name="FriendlyName" />
        <add name="BackgroundColor"/>
      </properties>
    </profile>
 
 

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

 public partial class User : UserBase
{
    public string FriendlyName { get; set; }
    public string BackgroundColor { get; set; }
}
 
 

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.

Drag and drop that onto the form..

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

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.

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

Next we put a Submit button.

 private void button1_Click(object sender, System.Windows.RoutedEventArgs e)
{
    var context = WebContext.Current.Authentication;
 
    this.userDomainDataSource.SubmitChanges();
    userDomainDataSource.SubmittedChanges += (s, ev) =>
    {
        if (!context.IsBusy) context.LoadUser();
    };
}
 
 

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

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

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!

Welcome to WCF RIA Services Beta!

BradA — Wed, 18 Nov 2009 16:57:43 GMT

Today at PDC09, Scott Guthrie Announced the beta of WCF RIA Services. As you may know RIA Services is a set of end-to-end experiences that makes it as easy to build Silverlight based n-tier applications as it is to build traditional 2 tier apps. I am very excited about this release as it represents a lot of great feedback we have heard from many of you.

A few goodies in this release based on your feedback

You told us you wanted to get up and running with the UI quicker, so we enabled the “DataSources” window that allows you to drag and drop “tables” exposed by your Domain Service onto the form and get meaningful UI to start with. No more guessing about the Xaml syntax for databinding, or incantation for layout, etc.

You told us error handling was not intuitive\consistent with the rest of the framework, so we we simplified error handing both on the server and client. This will help errors get noticed quicker at development time so they don’t sneak into production
You told us you wanted Inheritance support from the Data Model to just flow through the Domain Service to the client, so we gave it to you, works exactly as you’d expect.
You told us you didn’t always want to expose DAL types to the client, but rather a custom “presentation model” where you can customize the shape of the entities, so we gave it to you.. and in a complete way where we handle all the update and error cases.
You told us you wanted the fastest possible communication channel between the client and the server, so we gave an optimized binary channel by default!
You told us it was a pain to install so we integrated the RIA Services installer into the Silverlight 4 installer making it very easy to get started. We also created a “server only” installer to use on your production boxes.
You told us real world data models use a lot of Compositional hierarchy (Order->OrderDetails) so we have improved the handling of this scenario by making it more built in.
You told us you wanted GAC *and* bin deployment. So we gave it to you. By default RIA Services look for our server assemblies in the GAC as this is the most secure and efficient model, but just like ASP.NET MVC, you can simply select “copy local” in your VS project and those assemblies work fine bin deployed.
You told us you really liked the easy on ramp with the Business Application Template, but that you wanted it to be more complete. So we added globalization support, user state example, persisted sign in, etc.
You told us you wanted to go live today (and many of you already have) so we are providing .NET Framework 3.5\Visual Studio 2008\Silverlight 3 based bits that are ready for you to go live on today! We hope that this release will be a bridge to you that will make it easier for you to (eventually, when you are ready) move to our finally RTM bits which will be on .NET Framework 4, Visual Studio 2010 and Silverlight 4.
You gave us a LOT of other feedback as well, some of which will come in V1, and some will have to wait until the next releases, but please keep it coming.

WCF: What’s in a Name?

Many of you will notice the slight change in the branding around RIA Services. RIA Services is now part of the WCF family (as is ADO.NET Data Services, which is now WCF Data Services). This branding change is a direct result of some significant work we are releasing in this beta and it hopefully makes it very clear that we have one technology base for doing services on the .NET platform and that is WCF.

Our driving principle with using WCF has been “All the power and none of the complexity”. That is we wanted to enable all the power that WCF brings (for example, the binary end-point, data contract serialization, all the extensibility points, fully management support with the AppFabric we announced yesterday). But none of the complexity. Just look at the web.config file… there is no tedious config to get right.. there is no fragile contract interface and implementation class to keep in sync, none of the deployment headache around configuration. This is still the RIA Services model where you can expect a deep simplicity across development, deployment and maintenance. We accomplish this by creating a custom service host at runtime based on how you define your DomainService.

I am also very excited to get OData support into RIA Services. OData is the protocol from “Astoria” that is already widely used in products like Sharepoint and PowerPivot. Look for more details on that in future.

Check out Henrik Frystyk Nielsen’s talk Developing REST Applications with the .NET Framework which will cover how WCF Data Services and WCF RIA Services work together.

Call to Action

1. Please install Visual Studio 2010 and Silverlight 4 (this includes RIA Services)

2. Build something cool and tell us about it!

3. Send in your feedback.. we want to hear what rocked, and what needs more polish

http://silverlight.net/riaservices/ is Live!

BradA — Sun, 08 Nov 2009 02:03:03 GMT

We have been working for a while to get a community site together where we can aggregate all the great buzz, resources and discussions about .NET RIA Services. We hope you enjoy the content we already have up there and help us get more good stuff up there.

http://silverlight.net/riaservices/

We Need Your Feedback on the Documentation

BradA — Fri, 30 Oct 2009 16:49:25 GMT

The doc teams are looking for your feedback on the .NET Framework and Visual Studio docs. Help us improve the developer documentation by taking the Visual Studio and .NET Framework Content Survey. This survey will give us a better understanding of the type of applications you are developing as well as how you use Help and how we can improve it. The survey takes only 10 minutes, and we really appreciate your feedback! Feel free to forward the survey link.

Lightweight Linq Parser

BradA — Wed, 28 Oct 2009 19:28:30 GMT

Jason Allor, dev manager for my team, recently posted about a cool lightweight LINQ parser. The idea was to make it much easier to create a LINQ provider over any arbitrary data source (a web service, custom business objects, etc). This makes it much easier to get all the sorting, paging, filtering benefits of RIA Services for any arbitrary data store.

Check it out, and be sure to subscribe to Jason’s blog as I expect he will have more goodies coming in the future!

LinqLite

Index for Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update

BradA — Tue, 27 Oct 2009 15:46:21 GMT

Thanks to all of you who asked… I had to take a sick day today, so this was nice mindless work to get done. Hope you enjoy it!

Part 1: Navigation Basics

Part 2: Rich Data Query

Part 3: Authentication

Part 4: SEO, Export to Excel and Out of Browser

Part 5: Astoria, Add Service Reference and WinForms

Part 6: Data Transfer Objects (DTOs)

Part 7: ADO.NET Data Services Based Data Store

Part 8: WCF Based Data Source

Part 9: POCO and Authentication Provider

Part 10: LinqToSql

Part 11: The Client-Only World

Part 12: DataSet

Part 13: The New Class Library Project

Part 14: Visual Basic (VB) and WPF Support

Part 15: ASP.NET MVC

Part 16: Exposing a WCF Service

Part 17: Evolving an Application

Part 18: Custom Linq Provider

Part 19: ASP.NET Dynamic Data

Part 20: NHibernate

Part 21: Hierarchical Data

Part 22: Separate Solution Files

Part 23: Azure

Part 24: Stored Procedures

Part 25: ViewModel

Part 26: Authentication and Personalization

Comments about Adding…

Summary

Mozilla and Microsoft work together on WPF\ClickOnce plugins

BradA — Wed, 21 Oct 2009 19:01:47 GMT

Recently some friends mentioned that they saw Firefox had block-listed some Microsoft WPF\ClickOnce add-ons. As Mike Shaver (VP Engineering for the Mozilla) noted in his blog post, this action is the result of Mozilla and Microsoft working together to protect customers in relation to Security Update MS09-054.

I think it is very important for Microsoft and Mozilla to collaborate so actively to help protect customers… in this case we all agreed it made sense to add the Microsoft add-in to the block-list. We also heard clearly that many customers, especially enterprise customers are relying on this add-on for their daily work. As such Mozilla and Microsoft are working together to give these customers the best possible experience. Like Mike mentioned, as we learned more about MS09-054, we felt mutually good about re-enabling the clickonce addon and as this security fix hits market saturation, we expect to feel comfortable with re-enabling the WPF add-on as well.

We've heard loud and clear from customers how we need to work better with Mozilla around how our plug-ins and add-ons interact with Firefox. And I can promise you that our group will continue to collaborate with Mozilla to more proactively notify them of the effect of updates in the future to help ensure customers have interoperable solutions for their business needs.

I’d like to thank Mike and his team at Mozilla for their great work on this issue and look forward to working with them in the future.

RIA Services Blog Posts – Now in French!

BradA — Fri, 16 Oct 2009 05:21:44 GMT

Thanks to Yannick Aristidi we are getting many of the RIA Services posts from my series translated into French!

Thanks Yannick, i hope there are many more to come!

Enjoy!

PDC 2009 – I can’t wait!

BradA — Wed, 14 Oct 2009 17:01:08 GMT

Things are really starting to heat up around here as we get ready for the PDC. Just this week I have talked to folks on Silverlight, Visual Studio, Azure, ASP.NET, .NET RIA Services, MEF that all have very cool new stuff to talk about at the PDC.

We just recently announced the Scott Guthrie will be giving one of the keynotes, so you can be sure that will be fun.. You can bet Scott will be talking about the latest from ASP.NET, Silverlight, the .NET Framework and Visual Studio!

I will also be there to talk about building business application in Silverlight… no rotating images or dancing videos in this talk, it will be all about saving you and your end user’s time by taking advantage of the latest in Silverlight, .NET RIA Services and Visual Studio!

Hope to see you there, but there will also be lots of good content on line if you can’t make it..

Find out more information here: http://microsoftpdc.com/

When I have talked to developers in the past about coming to PDC, one of the things has been convincing their boss that it is worth the time and money.. I’d love to hear any success stories you have had. How have you sold the PDC to your boss? what works?

Video Posted for Belgium Visual Studio User’s Group: 10 Years of Framework Design Guidelines

BradA — Mon, 12 Oct 2009 00:34:55 GMT

As a nice follow up from my Belgium Visual Studio User’s Group: 10 Years of Framework Design Guidelines talk, I saw that they just posted the video (slides+audio).

Enjoy!

Oh, and i must include the shameless plug… Framework Design Guidelines: Conventions, Idioms, and Patterns for Reusable .NET Libraries (2nd Edition)

Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 26: Authentication and Personalization

BradA — Tue, 06 Oct 2009 03:04:34 GMT

The data we work with in business application is valuable. We need to protect the data.. sometimes by keeping up with exactly who accesses and updates what data when and other times we need to actively prevent data from being accessed expected by trust parties.

The web is increasingly becoming a personal place – applications often “know about you” enabling users to having customized settings that work everywhere the apps works.

In this example, I will take our ever popular SuperEmployees application and augment it to show more details on the authentication and personalization.

You can see the full series here.

The demo requires (all 100% free and always free):

download the full demo files

Basic Authentication

Let’s start by looking at how we ensure that only authenticated users can access access the data and keep a very simple log of who access the data.

Starting with the original example, let’s look at adding authentication to the GetSuperEmployees() method on the DomainService in the server project.

  [RequiresAuthentication]
public IQueryable<SuperEmployee> GetSuperEmployees()
{
 

Once we use the RequiresAuthentication attribute, the system will ensure that only calls from authenticated users make it through. That means we can do some very simple such as logging who is accessing the data and when:

  [RequiresAuthentication]
public IQueryable<SuperEmployee> GetSuperEmployees()
{
    File.AppendAllText(@"C:\users\brada\desktop\userslog.txt",
        String.Format("{0}: {1} {2}", DateTime.Now,
        ServiceContext.User.Identity.Name, Environment.NewLine));
 

(check out a package such as Log4net for a complete solution for logging).

Now when we run the application, no results are returned.

We need to log in to see some results… Luckily the Business Application Template that ships with .NET RIA Services includes great support for this.

Click on login

Notice here, we could change to use window auth to get integrated NTLM security, either way works fine.

Then register now

and we can create a new user directly from the Silverlight client.

Notice if you want to customize the look and feel of any of these dialogs, it is easy to do by looking in the Views\LoginControl.xaml, Views\LoginWindow.xaml.

And if you want to control the backend on how these are implemented, you can by looking in server project under Services\AuthenticationService.cs and UserRegistrationService.cs. By default these go against the ASP.NET Membership and roles system, but you can customize them to do whatever you’d like by simply overriding the methods there.

Now, we just need to react to the logged in event. In this case, I am going to simply reload the data when the user logs in. Lines 10-13 signs up for the logged in event and sets reloads the data, this time, as an authenticated user.

  public Home()
{
    InitializeComponent();
 
    var context = dds.DomainContext as SuperEmployeeDomainContext;
    originFilterBox.ItemsSource = context.Origins;
 
    context.Load(context.GetOriginsQuery());
 
    RiaContext.Current.Authentication.LoggedIn += (s, e) =>
    {
        if (dds != null) dds.Load();
    };
 
}
 

And notice, the client knows who I am:

And the server knows as well.. If you go look at the log file we create in the DomainService we will see:

So, that is cool, but I think we can do a bit better on the client user experience. After all, I get no error whatsoever to tell me I need to log in to see the data.

First, let’s follow best practice and handle the DDS.LoadedData event and simply show any errors that are returned.

  <riaControls:DomainDataSource x:Name="dds" 
        AutoLoad="True"
        QueryName="GetSuperEmployeesQuery"
        LoadedData="dds_LoadedData"
        LoadSize="20">
 

Then the implementation is very simple:

  private void dds_LoadedData(object sender, LoadedDataEventArgs e)
{  
    if (e.Error != null)
    {
        var win = new ErrorWindow(e.Error);
        win.Show();
    }
}
 

Now, when we run this app, we get this error:

That is helpful, maybe for a developer, but for an end user, maybe we want something more explicit.

The first step is to not even make the request if the user is not authenticated. We know that on the client, so this is very easy to do.

First, let’s sign up for the DDS.DataLoading event to capture the load before it happens.

  <riaControls:DomainDataSource x:Name="dds" 
        AutoLoad="True"
        QueryName="GetSuperEmployeesQuery"
        LoadedData="dds_LoadedData"
        LoadingData="dds_LoadingData"
        LoadSize="20">
 

then we will simple cancel the load if the user is not authenticated.

  private void dds_LoadingData(object sender, LoadingDataEventArgs e)
{
   e.Cancel = !RiaContext.Current.User.IsAuthenticated;
}
 

Now, let’s provide an alternate way to tell the user they need to log on. We simply add some text and make it visible only when the user is not authenticated.

  <TextBlock Text="Data is only available to authenticated users" Foreground="Red"
           DataContext="{StaticResource RiaContext}"
           Visibility="{Binding Path=User.IsAuthenticated, Converter={StaticResource VisibilityConverter}}">
</TextBlock>
 

The implementation of the value convert is pretty simple.

  public class VisibilityConverter : IValueConverter
{
    public object Convert(
        object value,
        Type targetType,
        object parameter,
        CultureInfo culture)
    {
        bool visibility = (bool)value;
        return visibility ? Visibility.Collapsed : Visibility.Visible;
    }
 
    public object ConvertBack(
        object value,
        Type targetType,
        object parameter,
        CultureInfo culture)
    {
        Visibility visibility = (Visibility)value;
        return (visibility != Visibility.Visible);
    }
}
 

Now, when we run this, we get a nice UX:

Then when we log in, it looks nice.

We can even make it a bit better by giving users an easy to to log in from here:

  <TextBlock Text="Data is only available to authenticated users.  Please click here to log in." Foreground="Red"
           DataContext="{StaticResource RiaContext}"
           Visibility="{Binding Path=User.IsAuthenticated, Converter={StaticResource VisibilityConverter}}"
           MouseLeftButtonUp="TextBlock_MouseLeftButtonUp">
</TextBlock>
 

  private void TextBlock_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    new LoginWindow().Show();
}
 

What we showed in this section is how easy it is to require authentication for data and how to create a great user experience for this on the client.

Personalization

Now that we have the basics of authentication down, let’s see how we can provide a bit more of a personalized experience. For many applications, uses spend a huge amount of time in the application, we want them to feel comfortable and in control of their experience. For the first part of this, let’s create a user setting for the background color of the application. Each user can have a different value and it should follow them no mater what machine they run the application on.

Let’s start be defining a profile property in the web.config file.

  <profile enabled="true" >
  <properties>
    <add name="PageBackgroundColor"  defaultValue="White"/>
  </properties>
</profile>
 

Then we can make this strongly typed by adding it to the AuthenticationService.cs file on the server.

  public class User : UserBase
{
    public string PageBackgroundColor { get; set; }
}
 

Now we can simply access this on the client. First let’s define a page to set this value. in MyFirstPage.xaml… let’s add some UI:

  <StackPanel Orientation="Horizontal" >
    <TextBlock Text="Enter background color: "/>
    <TextBox x:Name="colorTextBox" KeyDown="colorTextBox_KeyDown" Width="100" />
    <Button Content="Save" Click="Button_Click" />
</StackPanel>
<TextBlock x:Name="saveStatus"/>
 

We can handle the save button click as follows..

  private void Button_Click(object sender, RoutedEventArgs e)
{
    string colorString = this.colorTextBox.Text.Trim().ToLower();
    colorString = colorString.Substring(0, 1).ToUpper() + colorString.Substring(1, colorString.Length - 1);
    RiaContext.Current.User.PageBackgroundColor = colorString;
    this.saveStatus.Text = "setting saving..";
    RiaContext.Current.Authentication.SaveUser((o) =>
                { this.saveStatus.Text = "setting saved"; },
      null);
}
 
private void colorTextBox_KeyDown(object sender, KeyEventArgs e)
{
    this.saveStatus.Text = "";
}
 

Notice in lines 3-4 we are normalizing the string name of the color so that it is “xaml compliant”..
Then in line 5 we are setting the strongly typed User.PageBackgroundColor property.
Then in lines 6-9 we are simply giving some UI hints as we save this value back to the server.

Of course this will only work if the user is logged in first, so this time, let’s be proactice and encourage the user to log in when they hit the page for the first time.

  protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (!RiaContext.Current.User.IsAuthenticated)
    {
        new LoginWindow().Show();
    }
}
 

The last step here is the honor this value when it is set. That turns out to be pretty easy in this case. Just go to MainPage.Xaml and databind the LayoutRoot’s backgroun color to this value.

  <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}"
      DataContext="{StaticResource RiaContext}"
      Background="{Binding Path=User.PageBackgroundColor}">
 

then when we log in…

And if we change the color to blue…

And notice the color change effects the whole app.

And if I hit the app from a different machine, on a different browser, my setting still carries forward… We start off not logged in we get the default:

but when we log in… our settings show up.

Now this is a user specific setting, so if I create a new user “Glenn” and set his background color to pink

that doesn’t effect the background color for Darb…

OK, background color is fun and all, but what might be even more useful is to store some state on how I last left the application. This ensures that as I access the application from over time, the context of my work is preserved.

So, let’s add a few more fields to our profile..

  <profile enabled="true" >
  <properties>
    <add name="PageBackgroundColor"  defaultValue="White"/>
    <add name="SortOrder"  type="Int32" defaultValue="0"/>
    <add name="SortProperty"  defaultValue="Name"/>
    <add name="OriginFilter"  defaultValue=""/>
  </properties>
</profile>
 

then update the User class to make this strongly typed.

  public class User : UserBase
{
    public string PageBackgroundColor { get; set; }
    public int SortOrder { get; set; }
    public string SortProperty { get; set; }
    public string OriginFilter { get; set; }
}
 

We need to set the UI based on the user’s settings.

  void LoadUserState()
{
    var user = RiaContext.Current.User;
    if (user.OriginFilter != null)
        originFilterBox.Text = user.OriginFilter;
    else
        originFilterBox.Text = string.Empty;
 
    if (user.SortProperty != null)
    {
        dds.SortDescriptors.Add(new SortDescriptor(user.SortProperty,
                                (SortDirection)user.SortOrder));
    }
}
 

And we need to call that when the page is navigated to…

  protected override void OnNavigatedTo(NavigationEventArgs e)
{
    LoadUserState();
 

and when the user logs on.

  RiaContext.Current.Authentication.LoggedIn += (s, e) =>
{
    User user = RiaContext.Current.User;
    if (dds != null)
    {
        dds.Load();
        LoadUserState();
    }
};
 

Next we need to store the values back to the server at the right time. This SaveUserState method plucks the right values out of the UI, and saves them the server if the values have changed.

  string lastSave;
void SaveUserState()
{
    User user = RiaContext.Current.User;
    if (!user.IsAuthenticated) return;
 
    var order = dds.SortDescriptors.LastOrDefault();
    if (order != null)
    {
        user.SortProperty = order.PropertyPath.Value.ToString();
        user.SortOrder = (int)order.Direction;
    }
    user.OriginFilter = this.originFilterBox.Text;
 
    if (lastSave != user.SortProperty + user.SortOrder + user.OriginFilter)
    {
         RiaContext.Current.Authentication.SaveUser();
         lastSave = user.SortProperty + user.SortOrder + user.OriginFilter;
    }
 
}
 

We need to call this method when the user navigates away.

  protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    SaveUserState();
}
 

and, periodically we check to see if we need to save the changes back to the server. So we set this up in the forms constructor..

  Timer = new DispatcherTimer();
Timer.Interval = TimeSpan.FromSeconds(10);
Timer.Tick += (o, e) => SaveUserState();
Timer.Start();
 

Now, when we run it.. setup some sort order and a filter

then log out

log back in (from a different machine) and we see it is back just where we left off.

What we saw in this section what how to personalize the user experience based on the user preferences.

Admin UI

In this last section, let’s look at how to build out an admin UI.. What we want to do is provide a page that allows Admins to see all the users and edit their profile settings.

First, let’s go into the AuthenticationService and add some custom methods to return all the users. We should be sure that only users in the Admin role can access this service.

      [EnableClientAccess]
    public class AuthenticationService : AuthenticationBase<User>
    {
 
        [RequiresRoles("Admin")]
        public IEnumerable<User> GetAllUsers()
        {
            return Membership.GetAllUsers().Cast<MembershipUser>().Select(mu => this.GetUserForMembershipUser(mu));
        }
 
        private User GetUserForMembershipUser(MembershipUser membershipUser)
        {
            return this.GetAuthenticatedUser(
                new GenericPrincipal(new GenericIdentity(membershipUser.UserName), new string[0]));
        }
 

Now, lets add some Silverlight UI to consume this. We will create a new page called “Admin”. The first thing we want to do is to prompt the user to log in if they are not already logged in as a user in the admin role.

  protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (!RiaContext.Current.User.Roles.Contains("Admin"))
    {
        new LoginWindow().Show();
        RiaContext.Current.Authentication.LoggedIn += (s, ev) =>
        {
            if (dds != null) dds.Load();
        };
    }
}
 

Next, we define a DomainDataSource for accessing the AuthenticationService

  <riaControls:DomainDataSource x:Name="dds" 
        AutoLoad="True"
        QueryName="GetAllUsersQuery"
        LoadSize="20">
 
    <riaControls:DomainDataSource.DomainContext>
        <App:AuthenticationContext/>
    </riaControls:DomainDataSource.DomainContext>
 
</riaControls:DomainDataSource>
 

then we define some simple UI for working with the data..

  <activity:Activity IsActive="{Binding IsBusy, ElementName=dds}">
    <StackPanel>
        <dataControls:DataForm x:Name="dataForm1" 
                               Height="393" Width="331"
           VerticalAlignment="Top"       
           Header="User Data"
           ItemsSource="{Binding Data, ElementName=dds}"                     
           HorizontalAlignment="Left" >
        </dataControls:DataForm>
 
        <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
            <Button Content="Submit" Width="105" Height="28"
              Click="SubmitButton_Click"    />
 
        </StackPanel>
 
    </StackPanel>
</activity:Activity>
 

Now, we run it.. log in but it doesn’t give us any data… why?

Well, the user we created is not an Admin. To make them a Admin, go to the Web Admin tool and add them to the “Admin” role.

Select “Security”

Then under Roles, Add a new role for “Admin”

and under Users, “Manager User”… here you can easily add your user to the role.

Now when I log on and go to the Admin page, I can access the all the user’s settings.

What we saw in this section was how to build an admin UI for your applications.

I hope you found this to be a helpful walkthrough of the authentication and personalization support in RIA Services. Again, you can download the full demo files or check out the full series here.

Enjoy.

Portugal ReMix Silverlight 3 and .NET RIA Services

BradA — Fri, 02 Oct 2009 17:51:00 GMT

ReMix in Lisbon, Portugal was a fabulous was to end my ReMix tour. They keynote (as much as I could understand of it) was a lot of fun. They did the Developer\designer egg shtick, but with a real egg!

My this point, I have really hit my stride with the the Silverlight 3 overview I used a this Silverlight 3 deck and did some fun demos:

IIS Smooth streaming
The Beatles Rockband site (recently site of the day on FWA site of the day)
Silverlight 3 Control Toolkit Samples
Silverlight SEO
Silverlight 3 Navigation Application Themes
Slidentity

In the next session, I did was on .NET RIA Services.. You can find the demo I did http://bit.ly/4tmJA3 and the full series. Here is the diagram we used to walk through the options..

Well.. it is a bit sad to be ending my European Tour, but I have had a great time and learned a lot from the great people I meet along the way.

Austria ReMix Silverlight 3 and .NET RIA Services

BradA — Thu, 01 Oct 2009 17:10:03 GMT

ReMix in Vienna, Austria was really great. The attendees were very engaged and the venue was quite nice.

Simon Guest gave the keynote and did a very nice job of bring together SketchFlow, .NET RIA Services and Sql Azure.

I had the opportunity give the Silverlight 3 overview today and again I had fun doing it. I used a this Silverlight 3 deck and did some fun demos:

IIS Smooth streaming
The Beatles Rockband site (recently site of the day on FWA site of the day)
Silverlight 3 Control Toolkit Samples
Silverlight SEO
Silverlight 3 Navigation Application Themes
Slidentity

After lunch, I did was on .NET RIA Services.. You can find the demo i did http://bit.ly/4tmJA3 and the full series.

On to Portugal!

Helsinki ReMix Silverlight 3 and .NET RIA Services

BradA — Wed, 30 Sep 2009 14:37:10 GMT

I had a great time at ReMix in Helsinki.

I had a chance to give the Silverlight 3 overview today and it was a lot of fun. I used a this Silverlight 3 deck and did some fun demos:

IIS Smooth streaming
The Beatles Rockband site (recently site of the day on FWA site of the day)
Silverlight 3 Control Toolkit Samples
Silverlight SEO
Silverlight 3 Navigation Application Themes
Slidentity

The next session I did was on .NET RIA Services.. You can find the demo i did http://bit.ly/4tmJA3 and the full series.

Belgium ReMix and Architect Forum

BradA — Wed, 30 Sep 2009 01:07:00 GMT

I had a great time at ReMix and the Architect Forum in Belgium. I had a chance to cover build an application end-to-end with Silverlight 3 and RIA Services which was basically the this application . At the Architect Forum I had a chance to talk in more depth about the general application pattern we are thinking about for RIA applications. I shameless stole some slides from Nikhil Kothari for this one.

Check out out the slides (direct link to slides)
Check out the completed demo.