Graphic design – Even when you’ve got a talented graphic designer helping out, you usually don’t get handed everything you need, or everything exactly perfect. You’ll need to fill in the gaps to get a complete, attractive interface. Being able to fire up Illustrator to tweak and extrapolate, or layout a clean window are  good skills to have. Modern UIs also include animations, which are hard to get from a static “comp”.

Validation – It is reasonable for the model to establish preconditions for methods. When user input is involved, there are few preconditions. Welcome to the wild west. Sure, you can insist that users enter phone numbers without any dashes, spaces, dots, parentheses or other corruptions of data purity, but if I’m the user, that just ticks me off.

Error reporting – The buck stops here. The model can just throw an exception if something goes wrong, but presenting a meaningful and actionable error message to the user is hard.

Threading – For Windows applications, all interaction with a window must happen on the thread that created the window. Yet to keep the UI responsive, you shouldn’t do time-consuming operations on the UI thread, forcing the introduction of other threads. You can see something slightly at odds here.

Usability – Small design and implementation decisions can greatly impact usability, and what is easiest to code is frequently not what is easiest to use. Most applications involve tasks with a fair amount of complexity, and making them as simple as possible is way harder than laying all of the complexities at the feet of the user.

Testability – There is a gulf associated with what it means for UI to work. On one side, you have “functions as specified without defects”. On the other, you have “effectively supports the user in his/her goals”. Furthermore, it is really hard to unit test UI code, which sort of leads to the next challenge…

Pattern ambiguity – I remember reading once (I wish I could remember the source) that if you ask 10 developers what the Model-View-Controller pattern is, you’ll get 11 different answers. While the most touted pattern in UI development, Model-View-Controller has so many variations that it can be daunting to figure out what it even means, and a fair amount of experience to begin to understand when a particular variation is most appropriate.

Localization – Model code needs to be culture-sensitive, but the biggest impact of localization is in the UI. Some frameworks make it easier than others, but having a UI that lays out equally well with “Archive Video on PC” and “Archivierung aufgezeichneter Videos auf dem PC” is tricky.

HCI priesthood – If you have a CS degree and actually write code, just give up now, you’ll never get it. Or so I’ve been told, but I still believe in the enlightened engineer.

I’m thinking that there’s enough challenge here to be interesting and skills that will continue to be in demand.

As I’ve posted before, I used to be a big Palm enthusiast but switched to Windows Mobile about five years ago. Palm seemed to be falling apart, and Microsoft seemed about poised to do great things. I was wrong — at least about Microsoft. Windows Mobile is powerful, but it’s not enjoyable. I think that user experience has been prioritized somewhere below an integrated nose-hair trimmer, and I credit Windows mobile with turning me from an engaged mobile enthusiast into a passive mobile user because of its stagnation.

It’s refreshing to be a Palm user again, with the Palm Pre bringing back the elegance and simplicity of those earlier devices combined with the modernness appropriate for the years that have elapsed since then. Palm’s webOS, the underlying Pre operating system, is beautiful. It also gets updated, unlike Windows Mobile. If something doesn’t seem quite right with webOS, there’s at least hope that it will get fixed with a simple, over-the-air and in-place upgrade.

The Pre itself is also an example of first-class industrial design. It feels good and looks good. Contrast that with the Motorola Droid, which is truly ugly. Maybe they thought the boxy form factor would go with the robot branding or something. The Cylon monotoning, “Droid” when you turn the thing on is pure cheese. The Nexus One looks more promising, though.

Aside from things I’ve already mentioned, here a few other things that make me happy about the Pre and webOS:

• Synergy – I’m pretty careful with keeping contacts and email organized, but Synergy changes the game. It does the consolidation for you so you don’t have to be so, um, anal.
• Multitasking – Of course, Windows Mobile can do that just fine, but webOS’s card view makes it so simple to work with.
• Touchstone – The Touchstone charger is great — no cable to plug in, not even a dock. You just set your phone on it and pick it up fully charged later.
• Ares – The online IDE that is in beta right now is pretty impressive. I’ve been doing a little development, and dropped Eclipse like a rock when Ares showed up. Ares, like webOS, is simple and elegant. Maybe a little too simple right now.

And a few things that need improvement:

• Missing apps – I need a reader for LDS scriptures, a decent place to put my passwords, and a way to sync my “to do” list to a desktop machine (preferably to Google tasks, though I’m not sure if they have an API yet).
• Smoothness – The iPhone is soooo smoooooth in its operation. The Pre lags a bit sometimes.
• Bedroom manners – Although the Touchstone charger is great, it sometimes doesn’t behave nicely on your nightstand. The screen turns on or the “charging” tone rings during the night.
• Dev confusion – While I think Ares is a nice step forward, it has been hard to really learn WebOS development. I’m a software engineer, doing causal exploration of the SDK, and sometimes things just seem disjoint. I think I read somewhere that Palm changed the development model late in the game, and sometimes the documentation seems fragmented and the examples possibly obsolete. The one webOS book’s reviewers say it is all about the old model, so it is almost unusable.

