Andrej Tozon's blog

On this year’s Bleeding Edge conference I had a talk on debugging with my fellow SQL Server MVP. While he covered some common pitfalls, awaiting developers on the SQL Server side, I focused on the Silverlight side of development and debugging:

• possible issues with application deployment
• options and strategies for returning WCF faults with Silverlight 3
• using windbg with Silverlight application to track its execution
• finding data binding failures and memory leaks

This was our sample application: Bleeding Edge Shoppe[opens in new window]

[The full source code will be available shortly.]

And the slide deck:

When taking about data validation in applications, I usually describe the validation as the five-stage process or, put differently, five lines of defense against invalid data. In this post, I’ll write about the first line of defense – preventing the user entering the wrong data.

1. Preventing invalid input

This one’s logical, really. A user enters the data through input fields on some kind of input form, so naturally this would be the best place to put our first line of defense.

The first line of defense is about preventing user to enter invalid data into input fields. This doesn’t mean that if done proper and thorough, we wouldn’t need other places to check the data; it’s just the best place to filter out majority of faulty input that can happen during manual data entry. The goal here is to catch as many invalid data as possible, as soon as possible. This wouldn’t result only in better application responsiveness (no unnecessary trips to the server), the immediate feedback of invalid entry will provide a better user experience, possibly even educate the user to learn from her mistakes.

So, what are we talking about here?

A simple TextBox might not be the best solution for entering only numeric data. Seeing the TextBox on the input form, the user might expect she can enter anything she likes into the box, even if the label, put close by the input box, is saying to her: “Enter your age”. A kind of a NumericUpDown control visually gives user a much better idea of what should go into that box, plus she gets an option of manipulating that value; in this case, it’s adjusting the value with the Up and Down keys. In Windows Forms, for example, I liked to use a TextBox with a calculator dropdown for entering decimal data. Masked input boxes also work well, when you want the user to enter the data in a specific format.

If you don’t want to provide any visual clues that only numeric data should be entered in the input field and go for the standard TextBox, it’s very much recommended to handle the input for yourself and only allow numeric keys through. This is usually done by hooking into KeyDown event – either in codebehind class, or even better – with a custom TextBox behavior.

Yet another good example of filtering the data input to the underlying data type, is the DatePicker control. You can usually set the range of valid dates that can be selected and control whether or not date entry is required. With Silverlight DatePicker, it appears that date entry is always optional, even if bound to a non-nullable DateTime data type. Tabbing out of the DatePicker will leave the input box empty, but the bound property will still contain the old value. Hooking into DateValidationError or BindingValidationError event wouldn’t help so I tried to handle this case by manipulating the Selected date in the SelectedDateChanged event. Instead of doing it in the codebehind class, I created the following behavior:

public class RequiredDatePickerBehavior : Behavior<DatePicker>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.SelectedDateChanged += OnSelectedDateChanged;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.SelectedDateChanged -= OnSelectedDateChanged;
    }

    private void OnSelectedDateChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count == 0 && e.RemovedItems.Count > 0)
        {
            AssociatedObject.SelectedDate = (DateTime)e.RemovedItems[0];
        }
    }
}

… which can be used as:

<controls:DatePicker SelectedDate="{Binding BirthDate, Mode=TwoWay}"
                     Grid.Row="1" Grid.Column="1">
    <i:Interaction.Behaviors>
        <local:RequiredDatePickerBehavior />
    </i:Interaction.Behaviors>
</controls:DatePicker>

Attaching this behavior to the DatePicker will revert the date to the last valid value in case of deleting the text from the input box and thus making the DatePicker non-nullable.

Behaviors in general are a great way to extend an existing type (or types) of control and can be used for a variety of things. In this post I’ve shown a way to enhance the Silverlight DatePicker control to prevent entering empty values in cases when date is required. Remember next time you’ll find yourself coding KeyDown or similar control event handler in page’s codebehind class: consider writing a behavior!

To be continued…

Last night, while working on a sample Silverlight application with Blend, I asked myself – where’s the Use GPU Acceleration option? Sure you can set the parameter on a Silverlight object directly in HTML or enable it through Out-Of-Browser Settings in Visual Studio 2008, but how about Blend?

The answer is that Blend enables GPU Acceleration automatically when one ticks the Enable Application Outside Browser option.

