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

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

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

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

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

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

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

9. Customer Details with Rich Editing Form

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

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

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

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

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

7. Rich Text Editor with Consistent Commanding Interface

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

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

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

6. Hotel Selector with Dazzling Flowing Interface

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

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

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

5. Stepped Wizard-style Setup Form

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

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

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

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

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

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

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

3. Flickr Photo Browser

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

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

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

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

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

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

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

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

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

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

1. The ClientUI Control Explorer

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

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

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

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

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

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

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

Summary

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

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

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

All the best,
Jimmy.

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

• Download ClientUI RTM
• Read 2010 Press Release
• Discover What’s New in 2010
• Learn More About ClientUI

ClientUI.com Is Live

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

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

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

Click here to start your ClientUI.com experience.

New ClientUI Showcase

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

Click here to visit ClientUI Showcase.

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

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

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

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

Even More Controls in RTM

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

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

UXScrollViewer (New Control)

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

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

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

UXComboBox (New Features)

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

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

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

UXSearchBox (New Control)

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

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

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

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

To try the new UXSearchBox, head to UXSearchBox Samples.

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

Get Started with Your Next Rich User Experiences

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

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

• Contacts MVVM Sample
• Business Navigation Sample
• Desktop and Window Sample 

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

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

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

All the best,
Jimmy.

If you are an active subscription license holder, head to dev2.intersoftpt.com and download a copy now. Prospects can request for 30-day free trial here.  While waiting for the installation, please head to live.intersoftpt.com and explore the 50 new samples based on real-world business scenarios.

Don’t forget to visit clientui.com, a sister site dedicated to the latest masterpiece, ClientUI. It covers detailed information about ClientUI, from architectural overview, the benefits, to multitude of business samples.

Last but not least, if you have any urgent questions about this release, pricing, licensing, or anything else, feel free to contact our 24-hour hotline at 1-310-914-0158. Alternatively, you can email Intersoft Sales.

We hope you enjoy this release.

For those who haven’t downloaded the RC, I strongly suggest you to grab one here and test drive it yourself. Feel free to compare it with competing products and make your decision wisely. Should you have any questions or doubts, our friendly Sales team is ready to assist you.

On every product release, the real deal is always about how many new components it delivers or what new technology does the new version of an existing product support. And the results we usually expect are how it handles a massive amount of data swiftly, how it simplified a complex navigation system into a user-friendly one, etc.

Often times, we are too focus in those areas and eventually forget the rudimentary aspect. A third-party control should deliver innovative features which work out-of-the-box and easy to be implemented in business or real-world scenarios.

Starting this release (2010 RC specifically), several basic project templates are bundled to help you get started your mega-sized project quickly leveraging the powerful WebUI Studio products. These templates are installed automatically and are available from the new project dialog.

Select your desired platform and you can see the available templates. Or, click on Intersoft Solutions node to see all templates. This blog discusses the ASP.NET template only.

Empty Web Site Template

Let’s start with the basic, select “Intersoft Empty Web Site”. As the name implies, this template only have a blank default.aspx page. However, all essential assemblies are included inside the bin folder. The Web.config has been preconfigured to run at the most optimal setting. Simply said, you can drag-drop any controls to the designer and run it immediately. No more annoying SmartWebResources error message or any error messages.

Above is inside the Web.config. In addition to the SmartWebResources, several settings are inserted, such as: WebGrid’s exporting and Pivot Chart feature.

Basic Web Site Navigation Template

As the world’s internet population increases, the number of new website – and web application – grows rapidly every day. This is a challenging situation for every website owner, not only he has to provide great and updated content, but also well-defined and easily-spotted navigation. No one wants visitors to leave the site just because they can’t navigate to a specific page.

This is what we want to focus, by providing a basic template with predefined navigation infrastructure so that you can focus on building the content. This template includes several dummy pages linked to a master page.

The master page contains a list box control with predefined items. When clicked, it will redirect you according to the clicked item. Switch to the master page’s code behind to learn in details.

To connect a new page, you need to add a new aspx and linked it to the master page. In the aspx.cs, set the selected index to a specific number. In the master page’s .cs file, add a new case method according to the selected index. Next, add a new WebListBox item and set the necessary properties.

