Brad Abrams

My Last Day at Microsoft

BradA — Tue, 20 Apr 2010 17:51:40 GMT

Wow – I can’t believe it has already been 13 years at Microsoft. I have had a great time here and learned so much from the smart and passionate people I work with as well as the incredible developer community around .NET. But I have decided it is time for me to try something new – so my last day at Microsoft will be Friday, April 23rd .

While I am leaving Microsoft, I continue to have a positive view of the company. No other company has the footprint that Microsoft does on the industry. I am confident that the company will continue to have an impact in the years to come. I will be looking forward to watching the next release of .NET from outside.

Of course, there is never a good time to leave, but I feel a great sense of accomplishment shipping Silverlight 4 and Visual Studio 2010/.NET Framework 4. The technologies I have been most closely involved with have found amazingly good homes. MEF and RIA Services are in the right teams and on the right track long term and I believe those technologies will have great futures.

What I loved most about my time at Microsoft is the opportunity to work with some of the smartest, most passionate people in the industry to ship some great software that customers LOVE. As I have been thinking about this transition, I have reflected on a few of the releases I have been a part of and what I learned in the process. Hopefully you can take these learnings as my last words of wisdom to you.

MS-Travel (later spun off as Expedia ) - My first experience at Microsoft as an intern in Test. I landed the job because I was able to help my future boss debug a VB issue in the interview ;-). I learned what it was to be a PM and I fell in LOVE with it.
VB 5 - I came back the next summer as a PM intern and found my sweet spot – PM in the developer space. I was a PM on the Control Creation Edition of VB 5 and learned the blocking and tackling of consensus building, prioritization and specing!
IE4 and IE4.01 with Win98 - It was so energizing to be involved in the first browser wars. At the time, I think we had IE4, 5 and 6 all going in parallel! As Release PM I learned a ton about shipping: balancing priorities, triaging, war rooms, and working very broadly across teams.
Common Language Runtime (“Lightning”) and overall .NET Framework (“Project 42”). In the 4+ years incubating the first release I got my taste for “doing a V1” and I loved it! We all *knew* we were changing the industry with our work as much as we knew the project could be canceled at any time. After PDC2000, when we came out of the veil of secrecy, I learned about how to listen to customers and got hooked on bringing customer feedback into the product with the DOTNET@DISCUSS.DEVELOP.COM email list. If you were on that email list at the time, you helped shape what become the glasnost of Microsoft that lead to weblogs.asp.net, blogs.msdn.com, and eventually channel 9 and the whole community arm of MS.
.NET Framework 1.1 (“Everett” ) and .NET Framework 2.0 (“Whidbey”) - Between these two releases, I learned about the “V2 trap”. That is, the critical importance of having a clear vision for a release rather than just “make stuff better”. It is so much more valuable to customers, and therefore more satisfying for engineers, to work on “3-big bets” rather than peanut-buttering our efforts over a bunch of small “rounding out” features.
.NET Framework 3.0 with Windows Vista (“WinFX”) – Back to my “V1.0 passions”, with this release we aimed to make .NET the most important programming model for Windows. With broad new technologies, WF, WinFS, WCF and WPF there was a LOT of new stuff. I was asked to bringing this work together to a coherent whole. I learned a TON about how to develop software at scale and what works (and doesn’t) across such a large organization. This experience also gave me much deeper insight into executive decision making and what works (and doesn’t) to get the most effective decisions made.
ASP.NET 3.5, ASP.NET AJAX and ASP.NET MVC – I learned a whole new development area – AJAX and the web. This time lit my passion for the web development area that I continue to believe is a game changer. I learned the value of shipping out of band releases to clearly address customer scenarios as they emerge. I also learned the value of small, lightweight (download size, concept count, etc) frameworks.
Silverlight 2, 3 and now 4 – That rate of maturation of Silverlight has been amazing. From the first release where there was literally no button, to Silverlight 4 where we have a viable line of business platform. Here I learned a lot about how to do small, frequent, incremental releases.
MEF – This technology has a huge potential to change the core patterns the average .NET Developer uses to build their applications. Through this release, I learned two big things: The value of a close customer (eg VS) shaping and guiding requirements and how to work diligently with the community in a very transparent way (shipping source, open license, etc).
WCF RIA Services - The thing I love about RIA Services is that we tackled an end-to-end customer scenario that crossed database, mid-tier, client and tooling to deliver really compelling customer value. While this sort of end-to-end thinking forced us to work very closely with many teams, the results were fantastic! Out of this release I learned the value of focusing on the end-to-end rather than just one small island.

I am deeply grateful for the opportunities I have had at Microsoft in working with such an amazing set of co-workers and vibrant community.

Initially, I am going to take some time off to enjoy the wonderful spring weather in Seattle and visit Legoland with the kids before starting my next endeavor.

While I will not be as deeply involved in the .NET Developer Community – I will be keeping up and enjoying the successes I know you will have. Good luck and have a great time!

I’d love to stay in touch:

Email: BradA42@gmail.com

Blog: http://bradabrams.com

Twitter: @BradA

Facebook: Brad Abrams

Silverlight 4 + RIA Services - Ready for Business: Ajax Endpoint

BradA — Mon, 12 Apr 2010 16:13:00 GMT

Continuing in our series, I wanted to touch on how a RIA Services can be exposed your service in JSON. This is very handy for Ajax clients.

The great thing is that enabling the JSON endpoint is that it requires NO changes whatsoever to the DomainService. All you need to do is enable it is to add the JSON endpoint in web.config

  1:   <system.serviceModel>
  2:     <domainServices>
  3:       <endpoints>
  4:         <add name="JSON"
  5:              type="Microsoft.ServiceModel.DomainServices.Hosting.JsonEndpointFactory, Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  6:         <add name="OData"
  7:              type="System.ServiceModel.DomainServices.Hosting.ODataEndpointFactory, System.ServiceModel.DomainServices.Hosting.OData, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
  8:         <add name="Soap"
  9:              type="Microsoft.ServiceModel.DomainServices.Hosting.SoapXmlEndpointFactory, Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
 10:       </endpoints>
 11:     </domainServices>
 12:

As you can see, this above snippet shows adding the JSON endpoint from the RIA Services toolkit as well as the OData and Soap ones.

You can see the endpoint results navigate to the URL in this format:

http://localhost:21516/BusinessApplication1-web-DishViewDomainService.svc/Json/GetRestaurants

