Tag Archives: Enhancements

Enhanced ClientUI Navigation Framework for WPF

In my ClientUI blog series last year, I have covered the importance of navigation infrastructure which makes the application’s overall user experiences. There were many other details that I described in the blog post, including our support for nested navigation, easy role-based security configuration and more. You can read about them in my blog post here.

While the previous blog post gave impressions that the navigation framework was designed only for Silverlight, I would like to clarify that it is not. The ClientUI navigation framework supports both WPF browser and WPF desktop application very well since its initial release last year.

In this blog post, I will explain the essence of creating navigable desktop application, and tour the ClientUI navigation framework in WPF.

Navigation in Desktop Applications

When you hear about the ‘navigation’ term, what’s quickly popped up in your mind would be it’s a browser application. That’s true, navigation has always been always associated to the browser and the web. Unfortunately, many developers today disregards navigation infrastructure in desktop applications, and thought that the navigation is irrelevant in the desktop context.

As much as developers talk about desktop-style web applications, the fact is that desktop applications are revolutionizing toward web-style user interface. And one of the most prominent aspects in a web-style interface is always the navigation – it exactly means that content must be easily navigable. Surprisingly, you can easily find the kind of navigable desktop applications almost anywhere in your daily computing life, from Windows 7’s Control Panel and IIS Manager, to Windows Media Player, iTunes, and more.

Let’s take a look at Windows 7’s control panel interface for a clear picture of a navigable desktop application.

Windows 7 Control Panel

Based on the above illustration, there are at least five great benefits for building navigable desktop applications:

  1. Journal management.
    When you see Back and Forward (also known as Journal) buttons, you can quickly tell that it is a navigable application. The journal management allows users to easily navigate back and forth to the previously visited content.
     
  2. Direct content access.
    One of the best things about navigable interface is that it allows users to navigate a specific content directly. This is usually done through a simple breadcrumb, or a menu address bar such as introduced in latter version of Windows.
     
  3. Multiple content source.
    In a navigable-designed application, you can facilitate users with easy navigation from multiple sources, be it the address bar in the top, the hyperlink in the left pane, or just about anywhere else. This allows users to navigate the applications in the way they accustomed to.
     
  4. Searchable content.
    By designing your application to support navigation, it is easy to provide a search interface, allowing users to quickly finding the content they desire. Most traditional applications that don’t support navigation would face technical difficulties and limitations since there are no consistent interface that manages the entire navigation processes.
     
  5. Reusable content.
    Last but not least, a well-designed navigation application will refactor each navigable content into a reusable form, allowing the content to be easily accessible directly, to be linked from multiple sources, and to be searchable. In development terms, the reusable content means easier to extend and better maintainability.

Creating WPF Navigation Application with ClientUI

Now, I hope that I have well pointed out the main reasons why navigation is crucial for making a great user experience, regardless of whether it’s browser-based apps or desktop apps.

One of the features that set ClientUI apart is its powerful, thoughtfully-designed navigation framework. The main building block of the navigation framework such as the UXFrame and UXPage, implements unified API between Silverlight and WPF. This allows you to use the identical XAML markup between both platforms, which greatly minimizes the learning curves. Learn more about the fundamental of ClientUI navigation framework here.

You might be wondering what it means with unified API in my previous statement. The easiest way to understand it is to take a piece of Silverlight’s XAML code and paste it to the WPF. In this case, try to copy the Silverlight’s built-in Frame element and use it in WPF, then see if you can run the project without errors. Clearly, the compiler will stop you as soon as you pressed F5.

The biggest challenges we faced in the WPF counterpart of ClientUI’s navigation framework is to come up with features to match the Silverlight’s counterpart, such as the URI mapping and mapped navigation source mechanism. URI mapping is a very nice feature that allows you to navigate to a content via a short and friendly address, instead of a lengthy one, for instance, navigating to a customers page can be done with a /Customers identifier instead of /Views/Customers.xaml.

The UXFrame element, which is the core of ClentUI’s navigation building block, supports URI mapping, thus enabling you to define the XAML such as the following.

<Intersoft:UXFrame Name="ContentFrame">
       <Intersoft:UXFrame.UriMapper>
             <Intersoft:UriMapper>
                  <Intersoft:UriMapping Uri="" 
                             MappedUri="/Views/Home.xaml"/>

                  <Intersoft:UriMapping Uri="/{page}"
                             MappedUri="/Views/{page}.xaml"/>
              </Intersoft:UriMapper>
       </Intersoft:UXFrame.UriMapper>
</Intersoft:UXFrame>

But, the URI mapping support doesn’t happen overnight. The main process of the mapping itself needs to be enhanced at the core framework level, because the navigation can be initiated through hyperlinks, buttons, toolbar buttons, or programmatically through APIs. For a quick illustration, the navigation framework should understand the mapped navigation request from a hyperlink such as shown below.

<Intersoft:UXHyperlinkButton NavigateUri="/Customers" />

In summary, the ClientUI navigation framework for WPF does not only include an enhanced navigation Frame, but a whole new navigation framework that spans from the core architecture to navigation sources and other advanced navigation features.

To help you quickly getting started with ClientUI navigation framework, I have created a simple WPF navigation application that you can use as a template. See the following illustration.

ClientUI navigation application for WPF

As seen in the above illustration, ClientUI navigation framework provides all the tools you need to create rich navigation user interface, including the journal button, navigation button, direct content access through hyperlink and other navigation sources, and more.

