Intersoft Solutions Corporate Blog » ClientUI 2010

New in ClientUI 4: Innovative Range Slider Bar Control

erikaa — Mon, 07 Feb 2011 06:56:31 +0000

As mentioned in this post, ClientUI 4 was included as part of WebUI Studio 2010 R2 released on December 2010. You can visit ClientUI product information here or read this article to see what’s new in ClientUI 4.

Introducing UXRangeSliderBar

UXRangeSliderBar is one of the new controls included in ClientUI 4, and can be used to select a range of values by moving two thumbs along the slider bar track area.

In previous post, I’ve described a property finder scenario where users can select property size and price range to find a list of properties. You can use UXSliderBar to easily select the property size. You can also use UXRangeSliderBar to select the price range for this property finder application. When it comes to selecting a range, usually two input boxes are needed, and you need to validate that the value of one input box shouldn’t exceed the other. Using UXRangeSliderBar, the two thumbs are carefully designed not to exceed the other, thus providing the built-in validation for a range input control.


    Property Finder

The range of values in UXRangeSliderBar is specified using SelectionStart and SelectionEnd properties. The value of SelectionStart property is marked by the first thumb, while the value of SelectionEnd property is marked by the second thumb. To select a range of value, you can move the thumb, press the registered keyboard keys, or click the track area and handle buttons. These user interactions use the value of LargeChange and SmallChange properties specified in UXRangeSliderBar.

Move the thumbs.

You can change the range of values by moving the thumbs along the track area. Additionally, you can maintain the value span by pressing the Shift key while moving the thumb. In this case, both thumbs will move together.
Use keyboard keys.

Similar to UXSliderBar, the Up, Down, Left, Right, PageUp, PageDown, Home, and End keys are already registered to UXRangeSliderBar commands. When one of these keys are pressed, UXRangeSliderBar will check the active thumb to determine whether the start or end value will be changed. For example: in the above scenario, when the first thumb is active and you press the Left key, the value of SelectionStart will be subtracted with the value of SmallChange property, which is 10. So, now the selection will start from $290 to $500.

When you press the Up, Down, Left, or Right keys, the value of SmallChange property will be used to change the range selection. When you press PageUp or PageDown keys, the value of LargeChange property will be used to change the range selection.

When you press the Home or End key, UXRangeSliderBar will not check the active thumb, but will automatically change the value of SelectionStart and SelectionEnd properties to Minimum or Maximum properties respectively. So, in the above scenario, if you press Home key, the SelectionStart will be set to $100, thus the selection will start from $100 to $500.
Click the track area.

When the track area is clicked, the area clicked will determine whether the start or end value will be affected. When you click the pink or blue area, the value of SelectionStart will be subtracted or added with the value of LargeChange property. When you click the green or purple area, the value of SelectionEnd property will be subtracted or added with the value of LargeChange property.

For example: when you click on the green area, the value of SelectionEnd will be subtracted with the value of LargeChange property, which is 100, so now the selection will start from $300 to $400.
Click the handle buttons.

By default the handle buttons are not displayed in UXRangeSliderBar. To display the handle buttons, you can set HandlesVisibility property to Visible. Two arrow-shaped buttons will be displayed at the left and right side of UXRangeSliderBar.

When the handle buttons are clicked, UXRangeSliderBar will check the active thumb to determine whether the start or end value will be added or subtracted with the value of SmallChange property.

If the second thumb is active and you press the right handle button, the value of SelectionEnd property will be added with the value of SmallChange property, which is 10, so now the selection will start from $300 to $510.

Enabling Drag Range Behavior

As described above, you can maintain the value span by pressing Shift key while moving the thumb. You can do that if you want to maintain the $200,000 value span when moving the thumb.

Another alternative is to enable the drag range behavior using IsDragRangeEnabled property. When enabled, you can drag the track area between two thumbs and both thumbs will move together.

Enabling Snap to Tick Behavior

You can enforce user to select only round value for the price range by enabling IsSnapToTickEnabled property. When enabled, the thumb will snap to the closest tickbar item when it is moved. If you move the first thumb to the left, it will snap to $300, $200, and $100.

When you press Shift key while moving one of the thumb, both thumb will move together to maintain the value span. When snap to tick behavior is enabled, both thumbs will snap to the closest tickbar item when one of them is moved.

You can still enable precision selection by pressing Ctrl key. Try to move the thumb while pressing the Ctrl key. The thumb will not snap to the closest tickbar item, but moves along with the cursor position, as if this behavior is not enabled.

Enabling Move to Point Behavior

You can use IsMoveToPointEnabled property to enable move to point behavior where you can click on any position in the slider bar track area and the thumb will move immediately to the location of the click. You can to click at $700 directly and the second thumb will move directly to the location of the click. Let me remind you again, that the area of the click determines the thumb that will be moved.

If you press Shift key while clicking at $700 directly, both thumbs will move directly together and the selection will now start from $500 to $700.

This behavior also works along with snap to tick behavior. So when both snap to tick and move to point behavior are enabled, you can click on any position in the track area and the thumb will snap to the closest tick bar item.

Enabling Auto Tooltip

While moving the thumb along the track area, you might find it difficult to determine what value you are hovering. You can display a tooltip near the thumb that contains the value of the hovered position using AutoTooltipVisibility property. You can specify AutoTooltipPosition, AutoTooltipFormat, AutoTooltipHorizontalDirection, and AutoTooltipVerticalDirection for additional configuration.

When you press Shift key while moving the thumb or when drag range behavior is enabled, a tooltip will be displayed near each thumb. You can know exactly that you are selecting $350 to $550 as the price range, as seen in the following shot.

Configuring Minimum and Maximum Range Span

When you choose a wide price range, say from $100,000 to $700,000, it could return lots of search results. In UXRangeSliderBar, you can specify a maximum range span allowed to narrow down the search result. You will be prevented from selecting a range of values exceeding the maximum range span specified.

For example: if MaximumRangeSpan property is set to 300, you can only select up to $300,000 difference in UXRangeSliderBar. If the selection starts at $300, you can only move the second thumb to $600. You can’t move the second thumb to a value larger than that.

You can specify the minimum range span allowed using MinimumRangeSpan property. By default to allow unlimited range span selection, the MinimumRangeSpan property is set to 0 and MaximumRangeSpan property is set to NaN.

Conclusion

In this post, you have learned the various ways to change the range of values in UXRangeSliderBar, the behaviors related to it, the auto tooltip, and the minimum/maximum range span.

To try it out yourself, feel free to browse through the samples here. To see all available features, see UXRangeSliderBar Overview. If you have questions or feedback about UXRangeSliderBar, feel free to post them to our community forum.

Cheers,

Erika

New in ClientUI 4: Intuitive Slider Bar Control

erikaa — Thu, 27 Jan 2011 03:35:55 +0000

ClientUI 4 is the latest version of our flagship development suite for the Silverlight and WPF platform. To learn more about ClientUI, you can read this post or visit ClientUI product information here. To see what’s new in ClientUI 4, see this article.

Introducing UXSliderBar

UXSliderBar is one of the new controls included in ClientUI 4. UXSliderBar is mainly used to select a value from a range of values by moving the thumb along the slider bar track area.

For example: in the following property finder scenario, users can select a property size starts from 500 to 1000 square feet. Surely, you can use textbox to input the property size that you want. However, there are at least two advantages for using UXSliderBar. First, users will automatically know the range of property size available and easily select a value by moving the thumb. Second, you, as developer, can prevent users from inputting the wrong value in the textbox and thus, eliminate the needs to implement input type validation, should textbox is used instead.


    Property Finder

You might note that UXRangeSliderBar is used in this scenario, but we’ll discuss about that in the next post

I’ve mentioned that you can easily select a value in UXSliderBar by moving the thumb along the slider bar track area. Besides that, you can use a variation of keyboard keys registered to UXSliderBar commands or click the slider bar track area and handle buttons. These user interactions will use the value of LargeChange and SmallChange properties specified in UXSliderBar.

Use keyboard keys.

Some key gestures are already registered to UXSliderBar commands. When you press Up, Down, Left, or Right keys, the value of UXSliderBar will be added or subtracted with the value of SmallChange property. For example: in the above scenario, the value of UXSliderBar is 700.When you press the Right key, the value of UXSliderBar will be added with the value of SmallChange property, which is 10. So, the value of UXSliderBar now is 710.

When you press PageUp or PageDown keys, the value of UXSliderBar will be added or subtracted with the value of LargeChange property. So, if the value of UXSliderBar is 710 and you press the PageDown key, the value of UXSliderBar will be subtracted with the value of LargeChange property, 100. So, the value of UXSliderBar now is 610.

When you press Home or End key, the value of UXSliderBar will be set to the Minimum or Maximum property respectively. If you press End key, the value of UXSliderBar will be set to 1000 and the thumb will move to the end of the slider bar.
Click the slider bar track area.

You can also click the track area at the left or right side of the thumb. When you click the blue area, known as DecreaseButton, the value of UXSliderBar will be subtracted with the value of LargeChange property. When you click the purple area, known as IncreaseButton, the value of UXSliderBar will be added with the value of LargeChange property.
Click the handle buttons.

By default the handle buttons are not displayed in UXSliderBar. To display the handle buttons, you can set HandlesVisibility to Visible. Two arrow-shaped buttons will be displayed at the left and right side of UXSliderBar.

When you click the handle buttons, the value of UXSliderBar will be added or subtracted with the value of SmallChange property.

Enabling Snap to Tick Behavior

When moving thumb to select a value, it is possible that you select a fractional value, such as: 700.346, which is rather uncommon for a property size. I think you would want a rounded value for that, right? In this case, you can enable IsSnapToTickEnabled property.

When this property is enabled, the thumb will move to the closest tickbar item. So, as you move the thumb to the right, it will snap to 600, 700, 800, and so on.

When snap to tick behavior is enabled, you can still enable precision selection by pressing Ctrl key. Try to move the thumb while pressing the Ctrl key. The thumb will not snap to the closest tickbar item, but moves along with the cursor position, as if this behavior is not enabled.

Enabling Move to Point Behavior

Now, what if I want to select 900 as the property size? This might be what you think; either moves the thumb, press Up key several times, or click the track area continuously. Well, let me save your time a bit by introducing IsMoveToPointEnabled property.

When this property is enabled, you can click on any position in the slider bar track area and the thumb will move immediately to the location of the click. You can click on 900 tickbar item and the thumb will move immediately there.

Well, I understand clicking right on the tickbar item will not be that easy and I probably would need a couple of try for that. That is the reason why you should enable both snap to tick and move to point behavior. When these properties are enabled, you can click near the tickbar item and the thumb will snap to it.

Enabling Auto Tooltip

While moving the thumb along the slider bar track area, you might find it difficult to determine what value you are hovering. You can display a tooltip near the thumb that contains the value of the hovered position using AutoTooltipVisibility property. You can specify AutoTooltipPosition, AutoTooltipFormat, AutoTooltipHorizontalDirection, and AutoTooltipVerticalDirection for additional configuration.

Let’s say you want to select a discount value using UXSliderBar. You can display the percentage value you’re selecting in the tooltip.

Displaying Value Range Track

In the discount slider bar, it can be useful to display the active selection track. You can see how much discount applied to a product simply by seeing the value range track. In UXSliderBar, the value range track is indicated by a blue-colored track that starts from the value of Minimum property to the selected value of UXSliderBar. You can display the value range track using ValueRangeVisibility property.

Conclusion

In this post, you have learned the various ways to change the value of UXSliderBar, the behaviors related to it, the auto tooltip, and the value range track.

To try it out yourself, feel free to browse through the samples here. To see all available features in UXSliderBar, see UXSliderBar Overview. If you have questions or feedback about UXSliderBar, feel free to post them to our community forum.

Cheers,

Erika

New in ClientUI 4: Versatile Calendar Control

intersoftbram — Fri, 07 Jan 2011 07:05:45 +0000

The recently released 2010 R2 features ClientUI 4, a major version of our flagship development suite for the Silverlight and WPF platforms. ClientUI 4 is strongly focused in three areas: rich content and UI controls, advanced input controls, and fundamental navigation controls. For further information about ClientUI 4, please click here.

Introducing UXCalendar

One of the controls introduced in ClientUI 4 is UXCalendar, a sophisticated calendar control featuring multiple month views, multiple date selection feature and data binding support using MVVM design pattern.

UXCalendar sports a sleek yet authentic style and user interface, complete with today link, navigational buttons, week number and adjacent days. The following illustration shows what you get when you dropped an instance of UXCalendar in your Visual Studio or Blend designer surface.

We designed the UXCalendar to be ultimately lightweight and high performance, despite of its rich user interface. For instances, when clicking the Calendar Header, you will see responsive zoom-in and zoom-out transition similar to the one in Windows 7.