{"GetRestaurantsResult":{"TotalCount":-2,"IncludedResults":[],
"RootResults":[{"Address":"49 Gilbert St.","City":"London",
"ContactName":"Charlotte Cooper","ContactTitle":"Purchasing Manager",
"Fax":"(171) 555-2222","HomePage":"","ID":1,"ImagePath":
"Restaurant_Alinea.jpg","Name":"Alinea - Updated from Ajax",
"Phone":"(171) 555-2222","PostalCode":"EC1 4SD","Region":""},
{"Address":"P.O. Box 78934","City":"New Orleans","ContactName":
"Shelley Burke",
"ContactTitle":"Order

As you can see – some nice looking JSon. Now, to write a very simple Ajax client.

Below is an example query method in the Ajax client

         function query() {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", "BusinessApplication1-web-DishViewDomainService.svc/Json/GetRestaurants", false);
            xmlhttp.send();
            var rawResults = JSON.parse(xmlhttp.responseText);
            var results = rawResults.GetRestaurantsResult.RootResults;
            var entity
            for (var i = 0; i < results.length; i++) 
            {
                entity = results[i];
                document.getElementById('results').innerHTML += ' <br> ' + entity.Name;
            }
           
        }

This is wired up to to a very simple button

        <button type="button" onclick="query()">
            Query</button>

Update is just a bit more tricky… but still basic:


        function update() {
            var operation = {};
            operation.Entity = { "__type": "Restaurant:#BusinessApplication1.Web", "ID": 1, "Name": "Alinea - Updated from Ajax"};
            operation.OriginalEntity = { "__type": "Restaurant:#BusinessApplication1.Web", "ID": 1, "Name": "Alinea" };
            operation.Operation = 3; //update
            var csData = JSON.stringify({ "changeSet": [operation] });
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open('POST', 'BusinessApplication1-web-DishViewDomainService.svc/Json/SubmitChanges', false);
            xmlhttp.setRequestHeader("Content-Type", "application/json");
            xmlhttp.send(csData);
            var results = xmlhttp.responseText;
            document.getElementById('results').innerHTML = results;
        }

In this demo, we showed how to enable the Ajax\JSON client for RIA Services.

Silverlight 4 + RIA Services - Ready for Business: Exposing WCF (SOAP\WSDL) Services

BradA — Mon, 29 Mar 2010 16:31:00 GMT

Continuing in our series, I wanted to touch on how a RIA Services can be exposed as a Soap\WSDL service. This is very useful if you want to enable the exact same business logic\data access logic is available to clients other than Silverlight. For example to a WinForms application or WPF or even a console application. SOAP is a particularly good model for interop with the Java\JEE world as well.

First you need to add a reference to Microsoft.ServiceModel.DomainSerivves.Hosting.EndPoints assembly from the RIA Services toolkit.

Then you need to edit the endpoints section of the domainserivces config in web.config file. Below I am showing the SOAP and OData endpoints enabled.

  <system.serviceModel>

    <domainServices>

      <endpoints>

        <add name="OData"

             type="System.ServiceModel.DomainServices.Hosting.ODataEndpointFactory, System.ServiceModel.DomainServices.Hosting.OData, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

        <add name="Soap"

             type="Microsoft.ServiceModel.DomainServices.Hosting.SoapXmlEndpointFactory, Microsoft.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

      </endpoints>

    </domainServices>

Now, all you have to do is navigate in the browser to this URL:

http://localhost:21516/BusinessApplication1-web-DishViewDomainService.svc

Note the pattern is [namespace]-[typename].svc

And we get the very familiar WCF service debug page.

And if you really want to drill in, here is the full WSDL describing the service.

You are done on the server, now let’s look at how you consume that on the client. For the sake of simplicity, I have created a new Console application. Right click on the project and select Add Services Reference.

  1: var context = new DishViewDomainServiceSoapClient();
  2: var results = context.GetRestaurants();
  3: foreach (var r in results.RootResults)
  4: {
  5:    Console.WriteLine(r.Name);
  6: }
  7:

The code for query is very simple. Line 1 creates the client proxy, line 2 does a synchronous call to the server. Then we simply loop through the results.

Updating the data is a little bit more interesting… I need to create a ChanageSet that I populate with any updates. in this case I am updating just one value. I also need to send the original value back to the server.

  1: var changeSet = new ChangeSetEntry();
  2: var org = new Restaurant();
  3: org.ID = entity.ID;
  4: org.Name = entity.Name;
  5: entity.Name = "Updated:" + entity.Name;
  6: changeSet.Entity = entity;
  7: changeSet.OriginalEntity = org;
  8: changeSet.Operation = DomainOperation.Update;
  9: var updateResults = context.SubmitChanges(new ChangeSetEntry[] { changeSet });
 10:

And you can see the result of running this a couple of times:

For more information, see Deepesh’s post on Configuring your DomainService for a Windows Phone 7 application

For V1.0, this post describes the RIA Services story for WPF applications. While it works, it is clearly not the complete, end-to-end solution RIA Services offers for Silverlight. For example, you may want the full experience: the DataContext, entities with validation, LINQ queries, change tracking, etc. This level of support for WPF is on the roadmap, but will not make V1. But if you like the RIA Services approach, you might consider DevForce from IdeaBlade or CSLA.NET which works for both WPF and Silverlight. The great folks at IdeaBlade have offered me 10 free licenses to give out. If you are interested in one, please let me know.

Silverlight 4 + RIA Services - Ready for Business: Authentication and Personalization

BradA — Fri, 26 Mar 2010 14:32:00 GMT

To continue our series, In real business applications our data is often very valuable and as such we need to know who is accessing what data and control certain data access to only users with privilege. Luckily this is very easy to do with RIA Services. For example, say we want to let only authenticated users access our data in this example. That is as easy to accomplish as adding an attribute, see line 2 below.

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

When we run the application, we now get an error. Clearly you can do a bit better from a user experience angle… but the message is clear enough.

Notice there is a login option, so we can log in…

and even create a new user.

and with a refresh we now get our data

And the application knows who i am on the client and gives me a way to log out.

Now you can also easily interact with the current user on the server. So for example, only return records that they have edited, or, in this case, log every access:

  1:         public IQueryable<Restaurant> GetRestaurants()
  2:         {
  3:             File.AppendAllLines(@"C:\Users\brada\Desktop\log.txt", new string[] {
  4:                 String.Format("{0}:{1}", DateTime.Now,
  5:                 this.ServiceContext.User.Identity.Name)});
  6:             return this.ObjectContext.Restaurants
  7:                 .Where (r=>r.Region != "NC")
  8:                 .OrderBy(r=>r.ID);
  9:         }
 10:

Line 5 is the key one.. we are accessing the current users on the server. This gives us a nice simple log.

3/7/2010 9:42:57 PM:darb
3/7/2010 9:43:05 PM:darb

Now we can also personalize this a bit. Say we want our users to be able to give us a favorite color and we keep track of that on the server and the client, so it works seamlessly from any machine.

First we need to add BackgroundColor to our backing store. I this case I am using ASP.NET profile storage, so I add the right stuff to web.config

Then I need to access this from the Silverlight client, so I add a property to the User instance in the Models\User.cs

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

Finally, we need to access it on the client. In main.xaml add lines 2 and 3..

  1:   <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}"
  2:         Background="{Binding Path=User.BackgroundColor}"
  3:         DataContext="{StaticResource WebContext}">
  4: 
  5:

Run it and we get our great default background color!

Now, that is nice, but it would be even better to give the user a chance to actually edit their settings. So in About.xaml, we use a very similar model as above.

  <Grid x:Name="LayoutRoot"
        DataContext="{StaticResource WebContext}">

and

<sdk:Label Content="Background Color:" />
<TextBox Text="{Binding Path=User.BackgroundColor, Mode=TwoWay}" Height="23" />

Then wire up a save button

        private void button1_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            WebContext.Current.Authentication.SaveUser(false);
        }

And it works!

And what’s better is if you run it from another browser, on another machine, once you log in you get the exact same preferences!

Great Presentation to the Israel Dot Net Developers User Group (IDNDUG)

BradA — Thu, 25 Mar 2010 05:01:22 GMT

I continue to be impressed with the quality of .NET Developers in Israel.. we had a full house last night for a 2+ hour presentation on building business applications with Silverlight and RIA Services. The audience was very engaged and had lots of good, relevant questions which created a really good conversation. Check out the slides and demo.

I started off by demoing the Right-to-Left text support for Hebrew that is baked in as part of Silverlight 4.

Then I started from scratch, with File\New Project and built out a simple data-oriented application.. basically I walked though most of this series.

You can find the completed demo, including the files and code snippets you would need to repeat the demo yourself, which i would be high flattered if you did at your own user’s group or for your development team. You an find the demo steps in the series.

A couple of interesting links:

- We talked about the ViewModel (MvvM) support for RIA Services. I high recommend checking out MIX10 Talk - Slides and Code and View/ViewModel Interaction - Bindings, Commands and Triggers

- We also talked about SEO – here is a good post on it: Silverlight 4 + RIA Services - Ready for Business: Search Engine Optimization (SEO)

- More details on the Silverlight out of browser work check out Tim Heuer’s video Out-of-browser Experiences

- During the break I showed a world map showing hits to my blog in real time from all over the world. This is Stumpler.. it is a VirtualEarth, Silverlight, Azure based service from Brian Hitney. You can add your own blog for free or just watch the hits to mine. I expect to see Israel lighting up more often now ;-)

Thanks to Jackie Goldstein and Guy Burstein for organizing the event and for Jackie and Kim for the unique tour of a Kibbutz – it was great fun!

Program Manager (PM) Tip Index

BradA — Wed, 24 Mar 2010 05:53:00 GMT

I thought it would be worthwhile to produce an index for the (very) occasional series I have on giving tips to PMs at Microsoft.

PM Tip #10: Interview Tips for Landing a Great Program Management Job

PM tip# 11: Information is the Currency of Program Management

PM Tip #14: Great teams have members that defy roles

PM Tip #12: Don't waste keystrokes

PM Tip #21: Sanity Will Prevail

PM Tip # 32: Nothing kills excitement like ambiguity

PM Tip #57: Write the agenda on the board

PM Tip #72 Instant feedback...

PM Tip #73: The "Be More Visible" Sham

PM Tip #78: Reveal your stupidity

Presentation tip: They Remember the Mistakes more than the Polish

Building Consensus

That is a full day's work!

The What and the How

Thoughts on writing reviews...

The Wisdom of Crowds: Rethinking consensus

Maybe one day I will do the other 89 tips ;-)

Silverlight 4 + RIA Services - Ready for Business: Validating Data

BradA — Tue, 23 Mar 2010 17:38:00 GMT

To continue our series let’s look at data validation our business applications. Updating data is great, but when you enable data update you often need to check the data to ensure it is valid. RIA Services as clean, prescriptive pattern for handling this. First let’s look at what you get for free. The value for any field entered has to be valid for the range of that data type. For example, you never need to write code to ensure someone didn’t type is “forty-two” into a textbox bound to an int field. You also get nice looking and well behaved validation exposure in the UI.

Note: if you are not seeing this, ensure that “ValidatesOnExceptions=True” is in the binding expression for the each field

Of course, that sort of validation only goes so far, in real application you need some more extensive validation. And for this validation you absolutely have to check the validation before your business logic is run because you don’t know what client might be sending you the update, in addition, you want to check the validation on the client to give the user a really nice user experience and reduce the number of error-case hits to your server which reduces server load. In traditional models, you need do error checking twice to cover both of these cases. But that is obviously error prone and easy to get out of sync. So RIA Services offers a common model for validation.

The most common cases are covered by a set of custom attributes you apply to your model on the server. These attributes are common across the .NET Framework supported by ASP.NET Dynamic Data, ASP.NET MVC and RIA Services. You can find the full set in System.ComponentModel.DataAnnotations. But to give you a flavor:

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

As you an see from above the validations on the client are handled automatically, but they are also run again on the server BEFORE your Update method is called. This allows you to keep the validation gunk out of your business logic for Update. The other great thing is that these validations will apply in exactly the same way no mater where that entity is used in the UI because they are build into the model. You can of course localize the error messages by passing a resource ID rather than a hard code string. You can also read these validation metadata out of an external config file or database rather than using attributes in the code.

But clearly that doesn’t cover all cases. Many times you need to write some actual procedural code. Let’s consider an example of validating the description to ensure it is really complete. There is no custom attribute for that ;-). So let’s write a bit of C# code. First we need to indicate that the Description field has some custom validation.

[CustomValidation(typeof(PlateValidationRules),
                  "IsDescriptionValid")]
public string Description { get; set; }

Then you can easily create this class and implement the IsDescriptionValid method.

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

Notice in line 1, the signature of the method must return a ValidationResult – this is a class from DataAnnotations that contains information about any validation errors. The method also has to take one parameter that is the same type of the field it is being applied to. You could do it on the entity level to do cross field validation.

Next on line 3, i am implementing some very lame algorithm for determining if the description is valid or not.

On line 5 and 6, I return an error and indicate which field this applies to.

Now, run the application. You will see that we can edit the description and tab off with no error, but if we submit, then we get back an error in exactly the same way as we saw before. Notice I could have sent several entities and each of them could have errors. RIA Services keeps up with each of them (we even give you a list) and as the user edits each one we show some UI like this.

Note, if you see this sort of dialog instead:

It likely means you need to write a handler for SubmitChanges on your DomainDataSource.

