Brad Abrams : Mix09

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!

Western European ReMix Tour 2009

BradA — Wed, 02 Sep 2009 17:20:52 GMT

I was lucky enough to be asked to go on a brief western European ReMix tour. Our goal with these events is to bring the best of Mix 09 (and some new stuff) closer to where some of the best developers and designers in the world live.

A few of my co-workers are going to be heading out on the tour as well including: Ux expert Arturo Toledo, Adam Kinney of expression fame and architect extraordinaire Simon Guest. So you don’t want to miss this.

Here is as much of my schedule as I know today… If you are in the area, please try to join me!

Monday 28 September(Brussels)

Visual Studio User Group 18:00 – 10 Years of Framework Design Guidelines
Check out the details: http://visug.be/Eventdetails/tabid/95/EventId/16/Default.aspx

Tuesday 29^th September (Brussels)

ReMix Brussels: http://www.microsoft.com/belux/remix09/#agenda

11-12: What’s new in SL3

13-14: Building Amazing Business Apps with Silverlight 3 and .NET RIA Services

Arch Forum Brussels: http://www.microsoft.com/belux/msdn/terra_lite/events/2009-09-29_ArchitectForum/ArchitectForum.html

14:50-16:00 Business Apps

Wednesday 30^th September (Finland)

ReMix Finland: http://www.microsoft.com/finland/remix/

11-12: What’s new in Silverlight 3

13-14: Building Amazing Business Apps with Silverlight 3 and .NET RIA Services

Thursday 1^st October (Vienna, Austria)

ReMix: Vienna, Austria: http://www.microsoft.com/austria/remix/development.aspx

10:45-11:45: What’s new in SL3

12:45-13:45 Building Amazing Business Apps with Silverlight 3 and .NET RIA Services

Friday 2^nd October (Portugal)

ReMix: Portugal http://www.microsoft.com/portugal/remix/index.aspx

Check out the other great worldwide ReMix events… Hopefully one is in your area: http://visitmix.com/worldwide/

Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 4: SEO, Export to Excel and Out of Browser

BradA — Tue, 14 Jul 2009 23:02:00 GMT

You can watch the original video of the full session

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

VS2008 SP1 (Which includes Sql Express 2008)
Silverlight 3 RTM
.NET RIA Services July '09 Preview

Also, download the full demo files and check out the running application.

Today, we will talk about Different views of our application logic.

Different Views

Now, let’s take take a look at putting different views on this same application. One of the key elements to supporting different views is deeplinking. Let’s look at adding that to this application.

First, we need to add a textbox to display the deeplink for each of our super employees.

<TextBlock Text="PermaLink:"></TextBlock>

<TextBox x:Name="PermalinkTextBox" Width="400" Height="25" TextWrapping="NoWrap" Foreground="#FFB4B4B4" />

And just wire this up in code behind..

private void dataGrid1_SelectionChanged(object sender, SelectionChangedEventArgs e)

    var emp = dataGrid1.SelectedItem as SuperEmployee;

    if (emp != null)

        PermalinkTextBox.Text = Application.Current.Host.Source.ToString().Replace("ClientBin/MyApp.xap", "") +

            "#/Home?EmpId=" + emp.EmployeeID;

Now we need to make the page smart enough to know about this deep link..

protected override void OnNavigatedTo(NavigationEventArgs e)

    var qs = NavigationContext.QueryString;

    if (qs.ContainsKey("EmpId"))

        dds.FilterDescriptors.Add(

            new FilterDescriptor("EmployeeID",

                FilterOperator.IsEqualTo, qs["EmpId"]));

Now, run it… cut and paste this url into a browser brings up exactly this record.

OK, now that we have a deeplink, what can we do with it? Well, you can send the link around in email, IM and in blogs.

