The arrival of Windows 8 adds more choices to the platform stack that mobile developers should consider. So my question is, do you plan to build Windows 8 apps, or perhaps you already built one? As we’re planning our roadmap ahead, we’d love to hear from you – which platforms will you build your next apps on, the challenges you’re facing, and what tools you need to get your jobs done right.

Join our 2013 product survey and place your vote so we can align our next product roadmap to your development needs.

Your participation is an effective way to present your thoughts and opinions about our products and service to the management of Intersoft Solutions. I do believe that your valuable feedback would be very useful to help us improve our products and services in the future.

If you have any questions or technical difficulties, please don’t hesitate to drop an email to me at martin@intersoftpt.com.

Thank you for your time and participation.

Regards,
Martin

The wait is over – the highly anticipated WebUI Studio 2012 SP1 release is now available for download. Grab your copy here.

As mentioned in my recent posts, the new service pack release includes full support for Visual Studio 2012 which updates all 40+ component designers to adhere the Visual Studio UX guidelines. In addition, this release has been optimized for Windows 8 as well as support for Internet Explorer 10. For details, check out my post here.

Even more, the new service pack ships dozens of new features and major performance improvements to the Silverlight and WPF controls, ranging from the ribbon controls, all variants of selection controls, smoother animation in expandable group box, attribute-based licensing mechanism, and much more. For complete details, make sure you check out the Release Notes document once the service pack is installed successfully.

Help Integration in Visual Studio 2012

In addition to a host of designer-related enhancements, this new release also automatically plug all products documentation into Help Viewer 2.0 which shares the modern Visual Studio interface. The look and feel of the documentation content has been updated as well to share the same metaphor, see the shot below.

Everything you need is here. And whenever you need help, simply press F1 and locate the topics in the new Help Viewer.

More details on Visual Studio 2012

Along with this release, we’re pleased to introduce a new page dedicated to Visual Studio 2012 which contains related information and resources. Check it out at intersoftpt.com/vs2012.

Last but not least, enjoy (Visual + WebUI) Studio 2012! Here’s the download link again in case you missed it.

All the best,
Jimmy

Last week, Microsoft has finally released its long awaited Visual Studio 2012 to the MSDN subscribers. As VSIP partners, we had the RTM bits several weeks earlier and started testing our component designer features for the new Visual Studio.

Just in timely fashion, we’ve recently completed the development and testing milestones for our new component designer – rebuilt entirely from the scratch to provide the best support for Visual Studio 2012. In this blog post, I’ll share some of the design experiences while remaking our component designer. Read on.

The Visual Studio 2012 UX Guidelines

Since the invention of “Metro” design language, Microsoft has been redesigning all its software products toward the modern UI design, including the recently released Visual Studio 2012. As a result of the redesign, Microsoft has now introduced the so-called “Visual Studio 2012 UX Guidelines” which has to be adhered by its development ecosystem partners. We’re thrilled to be among the first who have adhered to the UX guidelines, and will release our new version at the same time of the official Visual Studio 2012 launch.

To adhere to the UX guidelines, our designer team have redesigned nearly 200+ toolbox icons to the Metro style. Furthermore, we decided to remake the component designer to support the new look and feel of Visual Studio 2012, and more importantly, to support the philosophy of the user experiences which essentially emphasizes on content with reduced decorators.

Meet the new Component Designer for Visual Studio 2012. It’s rebuilt entirely from the scratch to resemble the Visual Studio 2012 interface. The all-new designer is now built on the WPF 4 platform and leveraging our own ClientUI for WPF controls – thanks to the comprehensive and easily style-able controls, we managed to remake the component designer ahead of the expected schedule.

The following screenshot shows the new WebUI Studio component designer with much cleaner design and Metro’s iconography.

It’s important to note that previous version of Visual Studio will continue to be supported. The WebUI Studio component designer launches the new WPF-based designer only when it’s running inside Visual Studio 2012. This is made possible thanks to the loosely-coupled architecture in the component designer framework.

So, when you’re working with WebUI Studio components in Visual Studio 2008 or 2010, you’ll get the old, clunky component designer with sea of colors. And when you’re in Visual Studio 2012, it automatically launches the new modern-styled component designer. Keep in mind that the control assemblies are identical regardless of the Visual Studio version.

The shots below show the designer comparison between the Visual Studio 2010 and 2012.

One of the most useful benefits with the migration to WPF is that you get automatic support for the screen resolution and font scaling. This means that if your Windows is set to use 125% larger font, the component designer will automatically reflect the control and layout to fit to the desired scale. The WinForms layout didn’t have that luxury, and it’s extremely difficult to manage the auto scaling settings. This is why you’ll find many inappropriately truncated text and graphics in the old designer when using larger font scaling.

Furthermore, the WPF designer has much better performance compared to WinForms in terms of initial loading, rendering, animation and navigation. This allows us to achieve the “fast and fluid” user experiences.

Back to the main subject, we actually reimagine all aspects of the designer – whether it’s the functionality or the design. For examples, compared to the previous version, the new Layout Manager has much cleaner surface, and eventually makes it more intuitive and easier-to-use at a glance. The art of this design language is that it focuses on the content and brings the functionality back to where it supposed to be. Take a look at the screenshot below.

We also pay attention on the user experience details where message boxes should be avoided whenever possible. In this remake, we’re now displaying important messages in the accented status bar.

Meanwhile, the Structure Manager is also redesigned with the identical aesthetic and consistent layout, enabling users to understand the user interface with less learning curves.

Simplified and Smarter User Experiences

