Category Archives: 2011 R1

Latest Product Updates and New Tutorial Videos

The latest product hotfixes for WebUI Studio across all platforms are now officially released. Make sure you implement the latest updates for improved stability and reliability. Checking for updates is easy – simply launch the Update Manager from Intersoft program group, click on the Check for Updates and then download away. Click here to view the complete hotfix application guide.

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.

Customize Cell Editing Template in UXGridView

 

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.

Deploy ClientUI Application created using Microsoft Visual Studio LightSwitch

 

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

New Silverlight Tutorials: Building business applications with ClientUI and DevForce

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.

Best,
Jimmy

Introducing Event Aggregator in ClientUI 5 SP1

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.

EventAggregator Overview

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.

Event Aggregator Sample

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

ClientUI 5 SP1: Real-time Document Streaming in XPS Viewer

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.

XPS 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 Solutions\ClientUI 5\Server. Once added, your project looks like the following shot.
    Add Intersoft.XPSDocumentViewer.Server reference
     
  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.

XPS Viewer with streaming

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

ClientUI 5 SP1 Adds Support for LightSwitch

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.

Add references to the ClientUI assembly

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!

UXDateTimePicker lives in Lightswitch app

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.

Switch to File view

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.

Adding ClientUI license file

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.

Locate the generated Client assembly

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