So… Why didn’t I just get an iPhone? I could probably come up with some good rational reasons, but the biggest ones are more emotional.

1. As I said, having had such a great experience with Palm in the past, the Pre makes me feel warm and fuzzy.
2. iTunes… no thanks.
3. I’m an anti-herd kind of guy. If everybody is doing something (namely, buying iPhones) it makes me want to do something different. Yes, totally irrational.

OK, pretty much any inkjet printer is devil-spawn, with the well-cited fact that printer ink is the most expensive liquid on the planet. Canon has taken the Pixma to a new level, though, because while it is a combination printer/scanner/fax, you can’t do anything useful if you’re out of ink. Notably, in spite of the fact that no bits need converting to atoms when scanning an image to your PC, you just can’t do it if you’re out of ink. All you get is a message on the display stating, “The following ink has run out. Replace the ink tank.”

Yeah, the printer/scanner is pretty good when you’re willing to open a vein to fill the ink, but disabling non-ink functions by fiat is just infuriating.

I was trying to data bind a list of colors to a ComboBox and have the SelectedValue property bound to a particular color. The frustrating thing was that even though there was a color matching the “selected” color in the list, the ComboBox never had a selection when first displayed.

Eventually I discovered that my “selected” color was white (all color components at 255) while the list’s equivalent was Color.White. Careful reading of the Color.Equals documentation tells me that I was silly to think that white is white or black is black:

Black and FromArgb(0,0,0) are not considered equal, since Black is a named color and FromArgb(0,0,0) is not.

Usually in a situation like this, I use the Ultimate Boot CD for Windows. The scans I ran that way didn’t find anything, though.

Other information on the internet suggests booting the system in Safe Mode and running Malwarebytes Anti-Malware to clean the system. This also didn’t work.

There are several sites that give manual removal instructions. On my friend’s system, none of the binaries or registry keys from the instructions existed.

Here’s what I did that appears to have worked:

1. Get a copy of Process Explorer, probably easiest done on another machine and put on a USB flash drive.
2. Boot the computer normally.
3. Let the race begin. Start Process Explorer before Antivirus System Pro does.
4. Bring up Antivirus System Pro’s scan window.
5. Use the Process Explorer’s “Find Window’s Process” tool by dragging it over the scan window.
6. Now you know the executable that is Antivirus System Pro, which was bsuhsysgaurd.exe on my friend’s machine.
7. By showing the “Image Path” column in Process Explorer, you can also see where it is running from.
8. Go ahead and kill the process. It feels good.
9. Delete the executable.
10. Search the registry for references to the executable and delete those (such as from Start keys).
11. Get rid of the proxy in IE by going to Tools > Internet Options > Connections > LAN Settings and uncheck “Use a proxy server for your LAN”.

I also installed the newly free Microsoft Security Essentials on my friends machine, since although there was a version of MacAfee on there, it was FUBAR. I’m not sure if that was something Antivirus System Pro had accomplished or if it being that way was what let the malware through in the first place.

All seems well for now…

If you search the web for a solution, you might come up with a couple of proposed solutions:

• WinForms: How to create a control transparent to other controls – The official word from Microsoft, the solution is presented in several pages of poorly formatted VB code that makes you immediately want to look for something simpler, such as…
• C# Transparent Label (also referenced from Rick Strahl’s blog) – This solution is much simpler; it’s just a Control subclass that doesn’t paint a background and draws the label text in OnPaint.

After working with the second solution for a while, I discovered that it doesn’t handle updating the text very well. Just changing the Text property itself doesn’t do it, and if you invalidate the control, you get the new text painted over the old text. If you’re the kind of person who fusses about minutiae like legibility and such, this isn’t ideal.

So here’s a solution that has worked reasonably well for me, and that scores high marks in the simplicity category:

/// 
/// A label that is transparent.
/// 
public class TransparentLabel : Label
{
  /// 
  /// Paints the background with the parent's background image.
  /// 
  ///
e
  protected override void OnPaintBackground(PaintEventArgs e)
  {
    Rectangle rect = new Rectangle(Location, Size);
    e.Graphics.DrawImage(Parent.BackgroundImage, 0, 0, rect, GraphicsUnit.Pixel);
  }
}

