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.

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

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

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

Navigation Experience Does Matter

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

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

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

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

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

Introducing ClientUI Navigation Framework

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

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

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

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

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

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

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

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

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

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

Top Feature #1 – Solid Navigation Interfaces

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Top Feature #6 – Friendly Error Page

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

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

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

Top Feature #7 – Busy State Management

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

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

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

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

Full Compatibility with WPF

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

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

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

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

Summary

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

Live Demos

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

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

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

What’s Next

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

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

Seeing this great need and opportunity, we at Intersoft began to research for the best concept which extends far beyond to those available and widely used now days. Put it simple. We promise you a list box control that is easy-to-use, powerful in features, rendered reliably in various browsers, plus its comprehensive set of client-side and server-side events and APIs bring a new level in web programming.

Data Entry Control

Intersoft’s WebListBox is designed to cater the need for an all-around list box control coping diverse data entry needs, for example: in a form which requires list box item with image or the ability to select more than one item.

Essential Customization

Let’s start with the basic. WebListBox provides additional setting for adding an image to each item. You can display text, text and image, or image only. Additional setting related is the image positioning. When using the text and image mode, you can change the image position relative to the text, for example: above or below the text and after or before the text.

All of the above settings can be made under LayoutSettings group property for global application. Or, you can use individual item’s properties for more personalized setting.

Scroll Mode

Scroll mode is provided to anticipate having many items in WebListBox exceeding the container’s height. The common practice is to use scrollbar. WebListBox offers several scroll options, ScrollBar, Scroller, or None.

As the name implies, ScrollBar mode uses the default browser’s scroll bar. Users can simply move the scroll bar to see the hidden items. One that worth mentioning is that the ScrollBar is also styled according to the selected predefined styles. This gives a more polished and uniformed look on WebListBox.

Instead of using scroll bar, Scroller mode adds up and down buttons located on the top and bottom of the control. Users only need to stop the mouse cursor on top of it and it will start scrolling immediately. This option is fancy, but the usability in a WebListBox with many items isn’t very effective.

The None option simply disable the scrolling feature and prevent users from seeing any hidden items.

Selection Mode

The result of user’s interaction with any list box controls is selection. WebListBox provides two selection modes, single and multiple, configurable through a property set. When multiple selections feature is enabled, users can use the CTRL or SHIFT key to select more than one item. Or, simply click and drag the mouse. As the mouse touches the bottom or the top most part of the control, the item will be scrolled and selected immediately.

Data binding Support

Its comprehensive data binding capability unlocks more possibility for you to deliver a sophisticated list box control targeting enterprise applications by connecting your existing data to WebListBox by simply assigning the data source ID. Supporting dozens of datasource controls, WebListBox’s user friendly Component Designer 2 lets you access all data binding properties.

WebListBox also support unbound mode, which basically allows you to add items manually.

The Smart Navigator

List box as a navigation control may sound uncommon, yet we manage to fit it quite nicely in our upcoming Support Site 2010.

When a list box item is clicked, the page will be loaded on the right IFrame. You can specify the target in TargetWindow property for global application or [Item] >> TargetWindow for individual customization. Use the TargetURL property to specify the URL.

Additional visual hint feature, called active item indicator, provides users a quick glance on the control and spot the active item instantly. Ultimately, WebListBox enhances navigation experiences with both visually appealing design and intuitive interfaces that meet industry’s usability standards.

Summary

With all the bells and whistles, WebListBox is a full-fledge control that packs innovative features, pleasant visual interface, and a developer-friendly designer window, that no similar solution can barely touch. It will surely satisfy most developers’ need and goes along very well with most business Web-applications.

Stay tuned for more as we will update you with the latest and hottest news directly from the development kitchen.

As promised, this fourth series of my blog post will highlight on the user interface and usability aspects of our ClientUI family components.

Being used extensively mostly in the software industry, the UX (User eXperience) has became one of the most popular buzzword in the past few years. As an application developer or a designer, it’s critically important to have a solid understanding on UX before you’re able to produce an efficient, highly usable application. The coverage on UX definition is beyond the scope of this post as UX alone incorporates a wide range of disciplines such as usability, contextual user analysis, user-centric design, card scoring and more. One thing for sure is that UX is not equal to UI, Vibor Cipan shares his thought. To learn more about UX in general, check out several good resources in this blog post for your starting point.

To keep our subject relevant, this post will be primarily focusing on the relation between Silverlight and UX, and their usage pattern in line-of-business application.

The UX in Silverlight

In general, Silverlight is a modern web application framework that enables you to build RIAs with richer graphics and stunning animations and hence resulting in a better user experience. In the scope of key business scenarios, unfortunately, Silverlight is seriously lacking numerous fundamentals which dramatically limiting developers and designers to create applications that are both rich and usable. The context of usable here refers to the implementation of usability standards required to deliver effective and intuitive user experiences.

Rich UI doesn’t always mean it’s usable. Think about a glossy button-look-alike shape that doesn’t behave like a button. For instances, it doesn’t initiate an action, doesn’t have pressed visual or can’t be accessible through keyboard. Or a shiny window-look-alike panel that can’t be moved nor resized. Many of the cases like these can be found in today’s web applications which merely geared toward “richness” and often overlooked the key goals of the UX itself, the usability. Silverlight, unfortunately, is no exception.

Unlike in WPF, Silverlight doesn’t support keyboard focus visual (distinct it with logical focus) and accesskey shortcut even in its latest release. Although seems simple, this accessibility issue alone already introduces numerous limitations that reduce the usability of the produced application. Silverlight application developers often ended up spending more time and effort to find the workaround and write more codes to achieve basic usability features.

When trying out a new business sample solution that shipped with Silverlight 4, I found a more realistic example that illustrates the lacking of dialog usability standards in Silverlight. See the following.

Does the above dialog look rich? Considerably yes – compared to traditional HTML. Does the above dialog meet usability standards? No. Here’s why: (refer the point below to the red-marker above)

1. Users should be able to interact with a Combobox (or a dropdown list) through keyboard, for example, opening the selection list by pressing Alt+Down or F4 key. After the list is opened, user should be able to use keyboard arrows to navigate between items and then press Enter or Tab to commit the changes. None of these interactions are supported in Silverlight.
2. Default command/action should be highlighted to give visual feedback to users which command will be initiated when Enter key is pressed. The highlight visual hint and default command are not supported as well.
3. Cancel command should be easily initiated through a standard interaction manner such as when users pressed the Escape key. Silverlight doesn’t respond to the Escape key in either the button or the dialog.
4. The dialog doesn’t support basic features that a standard GUI dialog control should have, for example, you can’t close the dialog box by pressing Escape or a combination of shortcut key – such as Ctrl/Alt+F4 as in standard Windows GUI.

At this point, you might be raising questions like these: Does the above seem-too-simple UX issues really matter? Does my users really care about that? The answer is obvious as the multi-part ISO standard 9241 part 4, 15, 20 and 171 suggested. Some industry’s UX research such as Norman Group has published hundreds of usability reports that emphasizes the importance of good user experiences design in business RIA apps.

Great UX Design Made Easy

In the beginning of this post, I’ve mentioned that UX is not identical to UI (or UI controls) – which many developers and software vendors mistakenly mixed them up. UI simply provides a mean or a medium for users to interact with the system, particularly your application, while UX encompasses all experiences as a whole – it’s all about how users feel before, during and after using your application, product or service.

As a third party vendor specializing in UI component for Microsoft platform, we put the best of every effort to implement the standards and best UX practice and guidelines in our products – this is what sets us apart from other solutions. In fact, we’ve been heavily investing on good UX guidelines since our last year’s volume release.

To achieve great UX, designer team require advanced tools to enable them achieving their key objectives in dramatically less time with less effort. ClientUI is built from the ground-up to meet the most demanding UX requirements which includes numerous implementation of usability features based on platform standards hence delivering good UX design in the form of ready-to-use components. In short, we provide solutions and tools that empower UX designers to accomplish their projects faster in a consistent and efficient way.

The following section highlights the key UX guidelines that we’ve implemented in our ClientUI according to the ISO Standards 9241 which is concreted in several implementations that we can easily find today such as in Windows GUI or in Macintosh GUI. These implementations are especially important for the Silverlight counterpart of ClientUI as they were not natively available in Silverlight.

Keyboard and Focus Visual Support

The input controls and button family in ClientUI implement keyboard focus identical to the platform standards such as in Windows and WPF. The keyboard focus is one of the most fundamental UX required to help users easily recognize and understand the focus of primary input device during data entry process. Silverlight 3 introduces logical focus support, but not keyboard focus.

The following image summarizes the keyboard focus support in ClientUI’s input and button controls.

As noticed in the image above, the dotted rectangle represents the visual hint for the keyboard focus. It’s also important here to distinct between logical and keyboard focus. The keyboard focus visual will appear only when users navigate using keyboard, such as using Tab or arrow keys.

To make keyboard focus works in consistent manner, we provide the Keyboard and FocusManager architecture similar to WPF. This enables you to build interoperable Silverlight and WPF applications with consistent user experiences using the same codebase.

Note that the keyboard focus is automatically enabled by default and doesn’t require any further configuration.

In addition to the keyboard focus, certain input controls – such as radio button and toggle button – also support special grouping behavior that based on a focus scope. This grouping behavior enables radio button to automatically deselect the other radio buttons in the same scope thus enabling intuitive input process as suggested in HIG platform standards. Refer to the following image.

The self-explanatory image above shows the focus scope implementation in ClientUI which is essential to appropriately manage the input and grouped selection. ClientUI will ship with several containers with built-in focus scope such as GroupBox and ExpandableGroupBox.

Keyboard Navigation Support

Since version 3, Silverlight includes basic support for keyboard navigation, that is tabbing between controls using Tab key is now possible. However, the Silverlight implementation limited only at the logical focus surface. ClientUI takes the keyboard navigation further by implementing keyboard focus that doesn’t interfere with the logical focus to comply with usability standards.

One of the most remarkable implementation of keyboard navigation support is related to controls that support menu and popup such as dropdown button (or also known as menu button), split button, toolbar button, menu bar, context menu, and more. Let’s pick dropdown button for example, the dropdown button should remain the logical focus in the main container scope regardless of how users interact with the items in the dropdown (i.e, either through keyboard navigation or mouse).

The correct implementation of logical and keyboard focus produces consistent navigation experiences either when using keyboard, mouse, or other input devices. The following image illustrates how logical focus and keyboard navigation works in a dropdown button control.

Achieving the implementation such as shown in the image above is not as simple as it seems due to the limitation and lacking of architectural support in Silverlight. Thanks to the comprehensive architecture in ClientUI that provides complete routed event, keyboard and focus manager implementation – it enables many key challenges in the UX to be elegantly implemented.

Moving a step further is how we deal with menu navigation specifically in menu bar. A menu bar UI that complies to usability standards should support not only a basic keyboard navigation, but also how it deals with the submenu and event bubbling mechanism. The following illustration shows you a complete picture of comprehensive keyboard navigation implementation in ClientUI’s menu bar.

In addition to the fundamental controls such as shown above, more advanced ClientUI controls such as stack button and dock button are implementing identical usability guidelines as well, thus creating elegant and consistent user experiences across your applications.

The following image captures the stack and dock button with keyboard navigation and focus visual.

Rebuilt from the ground-up, UXDock (formerly WebFishEye) now incorporates the same usability standards that we applied in the other fundamental UIs such as dropdown button or menu discussed earlier. We even take the UX for particular flagship components such as UXDock and UXFlow to the next level by implementing some extent of UX guidelines according to Apple Human Interface Guidelines, specifically when it comes to drag and drop, animation and UX consistency. ClientUI is designed to meet both Windows and Apply HIG by default. I’ll dedicate a special post covering the similarity and difference between the both – and how we built ClientUI to elegantly support both HIG.

A bit off topic – while we’re at  dropdown buttons and menu subject, it’s noteworthy to briefly mention how developers or designers actually use them in the design/development process. One thing that I really liked about ClientUI – apart of many exciting design and runtime features discussed above – is how we built the object model to take advantage of semantics pattern. Using such pattern truly reduces learning curves and makes development much easier and more intuitive, for example, think about menu item semantic regardless of the visual presentation you wish to use.

A menu item – the way we see it – is a fundamental object that represents a visual that either initiates an action when clicked, or displays sub menu when it has items. That said, menu item can be used more generally and should support arbitrary visual hosts. Based on this concept, we specifically design the menu item to be highly adaptable and transformable based on the host – this allows various menu containers to use the same menu item semantic in its implementation. The following image shows how the menu item semantic is elegantly consumed in various visual hosts.

That’s cool, isn’t it?

In addition to MenuBar, DropDownButton and SplitButton, the same MenuItem semantic is also used in ToolBar, ToolBarButton, StackButton and ContextMenu. I’ll discuss more about StackButton and ContextMenu later.

Access Key Support

Access key is also one of the most crucial requirements in platform-standards user experiences that designed for users to quickly perform an action by pressing a shortcut or also known as access key. Unlike WPF, Silverlight completely miss the support for access key. Hence you won’t be able to easily do something like pressing Ctrl+O to show a dialog box or Alt+F to open File menu – which again, is a must-have requirements particularly in line-of-business and productivity applications.

ClientUI pushes the standards beyond Silverlight by making available access key in its various UI components. The following highlights some of the ClientUI components that implement access key.

Input Gestures Support in Routed Command

In my previous post, I’ve discussed about routed command support in ClientUI and how it can be applied to MVVM pattern using CommandReference. In this post, I’ll cover the UI part of the routed command and its relation to access key.

The following diagram illustrates the relationship between command, command bindings and input bindings.

As seen in above illustration, you can think a command as a logical unit that identifies an action, such as Open, Save, or Close action. This modern routed command concept which originally introduced in WPF doesn’t include implementation by default – so it’s an arbitrary identifier of an action which can be easily reused across your application. The real implementation that handles the command is done at the command binding level. To learn more about routed command, see Four Main Concepts in Routed Command.

Presuming that you now have a couple of commands with proper bindings in your UI, you can easily associate a key gesture to each command. Keep that simplicity in mind, when you run your page in the browser, pressing the key gesture will automatically execute the associated command – without any single line of codes. This is how the access key for command shortcut becomes possible in ClientUI for Silverlight.

With all its power, the routed command however won’t be so much useful without consumers that can take advantage of it. Since Silverlight doesn’t support routed command infrastructure, sadly none of its controls can take advantage of the routed command that we brought into Silverlight. Conversely, ClientUI will ship with more advanced UI fundamentals – such as buttons, dropdowns, menus, tool command, and bars – that fully support routed command. As such, ClientUI controls can enjoy the power of input bindings as well – enables you to achieve consistent access key support across your application.

The above picture demonstrates the usage of routed command and input binding in Contacts sample application that I showcased in my previous post.

Access Key Support in MenuBar and ContextMenu

In addition to the shortcut key support available in buttons, dropdowns and menus – ClientUI also implements special access key support required in certain UI components such as in MenuBar and ContextMenu.

Starting from Windows Vista, Microsoft added to their UX guidelines a new way to discover the access key (also known as mnemonic key in Winform and WPF). For instance, the earlier version of Windows will show an underline to the access key of a command or menu item such as File, Edit, etc. The last two versions of Windows will show the access key only when you pressed the access modifier keys which is the Alt key in Windows. ClientUI’s menu bar supports both mechanism.

The following screenshot pictures a menu bar that used automatic access key visibility.

As seen in above image, ClientUI’s menu bar satisfies the comprehensive menu access key requirements in platform-standards UX which stated that the first menu item should be selected if the access modifiers is pressed without the access key (see the marked red point above). In this context, the menu bar should already enter modal mode (see Input Modality in latter section) which allow users to press “v” to access the View menu, “h” to access the Help menu and so on.

In addition to the visual part, the most important aspect is the real implementation of the access key. Thanks to the solid focus scope implementation as discussed earlier, the access key in menu bar could be consistently processed when the current focus is within the same focus scope as the menu bar.

The following image illustrates how access key works in menu bar.

Please note that the Alt key can’t be used as access modifiers when a Silverlight application is running in browser. In this case, you can configure the access modifiers through AccesskeyModifiers property and set it to Control+Alt or other possible combinations.

Identifying a character as the access key is as easy as adding an underscore (_) character in the front of the designated access key, for example, _Edit will automatically identify the "e” character as the access key for that particular menu item. The use of underscore semantic is compatible with the WPF counterpart of menu implementation.

Access Key Support in CommandBar

Another ClientUI component that also implements access key support is the CommandBar control. The command bar is commonly used in dialog box, message box or a window that hosts a set of command buttons.

The image above shows a message box with predefined YesNo commands. Users can quickly access a command by pressing the first character of the command, i.e, “o” in OK, or “c” in Cancel. The same behavior is also consistently implemented in platform standards such as Windows or Macintosh.

Default Command and Visual Feedback

To create rich and consistent user experiences that follow standards-compliance design discipline, simply having aesthetic dialogs and form controls aren’t enough. We also make available several exciting features related to commanding such as default focus and visual feedback to the Silverlight platform.

A default command, when correctly implemented, should be the default action to be initiated when users pressed Enter key anywhere in the form, particularly within the input controls. Furthermore, a default command, according to platform-standards guidelines, should have unique visual presentation to distinct itself from other commands. This allows users to intuitively recognize the default action when they committed the changes. The following shows how Windows and Mac implemented the default command mechanism.

Similarly, ClientUI implements the default command mechanism in all its button family. The following illustration describes ClientUI’s default command implementation in more details.

As seen in above illustration, a default command implementation that follows platform-standard UX guidelines isn’t as simple as it seems to be. That’s because the implementation involves a lot of details related to logical and keyboard focus and primarily the user interaction. Built upon its bare-metal architecture, ClientUI satisfies all these comprehensive implementations required in such a default command pattern.

Input Modality

Input modality is one of the most fundamental UI architectures that has been long adopted by popular platforms such as Windows and Mac. Unfortunately, I found out that today’s RIAs typically overlooked this architecture thus delivers impoverished applications that fail to provide consistent user experiences.

Despite the various theoretical definition of input modality, the simplest way to understand input modality is to see and experience it yourself. The most common implementation of input modality can be often found in dialog boxes, menu, and popup. When the UI requires a sole user focus, the UI routes all input events to that particular UI elements allowing users to easily focus on a specific single task, for example, when selecting a command from a menu, the user input is modal to the menu element. The following image illustrates the input modality example in Windows, Mac and ClientUI for Silverlight.

The input modality mechanism becomes more complicated when there are multiple UIs that require user focus. In this case, the precedence of modality should be applied to determine which input should be first processed. This scenario can be often found in multiple window interface applications where a window should be less modal than the taskbar UI, and the taskbar UI should be less modal than menu or popup. The picture below shows how the precedence in input modality is consistently implemented in platform standards such as Windows and Mac. And  yes ClientUI – too.

As mentioned in the self-describing illustration above, rich user experiences emphasize on look and feel that behaves consistently throughout the applications – the one that users feel comfortable and intuitive to work with – before, during and after the use of the application.

Ultimately, input modality increasingly becomes a popular subject as modern UI platforms such as WPF and Silverlight are gaining converts from traditional line-of-business application developers. While Silverlight completely overlooked many usability implementations required in modern business apps, ClientUI comes to rescue by offering a wide range of ready-to-use tools that already meet the strict usability requirements of platform standards – which includes keyboard support, navigation, access key, default focus, input modality and much more.

Summary

User experiences, particularly in the scope of software applications, is a wide subject that can’t be learnt overnight. In this already-long post alone, I’ve cut-down three other sections and only managed to detail the first four sections of the key UX aspects that we implemented in the forthcoming ClientUI 2010. However, at least I hope you’ve got a clearer picture on UX in general, the benefits and the reasons why you should care about it.

To wrap up this post, I’d like to show the ClientUI version of dialog box and form controls implementation, as opposed to the Silverlight version that I described in the beginning of this post. ClientUI truly takes Silverlight apps to a whole new level with multitude of UIs that aren’t just rich, but also strictly complies to the usability and guidelines according to human interface’s ISO standards. The following is a edit dialog that you’d found in common LoB apps – but this one with 100% compliance to Windows 7 Human Interface Guidelines (HIG).

As I’ve revealed in the first four series of my blog, you may already discover the key potential of ClientUI particularly for Silverlight development. True, ClientUI 2010 will include tons of exciting features that seriously help you get into business – whether you’re a software architect, application developer or a senior UX designer.

There are still a lot of exciting aspects of ClientUI that yet to be revealed which I’m planning to write in the next couple posts before ClientUI goes official sometimes next month. If you have any feedback or questions regarding UX, usability or anything related to this post, please feel free to submit your comment.

Last but not least, I hoped you enjoyed reading this post. Thank you for your time and stay tuned for the next series!

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