And what’s with the Preview Application Outside Browser option? Let’s see what happens when we run the application from Blend.

Uhum… Blend asks that we should install the application first. OK, we’ll click Yes and run once again, still in the browser. Once started, right click, install the application and close it. Now the application is installed and the project is configured to run it out of the browser. From now on, every time the application is started from Blend, it will run out of the browser with GPU Acceleration enabled.

Last week I attended a local Microsoft Partner Meeting to talk about using Silverlight (3) to build LOB applications. About half of the talk was slides, and the rest was app demos. Source code for some of my demos are available through some of my previous blog posts, and here’s the slide deck [in Slovenian language]:

Next week I’m presenting Silverlight 3 in Kiberpipa. It’s free entry and you’re kindly invited.

This is the beginning of what’s going to be yet another series focusing on developing LOB applications with Silverlight. I’ve been wanting to write more on this topic since NTK, but there was always something else… In the series, I’ll build a sample application, similar to what I’ve been presenting on NTK. Each post will focus on a specific area, technique or a trick, and show the actual implementation in the sample LOB app, following different patterns I’ve been using in application development in past couple of years. Any comments are welcome.

In this first post, we’ll set up the initial environment for the sample app and write a few words about sharing entities between client and server. This has already been discussed a lot, so I won’t get into greater detail, I’ll just focus on the main points.

Creating a new project

When creating a new Silverlight project, Visual Studio will ask you about creating the accompanying web project as well. The web project will host our data services so it’s kind of important to leave it be.

Adding the entities projects

Create two projects that will host the shared entities. One project will be referenced from the web project (server side), while the other one will be referenced from the Silverlight project (client side). Entity sharing is done in two steps. First is the physical sharing of the files – the “main” entity project would contain the original entity files, while the “supporting” entity project would only host copies of the entity files. Choosing “Add as Link” option in Visual Studio’s Add Item dialog will create a “copy” of the original file, meaning that you’re going to have to change the contents of the file in one place only, while it will be compiled in two different projects.

A couple of notes:

• I usually choose the server side entity project to include the original files, and the client side would include the linked files.
• When adding new entities to the main entity project, add the linked files to the other project before regenerating the service proxy; creating the proxy before that will make a proxy copy of the entity class which may result in some confusion when working with that entity.
• It’s a good thing to declare your entity classes as partial, because you can later extend them with specific functionality on either server or client side.
• When I started on my LOB apps several months ago, I had the following rule regarding marking entities with WCF serialization attributes: when all properties are going to be serialized, don’t mark any; when at least one shouldn’t be serialized, mark those, which should be. Later in the project I found out that it’s much more future-proof and consistent to always mark properties with proper serialization attributes.
• As I’m seeing this is not a general practice with Silverlight developers, I still always separate the WCF contract (interface) from the service implementation. We’ll se how/if we can benefit from such approach later in the series.

So far, the solution looks like this:

We started with a single entity called Person and the DemoService will be used to access the “database”. To keep it simple, the Database class will pose as an in-memory database.

Creating the client

The sample app uses a typical MVVM approach – a ViewModel, instantiating a service proxy and handling the communication with the service, with a View, responsible for displaying the data. The user can browse through the list of persons by clicking their name in the ListBox, while full details are being displayed next to it. I’m not using any real commanding yet, ListBox’s SelectedItem is bound two-way to appropriate VM property, which is also the source for the detail UI. All-in-all, very basic and common setup, which will be the starting ground for all next articles in the series. In the next part, we’ll add a support for editing a Person entity.

Run the application

I’ve just started discovering Prism, mainly as a tool to help me use the MVVM with my apps. That said, by now, Prism proved itself with:

• Support for Commanding
• EventAggregator
• Unity integration
• Targeting both WPF and Silverlight

EventAggregator is great for inter-VM communication, but only when subscribing VM(s) is/are alive (instantiated) when publishing VM publishes the event. I may be wrong here (please somebody correct me), but I haven’t found a way for a newly instantiated subscriber VM get to already broadcasted event, which was published before the instantiation. The example here would be a new dialog window, with its VM wanting the last value that parent’s VM published before dialog was created (a selected ListBox value, for example). Sure, the publisher could publish the same event again after the dialog is created, but this would confuse things up because there may be other listeners subscribed to it and perhaps wouldn’t know how to handle the exact same event.