One thing that we learnt about Metro design language is that it’s not only about the user interface, i.e., the colors, themes or shapes. The true essences behind the philosophy is the simplified user experiences. But, the “simplified” here doesn’t necessary mean removing features, it’s more to making user experiences smarter which allows users to perform a task or function in less time, and more efficiently.

We have a number of interesting stories about making user experiences simpler yet smarter while remaking the component designer for WebGrid.

With hundreds of features, it’s quite challenging to find a particular setting or feature in the property window. So we introduced a component designer to address this challenge that looks like the following shot.

I personally think that the idea and purpose of such designer is good, although the existing design may now look cluttered. At a glance, the settings are spreading everywhere. Notice that we have numerous in the left-side navigation vertically, and also some tabs in the top arranged horizontally.

In the WebGrid designer remake, we managed to put everything back to where it should through a deep category rearrange that is based on content and function similarity. Tabs such as Advanced, Localization Manager and Pivot Charting are now removed from the top since they are now part of the Properties. Redundant navigation items are merged into a content that makes more sense. See the shots below to get a closer look.

With the designs shown above, you’re no longer served with massive user interface elements that present the same function. So the Properties tab basically means that “come here for all settings-related tasks”. This allows us to keep the design ideal with balanced functionality. Lessons learned.

Similarly, we simplify the Caching and Performance Tuning tabs such as shown below…

… into just a single Advanced tab shown below.

We designed smarter user experiences by categorizing them into expandable groups styled with lightly-shaded accent and Metro colors.

Furthermore, the new designer is not simply a remaking effort, we actually added a number of new options that makes performance tuning a breeze. Notice the red highlighted area in the shot above, you can now enable the built-in resources compression with a single click. This feature actually existed since the 2009 release, but not easily discoverable as you need to manually make changes to the web.config file.

More options are now added to the Common Settings view which includes the new features introduced in the recent releases. For instances, enabling HTML5 rendering mode across the application is simply a tick away.

All 40+ Component Designer Redesigned

In this blog post, I’ve only scratched the surface of our new component designer for Visual Studio 2012. In addition to flagship products such as WebGrid, we also update the designer of entire WebUI Studio family, including WebCombo, WebInput, WebScheduler, WebTextEditor and the rest of components resembled in WebDesktop and WebEssentials.

As far as I can say, we’re making WebUI Studio the first-class citizen of Visual Studio 2012 which enables both products to work best together for the ultimate application development experiences.

We’re expecting to deliver all these new exciting features in the upcoming WebUI Studio service pack release by next week – and hopefully faster. The service pack will also include many new enhancements for Windows 8 and Internet Explorer 10, all-new project templates for Visual Studio 2012, as well as reliability improvements to all Silverlight and WPF components. Stay tuned for the release announcement!

Best,
Jimmy

Introducing the new data controls lineups such as UXPageableComboBox UXMultipleSelectionComboBox and UXTreeList, developers can now build large-scale data entry applications with blazing fast performance. UXGridView also adds with several enhancements and advanced features such as columns collection binding, column header binding and batch items validation. Click here to find out more about the new controls in ClientUI 7.

In this blog post, I will share some of the new samples demonstrating the new products, as well as reviewing the key features.

Below are some of the top new samples that goes to my favorite list.

1. Cabin Front Reservation
   

   UXPageableComboBox is an enhanced UXDataComboBox control featuring highly efficient server paging mechanism. The control addresses performance issues in large data scenario by retrieving only the required data on demand, and perform incremental data retrieval when the total item count exceeds the specified page size.

   In this sample, you are able to perform Multiple columns layout with built-in column type such as Text, Images and Templates. You can perform sorting and description text feature using this control. With description text, you can show additional information related to the selected item in the right edge of the control. It is used to allow you easily understand the meaning of the input value at a glance. Explore the sample.

   

    

2. Customer Order
   In this sample, you will see the tight integration between UXGridView and UXPageableComboBox. You can edit a column in UXGridView and bind it with UXPageableComboBox. With this feature, you can fully use all features available in UXPageableComboBox inside UXGridView, such as Multiple columns layout, Auto-complete behavior, advanced data grouping and sorting capability and many more. Explore the sample.

   

3. Mail Application
   UXMultipleSelectionComboBox is an advanced queryable ComboBox control specially designed to support multiple selection. It provides an intuitive data entry mode that allows users to quickly select multiple items through type-and-tab gesture. It supports both Editable and Readonly mode. This control has every features that are available in UXPageableComboBox.

   In this sample, editable mode is used. It means that you can directly update the selection through the text input element. The control filters the data instantaneously as you type ahead, and the selection will be added with a single Tab key. Also, the built-in smart filter feature automatically prevents any items that you have selected to appear on the list for the next selection. Explore the sample.

1. Project Milestone
   UXTreeList is a unique data control used to display self-referencing hierarchical data. You can use the HierarchicalCollectionView to transform your self-reference table into a hierarchical self-reference data.

    
   UXTreeList combines all UXGrid features such as data editing, grouping and paging with UXTreeView’s expand/collapse functionality to perfectly present any hierarchical data.

   In this sample, some features demonstrated are variety of columns type, common data manipulation and data editing that includes drag and drop to re-arrange your data. Explore the sample.

   

2. Chart of Account
   

   UXTreeList supports load on demand scenario using MVVM pattern where only the root items are loaded initially. The children will be loaded on demand as users expanded the item for the first time. This feature is particularly useful to improve the overall performance when the assigned data source is relatively large.

   In this sample, IsLoadOnDemand property is set to True in order to activate the load-on-demand feature. In this mode, a busy indicator will be automatically displayed in each expanded item during the loading progress. Explore the sample.

   