But what if you wanted the search engines to be able to find all the items in your site? It turns out there is a standard format for this called a sitemap (http://sitemap.org). Check out http://amazon.com/robots.txt for an example in the real world.

To add this to our application, say File\New Item in the Server Project and select the “Search Sitemap”.

This added a robots.txt and a sitemap.aspx. Let’s look at customizing the sitemap.aspx file. Notice we are using a new ASP.NET datasource control… that is designed to work with the DomainService class. This gives us server access to the same application logic from Silverlight and ASP.NET.

<asp:DomainDataSource runat="server" ID="SitemapDataSource"

    DomainServiceTypeName="MyApp.Web.SuperEmployeeDomainService"

    SelectMethod="GetSuperEmployees" />

<url>

    <loc><%= new Uri(this.Request.Url, this.ResolveUrl("Default.aspx"))+ "?EmpId="  %><%# HttpUtility.UrlEncode(Eval("EmployeeID").ToString()) %></loc>

    <lastmod><%# (Eval("LastEdit") as DateTime?).GetValueOrDefault().ToString("yyyy-MM-dd")%></lastmod>

</url>

One last tweak to enable the server side of the app to access the employee ID.. in default.aspx.cs add:

protected void Page_Load(object sender, EventArgs e)

    string empId = Request.QueryString["EmpId"];

    var deepLink = "/Home?EmpId=" + empId;

    if (empId != null)

        Response.Write("<script type=text/javascript>window.location.hash='#" + deepLink + "';</script>");

Now run it…

and the sitemap…

Cut and pasting the URL brings open that item.

OK… that works great. Now the search engine can find every entity in our application. But what will the search engine find when it gets there? Search engines are great at parsing html, but dynamic content like we are seeing in this site or in rich ajax sites are a lot harder for search engines to deal with.

The art of addressing this is called SEO (Search Engine Optimization). Let’s go and apply SEO principles to our application, open up BusinessApplicationTestPage.aspx Because we have modeled our application logic in a domain service class it is very easy to add a standards based HTML view. Just add this code into the object tag in default.aspx..

<form id="form1" runat="server" style="height:100%">

             <asp:DomainDataSource runat="server" ID="DetailsDataSource"

                       DomainServiceTypeName="MyApp.Web.SuperEmployeeDomainService"

                       SelectMethod="GetSuperEmployee">

              <SelectParameters>

                  <asp:QueryStringParameter  Name="employeeID" Type="Int32" Querystringfield="EmpId" />

              </SelectParameters>

          </asp:DomainDataSource>

         <asp:ListView ID="EmployeeDetails" runat="server"  DataSourceID="DetailsDataSource" >

            <LayoutTemplate>

              <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>

            </LayoutTemplate>

            <ItemTemplate>

               <h1><a href="<%# Eval("EmployeeID")%>" > <%# Eval("Name")%> </a>  </h1>

                 <table>

                 <tr> <td><b>Name:</b> <%# Eval("Name")%> </td> </tr>

                 <tr> <td><b>Publisher:</b> <%# Eval("Publishers")%> </td></tr>

                 <tr> <td><b>Gender:</b> <%# Eval("Gender")%></td> </tr>

                 <tr> <td><b>Origin:</b> <%# Eval("Origin")%></td> </tr>

                 <tr> <td><b>Issues:</b> <%# Eval("Issues")%></td> </tr>

                 <tr> <td><b>Sites: </b><%# Eval("Sites")%></td> </tr>

              </table>

            </ItemTemplate>

         </asp:ListView>

We need add a GetSuperEmployee domain method to support this code.. so back to our SuperEmployeeDomainService and add:

        public SuperEmployee GetSuperEmployee(int employeeID)

            return this.Context.SuperEmployeeSet

                       .Where(emp => emp.EmployeeID == employeeID)

                       .FirstOrDefault();

Now run it… Disable Silverlight in the browser because hey, search engines don’t have silverlight installed.

Now hit refresh on a deep link…

Just for kicks… let’s run this application in lynx…

Pretty cool, huh? Now the search engine (or anyone without Silverlight) can access the data.

But does it work? well, try these searches:

Super employee placement Alfred (Yahoo)

Super Employee Placement Alfred (some other guy)

OK, that was a server view, let’s try a different client view.. Let’s export this data to the worlds best data manipulation tool – excel!

Add the template file to the project to the client root.

Then add an “export to excel” button:

<Button Content="Export to Excel"

        Width="105" Height="28"

        Margin="5,0,0,0" HorizontalAlignment="Left"

        Click="ExportToExcel_Click" ></Button>

And write out the excel file… Notice this is all safe access as the Silverlight runtime proxies the user selection of the location to write the file. The developer can not get direct access to the file location.

private void ExportToExcel_Click(object sender, RoutedEventArgs e)

    var context = dds.DomainContext as SuperEmployeeDomainContext;

    var s = Application.GetResourceStream(new Uri("excelTemplate.txt", UriKind.Relative));

    var dialog = new SaveFileDialog();

    dialog.DefaultExt = "*.xml";

    dialog.Filter = "Excel Xml (*.xml)|*.xml|All files (*.*)|*.*";

    if (dialog.ShowDialog() == false) return;

    using (var sw = new StreamWriter(dialog.OpenFile()))

        var sr = new StreamReader(s.Stream);

        while (!sr.EndOfStream)

            var line = sr.ReadLine();

            if (line == "***") break;

            sw.WriteLine(line);

        foreach (var emp in context.SuperEmployees)

            sw.WriteLine("<Row>");

            sw.WriteLine("<Cell><Data ss:Type=\"String\">{0}</Data></Cell>", emp.Name);

            sw.WriteLine("<Cell><Data ss:Type=\"String\">{0}</Data></Cell>", emp.Origin);

            sw.WriteLine("<Cell><Data ss:Type=\"String\">{0}</Data></Cell>", emp.Publishers);

            sw.WriteLine("<Cell><Data ss:Type=\"Number\">{0}</Data></Cell>", emp.Issues);

            sw.WriteLine("</Row>");

        while (!sr.EndOfStream)

            sw.WriteLine(sr.ReadLine());

Run it…

This creates an excel file on the user selected location.

Opening it and doing a bit of formatting…

And the final view… out of browser.

Select properties on the client application

Edit the settings..

Run the application, right click and select “Install….”

Put a link on the desktop..

and run it!

Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 1: Navigation Basics

BradA — Fri, 10 Jul 2009 20:06:00 GMT

With Silverlight 3 shipping and a brand new update to .NET RIA Services I thought I would update the example from my Mix09 talk “building business applications with Silverlight 3”.

You can watch the original video of the full session

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

VS2008 SP1 (Which includes Sql Express 2008)
Silverlight 3 RTM
.NET RIA Services July '09 Preview (optional for this part of the demo)

Also, download the full demo files and check out the running application.

Today, we will talk about Professional Feel..

Professional Feel

Business applications need to have a professional, but how many of us have a full time designer on our staff? I’d guess very few. That is why we invested in a great out of box experience. The Silverlight Navigation Application and Silverlight Business Application (which adds login\logout support) project starts with a clean, prescriptive application structure, a nice look and feel, and is very easy to customize, even for a developer.

File\New Project – Silverlight Business Applications

Hit F5

Change from Mix: Notice the cool new, clean, light default template.

This is a full frame Silverlight Application. Notice the navigation links (home and about).

Notice the forward and back in the browser works…

And there is a deep link, that navigates you back to exactly this point in the application. You can cut and paste it into a blog entry, an email or an IM to your co-works and they will be taken to exactly the same point in the app.

… no mater what browser they are using.

Now, even the best developers sometimes make errors in applications. Links that are invalid or exceptions that get thrown. The Navigation Application Template makes it super easy to deal with those. Type in a bad URL and look at the experience (be sure to run in retail).

Now, let’s go in and look a bit of customization.

First, let’s add a new page.

Right click on Views in the client project and Add New Item, Select Silverlight Page.

When the page opens, add some simple text..

<TextBlock Text="Hello World!"></TextBlock>

Now, let’s wire up the this page to the main navigation menu. In MainPage.xaml, add a new button following the same format as the ones that are there.

<Rectangle Style="{StaticResource DividerStyle}"/>

<HyperlinkButton Style="{StaticResource LinkStyle}"

                 NavigateUri="/MyFirstPage"

                 TargetName="ContentFrame"

                 Content="my page"/>

Now, while we are in there, let’s customize the error window template… Open Views\ErrorWindow.xaml. You can change the format, log the error back to the server or customize the text on the error message the end user sees.

<TextBlock x:Name="IntroductoryText" Grid.Row="0" Margin="0"

           Text="An unknown error was encountered. Please contact ScottGu anytime day or night (123) 332-9801 for more information."

           Width="398" TextWrapping="Wrap" HorizontalAlignment="Left"/>

Now, let’s update the branding for this site. First in MainPage.xaml, change the name from “Application Name” to something custom to your app.

<TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}"

                   Text="Super Employee Placement Service"/>

Finally, let’s go in and change the colors to match your companies branding. Open up the Styles.xaml file in Assets folder. While all the styling is there for you to customize, we made a few of the common properties easy to find and change even for a developer.

Fit F5 and see what we have….

As you can see, my color choices aren’t great, so it is good that we are shipping a whole library of app.xaml files for you to choice from. If you just drag one of the light, clean ones.. hit F5..

You can get all the latest themes from here.. they work just great from VS as well as expression!

http://timheuer.com/blog/archive/2009/07/09/free-silverlight-application-themes-silverlight-3.aspx

Aurora (also available for RIA Services Template):

Frosted Cinnamon Toast:

Lime Shocker (also available for RIA Services Template):

Pinky (also available for RIA Services Template):

Retro:

Skyline:

Subdued:

Silverlight 3: Navigation Application Template Extra themes posted!

BradA — Wed, 01 Apr 2009 09:15:00 GMT

Have you tried out the new Silverlight 3 Navigation Application? Our plan with this as to make it much easier to folks to get started building a RIA application with Silverlight. You can find it in the File\New Project dialog.

The features it offers are:

1. An attractive, professional default theme
2. A clear application structure (MainPage, App.xaml, Views directory)
3. Error window for exceptions and bad navigations
4. Clear, easy to follow customization points.

If you want to understand more about it check out the first part of my Mix talk.

We pushed hard to get this into the beta in order to get your feedback on it. Traditional Microsoft has only shipped the “blank” project template so this is a bit of change for us. Do you find it useful? Have you started an application with it yet? What role do you see it playing in your development? Will you be able to use it with few customizations or do you expect to primarily use the blank template? What sorts of things would you like to see us add?

Corrina Black, the lead designer for Silverlight, has posted a bit about her talk at Mix and included a couple of new looks for the template. To use them you simple copy the App.Xaml for them into your project, change the x:Class to match your project name and hit F5. I’d love to see what sort of cool customizations you can do! If you send me links to your work I will blog as many as I can.

Frosted Cinnamon Toast (get the App.xaml)

Lime Shocker (get the app.xaml)

Enjoy!

Presentation tip: They Remember the Mistakes more than the Polish

BradA — Fri, 27 Mar 2009 19:39:00 GMT

One of the reasons I love going to Mix is getting a chance to watch really world-class technical speakers. As I watched the keynote and a few sessions this year one theme really stood out to me: The audience seems to remember how the speaker handles their mistakes\crashes more than the content of their presentations! Obviously it this is a pretty hard thing for a speaker to prepare for. If you can prepaid for it, then I’d suggest avoiding it all together ;-). So how do you prepare for the unprepareable? It seems to me it is all about attitude.

For me, my learning on this started when I arrived a day early for Mix. I had a chance to talk to one of my favorite speaking coach Richard Klees. If you have not had this guy rip you to shreds, you need to! I had the good fortunate to have an error pop up during my talk with Richard – FireFox popped up and wanted to update the browser in the middle of my presentation. I was clearly annoyed and frustrated by this interruption in my carefully planned flow. Richard called me on it and strongly suggested I work on my attitude.

I partially understood his advice, but I didn’t really internalize it until the keynote when Bill Buxton could not get his HP Touch Smart to respond.

Notice how he handled this – so much grace.. I had the good fortunate of seeing this demo during a dry run the night before, so I can say with some confidence Bill got more applause with his quick wit and good humor than if he had actually been able to do the demo.

So that got me really thinking.. I immediately went back to Richard's advice and it started to make more sense. Later in the keynote I was very attentively watching ScottGu’s coding demo.. My team had worked with him a lot of getting this demo just right and crisp.. and being pre-release software I was a little nervous of what bugs we might see so I was a little on the edge of my seat during this demo. And Of course he did hit an issue, but notice how gracefully he handled it?

Scott had been through this demo 100s of times in the previous 24-48 hours and trust me, he never saw this issue.. yet he handled it perfectly! He came across as more real and human. Again, I thought back to Richard's advice, I was really starting to understand…

Just a few hours later, I would get a chance to put into practice my new found wisdom. I was doing 75 mins worth of demo on preview software on to of a random daily build of Win7. Let’s see how I handled it..

So maybe not as good as the masters, but way better than I would have done without the active learning going on. It is all about the presenters attitude and state of mind.

Have you seen some great presentation failures? How about great recoveries?

Silverlight 3 and SEO

BradA — Thu, 26 Mar 2009 07:53:00 GMT

All great RIA applications have a meaningful client and server component to them. Supporting SEO, or Search Engine Optimization in a RIA is an excellent example of using the client and server components. It doesn’t mater how cool your applications are, if potential users can’t find your site via their search engine of choice (Google, Yahoo, Live, etc) then you are out of luck. So it is important to plan for that upfront. It is reasonably simple to do this for static text, even in a RIA application, but most of the really interesting information in many applications is dynamically loaded and data-driven. Luckily .NET RIA Services has some SEO support built right in that can be used with RIA applications including Silverlight and Ajax!

In my Mix 09 talk I showed a very simple way to add SEO to a data-driven Silverlight application. Now Warren (the developer who owns this feature) writes a bit more about it and provides a very cool sample.

Search Engine Optimization for Silverlight Applications (the basic idea)

Search Engine Optimization for Silverlight Applications – Part 2 (a working example)

You can also use your search engine of choice to find “Silverlight Store Wireless Keyboard 7000 ” as of this writing Warren’s sample application is the number one hit! If you have Silverlight 3 installed, you will get a nice RIA experience, otherwise you get a reasonable HTML-based experience.

Has anyone tried out this solution with .NET RIA Services yet? I’d love to hear your feedback and thoughts on this model.

thanks!

ScottGu’s Mix09 Silverlight for Business Applications Demo

BradA — Wed, 25 Mar 2009 07:32:31 GMT

Some folks that could not make it to Mix have asked about Scott’s coding demo this year. You can watch the full keynote to find it or, I clipped out just the coding bit..

As you can see we have added a lot of great support to Silverlight with Silverlight 3’s , Navigation, DataGrid, DataPager, DataForm, Charting (all from the Silverlight toolkit) and the .NET RIA Services support for great N-Tier data access.

Enjoy!

.NET Rocks on RIA Services and Business apps in Silverlight

BradA — Fri, 20 Mar 2009 20:57:33 GMT