What’s really powerful is the multiple month views capability in UXCalendar – with the sleek user interface and styles consistently applied. You can easily set how many calendars to display by setting the CalendarViewCount property to the desired number. See the multiple month views interface in the following illustration.

Suffice to say, UXCalendar is the ultimate, cross-platform solution for all your calendaring needs. It also features built-in commands and flexible key gestures, multiple selection (and even multiple range), MVVM data binding for events source, display range customization, culture and localization support, and many more. Click here to learn more about UXCalendar.

Customizing UXCalendar Layout

UXCalendar is uniquely built on solid architecture that leverages our ItemsControl content model. This means that each calendar that represents an item in the UXCalendar can be easily and flexibly styled according to your need. You can even completely change the way it is arranged, let’s say, showing the calendars in 2 columns and 1 row, or 3 columns and 2 rows.

By default, the layout of UXCalendar is using a horizontal StackPanel. You can override this default layout through the ItemsPanel property of the UXCalendar.

In this blog post, I will show you how to create a UXCalendar with multiple month views displayed in 3 columns and 2 rows. Please follow the steps below:

Drag and drop an instance of UXCalendar to the designer surface. You can use either Visual Studio 2010 or Expression Blend 4.
Show six months calendar view by setting the CalendarViewCount property to 6.
And now the final step, customize the ItemPanels of the UXCalendar. I’m using Intersoft’s WrapPanel and set the MaxWidth property to 600 to get the 3 x 2 display configuration.
```
    
        
            
        
    
```
Save and run the project in the browser. You should get the results such as shown in the following illustration.

Truly simple and straightforward, isn’t it?

In this short post, you have now learned the basics of UXCalendar, and how to customize its layout arrangement. You can play around with the UXCalendar features through the properties, or try some readily designed samples here. To see all available features, please see UXCalendar Overview.

You will need the latest 2010 R2 bits which you can download it here. If you have questions or feedback about UXCalendar, feel free to post them to our community forum.

Best Regards,

Budianto Muliawan

Coming in R2: MVVM Localization Manager and Multi Bindings

Jimmy Petrus — Thu, 16 Dec 2010 07:31:07 +0000

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.

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
         {
            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.

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

Create a Rich Silverlight Message Board using MVVM Pattern and WCF RIA Services

Jimmy Petrus — Sat, 11 Sep 2010 03:40:02 +0000

In the past several months, I’ve been actively blogging about our next-generation user interface library for the Silverlight and WPF development, which has just been RTM-ed three weeks ago. I hope you’ve enjoyed playing around with the new controls and exciting features that we delivered. In case you haven’t got your copy, click here to get started.

While we’ve shipped hundreds of great samples that you can learn, or experience directly online, you may have realized there wasn’t a single blog post yet that guides you through creating basic Silverlight application using the ClientUI controls from front-to-back. The reason for that is because we’re still in progress preparing a comprehensive set of learning resources for you. Eventually we will have around 40-50 new videos, walkthroughs, and how-to articles available by the next week or two at the latest. So, stay tuned for our announcement in this blog site.

Not too long after I posted my blog about Top 10 Must-See Samples last week, I received several emails from customers that asked for a quick walkthrough to use the ClientUI controls in a real-world scenario, that is, retrieving data from the server-side database via WCF RIA Services and apply MVVM pattern on the top of that!

At the same time, we were migrating the message board from an earlier version of our Silverlight demo (known as Sirius which is now discontinued and completely replaced with the new ClientUI Showcase) to the new ClientUI library. The new message board happened to use the MVVM pattern, and it connects to the database via WCF RIA Services too. Just perfect, that’s an ideal topic to be blogged about!

In this blog post, I will share the key techniques that we used to build a richer Silverlight message board using the ClientUI library. Instead of writing a lengthy walkthrough from the ground zero, this blog post will be more focused on the key challenges and common obstacles found while building rich user interface using MVVM pattern in the combination with WCF RIA Services, Entity Framework and Domain Service. So, to effectively follow this post, you’re required to have basic understanding in the MVVM pattern and WCF RIA Services at the minimum. To learn more about MVVM pattern, read my previous post MVVM Framework in Silverlight.

Setting The Goal

Before we delved deeper into the project discussion, it’s important to set the preliminary goals and objectives of the project – outlining the general features, modules, presentation pattern, data access and connectivity and the application pattern.

The message board project that we want to achieve using ClientUI was planned to have the following objectives:

An elegant and clean user interface that emphasizes on ease-of-use and appealing experience.
High performance and responsive UI. Load only initial chunk of data at first load, then allow users to load more data on demand.
Customizable layout and appearance that is completely data-driven. I.e, callout style corresponds to the color that user selects.
Data access and connectivity to server-side SQL database through WCF RIA Services.
Use MVVM pattern for rapid and consistent application development.
Use Entity Framework and Domain Service for data query and operation.

The following illustration shows the user interface and basic message board functionality that we want to achieve in this project.

Project Overview

Our Silverlight message board project is consisted of two projects. The first is a Silverlight project that contains all the Silverlight assets, such as XAML, styles, converters, view models, and more. See the following illustration.

Some base classes such as the ModelBase, ViewModelBase and many of the ViewModels are already provided by the templates shipped in the ClientUI, thus makes it easier and faster for you to get started and work on the MVVM classes. This message board project itself is based on the Intersoft ClientUI MVVM Application Project Template.

The other project is an ASP.NET Web Application project that contains server-side business object, entity framework, and data access layer to access the SQL database. The Web project is also used to host the Silverlight application which typically delivered in the form of XAP. See the following illustration.

UI (View) Challenges

One of the biggest advantages of modern client development – such as the Silverlight or WPF – is that it enables a complete separation on the application engineering process. Our team of designers and developers firstly agreed on the main layout, structure and the navigation part of the project – and then each division can work on the project in parallel, which means that designers can go on creating the styles and assets, while developers can go ahead with the codes, MVVM and other business requirements.

Many Silverlight projects that we built recently were significantly accelerated with the efficient collaboration process. Take this message board project as an example. When the designer team delivers the style assets, the overall UI can be dramatically transformed, from plain white to stunning wooden-warm look and feel, while did not affect any of the application features and behaviors being worked by the developers.

In this post, I won’t be covering the styling and beautifying process of the project. Let’s focus on the technical difficulties in the UI (View) part.

Building the Feedback Items List

In most app dev, you typically start with the data presentation part. In Silverlight, there are a number of presentation patterns that you can use to display a list of data, such as grid view, list box, items control and more. The items control is the most ideal presentation for this project as we wanted to show the list of messages in nicely arranged callouts which doesn’t require selection or other advanced features.

Using the user interface library that we have in ClientUI, we can quickly achieve our goal to display the feedback list using an UXItemsControl that contains a list of callouts. The ItemsPanel of the UXItemsControl can be flexibly changed to WrapPanel to provide automatic wrapping layout.

The implementation is quite straightforward, see the following XAML code snippet.

<Intersoft:UXScrollViewer VerticalScrollBarVisibility="Auto">
        <Grid>
                 <Intersoft:UXItemsControl HorizontalAlignment="Center" MaxWidth="1024"
                                           ItemsSource="{Binding Path=Feedbacks}">

                          <Intersoft:UXItemsControl.ItemsPanel>
                               <ItemsPanelTemplate>
                                     <Intersoft:WrapPanel/>
                               ItemsPanelTemplate>
                        Intersoft:UXItemsControl.ItemsPanel>

                          <Intersoft:UXItemsControl.ItemTemplate>

<StackPanel HorizontalAlignment="Center">
                                     <Intersoft:CallOut>

<TextBlock Text="{Binding Quote}"/>
                                     Intersoft:CallOut>

<TextBlock Name="IdentityText">
                                           <Run Text="{Binding DisplayName}"/>

<LineBreak/><Run Text="{Binding Title}"/>
                                     TextBlock>
                              StackPanel>

Intersoft:UXItemsControl.ItemTemplate>

Intersoft:UXItemsControl>
        Grid>
Intersoft:UXScrollViewer>

Now we’ve got the feedback items listed in plain callout that arranged using wrapping layout.

Using ItemTemplateSelector to Set Template Based on Data

Our next objective is to customize the callout style based on the color that user selected when posting a message. In ASP.NET, this process is normally handled in the codes by handling the OnDataBound or InitializeRow event, then check against the data and then set the desired properties or styles accordingly.

That’s not the case in WPF or Silverlight. Our approach would be using WPF-style data binding technique where the actual templating can be entirely defined in the XAML. Thanks to all our items control lineups, we provide the ItemTemplateSelector and ItemContainerStyleSelector to address this challenges elegantly. This also complies with the MVVM pattern where separation of concern is prioritized.

As the name implies, the ItemTemplateSelector enables the items control to select which item template to use based on the condition evaluated in the DataTemplateSelector class. We can create our own class that implement DataTemplateSelector class, and then overrides the SelectTemplate method to provide our own logic to determine the item template selection process.

The following C# code snippet shows the CalloutTemplateSelector class to process the callout template selection based on the data.

[ContentProperty("CalloutTemplates")]
public class CalloutTemplateSelector : DataTemplateSelector
{
    public CalloutTemplates CalloutTemplates { get; set; }

    public CalloutTemplateSelector()
    {
        this.CalloutTemplates = new CalloutTemplates();
    }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        Feedback data = item as Feedback;
        CalloutItemTemplate template =

this.CalloutTemplates.SingleOrDefault(

c => c.Color.ToLower() == data.FavoriteColor.ToLower());

        if (template == null)
            template = this.CalloutTemplates[0];

        return template.Template;
    }
}

The following XAML code snippet shows the ItemTemplateSelector implementation that uses the CalloutTemplateSelector class shown above to display different style of callout according to the data.

<Intersoft:UXItemsControl ItemsSource="{Binding Path=Feedbacks}">
          ...
          <Intersoft:UXItemsControl.ItemTemplateSelector>
                  <local:CalloutTemplateSelector>
                         <local:CalloutItemTemplate Color="Natural" Template="{StaticResource Callout_Natural}"/>
                         <local:CalloutItemTemplate Color="Wood" Template="{StaticResource Callout_Wood}"/>
                         <local:CalloutItemTemplate Color="DarkBrown" Template="{StaticResource Callout_DarkBrown}"/>
                         <local:CalloutItemTemplate Color="Black" Template="{StaticResource Callout_Black}"/>
                  local:CalloutTemplateSelector>
          Intersoft:UXItemsControl.ItemTemplateSelector>
         ...
Intersoft:UXItemsControl>

The ItemTemplateSelector and ItemContainerStyleSelector are two of the most commonly used data binding techniques in WPF – which we bring to the Silverlight platform through ClientUI.

Setting the Callout Pointer Target

Since we’re using a nice Callout shape to represent a message in this project, we quickly realize that we wanted to show the callout pointer to target the user name element beneath it.

As you can see the “red lines” in the following illustration, each message has different pointer target location since each message has different length based on the text that users provide.

Although our UXCallout has complete customization over the pointer location – such as the PointerOffset, PointerPoint1, etc – it could be a tedious task to calculate the pointer offset manually. Furthermore, the manual calculation won’t be a perfect solution as we aren’t allowed to access the “UI element” from within the view model.

Fortunately, our UXCallout is equipped with a nice feature called TargetElement. By simply setting the TargetElement to the desired element, the pointer of the Callout will be automatically pointing to the center offset of the specified target element. And since TargetElement is a dependency property, that means you can easily specify it in your template or binding.

To achieve our UI objective such as shown in the above illustration, we can set the TargetElement of our callout to target the user name element through Binding. See the following XAML code snippet.

...
 <Intersoft:CallOut Style="{StaticResource CalloutStyle}"
                    Background="{StaticResource DarkBrownGradient}"
                    BorderBrush="{StaticResource DarkBrownBorder}"
                    TargetElement="{Binding ElementName=IdentityText}" Foreground="White">

...

Intersoft:CallOut>
<TextBlock Name="IdentityText" Style="{StaticResource IdentityStyle}">
...

So far, we’ve addressed numerous key challenges related to the UI (View). Although we haven’t covered all view issues entirely in this topic, you should get sufficient ideas on how to solve the other UI challenges using similar pattern.

MVVM Challenges

As we’re building the project to be entirely based on the MVVM pattern, it becomes obvious that most challenges and issues would arise as you designed the user experiences for your application.

In this project, two of the major MVVM challenges are: calling asynchronous data retrieval from within the view model and how to deal with the view model separation for the “New Post”.

The following illustration shows the view models required in this project.

As seen in the above illustration, the message board project is mainly comprised of two view models, named FeedbackListViewModel and NewFeedbackViewModel.

The FeedbackListViewModel Overview

The FeedbackListViewModel encapsulates the logic for the feedback list, such as retrieving the feedback list, getting the total count of the feedback, loading more feedback and managing the busy state for the data operation.

The following illustration shows the overview of FeedbackListViewModel.

Binding the Feedback List to View Model

The data binding for the items control to the view model is quite straightforward. It can be achieved by defining the Binding expression to the Feedbacks property available in the view model. The FeedbackListViewModel itself is defined directly as the DataContext of the UXPage in the XAML.

The following code shows how the feedback view model and the items source is defined. When the data context is set, it will automatically become available to the children in the tree. That enables the UXItemsControl to be notified with the available data context, then take its Feedbacks collection as the items source.

<Intersoft:UXPage>
     ...
    <Intersoft:UXPage.DataContext>
        <ViewModels:FeedbackListViewModel/>
    Intersoft:UXPage.DataContext>
     ...

     <Intersoft:UXItemsControl ItemsSource="{Binding Path=Feedbacks}" />
Intersoft:UXPage>

Load More Command

In the main view, we loaded only a chunk of initial records for highly responsive user experience. When you scroll down to the bottom edge of the list, you’ll notice the Load More Data button. This button will remain enabled when there’s more data to be loaded. To achieve this function, we’ll define the DelegateCommand in the view model, and then bind it to the hyperlink button through Command property.

The DelegateCommand, which is available in ClientUI Framework library, exposes CanExecute and Executed delegate which can be easily defined in the view model. The CanExecute result, interestingly, will automatically reflect the user interface elements that bound to it. In this case, the CanExecute result will automatically disable or enable the Load More button. This is an ideal solution for the MVVM pattern, all we need to do is to define the condition when the command can be executed, and the actual logic that will be processed when executed.

The following C# code shows the DelegateCommand initialization and the methods that handle its CanExecute and Executed delegate.

public FeedbackListViewModel()
{
      LoadMoreCommand = new DelegateCommand(ExecuteLoadMore, CanLoadMore);
}

private bool CanLoadMore(object parameter)
{
      return (this.LoadedPage < this.TotalPages);
}

private void ExecuteLoadMore(object parameter)
{
      LoadFeedback();
}

The following code shows how the delegate command is bound to the hyperlink button in the XAML.

<Intersoft:UXHyperlinkButton VerticalAlignment="Bottom" IsToggleButton="False"
                             Command="{Binding LoadMoreCommand}"
                             CommandCannotExecute="Collapsed">

            ...

Intersoft:UXHyperlinkButton>

Managing Busy State

In my previous blog post, I’ve briefly discussed about the busy management support in certain ClientUI controls, specifically in the navigation frame and page.

The busy state management is particularly useful in this project as we’re retrieving data from the server asynchronously. Fortunately, ClientUI already include built-in features to manage the busy state directly in the navigation frame level. This eliminates the needs to define busy indicator in every page which could be a tedious task.

The busy state management feature in navigation frame is beyond the “classic” busy indicator. In addition to showing the “busy” indicator, it will also block the entire screen from user interaction. Furthermore, all commands-nature elements such as hyperlinks and buttons, will be automatically disabled to prevent users to inadvertently execute the command. See the following illustration to get a clearer picture.

Now, let’s take a look how we can elegantly implement the feature in the view model to comply with our MVVM pattern architecture.

First, we define a property named IsBusy in the view model such as shown below:

public bool IsBusy
{
     get
     {
         return _isBusy;
     }
     set
     {
         if (_isBusy != value)
         {
             _isBusy = value;
             OnPropertyChanged("IsBusy");
         }
     }
 }

Second, we can bind this property to the IsBusy property available in the UXPage. This property automatically notifies the navigation frame that hosted it to manage the busy state according to the given value.

<Intersoft:UXPage
    Title="ClientUI Message Board"
    BlockUIOnBusy="True"
    IsBusy="{Binding IsBusy}">
   ...
Intersoft.UXPage>

Note that the UXPage has BlockUIOnBusy property, which indicates whether the UI (User Interface) should be blocked when IsBusy is true.

Finally, we can now easily control the busy state from by simply setting the IsBusy property in the view model. The following code snippet shows an example that sets the busy state when retrieving data.

private void LoadFeedback()
{
    // Indicates that the view model is processing something
    // It will automatically reflect the state in the UI (View)
    IsBusy = true;

    _context.Load(_context.GetFeedbacksQuery(this.LoadedPage + 1),
                    (o) =>
                    {
                        if (o.IsComplete)
                        {
                            ...
                            // Sets the state back to normal
                            IsBusy = false;
                        }
                    }
                , true);
}

Pretty cool, isn’t it? Feel free to let me know if you’ve feedback or found other ways to implement the busy state management in your apps.

Showing the Status Window

When a data operation is completed, it’s nice to show a quick status that lets users aware of the request status. In this project, we’re going to use a lightweight window such as UXWindowChrome to show the status.

The challenge here is how we can efficiently control the status window (UI element) from the view model. There are a number of ways to implement this.

First, if you want to control the status window from within view model, you can dedicate a status window for each operation, then bind its IsClientVisible to your view model to control its visibility.

In our case, we would like to have only one instance of status window which is reused for multiple data operations, such as retrieving data, add new, and so on. In such scenario, the best practice is to handle this in the UI (View) level because all operations are mostly UI-related.

The good thing with this approach is that it shows the benefits of the view model that implements INotifyPropertyChanged which can be useful in a number of scenarios. Let’s take a look at the following example.

// Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // We can easily access to the view model from view through the DataContext
    FeedbackListViewModel viewModel = this.DataContext as FeedbackListViewModel;

    // Handle the view model's PropertyChanged 
    // Remember to detach it in OnNavigatingFrom override to avoid memory leak.
    viewModel.PropertyChanged += new PropertyChangedEventHandler(ViewModel_PropertyChanged);
}

private void ViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
{
    FeedbackListViewModel viewModel = this.DataContext as FeedbackListViewModel;

    if (e.PropertyName == "LoadedPage")
    {
          if (viewModel.LoadedPage > 1)
          {
               // Set the required status, i.e, the label text and visibility.

this.StatusLabel.Text = "10 more posts loaded";
               this.StatusWindow.IsClientVisible = true;

// Hide the status after 2 seconds. 
               Utility.ExecuteTimeOut(2,
                        () =>
                        {
                            this.StatusWindow.IsClientVisible = false;
                        });
          }
    }
}

Here’s what the result looks like:

The NewFeedbackViewModel Overview

The NewFeedbackViewModel implementation is unique in a way that it is actually a children UI control that reside in the FeedbackList page. To enable the Callout and its entire children to use a different view model, we can set the DataContext of the Callout to the NewFeedbackViewModel which can be directly defined in the XAML code.

See the following illustration for the view model overview.

Showing the Callout in View Model

One of the most challenging difficulties in MVVM is how a modern user interface such as callout can be efficiently managed using the MVVM pattern. In this project, we’re using the UXCallout control to display an iPad-style ‘Pop Over’, allowing users to conveniently write a new message in compelling user experience.

Since the UXCallout is built using the ClientUI’s popup architecture that complies with ISO-standards in usability, we can easily control its visibility through the IsOpen property.

The following code shows how the two-way binding is done.

<Intersoft:UXCallOut x:Name="Write_Callout" HorizontalAlignment="Right" Width="0"

PreferredPosition="Bottom"
                     IsOpen="{Binding IsAdding, Mode=TwoWay}">
                     ...
Intersoft:UXCallOut>

While we’re now able to control the UXCallout’s visibility from the view model, the state is not synchronized with the “Write” button. Fortunately, all button lineups in ClientUI include toggle functionality. This way, we can make the button to use toggle behavior and bind its IsChecked to the IsOpen of the UXCallout using two-way binding.

See the code snippet below that shows the XAML definition for the toolbar button.

<Intersoft:UXToolBarButton x:Name="Button_Write" Content="Write"
                           IsToggleButton="True"
                           IsChecked="{Binding IsOpen, ElementName=Write_Callout, Mode=TwoWay}"
                           IsCheckedChanged="Button_Write_IsCheckedChanged"

...

/>

Binding the Input Controls

Next, the input controls can be bound directly to the Feedback entity which we have defined in the view model. This process is quite basic and straightforward as we’ve covered it in previous posts.

The following XAML code shows the input controls binding.

<Intersoft:UXItemsControl CornerRadius="4" ItemContainerStyle="{StaticResource CalloutInputStyle}">

           <Intersoft:UXTextBox x:Name="Quote_Input" Height="80" WatermarkText="What do you think about ClientUI?"
                                Text="{Binding Feedback.Quote, Mode=TwoWay}" AcceptsReturn="True"

VerticalScrollBarVisibility="Auto" />

<Intersoft:UXTextBox x:Name="Name_Input" WatermarkText="Your name"
                                Text="{Binding Feedback.Name, Mode=TwoWay, ValidatesOnDataErrors=True}"
                                Intersoft:DataBinding.ClearErrorOnTextInput="True"/>
               ...
Intersoft:UXItemsControl>

Using CommandParameter in Radio Button

One of the interesting scenarios in the UI for the new form is how we can design the user interface that allows users to select their preferred color. In our previous demo, this is done using view logic since the MVVM pattern has not existed yet at that time.

In this project, we’re migrating the color selection from the non-standard controls to button controls. The radio button is the most ideal user interface to achieve this objective.

However, since radio button is not a selection control, we can’t easily manage the selection in the same way as in UXListBox. Fortunately,we have the full-blown Commanding support in all button lineups. You got the idea, we can bind the radio button to a delegate command, then assign the CommandParameter in each radio button to be passed in the delegate command.

The following XAML snippet code shows how the binding is done in XAML.

<Intersoft:UXItemsControl Orientation="Horizontal" ItemContainerStyle="{StaticResource ColorSelectionStyle}">
           <Intersoft:UXRadioButton Background="#FFD9D9D9" ToolTipService.ToolTip="Silver"
                      Command="{Binding SelectColorCommand}" CommandParameter="Silver"/>
           <Intersoft:UXRadioButton Name="NaturalColor_Input"  Background="#FFFDE6B8" ToolTipService.ToolTip="Natural"
                      Command="{Binding SelectColorCommand}" CommandParameter="Natural"/>
          ...
Intersoft:UXItemsControl>

And the corresponding view model code in C# here.

public NewFeedbackViewModel()
{
      this.SelectColorCommand = new DelegateCommand(ExecuteSelectColorCommand);
            ...
}

private void ExecuteSelectColorCommand(object parameter)
{
      this.Feedback.FavoriteColor = parameter.ToString();
}

As you become more familiar and fond with the MVVM pattern, you would be able to easily address numerous UI challenges in consistent manner. It also helps you to maintain the codes clean, readable and easy to extend.

Submitting Changes via Domain Context in View Model

Once we’re done with the UI, MVVM and binding, the final step is to perform the real database changes when the “Post” button is clicked. Again, this is done using the same MVVM pattern through Commanding.

Since the logic and data operation is encapsulated in the view model, we did not use the declarative DomainDataSource like in the old demo. Instead, the operation is called in the view model level through method call that automatically generated from the WCF domain service.

Consequently, the domain context is created only once at the FeedbackListViewModel level, which can be easily referenced through ParentViewModel in the NewFeedbackViewModel. This enables the new record operation to use the same domain context, which properly maintains the current state of the loaded data.

The following code snippet shows how the data operation is implemented.

private void ExecuteSaveCommand(object parameter)
{
        if (ValidateInput())
        {
                // set busy to block user interaction
                this.ParentViewModel.IsBusy = true;
                this.ParentViewModel.DomainContext.Feedbacks.Add(this.Feedback);

                // process changes to server-side through WCF RIA Services
                this.ParentViewModel.DomainContext.SubmitChanges(
                    (o) =>
                    {

Inserting the New Post to the Parent View Model

Finally, after the data is saved to the server-side, we’re going to reflect the changes to the UI (View). There are a couple of options to do this. You can either refresh the entire list again to show the latest data, or insert only the new record to the current list (delta approach).

We’re going to use the latter approach because it delivers more responsive user interface by eliminating the client-server round trip. Since we have the reference to the parent view model, we can easily access the Feedbacks collection and perform insertion to the collection. As the Feedbacks collection is using ObservableCollection type and bound to the ItemsSource (see the earlier point above), any changes to the Feedbacks collection will automatically reflect the user interface elements that bound to it. Pretty nice, don’t you agree?

The following code shows the complete process in ExecuteSaveCommand which demonstrates how the new Feedback insertion is implemented.

private void ExecuteSaveCommand(object parameter)
{
      if (ValidateInput())
      {
            // set busy to block user interaction
            this.ParentViewModel.IsBusy = true;
            this.ParentViewModel.DomainContext.Feedbacks.Add(this.Feedback);

            // process changes to server-side through WCF RIA Services
            this.ParentViewModel.DomainContext.SubmitChanges(
                    (o) =>
                    {
                        this.ParentViewModel.IsBusy = false;

                        if (!o.HasError)
                        {
                            // reflect the newly added post to the View
                            this.ParentViewModel.Feedbacks.Insert(0, this.Feedback);

                            // tell the View that we're done with the saving process
                            this.IsSaved = true;
                            this.IsAdding = false;
                        }
                        else
                        {
                            MessageBoxServiceProvider.ShowError(…);
                            o.MarkErrorAsHandled();
                        }
                    }
                    , null);
      }
      else
      {
           FocusErrorField();
      }
}

Download the Solution

Want to create your own rich Silverlight message board? Go ahead, click here to download the C# project solution and modify it as you like. You can use this message board project as the base to quickly jump start your MVVM project.

The C# project solution includes all the codes mentioned in this blog such as the model, view models and converts, the XAML files, and a stripped-down SQL database to minimize download size. You can also find several nice design stuff in the solution such as the minimalist scroll viewer style, iPad callout style, glass button, a vector refresh symbol and much more.

Note that you will need SQL Server Express 2008 installed to run the sample. The latest version of ClientUI is required as well. If you’re still using build 8 (initial RTM build), I highly suggest you to upgrade to the latest version (build 9) for the best stability and performance. Click here to download the latest version, and here to read the installer change log.

Conclusion

So far, you already have some ideas and insights of the key challenges in building Silverlight application using MVVM pattern and WCF RIA Services. Often times, you will deal with the user interface requirements demanded by your users and how you apply the MVVM pattern to address the user interface challenges. Hopefully this message board case study can be useful for you to learn and jump start on using the ClientUI controls with MVVM.

Click here to try the message board online. The following screenshot shows the message board sample that we studied in this post.

Although it may look prettier when integrated into our live showcase (done through SAF and on-demand loading), it’s actually the same project that made available for download.

In the next blog post, I’ll do a quick blog discussing how a ClientUI application can be easily loaded and reused in another ClientUI application domain. For instance, I could load this message board application in a navigation frame of a more complex application, or load it as the content of a window.

For now, I hope you enjoyed the Silverlight message board sample! Let me know if you have any questions or feedback.

All the best,
Jimmy
Chief Software & UX Architect

Top 10 Must-See ClientUI Samples

Jimmy Petrus — Mon, 30 Aug 2010 06:42:26 +0000

Last week, we officially released the gold version of ClientUI, the most anticipated user interface library for the Silverlight and WPF development. Click here to download the RTM bits and here to read the release announcement which includes several important news and links, as well as the new exciting stuff introduced along.

In this first release, ClientUI shipped with fundamental frameworks and comprehensive user interface controls which are aimed to provide an end-to-end solution for development challenges covering MVVM, binding, styling, data access and connectivity, and how they can be wired up elegantly to rich UIs such as callout, dialog box, window and more. The ultimate goal is to simplify the line-of-business application development process in both Silverlight and WPF platform, while at the same time resulting great experiences that users demanded. If you’re new to ClientUI, please learn the basics here and more advanced topics here.

In my previous post, I’ve touched the surface about the ClientUI Showcase and its brand-new Control Explorer. You can find nearly 140 samples in the Showcase page, which we created to effectively demonstrate many of the frameworks, controls and features available in the ClientUI. In case you haven’t got time to check out all of them, no worries, I’ve got the compilation of most interesting samples that you should check out for yourself.

In this post, I’ll discuss on top 10 most interesting samples that I’ve chosen out from hundreds, which can be used as your main reference to learn Silverlight, MVVM and how to elegantly deal with modern user interface metaphors such as call out and dialog box along with MVVM. It really didn’t seem to be as easy as few-minutes task that I initially thought, since most of the samples turned out to be compelling, and beautifully designed. Anyway, here is the list in descending order.

10. iPhone-style Application Launcher with Fluid Drag-drop

Tags:	UXGridPanel, Uniform Grid Layout, Fluid Drag-drop, Application Launcher
Online Demo:	http://live.clientui.com/#/Controls/EllipsisText/iPhoneIcons
Installed In:	[Sample Folder]Intersoft.ClientUI.Samples.Controls ViewsEllipsisTextiPhoneIcons.xaml

Drag-drop is perhaps one of the many exciting features in ClientUI that I haven’t manage to cover in my ClientUI blog series, which I hope to gradually cover them on sample basis. This sample demonstrates several key features of UXGridPanel, an advanced panel that allows you to arrange items in uniform grid such as seen in the above screenshot.

In addition to its uniform layout capability, UXGridPanel features fluid drag-drop capability that enables you to create application user interface that doesn’t only look good, but also feel great. With only some property sets, you can easily make the items drag and drop-able. To see how ‘smooth’ the movement is, you have to experience the sample yourself.

There are many cases where you can apply this modern user interface pattern, imagine a CRM dashboard or healthcare app that shows a list of application shortcuts. Users would then be able to re-order the shortcuts based on their preferences, save it to the database and have the settings loaded on the next visit.

9. Customer Details with Rich Editing Form

Tags:	MVVM, Commanding, Window, Tool Bar, Combo Box, Text Box, Expandable Group, Content Reflector, Business Application, Rich Editing Form
Online Demo:	http://live.clientui.com/#/WindowControls/UXDesktop
Installed In:	[Sample Folder]Intersoft.ClientUI.Samples.WindowControls ViewsUXDesktopDefault.xaml

This sample represents one of the most common user interface patterns in a business application, consisting of a visually-compelling editing form with comprehensive range of input controls styled in professional Aero theme with perfect combination of ISO-standards dialog box and a rich tool bar.

This sample should be your first reference when you need to build a rich, MVVM-pattern business form. It shows how to bind the text input using two ways data binding to the view model, and especially how to bind the Combo Box to view model through ItemsSource and SelectedItem. Interestingly, the Save and Cancel command can be bound to view model as well through DelegateCommand.

8. iPad-style Book Navigation with Elegant 3D Flipping Transition

Tags:	UXFrame, MVVM, Commanding, Fluid Drag-drop, 3D Flipping Transition, Journal Button, Routed Command, Navigation Frame and Modular Page
Online Demo:	http://live.clientui.com/#/NavigationControls/UXFrame
Installed In:	[Sample Folder]Intersoft.ClientUI.Samples.NavigationControls ViewsUXFrameDefault.xaml

This sample uses the navigation frame (UXFrame) and modular page (UXPage) to achieve master-details scenario in a typical business application. For instance, when a book is clicked, the application navigates to the book details. The interesting part is how the navigation process can be elegantly built using MVVM, routed command and transition to deliver stunning yet consistent experience.

Although it may seem complex at first, this sample is fairly simple and can be done easily. It’s basically consisted of two pages, the first lists all the books and the other lists the details of selected book. Using MVVM, the NavigateUri of the book can be bound to the book details page, passing the book’s ID to the query string. The other visual goodies such as transition can be easily enabled with just some property sets – EnablePageTransition and Back/ForwardTransitionEffect.

7. Rich Text Editor with Consistent Commanding Interface

Tags:	Routed Command, Hybrid Command, Menu Bar, Tool Bar, Context Menu, KeyBinding, ISO-Standards Usability, Window, Text Editor, Productivity Application
Online Demo:	http://live.clientui.com/#/ClientUIFramework/RoutedCommand
Installed In:	[Sample Folder]Intersoft.ClientUI.Samples.ClientUIFramework ViewsRoutedCommandDefault.xaml

This is one of my favorite samples as it shows the best practice and guidelines in using our commanding framework – specifically the routed command and our flagship hybrid command – to create a typical productivity application with consistent command interface.

This sample also demonstrates a wide variety of our user interface controls such as menu bar with nested menus, tool bar with built-in split button and dropdowns and an elegant context menu – all styled in professional and beautiful Aero theme. For business developers, that means you can simply drop the controls to your page without have to deal with the tedious tasks such as template editing or styling.

I highly recommend you to take a look at the sample codes to learn more about commanding as we bring the WPF’s commanding power to the Silverlight.

6. Hotel Selector with Dazzling Flowing Interface

Tags:	UXFlow, MVVM, Binding, Floating Details, Glass Label, 3D Cover Flow, Business Application
Online Demo:	http://live.clientui.com/#/UXFlow/Binding
Installed In:	[Sample Folder]Intersoft.ClientUI.Samples.UXFlow ViewsBindingDefault.xaml

Fancy user interface controls such as cover flow, has been traditionally known as type of controls that don’t comply to development standards since the 3D perspective and flowing algorithm requires special handling. But that isn’t the case for UXFlow, our flagship flow user interface with state-of-the-art movement and fluid experiences that in certain extent, performs better than the Apple’s own cover flow.

This sample is inspired from a hotel selection interface that American Express featured sometime ago in their site which unfortunately delivers very poor experience as they used Adobe’s sluggish Flash. The interesting part of this sample is how we built UXFlow to comply with all development standards – such as MVVM and commanding – in addition to its beautiful 3D flowing. For instance, the SelectedItem of the UXFlow is bound to the view model which is reflected in the Description Box located in the left side.

If you would like to build something amazing for your users, you can now use UXFlow along with your favorite MVVM implementation to easily provide the items source and capture the selection.

5. Stepped Wizard-style Setup Form

Tags:	UXNavigationWindow, Back and Forward (Journal) Button, MVVM, Binding, Commanding, Command Bar, Default Focus, Navigation Window, Business Application
Online Demo:	http://live.clientui.com/#/NavigationControls/UXNavigationWindow
Installed In:	[Sample Folder]Intersoft.ClientUI.Samples.NavigationControls ViewsUXNavigationWindowDefault.xaml

This sample is one of my best favorites which was created to answer developer’s needs on how to deal with multiple pages in navigation frame using MVVM. Instead of using a standard navigation frame (UXFrame), this sample used a specialized window called navigation window (UXNavigationWindow) to provide built-in journal button for the local navigation frame.

This sample should be your first reference when it comes to navigation with multiple pages and sophisticated validation that bound to a single view model. Notice the command buttons in the command bar, i.e, the Next and the Finish button, also properly reflected the current page, which is also bound to the view model through commanding.

4. To Do List with Dragable Items and iPad-style Popover

Tags:	UXToolGroup, MVVM, Commanding, Data Binding, iPad-style Callout Interface, Customized Check Box, List Box, Fluid Drag-drop, Productivity Application
Online Demo:	http://live.clientui.com/#/BarMenuControls/UXToolGroup
Installed In:	[Sample Folder]Intersoft.ClientUI.Samples.BarMenuControls ViewsUXToolGroupDefault.xaml

With the advent of Apple-centric user interface, the experiences such as those in iPhone and iPad have quickly becomes the interface standards that today’s users expected to see in an application. But, to come up with a superior result that Apple demanded, the user interface library requires a very unique and extremely detailed engineering process. Take a quick example, the round corner, glass, gradient and bevel effect of a button should be designed in a way that enables it to look good in whatever theme used.

We put many of those design guidelines into our controls engineering and make it ‘feature sets’, so that you can build such interface in rapid manner – without have to deal with large amount of codes or styling. It took us nearly 3 years to master the design guidelines to this level, so I bet you won’t want to do it yourself

So what’s interesting in this sample apart of its sleek interface? I’d say three things. First, the way we deal with the popover (call out) using MVVM pattern, while at the same time conforming to the ISO-standards in usability. Secondly, the list box is using MVVM to control the visibility of some parts of its elements, i.e., the tags such as “Web, Sales” will appear if the data existed. And finally, the item can be re-ordered with drag-drop. It can also be removed as simple as dragging them out from the view.

This sample definitely opens up a whole new possibility of rich user experiences that you can explore further. Use this sample as your main reference for building compelling applications with popover and Apple-centric user interface.

3. Flickr Photo Browser

Tags:	Search Box, Stack Button, iPad-style Pop Over, MVVM, Binding, Converter, Commanding, Command Parameter, 3D Cover Flow, Flickr Service, Asynchronous Data Connectivity, Busy Management, Photo Mashup Application
Online Demo:	http://live.clientui.com/#/WindowControls/UXDesktopDock
Installed In:	[Sample Folder]Intersoft.ClientUI.Samples.WindowControls ViewsUXDesktopDockPhotos.xaml

While the seven samples above greatly demonstrate the wide variety of commercial-class user interface that you can build with ClientUI, this sample quickly appears into our 3rd best and most interesting samples as we reviewed it. A key difference is that it performs real-world data connection to server, and how it can be effectively handled using MVVM and our user interface controls such as the search box, dropdowns and the flow interface.

One of the interesting scenarios that you can learn is how to deal with the busy state while performing asynchronous callback to a data service, which in this case retrieving a list of photos from Flickr server. While retrieving the data, you can notice that the cursor will be changed into hourglass to indicate a ‘wait’ operation, which is exactly the same experience you can find in Windows, or Leopard.

Another interesting part is the item selection indicator in dropdown which should automatically reflect the state of the current view. For instance, if I bring up this window with ‘Sky’ selected from the dock, the dropdown menu should have the selected indicator on the Sky menu item. This is also done elegantly with MVVM through CheckedState, Command, CommandParameter and Converter.

So, if you want to build a great looking interface with dynamic data and MVVM selection, you should bookmark this sample for your main reference.

2. Rich Application with Window, Drag-drop and Dock Integration

Tags:	UXDesktopDock, Window, Desktop Integration, Dock Button, Grid Stack Menu, Fluid Drag-drop, MVVM, Commanding, Command Parameter, Query Drop State, Custom Drag Tooltip, Next-generation Business RIA Application
Online Demo:	http://live.clientui.com/#/WindowControls/UXDesktopDock
Installed In:	[Sample Folder]Intersoft.ClientUI.Samples.WindowControls ViewsUXDesktopDockDefault.xaml

Many of the frameworks and user interface controls that we built from scratch are geared toward an ultimate purpose. This sample resembles the ultimate model of a next-generation application that we want to make possible with ClientUI and Silverlight, this includes a very sophisticated integration between the desktop, windows and the task bar interface.

Among the rich experiences that you may have seen before in the previous samples, such as the grid stack menu with minimalist scrollbar and the transparent window, the dock-style taskbar is our new power tool that allows user to interact with visual objects in a natural way, something we called ‘natural user experiences’.

In addition to full-fledged capability for application launching, the desktop dock (UXDesktopDock) also includes QueryDropState, a specialized drag-drop feature that allows you to detect what kind of object is currently dragged over, and then provides a visual feedback and additional processing when that object is dropped on the button.

Imagine dragging a contact and drop it to a recycle bin to delete it, or drop it to a “Mail” application to quickly compose an email for that contact. I’ve been long expecting such user experiences to come on the web, and today, I’m excited that we’ve made it possible. You can try it live from either locally installed samples or from the live demo. Find the links provided above.

So you might be wondering, what kind of applications that you can built with such natural user experience concept? There are a lot, to give you some insights, think of a kiosk application that runs full screen, a modern CRM application, or a back-office application for management executives. Or what about the next Facebook spin-off? I’ve heard a lot of users complaining on the poor Facebook user interface that makes basic tasks so difficult – try it yourself, how many steps you need to send a message for a friend, or upload photos on a specific album?

1. The ClientUI Control Explorer

Tags:	Scalable Composite Application, Modular On-demand Loading, Deep-link Navigation Architecture, ISO-Standards User Experiences, Search Box, Tool Bar, Tool Group, Navigation Bar, Callout, MVVM, Binding, Commanding, Template Selector, Container Style Selector, Elegant Styles
Online Demo:	http://live.clientui.com
Installed In:	[Sample Folder]Intersoft.ClientUI.SamplesMainPage.xaml

Out of hundreds of compelling and inspiring samples, the ClientUI Control Explorer deserves the #1 position for the best and most interesting sample that describes the ClientUI as a whole.

Not only does it take advantage of the Silverlight and ClientUI power to the max, the control explorer sports a very unique and elegant design that took us nearly 7 times of continuous revamp before it stands as it is today. Apart of that 7 times revamp, the user experience aspects have been enhanced several dozens times and the final version you seen today was the one selected out of many proposed designs. This took the most of our resources – from graphic designers, user experience architects, development team, to system architects and end-users, gathering together to build the explorer to perfection.

If you take a closer look, our samples was shipped with a total of nearly 30 megabytes worth of assets, yet the control explorer launches in only 2-3 seconds. This is exactly the model of rich internet application that we want to bring in this release, which ultimately delivers the real-world apps that users will really love to use.

The remaining question would be, how is that possible to create rich user experiences that load in just few seconds? The answer is fundamentally the same technique that Windows or Leopard used to power their operating system. Think of loading only several required drivers and very small “shell” for quick startup, and then load the applications when users demanded it. ClientUI is architected with similar “shell” concept to enable truly scalable composite Silverlight application. Hopefully in the next few weeks, a basic sample can be published to demonstrate how it works, so you can use it as the reference and starting point for your next Silverlight projects.

The other factor that makes the control explorer the best sample is how it pushes the Silverlight capabilities beyond the limit. From the search box, journal-aware multiple level navigation, cover flow selection, the tool bar with commanding, window, dialog box, callout and popover, to the sample manager and property options – everything is strictly built upon MVVM pattern. This is something impossible to be done before due to the lack of technology and user interface library in the Silverlight itself.

The image above illustrates the navigation architecture that “just works”. You can perform navigation in many different ways such as those indicated in the red hotspot above – either by clicking the launch button, double clicking on the cover flow item, choosing an item from the Top Category panel, selecting a product from the Controls Map, or pressing Enter from a search box result, the navigation will just work – consistently and reliably. Without thoughtfully-architected MVVM, a powerful navigation framework and the entire UI lineups to support it, I don’t have any ideas how that can be possibly done.

Now, you too can build such engaging navigation experience. Go ahead, download the ClientUI evaluation copy for yourself. We left the Sample Launcher and the Assets project open-source, so you can explore and learn how to deal with many UI challenges with MVVM.

Summary

If you feel like in the mood of browsing and aren’t in rush in the next couple hours, I suggest you to enjoy every sample and explore the options available in each sample. Jump straight to the Showcase to start your own ClientUI journey.

The complete frameworks and user interface library available in ClientUI enable you to create literally any kind of application interfaces and user experiences you dream of – using the development pattern you preferred, either the classic View-Model pattern or the modern Model-View-ViewModel pattern. If you’re serious about building great user interface applications for the Silverlight and WPF, you should consider investing on our subscription licenses, rest assured that we’re maximizing every dollar that you invested through rapid growth and constant innovation.

Tell us what you think about ClientUI. Which samples do you like the most? Are there any specific user interface scenarios or application samples that you would like to see? Let us know and we’ll try our best to cover them in the next blog post, or in the next sample updates.

All the best,
Jimmy.

ClientUI RTM Is Released

Jimmy Petrus — Thu, 19 Aug 2010 11:08:00 +0000

After the busiest two months since the RC release, we’re delighted to announce the gold release of ClientUI today. This RTM release ships with a vast array of business-inspiring samples and UI pattern, product documentation, countless of enhancements and even more new controls.

Here are some useful links for you to quickly getting started.

ClientUI.com Is Live

Along with the birth of ClientUI, today we officially launched ClientUI.com, a new micro-site dedicated to provide the latest updates, information, resources and showcases of ClientUI.

Fashioned in a visually-compelling and modern design, the ClientUI.com represents the branding experiences of the product itself which emphasize on great user experiences.

You can explore many content and resources that we brought in this initial release, such as the overview and get started page. And due to large requests, we’ve got the complete controls listed in a nicely arranged groups based on the control’s functionality.

Click here to start your ClientUI.com experience.

New ClientUI Showcase

While you’re at ClientUI.com, make sure you check out many exciting stuff in the Showcase page. Featuring hundreds of business-inspiring samples and compelling UI patterns built entirely with ClientUI, the showcase lets you find fresh ideas and attractive UI samples to be instantly put on your project.

Click here to visit ClientUI Showcase.

At the heart of the showcase is the intuitive Control Explorer that hosts these hundreds of samples, loads the required external packages on demand, and displays the content in an elegant transparent-window style interface. The control explorer is built entirely with MVVM pattern and fully takes advantage of several ClientUI’s key technologies, including journal-aware navigation with deep link and external package mapping, events routing and commanding, and binding library for easy data binding in templates and setters. This is definitely something interesting to be discussed further, but for now, let’s just enjoy the new stuff we delivered today.

As soon as the Control Explorer loads in few seconds, you’ll be served with a collection of mouth-watering samples presented in an intuitive 3D cover flow interface, ranging from simple sign-up form, airmail-style contact form, to elegant iPad-style task list and much more.

To get started, flip through the collection of samples (try using mouse wheel), and double click on the item or click on the Launch Sample button to see the sample. As we designed the interface to be really simple and easy-to-use, you can quickly interact with user interface to achieve several common tasks, including typing in the search box to search specific samples, or click Browse All to see all available samples grouped by functionality.

Needless to say more, click here to start exploring ClientUI Live Samples.

Even More Controls in RTM

Ever since we released the Release Candidate early last month, our development team continuously shaping up the entire ClientUI lineups with enhancements and fundamental controls that are paramount to build rich, real-world business applications.

I thought this list might be useful for developers who have worked on RC and would like to know the enhancements and addition in the RTM. Some of the notable new controls and enhancements are as follow.

UXScrollViewer (New Control)

If you take a closer look at many of our labs or individual samples in RC, you’ll probably noticed on one general missing component, a scroll viewer with intuitive, standards-compliance scroll bar.

The problem with Silverlight’s built-in scroll viewer or scrollbar is that they don’t behave like the one that we expected in a professional business application. Compare the previous UXListBox using standard scrollbar and the new UXListBox with our new UXScrollViewer.

All ClientUI selection controls have also been updated with the new UXScrollViewer in the RTM release, including UXListBox, UXComboBox, UXAccordion, and many other content controls.

UXComboBox (New Features)

UXComboBox receives major enhancements and new features to enable various data input scenarios. In the RC, the UXComboBox supports only read-only mode where you generally perform input selection through the dropdown list. The RTM release includes support for both read-only and editable mode.

We even include several bonus features such as as-you-type auto-completion.

And a nice usability standard implementation for text search that supports case sensitive and insensitive mode which is consistently applied to UXListBox as well as other selection controls. For instance, with a non-editable combo box or list box focused, it’s intuitive to press a character to quickly jump to the item starting with that character. See the illustration below.

UXSearchBox (New Control)

One of the most significant additions in the RTM release is a rich-featured, MVVM-ready search box that can be easily styled to your liking. Similar to combo box, the search box has built-in drop down to show the search results which supports navigation through NavigateUri or NavigateUriMemberPath (for MVVM).

Our goal for the search box in this release is to support two most common search scenarios. The first is to support searching with auto dropdown mode. See below.

And the other is to support searching where the search results is bound to other visual element instead of the search box itself. This has become a very common search UX pattern adopted in various popular applications today, such as in iTunes, Windows Explorer, and more.

The sample below is a fully-functional Flickr Photo Browser that uses UXSearchBox to get photo results from Flickr service and bind them to an UXFlow.

To try the new UXSearchBox, head to UXSearchBox Samples.

To find out more enhancements, please refer to the Products Documentation that shipped in the ClientUI RTM installer, or explore the controls online from the ClientUI Live Samples.

Get Started with Your Next Rich User Experiences

With the ClientUI officially released, now it is your turn to build something amazing for your users. To help you get started with ClientUI, we’ve listed down everything you need to know in a nicely arranged Getting Started page.

PS: All lab samples that I showcased in my series of blog posts have also been updated to use the RTM build. The lab samples can be accessed below:

If you have installed the ClientUI RTM, you can find the source code of the lab samples in the sub group of WebUI Studio 2010 group. For any questions or feedback, please post them to ClientUI Community Forum.

Last but not least, enjoy the ClientUI experiences. We hope you love the ClientUI as much as we do.

Update 8/23/2010: The new product licenses has been sent to all customers with active subscriptions via email. Please login to Developer Network to get the keys for product activation. For prospects, go to www.clientui.com/download to download the 30-day free evaluation version.

All the best,
Jimmy.

ClientUI Part 7 – Unveiling Desktop, Window and Dock Experiences.

Jimmy Petrus — Sat, 17 Jul 2010 16:18:00 +0000

Earlier this month, we have released a public RC version of ClientUI 3 which includes all controls for Silverlight 3, Silverlight 4 and WPF 4. I trust you’ve got yourself a copy of the bits – if not, you can download and get started here. While we’re preparing for the final release, you can actually test drive the ClientUI RC bits in your projects. Many of the controls and templates that we shipped in the RC are already near RTM quality thus enables you to do quick prototyping or jump into development directly.

In this post, I’ll continue on the ClientUI series blog which is focused on many exciting visual goodies – something that your end users will definitely love to see and experience with. Now with the ClientUI RC bits in your hand, you can try many of the new features by yourself, or download the samples and run it in your development machine.

Toward A Better RIA Application Model

In my past blog series, I’ve introduced several key application scenarios that you can now build on a Silverlight platform – from a simple website navigation to a more advanced, journal-aware business application model. These application models are commonly called as single document interface (SDI), whereas users navigate to and interact with only one document (or content) at a time.

In simpler thought, you can also think of it as a single task-based interface. For an instance, navigating to a Customers page will show you a list of customers where you can view customer information, edit, delete or do actions related to it. Then, if you would like to see some Reports, you need to navigate to the Reports page which consequently leaving the Customers page. This kind of presentation pattern describes a single document interface.

While SDI pattern suits most of simpler applications, a more complex one such as composite application can use more innovative presentation to overcome the single-task limitation, which at the same time enhances user experiences and productivity. One of the most popular presentation patterns for composite applications that made possible today is the multiple document interface (MDI) pattern.

The MDI is exactly the presentation pattern that we want to bring along in this ClientUI release which we hope to empower the next-generation RIAs with more compelling user experiences that revolutionize the way people interact with information. Contrary to the SDI, the MDI pattern allows multiple documents to be shown at the same time, such as showing Contacts and Reports in either stacked or side-by-side. That said, MDI pattern is widely adopted in most graphical operating system today, such as Windows, Mac OS, Linux and more.

The following illustration compares the SDI and MDI presentation pattern.

The Desktop and Window Experiences

It’s undeniable that technical difficulties and architecture complexity are among the aspects that hold back application developers and UX designers to employ MDI presentation in their composite RIA applications. That’s not to mention cross-browser compatibility, usability and consistency, and other details. To that end, we’ve built a set of tools from the ground-up which enable developers to rapidly build rich composite applications using MDI pattern. I’m excited to introduce our next-generation UXDesktop and UXWindow line-ups.

The UXDesktop and UXWindow are two key components of MDI presentation pattern. Specifically designed to meet the strict platform-standards in usability and experiences, UXWindow delivers consistent and reliable results regardless of browsers or platforms.

The UXDesktop manages the life cycle of all UXWindow instances that it hosted, this includes the window positioning arrangement, the window state management, window events and command management, while the UXWindow represents a logical container that supports fundamental MDI features such as ability to activate, deactivate, minimize, maximize, restore, close, move, resize and more.

The following screenshot shows the UXDesktop and UXWindow at a glance.

UXWindow is a full-featured windowing component which provides all the user interface elements needed in a window such as title, control box, option buttons, chrome border, content area and more. It gives you complete customization over its look and feel, so you can create any kind of commercial-class UIs to your liking.

In this release, we also shipped various windowing components, such as UXWindowChrome, UXDialogBox, UXMessageBox and UXNavigationWindow. Using these components together with UXDesktop in your apps will breakthrough the existing RIA standards with full-fledged desktop experience that runs on the web.

Unlike simple window-look-alike approaches (such as the one in Silverlight’s ChildWindow), UXWindow fully complies to strict usability standards that I detailed in my fourth ClientUI series. One of the most critical aspects that a window must have is a solid focus management. So, if you switch from WindowA to WindowB, the logical focus will be set to the focusable element in the WindowB. Similarly, it should focus to the last element where the focus was left off upon switching to the previous window. Called focus scope and logical container, these are something Silverlight didn’t ship with, thus makes it nearly impossible for developers to implement such functionalities. On the other hand, we built all the required architectures from the scratch making many of these usability standards possible in the UXWindow and in the rest of our UI controls. And at the developer’s end, nothing else need to be done!

The image above shows a dialog box with command bar and buttons. The OK button is associated as default button, while Cancel as cancel button. When such buttons existed, dialog box automatically detects their behaviors and corresponds to the dialog result based on the clicked button. Consequently, the key state will also be automatically mapped to the default and cancel button. And again, nothing extra need to be done at developer’s end. All you need to do is simply dropping a command bar and some buttons, then set their properties.

The UXNavigationWindow is a special window type that allows you to create local navigation in the window-scoped container. You can think it as a minified, full-featured navigation frame that’s hosted in beautifully-dressed presentation. I’ll discuss this in another time as it has a lot of nice features while we better stick with our topics for now.

Meet UXDock – the Revolutionized Dock Experiences

In addition to many fundamental controls, this release also packed-in a new version of our flagship Dock control (previously known as WebFishEye). Called UXDock, the new dock control was rewritten from the ground up to comply with Silverlight development standards. For instance, UXDock is now an ItemsControl and it used ItemsPanel too. This means that you can now customize UXDock in the same way and manner as you would do on a standard Listbox control.

But, UXDock is not just about naming changes or architecture revamp. We re-engineered everything – from the zoom logic algorithm, stack layout mechanism to keyboard support and fine-tuned performance. In addition, we also managed to implement UXDock features to match the Apple User Experiences standards – many thanks to Apple folks who pointed out many of the usability issues in the previous version.

The following image illustrates some of the fundamental usability enhancements that we’ve addressed in this new version.

To give you more insights of what you can do with the new UXDock, here’s the top five new features that you’ll love to see:

Ultra-smooth Zooming Algorithm
The most important user experiences aspect in a Dock control is the smoothness of its zooming process. To achieve the best result, every zoom point is calculated differently based on the zoom angle and where the mouse cursor enters from. Consequently, the new UXDock is twice faster than its predecessor, and you won’t spot any flickering movement again.
Scrollable Stack Grid
In real-world business apps, you don’t use UXDock to contain only a few contacts, documents, or items. That’s why our engineers revamped the Stack Grid to support scrollable mode so you can load any number of items you desire.
Comprehensive Drag-drop Support
Unlike the files-only drag-drop in Silverlight 4, ClientUI includes powerful drag-drop framework that supports arbitrary drag-drop between any visual elements. And better yet, our drag-drop framework is uniquely built around WPF semantics, so the same piece of Silverlight codes can continue to work without major changes in WPF project. The new UXDock is built on the top this drag-drop framework enabling you to add great interactivity to your RIAs – imagine dragging a contact from the stack onto the mail button to launch the Compose Email window, or reordering your favorite documents – all within the same interface.
Stack Folder Appearance with Reflection
The new UXDock now implements stack folder appearance in which items are stacked in the button area giving realistic and stunning items presentation. The stacked items aren’t just visual goodies, they are real visual elements that will spring out when the stack button is opened, and even can be navigated using keyboard in the open state.
New Stylish Stack Menu
Is the Stack Arc too fancy for your business app? Does the Stack Grid take too much of your screen real estate? Then turn to our new Stack Menu, a new mode that allows you to show stack items in efficient yet compelling menu style interface.

To get clearer picture on the top new features above, please refer to the following illustration.

There are still dozens of nice new features that I can’t detailed here. Rest assured they will be completely listed in our website and documentation when it becomes available in the next few weeks.

Last but not least, UXDock now also runs on WPF! You can now unleash your creativity and starts using UXDock experience whether you’re delivering RIA or desktop apps.

The Ultimate RIA Experiences Comes To Life

So, now that we have UXDesktop, UXWindow and UXDock unleashed, the only thing you would want next is to make them work nicely together – click on a button in the Dock to launch an application, click on the minimize button to bring down the window into the Dock, click a minimized window to spring it up back, or open a stack from the Dock and click a contact to see its profile in a stylish window.

To cover various application-specific requirements and UXDesktop integration, we’re introducing UXDesktopDock, an innovative UI control that includes everything existed in UXDock, plus desktop integration features and tweaked configuration for optimal use in business applications.

One of the most challenging requirements in the architecture design is how we want these components to work together without strongly-coupled type reference. This enables us to ship the UXDesktop and UXDock in different assemblies, while still enabling them to be integrated through loosely-coupled view integration. Furthermore, this architecture enables future extensibility when new type of Dock or Window is introduced while still having these components to work together without code changes.

Thanks to our solid framework – the components integration can be designed elegantly through the proper use of the routed events, routed commands, routed input and focus scope. See the following image for more details.

As shown in the above illustration, we took a more generic approach to the MDI architecture such as using ITaskBar naming convention rather than strongly-couple it to UXDock. In fact, the Dock UI is just a kind of the task bar, we could introduce different kind of Task Bar UI controls in the future – who knows, maybe Windows 7-style or uBuntu-style task bar

That said, these three fundamental MDI components – the UXDesktop, UXWindow and UXDesktopDock – empowers you to create amazing RIA solutions that are very difficult or impossible to achieve previously. To be more exact, the combination of these three components enable you to do the following:

Launch local XAML applications.
The most basic operation in a MDI pattern application is to display a window that hosts its application content. The way we built our MDI architecture enables you to add windows and launch them in rapid fashion through your preferred IDEs – either Blend or Visual Studio 2010.
Launch external applications.
A more advanced MDI application such as a composite application definitely requires a consistent approach to launch a window that located in an external package (XAP), a technique that some MVVM guys called as Dependency Injection (DI). We took it to a higher abstraction where developers can naturally think external packages as “applications”, much like the application that you can download from Internet and install it in your Windows or Mac OS. This way, you don’t cope with tedious attributes or dozens of interfaces to satisfy – just a simple location discovery would do.In a correctly designed ClientUI app, you can even load the external “application” to the UXDesktop without code changes. You can try this later in the demo app that I put together in the end of this blog post.
Navigate to XAML pages.
In addition to launching an application window, you can also navigate to an UXPage instance that resides either locally or in other packages. When the UXDesktop detects that the specified target is a valid UXPage, it’ll host the page content in UXNavigationWindow instead of standard window. Many of the navigation features that I described in the part 5 of my blog series will work consistently in the UXNavigationWindow.
Minimize windows to a certain location in the Taskbar.
As well as supporting the basic operations such as described above, our loosely-coupled MDI architecture also supports full-featured window management tasks. This includes minimize, maximize, restore, launch and close operation of a window, which should be well integrated to the task bar. For instance, to properly achieve minimize operation, a task bar needs to provide information on the exact position where the window can be hosted.

Each main visual element of a “XAML Application” is commonly represented by an IWindow interface which can be easily referenced through URI semantics.

The image below captures the essential concept of application integration in UXDesktop.

As seen in the above illustration, the application and navigation can be easily identified through two key properties, ApplicationUri or NavigateUri. The desktop integration provides more features such as opening single window instance versus multiple window instances.

Another feature that top our list is the automatic synchronization and status notification in UXDesktopDock. This is something that we designed extra thoroughly to ensure the dock buttons and windows are consistently synchronized regardless of the source that triggers the event. I.e., a window can be launched from a dock button, from a stack item, from routed command, or from API.

The following image shows several key features that natively managed by UXDesktopDock.

See It In Action

To demonstrate many of these phenomenal user experiences, I’ve put together a desktop-style sample that loads Contacts application (external XAP) on demand, various window types and sample application content that makes sense to have in such composite MDI apps.

Click here to launch the sample and experience it for yourself.

Build Your Own

We took every step and effort to ensure that our products aren’t just powerful and innovative, but also easy-to-use and developer-friendly. This means that you can rapidly create compelling MDI-style RIA solutions like the one I showcased in the matter of minutes! See the steps below.

Step 1: Create New Desktop RIA Silverlight Application

Launch Visual Studio 2010 from your program group, then choose New Project in the Get Started page.

Step 2: Add New Window

After your new project is created, right click on the Views folder and choose Add New Item. Select UXWindow in the template list and click Add. You can put in some content to the new window, such as a GlassLabel, or possibly an Image.

Step 3: Add New Button and Connect to the New Window

Open the MainPage.xaml, select the UXDesktopDock instance, right click on it and select “Add Button” from the menu. With the new button selected, bring up the property window and look for ApplicationUri property. Type in /Views/MyRichWindow.xaml which is the window page that we’ve just added. Optionally, you may want to assign an icon to the button to easily identify it in the runtime. Let’s choose the striking WhatsNew icon for the button.

Step 4: Run Your Project

Hit F5 to run your project, you can now click on the button and see the window popped up smoothly!

Congratulations! You’ve got a truly rich RIA solution running in just few minutes!

With the ready-to-use templates packed with all rich ClientUI controls inside, that means you can easily replace the content with your real data and put-in some grids. It’s very possible that you could deliver a rich RIA solution in just few days! Isn’t that cool?

Summary

It took us more than 3 years to conceptualize the entire MDI architecture and to get every piece of components to work together. I should also mention that the UXDesktop, UXWindow, UXDock and UXDesktopDock experience doesn’t only run in Silverlight 3 and 4, it also works consistently in WPF 4. Defying the MDI requirements, strict UX challenges and the cross-platform architecture is something very difficult that our engineers are hard at work. And finally we’ve got them delivered.

Well, so far we’ve discussed a lot of possibilities that you now can do in Silverlight using ClientUI – from basic website navigation, advanced multi-level navigation applications, and now phenomenal desktop-style applications with full-featured MDI capabilities. With the solutions we’ve built this far, we hope Silverlight can be seen as a compelling platform for RIA-based business apps, as well as to invite non-Microsoft developers – such as Adobe AIR or JavaFX developers – to build something amazing using Silverlight and ClientUI.

Finally, if you haven’t got yourself a copy of ClientUI RC, please click here to get started with your next innovative RIA solutions. We already have dozens of hot discussions on our Community Forum talking about Silverlight & WPF compatibility, navigation, MVVM, UX, and more. So make sure you post your questions and feedback to ClientUI forum. Enjoy!

All the best,
Jimmy.
Chief Software & UX Architect.

Part 6 – ClientUI 3 For Silverlight and WPF. Delivered.

Jimmy Petrus — Sat, 03 Jul 2010 04:45:50 +0000

Few days ago, I posted a blog that details several aspects that are very fundamental in a real-world business Silverlight application specifically on the navigation architecture, authentication and security, MVVM and more – and more importantly, how we engineered ClientUI from the ground-up to address all these challenges and enable them to work in concert.

After a long journey of development, today is the day we’ve all been waiting for. The wait is over – we’re excited to officially announce the ClientUI Release Candidate (RC) which is now available for public download. More details below.

Silverlight & WPF Developers – What Can ClientUI Do For You?

Beyond just a set of components, ClientUI takes Silverlight development to a whole new level by putting together MVVM-ready framework, supercharged navigation framework with nested navigation support and role-based authentication, WPF-style routed command and events and powerful, easy-to-use drag-drop controls. And with over 60 rich UI controls with strict ISO-standards conformance, now you can quickly and rapidly create any types of rich Silverlight applications where your creativity is the only limit.

Since ClientUI resembles a wide range of feature-sets ranging from architecture to development to runtime, it gives all the tools needed in RIA development for different types of users, from system architects, web developers to UX designers and end users. Read our recently published newsletter to discover what ClientUI can do for you.

Download Intersoft ClientUI 3 RC

Visit ClientUI.com and click on the Download button to start your download, then follow the guided step when you reach the download form. We’d love to hear your download experiences, tell us when you got couple minutes!

Select Platforms

If you only want to evaluate ClientUI, make sure you choose Web Setup in the download instruction that sent to your email. When you’re asked to select platforms, select only Silverlight and WPF platforms. This allows the Setup to download only the necessary files required for ClientUI development. See the image below.

By default, the Setup will include all development platforms. If you also develop ASP.NET apps, I highly recommend you to install it as well – we’ve got 8 amazing, most-wanted ASP.NET widgets, from iPhone-style sliding menu, accordion, slider, list box to calendar and progress bar.

Read the Getting Started

Rest assured that you get only the best-in-class user experiences with WebUI Studio! After installation, a Getting Started document will appear. Each year, we revamped our Getting Started to make it even easier and faster for you to find the information you need. To quickly jump start with ClientUI, make sure you click on the Silverlight part such as shown in the red-highlighted mark below.

Explore The Samples

ClientUI Release Candidate ships with three reference samples for Silverlight 4 which demonstrate the use of various ClientUI components in line-of-business scenarios. The solutions are provided in Visual Studio 2010 format for best development experiences.

To learn how to create Silverlight navigation application that used role-based security combined with WCF RIA Services, child navigation and many other features explained in my previous blog, open Business Application Sample.

To learn how to create Silverlight application that uses MVVM pattern and supports WPF codebase, check out Contacts MVVM Sample. If you’re interested in the WPF counterpart instead, we also ship the Contacts MVVM Sample under the WPF program group. Learn how commanding, input binding, UI controls and view models can work together in both Silverlight and WPF project.

If you prefer to see the samples in action, simply click on the Launch* shortcuts.

Note that the controls and features-based samples will be made available in the RTM release along with the complete documentations and walkthrough.

Create Your First ClientUI Silverlight Project using Visual Studio 2010

After exploring the samples, it’s now the time to build your own compelling, rich business Silverlight applications.

You can get started pretty much straightforward. Launch Visual Studio 2010 and click New Project. Then browse to the Intersoft Solutions > Silverlight node in the Installed Templates. In this Release Candidate, we shipped 6 professionally-designed templates that you can use to quickly start your next project.

All templates are designed with our high-standards development experiences quality – so all you need to do is simply pressing OK, wait for few seconds and press F5 to run the project. You don’t have to manually add the references or do any sort of extra stuff – we’ve done it for you.

Regardless of your experiences and skill level in Silverlight development, your best shot would be a MVVM Business Application. It already includes full-featured registration and login form with standards-compliance user experiences built into it. We’ve even taken care the WCF RIA Services connection and all sort of server providers configuration.

Experience First-Class Designer Support

When we say first-class, truly it is! Upon installation, everything is up and ready – nothing extra needs to be done at your end. As well as Visual Studio 2010, this very statement is true for Expression Blend 3 and Blend 4 environment.

If you’re UI/X designer who preferred Blend more than Visual Studio, the next time you open Blend, get ready with a vast array of tools you can use to build your next-generation RIA apps! All ClientUI assets are grouped in Intersoft ClientUI group so you know where to look when you need them.

Our professional artists have even designed each icon very thoroughly and delicately – from small to large icons which simply blends in the Blend environment. This allows you to conveniently walk through the layers in your project and easily identify the visual elements through unique icons. See screenshot below.

Enjoy a whole new level of RIA development experiences!

Get Started with Your Business Application Project in 5 Minutes

A picture worth a thousand words. A video worth a billion words. Watch how you can get started with your immersive business application in less than 5 minutes. It shows how ClientUI enables a true rapid Silverlight development – adding new pages, adding new navigation buttons, run it and everything will just work – effortlessly.

Get The Support You Need

Unlike other vendors, we officially support ClientUI even in this Release Candidate version. As the RC already includes RTM-identical product bits, you can eventually use it in the projects that you currently working on.

As you jump start with ClientUI, I’m sure you’ll have questions around the usage, features, or how-to achieve specific tasks using the various ClientUI controls. We’ve opened a new ClientUI forum so you can discuss anything related to Silverlight and WPF development. And again, we’re the only US-based component vendor with professional 24-hour support service during business days. So feel free to post your questions to the designated forum mentioned above and expect a same-day response from our support engineers.

The Promised Demos

In the part 3 of my ClientUI blog, I’ve explained the MVVM concept and how it can be elegantly used with advanced UIs such as windows and dialog boxes. Numerous readers have emailed me to ask if they can see a running demo to see the solution in action. And here it is – the Contacts MVVM online demo.

More Coming Next

If you followed my ClientUI blog series from the start, most probably you’ll still remember the Contacts application that I showcased in the ClientUI Part 3 blog. If not, I suggest you to read and try the sample mentioned just in the previous section.

Continuing on the story that I left for a while in the part 3, we’ll take the simple Contacts application and make it a part of something bigger – a richer composite application that enables your applications to scale and grow in a way that never possible before.

In the next post, I’ll unveil how the simple Contacts application that we’ve built sometime ago, can be loaded into desktop-style interface without code recompiling and still working as it is – resulting into something similar to the image below.

Welcome to the future of RIA experiences. Stay tuned…

All the best,
Jimmy.

ClientUI Part 5 – The Supercharged Silverlight Navigation

Jimmy Petrus — Tue, 29 Jun 2010 05:04:08 +0000

Flashing backward to a few weeks ago, I’ve covered some of the most important facts about our upcoming ClientUI in four blog posts. The first part covers the overall ClientUI architecture and key concepts, the second part covers the presentation model and development best practices, the third part details the full MVVM pattern support for Silverlight and WPF development, and the fourth explains the importance of standards-compliance user interface design and how we designed ClientUI to meet these usability standards for the best user experiences.

In this fifth series of my blogs on ClientUI, we’ll look at some of the most fundamental yet often overlooked aspects in line-of-business RIA development especially in Silverlight – such as the navigation architecture and common navigation topology, friendly error pages, role-based security, asynchronous state management, and how they can still fit into the MVVM pattern that we discussed sometime ago. And more importantly, how all these aspects can work together in consistent manner to create great user experiences in a whole.

This post details all essential aspects in developing navigation application using Silverlight. Feel free to jump to the section that you’re interested most:

Navigation experience does matter
Introducing ClientUI navigation framework
UXFrame and UXPage – The building block of Silverlight navigation application
Top feature #1 – Solid navigation interfaces
Top feature #2 – Child navigation with browser integrated journal support
Top feature #3 – Built-in 12 stunning visual transitions
Top feature #4 – Authentication and role-based security support
Top feature #5 – Navigation bar, navigation commands and routed events
Top feature #6 – Friendly error page
Top feature #7 – Out-of-the-box busy state management
Full compatibility with WPF
Try the live demo

Navigation Experience Does Matter

Well-designed navigation experiences is undeniably one of the deciding key successes in today’s rich Internet applications. Just take a look at some of the popular Web applications – Facebook and LinkedIn for examples – employed very sophisticated navigation infrastructure that lets you easily and consistently navigate from one content to another through several different ways – through the hyperlinks, bookmarks, or from the address bar directly. Technically speaking, all the contents in a web application – such as photos, contacts, documents or any identifiable objects – should be easily “linkable” and consistently “navigateable” through user-friendly manners.

Unlike HTML pages, developing navigation application using Silverlight doesn’t come easy. Although basic navigation framework was added in Silverlight 3, it’s limited only to a single-level navigation when integrated with browser’s journal. That is far less-than-ideal in business applications that usually require multiple-level navigation in order to deliver rich and consistent user experiences.

At the simplest, think about a simple customer application scenario with two-level navigation. The first level shows a page with a list of customers and should be accessible through browser’s URL such as /Customers, while the second level shows the details of the selected customer and expected to be accessible through /Customers/ID. In this case, the second level navigation should be defined inside the customer list page since we want our users to be able to see the customer list and its details at the same time. See below illustration for a clearer picture.

Called nested or child navigation topology, it is one of the greatest challenges faced by many Silverlight developers as this capability is not currently supported in Silverlight.

So, for us, Silverlight developers, what options do we have? Well, not so much IMO – you can either spend few months to roll up your own or wait for Silverlight to completely add the support. Or better yet, you may have just found the solution. Read more below.

Introducing ClientUI Navigation Framework

In addition to multitude of standards-compliance and rich UI controls, our upcoming ClientUI also ships with a powerful navigation framework that serves as the backbone of all navigation architecture used in the top-level controls such as in NavigationBar, NavigationCommands and NavigationWindow. The main reason why we decided to build a robust navigation framework in the first place is because you literally can’t build any real-world applications without a solid navigation mechanism. Consequently, whether you have groundbreaking charts presentation, or other so-called stunning UIs, your Silverlight app is *still* not usable without navigation mechanism that allow users to easily navigate and access your content. This, and many other essential factors, drives us to create a much more powerful Silverlight navigation framework that enables you to easily build truly rich, navigateable business applications.

The following sections explains our concepts and approaches for richer Silverlight navigation experiences that work reliably and consistently in most business scenarios.

UXFrame and UXPage – The Main Building Block of a Silverlight Navigation Application

UXFrame is our supercharged Silverlight navigation control where you can find many of advanced navigation features you’re craving for. The UXPage is the content counterpart of the navigation framework that works best with powerful UXFrame features. In simpler words, the smallest anatomy of your application structure would comprise of several UXPage instances to represent each logical content that can be navigated by UXFrame.

The following image illustrates the ClientUI navigation architecture in top-down details. This also shows how we built the framework to support better scalability and extensibility.

In a typical navigation topology, each logical content is partitioned into each UXPage instance for reusability and easy navigation from the UXFrame control as explained in the above illustration. Since the UXFrame itself can host pages that contain another UXFrame, now it’s possible to navigate the child frame to other local UXPage compiled in the application.

In more advanced scenarios, it’s even possible to navigate to the UXPage that existed in another external XAP package. Together with ClientUI Application Framework that I mentioned in the first part of my posts, you can now create scalable Silverlight applications that dynamically load another applications – and still consistently follow the overall navigation pattern. We’ll dive deep on Application Framework later.

That said, a typical Silverlight application using ClientUI navigation framework can have consistent navigation pattern such as shown below.

Our goal is not only to make rich navigation experiences possible in the Silverlight platform, but also to enable developers to rapidly develop new pages and deploy them to fit into the navigation topology with very minimum effort.

And since we’ve got vast array of developer’s most wanted features, I’ll highlight seven top navigation features in this post. The first most wanted feature starts below.

Top Feature #1 – Solid Navigation Interfaces

The UXFrame and UXPage are designed to work together to deliver reliable and consistent navigation experiences. The reliability and consistency are the two key factors here that defines what we called it to be solid. To create a solid navigation interfaces, glassy navigation UIs aren’t enough. In ClientUI, the interfaces between the navigation framework and the navigation UIs are meticulously designed to achieve various business navigation scenarios in reliable and consistent manner.

For an instance, navigating to a new page should consistently enable or disable the journal buttons appropriately regardless of how the navigation occurred – i.e, through the hyperlink, navigation button, back or forward, or through a direct browser address navigation. This, and many other common scenarios, are something very difficult or impossible to be done with the current feature sets in Silverlight.

That said, solid navigation interfaces is a must and should come in the top most of the requirements list before the Silverlight application development can be ever started.

ClientUI advances the navigation framework further by identifying the navigation patterns commonly used in business applications and implement these patterns consistently throughout the navigators and the user interface controls that can consume the navigation features. The details is self-explained in the following illustration.

Unlike the native Silverlight which provides only a single Hyperlink control for navigation, ClientUI gives developers more than a dozens of UI controls to choose for navigating pages – ranging from button, hyperlink, navigation button, toolbar button, dock button, stack button, to context menu and menu bar. This means that you can now create intuitive navigation experiences where a page can be navigated consistently from various sources – from menu bar interface, simple hyperlink, toolbar button or from the stunning dock button.

So, how solid and reliable our navigation interfaces can be? A picture worth a thousand words. Let’s take a look at the following image.

As a Silverlight developer, one thing that I really like about ClientUI navigation framework is its automatic navigation state synchronization on every navigation requests. This means that I can rapidly add more pages and navigation UIs without have to write codes that say ‘clear the state of old active index, set Customers button to active, disable forward button, enable back button, change the title, and many more’ because the navigation framework has done it for me behind the scene. All I need to do is simply adding new pages to the project, then add a new button with its NavigateUri pointing to the new page and hit F5! No events wiring or codes needed. That’s true – I trust you’ll definitely love this feature as you experience how it shaves off weeks or months of your development timetable!

Top Feature #2 – Child Navigation With Browser Journal Integration Support

When Silverlight 3 came out two years ago, developers praised Microsoft with so many new features to address business scenarios, one of the them is the navigation and linking support. That’s nice! The next day when you explore more scenarios such as nested child navigation (which is actually quite common in a business application), you’ll soon find out that Silverlight 3 did not support that capability. Checking into Silverlight 4, no luck, it’s not supported yet.

Ranked at #2 most wanted feature, child navigation is definitely a-must in every line-of-business Silverlight application. Omitting this capability means that your application has failed to deliver the experiences that users expected at the most. This translates to critical usability issue where your users won’t be able to access the desired content instantly and consistently.

Consider a basic master-details scenario where you have a page that contains a list of customers and another page that shows the details of a customer. Instead of showing the two pages one at a time, you could show both in a page for better user experiences, for instance, the list in the left side and the details in the right side of the screen. The image below illustrates this business navigation scenario in details.

As seen in above illustration, we basically wanted to load the details when a customer is selected in the left-side list box. When the details is shown, we would require the browser address to be changed accordingly to reflect the new state of this details page. Consequently, the journal buttons such as the back and forward should be reflected as well so users can easily go back to the previous details or page. These requirements – the browser integration and navigation state – are exactly the toughest challenges that makes it nearly impossible to achieve this scenario in elegant and rapid fashion.

ClientUI’s UXFrame is loaded with advanced features to do just that! With some property sets, you can rapidly implement child navigation capability in your business apps. Logically, you can define the top-level UXFrame in the root page and then in any pages where you want to display external content.

We designed the UXFrame to be extremely simple and easy-to-implement so that you only need to care couple things. First, for the UXFrame instances where you want to support nested navigation, simply set their AllowNestedFrameNavigation property to true. Respectively, for UXFrame instances that suppose to be child frame, set their DisplayFragmentInBrowser to true. This enables ClientUI navigation framework to intelligently synchronize everything – from the address bar, journal buttons, page title, latest navigation state and more – without requiring you to write codes! That’s quite both a time-saving and groundbreaking feature, isn’t it?

The following image shows the actual result based on our scenario described above.

The details of the process is already self-described in the illustration above. One important thing to note is that the child UXFrame navigation is sophisticatedly integrated to the UXNavigationBar’s journal buttons thus enabling consistent navigation experiences throughout the entire application.

Top Feature #3 – Built-in 12 Professional Visual Transitions

Now with two of the most essential features available to your business apps, the next thing you want to do is to enhance the user experiences. Definitely – because you want to deliver something functional and also impressive for business users. Luckily, UXFrame includes twelve predefined visual transitions that you can apply with a flick of finger.

Choose your preferred transition from the simple transitions such as fading and sliding, to our flagship transitions such as iPhone-style zoom and 3D cube, rest assured your users will be impressed since day one.

The transition duration and other transition settings have been preconfigured optimally for business applications, so all you have to is to enable the page transition property, select your desired transitions and that’s it!

Another feature that is noteworthy to be mentioned here is the auto-detect navigation direction feature. When enabled, UXFrame will automatically detect the direction of the navigation that currently being performed, i.e, when users pressed the Back button or navigate to a new page. This feature allows UXFrame to automatically apply the desired transition depending on the navigation direction. One of the most common scenarios is to use SlideRight transition when user goes back to previous page and use SlideLeft transition when navigating forward. As simple as that, try to run your page and you’ve now got a iPhone-like navigation experiences in few minutes. Cool, huh?

So, with all these time-saving visual features, you no longer have to open Blend and spend few hours to create storyboards then spend another few hours or days to detect the navigation direction manually, wire up the storyboards and many other details. Really, you don’t have to do this anymore.

Top Feature #4 – Role-based Security with WCF Authentication Service Support

It’s not all too uncommon to have business scenarios that restrict certain pages to be accessible only by authorized members. This apparently becomes one of the most requested features in Silverlight as business developers started to look for new options in RIA development. Ironically, Silverlight overlooked this very fundamental feature and leave it to developers to handle themselves.

Since we invented our own advanced navigation architecture that built upon robust framework such as routed events and commanding, it enables us to further advancing our navigation framework by adding built-in security protection for the UXPage.

Requiring authentication to your page content is unbelievably easy with ClientUI navigation framework. Simply open a UXPage instance and set its RequiresAuthentication property to true. At runtime when you’re trying to access the page, magically, the page content won’t be accessible anymore. We even added extra safety measurement by ensuring the page content can’t be accessible by any means – either from direct address bar, hyperlinks, or even through API.

Often times, your application will require role-based security instead of just a plain authentication. UXPage covers this as well by providing RequiresRoles property that you can set through databinding or simple property set.

The following illustration shows how authentication works in ClientUI navigation framework.

In our business sample application below, we’re redirecting users to the Login form page when users tried to access the restricted page without logged in. After logged in, the navigation framework smartly redirects back to the originally requested page. Again, this is all done without requiring you to write single line of codes.

For developers with MVVM pattern preferences, UXFrame also introduces several authentication-related properties which lets you easily bind to your view model. For example, you can bind the User property to the UXShell for single sign-on (SSO) login mechanism which queries the user object against server datasource such as WCF Service. This enables users to sign-in only once in any of the pages that raise authentication, the rest of the pages will then be automatically authenticated. We’ll discuss about deeper on this subject later. One thing for sure is that we’ll include this business sample as a project template so that you can get started with your real-world business apps really quick!

Top Feature #5 – Navigation Bar, Navigation Commands and Events

Now that we have a supercharged UXFrame and an advanced UXPage that provides end-to-end solution for the core navigation architecture and interfaces, the next thing you’ll be probably looking for is to add some UI goodies that can consume the powerful navigation features. The one that undeniably essential is the navigation bar user interface.

There are at least three main reasons why you should care about adding a navigation bar in your navigation application. First, for UI consistency throughout the app. Second, it’s required for child navigation to allow users to easily go back and forth in the child page. Third, you’ll be relieved when you require your app to run in out-of-browser (OOB) environment and find out that the navigation bar you added in the first place worked amazingly as if it were in browser.

Introducing UXNavigationBar, the perfect companion to the ClientUI navigation application. With professionally designed journal buttons in Aero-style interface and combined with predefined refresh, stop and home button – this control lets you advances your navigation application in mere minutes.

As soon as you add a new UXNavigationBar instance to your page, it’ll automatically recognize the navigators existed in the page. Magically, everything will work just as expected – navigating to a new page will invalidate the journal buttons, pressing back button will navigate to the previous journal, the other command state will reflect the new navigation state as well. Again, no codes is required!

Consider that you need to add a custom command that perform backward navigation in your page, you can use the predefined navigation routed commands that ship with the ClientUI navigation framework and easily attach it to your command controls without writing any C# codes. In this case, you should be using one of the ClientUI controls that implement ICommandSource, such as UXButton, UXNavigationButton, UXToolBarButton or others.

The following screenshot shows how easy it is to use the BrowseBack routed command in your own button which does the exact thing as in the journal button of UXNavigationBar.

In addition to the navigation commands, the navigation framework also exposes a number of events related to the navigation process such as Navigating, Navigated, NavigationFailed, NavigationCancelled and more. Unlike Silverlight’s navigation events, ClientUI navigation framework used WPF-style routed events to provide developers with more flexibility in handling the navigation events. For instance, you can now handle the Navigated event at class-type level instead of instance-level by registering the class handler using EventManager class.

Top Feature #6 – Friendly Error Page

How many times you found yourself disturbed with the error popup thrown by Silverlight? You might be wondering why such a modern RIA platform couldn’t offer something better – perhaps a nicer, unobstructive error page?

Ranked at the sixth top most wanted features, we added this very handy feature right into ClientUI’s navigation framework. When the navigation service encountered errors during navigation, a friendly error page will be displayed in the frame content area, see the image below.

And as you already expected, you don’t need to do any extra effort to take advantage this feature as it is natively built into the product. But, that doesn’t mean you can’t customize the error page to your own liking. Every details of the visual styles in ClientUI can be easily customized through Blend as explained in my second blog series. In this case, you can customize the error page by providing your own style in the ErrorPageStyle of the UXFrame instance.

Top Feature #7 – Busy State Management

Last, but not least – we’ve been hearing a lot of developers struggling with the asynchronous processing model introduced in modern RIA platforms such as in Silverlight. It could be an even more tedious task when you need to block users to interact with the page when data processing is in progress and unblock when the processing is done. Not to mention if you have a lot of pages that need to do the same operation –undoubtedly you’ll have to spend days to weeks, if not months, only for working around this state management stuff.

ClientUI Navigation Framework, again, comes to rescue by providing an elegant solution to address this challenge. Unlike traditional content-level approach, ClientUI implements the busy state management right into the UXFrame level. This means that you only need to set the busy indicator once in the UXFrame, and the rest of your pages will be automatically using the same busy indicator that you’ve defined in the frame level.

When you need to block your page from user interaction, simply set the IsBusy property of the page to true – the UXFrame will be notified about the busy changes of its content and then intelligently display the busy indicator to the user. As we speak about IsBusy property, there’s another good news for MVVM developers. You can bind the IsBusy property to your view model and then seamlessly control the page’s busy state right from the business process in your view model.

The following image shows a registration form sample with simple busy indicator using Aero-style indeterminate progress bar which will be consistently displayed when the page performs server data operations.

Full Compatibility with WPF

Alright, now we’ve got the all the great navigation experiences we ever wanted for our Silverlight business apps – how about its sibling, the WPF?

Fortunately, our Silverlight team has thoughtfully design the navigation architecture to use only the proven techniques that work in both Silverlight and WPF. This results in UXFrame and UXPage to have nearly identical feature-sets with its Silverlight counterpart.

So, let’s say you’ve developed your business navigation apps in Silverlight, and now would like to offer a WPF version to your customer – you can simply copy the UXFrame definition from your Silverlight project and paste it into your WPF page. Another better option is to really do single-source sharing between Silverlight and WPF, but this will require you to have first gathered all the differences between Silverlight and WPF. I’d probably do another post in the future to share how we did single-source sharing in our own products solution.

One feature that you’ll really love in this WPF version of UXFrame is that we also put in UriMapper, an original Silverlight feature that lets you easily map a friendly identifier to an actual physical page. For example, instead of having your customer to type in “/Views/Customers.xaml”, it’s much simpler and easier to type in ‘/Customers’. The WPF version of UXFrame will enable you to do just that!

Summary

So far, we’ve covered most of the important aspects in building real-world business Silverlight applications through the five ClientUI blogs that I posted – from the architecture, MVVM pattern, user experiences, navigation consistency, role-based security, visual goodies and more. There are a lot more exciting features that we have in our navigation framework which I couldn’t mention in this post – but at least we’ve got the 7 most wanted navigation features covered.

Live Demos

Well, this is probably the best part of the post. Although I’ve explained most features in the top-down screenshots and illustrations, still it couldn’t capture one essential thing – the user experiences.

So here we go. Click here to launch the business navigation application sample that I used to demonstrate many of the top features above. You can experience for yourself many of the features explained above. Please note that this sample includes much more stuff that are not yet covered – such as how the user persistence (the “Remember me” option) works together with authentication in the page load, the MVVM pattern used throughout the processes, the dialog box integration with navigation, and more – which hopefully can be blogged in the near future.

To test the authentication feature, try to create several credentials with different roles. You can rapidly perform logout, login and logout again and see how the role-based security feature works.

What’s Next

As we’re approaching a public release in few days, the next post will mark the final series of the ClientUI introduction, which will cover the grand and the ultimate of the RIA experiences that we want to bring in this release. In addition, most of the samples demonstrated in the past blogs will also be made available, as well as step-by-step video guide tutorials and more. Stay tuned…

All the best,
Jimmy.
Chief Software & UX Architect.