3. Empty Row Visibility
   UXGridView lets you easily create beautiful data presentation with look and feel similar to popular desktop-based apps such as iTunes, Quick Books, or other business apps alike. With the new innovative rendering feature, UXGridView automatically fills the entire view port with alternating rows instead of leaving a large white empty space.

    
   This sample demonstrates the empty rows visibility feature in UXGridView. When this featuere is enabled the UXGridView will render all the empty rows within the view port. You can also insert a new row from bottom when NewRowPosition is set to Bottom and CanUserAddRows is set to True. Explore the sample.

   

4. Bottom New Row Position
   This new feature brings flexibility to the way users interact with the grid. Users can now rapidly add new items by clicking the bottom part of the grid, just like they would do in Excel. Activate this feature in your apps with a simple property set.

   In this sample, you can see there are new row position indicator on the last row in UXGridView. To go to the new row you can click the empty rows or use keyboard down on the last item. Explore the sample.

   

5. Sequence Column
   Introducing the new UXGridViewSequenceColumn, you can now effortlessly display a column that automatically display sequential number to your data grid.

    
   In this sample, we have UXGridViewSequenceColumn which is used to show the row index of the current display. Note that the sequence column can not be sorted and will always show the row index regardless of the sorting or filtering state. Explore the sample.

   

For more information about ClientUI, you can explore our Live Samples or read through our Online Documentation.

Feel free to download your copy here. And while waiting for the download, be sure to check out the complete what’s new list here. Existing customers with valid subscription can obtain the latest WebUI Studio from Developer Network, under My Components shortcut.

If you have any questions regarding sales or licensing, you can directly email me at martin@intersoftpt.com. Any comments or feedbacks are welcome.

Thank you and have a nice day.

Regards,
Martin

The wait is over. We’re incredibly excited to announce the immediate availability of WebUI Studio 2012 today! The new release ships major upgrades for the flagship ASP.NET data controls such as WebGrid and WebCombo – featuring full HTML5 support, and includes dozens of must-have data controls specifically designed to address line-of-business scenarios in Silverlight/WPF application development.

You can download your copy here. And while waiting for the download, be sure to check out the complete what’s new list here.

In addition, you might want to check out many updates that we’ve put together in this release including the live samples for both ASP.NET and Silverlight, as well as online documentation. The WebGrid documentation is now completely revamped to match the new documentation standards and guidelines that we introduced in ClientUI.

• What’s new in ClientUI 7 (Detailed Change Logs)
• WebGrid 8 Online Documentation
• WebCombo 7 Online Documentation
• ASP.NET Live Demos
• Silverlight Live Demos

Along with the new release, we’re pleased to announce the launch of Intersoft’s new website design. Completely revamped for the best user experiences, you can now get around faster and easier than ever before. And with clean yet elegant design, you can focus on the information and content better. We hope you liked our redesigned website!

Last but not least, enjoy WebUI Studio 2012! Again, click here to download the new 2012 today if you haven’t. We hope you love the new release as much as we love building it!

Note: For active subscribers, you will receive the new license keys within 24 hour. Make sure you have whitelisted the intersoftpt.com domain to avoid communication problems.

All the best,
Jimmy

Earlier this year, we conducted a short product survey to all our customers and industry partners. Nearly 92% of all respondents indicates that they are interested in HTML5 development, followed with Silverlight 5 at approximately 85% – up 15% since the previous survey last year. We thoughtfully consider the survey results to drive our products development roadmap. That said, we’re pleased to announce that the upcoming 2012 release will include two major ASP.NET releases: WebGrid Enterprise 8 and WebCombo 6.

Full HTML5 and CSS3 Support

As written in our 2012 product roadmap, HTML5 is going to be one of our key focuses in this year’s releases. In the first volume, it’s confirmed that we’ll deliver the next major version of WebGrid Enterprise and WebCombo – both are the flagship data controls in our ASP.NET lineup.

The new WebGrid and WebCombo have been redesigned to fully support HTML5, which includes compliance to the HTML5 doc type and removal of the obsolete markups. The control rendering has been significantly revamped in order to achieve pixel-perfect layout in HTML5. And better yet, we employed HTML5 adaptive rendering technique so you can expect 100% backward compatibility with HTML4 and XHTML doctype. This means that your existing projects that are still using HTML4 or XHTML doctype will continue to work as is.

With full HTML5 support, you can expect consistent results in terms of layout and behaviors across popular HTML5-ready browsers such as IE 9, Firefox 12, and Chrome 18. For example, the pivot charting feature in WebGrid now renders flawlessly across all browsers, including the Ribbon and all UI interactions such as drag-and-drop, resizing, and so forth.

When the control detects the use of HTML5 doc type, it will automatically leverage CSS3 which leads to smaller footprint and more elegant results. For instances, WebCombo 6 leverages many of the approved CSS3 specifications such as the round corner and drop shadow feature. Note that in pre-HTML5, the round corner was achieved with multiple DIVs and a number of quirk styles. These solutions no longer apply in HTML5, and has been replaced with CSS3 starting in the upcoming WebUI Studio release.

No Features Are Too Minor

When we talked about HTML5 support, we really meant it. We’ve gone the great length and depth to revive all features to work perfectly in HTML5 – regardless of whether they are major or minor features.

