VBandi's blog

A Designer-friendly Approach to MVVM

2010-03-12T14:54:08Z

My new article, “A Designer-friendly Approach to MVVM” is up at Silverlight Show. Here is the intro:

“If you work with Silverlight or WPF, you have probably met the phrase “MVVM”. Almost everyone who is anyone in the WPF / Silverlight scene has their own MVVM framework, and their own way of explaining and teaching MVVM. Scary terms like IoC, Dependency Injection, Commanding Frameworks, Event Aggregators, Unit Testing, etc just roll off the tongue of the MVVM experts. This is one of the reasons why MVVM is intimidating for a lot of people. Still, you can create perfectly valid MVVM applications without even knowing what those terms mean. This post will show you my approach to MVVM, which is hopefully simple enough to get you started.”

So, head over to Silverlight Show, and let me know what you think!

Part 2 of my Blend Screencast Series is Online

2010-03-05T17:07:02Z

The second part of my screencast series “Transforming an Ugly Duckling into a Graceful Swan With Expression Blend and Silverlight - Part 2 Intro Animation” is now online at SilverlightShow.net. In this part, I am going to add some bling to the app – namely the Intro animation, the ability to skip it, and to replay it. The Intro animation itself is not created with Silverlight, so I will just use it as a video. This part takes heavy use of Visual States, Behaviors and Easings.

To see the article and the associated screencast, go to SilverlightShow.Net.

New Expression Blend screencast series

2010-02-11T22:41:24Z

I have begun new series of screencasts on SilverlightShow.net. Here is the expert:

“As I promised earlier on Silverlight Show, this screencast series will show how to create the showcase application shown on www.response.hu (you may want to read the interview to get some background information on the project). The screencast series shows a real life example of how designers can add value to a project, and how a developer can support this effort by creating small, reusable behaviors that allow the designer to tweak things to shape the end result to be exactly as he wanted it.”

I would very much love to hear your opinion! Please leave feedback at the article, and let me know what you think about the format, the depth and the general direction it is going.

Extract styles in Expression Blend

2010-01-19T15:34:21Z

You may have found yourself in a situation when you want to convert an implicit style in XAML into a resource. Until today, I did it with creating the new style, and adding the setters manually. But I thought “There must be some way in Expression Blend to do this better”. I couldn’t find anything on the net, so I started to look for the solution myself. And yeah, I found it… Here is how it is done:

Suppose, you have a TextBox that has a lot of settings on it:

Now, you want to take the font settings, the drop shadow and the Black-Blue foreground gradient and reuse it on another TextBlock. Here is where extracting the style comes handy.

First, select the TextBlock, and choose Object / Style / Create Empty from the menu. There is NO right click option for this command! Then choose a name for your style resource.

Now, we are in Resource editing mode:

On the Properties tab, you can see all our settings.

But the Property Peg is empty (gray). What happens if we click on it?

Now, if we click on “Convert To Local Value”, the Peg turns white, and the Foreground gradient will be moved to the style!

You can see that the TextBlock does not contain the Foreground property anymore, but the TextBlockStyle1 style does. We can go and “Convert to Local Value” for all properties we want in the style. Even the drop shadow and the Perspective transform can be extracted this way.

Here is the end result:

Nice and clean XAML for the TextBlock, and the style is ready to be reused. Great!

Interview with Silverlightshow.net and a sneak preview of my next articles

2010-01-16T13:51:11Z

SilverlightShow recently published an interview with me. They asked about how the showcase app at www.response.hu came to be, and asked me to talk about two of my company’s award winning projects: The Muvesz WPF application (Architecture Journal article is here), and Zoomery, our Silverlight deep zoom framework.

In the interview, I also revealed that I will be doing a series of articles / screencasts on how the www.response.hu showcase app was built. The focus will be on using Blend with tips and tricks, and creating custom behaviors to give designers maximum control over the user experience. Essentially, we will go from this:

To this:

The first article should be up on SilverlightShow within a few weeks. I’ll keep you posted :)

What Silverlight deed am I proud of in 2009?

2010-01-11T23:54:20Z

John Papa asked me (and other Silverlight MVPs) what was the one BIG thing we did around Silverlight in 2009. Here is what I had to say:

As a few of you may know, although I have technical background, I am really in love with Silverlight (and WPF) for the user experience it makes possible. I think my BIG thing was that I spread the love on tons of Silverlight and related topics during 2009. I had a 4 hour talk about UX, sketching and Sketchflow at the Architecture Forum; 4 hour talk about Silverlight, another one on NUI at the same place (and I got the highest ranks for the sketching talk out of 8 presenters). I talked about Silverlight 3 beta, and later about Silverlight 3 the next working day after it was released – in the middle of the summer, still over 90 people came. I participated in the local Silverlight 3 launch event later, in front of 500 people with sessions about SL3 and Blend. I had several other talks about Blend and Sketchflow, including a 5 minute(!) Sketchflow talk in front of Linux and Mac maniacs – and they liked it! I launched the Hungarian Silverlight User Group in December, and we already have 35 members, probably because they know me from the conferences. I wrote the WPF chapter of the book “Visual Studio 2010 and .Net Framework 4 Six-in-one” (http://www.amazon.com/Visual-Studio-2010-NET-Six/dp/0470499486), and convinced the editor to turn it around, focus on UX and Silverlight, and only add a little bit of WPF at the end. But the biggest result from all this preaching about UX and the great technologies that make it possible to concentrate on UX, is that I believe the Hungarian audience is starting to get it. They are realizing that getting developers to do UI may not be the best idea. They are realizing, that UX will be the differentiating factor for their products in the middle term. And spreading this word is my passion. Towards the last months of 2009, I started to receive feedback that the transition has started to happen in the minds of Hungarian developers and managers. This is probably what I am most proud of.

Another big thing for me (but maybe not for Silverlight :) ) is that I became part of this awesome group [Silverlight MVPs], and had the chance to meet many of you online, or even in person. 33 days from now, I will be sitting on a plane to meet even more fellow MVPs at the Summit. Can’t wait!

No more magic strings with VisualStateManager.GoToState

2009-12-29T22:00:00Z

This may come as no surprise for some, but only today have I discovered a way to get rid of the magic strings when changing states with the VisualStateManager.GoToState method. The way Microsoft and many others were explaining the Visual State Manager is via a sample code like this:

VisualStateManager.GoToState(control, "statename", true);

Unfortunately, this introduces a magic string, namely “statename”. The problem with the magic string here is that it creates a tight contract between the XAML (where the states are usually defined) and the code behind. It is very easy to mistype the name of the state in either place. Also, if the state is renamed by the designer in Blend, you get no compiler warnings or even runtime exceptions to point out the error.

Here is a small XAML sample using the Visual States to move an ellipse to the right of a Grid:

   1:      <Grid x:Name="LayoutRoot"  Background="LightBlue">

   2:          <VisualStateManager.VisualStateGroups>

   3:              <VisualStateGroup x:Name="SG1">

   4:                  <VisualStateGroup.Transitions>

   5:                      <VisualTransition GeneratedDuration="00:00:01">

   6:                          <VisualTransition.GeneratedEasingFunction>

   7:                              <ElasticEase EasingMode="EaseOut"/>

   8:                          </VisualTransition.GeneratedEasingFunction>

   9:                      </VisualTransition>

  10:                  </VisualStateGroup.Transitions>

  11:                  <VisualState x:Name="SG1Normal"/>

  12:                  <VisualState x:Name="SG1EllipseRight" >

  13:                      <Storyboard>

  14:                          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

  15:                              <EasingDoubleKeyFrame KeyTime="00:00:00" Value="320"/>

  16:                          </DoubleAnimationUsingKeyFrames>

  17:                      </Storyboard>

  18:                  </VisualState>

  19:              </VisualStateGroup>

  20:          </VisualStateManager.VisualStateGroups>

  21:          <Ellipse x:Name="ellipse" Fill="Red" Stroke="Black"

  22:                   Height="116" HorizontalAlignment="Left" Margin="50,98,0,0"

  23:                   VerticalAlignment="Top" Width="235" RenderTransformOrigin="0.5,0.5" >

  24:              <Ellipse.RenderTransform>

  25:                  <TransformGroup>

  26:                      <ScaleTransform/>

  27:                      <SkewTransform/>

  28:                      <RotateTransform/>

  29:                      <TranslateTransform/>

  30:                  </TransformGroup>

  31:              </Ellipse.RenderTransform>

  32:          </Ellipse>

  33:      </Grid>