<riaControls:DomainDataSource  SubmittedChanges="plateDomainDataSource_SubmittedChanges"

        private void plateDomainDataSource_SubmittedChanges(object sender, SubmittedChangesEventArgs e)
        {
            if (e.HasError &&
                e.EntitiesInError.All(t => t.HasValidationErrors))
            {
                e.MarkErrorAsHandled();
            }
            else
            {
                System.Windows.MessageBox.Show(e.Error.ToString(), "Load Error", System.Windows.MessageBoxButton.OK);
                e.MarkErrorAsHandled();
            }
        }

Now, this is very cool because we have the full power of .NET to write our validation rules. But the down side is that I only get validation once the change is submitted. What I’d really like to do in some cases, is have some write some custom validation logic and have it execute on the server AND the client. Luckily we have the power of .NET on the client and the server so we can use shared code validation. To enable this simply change the name of the file that contains the validation rule to include “.shared.cs” post-fix. This changes causes the RIA Services MSBuild logic to compile the file for the client and the server.

Now the exact same code will run on the client and the server. So if there is a bad description, we no longer have to round-trip to the server to work that out.

Of course, in a real world case you are likely to have both server-only and shared validation rules and RIA Services fully supports that scenario as well. Simply define any shared validation rules in .shared.cs files and any server-only validation rules in another file.

A Great Time at Developer Academy 4 In Israel

BradA — Mon, 22 Mar 2010 12:35:00 GMT

I had a great time today at Developer Academy 4. It was in a beautiful part of Tel Aviv. The weather was great and the food fantastic. They had well over 1,000 paid attendees, so the house was PACKED. Dev Academy’s page on Facebook. Including some pictures of me.

I was very impressed with the high tech community in Israel. Clearly Israel is a hub of hightech.

I did a demo in the keynote where I showed off a few of the cool new features in Silverlight 4.

Update:

You can watch the Israel Developer Academy keynote and my breakout session on RIA Services:

Then I demoed the Silverlight PhotoBooth app to show Webcam support and raw video\image editing capabilities.

Then I showed the HtmlPuzzle application to show off out of browser support and deep integration with HTML as well has flash video

Then I demoed the Silverlight text editor, showing off rich text experiences, printing, right click, etc.

Finally, i ended with showing the Silverlight business application localized to Hebrew with RTL support and some basic RIA Services demo. See my blog post for more information: Silverlight 4 + RIA Services - Ready for Business: Localizing Business Application

I had a great time at Dev Academy 4 and I am looking forward to seeing more of Israel!

Silverlight 4 + RIA Services - Ready for Business: Localizing Business Application

BradA — Mon, 22 Mar 2010 12:32:00 GMT

To continue our series, let’s look at localizing our business applications. In today’s global village, it is often no longer OK to support only one language. Many real world business applications need to support multiple languages. To demonstrate the pattern, let’s look at localizing the Silverlight Business Application Template.

Update (3/28): I added a bit more explanation about setting culture in Visual Studio..

You can download the completed solution.

Here it is in English side-by-side with a localized version (notice the Hebrew is rendered Right-To-Left correctly):

Let’s start by creating a new Silverlight Business Application. Notice there is a server and a client project in the solution. The strings that are needed in both the server and client project are located in the server project and those that are only ever needed in the Silverlight client are in the client project. Let’s start with the server.

In the Resources folder we see two sets of resources. One for the Error messages and another for registration details. These are in a the ResX format which is an Xml file format that has been around for a long time.. there are many localization tools outside of VS that support this format. Here I will show the localization in VS.

One setup step before we get started. You need to explicitly tell Visual Studio what languages are supported in by the Silverlight application. Unfortunately, this is not supported by the VS Project Properties dialog, so you need to edit the Silverlight Applications csproj file directly.

Right click on the Silverlight project and unload

Right click again and select “Edit MyApp.csproj

Then find the SupportedCultures attribute and add the full list of cultures your application supports.

Then right click on the project and re-load project.

Ok, done with the setup, on to the actual localization.

The first step is to create a copy of each of these files with the [Local].resx extension. For example, I created one called “ErrorResources.he.resx”. Here is a full list of cultures codes.

Then open the file in VS and you see a nice editing experience. Simply replace the English text with the translated version.

Below is the translation experience in progress:

Repeat for the RegistrationDataResources.resx file.

Next we need to make these new *.he.resx accessible from the client. First let’s find the client resources directory. Notice the English resources are already linked in here. We need to add the Hebrew ones we just created.

Right click and add an Existing Item

Then browser to the ErrorResources.he.resx file in the web project.

Then select add as Link

Repeat for the other localized files from on the client.

In ApplicationStrings.resx and ApplicationStrings.he.resx I added one additional value to indicate flow direction

I then made two very small tweaks to the template to use this value. In each top level window, I need to set the flow direction.

in Main.xaml:

<UserControl 
  x:Class="LocalizedBusinessApplication.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  FlowDirection="{Binding Path=ApplicationStrings.FlowDirection, Source={StaticResource ResourceWrapper}}" >

and in View\LoginRegistrationWindow.xaml

<controls:ChildWindow
  x:Class="LocalizedBusinessApplication.LoginUI.LoginRegistrationWindow"
  x:Name="childWindow" 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  Width="400" 
  Title="{Binding Path=ApplicationStrings.LoginWindowTitle, Source={StaticResource ResourceWrapper}}"
  Style="{StaticResource LogRegWindowStyle}"
  FlowDirection="{Binding Path=ApplicationStrings.FlowDirection, Source={StaticResource ResourceWrapper}}" 
  Closing="LoginWindow_Closing">

Now, we are ready to run the app.

It looks great, but it is all English.. how can we test the localization? Simply change your language in the browser.

In IE that is Tools\Internet Options

Make sure Hebrew is first. Then hit refresh on the page and…

What I showed here was how to localize a Silverlight application using the Business Application Template.

Enjoy!

Mix2010: Search Engine Optimization (SEO) for Microsoft Silverlight

BradA — Wed, 17 Mar 2010 20:02:00 GMT

I had a great time today in my Mix2010 session on SEO for Silverlight.

Update: You can watch the video here:

Or download the video.

You can find all the slides (more than I was able to cover in the talk) here. and the the full play-by-play of the demo (include a link to the completed solution).

I started off talking why SEO matters

Then I talked about three tips

You can view the site live by using Bing for “my foodie Explorer Cooking Class with Joe..” or the other guys search engine equally well. ;-)

Enjoy!

Silverlight 4 + RIA Services - Ready for Business: Search Engine Optimization (SEO)

BradA — Wed, 17 Mar 2010 19:45:00 GMT

To continue our series, let’s look at SEO and Silverlight. The vast majority of web traffic is driven by search. Search engines are the first stop for many users on the public internet and is increasingly so in corporate environments as well. Search is also the key technology that drives most ad revenue. So needless to say, SEO is important. But how does SEO work in a Silverlight application where most of the interesting content is dynamically generated? I will present an application pattern for doing SEO in a Silverlight with the minimum of extra work.

There are three fun-and-easy steps to making your Silverlight application SEO friendly.

Step 1: Make important content deep linkable
Step 2: Let the search engines know about all those deep links with a sitemap
Step 3: Provide a “down level” version of important content

Let’s drill into each of these areas by walk through an example. I am going to use my PDC2009 demo “foodie Explorer” as a base line. You might consider reading my previous walk through (PDC09 Talk: Building Amazing Business Applications with Silverlight 4, RIA Services and Visual Studio 2010) to get some background before we begin.

Download the completed sample

Step 1: Make important content deep linkable

Any content on your site that you want to be individually searchable needs to be URL accessible. If I want you to be able to use Bing (or Google, or whatever) for “Country Fried Steak” and land on my page listing pictures of Country Fried Steak I need to offer a URL that brings you to exactly this content. http://foo.com/foodieExplorer.aspx is not good enough, I need to offer a URL such as http://foo.com/foodieExplorer.aspx?food=”Country Fried steak”. Note that there are other great benefits to this technique as well. For example, users can tweet, email and IM these URLs to discuss particular content from your application.

Luckily with the Silverlight navigation feature it is very easy to do add support for deep linking. Let’s take a look at how to do this in a Silverlight app.