For instances, a small yet useful feature such as tree lines visibility in WebGrid is now supported in HTML5. Rather than forcing our customers to disable this feature, we’ve revamped the entire rendering markup to get it working in HTML5 with consistent results across all browsers. The following screenshot shows the WebGrid control with nested hierarchical feature enabled running on IE9 standards mode.

Most WebGrid’s key features have been enhanced to support HTML5, from column freezing, filtering and paging, keyboard navigation, column moving and resizing, to custom editors, client-side binding and smart batch update.

Similarly, the new WebCombo received major enhancements enabling all features to work precisely across all modern browsers, from multiple columns layout, auto complete behavior, search box position, to the smallest details such as the control styles.

In conclusion, the full compliance with HTML5 and the leverage of CSS3 mark a major milestone in the WebUI Studio for ASP.NET lineup roadmap. The new WebGrid and WebCombo are only the starting point in this release, you can expect the rest of ASP.NET components to be fully HTML5-ready in this year’s second release.

If you’ve specific HTML5-related features that you’d love to see in the upcoming releases, please feel free to drop your comments in the box below.

Best,
Jimmy

Earlier this month, I’ve blogged about some of the exciting new controls that we will release in the next few weeks, which include a brand-new combobox with server paging multi-column support, enhanced GridView and new ItemsControl grouping capability. Many of these new controls are aimed for business application development that target Silverlight and WPF platforms – and soon WinRT. You can check out the full coverage here.

These days, web applications are getting more attractive with much better user experiences than in couple years ago. Numerous innovative UI controls are popping up as new design patterns are discovered. One of the most demanded controls that requested by our enterprise customers is the Facebook or Dropbox-like multi-selection combobox.

With proper design, multi-selection combobox can help improve user experiences in overall. Instead of using listbox that occupy larger screen real estate, multi-selection combobox allows a more intuitive and efficient way to capture multiple input through type-ahead and automatic list filtering. Considering its compact size and input efficiency, multi-selection combobox is an ideal input pattern for numerous LoB scenarios like capturing multiple roles for a user group, multiple contacts for mailing, multiple items for activation, and so forth.

The upcoming release of ClientUI will include the new UXMultipleSelectionComboBox – joining the advanced ClientUI data-aware component lineups. It doesn’t only come with industrial standards design, but also equipped with powerful architecture such as MVVM binding to the multiple selected items. I’ll unveil the new control entirely in this blog post. Read on.

Editable Multiple Selection

As with every combobox, the multi-selection combobox supports two fundamental input mode: Editable and Non-editable. Editing support with multi-selection is one of the greatest challenges in both control architecture and user experiences design.

First, the control needs to display the selected items and the textbox seamlessly together, while at the same time automatically enlarge the control as new items are selected. And of course, users can delete any of the selected items and the control should adapt its size back to the content.

Second, the multi-selection combobox with editing support does make sense only when the results are filtered as you type ahead. Thanks to the comprehensive ClientUI’s data framework, the server paging is supported through QueryDescriptor.

Many of UX aspects have also been thoughtfully put on the control, mostly the editing experiences such as the Backspace or Delete key should perform different action based on the current selection (whether it’s on the textbox, on the selected item, or in an empty area).

Another nice feature is the smart results filtering feature where the selected items are automatically removed from the result list. This makes sense in most LoB scenarios as users don’t need to see the items already in the selection. See the image below.

Non-editable Multiple Selection

When the IsEditable property of the multi-selection control is set to false, it will automatically show checkboxes in the result list which appears to be the most convenience way for users to capture multiple input in such non-editing mode.

And better yet, you can combine all the new features available in the data combobox lineups along with the multiple selection feature. For instances, you can enable multiple columns, paging and sorting, while continue to work perfectly with the checkbox input.

Full MVVM Support

As you read up at this point, it looks like the multi-selection control has everything you need, from the appearance to the functionality. But wait, how are you going to use it in databound scenarios since the list is paged and retrieved on demand?

Thankfully, UXMultipleSelectionComboBox is built from the ground up to fully support implementation with MVVM pattern. This means that every items that added to the selection via user interface will synchronize to the SelectedItems property. And in the same way, inserting or removing the items from the ViewModel will also automatically update the user interface.

With MVVM support, you can easily bind the SelectedItems property of the control to a collection property in the ViewModel using two-way binding mode. This also allows you to set the initial selected items such as in form editing scenario. See the example code below.

<Intersoft:UXMultipleSelectionComboBox 
         IsEditable="True" DisplayMemberPath="ProductName" SearchResult="{Binding Items}"
         FilterDescriptors="{Binding QueryDescriptor.FilterDescriptors, Mode=TwoWay}"
         SortDescriptors="{Binding QueryDescriptor.SortDescriptors, Mode=TwoWay}"
         PageDescriptor="{Binding QueryDescriptor.PageDescriptor}"
         CanUserPage="True" CanUserSort="True" AutoFilterSelectedItems="True"
         SelectedItems="{Binding SelectedItems, Mode=TwoWay}"
         SelectedValuePath="ProductID">

         ...

</Intersoft:UXMultipleSelectionComboBox.Columns></Intersoft:UXMultipleSelectionComboBox>

And the results will look like the following.

Download ClientUI Developer Preview

In this post, I’ve just scratched the surface of the new multi-selection combobox that we are going to release soon – hopefully in the next couple weeks. For now, I highly recommend you to download the latest Developer Preview to try out many of the UX aspects that I couldn’t express with words. The Developer Preview has been updated to include this new bits along with the new samples. Click here to download the developer preview and experience it for yourself. Enjoy and happy combo-boxing!

Best,
Jimmy Petrus