The key to my “discovery” is realizing that the VisualState elements have an x:Name attribute, and therefore fields get generated for them in the codebehind. So, instead of

VisualStateManager.GoToState(control, "SG1EllipseRight", true);

We can write:

 VisualStateManager.GoToState(this, SG1EllipseRight.Name, true);

Now, if the state gets renamed, at least we get a compiler error, and there is no way that you can mistype the state name.

Another advantage of accessing the states by name is that now it is easy to find when a state transition animation ends (like the one above). Just use the VisualState.Storyboard.Completed event:

SG1EllipseRight.Storyboard.Completed += (sender, args) => 
      MessageBox.Show("Ellipse move finished!");

That is two big problems that I had with Visual States solved. Now if only I could get the current state somehow…

Here is a little bonus:

You can also create some extension methods on VisualState as it may fit your way of thinking better:

    public static class VisualStateHelper
    {
        public static void Activate(this VisualState state, Control control, bool useTransitions)
        {
            VisualStateManager.GoToState(control, state.Name, useTransitions);
        }

        public static void Activate(this VisualState state, Control control)
        {
            state.Activate(control, true);
        }
    }

Now, to activate the SG1EllipseRight state above, all you have to write is:

SG1EllipseRight.Activate(this)

That’s all, folks!

Make a Silverlight TextBox update its binding on every character with a Behavior

2009-12-24T00:06:00Z

An old problem with Silverlight TextBox is that it only updates its binding when the TextBox loses focus. This can cause a lot of problems, especially for LOB applications. Following a short discussion on Twitter with Rob Eisenberg (@EisenbergEffect), I tried to create a proof-of-concept behavior that can help ease this pain, at least until Silverlight gets an UpdateSourceTrigger that can handle the PropertyChanged value. (You can read more about the problem Rob had on Connect).

The behavior itself is very simple:

   1:      public class TextBoxUpdateBehavior : Behavior<TextBox>

   2:      {

   3:          protected override void OnAttached()

   4:          {

   5:              base.OnAttached();

   6:              AssociatedObject.TextChanged += AssociatedObjectOnTextChanged;

   7:          }

8:

   9:          private void AssociatedObjectOnTextChanged(object sender, TextChangedEventArgs args)

  10:          {

  11:              var bindingExpr = AssociatedObject.GetBindingBLOCKED EXPRESSION;

  19:              AssociatedObject.TextChanged -= AssociatedObjectOnTextChanged;

  20:          }

  21:      }

The key is in the TextChanged event handler. We simply get the Binding expression for the Text property of the TextBox, and call UpdateSource on it.

I tested the behavior with both UI-2-UI binding and with binding to a ViewModel. Both work flawlessly, and they even work at the same time as this screenshot shows:

As you can see, the cursor is still in the TextBox, so I have not moved the focus away after typing.

Here is the entire XAML:

   1:  <UserControl

   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   5:      mc:Ignorable="d" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:local="clr-namespace:SLTextBoxUpdateBinder" x:Class="SLTextBoxUpdateBinder.MainPage"

   6:      d:DesignWidth="640" d:DesignHeight="480">

   7:      <UserControl.DataContext>

   8:          <local:TestVM />

   9:      </UserControl.DataContext>

  10:      <Grid x:Name="LayoutRoot">