It basically scoops up the correct part of the parent’s background image and uses it as the background for the control. Yes, it still isn’t transparency, just a much better job of “camouflage” than the default behavior. If you’re painting the parent’s background, with a gradient brush for example, you can paint that into a bitmap instead and set the parent’s BackgroundImage to the bitmap for this solution to still work.

public static GraphicsPath GetRoundedRectangle(Rectangle rect, int rad)
{
	int d = 2 * rad;
	System.Drawing.Drawing2D.GraphicsPath gp =
			new System.Drawing.Drawing2D.GraphicsPath();
 
	gp.AddArc(rect.X, rect.Y, d, d, 180, 90);
	gp.AddArc(rect.X + rect.Width - d, rect.Y, d, d, 270, 90);
	gp.AddArc(rect.X + rect.Width - d, rect.Y + rect.Height - d, d, d, 0, 90);
	gp.AddArc(rect.X, rect.Y + rect.Height - d, d, d, 90, 90);
	gp.AddLine(rect.X, rect.Y + rect.Height - d, rect.X, rect.Y + d / 2);
 
	return gp;
}

It’s trivial to convert that GraphicsPath to a Region — just call the appropriate Region constructor. You can then fill the region:

var path = GetRoundedRectangle(rect, 3);
e.Graphics.FillRegion(Brushes.Orange, new Region(path));

If your corner radius is sufficiently large, you might not notice anything wrong with the result. With a value of 3, it is pretty obvious:

The top left corner looks perfect:

The bottom right corner is decidedly un-round:

I started to wonder if all those round rectangle functions were wrong, but drawing the GraphicsPath itself shows that the code is correct:

The problem is that when converting the GraphicsPath to a Region, it uses the inside of the GraphicsPath, so you lose the outside pixels on the sides, which you can see when drawing the path and then filling the region:

It turns out to be a whole lot easier and effective to do a little p/invoke here:

[DllImport("gdi32.dll")]
static extern IntPtr CreateRoundRectRgn(int x1, int y1, int x2, int y2, int cx, int cy);
// ...
var region = Region.FromHrgn(CreateRoundRectRgn(rect.X, rect.Y, rect.X + rect.Width, rect.Y + rect.Height, 3, 3));
e.Graphics.FillRegion(Brushes.Orange, region);

Here’s the output from that code:

It looks like a little larger corner radius is needed to get the same rounding, but otherwise it is perfect.

I found a good example of this in Chapter 5 of Professional Silverlight 2 for ASP.NET Developers by Jonathan Swift, Salvador Alvarez Patuel, Chris Barker and Dan Wahlin. As I describe it, and continue the discussion through this post, you’ll notice that the term “resource” is overloaded in Silverlight: There are resources in the normal .NET sense, backed by .resx files, and there are resources that are simply a dictionary of objects instantiated in XAML within a Resources element. Hopefully the usage will not be overly confusing.

In the localization example from the book, they created a resource file called LocalizedStrings.resx. Then they instantiated the automatically generated strongly typed class by including it in the Resources associated with a user control. Finally, they could then bind the Text property of a couple of TextBlock controls to a particular string from the resources:

You’ll want to be sure to use the PublicResXFileCodeGenerator custom tool to generate the code from the .resx file, otherwise the binding doesn’t work.

So what if you want to dynamically change languages, such as with a language drop-down?

The solution I came up with incorporates string resources into the view model. I was hesitant to do this at first because it felt funny having resources in the view model. Aren’t the strings purely a view component? Ultimately I decided that supplying the correct strings to the view based on language choice is a reasonable thing for the view model to do, and the resulting implementation and usage felt pretty good.

The base class for all view models simply has a Resources member:

public virtual object Resources
{
  get { return null; }
}

Each subclass then returns the appropriate object containing the resources:

public class MyViewModel : ViewModel
{
  private MyViewModelResources _resources;
 
  MyViewModel()
  {
    _resources = new MyViewModelResorces();
  }
 
  public override object Resources
  {
    get { return _resources; }
  }
 
  // ...
}

The class MyViewModelResources is the class generated from MyViewModelResources.resx. You might be saying, “Wait a minute. That class is basically static. What are you doing creating an instance of it?” Well, I don’t think there’s a way to bind to statics, so you need to have an actual instance around. Of course, the view will actually end up calling the static property (such as SubmitButtonText) when you include one in the binding path. Also, this isn’t any different from instantiating the resource class in XAML as the first example does.

Modifying the first example to use the view model (and setting the view model as the DataContext) makes the XAML look like this:

So what about the dynamic switching of languages at run time?