In the last two posts, I’ve covered many of the new framework features that provide architectural guidelines for building highly extensible and maintainable business applications on Silverlight and WPF. You can check out the first post here which explains dependency injection and IoC containers, and the second post here which unveils the new ClientUI region manager library to implement view extensibility.

Recently, we’ve been working with a number of large clients in migrating their apps to the Silverlight platform. As I’ve mentioned in my previous posts, we can see the increasing demand of Silverlight in enterprises as it provides a true rapid solution for building visually engaging and highly scalable business apps. Check out our recently published Silverlight case study here.

That said, we’re focusing on creating tools that enable companies to succeed in achieving their business objectives with rock-solid and mature solutions today – one that enables them to complete their IT projects on time and on budget. And we’re incredibly pleased to be the part of the succession through the increasing adoption of our toolset in enterprises.

In this post, I’ll share some of the upcoming new exciting tools that were thoughtfully designed to address many challenges that you often find while building business apps.

The very best of ASP.NET WebCombo, now on Silverlight and WPF

Flashing back to a decade ago, Intersoft was founded with only a handful of products, one of them is the WebCombo control for ASP.NET. At that time, web pages are slow and unresponsive due to large view state and postback. There were no AJAX yet – so we invented the very first AJAX-enabled ComboBox with highly efficient data retrieval and blazing fast response which makes it the most popular ComboBox in the industry – till today. Of course, it has evolved over the years and you can try it online here.

Today, I’m very excited to announce that the highly-efficient and advanced WebCombo-like control is now available on the developers’ most loved platform: Silverlight. Meet the brand-new UXPageableComboBox.

The pageable ComboBox includes all the features available in the classic ASP.NET WebCombo, while sports a much appealing user interface, thanks to the rich graphics in Silverlight. Let’s start with the first sneak preview below.

Say welcome back to multiple columns, a favorite feature many of us have missed for a while… And we’ve got a bonus feature for you as well, sortable columns. Note that the multiple columns is a built-in feature now, and is not a workaround that requires heavy re-templating.

And not to forget the image and templated columns as well.

The pageable ComboBox includes a more sophisticated user experiences than the ASP.NET version of WebCombo in the way users make selection and navigate the items. For example, by default only the matched item is displayed when the selected item is set initially. A ‘Browse All’ button will appear providing a visual hint to users indicating they can choose other items by clicking that button, or  by simply clearing the text.

Another nice feature that we manage to put in this release is the watermark description in the text box. This is one of the most requested features in business apps  particularly for the code-value pair input scenario. Think of chart-of-account code input where accountant can input the account code, but still wish to be able to see the account name at the same time. This is now possible in the new Pageable ComboBox, and the best of all – it’s a built-in feature so you don’t have to make any customizations.

New Powerful LoB-centric Features

The upcoming new version is strongly focused on new features that were driven by real-world business scenarios and usage. One of the data components that receives major new features is UXGridView. It introduces advanced features such as columns collection binding,  column header binding, and batch items validation.

In addition, we’ve also added a new rendering mode in UXGridView that allows the empty space to be filled with virtual rows. This new mode is particularly ideal when the Grid is used to display line details such as transactions. If you’ve used apps such as Quick Book, or any Mac apps, you should be already familiar with this feature.

As seen in the above illustration, the grid fills the remaining empty space with virtual rows instead of a blank white space. The virtual rows will grow or shrink automatically as the viewport is resized, and better yet, it works perfectly with row virtualization so you don’t have to sacrifice the rendering performance.

And with the empty space virtual rows, we took the grid further by introducing natural inline editing experiences when adding a new item. This feature activates a new row after the last item of the grid for rapid data addition. Users can simply click on the any remaining space, input the data and cycle through the last cell, and then tab out to the next new row and so forth. Activate this feature in your apps with a simple property set, guaranteed your users will thank you a million!

Furthermore, the items control architecture has been revamped to introduce new capability such as grouping and style-able group container. This means that most of the common controls that derives from items controls such as combo box and list box now supports grouping out-of-the-box!

Imagine the possibilities that you can do with the grouping capability: displaying contact list grouped by type in a list box, or displaying expandable/collapsible groups within the resultbox of a combo box. Thankfully, you can now achieve all those possibilities without any major efforts.

Download the Developer Preview Bits

I hope you enjoy reading my blog post through the detailed feature coverage. And to complete your pleasure, we’ve made the ClientUI Developer Preview available along with the technical samples. Download the developer preview bits today. Explore the technical samples that demonstrate the new controls and features explained above, and test drive it in your apps within minutes.

And by the way, I’ve just received fresh builds from our development labs as I wrapped up this post. I can tell that there are many more new exciting stuff coming down the pipeline, so watch out this spot closely.

Best,
Jimmy Petrus
Chief Software Architect

In my previous post, I’ve discussed about dependency injection and IoC container, and how the upcoming ClientUI release makes it easy for developers to build good quality software. Today I’ll continue to explore the new exciting framework-related features so you can preview these features and try them in your apps.

In this blog post, I’ll particularly focus on the challenges in view extensibility, and discuss the architectural patterns that can be applied to address these challenges.

Understanding View Extensibility

First, let’s get on the same page for the view extensibility definition. Assume that you have an application that shows a list of quick tasks such as illustrated below.

Initially, your application might contain only a few modules such as Customers, Products, and Reports – then define them in the navigation list such as shown above. As you added more modules, you’d have to revisit and modify the navigation list, add the new links and so forth. There are no extensibility points.

In the above case, the ability to add the navigation links when new modules become available without modifying the original codebase is the essence of view extensibility. As you’re becoming more familiar with extensible application development, you’ll realize the real benefits in the way it accelerates your development and minimizes code changes. Not only will your application become easier to maintain and extend, you’ll find yourself building software more fun and enjoyable.

There are two well-known patterns to achieve view extensibility called View Injection and View Discovery.

View injection is a pattern that dynamically inject an element to the target at runtime. The view injection is usually done manually by the controller at a certain event, such as page load. In contrast to view injection, the view discovery pattern performs the injection automatically when the element becomes available in the application life cycle. View discovery is usually implemented with metadata (also known as attribute in .NET) to allow the view to be discovered at runtime. More details on the patterns implementation are discussed in the section below.

Both patterns are commonly implemented with so called Region Manager, which acts as the controller that reside in the application’s shell. A region manager can consist of multiple regions which represent the target placeholder for injection. A well-known library that already provide region manager functionality is Prism from Microsoft, which does the job well but with several limitations.

At a glance, the following illustration shows how the view injection/discovery works together with region manager.

Page-aware Region Manager

As I mentioned earlier, Prism provides several functionality related to region manager. I won’t discuss Prism’s region manager concept in details here, but would like to point out the general principles and overview its differences with ClientUI’s region manager.

Prism’s region manager is built around the concept that centralizes on shell (also known as Root View). This means that you will normally define the region manager in the shell, and define the regions within the shell as well. See the following picture for more details.

While this single region manager concept works well in common scenarios, it falls short on certain scenarios such as multi-page applications. You cannot define the regions within the shell in multi-page application, because the view/content is defined in separate pages, not in the shell. There might be several ways to workaround this using the existing library but that would be less-than-ideal due to the extensive additional code.

With multi-page applications in mind, we built our own region manager to facilitate view extensibility supporting both view injection and view discovery methods. The page-aware region manager is perhaps the most interesting feature in ClientUI’s view extensibility design.

It enables you to simply define the region manager and the associated regions in the pages without needing to know when the regions need to be instantiated or activated. When the page is activated (either through browser journal navigation or navigation link), the defined regions in the page will be automatically filled with the injected view content. This allows view extensibility to be achieved with loose coupling approach.

The following illustration shows the region manager concept implemented in ClientUI.

With page-aware design, our goal is to make modular application development easier and more maintainable. It allows you to simply define the region scope and the regions in each page without concerning when to instantiate or disposing the regions – the framework does it all for you behind the scene.

Implementing View Injection

Now that you’ve got the idea what region manager is about, let’s go further and see how to implement the view injection in ClientUI.

First of all, you define the region manager and regions to the containers that will participate in the view extensibility. The containers can be a simple content control, items control, tab controls, window controls – or any control types that serve as containers.

<Intersoft:UXPage 
        Intersoft:RegionManager.IsRegionScope="True" 
        Intersoft:RegionManager.ScopeName="Home">

    ...

    <Intersoft:GroupBox Header="Quick Tasks">
        <Intersoft:UXItemsControl Intersoft:Region.RegionName="QuickTasks">
            <Intersoft:UXHyperlinkButton Content="View Top Customers"/>
            <Intersoft:UXHyperlinkButton Content="Manage Products"/>
            ...
        </Intersoft:UXItemsControl>
    </Intersoft:GroupBox>

</Intersoft:UXPage>

The example above shows the region manager and scope definition in the UXPage, followed with the region definition for the target container which is the UXItemsControl in this example.

Once the regions are defined, you can now access to these regions using the region manager API. This allows you to instantiate the view element and inject it to the target region from either code behind or ViewModel. Often times, you might want to do the injection in the bootstrapper where the application module is first loaded. Here’s an example.

public class AppInitializer : IApplicationInitializer
    {

        #region IApplicationInitializer Members

        public void Initialize(ApplicationPackage package)
        {
            // add new links to the Quick Tasks region on-demand ("view injection") when this XAP is loaded
            RegionManager manager = RegionManagerService.FindRegionManager("Home") as RegionManager;

            manager.AddViewToRegion("QuickTasks",
                new UXHyperlinkButton()
                {
                    Content = "New Link 1",
                    Foreground = new SolidColorBrush(Colors.Red)
                });

            manager.AddViewToRegion("QuickTasks",
                new UXHyperlinkButton()
                {
                    Content = "New Link 2",
                    Foreground = new SolidColorBrush(Colors.Red)
                });
        }

        #endregion
    }

As the results, when the XAP is loaded, notice that the new hyperlinks will be added to the Quick Tasks control which can be seen in the following illustration.

Implementing View Discovery

Similar to the view injection, you always need to define the region manager and regions in the views that will be extended.

The difference with the view injection is that you don’t write code to inject the element to the target region. Instead, you simply add decorator attributes to the class that will be injected to the target region. When the target region is loaded, it will discover all views that should be injected based on the metadata, hence the injection is processed seamlessly and automatically.

Here’s an example of the view discovery implementation.

[ViewPart("Home", "Overview")]
    public partial class Overview : UserControl
    {
        public Overview()
        {
            InitializeComponent();
        }
    }

The ViewPart attribute above basically states that the Overview class should participate in the view discovery process which target the Home region scope and Overview region.

And here’s the screenshot that shows the application before and after the view is discovered.

Comparing both view extensibility approaches, it’s obvious that the view discovery is the easiest and most efficient way to achieve the view extensibility goal. I’d recommend to use view discovery pattern whenever possible, unless you need to inject the view based on certain conditions or complex business logics.

More Advanced Features

Of course, we’ve only seen the basics of the view extensibility so far. The region manager in ClientUI also provides many advanced features that I couldn’t share in this single post alone. These advanced features include:

• Custom region adapter which enables you to extend the region manager service to your own containers
• Selection control support
• View activation support
• Integration with Navigation Framework

Download Sample Code

At this point, you have learnt the basics of view extensibility and how you can implement it using the API available in the next version of ClientUI. The view extensibility can be very useful if you build applications that allow third-party developers to create add-ons on top of your standard functionality. For an instance, consider a standard customer form shown in the screenshot below.

With view extensibility, third-party developers can extend the existing form by adding new view elements without changing or even recompiling the original apps, see the below illustration.

To preview these new exciting features, we’ve created a complete SDK sample that demonstrates the view injection and view discovery implementation using ClientUI preview builds. The sample also demonstrates how IoC container can be used along with region manager to facilitate really powerful extension capability to your apps. You can download the reference sample here.

In the next series of my blog post, I will do some previews on the upcoming new UI controls and top-requested enhancements. Stay tuned!

Best,
Jimmy

Since its debut two years ago, ClientUI has been designed to facilitate application development toward loose coupling approach. This can be seen from the comprehensive MVVM-ready components and application framework included in ClientUI, then followed with the introduction of Event Aggregator in the latter release. In addition, most of our samples and tutorials are built with the MVVM design pattern as well. In the upcoming releases, we’ll take the design pattern to the next level by introducing a lightweight IoC container which is integrated to many important aspects of the ClientUI application framework.

In this blog post, I’m excited to share what ClientUI has to offer in the next major release. I will focus on the framework enhancements and new advanced library specifically designed to enable you write maintainable code with maximum loose coupling. Before I introduce these new libraries, I’ll discuss the basic purposes of the loose coupling design pattern, so you can see what the new library does, and how it addresses the programming challenges.

Dependency Injection Demystified

Unless you write prototypes or applications that never make it past release 1, you’ll
soon find yourself maintaining and extending existing code bases. To be able to work
effectively with such a code base, it must be as maintainable as possible. One of many ways to make code maintainable is through loose coupling. In short, the main point is that loose coupling makes code extensible, and extensibility makes it maintainable.

One of many techniques to enable loose coupling is Dependency Injection (often called as DI). A lot have been said and written about DI these days – it’s fascinating how most of these literatures make DI sound so complicated, yet it’s really simple in reality. Powerful yet simple. In this blog post, I hope to be able to give a decent and clear explanation about DI and its main concept, and how it differs from Inversion of Control (IoC).

Let’s dive in. Assume you run a new business that started using PayPal as your payment provider. Naturally, you’ll create a website that processes the transactions online, hence the following code.

public class MyStore
{
    public bool ProcessTransaction(Transaction trans)
    {
        PayPalPaymentProcessor paymentProcessor = new PayPalPaymentProcessor();
        return paymentProcessor.ProcessPayment(trans);
    }
}

The code above is very simple and straightforward, and does the job pretty well. First, it instantiates a new PayPalPaymentProcessor class and then call the ProcessPayment method. Nothing’s wrong.

As your business grows, you’d like to switch to different payment processor (or add a new option), let’s pick Google Checkout as an example. To make this happen, it’s obvious that you’ll have to find the piece of code that processes the transaction, modify the code to introduce the new payment option and rebuild your project. You’ll probably come up with the following results.

public class MyStore
{
    public bool ProcessTransaction(string type, Transaction trans)
    {
        if (type == "PayPal")
        {
            PayPalPaymentProcessor paymentProcessor = new PayPalPaymentProcessor();
            return paymentProcessor.ProcessPayment(trans);
        }
        else if (type == "Google")
        {
            GooglePaymentProcessor paymentProcessor = new GooglePaymentProcessor();
            return paymentProcessor.ProcessPayment(trans);
        }
        else
        {
            throw new ArgumentException("Payment processor not supported", "type");
        }
    }
}

Again, there’s nothing wrong with the code above as it does the job pretty well. However, doing the job well doesn’t always mean it has met the requirements to build good applications, for instances, in terms of maintainability and extensibility. In the case above, the code wasn’t really maintainable as you have to repetitively make changes on the same piece of code when you add new payment processors. This, naturally, makes your application more difficult to extend, not to mention if you want to hand over the code to be maintained by different developers.

Architecturally, the main problem with the code above is the referenced dependencies where the MyStore class depends on the concrete payment processor class such as PayPalPaymentProcessor or GooglePaymentProcessor. The concrete type dependency makes it impossible for you to plug-in new payment processors without modifying the code. So what we’re going to do next is take out the dependencies and revamp our code into the following.

public class MyStore
{
    public MyStore(IPaymentProcessor paymentProcessor)
    {
        if (paymentProcessor == null)
            throw new ArgumentNullException("paymentProcessor");

        this.PaymentProcessor = paymentProcessor;
    }

    public bool ProcessTransaction(Transaction transaction)
    {
        return this.PaymentProcessor.ProcessPayment(transaction);
    }

    protected IPaymentProcessor PaymentProcessor { get; set; }
}

Now what do you think? Looks much neater and easier to read, isn’t it? In the code above, the dependencies to the concrete types have been eliminated and replaced by the interface abstraction of the payment processor. The MyStore class now requires the payment processor to be passed in the constructor, which is a common technique known as constructor injection while the Guard in the constructor ensures a valid instance of payment processor is passed, thus ensuring the availability of the payment processor when consumed throughout the methods in the class. Ultimately, this resolution also addresses the extensibility issue as you can now instantiate the payment service externally and simply pass-in the instance.

In essence, the technique of passing (or injecting) the instance (PaymentProcessor) on to the depending class (MyStore) class is called Dependency Injection.

As we’ve just demystified the DI concept, it’s now becoming clear that DI has nothing to do with Inversion of Control (IoC) or any other programming frameworks, although in reality, both are often paired together to achieve the ultimate design goal – “Loose Coupling”.

At this point, still using the payment service scenario above, you will likely consume the MyStore class by instantiating it through manual construction. At the simplest, the code will look like:

public class MainPageViewModel : ViewModelBase
{
    private void ExecuteProcess()
    {
        MyStore myStore = new MyStore(new PayPalPaymentProcessor());
        myStore.ProcessTransaction(transaction);
    }
}

While the code above is much neater and easier to read, there’s still one last problem that violates the law of loose coupling design pattern. Without you realizing it, the MainPageViewModel class (the consumer) now depends on two classes: MyStore and PayPalPaymentProcessor.

Eliminating the dependencies completely in such scenario can be achieved by inverting the flow of control of the system in a way where the objects and its dependency graphs can be instantiated through an external assembler. This technique is called Inversion of Control (further abbreviated as IoC), and that’s where the IoC containers comes into the picture.

IoC Container Comes to the Rescue

IoC is a design pattern that inverts the flow of the application logic, which is achieved through the use of Dependency Injection for its binding process. This approach allows maximum loose coupling where dependencies can be minimized or completely eliminated. This also means that such code allows great extensibility as the concrete implementation can be easily swapped at runtime.

The payment service scenario earlier with the state where it left off is perfectly ideal for our IoC example, so let’s move on revamping our code and see what IoC container has to offer, see the following code.

public class MainPageViewModel : ViewModelBase
{
    private void ExecuteProcess()
    {
        IStore store = Container.Resolve<IStore>();
        store.ProcessTransaction(transaction);
    }
}

To remove dependencies on concrete implementation, one of the common approaches is by abstracting the implementation into abstract class or interface, as shown in the code above. Leveraging IoC container in this piece of code enables us to resolve an instance of the concrete store implementation – anywhere and anytime when required in the business logic flow – without knowing the exact type that contains concrete implementation. This is so powerful because it allows you to change the concrete implementation externally without ever touching this piece of code.

At the heart of IoC container are the Register and Resolve methods, which perform the following:

• Register: Register a dependency by associating the abstract type or interface to the concrete type
• Resolve: Resolve an instance of the dependency by looking up the exact registration in the container

Most of the dependency registrations are usually done in a centralized place, commonly invoked when the program initializes. This centralized place is called Composition Root, which allows you to manage the composition of all components and services in a single place. Using the payment service scenario above, the registration looks like the following.

public class AppInitializer : IApplicationInitializer
{
    public void Initialize(ApplicationPackage package)
    {
        IDependencyContainer container = UXShell.Current.Container; // or new IocContainer() for standalone container;

        // Register the IStore interface to compose a new PayPalPaymentProcessor through a direct construction
        container.Register<IStore>(o => new MyStore(new PayPalPaymentProcessor()));
    }
}

The code above is self explanatory – it registers the IStore interface type to a function that returns a new MyStore class complete with the required dependencies which is the PayPalPaymentProvider in this case.

The IoC container along with a set of comprehensive APIs are the new libraries introduced in next major release of ClientUI. It features full-blown IoC container features yet lightweight enough to deliver high-performing and scalable applications. At a glance, the key features are:

• High-performance object factory
• Abstract and interface type resolution
• Open generic support
• Instance-based resolution
• Lazy resolution
• Named containers
• Lifetime Manager

Integration with ClientUI Application Framework

The IoC container implemented in the ClientUI Framework supports both standalone usage and integration with UXShell. For most common scenarios, it’s recommended that you use the default container instance which is accessible from the shell’s RootApplication.Container property. Using this approach enables you to resolve the registered dependencies anywhere in your code, including the dynamic XAP applications that are loaded on demand at runtime. Click here to learn more about ClientUI Application Framework.

In addition, the application framework now introduces a built-in bootstrapper to facilitate the dependencies composition and registration. Simply add a class that implements IApplicationInitializer interface in your Silverlight project, the Initialize method will be invoked as the application starts. In dynamic XAP scenario, the Initialize method will be automatically invoked when the XAP package is downloaded and loaded to the application domain.

Download Sample Code

In summary, the combination of design pattern best practices – such as MVVM, Event Aggregator, Dependency Injection and Inversion of Control – along with extensible application framework enable you to build great business applications that are easily maintainable and extensible. We see this as important milestones in our development roadmap as we geared our tools toward enterprise and line-of-business apps.

Another important point to keep in mind is that these design patterns aren’t exclusive only for Silverlight or WPF platforms although I picked Silverlight for the samples. We will bring forward these patterns to new platforms as they become available.

To test drive the DI concept and IoC container, I’ve prepared a small Silverlight sample that demonstrates how to achieve good architectural design by implementing Inversion of Control through Dependency Injection. The download package also includes the developer preview version of ClientUI Framework. Click here to download the sample package, and feel free to ask any questions or provide feedback in the comment box below.

In the next series of my blog post, I’ll discuss about several interesting new stuff such as View Regions, View Discovery and View Injection – and how they play well with IoC containers. Stay tuned.

Warning: Do not use the preview Framework assembly in your “live” projects as it will cause version incompatibility issues with the other assemblies in the current release.

All the best,
Jimmy
Chief Software Architect