11:

  12:          <StackPanel>

  13:              <StackPanel Orientation="Horizontal">

  14:                  <TextBlock Text="Binding using ViewModel: " Margin="10"/>

  15:                  <TextBlock Text="{Binding TestProperty}" Margin="10" />

  16:                  <Rectangle Fill="Black" Width="1" />

  17:                  <TextBlock Text="Binding using UI-2-UI binding" Margin="10" />

  18:                  <TextBlock Text="{Binding Text, ElementName=tb}" Margin="10" />

  19:              </StackPanel>

  20:              <StackPanel Orientation="Horizontal">

  21:                  <TextBlock Text="Enter text here to see it shown above. No need to tab away!" Margin="10" />

  22:                  <TextBox x:Name="tb" Text="{Binding TestProperty, Mode=TwoWay}" >

  23:                      <i:Interaction.Behaviors>

  24:                          <local:TextBoxUpdateBehavior/>

  25:                      </i:Interaction.Behaviors>

  26:                  </TextBox>

  27:              </StackPanel>

  28:          </StackPanel>

  29:      </Grid>

  30:  </UserControl>

I have attached the solution to this blog post. Marry Christmas everyone!

Another video from TechEd 2009

2009-12-18T16:17:18Z

Karen Young, the EMEA MVP lead has interviewed me last month in Berlin about who I am, what I did there and why I think being a developer is exciting. Here is the video:

Discovering Silverlight 4 – What is new?

2009-11-18T21:24:00Z

Today, at the PDC in Los Angeles, Scott Guthrie revealed Silverlight 4 in his keynote. The painful silence enforced by the NDA is now over, and I can talk about all the cool new stuff on Silverlight 4!

To me, the most amazing thing is how much the Silverlight team has been listening to the community. Just take a look at the Top 10 most requested SL4 features at: http://silverlight.uservoice.com/pages/4325-feature-suggestions, and compare it with the whatsnew document - 8 out of the top 10 requests are in the Beta, except for the two where iPhone and other device support is discussed. This is an amazing proof that the Silverlight Team is really customer-driven, congrats!

So, here is the official “Summary of Features New in Silverlight 4”, with some of my additional explanations:

Runtime: Silverlight 4 is based on the CLR4 runtime. This means that we can use all the cool dynamic stuff from C# 4.0 – much easier to communicate with DOM objects, Javascript, etc.

Out of Browser Apps
- Elevated Privilages Support – this is really huge, removes most of the security restrictions. A great new way to write more full-featured cross platform applications!
  - Cross Domain Networking Access – no more proxies for you Twitter client…
  - Full file path from Open/SaveFileDialog
  - No User-Initiation Requirement for Full Screen, Open/SaveFileDialogs – however, you can only access files directly within the My Documents folder or the Mac equivalent
  - COM Interop: obviously, this is Windows only. C# 4.0 dynamics helps here a lot…