What we want to do is provide a URL that can identify a given a given restaurant or a restaurant and a particular plate. For SEO as well as better human readability reasons, we’d like the URL format such as http://www.hanselman.com/abrams/restaurant/25/plate/4, to indicate that this is restaurant=25 and plate=4. To enable this, let’s define the routes in the web project in global.asax.

  1:     public class Global : HttpApplication
  2:     {
  3:         void Application_Start(object sender, EventArgs e)
  4:         {
  5:             RegisterRoutes(RouteTable.Routes);
  6:         }
  7: 
  8:         void RegisterRoutes(RouteCollection routes)
  9:         {
 10:             routes.MapPageRoute(
 11:                 "deepLinkRouteFull",
 12:                 "restaurant/{restaurantId}/plate/{plateId}",
 13:                 "~/default.aspx",
 14:                 false,
 15:                 new RouteValueDictionary { { "restaurant", "-1" }, 
 16:                                            { "plate", "-1" } });
 17:                         
 18:             routes.MapPageRoute(
 19:                 "deepLinkRoute",
 20:                 "restaurant/{restaurantId}",
 21:                 "~/default.aspx",
 22:                 false,
 23:                 new RouteValueDictionary { { "restaurant", "-1" } });
 24:

In line 12 and 20 we define the pattern of the deep links we support with the restaurantId and plateId place holders for the values in the URL. We define them in order from most complex to least complex. The defaults are given in 15 and 23 if the Ids are left off the URL.

Now, let’s look at how to parse this URL on the Silverlight client. In Plates.xaml.cs:

  1:         // Executes when the user navigates to this page.
  2:         protected override void OnNavigatedTo(NavigationEventArgs e)
  3:         {
  4:             int plateID = -1;
  5:             int restaurantId  =-1;
  6:             var s = HtmlPage.Document.DocumentUri.ToString().Split(new char[] {'/','#'});
  7:             int i = Find(s, "plate");
  8:             if (i != -1)
  9:             {
 10:                 plateID = Convert.ToInt32(s[i + 1]);
 11:                 plateDomainDataSource.FilterDescriptors.Add(
 12:                     new FilterDescriptor("ID",
 13:                         FilterOperator.IsEqualTo, plateID));
 14:             }
 15:             i = Find(s, "restaurant");          
 16:             if (i != -1) restaurantId = Convert.ToInt32(s[i + 1]);
 17:             else restaurantId = Convert.ToInt32(NavigationContext.QueryString["restaurantId"]);
 18:             plateDomainDataSource.QueryParameters.Add(
 19:                new Parameter()
 20:                {
 21:                   ParameterName = "resId",
 22:                   Value = restaurantId 
 23:                }
 24:             );
 25:         }
 26:

Basically what the code above does is get the full URL and parse out the parts of the URL and parse out the restaurant and plate ids. In lines 18-23, we are passing the restaurantId as a parameter to the query method and in lines 11-14 above, we are not using a query method, but rather than apply filter descriptor which adds a “where” clause to the LINQ query sent to the server. As a result, we don’t need to change any server code.

One other little thing we need to do, is make sure the client ends up on Plates page. That is handled by the silverlight navigation framework by using the “#/Plates” anchor tag. Because anchor tags are a client only feature, the search engines can’t deal with them very effectively. So we need to add this in on the client. I found it was easy enough to do it just a bit of JavaScript. I emit this from Default.aspx page on the server.

  1: protected void Page_Init(object sender, EventArgs e)
  2: {
  3:    string resId = Page.RouteData.Values["restaurant"] as string; 
  4:    if (resId != null) { Response.Write("<script type=text/javascript>window.location.hash='#/Plates';</script"+">"); }
  5: }
  6:

One little thing to watch out for is that with this routing feature enabled, now the default.aspx page is actived from a different URL, so the relative paths from the silverlight.js and MyApp.xap will not work. For example you will see requests for http://www.hanselman.com/abrams/restaurant/25/plate/4/Silverlight.js rather than http://www.hanselman.com/abrams/silverlight.js. And this will result in an error such as:

Line: 56
Error: Unhandled Error in Silverlight Application
Code: 2104
Category: InitializeError
Message: Could not download the Silverlight application. Check web server settings

To address this,

    <script type="text/javascript" src='<%= this.ResolveUrl("~/Silverlight.js") %>'></script>

and

 <param name="source" value="<%= this.ResolveUrl("~/ClientBin/MyApp.xap") %>"/>

Now we give a URL that includes a PlateID such as:

http://localhost:30045/restaurant/48/plate/119#/Plates

As a result, we get our individual item…

Step 2: Let the search engines know about all those deep links with a Sitemap

Now we have our application deep linkable, with every interesting bit of data having a unique URL. But how is a search engine going to be able to find these URLs? We certainly hope as people talk about (and therefore link to) our site on social networks the search engines will pick up some of them, but we might want to do a more complete job. We might want to provide the search engine what ALL the deep links in the application. We can do that with a sitemap.

The Sitemap format is agreed to by all the major search engines.. you can find more information on it at http://sitemap.org.

To understand how this works, let’s look at the process a search engine would use to index an interesting data driven site: http://amazon.com. When a search engine first hits such a site it reads the robots.txt file at the root of the site. In this case: http://www.amazon.com/robots.txt

In this example, you can see at the top of the file there is a list of directories that the search engines are asked to skip Then at the bottom of this page, there is a list of sitemaps for the search engine to use to crawl all the site’s content.

Note: You don’t, strictly speaking have to use a sitemap. You can use the sitemaster tools provided by the major search engines to register your sitemap directly.

If we navigate to one of those URLs, we see a sitemap file, as shown below:

In this case, because Amazon.com is so huge, these links are actually to more sitemaps (this file is known as a Sitemap index file). When we bottom out, we do get to links to actual products.

As you can see the format looks like:

<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
<url>
    <loc>http://www.amazon.com/GAITHER-COMMITTEE-EISENHOWER-COLD-WAR/dp/081425005X</loc>
</url>
<url>
    <loc>http://www.amazon.com/CONTROLLING-VICE-REGULATING-PROSTITUTION-CRIMINAL/dp/0814250076</loc>
</url>

One thing that is interesting here is that these links are constantly changing as items are added and removed from the Amazon catalog.

Let’s look at how we build a sitemap like this for our site.

In the web project, add a new Search Sitemap using the Add New Item dialog in VS and selected the Search Sitemap item.

Be sure to install the RIA Services Toolkit to get this support.

When we do this we get a robots.txt file that looks like:

# This file provides hints and instructions to search engine crawlers.
# For more information, see http://www.robotstxt.org/.

# Allow all
User-agent: *

# Prevent crawlers from indexing static resources (images, XAPs, etc)
Disallow: /ClientBin/

# Register your sitemap(s) here.
Sitemap: /Sitemap.aspx

and a sitemap.aspx file.

For more information check out: Uncovering web-based treasure with Sitemaps

To build this sitemap,we need to create another view of the same data from our PlateViewDomainService. In this case we are consuming it from a ASP.NET webpage. To do this, we use the asp:DomainDataSource. You can configure this in the designer by:

By drag-and-dropping a Repeater control to the form we get the follow design experience:

then right click on it and configure the data source.

Select a new DataSource

Finally, we end up with two sets of links in our sitemap.

  1: <asp:DomainDataSource runat="server" ID="RestaurauntSitemapDataSource" 
  2:         DomainServiceTypeName="MyApp.Web.DishViewDomainService" 
  3:         QueryName="GetRestaurants" />
  4: 
  5: <asp:Repeater runat="server" id="repeater" DataSourceID="RestaurauntSitemapDataSource" >
  6:     <HeaderTemplate>
  7:         <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  8:     </HeaderTemplate>
  9:     <ItemTemplate>         
 10:               <url> 
 11:                  <loc><%= Request.Url.AbsoluteUri.ToLower().Replace("sitemap.aspx",string.Empty) + "restaurant/"%><%# HttpUtility.UrlEncode(Eval("ID").ToString()) %></loc> 
 12:               </url>
 13:  </ItemTemplate>
 14: </asp:Repeater>
 15: 
 16: <asp:DomainDataSource ID="PlatesSitemapDataSource" runat="server" 
 17:     DomainServiceTypeName="MyApp.Web.DishViewDomainService" 
 18:     QueryName="GetPlates">
 19: </asp:DomainDataSource>
 20: 
 21: <asp:Repeater runat="server"  id="repeater2" DataSourceID="PlatesSitemapDataSource">
 22:     <ItemTemplate>
 23:             <url>  
 24:                <loc><%= Request.Url.AbsoluteUri.ToLower().Replace("sitemap.aspx",string.Empty) + "restaurant/"%><%# HttpUtility.UrlEncode(Eval("RestaurantID").ToString()) + "/plate/" + HttpUtility.UrlEncode(Eval("ID").ToString()) %></loc>    
 25:             </url>        
 26:     </ItemTemplate>
 27:     <FooterTemplate>
 28:         </urlset>
 29:     </FooterTemplate>
 30: </asp:Repeater>
 31:

As you can see in line 3 and 20, we are calling the use the GetRestaurant and GetPlates method defined in our DomainService directly.

Now, for any reasonable set of data this is going to be a VERY expensive page to execute. It scans every row in the database. While it is nice to keep the data fresh, we’d like balance that server load. One easy way to do that is to use output caching for 1 hour. For more information see: ASP.NET Caching: Techniques and Best Practices

<%@ OutputCache Duration="3600" VaryByParam="None" %>

Another approach for really large datasets would be to factor the data into multiple sitemaps as the amazon.com example we saw above does.

If we grab one of those URLs and navigate to them, bingo! We get the right page.

Step 3: Provide a “down-level” version of important content

That is fantastic, we have deep links, we have a way for the search engines to discover all of those links, but what is the search engine going to find when it gets to this page? Well, search engines for the most part only parse HTML, so if we do a Page\View Source, we will see what the search engine sees:

Of if we browse with Silverlight disabled (Tools\Manage Addons), we see this:

We see a big old white page of nothing!

Certainly none of the dynamic content is presented. The code actually has to be run for the dynamic content to be loaded. I am pretty sure search engines are not going to be running this silverlight (or flash or ajax) code in their datacenters anytime soon. So what we need, is some alternate content.

Luckily this is pretty easy to do. First lets get any alternate content to render. It is important to note that this content is not just for the search engines. Content written solely for search engines is sometimes called search engine spoofing or Web Spam when it is done to mislead users of search engines about the true nature of the site. (the pernicious perfidy of page-level web spam) . Instead, this content is an alternate rendering of the page for anyone that doesn’t have Silverlight installed. It might not have all the features, but it is good down level experience. It just so happens that the search engine’s crawlers do not have Silverlight installed, so they get something meaningful and accurate to index.

Add this HTML code to your default.aspx page.

   <div id="AlternativeContent" style="display: none;">
        <h2>Hi, this is my alternative content</h2>
   </div>

Notice it is display: none, meaning we don’t expect the browser to render it… unless Silverlight is not available. To accomplish that, add this bit of code to the page:

<script type="text/javascript">
     if (!isSilverlightInstalled()) {
            var obj = document.getElementById('AlternativeContent');
            obj.style.display = ""; 
        }
</script>

Note, the really cool isSilverlightInsalled method is taken from Petr’s old-but-good post on the subject. I simply added this function to my Silverlight.js file.

function isSilverlightInstalled() {
    var isSilverlightInstalled = false;
    try {
        //check on IE
        try {
            var slControl = new ActiveXObject('AgControl.AgControl');
            isSilverlightInstalled = true;
        }
        catch (e) {
            //either not installed or not IE. Check Firefox
            if (navigator.plugins["Silverlight Plug-In"]) {
                isSilverlightInstalled = true;
            }
        }
    }
    catch (e) {
        //we don't want to leak exceptions. However, you may 
        //to add exception tracking code here
    }
    return isSilverlightInstalled;
}

When we run it from a browser without Silverlight enabled we get the alternate content:

But with Silverlight installed, we get our beautiful Silverlight application content.

That is great, but how do we expose the right content? We want to display exactly the same data as is in the Silverlight app and we want to write as little code as possible. We really don’t want multiple pages to maintain. So let’s add some very basic code to the page in our AlternativeContent div. This ListView is for Restaurant details.

<asp:ListView ID="RestaurnatDetails" runat="server" 
                EnableViewState="false">
   <LayoutTemplate>
       <asp:PlaceHolder ID="ItemPlaceHolder" runat="server"/>
   </LayoutTemplate>
   <ItemTemplate>
       <asp:DynamicEntity ID="RestaurnatEntity" runat="server"/>
   </ItemTemplate>
</asp:ListView>

Now we need to bind it to our datasource… I find this is pretty easy in the design view in VS. Note, you do have make the div visible so you can work with it in the designer.

Then we configure the DataSource.. it is very easy to select the query method we want to use

Next we bind the query method parameter based on the routes we defined.

Now do the exact same thing for our Plates ListView…

This gives us some very simple aspx code:

  1:            <asp:ListView ID="RestaurnatDetails" runat="server" 
  2:                         EnableViewState="false" DataSourceID="restaurantsDomainDataSource">
  3:                <LayoutTemplate>
  4:                      <asp:PlaceHolder ID="ItemPlaceHolder" runat="server"/>
  5:                </LayoutTemplate>
  6:                <ItemTemplate>
  7:                     <asp:DynamicEntity ID="RestaurnatEntity" runat="server"/>
  8:                </ItemTemplate>
  9:            </asp:ListView>
 10: 
 11:            <asp:DomainDataSource ID="restaurantsDomainDataSource" runat="server" 
 12:                               DomainServiceTypeName="MyApp.Web.DishViewDomainService" 
 13:                               QueryName="GetRestaurant">
 14:               <QueryParameters>
 15:                  <asp:RouteParameter name="id" RouteKey="restaurantId" 
 16:                                   DefaultValue ="-1" Type = "Int32"/>
 17:               </QueryParameters>
 18:            </asp:DomainDataSource>
 19:

Next we want to enable these controls to dynamically generate the UI based on the data.

  1:         protected void Page_Init(object sender, EventArgs e)
  2:         {
  3:             RestaurnatDetails.EnableDynamicData(typeof(MyApp.Web.Restaurant));
  4:             PlateDetails.EnableDynamicData(typeof(MyApp.Web.Plate));
  5:             string resId = Page.RouteData.Values["restaurant"] as string; 
  6:             if (resId != null) { Response.Write("<script type=text/javascript>window.location.hash='#/Plates';</script"+">"); }
  7:         }
  8:

Notice we added lines 4-5 to enable dynamic data on these two ListViews.

The last step is we need to add the set of templates DynamicData uses. You can grab these from any Dynamic Data project. Just copy them into the root of the web project.

You can edit these templates to control exactly how your data is displayed.

In the EntityTemplates directory we need to templates for each of our entities (Plate and Restaurant in this case). This will control how they are displayed.

  1: <%@ Control Language="C#" CodeBehind="Restaurant.ascx.cs" Inherits="MyApp.Web.RestaurantEntityTemplate" %>
  2: 
  3:       <asp:DynamicControl  ID="DynamicControl8" runat="server" DataField="ImagePath" />
  4:       <ul class="restaurant">
  5:       <li>
  6:          <ul class="restaurantDetails">
  7:              <li><h2><asp:DynamicControl ID="NameControl" runat="server" DataField="Name" /> </h2> </li>
  8:              <li><asp:DynamicControl ID="DynamicControl1" runat="server" DataField="ContactName" /> (<asp:DynamicControl ID="DynamicControl2" runat="server" DataField="ContactTitle" />)</li>
  9:              <li><asp:DynamicControl ID="DynamicControl3" runat="server" DataField="Address" />  </li>
 10:              <li><asp:DynamicControl ID="DynamicControl4" runat="server" DataField="City" />, <asp:DynamicControl ID="DynamicControl5" runat="server" DataField="Region" />  <asp:DynamicControl ID="DynamicControl6" runat="server" DataField="PostalCode" />  </li>           
 11:              <li><asp:DynamicControl ID="DynamicControl7" runat="server" DataField="Phone" />  </li>           
 12:              <li><asp:HyperLink runat="server" ID="link"  NavigateUrl="<%#GetDetailsUrl() %>" Text="details.."></asp:HyperLink></li>
 13:          </ul>
 14:       </li>
 15:       </ul>
 16:

Notice here as well, we are only doing some basic formatting and just mentioning the fields we want to appear in the alternate content. Repeat for Plate..

Now we are ready to run it.

At the root, with no query string parameters we get the list of restaurants, all in HTML of course.

then we can add the routs to narrow down to one plate at a given restaurant.

But, let’s look at this in a real browser, to be sure we know what this looks like to a search engine. Lynx lives! Lynx was the first web browser I used back in 1992 on my DEC2100 machine in the Leazar lab on the campus of North Carolina State University.. And it still works just as well today.

and the details

This classic text based browser shows us just the text – just what the search engines crawlers will see.

Now for the real test.

We will use Bing for “my foodie Explorer Cooking Class with Joe..” and sure enough, it is there:

Clicking on the link?

..takes is to exactly the right page with the right data in our nice Silverlight view.

Of course this works with the other guys search engine equally well… if you are the type who uses that one ;-)

Summary

What you have seen here is are the basics of how to create a data driven Silverlight web application that is SEO ready! We walked through three fun-and-easy steps:

Step 1: Make app important content deep linkable

Step 2: Let the search engines know about all those deep links via a Sitemap

Step 3: Provide “down level” version of important content

Enjoy!

For more information see: Illuminating the path to SEO for Silverlight

Silverlight 4 + RIA Services: Ready for Business: Updating Data in the Client

BradA — Tue, 16 Mar 2010 22:38:00 GMT

To continue our series, let’s look at updating the data. I have created a Plates.xaml page with very similar structure to the above. For details on how I created this page, check out my PDC 09 demo walk through.

Now let’s look at updating the Plate data..

First we will create some default “form” UI by dragging an entity from the datasources window in much the same way we did above.

But before we create the UI, notice the order of the fields – it matches the order they will be generated in the UI. They are in alphabetic order, but that is not always what you want. For example, I think Name should be first.

To address this, in the server project, open the DishViewService.metadata.cs file and add the Display attribute to the Name field of the Plate class. While we are in there, “Number Updates” isn’t such a good name to use in the UI, so let’s update that as well to something more readable.

[Display(Order = 0)]
public string Name { get; set; }
[Display(Name="Update Count")]
public Nullable<int> NumberUpdates { get; set; }

Now, flipping back to the client project, we see Name on the top

and when we drop it on the form, we see Update Count.

Now we have a form, and it is already wired up to the same datasource as the grid. So let’s add a button the save changes.

So let’s add a save button to the form

and wire up its Command property (this gets called when the button is pressed).

Now, we need to wire this up to the Submit command on the DomainDataSource. So we use element-to-element binding. Select the platDomainDataSource

Then select the path to the SubmitChangesCommand

You know you have the right, if the button gets disabled (even on the design surface.. after all, there are no changes to submit, right)?

Now, run it and see the results

Notice as you change selection in the grid, the details UI is automatically updated, no coded needed. Also notice that the save button is disabled until there are changes that need to be submitted to the server.. Try adding a “Cancel” button? to remove the local changes. it is very easy to wire up to the RejectChangesCommand in the same way.

Now, let’s see about actually update the data in the database. Set a break point in the make edits to two different entities on the

Notice this update method get’s called twice once for each entity changed on he client.

Now let’s add a little more logic to the update to handle some business logic

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

First line 3, we update the NumberUpdates count, then if the price of this menu item is changing, we add a one dollar fee. Notice we can easily check to see if this value is changed from the prospective of this client by using the client’s original value… The client sends to the server the original value it got from the server when it was first loaded for any field that changed, is a key or marked as a concurrency token. (This is a small tweak from the last release when *all* original values were sent back the server). For example, on an update that only changes the Calorie count, inspecting the original value, we see:

If you wanted to include Price on any update, you need to mark it as a concurrency token. To mark an field as a concurrency token in entity framework, select the field in the designer and change the Concurrency Mode to “Fixed”

With this change the original value for price will always be sent to the server… this is only a tiny bit more expensive for most fields, so I recommend doing it whenever the business logic requires it.

Silverlight 4 + RIA Services - Ready for Business: Exposing OData Services

BradA — Tue, 16 Mar 2010 17:14:00 GMT

OData is an emerging set of extensions for the ATOM protocol that makes it easier to share data over the web. To show off OData in RIA Services, let’s continue our series. We think it is very interesting to expose OData from a DomainService to facilitate data sharing. For example I might want users to be able to access my data in a rich way in Excel as well as my custom Silverlight client. I’d like to be able to enable that without writing multiple services or duplicating any business or data access logic.

This is very easy to enable with RIA Services. In fact it is just a check box away! When you create your DomainService simply check the “Expose OData endpoint” and that will expose your DomainService as an OData feed.

If you have already created a DomainService it is easy to enable OData on it as well by doing the two things this wizard does.

First, it adds an endpoint to the domainServices section of the web.config.

  <system.serviceModel>
    <domainServices>
      <endpoints>
        <add name="OData" 
             type="System.ServiceModel.DomainServices.Hosting.ODataEndpointFactory, System.ServiceModel.DomainServices.Hosting.OData, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </endpoints>
    </domainServices>

Second, on each paramaterless query methods you wish to expose via OData, mark the query as being default. Meaning any time there is an ask for “Plate” it is this query method that is used.

        [Query(IsDefault = true)]
        public IQueryable<Plate> GetPlates()
        {

once these are done, you an hit the service and see an Atom feed. The format of the URL is the namespace+typename for the domainservice with dots replaced by dashs followed by “.svc/Odata/”. So if the DomainService class is

MyApp.Web.DishViewDomainService then the URL would be http://localhost:30045/myapp-web-DishViewDomainService.svc/OData/

http://localhost:30045/myapp-web-DishViewDomainService.svc/OData/PlateSet

And then drill in with this URL: http://localhost:30045/myapp-web-DishViewDomainService.svc/OData/PlateSet

That is really cool that the data is in an open ATOM based format… but what is even better is there is a budding ecosystem of clients that can consume this feed. One of the more interesting ones is the Excel addin called PowerPivot.

Once you have it installed with Excel 2010. select the PowerPivot window

Then you can use the full power of excel so if i want to sort by Number of Updates, with a rating of 4 or higher, with calorie count between 3000 and 4000 then go graph that in some interesting way, you can do the easily.. All with the live data without any custom application code.

What we showed in this walk though is how to expose OData from your DomainService and consume that in Excel. This is just a down payment on the OData support coming in the future in RIA Services.

Silverlight 4 + RIA Services - Ready for Business: Consuming Data in the Silverlight Client

BradA — Tue, 16 Mar 2010 05:50:00 GMT

To continue our series, let’s see where the fun comes in my look at how easy that is to consume from the client. First just to help you understand what is happening behind the covers, let’s look at a code-behind solution. In View\Home.xaml put a simple DataGrid on the form.

 <sdk:DataGrid Name="dataGrid1" Height="152" Width="692" />

Then add these lines of code to Home.xaml.cs

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

In line 1, we create a DishViewDomainContext… notice this is the automatically generated (via an MSBuild task) from the DishViewDomainService on the server.

In line 2, Notice we have a Restaurants property – we provide this because there is at least one query method that returns restaurants. Notice the cool binding magic, we have not yet populated this data from the server, but we go ahead and bind it. This avoids any kind of complex callback logic.

In line 4, we explicitly load the data.. this is the network call, so we want to make sure it is clear to the developer when this happening. As an argument we pass exactly which query method (and any arguments) to use.

Now we run it and we get our data..

Very painless, but it gets even easier ;-)

Go and in delete this code and the Xaml.. Then notice the DataSources window

Notice this is simply a visual representation of exactly what we were doing in code.

Notice i can change what default UI to generate and which query method to use.

Dragging Restaurants to the form and bingo, we have our data.

Run it and we have our data… what could be easier?

Click on the column headers – notice sorting works! There is no code you had to write on the client or server to enable it. This just comes for free out of returning an IQuerable.

Now let’s add paging..

First we drag and drop the DataPager control to the form, then do a bit of layout and we end up with something that looks nice

But we still need to wireup the DataPager to the same underlying DataSource. This is easy enough done by draging and dropping the same Restaurant element from the DataSources window to the DataPager. You will now you did this right if the DataPager becomes enabled.

Notice that paging works great! No code needed on the client or the server, again, all done through using that simple Linq query we wrote on the server. But what about paging AND sorting… do they work well together? Will it just sort the page of data that is loaded locally? The answer of course is that sorting and paging compose nicely together and the sort is actually sent all the way to the data tier and executed there in a very efficient way.

Now let’s add filtering. With just a bit more work in the UI, we can add a way to filter by postal code.

<sdk:Label Name="label1" Content="Postal Code:" FontSize="14" Margin="0,0,462,13" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="110,12,0,0" Name="postalCodeTextbox" VerticalAlignment="Top" Width="120" />

Then we need to wire this up to the query. Of course we want the filter applied as close to the data as possible. We don’t want to download all the entities locally, then filter, nor do we want to pull them all to the middle-tier and then filter. What we want is for the filter to be applied at the database level. Luckily this is very easy to do with LINQ composition.

First we select the DomainDataSource in the Document Outline view.

Operator – typically you should set this to “Contains”. If you use the default of “IsEqualTo” the first load (when there is no filter) will result in no results returned.
PropertyPath – this is the property on the entity that you are filtering on… Just type in the simple name.
Value – this is where to get the value to compare from. It is easiest to do UI-to-UI binding to the TextBox’s Text property.

Here is the dialog once we are done:

And the resulting Xaml:

        <riaControls:DomainDataSource Name="restaurantDomainDataSource" AutoLoad="True" 
                                      d:DesignData="{d:DesignInstance my:Restaurant, 
                                                     CreateList=true}" 
                                      Height="0"  Width="0" 
                                      LoadedData="restaurantDomainDataSource_LoadedData_1" 
                                      QueryName="GetRestaurantsQuery">
            <riaControls:DomainDataSource.FilterDescriptors>
                <riaControls:FilterDescriptor Operator="Contains" 
                                              PropertyPath="PostalCode" 
                                              Value="{Binding ElementName=postalCodeTextbox, Path=Text}" />
            </riaControls:DomainDataSource.FilterDescriptors>
            <riaControls:DomainDataSource.DomainContext>
                <my:DishViewDomainContext />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

Notice no code changes at all, and no changes to the business logic in the DomainService in particular.

Silverlight 4 + RIA Services - Ready for Business: Exposing Data from Entity Framework

BradA — Tue, 16 Mar 2010 05:46:00 GMT

To continue our series I wanted to look next at how to expose your data from the server side of your application.

The interesting data in your business applications come from a wide variety of data sources. From a SQL Database, from Oracle DB, from Sql Azure, from Sharepoint, from a mainframe and you have likely already chosen a datamodel such as NHibernate, Linq2Sql, Entity Framework, Stored Proc, a service. The goal of RIA Service in this release is to make it easy to work with data from any (or many) of the sources in a seamless way from a Silverlight application. This walk through will use Entity Framework accessing the Sql Express database, but the basic concept applies to any data source.

Add DishView.mdf to BusinessApplication1.Web\App_Data – Of course in a real world example, you’d just have a connection string to an existing database.

Then create an Entity Framework model on top of it.

As you can see, we have a very simple Entity set.. each Restaurant can have any number of Plates.

Next, we need to write some business logic that controls and shapes how to data is seen by the Silverlight client. To do that, we add a new DomainService. A DomainService is simply a special kind of WCF service that makes it MUCH easier to query, update, secure and validate your data. But if you are a WCF expert and know all the ins-and-outs of configuring a WCF service, you can certainly customize this service in exactly the same way to match your needs. Of course, in the 90% case we hope you will not need to do that.