Assuming that your new page is MyNewPage.aspx and the selected index is 5.

Here is the result in IE8 browser.

Business Scenario Template

WebUI Studio is after all geared toward the development of powerful line-of-business applications with intensive data processing and extensive usage. Two business scenarios templates are available in the RC currently, a scheduling website template and an enterprise data management application.

Powered by WebScheduler, the scheduling template provides a very solid foundation for starter. It features WebPaneManager with vertical horizontal layout separation, WebNavPane to host the navigation item, a basic registration form, and a fully-functional navigation. Like the other two basic templates, all business scenarios templates include complete assemblies and preconfigured Web.config.

WebScheduler is also preconfigured with default settings and attached to a dummy database. You can later customize the field to meet your requirements.

The next template focuses more on data management using WebGrid bound to Northwind’s [Customer] and [Employees] tables. Most basic features are enabled, such as: filtering and paging. Instead of using the built-in editing feature, the “add new row” feature is done in a separated form.

Conclusion

These project templates are designed as a generic solution for WebUI Studio and Visual Studio 2010 developers so that you can enjoy a seamless development process without having to deal with advanced project configuration. It also gives you the basic idea of what you can build and deliver with WebUI Studio lineups. In the future, more creative templates will be added. What business templates would you like to see? Voice it out now.

Download WebUI Studio 2010 RC now and start using the above template. If you have any further suggestions or questions, feel free to post in Intersoft Community.

Regards,
Jemmy.

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

Toward A Better RIA Application Model

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

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

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

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

The following illustration compares the SDI and MDI presentation pattern.

The Desktop and Window Experiences

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

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

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

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

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

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

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

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

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

Meet UXDock – the Revolutionized Dock Experiences

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

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

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

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

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

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

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

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

The Ultimate RIA Experiences Comes To Life

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

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

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

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

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

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

• Launch local XAML applications.
  The most basic operation in a MDI pattern application is to display a window that hosts its application content. The way we built our MDI architecture enables you to add windows and launch them in rapid fashion through your preferred IDEs – either Blend or Visual Studio 2010.
• Launch external applications.
  A more advanced MDI application such as a composite application definitely requires a consistent approach to launch a window that located in an external package (XAP), a technique that some MVVM guys called as Dependency Injection (DI). We took it to a higher abstraction where developers can naturally think external packages as “applications”, much like the application that you can download from Internet and install it in your Windows or Mac OS. This way, you don’t cope with tedious attributes or dozens of interfaces to satisfy – just a simple location discovery would do.

  In a correctly designed ClientUI app, you can even load the external “application” to the UXDesktop without code changes. You can try this later in the demo app that I put together in the end of this blog post.

• Navigate to XAML pages.
  In addition to launching an application window, you can also navigate to an UXPage instance that resides either locally or in other packages. When the UXDesktop detects that the specified target is a valid UXPage, it’ll host the page content in UXNavigationWindow instead of standard window. Many of the navigation features that I described in the part 5 of my blog series will work consistently in the UXNavigationWindow.
• Minimize windows to a certain location in the Taskbar. 
  As well as supporting the basic operations such as described above, our loosely-coupled MDI architecture also supports full-featured window management tasks. This includes minimize, maximize, restore, launch and close operation of a window, which should be well integrated to the task bar. For instance, to properly achieve minimize operation, a task bar needs to provide information on the exact position where the window can be hosted.

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

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

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

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

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

See It In Action

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

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

Build Your Own

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

Step 1: Create New Desktop RIA Silverlight Application

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

Step 2: Add New Window

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

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

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

 

Step 4: Run Your Project

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

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

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

Summary

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

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

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

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

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

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

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

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

Download Intersoft ClientUI 3 RC

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

Select Platforms

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

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

Read the Getting Started

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

Explore The Samples

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

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

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

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

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

Create Your First ClientUI Silverlight Project using Visual Studio 2010

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

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

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

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

Experience First-Class Designer Support

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

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

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

Enjoy a whole new level of RIA development experiences!

Get Started with Your Business Application Project in 5 Minutes

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

Get The Support You Need

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

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

The Promised Demos

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

More Coming Next

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

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

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

Welcome to the future of RIA experiences. Stay tuned…

All the best,
Jimmy.