- HTML Hosting Support – it would really be useful within the browser as well, but there were too many security considerations to make it happen in this release. Still, I can’t wait to see what people will cook up with this one
Media
- WMS Multicast Support – Save your server’s bandwidth when streaming videos!
- MP4 Playback Protected by PlayReady DRM – Should help ease Hollywood’s mind a little bit…
- Offline DRM – Download songs and movies, and play them without a network connection on the plane
- Output Protection – again, for helping Hollywood accept online media…
- WebCam / Mic Support – This is raw access only to the webcam or microphone data – nothing fancy like streaming it to a server, etc. I am sure, the community will come up with that pretty soon…
Printing – The number one requested feature, that was the biggest setback when discussing Silverlight based Line Of Business applications.
Text
- RichTextBox
- Arabic and Hebrew Text Support – I had a few people specificly asking for this while helping out at the “Ask The Experts” booth during the TechEd in Berlin. I wish I could tell them what I knew… NDA sometimes sucks
- IME Improvements for TextBox
- UIElement.TextInput event – for when you want to validate or update on text changes in your textbox
Controls, ControlModel, Layout
- Theming via Implicit Styles – No more need to specify styles for each and every button in your app
- ViewBox – This extremely useful layout control is now mover to the the core runtime from the Toolkit
- MouseWheel Support on ScrollViewer, TextBox, Combobox, Calendar, DatePicker – Yeah! I’ve missed it a lot
- RTL Layout via UIElement.FlowDirection property – this one will also make some countries’ developers happy
- VisualStateGroup.CurrentStateGroup property – no more need to follow / guess states yourself. Altough a well-behaving ViewModel should already know the Visual State of the View…
- CommandProperty on ButtonBase & hHyperlink – Commanding is slowly getting there
- SelectedValue and SelectedValuePath properties on Selector – very convenient thing for simple dropdowns, etc.
- Drop files onto Silverlight from Exporer or Finder (Mac) – no need to browse, just drop files onto Silverlight!
Networking
- Memory Usage Fix During Progressive Downloads – it is always good to fix memory usage
- Automatically adding Referrer Header – behaving like a good citizen
- Authentication Support on ClientHttpWebRequest – this one was really missed
Tools Support
- Dispatcher Support on the Tools Design Surface
Databinding improvements
- DataBinding Support for DependencyObjects – Yeeeey! Now you can bind to behaviors, and so much more. This one opens up quite a few new possibilities
- IDataErrorInfo Support
- StringFormat, TargetNullValue & FallBackValue properties on Binding – This can save a lot of error handling code and replace basic converters
- ObservableCollection<T> constructor that takes INumerable or IList – Quickly fill up your ObservableCollection with data.
- IEditableCollectionView
- Grouping support on CollectionViewSource
SDK
- Astoria 2.0 Support
- MEF – I am really interested in how this one works. As Yoda would say: “A lot of extensible Silverlight Applications in the future I see”.

This is a pretty impressive feature set, especially as it has only been 4 months since the release of Silverlight 3. What do you think?

My Teched Online talk: “Why Take User Experience Seriously?” is online

2009-11-18T06:52:38Z

During TechEd Europe, my friend István Novák interviewed me about user experience. Here is the resulting video:

Why Take User Experience Seriously?

The software development industry is changing; the focus is being shifted from technology to the users. Silverlight MVP András Velvárt shares his thoughts on why UX focus is a must for development teams, and what you can do to incorporate UX into the development process.

In return, I also interviewed István, and he talked about Deploying Visual Studio 2010 Extensions:

Due to the COM roots of Visual Studio and the lack of the right tool set, deploying Visual Studio extension requires "creativity" from developers. Visual Studio 2010 is a great leap on this field with its brand new tools and technologies, including Extension Manager, Visual Studio Gallery and VSIX. This discussion will provide an overview of these tools and demonstrate how developers can leverage the synergy of these tools to remove the deployment pain.

Silverlight is slowly becoming the real WPF/Everywhere

2009-09-28T14:49:22Z

Maybe some of you know, that originally Silverlight was called WPF/E, or WPF Everywhere. This meant that it would be a cross-platform, cross-device little brother of WPF. You could see a few videos years ago on Channel9, showing off some working Silverlight Mobile applications (they were pretty slow though). But no questions regarding when this would be available was answered – until now.

During the Silverlight Firestarter event, we could hear Brad Abrams say that Microsoft’s goal was to get Silverlight on all three screens, and the cloud. The cloud is of course Azure (but would work with other environments, too), and the client side environment would be Silverlight. The three screens are the desktop, the mobile phone and the television. Since then, quite a few articles have appeared, and MS officials have officially stated that “We are 100% dedicated to seeing Silverlight" across all three screens”. (Microsoft will push Silverlight 3.0 across all three screens).