A couple of weeks ago Nikhil and I did a .NET Rocks show on .NET RIA Services and generally building business applications with Silverlight.

Abrams and Kothari Talk MIX09!

Silverlight 3: Activity Control

BradA — Fri, 20 Mar 2009 19:45:57 GMT

In my Mix09 talk I used a brand new Activity control that we are working on. I had a number of folks ask me for the control (which is not yet in the Silverlight toolkit). Check out David’s post for the control, the source and more information: Displaying background activity in a Silverlight RIA application

Mix09: Silverlight for Business Apps and .NET RIA Services talks posted

BradA — Fri, 20 Mar 2009 19:27:49 GMT

The amazing tech folks here at Mix09 have already gotten a good number of talks published.

.NET RIA Services Talk

Building Business Apps with SL3

Silverlight 3 Overview, Silverlight Out Of Browser

See the full session list: http://sessions.visitmix.com/MIX09/

Mix09: Building Amazing Business Applications with Silverlight 3

BradA — Wed, 18 Mar 2009 03:48:00 GMT

Today at Mix09, I finished my talk on building business applications with Silverlight 3. The full video for the talk will be up shortly, but I wanted to go ahead and post the source code for the demo and a full demo walk through.

Update: Check out the video of the full session

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

Also, download the full demo files and check out the running application.

There are a few must-haves for a business applications.. this demo walks through each of these.

Business Application Must-Haves

    1. Professional Feel
    2. Rich Data Query
    3. Validating Data Update
    4. Authentication
    5. Support Different Views

Professional Feel

Business applications need to have a professional, but how many of us have a full time designer on our staff? I’d guess very few. That is why we invested in a great out of box experience. The Silverlight Navigation Application project starts with a clean, prescriptive application structure, a nice look and feel, and is very easy to customize, even for a developer.

File\New Project – Silverlight Navigation Application

Hit F5

This is a full frame Silverlight Application. Notice the navigation links (home and about).

Notice the forward and back in the browser works…

… no mater what browser they are using.

Now, let’s go in and look a bit of customization.

First, let’s add a new page.

Right click on Views in the client project and Add New Item, Select Silverlight Page.

When the page opens, add some simple text..

<TextBlock Text="Hello World!"></TextBlock>

In MainPage.xaml, add a new button following the same format as the ones that are there.

<Button Click="NavButton_Click" 
         Tag="/Views/MyFirstPage.xaml" 
         Content="my first" 
         Style="{StaticResource PageLinkStyle}"/>

Now, let’s update the branding for this site. First in MainPage.xaml, change the name from “your.application.name” to something custom to your app.

Finally, let’s go in and change the colors to match your companies branding. While all the styling is there for you to customize, we made a few of the common properties easy to find and change even for a developer.

Fit F5 and see what we have….

As you can see, my color choices aren’t great, so it is good that we are shipping a whole library of app.xaml files for you to choice from. If you just drag one of the light, clean ones.. hit F5..

2. Rich Data Query

Next up, let’s talk about data query. Nearly every business application deals with data. Let’s look at how to do this with .NET RIA Services March ‘09 Preview. For starters, let’s build an Entity Framework model for our data. For this walk through, we will start simply…

Now, how are we going to access this data from the SL client? Well, traditionally many business applications have started out as 2-tier apps. That has a number of problems around scaling and flexibility… and more to the point it just doesn’t work with the Silverlight\web client architecture.

So developers are thrust into the n-tier world. .NET RIA Services make it very easy to create scalable, flexible n-tier services that builds on WCF and ADO.NET Data Services.

These .NET RIA Services model your UI-tier application logic and encapsulate your access to varies data sources from traditional relational data to POCO (plain old CLR objects) to cloud services such as Azure, S3, etc via REST, etc. One of the great thing about this is that you can move from an on premises Sql Server to an Azure hosted data services without having to change any of your UI logic.

Let’s look at how easy it is to create these .NET RIA Services.

Right click on the server project and select the new Domain Service class

In the wizard, select your data source. Notice here we could have choosen to use a Linq2Sql class, a POCO class, etc, etc.

In the NorthwindDomainService.cs class we have stubs for all the CRUD method for accessing your data. You of course should go in and customize these for your domain. For the next few steps we are going to use GetSuperEmployees(), so I have customized it a bit.

        public IQueryable<SuperEmployee> GetSuperEmployees()
        {
            return this.Context.SuperEmployeeSet
                .Where(emp=>emp.Issues>100)
                .OrderBy(emp=>emp.EmployeeID);
        }

Now, let’s switch the client side. Be sure to build the solution so you can access it from the client directly. These project are linked because we selected the “ASP.NET enable” in the new project wizard.

In HomePage.Xaml add

<datagrid:DataGrid x:Name="dataGrid1" Height="500">
</datagrid:DataGrid>

And in the code behind add MyApp.Web… notice this is interesting as MyApp.Web is defined on the server… you can now access the client proxy for the server DomainServices locally

   1:   var context = new NorthwindDomainContext();

   2:   dataGrid1.ItemsSource = context.SuperEmployees;

   3:   context.LoadSuperEmployees();

In line 1, we create our NorthwindDomainContext.. this is the client proxy for NorthwindDomainService. Notice the naming convention here…

In line 2, we are databinding the grid to the SuperEmployees.. then in line 3 we are loading the SuperEmployees, that class the GetSuperEmployees() method we defined on the server. Notice this is all async of course, but we didn’t have to deal with the complexities of the async world.

The result! We get all our entries back, but in the web world,don’t we want to do paging and server side sorting and filtering? Let’s look at how to do that.

First, remove the code we just added to codebehind.

Then, to replace that, let’s add a DomainDataSource.

   1:  <dds:DomainDataSource x:Name="dds"

   2:     LoadMethodName="LoadSuperEmployees"

   3:     AutoLoad="True"

   4:     LoadSize="20">

   5:     <dds:DomainDataSource.DomainContext>

   6:        <App:NorthwindDomainContext></App:NorthwindDomainContext>

   7:     </dds:DomainDataSource.DomainContext>

8:

   9:  </dds:DomainDataSource>

Notice in line 2, we are calling that LoadSuperEmployees method from the DomainContext specified in line 6.

In line 4, notice we are setting the LoadSize to 20.. that means we are going to download data in batches of 20 at a time.

   1:              <activity:Activity IsActive="{Binding IsBusy, ElementName=dds}"

   2:                             VerticalAlignment="Top" HorizontalAlignment="Left"

   3:                             Width="900" Margin="10,5,10,0">

   4:                  <StackPanel Width="900">