Since the “Resources” property is in the binding path, changing its value will update the bindings and the UI updates with the new strings. You just need to notify the view that the Resources property has changed. To make this easy, I created a helper method in the ViewModel base class, RaiseResourcesChanged, that effectively says, “Attention all view models, please update your views’ resources.” The message gets propagated to each view model instance by having a static ResourcesChanged event in the ViewModel base class that each ViewModel instance subscribes to at construction. When the event fires, the base class in turn raises the INotifyPropertyChanged.PropertyChanged event for the “Resources” property.

public class ViewModel : INotifyPropertyChanged
{
  private static event EventHandler ResourcesChanged;
 
  public ViewModel()
  {
    ResourcesChanged += ViewModel_ResourcesChanged;
  }
 
  protected void RaiseResourcesChanged()
  {
    var handler = ResourcesChanged;
    if (handler != null)
    {
      ResourcesChanged(this, EventArgs.Empty);
    }
  }
 
  void ViewModel_ResourcesChanged(object sender, EventArgs e)
  {
    RaisePropertyChanged("Resources");
  }
 
  // ...
}

Any single view model can then change the CurrentUICulture, call the helper method, and the UI updates automatically for all views:

Thread.CurrentThread.CurrentUICulture = newCulture;
RaiseResourcesChanged();

One of the goals of the model-view-view model pattern is to avoid code in the XAML code-behind files. Instead, the view model exposes what the UI needs and the UI consumes it through declarative data binding. Shawn Wildermuth’s MSDN Magazine article does a good job of explaining the basics of the pattern. The view model ends up having the logic that you’d really like to test.

The project structure looks like this:

• SilverlightApp – This project is the view, created with the Visual Studio Silverlight Application project template. There’s lots of XAML in here.
• SilverlightApp.Model – This project contains both the model and the view model. It is a Silverlight Class Library project, and the view project has a project reference to this. There’s no XAML in here.
• SilverlightApp.Model.Test – This project has the unit tests, and is a normal C# Unit Test project. It has a project reference to the model/view model project.

If you write up a simple unit test, it will compile, run, and pass.

Woohoo -- passing test.

Problem #1

Suppose your view model uses something from System.Core (such as the Action delegate). Now when you try to run your unit test, you get an error:

Test method SilverlightApp.Model.Test.UnitTest.TestMethod1 threw exception:  System.IO.FileNotFoundException: Could not load file or assembly ‘System.Core, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e’ or one of its dependencies. The system cannot find the file specified.

The problem is that the test project is referencing the .NET 3.5 System.Core assembly. You can fix that by referencing the Silverlight assembly instead. Remove the existing System and System.Core references, and add the ones in the Silverlight SDK (for example, C:\Program Files (x86)\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\). Now the test will pass again.

Problem #2

Now suppose that you want your view model to do something like use the IsolatedStorageSettings class. When you run your test, it will be broken again:

Test method SilverlightApp.Model.Test.UnitTest.TestMethod1 threw exception:  System.IO.FileNotFoundException: Could not load file or assembly ‘System.Windows, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e’ or one of its dependencies. The system cannot find the file specified.

Well, that just looks like problem #1 again, so we’ll add the Silverlight System.Windows assembly as a reference. Hmm… still doesn’t work:

Test method SilverlightApp.Model.Test.UnitTest.TestMethod1 threw exception:  System.MissingMethodException: Method not found: ‘System.IO.IsolatedStorage.IsolatedStorageFile System.IO.IsolatedStorage.IsolatedStorageFile.GetUserStoreForSite()’.

According to the documentation, IsolatedStorageFile is in mscorlib.dll. Can I just add a reference to that? No; when you try you get an error:

A reference to ‘C:\Program Files (x86)\Microsoft SDKs\Silverlight\v2.0\Reference Assemblies\mscorlib.dll’ could not be added. This component is automatically referenced by the project system and cannot be referenced directly.

It’s time to step back and think a little. Do we really want to have Silverlight isolated storage as part of our unit tests anyway? Probably not. Just like when you’re unit testing code that would access a database, you’d really rather mock the database so you can efficiently test just the unit in question. The same applies here, so you can create an interface to hide the concrete implementation. From there, it’s a matter of choosing the right implementation at the right time.

The view model can accept an ISettings in its constructor (or it can use a service locator or dependency injection). When creating a test instance, pass in a mock implementation. In the real application, you can use the isolated storage implementation.

So Far So Good

By using these two techniques (referencing Silverlight assemblies in the test project and adding a level of abstraction where needed), I’ve been able to effectively test my view models with the normal desktop tools. The tests all run as part of the continuous integration builds, just as you’d hope.

Maybe at some point I’ll run into something that just doesn’t work, but so far it’s working out just fine.