Next we are given a chance to pre-populate the DomainService.

In this case, we will expose Plate and Restaurant, but only Plate will be updatable. We will also generate a metadata class for hanging validation attributes on so that you can regenerate the EF model without losing any customizations. We get a starter DishViewDomainService class. I have updated it in lines 8-9 with a bit of business logic. Let’s walk through each line..

  1:     [EnableClientAccess]
  2:     public class DishViewDomainService : LinqToEntitiesDomainService<DishViewEntities>
  3:     {
  4: 
  5:         public IQueryable<Restaurant> GetRestaurants()
  6:         {
  7:             return this.ObjectContext.Restaurants
  8:                 .Where (r=>r.Region != "NC")
  9:                 .OrderBy(r=>r.ID);
 10:         }
 11:

Line 1: This attribute marks the DomainService as accessible over http, without it, the service is only callable from in process. This is useful in the ASP.NET WebForms\Dynamic Data scenario.
Line 2: We drive this class from the LinqToEntitiesDomainService this is a utility class that provides a few helpers for working with EF. The real work is done by the DomainService base class, this is the class you derive from for POCO and other custom scenarios.
line 5: Notice we are returning a IQueryable of our DAL Restaurant type. IQuerable is the interface LINQ is built on. This enables query capablities from the client so you can do things like sorting, paging, filtering from the client and have it compose with your custom business logic and execute on the data tier.. This means no extra data is sucked into the mid-tier or the client, but you don’t have gunk up your business logic to deal with that.
Line 8-9: we have some business logic that weeds out any Restaurant in North Carolina and puts a default ordering on the results. You can of course imagine more interesting business logic.

Silverlight 4 + RIA Services - Ready for Business: Starting a New Project with the Business Application Template

BradA — Mon, 15 Mar 2010 23:45:00 GMT

To kick off our series, I wanted to focus on our goal of helping you focus on your business, not plumbing code. The first place you will see this in the pre-build components in the Business Application Template. It describes a prescriptive application structure, looks great and is easily customizable.

After you have successfully installed Silverlight 4 for developers (which includes RIA Services) you will have a couple of new projects in the Silverlight section. We are going to focus on the Business Application Template.

Notice this creates a single solution with two projects. BusinessApplication1 is the client part of the application and BusinessApplication2 is the server part. These are related projects that know about each other.

And by default you get the framework for a great looking, professional application

The starter application is fully localizable and customizable. For example, I want to change the name of the application from “Application Name” to My Foodie Explorer. This is easily done in the Assets\Resources directory be editing the ApplicationStrings.resx file.

Check out a deeper walk through, it is a bit older, but it is still valid and Tim recently posted SNEAK PEEK: New Silverlight application themes such as:

enjoy!

Silverlight 4 + RIA Services - Ready for Business: Index

BradA — Mon, 15 Mar 2010 22:24:00 GMT

With Silverlight 4 and RIA Services all-but done, I thought it would be worthwhile to highlight some of the key features of the platform and tools that make Silverlight a fantastic platform for building business applications. I’ll avoid gratuitous video and dancing hippos and focus on just the bread and butter of business applications: Querying, Updating, Validating and securing your important business-data. I’ll also use this to refresh a few of the posts from my Silverlight 3 era series.

The walk through requires:

Visual Studio 2010 (or the free express version)
Silverlight 4 Tools (includes RIA Services)

You can download the completed application.

I authored this with Silverlight 4 RC, but I fully expect it to work with Silverlight 4 RTM.

Starting a New Project with the Business Application Template
Exposing Data from Entity Framework
Consuming Data in the Client
Updating Data
Validating Data
Authentication and Personalization
Silverlight and Search Engine Optimization (SEO)
Exposing OData Services
Exposing WCF (WSDL) Services
Exposing JSON Endpoint
Working with Reference Data - In Progress
Deploying to a 3rd Party Hoster (I could not do any better than Saurabh's post!)
Workflow Integration - In Progress
Management with AppFabric - In Progress
Debugging Tips and Tricks - In Progress
Globalized and Localized

Silverlight 4 and RIA Services Release Candidate Available NOW

BradA — Mon, 15 Mar 2010 18:18:41 GMT

At Mix10 this morning in Vegas ScottGu announced that Silverlight 4 and RIA Services RC are available for download now! These bits work great with VS2010 RC.

We have some great videos, and updated samples already posted on http://silverlight.net/riaservices

Deepesh has a great list of what is new in this drop RIA Services RC and Toolkit March 2010 now available… and there is the official forum post from DineshKu RIA Services Road to RTW via RC at MIX.

INDEI Support:- Validation support based on Silverlight 4’s INotifyDataErrorInfo. This is a non-exception-based model and enables async validations more easily. It also helps display errors flagged by the server in the UI.
Spiffier DDS: filter/sort/group descriptors support binding; ICommand support for Load/SubmitChanges/RejectChanges
Server throttling: you can regulate the per request load on the server / DB by specifying maximum result limit on a query method using the QueryAttribute.ResultLimit property.
AuthorizationContext: Similar to ValidationContext, now you have more options for implementing custom authorization rules (e.g. entity-based authorization)
Endpoint configuration support: Following the “secure by default” principle, only binary endpoint will be exposed but we have made it really easy to add additional/different endpoints if you plan to use them.
OData endpoint: you can point PowerPivot to a DomainService OData endpoint and analyze data by calling the appropriate query method. This is the first step in lighting up OData with RIA Services

Download the bits now and lets us know what you think!

Tell me about your services…

BradA — Tue, 09 Feb 2010 18:36:08 GMT

My team has been doing a little thinking recently about the “services” space. Basically I have been trying to figure out how folks think about accessing data and business logic across tiers. What are the types of development projects are services the core thing they are building and for what types of development projects are services simply pluming for getting the job done?

I’d love to have you folks chime into this conversation. For starters, I have posted a very simple\quick survey. Please take 30 secs and fill it out.

What statement best describes the type of work you typically do? (check all that apply)

1 - I write applications that happen to span across multiple tiers. My code runs on the web server and I also own the client.
2- I write servers that expose data that third-party developers will consume.
3- I write clients that consume data from third-party data sources.

Fill out the survey

Great RIA Services Overview in Dr. Dobbs

BradA — Mon, 18 Jan 2010 02:46:00 GMT

Dan Wahlin has a great introductory article on RIA Services in Dr. Dobbs and in Information Weekly.

Enjoy!

Visual Studio Project Sample Loading Error: Assembly could not be loaded and will be ignored. Could not load file or assembly or one of its dependencies. Operation is not supported. (Exception from HRESULT: 0x80131515)

BradA — Sat, 12 Dec 2009 04:21:00 GMT

Some folks have mentioned to me that they are having trouble getting some of my samples to work. And in fact, just the other day, I ran into a problem getting my own samples to work. It turns out to be a problem with the way windows treats the sample that you down load.

Specifically, because you downloaded the sample from the internet, windows treats the sample as “untrusted” content. When you unzip untrusted content you get a directory full of untrusted content. Visual Studio is not so good and running untrusted content. Unfortunately, you get some really bad error messages like the one above.

Here is the error message from VB

Warning 1 Assembly 'C:\Users\brada\Desktop\MyApp.VB\MyApp.VB.Web\bin\MyApp.VB.Web.dll' could not be loaded and will be ignored.
Could not load file or assembly 'file:///C:\Users\brada\Desktop\MyApp.VB\MyApp.VB.Web\bin\MyApp.VB.Web.dll' or one of its dependencies. Operation is not supported. (Exception from HRESULT: 0x80131515) MyApp.VB

And here is the message from C#:

Warning 1 Assembly 'C:\Users\brada\Desktop\MyApp.Starter\MyApp.Web\bin\MyApp.Web.dll' could not be loaded and will be ignored.
Could not load file or assembly 'file:///C:\Users\brada\Desktop\MyApp.Starter\MyApp.Web\bin\MyApp.Web.dll' or one of its dependencies. Operation is not supported. (Exception from HRESULT: 0x80131515) MyApp

Notice these are warnings, so if you are only looking at errors, you will be even more confused.

There is at least a good warning when the project is being loaded. I am not sure why you are giving the option to continue here, because there are very few projects that will just work in the semi-trusted way. If you see this, hit cancel and fix the issue first.

Luckily fixing this is very easy. Just go back to the ZIP file you downloaded, select properties, then “unblock” the content.

Then extract the contents and rerun it. Everything should work fine.

Good luck!

Bytes by MSDN: Brad Abrams Interview with Billy Hollis: Silverlight 4, RIA Services and VS2010

BradA — Wed, 09 Dec 2009 19:06:00 GMT

Bytes by MSDN is doing a bunch of really interesting interviews with folks behind the technology.

In this interview I talked to Billy Hollis about Silverlight 4, RIA Services and VS2010.

Tune in with Brad Abrams and Billy Hollis as they discuss the latest Silverlight 4 release and the exciting new features and functionalities now available.

Video Downloads
WMV (Zip) | WMV | iPod | MP4 | 3GP | Zune | PSP

Audio Downloads
AAC | WMA | MP2 | MP3 | MP4

Enjoy!

Field Level Access with RIA Services

BradA — Tue, 08 Dec 2009 18:56:38 GMT

There are lots of reason you may need to customize the access to given fields within an entity. For example, HIPPA compliance requires that some data not be exposed to only employees with a need to know. It is often not sufficient to just NOT show the data in the Silverlight client, you need to not even send it over the wire.

This example works with Silverlight 4\RIA Services Beta and Visual Studio 2010 Beta2

I built a very simple RIA Services + Silverlight 4 example to show how this could be done. First, let’s run the app, then we can look at how we built it.

The first thing to notice is when we run it, no users are logged in, so we get no access to the data at all.

First, let’s log in as a Rocky, who is a jr. employee at our company. He should NOT have access to the social security numbers of employees, but the other information is good for him to be able to access.

As you can see, no SSNs are displayed.

Now, let’s log in as Billy, who is our HR Manager… As you can see, Billy has a need to know what the SSN is for most employees, so those are visible to him. But notice, even he can not see VP level personal information.

OK, now let’s look at how we implemented this. Really the key code is the domain service on which runs on the server:

  1:     [RequiresAuthentication]
  2:     [EnableClientAccess()]
  3:     public class EmployeesDomainService : LinqToEntitiesDomainService<NORTHWNDEntities>
  4:     {
  5: 
  6:         public IQueryable<Employee> GetEmployees()
  7:         {
  8:             foreach (var e in this.ObjectContext.Employees)
  9:             {
 10:                 if (!this.ServiceContext.User.IsInRole("HRManagers"))
 11:                 {
 12:                     e.SSN = null;
 13:                 }
 14:                 else if (e.Title.Contains("Vice President"))
 15:                 {
 16:                     e.SSN = null;
 17:                 }
 18:             }
 19:             return this.ObjectContext.Employees;
 20:         }
 21: 
 22:

In line 1, we mark this services are only accessible to users that are logged in.

In line 10, we are making sure that only the user making the request is in the role that enables them to have access to the SSN, if not, we null it out.

In line 14, we have a (lame) example to show accessing data on the entity to decide if the user should have access. In this case, even the HRManager can’t access the VP’s SSN.

Some notes on running the app:

Download the source code
Billy and Rocky’s passwords are “password1!”
Be sure the refresh the page after logging in or out
You can customize the roles by using the IIS Admin tool or the ASP.NET configuration properties on the Web solution

Enjoy!

PDC09 Talk: Building Amazing Business Applications with Silverlight 4, RIA Services and Visual Studio 2010 – Now in Visual Basic!!

BradA — Sat, 28 Nov 2009 06:13:00 GMT

I had a great time at my talk PDC2009 talk, but i was disappointed that I could not demo in both C# and VB… So here is the next best thing: A full play-by-play of the demo, but all in VB! Enjoy.

What you need to get started:

Visual Studio 2010 Beta2
Silverlight 4 Beta (now includes RIA Services)
Completed Solution (in VB)
Check out the slides and video from the talk

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…

 Imports MyApp.VB
Imports System
Imports System.Data
Imports System.Linq
Imports System.Web.DomainServices
Imports System.Web.Ria
Imports System.Web.DomainServices.Providers
 
 
<EnableClientAccess()> _
Public Class PlateViewDomainService
    Inherits LinqToEntitiesDomainService(Of DishViewEntities)
 
    Public Function GetRestaurants() As IQueryable(Of Restaurant)
        Return From r In ObjectContext.Restaurants
               Where r.City <> "Raligh"
               Order By r.ID
    End Function
 
 
End Class
 
 
 

In line 10 – 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 11: 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 12: 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 14: 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.

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

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

 Dim context = New PlateViewDomainContext()
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"
                              Name="RestaurantDomainDataSource"
                              QueryName="GetRestaurantsQuery"
                              Width="0">
    <riaControls:DomainDataSource.DomainContext>
        <my:PlateViewDomainContext />
    </riaControls:DomainDataSource.DomainContext>
</riaControls:DomainDataSource>
 
 

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

 <data:DataGrid AutoGenerateColumns="False"
               Height="200"
               HorizontalAlignment="Left"
               ItemsSource="{Binding ElementName=RestaurantDomainDataSource, Path=Data}"
               Margin="190,110,0,0"
               Name="RestaurantDataGrid"
               RowDetailsVisibilityMode="VisibleWhenSelected"
               VerticalAlignment="Top"
               Width="400">
    <data:DataGrid.Columns>
        <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"
                PageSize="10"
                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="83"
                               HorizontalAlignment="Left"
                               Margin="274,137,0,0"
                               Name="BusyIndicator1"
                               VerticalAlignment="Top"
                               Width="188"
                               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
    Implements IValueConverter
 
    Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As Globalization.CultureInfo) As Object _
        Implements IValueConverter.Convert
 
        Dim path As String
        path = value.ToString()
        path = path.Replace(":", "")
        path = path.Replace("/", "")
        path = path.Replace("\\", "")
        If path.Length > 100 Then
            path = path.Substring(0, 100)
        End If
        Return "http://hanselman.com/abrams/Images/Plates/" + path
 
    End Function
 
 

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>
    <my:ImagePathConverter x:Key="ImagePathConverter1" />
</navigation:Page.Resources>
 
 

and

 <data:DataGridTemplateColumn x:Name="ImagePathColumn"
                             Header="Image Path"
                             Width="SizeToHeader">
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Image Source="{Binding Path=ImagePath, Converter={StaticResource ImagePathConverter1}}" />
        </DataTemplate>
    </data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
 
 

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 Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
 
    Dim res As Restaurant
    res = RestaurantDomainDataSource.DataView.CurrentItem
 
    NavigationService.Navigate(New Uri("/Plates?restaurantId=" _
     & res.ID, UriKind.Relative))
End Sub
 

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 Function GetPlates() As IQueryable(Of Plate)
    Return From r In ObjectContext.Plates
           Order By r.ID
End Function
 

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 Function GetPlates(ByVal resId As Integer) As IQueryable(Of Plate)
    Return From r In ObjectContext.Plates
           Where r.RestaurantID = resId
           Order By r.ID
End Function
 
 

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

 Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)
    Dim param = New Parameter()
    param.ParameterName = "resId"
    param.Value = NavigationContext.QueryString("restaurantId")
 
    PlateDomainDataSource.QueryParameters.Add(param)
 
End Sub
 
 

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 Sub UpdatePlate(ByVal currentPlate As Plate)
    currentPlate.NumberUpdates += 1
    Dim orginal = ChangeSet.GetOriginal(currentPlate)
    If orginal.Price <> currentPlate.Price Then
        ' add 1 dollar fee for changing price 
        currentPlate.Price += 1
    End If
    ObjectContext() _
        .AttachAsModified(currentPlate, orginal)
End Sub
 

In line 2, 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 3, we pull out the original value.. .this is the plate instance as the client saw it before it was updated.

In line 4-7, 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 8-9, we submit this change to the database.

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

Then write some codebehind..

 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
    PlateDomainDataSource.SubmitChanges()
End Sub
 
 

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 Name As String
 
Public NumberUpdates As Nullable(Of Integer)
 
<Range(0, 99)>
Public Price As Nullable(Of Decimal)
 
<RegularExpression("^http\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(/\S*)?$",
        ErrorMessage:="Please use standard Url format")>
Public Uri As String
 
 

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 Shared Function IsDescriptionValid(ByVal description As String) As ValidationResult
        If (description <> Nothing And description.Split().Length < 5) Then
            Dim vr = New ValidationResult("Valid descriptions must have 5 or more words.")
            Return vr
        End If
        Return ValidationResult.Success
    End Function
End Class
 

Then to wire this up to the description property…

 <CustomValidation(GetType(PlateValidationRules),
            "IsDescriptionValid")>
Public Description As String
 
 

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.

 <RequiresAuthentication()>
<EnableClientAccess()>
Public Class PlateViewDomainService
    Inherits LinqToEntitiesDomainService(Of 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.

 Partial Public Class User
    Inherits UserBase
    
    Private _FriendlyName As String
    Private _BackgroundColor As String
 
    Public Property FriendlyName() As String
        Get
            Return _FriendlyName
        End Get
        Set(ByVal value As String)
            _FriendlyName = value
        End Set
    End Property
 
    Public Property BackgroundColor() As String
        Get
            Return _BackgroundColor
        End Get
        Set(ByVal value As String)
            _BackgroundColor = value
        End Set
    End Property
 
 
 

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 Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click
    Dim context = WebContext.Current.Authentication
 
    UserDomainDataSource.SubmitChanges()
    AddHandler UserDomainDataSource.SubmittedChanges, AddressOf SubmittedChanges
 
End Sub
Private Sub SubmittedChanges(ByVal sender As Object, ByVal e As SubmittedChangesEventArgs)
    Dim context = WebContext.Current.Authentication
    If Not context.IsBusy Then
        context.LoadUser()
    End If
End Sub
 

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!

Silverlight and RIA Services: Implementing Search

BradA — Wed, 25 Nov 2009 19:11:51 GMT

Some of you likely noticed that my PDC09 demo included a stubbed out Search function that I didn’t really get to walkthrough during the talk. I thought I’d do a blog post showing how it is done.

To get started you need:

Visual Studio 2010 Beta 2
Silverlight 4 Beta (which includes RIA Services)

You can download the completed solution as well. and be sure to check out the full talk.

First let’s write a new method on the DomainService to return the search results. In this case I want to return any Plates who’s name matches (grouped by Restaurant) and any Restaurant who’s name matches.

 public IQueryable<Restaurant> SearchRestaurants(string term)
{
    //Find all plates that match, grouped by restaurant
    var restaurantPlatesList = this.ObjectContext.Restaurants
        .Where (r => r.Plates.Any (p=>p.Name.Contains(term)))
        .OrderBy(k => k.ID);
    foreach (var restaurant in restaurantPlatesList)
    {
        var plateList = ObjectContext.Plates
            .Where(p => p.RestaurantID == restaurant.ID)
            .Where(p => p.Name.Contains(term));
        foreach (var plate in plateList)
            restaurant.Plates.Add(plate);
    }
 
    //Find all restaurants that match
    var restaurantsList = this.ObjectContext.Restaurants
        .Where(r => r.Name.Contains(term) &&
                    !restaurantPlatesList.Contains(r));
 
    return restaurantPlatesList.Concat(restaurantsList);
 
}         
 
 

In line 1, you see that we are defining a new query that returns Restaurants… this one has a different name, and takes a search term as an argument.

In line 4-6, we are getting all the restaurants that that have any plates that match the search term.

In line 7-14, we are looping through all those restaurants and manually adding the plates that match to the collection we will return. Effectively, we are manually creating the instance in just the shape we need it for the client.

In line 17-18, we are getting the Restaurants that match and that are not already included.

and finally, in line 21, we return the concatenation of the two queries.

Notice that this query is designed to return Restaurants AND the Plates that are related. By default, related entities are not included (in order to save bandwidth).. so we need to go into the metadata file and explicitly include them.

 internal sealed class RestaurantMetadata
{
    [Include]
    public EntityCollection<Plate> Plates;

Now, in the Silverlight client. First we need to wire up the Search button on MainPage.xaml.. There we just need to follow the same pattern we saw in the earlier post:

 private void button1_Click(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(new Uri("/Search?term=" + searchBox.Text,
                            UriKind.Relative));
}
 
 

Then the search page, again we build it the same way as we saw in the earlier post, by simply drag and dropping from the data sources window. Notice that we now have two different query methods for Restaurants. So we simply select the right one and then drag and drop on the form as we saw in the earlier post:

After we get the UI laid out correctly you end up with a pager and all the columns set right.

Then wire up the parameter to the SearchRestaurants query method to the query string…

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

Now i’d like to display the Plates for each Restaurant that is returned. To do that, i’ll make use of the RowDetails feature of DataGrid.

 <data:DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <ListBox ItemsSource="{Binding Plates}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image  Source="{Binding Path=IconPath, Converter={StaticResource ImagePathConverter1}}"
                                    Margin="40,0,10,0"></Image>
                            <StackPanel>
                                <TextBlock  Text="{Binding Path=Name}" Width="400"
                                            TextWrapping="Wrap"
                                            FontWeight="Bold"></TextBlock>
                                <TextBlock Text="{Binding Path=Description}" Width="400"
                                           TextWrapping="Wrap"></TextBlock>
                                <HyperlinkButton Click="HyperlinkButton_Click"
                                                 Content="Details..."
                                                 NavigateUri="{Binding ID}" />
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
 
        </DataTemplate>
    </data:DataGrid.RowDetailsTemplate>
 

Run it and we get this sort of view…

Notice the URL includes the search term, so I can send this around in email to share my search results bookmark it for future reference.

Now, you might want to drill into the details on what of these plates… so let’s handle that “Details..” hyperlink. In the code behind for the search page, we handle navigating to the Plates page with a the right query string paramaters.

 private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    var button = sender as HyperlinkButton;
    var plate = button.DataContext as Plate;
 
    NavigationService.Navigate(
        new Uri("/Plates?restaurantId=" + plate.RestaurantID + "&" +
                "plateId=" + plate.ID,
        UriKind.Relative));
}
 
 

Now we need to make a slight tweak to the Plates page because it does no know about the plateId query string parameter.

 protected override void OnNavigatedTo(NavigationEventArgs e)
{
    //Handle RestaurantID
    plateDomainDataSource.QueryParameters.Add(
        new System.Windows.Data.Parameter()
        {
            ParameterName = "resId",
            Value = NavigationContext.QueryString["restaurantId"]
        });
 
 
    //Handle PlateID
    var qs = NavigationContext.QueryString;
    if (qs.ContainsKey("plateId"))
    {
        this.plateDomainDataSource.FilterDescriptors = 
            new FilterDescriptorCollection();
        this.plateDomainDataSource.FilterDescriptors.Add(
              new FilterDescriptor("ID",
                  FilterOperator.IsEqualTo, qs["plateId"]));
    }
}
 
 

The first few lines to handle the RestaurantID were already there, so we just needed to add the code to handle the PlateID.. Notice we don’t need to change the query method on the server for this, we just add a new where clause that will get sent to the server and executed there.

The result:

Again, notice the URL, something we can bookmark or send around in email, etc.

I hope you got something valuable from this walkthrough… You can download the completed solution as well and be sure to check out the full talk.

Have fun!