To solve this issue, I created a new class, deriving from the CompositePresentationEvent<T> and called it CachingCompositePresentationEvent<T>. The implementation is simple:

public class CachingCompositePresentationEvent<T> : CompositePresentationEvent<T>
{
    public bool HasValue { get; private set; }

    private T lastPayload;
    public T LastPayload
    {
        get
        {
            if (!HasValue)
            {
                throw new InvalidOperationException();
            }
            return lastPayload; 
        }
        private set
        {
            lastPayload = value;
            HasValue = true;
        }   
    }

    public override void Publish(T payload)
    {
        LastPayload = payload;
        base.Publish(payload);
    }
}

The HasValue will return true when at least one event was published at the time, and LastPayload will return the payload, included in the last published event.

If the event is declared as:

public class MyCachingEvent : CachingCompositePresentationEvent<int> { }

… then getting to its value would be:

MyCachingEvent ev = aggregator.GetEvent<MyCachingEvent>();
if (ev.HasValue)
{
    int value = ev.LastPayload;
}

This is the basics, there's plenty of room for improvement - like adding a Clear() method to clear the last payload value or clear it automatically on the first LastPayload read - just to clear the memory, when payload types aren’t simple/small.

Silverlight 3 includes a new type of a StackPanel, called VirtualizingStackPanel. VirtualizingStackPanel enables UI virtualization and is now the default items panel for the ListBox, with virtualization option enabled.

If you want to turn UI virtualization in ListBox to off, set its VirtualizingStackPanel.VirtualizationMode to Standard (the default is Recycling). The embedded VirtualizingStackPanel will in this case behave as a plain old StackPanel.

VirtualizingStackPanel can be used with any ItemsControl, but it can’t be used on its own (like putting in on a page and manually cram a couple thousand of items on it as you could do with ordinary StackPanel). But the interesting thing is it is derived from an abstract class called VirtualizingPanel, which means the ability to create new kinds of virtualizing panels (!)

The following example shows the difference between Virtualization modes. I intentionally created a heavier item template for the UI, so difference would be more obvious. Try scrolling both ListBoxes to see how UI virtualization impacts the scrolling performance.

Run the application online

Source code below:

Silverlight 3 puts the ICollectionView interface to some serious use and brings us the CollectionViewSource class, which provides a view on top of the data collection, meaning you can sort, filter or group your items within your view, without actually changing the underlying data. One artifact, coming with the class, is the IsSynchronizedWithCurrentItem property, which enhances the collection with a notion of a currently selected item. When Selector’s IsSynchronizedWithCurrentItem property is set to true, all other controls, bound to the same collection, are kept in sync with the selected item. Silverlight’s implementation is a bit different than WPF’s. You can’t set IsSynchronizedWithCurrentItem property to true by yourself, the value is determined from your Items source. If it implements the ICollectionView interface, then it’s going to be synchronized, unless explicitly turned off (with setting the property to false).

For this example, I created three ListBoxes, all bound to the CollectionViewSource. Two of them are kept in sync, the third one is not because it’s IsSynchronizedWithCurrentItem property is set to false. I put up a few additional TextBlocks, bound to other item properties, to show the synchro-magic going on behind all this.

There’s more to ICollectionView interface, but that’s also another post…

Run the application online

Source code below:

Silverlight 3 shipped with 2 built-in bitmap effects that can be applied to any UIElement – those are DropShadow and Blur. But not to worry, we can create and use a lot more effects, because these are pixel shaders, compatible with the ones built for WPF. There are quite a few WPF (now even including SL support) effects libraries out there and I will be looking at those in one of the future posts. This time, it’s only this simple and very straightforward example, showing off the two built-in effects.

Run the application online

Source code below:

Text readability is very important for any LOB application and since Silverlight 3 is aimed towards creating LOB apps, Microsoft decided to address the readability issue by supporting ClearType in the final SL3 release. The best thing is – it’s on by default, but you can turn it off when you’re about to perform some kind of animation with it. Turning the ClearType off will improve the text rendering performance when animating it, since antialiasing requires some additional calculations and performing that for several times per second might result in a jerky animation. To turn the rendering optimization off, set the TextOptions.TextHintingMode property to Animated. To turn it back on after you’re done with the animation, you can either clear the property or set it to Fixed.

Run the application online

Source code below: