Coming in R2: MVVM Localization Manager and Multi Bindings

As 2010 R2 is just around the corner, I thought you may be interested in getting familiar with the new features and enhancements we made in the ClientUI Framework (beside the dozens list of rich controls). Two of the most significant additions to the Framework are localization manager that supports MVVM design pattern, and a powerful multi binding object that works consistently in Silverlight 3 & 4 and WPF.

MVVM-ready Localization Manager

Localization becomes a critical requirement as your business applications rapidly growing and being consumed by a wide range of users in different countries with different cultures. Fortunately, Silverlight includes a handy localization feature that works pretty good in basic scenarios. You can also easily display the localized string to a content control through data binding, such as shown below.

The above approach is not wrong at all; it uses data binding so you can display the localized string in any dependency properties. The only caveat is that you cannot dynamically update the localized string when the Culture is changed in runtime, for instances, you want to display Germany language instead of English without restarting the application. I’m sure you will find this scenario quite common in typical business applications.

The limitation in the dynamic localization is due to the architecture design of the Silverlight itself. The problem is simple: there are no notifications when the application’s culture has changed. This prevents the UI elements “to know” when they should update the localized string.

The other problem with Silverlight’s localization feature is that it has not supported MVVM design pattern. In the above example, you bind the Content of the Button to a static resource. While this may not be a big deal at first, most architects would want to streamline the localization resources in the ViewModel as well, thus reducing the needs to define “extra” static resources and such.

Enter ClientUI Localization Manager, it shoots these two problems at once. The new Localization Manager will be part of the ClientUI Framework in the upcoming 2010 R2 release.

With the ClientUI Localization Manager, you can bind your localized resource to any dependency properties, this means that you are not limited to a specific control (unlike the other solutions!). It allows you to bind UI elements to the localized resource using MVVM, such as shown in the example below.

While it seems so simple, it already supports automatic update when the application’s culture is changed –  no extra code or workarounds needed. To proof this concept, I have put together a simple sample that we will include in the 2010 R2 installation.

The application has a simple interface that shows Today text and a formatted short date below it. The goal was to have the application built purely with MVVM approach, and have the text updated automatically when the culture changes at runtime.

The following shows the application interface using English as the default language:

When the France button is clicked, it automatically updates the Today text and the today’s formatted date to the France language such as shown below.

In traditional applications, the dynamic localization were mostly implemented using tightly-coupled approach, where you refer to the desired elements and write code that says something like “todayText.Text = FormatString(newLocalizedString)”. With ClientUI Localization Manager, that’s a thing of the past.

The implementation using ClientUI Localization Manager is extremely straightforward, let’s see what the above buttons are doing when clicked.

It’s done with one simple line of code, you simply set the Culture property of the LocalizationManager to the desired culture. Interestingly, it will also update the localized strings that bound to the UI elements. The magic key behind this possibility is the observable resource, a new entity implemented in the upcoming ClientUI Framework that is responsible to notify the culture changes.

You implement the observable resource as a model (the “M” in the MVVM), and consume it in your ViewModel. The observable resource can be easily defined through a generic template constructor, shown below.

The “Resources” is the class auto-generated by Visual Studio when you added a new Resource item in your Silverlight project. This means that you can continue using the Visual Studio designer to work with localized strings and resources, and then consume it directly in your UI elements through the observable resource. And better yet, the localization manager works in WPF, too!

Cross-platform Multi Bindings

In the previous R1 release, we have included a number of advanced data binding framework such as binding descriptor and property binding. This binding framework allows you to do what is impossible to be done in Silverlight, such as declaring binding in setter of a style, or template. You can learn more about them here.

The next R2 release will include a new data binding engine called “multi bindings”, another settlement on “SL – WPF compatibility continuum”. Let’s see what “multi bindings” does.

Most of the binding declaration we used to work in Silverlight are referred as single binding. Take a quick example below.

The above syntax instructs the TextBlock to get its text from the FirstName property of the assigned data context. Whenever the FirstName changes, the Text is updated as well.

Now consider if you have a TextBlock that displays a combination of FirstName and LastName. How would you do that? Set two bindings to the Text? This should be natural as it sounds, unfortunately, Silverlight doesn’t allow you to do that.

The multi bindings was first introduced in WPF, you can read more about it here. It generally allows you to set multiple bindings on a single dependency property. The multiple bindings are processed through a IMultiValueConverter, which converts the values of the bindings to a single result.

The upcoming ClientUI Framework will bring multi binding implementation to the Silverlight, including all the required interfaces to be compatible with WPF. That said, it is now possible to set two bindings, let’s say, the FirstName and LastName to the Text property of a TextBlock, such as shown in the following code:

The above syntax instructs the binding engine to update the Content property of the GlassLabel whenever the Text property of FirstName_Input and LastName_Input changes. The formatting is done in the NameConverter, with the results shown in the following illustration.

It is important to note that multi binding should be considered only in scenarios where you cannot provide the bindable property in ViewModel. IMO, the multi binding is particularly useful for cross-UI communication that doesn’t involve model or ViewModel, such as in UI controls engineering. In my next post, I will showcase the R2 controls that use the multi binding extensively to achieve sophisticated, loosely-coupled UI architecture.

---

In this post, I have revealed two of the most fundamental improvements in the upcoming ClientUI release, both of them geared toward line-of-business application development using the best design pattern available. I hope you liked what you see thus far and how they can be useful in your application. As always, I’m open for any comments, feedback or questions on these improvements.

Update 1/5/2011: Source code for the Localization Manager sample is now available here.

All the best,

Jimmy Petrus

Chief Software Architect