The navigation application sample above also demonstrates a number of unique features, such as page transition and automatic navigation direction. You will notice that new navigation would apply a fading transition effect, navigating backward would apply a fly-in effect, while navigating forward would apply a fly-out effect.

The navigation sample project consisted of the start up page, and three pages that represent the content for Home, Settings and About. The ViewModels classes are also included for your convenience.

ClientUI navigation project

Download the sample project here, feel free to play around and enhance it, and use it to start your next WPF navigation application. Note that you will need the latest ClientUI build (4.0.5000.3), more about the hotfix in the later section below.

Silverlight Out-of-Browser, Well Supported

One of the area in Silverlight that cross the desktop boundary is its out-of-browser application support. Along with the coverage for navigation in WPF desktop application, I’m pleased to share that the ClientUI navigation framework also supports Silverlight’s out-of-browser in all its glory – the URI mapping, visual transitions, automatic navigation detection, role-based security, and more. Here’s a snapshot of the OOB support.

image

Best of all, download the Silverlight OOB project sample here. Have fun with it!

Get the Free Update

In case you haven’t aware, we recently posted the January ‘11 hotfix for ClientUI, which includes significant enhancements to WPF navigation and other stability fixes.

image

To see the complete list, please head to Intersoft Support Center – Version History.

The hotfix is free for existing customers, which can be easily downloaded and installed via Intersoft Update Manager. If you haven’t used Update Manager before, make sure you check out this article.

In the next post, I will detail more about “nested navigation” and “global navigation state” in desktop applications, which explains the design decisions why URI mapping has to existed in the first place. For now, enjoy the latest hotfix, download the project samples and happy navigating!

All the best,

Jimmy Petrus

Chief Software Architect

Enhancements in Developer Network 2009

To support new subscription model and improved business requirements in 2009 release, we have updated our Developer Network to let you manage your subscriptions easier and more efficiently.

New release. New look.

If you’re using Internet Explorer browser with Silverlight installed, you’d have noticed the new desktop look of our Developer Network. Otherwise, I highly recommend you to download Silverlight 2 today and experience the difference of our Developer Network with Silverlight UX. We hope you liked our new, elegant theme paired with our exclusive ‘black glass’ dock style. See the following screenshot for a better picture.

New desktop look of Developer Network.

New desktop look of Developer Network.

Changes in My Subscriptions

Allright, enough introduction. For existing subscribers, you would have noticed several new changes when you access the My Subscription application. You might be wondering why the changes were introduced, and how it could be useful to you. Let me explain below.

My Subscriptions interface now features two panels, instead of just a plain text in the previous version. The first top panel contains more detailed information about the subscription. You can quickly see the summary of your subscriptions and its status. If you have the developer manager role, you can now see all subscriptions that owned by your company (via the linked corporate ID).

As the 2009 release introduces three new editions of subscription, it’s now possible that you have multiple active subscriptions at a time. Unlike pre-2009 release which shows only a single subscription information, My Subscriptions interface is now improved to show all your subscriptions list in details — eg, you can see how many times a subscription has been renewed, when it’s going to expire, and more. See the screenshot of the enhanced Subscription interfaces below.

Enhanced Subscriptions interface to show multiple subscriptions in details.

Enhanced Subscriptions interface to show multiple subscriptions in details.

Note that you can also expand on a subscription record to display the list of components included in that subscription, along with each component’s license key and version information.

Changes in My Components

My Components application also introduces a minor update on the Full Version tab. Instead of mixing up all products into a single tree view navigation, we now introduce a combobox selection above the product list interface.

The new combobox is essentially important as you can now have multiple different editions in a single account, and makes it easier for you to see what components belong to which subscription edition. If you have non subscription products in the account (eg, Suite, or individual products such as WebGrid, WebCombo, etc), you can find them in “Non Subscription Products” selection.

New combobox interface to select active subscription/product

New combobox interface to select active subscription/product

Please note that the first subscription will be selected by default in the first page  load.

Changes in My Developers

My Developers application also receives a handful of changes primarily in the way how you assign a subscription to your team members. With the new enhancement in My Developers, we make it easy for you to assign multiple subscriptions for a team member regardless of the edition. Please note that the pre-2009 system limits only one subscription assignment for a member.

In the Assign Subscription tab, you’ll now see a list of assigned subscriptions. To assign a new subscription to a member, simply click on the new row, and choose a subscription from the dropdown list, then press tab. See the screenshot below.

My Developers now allows you to assign multiple subscriptions to a team member.

My Developers now allows you to assign multiple subscriptions to a team member.

One-click Subscription Renewal

We’ve also added a small nice feature that takes your pain off for renewing multiple subscriptions. In the past, you have to add each subscription item for each renewal in our Online Store, then find your subscription ID, copy and paste the ID, and go through the remaining subscriptions. Eventhough you typically renew only once in a year, that’s still a truly tedious task IMO.

Thanks to the new feature in Developer Network 2009, you can now renew all your subscriptions in a single click away! Just head to My Subscriptions application, there you’ll see a list of expired (and about to expire) subscriptions grouped by edition. Then click on the edition link to renew all subscriptions for that edition. You’ll then be automatically redirected to our new Online Store with all subscriptions pre-filled. All you need to do is simply clicking on the checkout button — it’s that simple.

Renewing all subscriptions is now as easy as a mouse click.

Renewing all your subscriptions is now as easy as a mouse click.

Last but not least, I hope you liked all the improvements we’ve done in Developer Network 2009 to deliver even better, more professional services to you. Enjoy and happy developing!

As usual, please leave your comment here for questions or feedback.

All the best,
Jimmy.