Why is this interesting? You can use the same .net programming language, the same rich design tools and graphics capabilities to create great looking, usable and “rich” applications – be it a mobile phone, a TV, the web or the desktop. The goal is to make all these runtimes binary compatible. The applications can be fed with data from the same cloud, or store their data on the cloud. You can start viewing a movie at home on the TV, and finish it on the bus on your phone (or in a worse case, in the office…) We can use .Net RIA Services or WCF… Finally (hopefully) it won’t be a pain in the backside to develop cool and of course useful applications for mobile. Of course, from a UX point of view, a TV and a touchscreen UI needs totally different design.

Another related news is that Microsoft is going to work with Intel, independently of the Mono effort to create a Silverlight runtime for the Moblin platform. Silverlight for Moblin is going to be highly optimized for the Atom processor. (Moblin is a Linux based OS and app. stack for Mobile Internet Devices, netbooks, nettops, car computers, etc.).

Finally about the when: it seems like the next step may be Silverlight Mobile (for Nokia S60 and Windows Mobile 7). Unfortunately, it is unknown whether Silverlight will be working on WM6 – but the leaked baseline hardware requirements for WinMo7 seem to be strong enough to make Silverlight run decently. Maybe we will know more during the PDC in autumn!

The new Silverlight mantra is: cross-browser, cross-platform, cross-device. It seems we are looking forward a great time to develop rich applications for all devices!

UX thoughts – Learning Phase Tools III

2009-09-18T08:46:40Z

In my last post in the UX thoughts series, I wrote about how allowing the user to experiment and being consistent with the already existing knowledge of the user can help learning to use your software.

Reusing existing applications

If we are taking the consistency thing a bit further, the next step is to reuse already existing applications. For example, if you are creating a CRM (Customer Relationship Management) software, you may want to consider putting it inside Outlook. Chances are that your users already have a lot of contact data in Outlook – why not just add your unique features inside Outlook, and reuse their existing data and their knowledge of Office instead of inventing something totally new? Users will love the fact that they don’t have to reenter their data in a different system, and you will not have to build half of Outlook and Exchange Server from scratch.

Physical devices

This is the keyboard I am using at home. It is fairly convenient, silent and feels good to type on. But from the UX point of view, what is most interesting is that it has small text on some of the keys. For example, on the front face of the “S” key, there is “* Save”, and on the front face of the V key there is “* Paste”. What happened here is that the most common shortcut keys of the Windows world have been transferred to the physical world – and computer newbies can learn these shortcuts just by looking at their keyboard!

Function search

Even in this series, I have often praised the Ribbon and said that I find it to be a great step forward in terms of UX. However, there is one big drawback of the Ribbon: it is new. Being new means that people have to get used to it. getting used to something takes time, and if you were fairly familiar with the old this can be a frustrating experience. There will be fallback on your productivity, you will hunt for features that you knew where to find in the old menu system by heart. This made quite a lot of people to hate Office 2007 and the Ribbon.

Microsoft has built into Office 2007 a feature called Office 2003 access key. For example, when you press ALT+I in Word 2007, it will pop up a small window, and tell you to continue your shortcut key sequence. This works OK, but most people were using the menus and toolbars, not the shortcut keys even for trivial tasks, like undo. Also, there is no way in Office 2007 to learn where things have been moved to.

Microsoft has of course realized this, and has launched a tool called “Interactive: Word 2003 to Word 2007 command reference guide”. A horrible name, but the biggest problem is that it is online, and not built into Office. By the time the user starts to look for help on migration of his knowledge online, he will be very frustrated – and even then, finding this tool is not simple. The tool itself works OK though: it shows you a Flash version of the Office 2003 UI, and tells you where the commands and toolbar buttons, etc can be found in the new Office.

So, what is the solution to this problem? Search, of course. But let’s not search in Help (which is also a different application), let’s search in the Ribbon:

This is the Search Commands add-in. You just type in the search box, and it shows you the matching commands, buttons, etc in the results, allows you to get more help. But the most important part is that you can immediately activate the commands, and also learn where to find it later without search. Another noteworthy aspect of the Search Commands is that searching goes beyond just the name of the command itself. For example, in PowerPoint, if you search for “screen”, it will show how commands to change monitors, window management, etc. This makes the search functionality a lot more than just searching for commands – if you would like to know whether the application supports a given feature at all, you can search for the feature, and receive immediate feedback, with the added bonus of being able to immediately execute the command or learn where you can find it. There is one big problem with the Search Commands Feature: it is not part of the Ribbon, but only an unsupported add-in. That’s a shame as I am sure that a lot of the initial frustrations with the Ribbon and Office 2007 could have been avoided if Search Commands was in Office out of the box. And it is not included in Word 2010 CTP either… hear that, Microsoft? Put it in the product!

Another example where search helps during the learning phase (and the productivity phase, too) is Window Vista’s Control Panel, which has been further extended in Windows 7. The problem with XP’s Control Panel is that there are so many little applets, you are often hunting among them to find the one you need. And even then, the functionality you need can be buried so deep in tabs and sub-sub dialogs that you never found them. You had to follow the sometimes twisted logic of the original developers, and hope that you can figure out which category THEY thought the setting belonged to. Where do you change the IP address? In Computer Setting? Or Network Settings? Or Network Card settings? Or Communications?

In the new Control Panel, you can just type “IP” in the search box, and it immediately takes you to the right applet. There is still a considerable amount of guessing to do after this as you have to select the right network adapter, and open two dialog boxes to find the proper setting, but still – this is a huge step forward both for learning functionality and then for accessing it quickly.

Discovering Silverlight 3 – 5 minutes of RIA Services

2009-09-08T14:58:27Z

In July, I gave a talk about Silverlight 3, and even though the entire session was 3 hours (and two bottles of mineral water) long, I only had 5 minutes for RIA Services. So, my only goal was to shed some light on the topic, and scratch the surface of the surface… Let me sum that part up here. Disclaimer: this is just a quick blog post answering a forum question, by no way a proper RIA Services intro.

The official “What is .Net RIA Services” summary from the download page:

“Microsoft .NET RIA Services simplifies the traditional n-tier application pattern by bringing together the ASP.NET and Silverlight platforms. RIA Services provides a pattern to write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations. It also provides end-to-end support for common tasks such as data validation, authentication and roles by integrating with Silverlight components on the client and ASP.NET on the mid-tier. “

The way I like to put it:

.NET RIA Services simplifies communication between the client and the server, handling object transfer, validation, authentication and basic CRUD (Create, Retrieve, Update, Delete) operations and asynchronous calls almost transparently.

Data transfer between the client and the server has always been tricky. There is a lot of plumbing code to write: encoding, remote calls, error handling, asynchronous issues, validation (you have to validate stuff on the server for security and on the client for instant feedback and user experience). Let’s see how .NET RIA Services handles some of these!

Let’s have a single table from our old friend, the Northwind database in a LINQ to SQL dbml file:

(Yeah, that’s me :) – btw, sorry for the quality of the code snippets below, they are just frames from the same presentation video)

Using the Visual Studio .NET RIA Services wizards (for details, please check the tutorial on the same download page – this blog post is by no means a step by step introduction), let’s create a NorthWindService.cs class. This is still on the server side:

You can see that the NorthWindService class is inherited from LinqToSqlDomainService. .NET RIA Services can also connect to Entity Framework or even POCO object stores if you wish.It has functions like “GetCategories”, “InsertCategory”, etc, all generated automatically:

Also note the EnableClientAccess attribute – that means that members of the NorthWindService class are (more or less) exposed to the client. This means, that after building, the code generator of the .NET RIA Services runs, and we get a lot of code generated on the Silverlight side that allow for using the same classes (Category in this case), with the same properties, and the CRUD functionality on the client side. Even validation logic and other custom code can be copied to the client! As we use the same .Net Framework on both the client and the Server, this source code reuse is possible and trivial.

To actually show and download the data from the server, this is all I have to do on the Silverlight side:

myDG is just a simple DataGrid, with absolutely no customization, only its name is provided in XAML.

If we run the application now, this is what we see:

This is an empty Datagrid, but if you watch closely, you can see that the fields of the Category class are already displayed as columns. So, at this moment, the Datagrid has an ItemsSource – a list of Category objects, but with zero items. If we wait for another second, the list populates:

What happened here? Well, the server needed a little time to compile everything and get the categories from the database. When it finished, it returned the resulting Category objects to the Silverlight client, which displayed it automatically. A lot of magic is happening behind the scenes: the RIA Services callback happened asynchronously, it filled the collection that was bound to the Datagrid’s Itemssource, and finally the Datagrid displayed the categories. All without any specific code after the load operation started!

What happened on the SQL Server in the meantime? Let’s fire up an SQL Server Profiler, and see!

This is a perfectly normal SQL Query that you or I would write – maybe a bit more [] and t0 though. :) So, the client side “nwc.GetCategoriesQuery” travelled to the server, and this is the SQL Query that was run on the SQL Server. Let’s make the query a bit more complicated!

You see that through the power of Intellisense, LINQ and .NET RIA Services, we can write a strongly typed query against the Northwind database within the client application!

So, we only want to get the categories that have “C” as their first character.

And here is the result with the single such category displayed:

Yeah, sure, no problem – it must have downloaded all the categories, and filtered on the client side, right? Wrong! Let’s see the SQL Profiler what happened on the server!

Nope – although the query is now executed via sp_executesql, we have a nice Where clause here even the StartsWith has been properly translated to LIKE. Pretty powerful, isn’t it?

Remember, this is just the scratching of the surface of 0.1% of the .NET RIA Services Framework. But hopefully, it is enough to get you interested. For more information, read the downloadable intro material, check out posts from Nikhil or Brad Abrams’ series on a Business Apps Example.

Can I jump to Silverlight 3 now? What do the stats say?

2009-08-11T20:58:39Z

As you probably know, Silverlight 3 was released exactly a month ago. So, is it safe now to work with the new Silverlight 3 features or should you stay with Silverlight 2 for a while to make sure that people with Silverlight installed can view your site without having to upgrade first to SL3?

There is one website that I know of that provides independent data on Flash, Java and Silverlight plugin penetration – it is www.riastats.com. I know it is objective or at least definitely not pro-Microsoft because there has been a heated debate a few months back between the owner of the site and a Microsoft PM on whether riastats.com uses the right methodology… So, I was checking it on a daily basis to see how SL3 is taking off. It took off slowly… then SL3 was put onto Microsoft Update. On pretty much the same day, RiaStats stopped collecting new data, so everybody was in the dark.

Well, Riastats started working again earlier today, so now we have new data from yesterday, and it blew my mind: Silverlight 3 is up at 23%, while Silverlight 2 is down at 8%. So, in general, every third computer or device (including devices like the IPhone for which there is no Silverlight) attached to the internet has some version of Silverlight installed. 1.5% stuck at SL1, 8.25% is at SL2, and the majority has already upgraded to SL3 (23.25%). The big X you see on the picture shows how SL2 installations were upgraded to SL3 in a matter of weeks.

So, what is the answer to whether you can target Silverlight 3 in your projects, or if you should wait and keep your things with SL2 instead? I think it is clear – Go with Silverlight 3!

A quick note about Microsoft Update: it is not the same as Windows Update, although it uses the same infrastructure – it is the update service for all non-Windows MS applications, like Office. Also, automatic update for Silverlight plugins is opt-in, so we can’t blame Microsoft that it has used its OS monopoly to distribute the Silverlight plugin.

A quick note about Riastats.com: the site starts with a Pie Chart, showing Silverlight 3 at 1.5%. Please note that this is a 30 day moving average, so don’t expect it to show any meaningful data for at least a month with regards to SL3 penetration. Use the Line Chart instead to see the diagram on the left.