Some of the exciting updates are improved XHTML support for various ASP.NET products such as WebDesktop and WebTextEditor. WebGrid and WebCombo also get many enhancements and bug fixes, such as Customizable minimum height when the WebGrid is set to use fluid height mode, and WebCombo now supports client binding scenario with multiple selection and read only mode enabled. Click here to see the latest build’s version history.

Some enhancements are also applied in these updates, including:

• Support for a nested UXDialogBox in a standalone environment
• Ultra-smooth fading animation in ContentTransition control
• Improved navigation support in UXTreeView integrated with UXNavigationPane.
• In addition, UXScrollViewer now manages the scrolling behavior to improve user experiences which comply with ISO usability standards.

Find out more updates about ClientUI updates.

Last but not least, ClientUI also fixes some reported issues, including:

• Showing UXWindow in a standalone mode no longer throws error.
• UXDialogBox now displays properly when it is nested in third level,
• UXScrollBar no longer throws exception when it is hosted in a UXWindow in WPF application.

New ClientUI Tutorial Videos

We’ve recently updated our support site with latest ClientUI videos. The updates include two videos about customizing cell editing template in UXGridView and licensing ClientUI application that is created using Microsoft Visual Studio LightSwitch for deployment.

This video demonstrates on how to use custom cell editing in UXGridView as well as how to use different editing template in each row using cell editing template selector.

This video demonstrates how easy it is to deploy a ClientUI project created using Microsoft Visual Studio LightSwitch.

That’s all for now. I hope our new videos continue to provide a better understanding about our ClientUI products. Please feel free to post any feedbacks, thoughts or questions in the comment box below.

Please feel free to post any feedback, thoughts or questions in the comment box below.

Regards,
Martin

By the latest release, we’ve shipped a whopping 300+ rich controls for Silverlight and WPF development – and that’s not to mention the included advanced frameworks like MVVM, commands, event aggregators and more! Fortunately, we included a comprehensive documentation and dozens of new tutorial videos to help you getting on the board fast. If those are still not enough, make sure you check out the new ClientUI tutorials focusing on line-of-business application development – thanks to our friend, Bill Gower, for such the great contributions.

In the first series of his post, Bill overviews the application that he’s going to build using Intersoft ClientUI for the presentation layer and IdeaBlade DevForce for the data service layer. And Bill picks up the line just right, you’ll be surely excited to explore through the steps of creating a fully-functional sales/retail application – from the Customers, Inventory, Sales Invoices to Purchases and more.

Best of all, you can learn how to build the applications right using the best design and architectural patterns. You can check out the post here.

Furthermore, Bill has written a series of great articles to share his experiences while developing in Silverlight and WPF. Some of the noteworthy links are as follows.

• Slash 7,000 lines of code with MVVM design pattern
• Data retrieval made easy with QueryDescriptor from Intersoft ClientUI toolkit
• Cloning a Silverlight application to WPF in under an hour
• Which MVVM Framework should I use for my Silverlight application?

Best,
Jimmy

In my recent blog posts, I have covered two of the major new features introduced in ClientUI 5 service pack 1. Check out my post for LightSwitch support here, and the real-time streaming capability in XPS Document Viewer here.

Since its debut last year, ClientUI has been well recognized not only with its amazing and beautiful user interface controls, but also a rock-solid framework that built the foundation of the entire control library. ClientUI was the first in the industry that pioneering the adoption of MVVM design pattern in both Silverlight and WPF application, as well as setting new standards for MVVM-ready control architecture. Click here to read the overview of MVVM development, and here for in-depth technical details.

ClientUI supports MVVM development through comprehensive built-in libraries such as delegate command, command reference, and advanced data binding support. This allows developers to build full-blown MVVM applications without any third party frameworks. Confused which MVVM framework to choose, or should you roll out your own? Check out Bill’s latest blog post as he shares his journey finding one that works best for him.

In this blog post, I will discuss about one of the top requested features that we’ve added in the latest service pack release. I’m pleased to introduce our advanced event aggregator library, now built right into the ClientUI Framework. Let’s start with the basics.

Event Aggregator Basics

One of the key principles of MVVM development is data binding. And data binding is all about communication.  By the means of communication, it is exactly how the View talks to the ViewModel for user interaction, and how the ViewModel talks to the Model for data processing and transactions. What’s really cool is that one layer doesn’t require dependencies to another thus enabling great separation of concern that yield some real benefits as detailed here.

As you’re building MVVM applications toward more complex requirements, you will eventually find certain scenarios where the communication flow becomes too difficult to achieve. This is particularly true for scenarios that require communication across different ViewModels; or across different modules in a large, composite application.

Consider a basic scenario where you have a data grid that displays member list and a form to edit the selected member. With MVVM pattern, you will create two distinct ViewModels, one for the member list and another for the editing form. Now consider a quite common business requirement where the member list should be refreshed whenever a member is updated. How would you achieve such requirement? What options do you have? Let’s explore the possibilities.

It’s natural to think about using standard CLR event as your first bet since that’s the only built-in event handling available in .NET Framework. While you’re declaring the new events, you will realize that you’re going to create dependencies between these ViewModels because CLR event requires strong reference to the target instance. Consequently, it will add significant maintenance overhead in the long run.

The second approach, you can create a parent-child link between the two ViewModels and simply call the method in the parent from the child ViewModel. This might seem to work at first, but you will soon realize the shortfall as more ViewModels are required to link to the parent. Although there could be workarounds such as interface refactoring, this approach is definitely still far from ideal.

Since we’re unable to find a solid solution in the existing framework, we need a better design pattern that dictates how event communication works – one that allows the event to be listened and raised across different ViewModels without strong type reference; and more importantly, one that works consistently, reliably and easy to maintain in the long run. That event pattern is so-called Event Aggregator.

Event Aggregator addresses the challenges above by allowing a ViewModel to listen to an event without strong referencing to the target ViewModel. This means that there could be multiple ViewModels listening to an event at the same time, and the event can also be raised from different ViewModels – all without requiring the knowledge of existence of one and another.

See the following illustration to get the big picture of Event Aggregator’s conceptual view.

At this point, I hope you already get some insights on the key challenges around communication flow in MVVM, and understand why Event Aggregator is needed.

Usage and Examples

ClientUI 5 service pack 1 includes a built-in event aggregator service that works consistently in both Silverlight and WPF – and certainly, with the same API. ClientUI’s event aggregator is implemented accordingly to match Martin Fowler’s description and concept of an event aggregator.

ClientUI’s event aggregator is designed to be simple and easy-to-use, yet powerful enough to cover a number of advanced scenarios. It takes only a single line of code to subscribe to an event, the same is true for the event publication. See the following examples.

// Subscribe to an event
EventAggregator.Default.Subscribe<MailNotificationEvent, Mail>(OnMailReceived);

// Publish an event
EventAggregator.Default.Publish<MailNotificationEvent, Mail>(this.MailEntity);

As shown in the above example, the event aggregator is designed with default static instance allowing developers to subscribe or publish an event in code-efficient manner. Both the Subscribe and Publish methods comprised of two generic parameters for the method signature which are TEventType and TPayLoad. The TEventType represents the type of the event to subscribe or publish, while the TPayLoad represents the type of the message to pass to the event.

In summary, at the heart of ClientUI’s event aggregator is the six methods listed below. You basically deal with three things, subscribing to an event, publishing an event, and unsubscribe from a previous subscription.

public TEventType GetEvent<TEventType>() 
                   where TEventType : DelegateEventBase, new();

public void Publish<TEventType, TPayload>(TPayload payload) 
                   where TEventType : DelegateEventBase, new();

public SubscriptionToken Subscribe<TEventType, TPayload>(Action<TPayload> action) 
                   where TEventType : DelegateEventBase, new();

public SubscriptionToken Subscribe<TEventType, TPayload>(Action<TPayload> action, SubscribeOptions options) 
                   where TEventType : DelegateEventBase, new();

public SubscriptionToken Subscribe<TEventType, TPayload>(Action<TPayload> action, SubscribeOptions options, 
                   Predicate<TPayload> filter) where TEventType : DelegateEventBase, new();

public void Unsubscribe<TEventType, TPayload>(Action<TPayload> action)
                   where TEventType : DelegateEventBase, new();

In addition, ClientUI’s Event Aggregator also supports several advanced features such as event filtering, use background thread, reference keep alive and more. However, we don’t include the support for UI thread invocation which is intentionally decided. The reason is that accessing the View (UI) in the ViewModel would break the nature of MVVM which emphasizes on clear separation, hence the decision is consistent with our goal to build libraries that enforce design pattern and development best practices.

To wrap up this post, I’ve prepared a reference sample that demonstrates how event aggregator works in the simplest way. I chosen the mail notification scenario for this sample where the notification event is subscribed and published from different ViewModel instances, see the following illustration.

Finally, download the sample bits and get yourself familiar with the event aggregator basics. The sample package includes both Silverlight and WPF projects which demonstrate the event aggregator using the same codebase. Again, please make sure you have ClientUI 5 SP1 installed to enjoy this new addition, or click here to download it.

As usual, I welcome any questions and feedback. Please drop them in the comment box. Thanks!

Best,
Jimmy

Unlike the usual service pack releases, ClientUI 5 SP1 wasn’t set to deliver only bug fixes and minor enhancements, it also ships new major features such as full LightSwitch support, blazing-fast document streaming in XPS viewer, and an advanced event aggregator. I have discussed about LightSwitch support in my previous post, click here to check it out.

In this post, I will share some of the new features that we’ve added to our flagship ClientUI suite. One of the most significant new features is the document streaming capability in the XPS Document Viewer. Just a quick recap, XPS Document Viewer is a UI control that lets you display any XPS compatible documents in a Silverlight or WPF application – using one codebase. It was first introduced in ClientUI 5 released months ago, packed with beautiful user interface and numerous advanced features. You can get an overview about XPS Document Viewer here, and the technical details here.

Introducing Document Streaming

As savvy computer users, we all have heard the ‘streaming’ term everywhere, from the video streaming in Youtube to radio streaming in iTunes. At a glance, streaming is a data transfer process that allows a stream of packets to be interpreted and rendered in real-time, without requiring the whole data to be prior downloaded. The basic idea is to allow  large content to be served in the shortest time possible.

The same metaphor applies to other type of medias as well such as document. In the recently released service pack 1, we’ve added a powerful document streaming capability to the XPS Document Viewer. The main objective of the document streaming is obvious; it enables very large XPS document to be rendered immediately in the client-side, without requiring the whole document to be prior downloaded.

The following illustration shows the comparison between the document download and document streaming.

The streaming capability in our XPS Viewer (runs on both Silverlight and WPF!) is extremely useful particularly in business application scenarios. Supposed you’re building a document library application that hosts a 60MB technical documentation, you definitely don’t want your users to wait for minutes just to view a topic. So with document streaming, the waiting time is eliminated. The document is displayed almost immediately with all essential features such as navigation and bookmark to work consistently.

Enabling Document Streaming

To make document streaming possible and seamless to the client, we provided a built-in document streaming handler that sits in the ASP.NET web server. A new server library called Intersoft.XPSDocumentViewer.Server.dll is shipped in the service pack 1 release which you can locate in the Server folder of the ClientUI installation.

Enabling the streaming feature in XPSDocumentViewer is pretty straightforward. Since the streaming handler sits down in the web server, you need to configure the web project before enabling it in the client side. Here’s how.

On the ASP.NET web project:

1. The first step is to add the Intersoft.XPSDocumentViewer.Server to the web project. The assembly can be located in [Program Files]Intersoft SolutionsClientUI 5Server. Once added, your project looks like the following shot.
   
    
2. Add the HTTP handler registration for document streaming handler in the web.config.
   

   <httpHandlers>
           <add verb="*" path="XPSDocumentStreamHandler.ashx" 
               type="Intersoft.XPSDocumentViewer.Server.XPSDocumentStreamHandler, Intersoft.XPSDocumentViewer.Server"/>
   </httpHandlers>

That’s all for the web project configuration.

On the Silverlight project: You only need to set two properties to leverage the streaming capability. Simply set the EnableDocumentStreaming property to true and then specify the URL of the streaming handler in the DocumentStreamingHandler property. It’s that simple!

Note that all existing features are supported, as well as advanced features like searching and bookmark navigation.

Here’s an example of the XPSDocumentViewer declaration in XAML.

<Intersoft:XPSDocumentViewer Source="Documents/XPS_1_0.xps" EnableDocumentStreaming="True"
                             DocumentStreamingHandler="http://localhost:5153/XPSDocumentStreamHandler.ashx"/>

In this example, I’m testing the document streaming capability with a 8MB XPS document. Check out the sample online here, notice that the XPS viewer renders the requested pages instantly. You can try to scroll down quickly, or jump to a specific page to see the streaming in action.

Once you launched the sample in the browser, you should see the XPS viewer interface such as shown below.

Click here to download the sample and explore the feature for yourself. Finally, make sure you already have ClientUI 5 service pack 1 installed to take advantage this powerful streaming capability. If you haven’t, please grab your trial copy here.

Best,
Jimmy

By top requests, we’ve added full support for LightSwitch Beta 2 in the recently released ClientUI 5 service pack 1. At a quick glance, LightSwitch is a Microsoft tool for “developers of all skill levels” who want to build simple business applications in a short time without having to understand most of the underlying technologies. You can find out more about LightSwitch here.

LightSwitch generates applications based on the presentation-logic-data storage architecture. I’m not a huge fan of application generator though, particularly the one that generates the UI and layout part of the application. IMHO, user interface and user experience aspects of an application should be authentic and customized to reflect the brand of the associated business or the product. Of course, application generators can be useful in certain scenarios, for example, when you need to quickly build internal applications for administrative use.

Some have argued that LightSwitch is amateurish reminding of the old Access, but others consider it appropriate for small businesses with simple needs, being able to create their own CRUD applications without having to hire programmers for that. Nevertheless, we have decided to add full support for LightSwitch as part of our commitment in delivering the best tooling support for Visual Studio development. Click here to download ClientUI 5 service pack 1 with LightSwitch support.

Using ClientUI Controls in LightSwitch

In this blog post, I’d like to share how easy and simple it is to consume ClientUI controls in your LightSwitch application – thanks to the MVVM-ready control architecture. Starting from beta 2, LightSwitch allows nearly all layout and predefined controls to be replaced with custom controls. This includes the list, data grid, and form controls such as text box and date time picker.

In this post, I will show how to to replace the default date and time picker with ClientUI’s UXDateTimePicker to provide more appealing date and time selection. Assuming that you already have a sample LightSwitch project ready, please open the screen designer for a particular form. In my sample, I used the Employee List Detail which was modeled from our all-time favorite Northwind database.

Once the designer is presented, select one of the date time fields. The “Hire Date” seems to make the most sense here since it utilizes both the date and time elements. In the property window, change Control Type to Custom Control, then click the Change link to specify the custom control type. In the next second, you will be prompted with a dialog box asking you to select the type of the control to use.

Expand Intersoft.Client.UI.Aqua.UXInput assembly and select UXDateTimePicker such as shown in the following shot.

If the desired assembly is not listed, you can browse the assembly by clicking the Add References button and add the desired assembly. Certainly, only compatible Silverlight controls will be accepted.

Now that you’ve specified the custom control, the final step is writing code to bind the data value to the control. I’m initially expecting LightSwitch to have automatic capability in doing the binding, but unfortunately it’s not. You also cannot access the custom control’s properties directly in the designer, which is one of shortcoming in the LightSwitch that I hope can be addressed in the final version.

The following code shows how to implement data binding to the custom control and customize the control’s properties via code.

namespace LightSwitchApplication
{
    public partial class EmployeesListDetail
    {
        partial void EmployeesListDetail_Created()
        {
            // get the reference to the UXDateTimePicker
            var datePicker = this.FindControl("HireDate1");

            // set the value binding to the UXDateTimePicker's Value property.
            datePicker.SetBinding(UXDateTimePicker.ValueProperty, "Value");

            datePicker.ControlAvailable += 
                new EventHandler<ControlAvailableEventArgs>(DatePicker_ControlAvailable);
        }

        private void DatePicker_ControlAvailable(object sender, ControlAvailableEventArgs e)
        {
            UXDateTimePicker datePicker = e.Control as UXDateTimePicker;
            datePicker.EditMask = "MM/dd/yyyy hh:mm tt";
            datePicker.UseEditMaskAsDisplayMask = true;
        }
    }
}

That’s it, we’re all set! Simply press F5 to run the project to the browser. The build process took much longer than normal Silverlight projects. You might need to wait for several seconds before you can see the browser window popped up.

The following screenshot shows the UXDateTimePicker in action. Click on the Hire Date’s picker to see the calendar with an elegant analogue clock. Notice that the date is correctly selected, as well as the time. All good!

Want to give it a try quickly? Download the sample here, extract and run the project. Note that you will need Northwind database installed in your local SQL server.

Licensing ClientUI in LightSwitch Application

When Microsoft announced the second beta of LightSwitch three months ago, our support team has been constantly bombarded with licensing questions in LightSwitch. How do you supposed to license ClientUI in such black-boxed application domain? I will unveil it next, read on.

By default, LightSwitch application shows the logical view in the Solutions Explorer. This allows developers to quickly skim on the information that matters to them – in this case, the data source and the screens – instead of a huge stack of projects and generated files. Fortunately, LightSwitch still allows you to view the solution in File perspective. This can be done through the small button in the right most of the Solution Explorer’s toolbar, please refer to the following shot.

The file view is required for the ClientUI’s licensing to work. As you may have aware, to license ClientUI in a Silverlight or WPF app, you need to embed the runtime license file called licenses.islicx to the root of the main project.

Once you switched to the File view, you will be presented with four projects in the Solution Explorer. The correct project to choose for the ClientUI licensing is the Client project. You can then follow the normal licensing procedure afterward, such as adding the license file and then set its Build Action to Embedded Resource. See the following shot.

And one more thing. LightSwitch generates dozens of assemblies in the output folder which contains the application building block and common runtime used in the LightSwitch application. Make no mistakes, the main assembly that you should select for the licensing is the one ended up with .Client.dll, for example, ClientUI_Lightswitch.Client.dll for project with name ClientUI_Lightswitch.

To make it clear, I included the screenshot below that shows the exact location of the Client assembly required for the ClientUI licensing.

I hope this blog post gives you a quick start on building ClientUI-powered LightSwitch application. Please post your feedback, thoughts or questions in the comment box below.

Best,
Jimmy

The most significant updates are the support for Microsoft LightSwitch and event aggregator for advanced MVVM application development. It also updates DevForce to version 6.1.0 with native query support. ASP.NET also receives a huge list of update, especially in WebGrid, WebCombo, and WebInput.

Click here to read more about the announcement and download the release notes.

Customers with WebUI Studio 2011 R1 installed can obtain these updates from Update Manager. Looking for the the new setup? Registered customers and subscriber can login to dev2.intersoftpt.com to download a free copy. Others can obtain the full 30-day trial at intersoftpt.com/RequestTrial.

Happy developing guys. If you have any troubles, feel free to ask for help @ intersoftpt.com/Community.

Best regards,
Jemmy

In the previous series of the joint ClientUI and DevForce sample, you have learnt how to build a simple Contacts application that runs in both Silverlight and WPF using the architectural best practice such as MVVM design pattern. The first series discussed about the fundamental data access architecture, while the second series talked about sandboxed editing. You can read the first blog post here, and the second post here.

In this blog post, I’m pleased to introduce the third series of our joint Contacts sample which is strongly focused on improving the editing experiences. The upgraded Contacts sample guides you how to add rich editing capabilities to your Silverlight and WPF applications using the new ClientUI’s advanced input controls. More interestingly, it also addresses a number of challenging technical implementation such as adding a nice photo upload capability using MVVM design pattern. Let’s get it started!

Eliminate Input Errors with UXMaskedInput

In the original Contacts application, the Contact Editor uses basic textbox controls to capture the data input such as the Id, name and address of the contact. However, using basic textboxes to accept patterned data input – such as found in zip code or a phone number – is often prone of entry errors which lead to data inconsistency and corruption in the application’s functionality.

Fortunately, the latest ClientUI release now comes with dozens of advanced input controls with various built-in features, each designed to address different needs. For example, UXMaskedInput is designed to restrict data input with patterned format such as zip code or SSN, UXCurrencyEditor for entering number and currency input, and UXDateTimePicker for entering date and time.

Back to our Contacts application, the Contact Editor definitely needs some improvements to provide users with richer editing capabilities which ultimately minimize data entry errors. Some of the possible improvements are as following:

• Add automatic uppercase conversion to the ID input
• Limit the zip code to accept only five optional digits
• Add phone number masking to Phone, Cell and Fax input

Most of the above requirements can be achieved with UXMaskedInput, thanks to its powerful and comprehensive masking features. Its MVVM-ready architecture also enable us to implement rich masked editing complete with validation in just a few minutes – all without writing code.

The following example shows how to use UXMaskedInput to accept only input with phone number pattern.

<Intersoft:UXMaskedInput Width="120" EditMask="0-000-000-0000"
     ErrorMessage="Please enter a valid phone number, i.e., 1-510-555-1212"
     Value="{Binding Contact.Phone, ValidatesOnDataErrors=true, Mode=TwoWay}" 
     Intersoft:DataBinding.ClearErrorOnTextInput="True" 
     IsSaveLiteral="True" />

And the results below.

To learn more about the features available in UXMaskedInput, please see UXMaskedInput Documentation.

Implement MVVM Photo Upload with UXFileUpload

Most of modern web applications today leverage the power of multimedia such as images and videos more than ever before to create more engaging user experiences. Even Twitter, the 140 character-limited microblogging social tool, has now evolved allowing people to post and share their photos – announced two days ago.

While file upload might sound easy and is something already common in the web, it’s not so common in Silverlight. The complexity grows up particularly when you’re tasked to implement it using MVVM pattern, not to mention you still have bunch of other things to take care such as the user experiences and the reliability of the file upload process itself. This could take weeks, or  months of coding time just to add a file upload capability that really works. The good news is that we have a solution for you. Read on.

In this third joint Contacts sample, we’d love to share how easy it is to add an impressive photo upload feature to the Contact Editor. With UXFileUpload, we’ve got everything we needed – from multiple files upload, progress indicator, upload cancellation, to a fully customizable look and feel. Better yet, it fully supports MVVM pattern which means that you can start the uploading process, identify the progress and capture the uploaded results – all within the ViewModel.

With photo upload implementation that satisfies the MVVM pattern, it enables us to easily reflect the changes to the DevForce’s entity through a two-way data binding. The following code snippet shows the photo upload implementation with UXFileUpload using MVVM pattern.

<Intersoft:UXFileUpload ServiceUrl="http://localhost:1215/UXFileUploadHandler.ashx" 
     TargetFolder="~/Assets/Photos" TargetWebUrl="./" MaxFileSize="512000" 
     OverwriteExistingFiles="True" IsAutomaticUpload="True" CanSelectMultiple="False" 
     ShowStatisticsOnCompleted="False" FileTypeFilter="Image Files (*.jpg)|*.jpg" 
     EnforceFileTypeValidation="True" 
     UploadedFileUrl="{Binding Contact.PhotoUrl, Mode=TwoWay}"/>

Notice that the UploadedFileUrl is bound two-way to the contact’s PhotoUrl property. When the upload completes, the PhotoUrl reflects the changes immediately. As the results, you don’t even have to add any code in the ViewModel, because the existing SaveChanges function will automatically take account the changes in the PhotoUrl property.

The following screenshot shows the polished Contact Editor with photo upload capability.

When saved, the newly uploaded photo in the Contact List will be automatically updated as well without any additional effort, this is made possible with a two-way binding between the image source and the image property in the DevForce’s entity, see below.

All in all, the advanced input controls with solid MVVM architecture combined are true productivity booster! It helps make development faster, easier and more maintainable.

To learn more how to implement the advanced input controls and the photo upload in depth details, please read the PDF walkthrough.

Download the Solution

Click here to download the latest Contacts project source code along with the walkthrough document. Please note that the download package contains updated files and a number of bug fixes, thus is newer than the one installed in ClientUI 5. The latest project source will be shipped in the upcoming ClientUI 5 service pack.

As usual, the release includes both Silverlight and WPF projects which are built with identical codebase. Feel free to play around with the code and use it in your apps! Note that you will need the latest version of ClientUI and DevForce to run this sample. You can download the latest ClientUI release here, and DevForce here.

Any feedback and thoughts are warmly welcomed.

Best,
Jimmy

Earlier this month, we released the first 2011 volume release of WebUI Studio, which includes over thirty new controls across all .NET development platforms. In case you missed the news, click here to read the press release and other related news.

We’re so excited about the new release, not only because it ships dozens of new shinny controls that will make your development faster and easier, but ultimately because we have addressed the most challenging and important development aspects such as data access and connectivity issues, and design pattern challenges in Silverlight and WPF development.

Many Silverlight developers have been long struggling with questions like “How to bind a data grid to a relational database using MVVM pattern?”, “What’s the best way to display dynamic data with server paging and server filtering for the best performance?”, or perhaps more advanced questions like “How to implement editing with batch update that takes account server paging and server filtering?”. These are typical questions every developer will encounter as they are building real-world business applications. Fortunately, we now have confident answers to all these questions, and defied the most challenging data access issues for once and all – thanks to the new MVVM data controls and components in this new release!

In this blog post, I will share a number of new resources that were made available to help you get the most out of the new release.

New Documentation Topics

We added over hundreds of new documentation topics in each release, which includes new walkthroughs and getting started topics for new controls, as well as conceptual topics for fundamental architecture such as data access component model and design patterns.

As you entered client-based development such as Silverlight, the first thing you might realize is that you can’t access relational database the way you used to do as in server-based development such as ASP.NET. That’s true, you will need an intermediate layer called data service that understands what the client is requesting, and consequently response with something that the client recognizes. You will later deal with data operation types such as when to use client-side operation or server-side operation in your data application. Learn about the supported data services, data operation types and find out more about Silverlight data access in Data Access Overview.

Once you grasped the data access concept in Silverlight, you’ll be looking for ways to display data based on dynamic queries using MVVM pattern. Enter QueryDescriptor, the industry’s first MVVM-ready data component for Silverlight and WPF. It lets you write the interaction and data access logic in your ViewModel, while allows the Views to reflect the data seamlessly in “loosely-coupled” fashion. To learn more, head to Understanding QueryDescriptor.

To jump start with Silverlight data application development, make sure you check out the following walkthroughs:

• Walkthrough: Create New Intersoft ClientUI MVVM Data Application (WCF RIA SP1)
• Walkthrough: Create New Intersoft ClientUI MVVM Data Application (DevForce)
• Walkthrough: Bind UXGridView to DevForce Services using MVVM Pattern
• Walkthrough: Bind UXGridView to WCF RIA Services using MVVM Pattern
• Walkthrough: Handle CUD Operation using UXGridView and WCF RIA
• Walkthrough: Handle CUD Operation using UXGridView and DevForce

We shipped two data providers to let you work with the data service of your choice. If you owned a DevForce license, be sure to check out the DevForce walkthroughs above.

As you learn about data application development in Silverlight and WPF, you might find the following resources useful to address specific needs.

• UXGridView Overview
• Sorting Data with UXGridView
• Grouping Data with UXGridView
• Paging Data with UXGridView
• Filtering Data with UXGridView
• Exporting Data with UXGridView
• Editing Data with UXGridView
• Customizing Edit Controls in UXGridView
• How-to: Implement Client-side Sorting, Filtering and Paging using UXGridView
• How-to: Implement Server-side Sorting, Filtering and Paging using UXGridView
• UXDataPager Overview
• How-to: Implement Data Paging using UXDataPager
• How-to: Implement Data Paging using PageDescriptor and UXDataPager
• UXDataFilter Overview
• How-to: Implement Data Filtering using UXDataFilter
• How-to: Implement Data Filtering using FilterDescriptors and UXDataFilter

So far, I’ve shared some of the most essential resources related to data access and data presentation development. However, the new release includes many controls in addition to the data presentation controls.

You might also be interested in the new Treeview and learn how to bind hierarchical data using MVVM pattern, how to use XPS document viewer to load an XPS document, as well as learning how to use navigation pane to build rich Outlook 2010 style navigation interface. All the resources you need can be found in the following links.

• Using UXTreeView
• How-to: Bind Hierarchical Data to UXTreeView using Member Path Properties (MVVM)
• How-to: Bind Hierarchical Data to UXTreeView using HierarchicalDataTemplate (MVVM)
• How-to: Bind UXTreeView CheckedItems Property to UXListBox
• Using UXNavigationPane
• Walkthrough: Create New Intersoft ClientUI Outlook-style Navigation Application
• Walkthrough: Create New Intersoft ClientUI Outlook-style Navigation Application for WPF
• Using UXResizablePane
• Using XPSDocumentViewer
• Document Framework Overview

There are also numerous enhancements in addition to new controls such as smooth content transition, improved memory management and multi-window drag and drop support in WPF. Another noteworthy enhancement is the MVVM support for the ClientUI page navigation framework which allows you to write interaction logic such as query string and data context parsing in the ViewModel. Learn about these enhancements and find out more in What’s New in ClientUI 5.

New Samples

If you haven’t aware, we’ve updated our Control Explorer with many new exciting samples ranging from employee leave records, enterprise assets management to digital magazine reader sample and Outlook navigation sample. Jemmy did a nice write-ups about the new samples, make sure you check it out here.

While the samples are available offline in your development box, you can always access the samples online anywhere and anytime you need it.

Our designers made a minor facelift on the live sample to improve your browsing experiences. You’ll notice fresh new backgrounds on every 15 minutes interval. We hope you enjoyed the new samples and the improved experiences. Visit live.clientui.com to see all new samples online.

In the next few weeks, we’ll be releasing more learning resources such as walkthrough videos and tutorials. Until then, I suggested you to check out the readily-available resources above, or post your questions to ClientUI Forum.

Best,
Jimmy

The latest ClientUI brings so many new innovations and technology advancement available no-where else. The release debuts with a host of various data visualization controls like grid view, tree view, document viewers, and more. Even better, the deep integration with IdeaBlade’s DevForce provides the fastest way to build MVVM-enabled business applications. All of this innovations are geared towards a better development experience to build any business applications of any size and any complexity.

In this blog post, I will review the new shinny samples demonstrating the new products and the features, as well as sharing my top favorite new samples.

Below are the top 10 my favorite picks of new ClientUI 5 samples

1. Assets Management

   The assets managements sample is a good demonstration of the latest UXGridView with many features enabled such as Column Freezing, data grouping, column sorting, and the powerful data editing capability.

   Data editing is a crucial feature in any grid view control. You can add a new row, edit, or delete a row. UXGridView extends this behavior further with many innovative features such as custom editing control, data validation, read-only binding, value list, and more.

   Read-only binding is a unique feature that lets you lock certain columns or a row based on a column’s edited value. For example when an asset status is sold, the Service Date column is lock for editing. Value list is a unique feature which translates a foreign key column into a more meaningful data. For example Department column refers to DepartmentId from  Department table. Instead of showing the number, the department name is showed instead. This feature also works with data editing.

   In addition, various user experience features are also demonstrated like column freezing, paging, and more. UXGridView’s column freezing is closely similar to the on in Excel. You can lock certain columns from the left side and prevent it from being horizontally scrolled when the available viewport can’t accommodate all columns. Explore the sample.

2. eMagazine Viewer
   Like to read books, magazine in your portable inch+ thick digital reader? With the latest XPSDocumentViewer, you can add the same rich reading experience to your Silverlight or WPF applications. Try to click on the Browse Library to select and load different magazine.
    
   The high-performance rendering engine displays the document brilliantly. Images are vibrant and text is crisp. Especially when using the various zooming feature, you will notice that the document is displayed at its best quality even during the zooming process. Explore the sample.
    
   
3. Getting Started Viewer
   If the above scenario shows XPSDocumentViewer loading rich media content, this specific sample demonstrate its powerful multiple page document loading capability without any slow down.
    
   The innovative feature behind all this is the load-on-demand engine. It prioritizes visible pages to be loaded and rendered while the rest are loaded conditionally. Another great feature is the background loading. It allows pages to be preloaded in the background during application’s idle time. In this sample, you will notice that both document and applications is loaded at the same time.
    
   You should try the built-in page navigation. There are two types, thumbnail and outline. Thumbnail mode displays a small preview image of every page, while outline provide the entire document’s TOC hierarchically (depending on the document’s structure). Explore the sample.
    
   
4. Baseball Player
   Rejoice baseball fan, now you can see your all-time favorite baseball player attractively in UXGridView. Try to select a row and notice that the detailed information is displayed under. This row detail feature is enhanced with selector functionality to easily incorporate certain business rules. You can also change the row detail behavior, whether it is shown all the time or on selected item only. Explore the sample.

5. Employee Leave Records
   One of the most unique sample in UXGridView is the Employee Leave Records – emphasizing on the grid’s various data interaction features. Click on the filter button on a column to reveal the filter box. You can use the check box to filter the row or type, or use type in the textbox to narrow down the available filter options.
    
   Sorting feature is available out-of-the-box controlled by a property. In addition to single column sorting, UXGridView is enhanced to support multiple sorting. Click on the first column to sort. Hold shift and click on the second column, and so on. To change the sort direction, click on the same column while holding shift to maintain the multiple sorting behavior or UXGridView will discard the previous sorting order.
    
   The loosely coupled architecture adoption enables users to externally execute certain grid view features. The most notable implementation is the Export and Refresh button. The default location is on the grid footer, but in this sample a second button is added above the grid.
    
   Try the sample here to discover more features.
    
   
6. My Outlook
   UXNavigationPane is a flexible, space-saving navigation control adopted after Office 2010. User can easily collapse the entire control to when more screen estate is required and restore it when needed. It also feature real-time resizing feature with “snapping” feature. You can also try to explore various pane items and see its content. Explore the sample.
    
   
7. Corporate File Explorer
   In most business applications, tree view is often used as the primary navigation system for its hierarchical display – enabling users to directly jump into a sub page. And in most cases, it gets sluggish when the structure gets too complex with many nodes.
    
   This sample demonstrates UXTreeView with its blazing-fast loading regardless of the structure. Using a custom Load-on-Demand technique, UXTreeView allows developer to custom-code the child node retrieval process. When enabled, the expand toggle indicator will be shown. Explore the sample.

8. Online Book Store
   Despite the nature as a navigation control, UXTreeView can be used to display a list of items in hierarchical order, just like the following online book store sample. User can use the checkbox to select or deselect the desired category.
    
   UXTreeView’s checkbox is designed to accommodate non-linear structure selection with three-state mode, checked, unchecked, and indeterminate. Indeterminate is a state indicating a parent, whose child nodes are partially checked. If all child nodes are selected, the parent’s checked status is checked. You can also check on the parent to select all of its child nodes. Explore the sample.
    
   
9. My Tasks and Events
   This “My Tasks and Events’ sample uses UXTreeView as its category navigator. Click on a node to select different category. You can also move an event to different category by dragging it and drop it on the desired node. Explore the sample.
    
   
10. Order List
    This sample demonstrates UXGridView displaying data in hierarchical order. Depending on your data structure, you can have unlimited nested table with on-demand data retrieval. You can click on the plus sign to expand the child table.This sample also demonstrate the visual customizability. You can easily experiment and apply any custom color and theme to UXGridView, for example the black color. Explore the sample.

Above are only some small collection of business-inspiring samples featured on ClientUI live demo page. Please visit live.clientui.com to experience all. Want to build an amazing application such as shown above? Grab the 30-day trial now. Existing customers with valid subscription can obtain the latest WebUI Studio from Developer Network, under My Components shortcut.

Happy developing.

Best regards,
Jemmy Haryono

Now that ClientUI 5 is officially released and the new license keys are delivered, you’ve got the most comprehensive and  powerful tools in your fingertips. The first thing you will be doing after installation is probably to figure out what you can do with the new ClientUI. There are really a lot of exciting and never-before-possible capabilities that you can now add to your business applications. Let’s take a look at some of them in this blog post.

Discover the New Possibilities

I have been extensively blogging about UXGridView in the past several months since it was in the planning phase and all the time through the CTP and beta releases. There are many other new controls that are not less important in this new release which I haven’t been blogging about before due to the milestone readiness. It’s now the time to discover all these exciting new tools.

At a glance, the ClientUI 5 release is strongly focused on essential line-of-business controls which consisted of three key areas: high-performance data presentation, advanced navigation, and rich document controls. Let’s start from the document controls.

Silverlight Document Management Made Easy

I’ve been often asked by business friends and clients, “What’s the best way to store our corporate documents and make them available for rich viewing in client apps?” And some often added with “And ones that support printing, zooming and navigation?”. Some geeks would add another requirement, “And definitely one that supports cross-platform development”. Wow, I think these are all interesting stuff, yet challenging. I couldn’t satisfy everyone with a confident single answer back then – because it was never been done before.

Earlier this year, I sat down with our top engineers discussing these business challenges and we don’t even have ideas if such capabilities can be done at that time. And today, I’m excited that we have turned these dreams into reality – thanks to the team’s great passion and high dedication to defy the challenges found all the way during the development until it’s delivered today.

Introducing ClientUI document controls, this brand-new lineup includes a range of feature-rich document viewers, engineered from the bottom-up with a solid architecture to allow room for future extensibility. That said, these viewers aren’t merely fancy controls with sleek toolbars and glassy interface. They are built on the top of document framework, a set of comprehensive document interface and APIs that the viewers understand.

Enough introduction, so what can you do with these document controls, you might asked. There are a lot to say – from presenting sales invoices, project plans, business documents to high-fidelity chart reports. The fact that Microsoft has been working hard to bring XPS to becoming an industrial standard for easy document exchange has further confirmed the adoption of using XPS as the first-class document format in business organization. Essentially, all documents in the form of XML Paper Specification (XPS) are supported – whether they are produced from Microsoft Word, Powerpoint, or Excel; or generated by the XPS Printer Writer which is installed in both Windows Vista and Windows 7 by default.

The ClientUI document viewer lineups such as XPSDocumentViewer enables not only pixel-perfect document viewing, but also WYSIWYG printing. This means that whatever you seen in the screen should print out exactly the same in 1:1 ratio, which makes it ideal for online business document sharing. See an example below.

Sharing a knowledge base document with rich content makes much sense as well, such as a comprehensive getting started. Thanks to the state-of-the-art virtual rendering, working with a large multi-page document won’t slow down your apps at all.

More importantly, XPSDocumentViewer includes world-class user interface that matches the industry’s popular readers such as Adobe PDF Reader. As shown above, it has a sleek navigation pane supporting thumbnails and outlines navigation mode, search box, minimalistic tool bar, and rich controls such as dropdown and slider for easy zooming. And of course, view presets is also supported, including fit to width, fit to height and actual size mode.

Furthermore, the page canvas, resizable layout concept, industrial theme with natural design and subtle drop shadow effect have all been thoughtfully designed by our experienced UX artists – ensuring the best viewing experiences for your users. And for you, developers, that means you can just drop an instance of the viewer in your apps, set the source and deploy.

We shipped a host of business-inspiring samples that showcase the key features of the document viewers. You can access and try all of them here.

So with all these compelling solutions available, the answer to earlier questions is now obvious. And if you’re either asked or tasked with the similar requirements, you know you can count on ClientUI’s rich document controls.

Complex Navigation Interface Simplified

As the leading UI tools provider, we aren’t merely creating new controls without prior knowing the nature and concept of the design patterns, unlike many other competing vendors. Since the invention of ClientUI, we’ve been extensively focusing in UI design patterns and create tools that uniquely and consistently satisfy the UI requirements of line-of-business application development.

With design patterns, we have a solid answer for everything. If you wanted to create a rich MDI application, use our windowing and dock interface. If you wanted to create a rather classical SDI application, use a simple list for navigation. For containers, choose either group box, expandable group box, or accordion; while using toolbar and status bar for commands interaction. As we’re also providing UI/UX consultant and professional services, we have most UI patterns well predefined to be able to address clients’ requirements that are specific to their business.

In this new release, we’ve developed a new pattern targeting medium to big-sized applications that employ complex and hierarchical navigation. That said, three new controls have been introduced, a hierarchical tree view, a resizable container, and a versatile navigation pane.

The combination of these three new controls, and together with ClientUI’s powerful navigation framework, enable you to create immersive business applications that “scale” along with the growth of your business. The scope of the “scale” here may be too general, so let’s scope it in the context of user interface and navigation. The essence of the scalable navigation support means that you can create applications with fewer modules/features initially and add them later without have to revamp the entire navigation and user interface.

Naturally, this means that your navigation interface should employ a fluid design pattern, where new modules can be consistently accessible regardless of the real screen estate. Here is the true challenge, because real screen estate has limitation. Another challenge is that the real screen estate might be various depending on the user’s display device. Users with larger resolution display will expect to see more navigation items, while users with lower resolution will expect the screen estate that arranged accordingly and makes sense to them. This is what fluid design pattern is all about – smartly adapting to the environment while still consistent in function and behaviors.

Our solution to the fluid design requirements above is the UXNavigationPane control. You can place any number of navigation items to the control as you desire. If the screen estate is not sufficient, they will overflow to the footer area, and smartly hidden when the footer area is full which is easily accessible through the context menu. See an example of a UXNavigationPane below.

Notice that each navigation item can consisted of sub navigation items. This design provides an elegant solution to nearly all complex navigation challenges. For instances, you can use a simple flat list for one-level sub navigation. If you need a two-level sub navigation, use UXAccordion. Or if you need a nested hierarchical sub navigation, use UXTreeView.

This navigation control is also very versatile in the way that you can resize, expand and collapse it to maximize real screen estate. You can still access the navigation item’s content through the “Quick Access” button. See the illustration below.

Finally, this navigation pane control is unlike the others in the market in many ways such as the support for real navigation functionality. Most of the similar controls I seen provide only the “UI” part, which means you can click an item to reveal its content. True, you can also put sub navigation controls like buttons or treeviews. But they aren’t real navigation controls, which means that they won’t let you navigate to a specific page, or have the items synchronized with the current navigation state.

What’s really cool in UXNavigationPane and also one of my favorite features is the fully-functional navigation features in addition to the sleek and fluid user interface. This means that clicking on “Mail” item would let you navigate to Mail.xaml with a simple NavigateUri definition. It also adheres to the entire ClientUI navigation framework, where you can specify a friendly address instead of raw address, such as /Mail/Inbox to go the Mail page with Inbox selected.

Not only that. UXNavigationPane can also intelligently synchronize its user interface elements based on the current navigation state consistently – all without additional code. It’s so smart that it will not only synchronize the first level state of the navigation item – but also the sub navigation item that matches the current navigation state. For users, this means that they can access the applications in the way they expected it to be. Typing /Contacts in the address bar to go to contacts, typing /Documents/Corporate to see all business documents, or loading the Mail from browser’s bookmark for an instant access to inbox. See the following illustration for details.

You can browse many of the new navigation control samples from the ClientUI Showcase.

As a business application developer, these are exactly the tools I need and the one that I will seriously invest and use in my mission-critical applications. Why? Because it lets me focus on what’s matter the most – the business requirements – I don’t have to write even single code to maintain the navigation stuff. And more importantly, it enables me to rapidly create pages without have to concern about code maintenance, because there’s no code needed to maintain. I could create as much as XAML pages, bind them to the Source, design the View and bind them to the ViewModel and entities – and get my tasks done in realistically shorter time frame.

I hope this post gives some insights on what you can do with ClientUI 5. In my next post, I will delve into more learning resources and development aspects using Visual Studio. For now, feel free to expand your creativity and get ready to create your next-generation applications with amazing user experiences. Click here to get your trial copy of ClientUI 5. For technical support, please post your questions to Intersoft ClientUI Forum.

Best,
Jimmy