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.

    <Button Content="{Binding Path=Resource.TodayText,
          Source={StaticResource LocalizedStrings }}"/>

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.

   <Grid DataContext={StaticResource MainPageViewModel}> 

          <TextBlock TextWrapping="Wrap"
             Text="{Binding Localization.Resource.TodayText}">

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:

Localization Manager

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.

Automatic Resource Update

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.

      private void ExecuteChangeLanguage(object parameter)
      {
         LocalizationManager.Culture =
                    new CultureInfo(parameter.ToString());
      }

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.

    namespace ClientUILocalizationManager.Models
      {
         public class MyAppResource :
                 Framework.ObservableResource<Resources>
         {
            public MyAppResource() : base(new Resources())
            {
            }
         }
     }

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.

   <TextBlock Text="{Binding FirstName}">

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:

<Intersoft:GlassLabel>
     <Intersoft:BindingFramework.MultiBinding>
           <Intersoft:MultiBinding TargetProperty="Content"
                         Converter="{StaticResource NameConverter}">
                 <Intersoft:BindingCollection>
                        <Binding Path="Text"
                                  ElementName="FirstName_Input"/>
                        <Binding Path="Text"
                                  ElementName="LastName_Input"/>
                 </Intersoft:BindingCollection>
           </Intersoft:MultiBinding>
     </Intersoft:BindingFramework.MultiBinding>
</Intersoft:GlassLabel>

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.

Cross-platform Multi Bindings

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

Advertisements

5 thoughts on “Coming in R2: MVVM Localization Manager and Multi Bindings

  1. Ben Hayat

    Wow Jimmy, on the multi binding! This is powerful, and here is my question/understanding:

    Let’s say, I have a form for entering Tax info in multiple input fields. Are you saying that I can have a TextBlock showing total, as “Result” of my input boxes as being entered? And in the converter, I can simply Add the values and format it for the “Total” Textblock.

    Is that my correct understanding

    Reply
  2. jimmyps Post author

    Hi Ben, glad you liked the new multi binding!

    Yes, you got it right. You can choose to do whatever you like in the converter, calculating values based on formula, concatenating strings, and so on. The cool thing here is that whenever one of the “source” values changed, the target element is also updated.

    Reply
  3. Pingback: New Year Goodies: Mac & Metro-style Tab Controls, Updated Samples, and more | Intersoft Solutions Corporate Blog

  4. Fred

    Hi,

    I have some difficulties to use the Localization Manager with many Resources files (dispatched in many projects). I am a bit lost 😦

    regards,

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s