5:

   6:                      <datagrid:DataGrid x:Name="dataGrid1" Height="300"

   7:                                 ItemsSource="{Binding Data, ElementName=dds}"/>

8:

   9:                      <dataControls:DataPager PageSize="10"

  10:                      Source="{Binding Data, ElementName=dds}" />

11:

  12:                  </StackPanel>

  13:              </activity:Activity>

In line 6, there is a datagrid, that is bound to the DDS.Data property (in line 7). Then we add a DataPager in line 9, that is bound to the same datasource. this gives us the paging UI. Finally we wrap the whole thing in an ActivityControl to show progress. Notice in line 9 we are setting the display to 10 records at a time.

The cool thing is that the ActivityControl, the DataGrid and the DataPager can all be used with any datasource such as data from WCF service, REST service, etc.

Hit F5, and you see..

Notice we are loading 20 records at a time, but showing only 10. So advancing one page is client only, but advancing again we get back to the server and load the next 20. Notice this all works well with sorting as well. And the cool thing is where is the code to handle all of this? Did i write in on the server or the client? neither. Just with the magic of linq, things compose nicely and it i just falls out.

I can early add grouping..

             <dds:DomainDataSource.GroupDescriptors>
                <data:GroupDescriptor PropertyPath="Publishers" />
            </dds:DomainDataSource.GroupDescriptors>

Let’s add filtering… First add a label and a textbox..

            <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
                <TextBlock Text="Origin: "></TextBlock>
                <TextBox x:Name="originFilterBox" Width="75" Height="20"></TextBox>
            </StackPanel>

and then these filter box to our DomainDataSource….

                <dds:DomainDataSource.FilterDescriptors>
                    <data:FilterDescriptorCollection>
                        <data:FilterDescriptor PropertyPath="Origin"
                                               Operator="StartsWith">
                            <data:ControlParameter PropertyName="Text" 
                                               RefreshEventName="TextChanged"
                                               ControlName="originFilterBox">
                            </data:ControlParameter>
                        </data:FilterDescriptor>
                    </data:FilterDescriptorCollection>
                </dds:DomainDataSource.FilterDescriptors>

When we hit F5, we get a filter box, and as we type in it we do a server side filtering of the results.

Now, suppose we wanted to make that a autocomplete box rather an a simple text box. The first thing we’d have to do is get all the options. Notice we have to get those from the server (they client might not have them all). To do this we add a method to our DomainService.

    public class Origin
    {
        public Origin() { }
        [Key]
        public string Name { get; set; }
        public int Count { get; set; }
    }

and the method that returns the Origins…

       public IQueryable<Origin> GetOrigins()
        {
            var q = (from emp in Context.SuperEmployeeSet
                    select emp.Origin).Distinct()
                    .Select(name => new Origin {
                        Name = name,
                        Count = Context.SuperEmployeeSet.Count
                            (emp => emp.Origin.Trim() == name.Trim())
                    });
        q = q.Where(emp => emp.Name != null);
            return q;
        }

Now we need to add the autocomplete control from the Silverlight 3 SDK. Replace the textbox with this:

<input:AutoCompleteBox  x:Name="originFilterBox" Width="75" Height="30"
    ValueMemberBinding="{Binding Name}" 
    ItemTemplate="{StaticResource OriginsDataTemplate}" >
</input:AutoCompleteBox>

Then we just need to add a little bit of code behind to load it up.

            var context = dds.DomainContext as NorthwindDomainContext;
            originFilterBox.ItemsSource = context.Origins;
            context.LoadOrigins();

Hitting F5 gives us this…

Validating Data Update

Now – that was certainly some rich ways to view data, but business apps need to update data as well. Let’s look at how to do that. First replace all the xaml below the DDS with this… it gives us a nice master-details view.

   1:              <StackPanel Orientation="Horizontal" Margin="10,5,10,0" >

   2:                  <activity:Activity IsActive="{Binding IsBusy, ElementName=dds}">

   3:                  <StackPanel>

   4:                      <StackPanel Orientation="Horizontal" Margin="0,0,0,10">

   5:                          <TextBlock Text="Origin: "></TextBlock>

6:

   7:                              <input:AutoCompleteBox  x:Name="originFilterBox" Width="75" Height="30"

   8:                                                      ValueMemberBinding="{Binding Name}"

   9:                                                      ItemTemplate="{StaticResource OriginsDataTemplate}" >

  10:                              </input:AutoCompleteBox>

  11:                      </StackPanel>

12:

  13:                      <datagrid:DataGrid x:Name="dataGrid1" Width="290" Height="410"

  14:                                             HorizontalAlignment="Left" HorizontalScrollBarVisibility="Disabled"

  15:                                         ItemsSource="{Binding Data, ElementName=dds}"

  16:                                         AutoGenerateColumns="False" >

  17:                          <datagrid:DataGrid.Columns>

  18:                              <datagrid:DataGridTextColumn Header="Name" Binding="{Binding Name}" />

  19:                              <datagrid:DataGridTextColumn Header="Employee ID"  Binding="{Binding EmployeeID}" />

  20:                              <datagrid:DataGridTextColumn Header="Origin"  Binding="{Binding Origin}" />

  21:                          </datagrid:DataGrid.Columns>

  22:                      </datagrid:DataGrid>

23:

  24:                      <dataControls:DataPager PageSize="13" Width="290"

  25:                                              HorizontalAlignment="Left"

  26:                                              Source="{Binding Data, ElementName=dds}" />

27:

  28:                      <StackPanel Orientation="Horizontal">

  29:                          <Button Content="Submit" Width="100" Height="30"

  30:                              Margin="0,20,20,0" HorizontalAlignment="Left"

  31:                             >

  32:                          </Button>

  33:                      </StackPanel>

  34:                  </StackPanel>

  35:                  </activity:Activity>

36:

  37:                  <StackPanel Margin="40,40,0,0" >

  38:                      <dataControls:DataForm x:Name="dataForm1" Height="375" Width="500"

  39:                                 AutoEdit="True" AutoCommit="True"

  40:                                 VerticalAlignment="Top"

  41:                                 CommandButtonsVisibility="None"

  42:                                 Header="Product Details"

  43:                                 CurrentItem="{Binding ElementName=dataGrid1, Path=SelectedItem}">

  44:                      </dataControls:DataForm>

45:

46:

  47:                  </StackPanel>

  48:              </StackPanel>

  49:          </StackPanel>

50:

Through line 35, this is pretty much the same as what we had.

Then in line 38, we add a DataForm control that gives us some nice way to view and edit a particular entity.

Hit F5

This looks like the traditional master-details scenario.

Notice as we change items they are marked as “Dirty” meaning they need to be submitted back to the server. You can make edits to many items, unmake some edits and the dirty marker goes away.

Now we need to wire up the submit button.

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            dataForm1.CommitItemEdit();
            dds.SubmitChanges();
        }

We first need to commit the item we are currently editing, then we just submit changes. This batches up the diffs and sends them back the server. and our Update method is called. Notice the dirty bit goes away.

Now, that is cool, but what about Data Validation? Well, “for free” you get type level validation (if the filed is typed as an int you and you enter a string you get an error).

Now let’s see if we can add a bit more. We do that by editing the NorthwindDomainService.metadata.cs on the server. It is important to do it on the server so that the system does all the validations are done once for a great UX experience and then again on the server for data integrity. By the time your Update method is called on your DomainService you can be sure that all the validations have been done.

Here are some of the validations we can apply..

            [Bindable(true, BindingDirection.OneWay)]
            public int EmployeeID;

            [RegularExpression("^(?:m|M|male|Male|f|F|female|Female)$", ErrorMessage = "Gender must be 'Male' or 'Female'")]
            public string Gender;


            [Range(0, 10000, 
                ErrorMessage = "Issues must be between 0 and 1000")]
            public Nullable<int> Issues;

            [Required]
            [StringLength(100)]
            public string Name;

Just rebuilding and running the app gives us great validation in the UI and in the middle tier.

Notice how I can navigate between the errors and input focus moves to the next one.

That was updating data, what about adding new data?

To do that, let’s explorer the new Silverlight 3 ChildWindow.

Right click on Views and add new Item Child Window

Notice it already has a OK and Cancel buttons. We just need to add a DataForm. Because we are bound to the same model, the DataForm will pick up all the same features as the update one we just looked at.

        <dataControls:DataForm x:Name="newEmployeeForm"
                               Width="500" Height="280" 
                               AutoEdit="True" 
                               AutoCommit="True"
                               VerticalAlignment="Top"       
                               CommandButtonsVisibility="None"
                               Header="New Employee">
        </dataControls:DataForm>

Now, in code behind we need to write this up by adding a class level field..

public SuperEmployee NewEmployee {get; set;}

..initializing the instance in the constructor

            NewEmployee = new SuperEmployee();
            NewEmployee.LastEdit = DateTime.Now.Date;
            this.newEmployeeForm.CurrentItem = NewEmployee;

..handling the OK button

        private void OKButton_Click(object sender, RoutedEventArgs e)
        {
            newEmployeeForm.CommitItemEdit();
            this.DialogResult = true;
        }

Great… now to see this thing we need to write up a button to show it.

<Button Content="Add New" Width="100" Height="30"
        Margin="0,20,0,0" HorizontalAlignment="Left"
        Click="AddNew_Click" ></Button>

        private void AddNew_Click(object sender, RoutedEventArgs e)
        {
            var addNewWindow = new AddNewWindow();
            addNewWindow.Closed += addNewWindow_Closed;
            addNewWindow.Show();

        }
        void addNewWindow_Closed(object sender, EventArgs e)
        {
        }

Now let’s commit this change locally.

            var win = sender as AddNewWindow;
            var context = dds.DomainContext as NorthwindDomainContext;
            if (win.DialogResult == true)
            {
                context.SuperEmployees.Add(win.NewEmployee);
            }

From this, the Submit button will send this change to the server.

Authentication

Business applications often access very important data. It is important that you can audit, restrict and control access to your data. Let’s look at how to use .NET RIA Services and SL3 to do that.

To enable authentication, let’s add a DomainService to the server project. File New Domain Service and this time select an “empty domain service class”.

using System.Web.Ria;
using System.Web.Ria.ApplicationServices;


namespace MyApp.Web
{
    [EnableClientAccess]
    public class AuthenticationService : AuthenticationBase<User>
    {
    }

    public class User : UserBase
    {

    }
}

Now, in the client project in App.xaml add a reference to this service

<Application.Services>
    <appsvc:WebUserService x:Name="UserService" />
</Application.Services>

Now, that this is a service in the application, any page can access it. Let’s access it from the MainPage.xml by adding a Welcome message.

 <TextBlock Text="welcome " Style="{StaticResource WelcomeTextStyle}"/>
 <TextBlock Text="{Binding Path=User.Name}" Style="{StaticResource WelcomeTextStyle}"/>

and one line of codebehind to databind to this AuthService.

LayoutRoot.DataContext = new UserContext();

Notice we are using NTLM (windows Auth) so my credentials are automatically hooked up. We of course support basic auth out of the box and we have a fully pluggable system based on asp.net profile system.

Now if I wanted to make sure that only authenticated users could access the data all I need to do is add an attribute to the domain service class.

        [RequiresAuthentication]
        public IQueryable<SuperEmployee> GetSuperEmployees()

We could have equally easily restrict this to only users in a role.

Update 4-2009: if you are having troubles with this be sure to verify that you either::

1. Call UserService.Current.LoadUser();
This will load the User at LoadUserCompleted.

2. Modify Default.aspx. This will load the User state automatically at startup.

Add <%@ Register Assembly="System.Web.Ria" Namespace="System.Web.Ria" TagPrefix="ria" %>
Rename <asp:Silverlight “ to <ria:SilverlightApplication “

Different Views

First, we need to add a textbox to display the deeplink for each of our super employees.

<TextBlock Text="PermaLink:"></TextBlock>
<TextBox x:Name="PermalinkTextBox" Width="400" Height="25" TextWrapping="NoWrap" Foreground="#FFB4B4B4" />

And just wire this up in code behind..

        private void dataGrid1_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            var emp = dataGrid1.SelectedItem as SuperEmployee;
            if (emp != null)
            {
                PermalinkTextBox.Text = Application.Current.Host.Source.ToString().Replace("ClientBin/MyApp.xap", "") +
                    "#/Views/HomePage.xaml;EmpId/" + emp.EmployeeID;
            }    
        }

Now we need to make the page smart enough to know about this deep link..

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            var qs = NavigationContext.QueryString;

            if (qs.ContainsKey("EmpId"))
            {
                dds.FilterDescriptors.Add(
                    new FilterDescriptor("EmployeeID",
                        FilterOperator.IsEqualTo, qs["EmpId"]));
            } 
        }

Now, run it… cut and paste this url into a browser brings up exactly this record.

OK, now that we have a deeplink, what can we do with it? Well, you can send the link around in email, IM and in blogs. But what if you wanted the search engines to be able to find all the items in your site? It turns out there is a standard format for this called a sitemap (http://sitemap.org). Check out http://amazon.com/robots.txt for an example in the real world.

To add this to our application, say File\New Item in the Server Project and select the “Search Sitemap”.

This added a robots.txt and a sitemap.aspx. Let’s look at customizing the sitemap.aspx file. Notice we are using a new ASP.NET datasource control… that is designed to work with our DomainService. This gives us server access to the same application logic.

<asp:DomainDataSource runat="server" ID="SitemapDataSource" 
    DomainServiceTypeName="MyApp.Web.NorthwindDomainService" 
    SelectMethod="GetSuperEmployees" />

---

<url>
   <loc><%= this.Request.Url.GetComponents(UriComponents.SchemeAndServer, UriFormat.Unescaped) %>/?EmpId=<%# Eval("EmployeeID") %></loc>
    <lastmod><%# Eval("LastEdit")%></lastmod>
</url>

Now run it…

and the sitemap…

Cut and pasting the URL brings open that item.

The art of addressing this is called SEO (Search Engine Optimization). Let’s go and apply SEO principles to our application, open up default.aspx and notice we are using a asp:SeoSilverlightApplication which has nice support for rendering alternate content. Because we have modeled our application logic in a domain service class it is very easy to add a standards based HTML view.

          <PluginNotInstalledTemplate>
              <asp:DomainDataSource runat="server" ID="DetailsDataSource" 
                           DomainServiceTypeName="MyApp.Web.NorthwindDomainService" 
                           SelectMethod="GetSuperEmployee">
                  <SelectParameters>
                      <asp:QueryStringParameter  Name="employeeID" Type="Int32" Querystringfield="EmpId" />
                  </SelectParameters>       
              </asp:DomainDataSource>
             <asp:ListView ID="EmployeeDetails" runat="server"  DataSourceID="DetailsDataSource" >
                <LayoutTemplate>                  
                  <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>    
                </LayoutTemplate>
                <ItemTemplate>
                   <h1><a href="<%# Eval("EmployeeID")%>" > <%# Eval("Name")%> </a>  </h1>
                     <table>
                     <tr> <td><b>Name:</b> <%# Eval("Name")%> </td> </tr>
                     <tr> <td><b>Publisher:</b> <%# Eval("Publishers")%> </td></tr>
                     <tr> <td><b>Gender:</b> <%# Eval("Gender")%></td> </tr>
                     <tr> <td><b>Origin:</b> <%# Eval("Origin")%></td> </tr>
                     <tr> <td><b>Issues:</b> <%# Eval("Issues")%></td> </tr>
                     <tr> <td><b>Sites: </b><%# Eval("Sites")%></td> </tr>
                  </table>
                </ItemTemplate>
             </asp:ListView>
           </PluginNotInstalledTemplate>

We need add a GetSuperEmployee domain method to support this code.. so back to our NorthwindDomainService and add:

        public IQueryable<SuperEmployee> GetSuperEmployee(int employeeID)
        {
            return this.Context.SuperEmployeeSet
                .Where(emp => emp.EmployeeID == employeeID);
        }

Now run it… Disable Silverlight in the browser because hey, search engines don’t have silverlight installed.

Now hit refresh on a deep link…

Just for kicks… let’s run this application in lynx…

Pretty cool, huh? Now the search engine (or anyone without Silverlight) can access the data.

But does it work? well, try these searches:

Super employee placement Alfred (Yahoo)

Super Employee Placement Alfred (some other guy)

OK, that was a server view, let’s try a different client view.. Let’s export this data to the worlds best data manipulation tool – excel!

Add the excel icon to view and template file to the project to the client root.

Then add an “export to excel” button:

<Button Width="170" Height="40"
    Margin="10,20,0,0" HorizontalAlignment="Left"
    Click="ExportToExcel_Click" >
       <StackPanel Orientation="Horizontal" >
         <Image Source="excelIcon.png" Height="35" Width="50"></Image>
           <TextBlock Text="Export to Excel" Padding="0,10,0,0"></TextBlock>
       </StackPanel>
 </Button>

var context = dds.DomainContext as NorthwindDomainContext;
StreamResourceInfo s = Application.GetResourceStream(new Uri("excelTemplate.txt", UriKind.Relative));

var dialog = new SaveFileDialog();
dialog.DefaultExt = "*.xml";
dialog.Filter = "Excel Xml (*.xml)|*.xml|All files (*.*)|*.*";

if (dialog.ShowDialog() == false) return;

using (var sw = new StreamWriter(dialog.OpenFile()))
{

var sr = new StreamReader(s.Stream);
while (!sr.EndOfStream)
{
   var line = sr.ReadLine();
   if (line == "***") break;
   sw.WriteLine(line);
}

foreach (var emp in context.SuperEmployees)
{
   sw.WriteLine("<Row>");
   sw.WriteLine("<Cell><Data ss:Type=\"String\">{0}</Data></Cell>", emp.Name);
   sw.WriteLine("<Cell><Data ss:Type=\"String\">{0}</Data></Cell>", emp.Origin);
   sw.WriteLine("<Cell><Data ss:Type=\"String\">{0}</Data></Cell>", emp.Publishers);
   sw.WriteLine("<Cell><Data ss:Type=\"Number\">{0}</Data></Cell>", emp.Issues);
   sw.WriteLine("</Row>");
}
while (!sr.EndOfStream)
{
   sw.WriteLine(sr.ReadLine());
}

Run it…

This creates an excel file on the user selected location.

Opening it and doing a bit of formatting…

And the final view… out of browser.

Open ApplicationManifest.xaml in the client project. Add this xaml to out of browser enable it.

<Deployment.ApplicationIdentity>
   <ApplicationIdentity
          ShortName="Super.Employee.Service"
          Title="Super Employee Placement Servcice">
        <ApplicationIdentity.Blurb>Description  blahh blahh blahh... </ApplicationIdentity.Blurb>
   </ApplicationIdentity>
</Deployment.ApplicationIdentity>

Run the application, right click and select “Install….”

Put a link on the desktop..

and run it!

Wow – that was a ton of stuff.. We have walked thought a few must-haves for a business applications.. this demo walked through each of these..

Business Application Must-Haves

    1. Professional Feel
    2. Rich Data Query
    3. Validating Data Update
    4. Authentication
    5. Support Different Views

You can download the full demo files and check out the running application.

I’d love to have your feedback and thoughts!

The Knowledge Chamber: Silverlight 3 for Great Business Apps

BradA — Tue, 10 Mar 2009 06:05:00 GMT

It was great fun to be interviewed on The Knowledge Chamber by Robert Hess… It certainly brought back the good old times on the .NET Show!

I had a chance to show a sneak-peak at some of the cool new stuff coming in Silverlight 3 for Business Applications. Check out the Video and your voice to the thread!

Brad Abrams - Silverlight 3.0 for Great Business Apps

Some Great New Mix09 Sessions Posted

BradA — Wed, 04 Mar 2009 08:29:00 GMT

We recently got some great new Mix09 sessions posted. Here are a few that I think are cool as they directly relate to what my team is doing.. if you can make to Vegas, please come by.. if you can’t, don’t worry all the sessions will be on line!

In T40F, I am toying with the idea of doing an all-demo-no-slide talk where I walk through end-to-end building a data-centric Silverlight application.. I’d like to show everything from access data out of a data base, to application logic that spans tiers, to UI navigation, data visualizations, validation, sorting, paging, filtering, grouping of data, etc. What do you think?

In T41F, Nikhil will do a deeper dive into the some of the technology that I use in my talk. You will get a good sense for how this really works and what the successful RIA application patterns are for ASP.NET, AJAX and Silverlight. Here is his own post on the subhect.

In C21F, Corrina who is the lead designer for Silverlight will talk about some UX patterns that are common for business applications. Corrina is responsible for the look, feel and overall UX of the controls in SL3 and she will show you the best application patterns to use and why. This is a great talk for both designers as well as developers that want to know how to get the most out of the platform.

In T69M – Ward, from IdeaBlade will show how to fully leverage Silverlight for business applications. He has been working with early bits for a while and has some great ideas to share.

In T15F, Shawn will talk about the really impressive set of controls we have for SL3 and how to use them to build great applications! This is an important talk to go to in order to make sure you have all the tools in your tool belt.

I am also very excited about T47F and T36F as these sessions will highlighted some shared work we have done across the platform to make it much easier to build business applications and services with a common pattern.

See the full Mix 09 Session list..

MIX09-T40F Building Amazing Business Centric Applications with Microsoft Silverlight 3

Wednesday March 18 |2:15 PM-3:30 PM | Lando 4204

By: Brad Abrams Tags: Silverlight

This will be a great Silverlight session, but we won't be able to release any details until after MIX09 Keynotes. Check this abstract after MIX09 Keynotes for a complete session description.

MIX09-T41F Building Data-Driven Applications with Microsoft Silverlight and Microsoft ASP.NET

Wednesday March 18 |4:00 PM-5:15 PM | Lando 4204

By: Nikhil Kothari Tags: Silverlight

This will be a great Silverlight session, but we won't be able to release any details until after MIX09 Keynotes. Check this abstract after MIX09 Keynotes for a complete session description.

MIX09-C21F User Experience Design Patterns for Business Applications with Microsoft Silverlight 3

Thursday March 19 |4:15 PM-5:30 PM | Delfino 4101

By: Corrina Black Tags: Silverlight

Come hear how creating great user experiences for business applications can result in both improved productivity and significant support cost savings. Learn how to use proven user experience patterns in cost effective ways with Silverlight 3, including rich data display, data input and advanced data validation, and application navigation.

MIX09-T69M Microsoft Silverlight Is Ready for Business

Thursday March 19 |4:40 PM-5:00 PM | San Polo 3401

By: Ward Bell Tags: Silverlight

Come learn how to build a Silverlight business application today with the new UI features including DataGrid, DataForm, validation and navigation. Also see an example of how to connect to services using a LINQ enabled, Entity Framework-backed, data management solution.

MIX09-T15F High-Speed RIA Development with the Microsoft Silverlight Toolkit

Friday March 20 |12:30 PM-1:45 PM | San Polo 3504

By: Shawn Oster Tags: Silverlight

Come learn how the Silverlight Toolkit can help jumpstart development of stunning Web experiences, and learn how to use the latest controls to create more immersive, more manageable user experiences.. Using Microsoft Visual Studio and Microsoft Expression Blend, explore advanced debugging and unit testing techniques for building components that work across Silverlight and Windows Presentation Foundation (WPF).

MIX09-T47F Microsoft ASP.NET 4.0 Data Access: Patterns for Success with Web Forms

Friday March 20 |9:00 AM-10:15 AM | Delfino 4001

By: David Ebbo Tags: ASP.NET

Come learn about some cool new data access features for ASP.NET 4.0 Web Forms and beyond. Hear how a new Domain Data Source makes it easy to cleanly change your application's architecture from 2-tier to 3-tier and how a new query block lets you unleash the power of LINQ. Also hear about new Dynamic Data features like richer support for LINQ to Entities as well as how to use the ASP.NET data stack to target Windows Azure.

MIX09-T36F Modeling RESTful Data Services: Present and Future

Friday March 20 |12:30 PM-1:45 PM | Lando 4204

By: Pablo Castro Tags: REST

Learn how use ADO.NET Data Services framework to approach the modeling of application behavior in terms that match the architectural style proposed by REST. Hear how to address common application needs such as authentication and authorization, and hear about the future direction of ADO.NET Data Services framework upcoming features.

Getting Ready for Mix09

BradA — Mon, 19 Jan 2009 03:11:42 GMT

What were you planning to do March 18-20th? If it does not have to do with Vegas and the Web, it might be time to think again!

Mix09 is going to rock... I have had a chance to look at some of the sessions that are in the works (some of them haven't made it to the session list yet) and more importantly the new technology from Silverlight, to ASP.NET, to Visual Studio to Live\MESH work... It is going to be a rocking event.

Teams here at Microsoft are work enormously hard right now to finish up bits that will be given out and talked about for the first time at Mix! If you are a web developers, you should try hard to make it!

See you there!