In the initial release, ImageAbsolutePath is inferred from ImageVirtualPath. In this case, the control always assume that the SqlReportViewer and SQL Reporting Service is located on the same server. However, based on customer feedback, scenarios involving multiple server location is common in enterprise application deployment.

For example, the SqlReportViewer service is hosted on ssrs-1 server while the SqlReportingService is located on web-1. The scenario requires user to set both the ImageVirtualPath and ImageAbsolutePath properties, because the inferred absolute path from a remote location will not return a correct result. A code snippet to address such scenario would be:

<Intersoft:SqlReportViewer x:Name="ReportViewer1"
	ReportProxyHandler="http://web-1/SqlReportViewerHandler.ashx"
	ReportName="/Northwind Reports/SalesOrderInvoice"
	ReportServer="http://ssrs-1/ReportServer"
	ImageVirtualPath="http://ssrs-1/TempImages/"
	ImageAbsolutePath="C:\inetpub\wwwroot\TempImages" />

The above code snippet assumes that the report images will be stored to the C:\inetpub\wwwroot\TempImages folder on the ssrs-1 server and virtually hosted on http://ssrs-1/TempImages. In this case, you need to configure ssrs-1 as the image server by creating the TempImages virtual directory.

If opening up the SQL report server as public web server is not option, simply set the ImageVirtualPath property to the web-1 server. Everything else should remain the same. In this case, you need to configure the IIS in the web-1 server by creating a virtual directory and map it to the network path in the ssrs-1 server.

I hope this post gives you insights on the new ImageAbsolutePath feature and how it can be used along with other properties to achieve advanced deployment scenarios. Any questions or feedback are welcomed.

For the complete list of enhancements and fixes in the latest ClientUI release, please visit our support page.

Regards,
Glenn Layaar

In this blog post, I will share how to work with the report parameter features in SqlReportViewer, e.g. fill the parameter with default value, hide some parameters, and use custom validation to validate the inserted parameter value.

Consider this scenario, we have a holiday request form that a user needs to fill. The report by default requires these parameters to be filled:

• Company Name
• Username
• First Name
• Last Name
• Start Date
• End Date
• Holiday Name

In this scenario, the Silverlight application will retrieve the Company Name, Username, First Name, and Last Name based on the user login information. Since these information are already predefined, SqlReportViewer has the capabilities to hide and automatically fill these parameters value.

As shown in the above image, Company Name, Username, First Name, and Last Name by default has been set programmatically. Company Name and Username is hidden as well, since we would like the value not to be modified by the user.

In order to achieve this behavior, you need to bind the ReportParameters property to a ObservableCollection<ISqlParameterMetadata> using TwoWay mode.

<Intersoft:SqlReportViewer ReportParameters="{Binding ReportParameters, Mode=TwoWay}"
x:Name="ReportViewer1" />

The default value and Visible property is modified during ObservableCollection<ISqlParameterMetadata> collection changed event, see the code snippet below.

void _reportParameters_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
    if (e.NewItems != null)
    {
        foreach (object paramObj in e.NewItems)
        {
            SqlReportParameterMetadata sqlParamObj = paramObj as SqlReportParameterMetadata;
            if (sqlParamObj != null)
            {
                switch(sqlParamObj.Name)
                {
                    case "CompanyName":
                        sqlParamObj.Value = this._companyName;
                        sqlParamObj.Visible = Visibility.Collapsed;
                        break;
                    case "Username":
                        sqlParamObj.Value = this._userName;
                        sqlParamObj.Visible = Visibility.Collapsed;
                        break;
                    case "FirstName":
                        sqlParamObj.Value = this._firstName;
                        break;
                    case "LastName":
                        sqlParamObj.Value = this._lastName;
                        break;
                }
            }
        }
    }

    OnPropertyChanged("ReportParameters");
}

public ObservableCollection<ISqlParameterMetadata> ReportParameters
{
    set
    {
        if (_reportParameters != value)
        {
            _reportParameters = value;
            _reportParameters.CollectionChanged += new System.Collections.Specialized.
                NotifyCollectionChangedEventHandler(_reportParameters_CollectionChanged);
            OnPropertyChanged("ReportParameters");
        }
    }
    get
    {
        return _reportParameters;
    }
}

For simplicity, the sample is using a static value to retrieve the default parameter value.

this._companyName = "Intersoft Solutions";
this._userName = "jdoe@intersoft.com";
this._firstName = "John";
this._lastName = "Doe";

A custom validation which does not allow StartDate earlier than EndDate has also been provided.

This behavior is achieved by using a custom SubmitParameterCommand and binding IsReportParameterError property to a boolean property with TwoWay mode. Setting IsReportParameter property to False aborts the report execution to the reporting services.

<Intersoft:SqlReportViewer Intersoft:DockPanel.IsFillElement="True" x:Name="ReportViewer1"
    IsReportParameterError="{Binding IsReportParameterError, Mode=TwoWay}"
    SubmitParameterCommand="{Binding SubmitParameterCommand}" />

During command execution, the code below will validate if the EndDate is later than StartDate. It will also set the IsReportParameter to False if the validation fail.

public ReportSampleViewModel()
{
    _submitParameterCommand = new DelegateCommand(ExecuteSubmitParameter, CanSubmitParameter);
}

public DelegateCommand SubmitParameterCommand
{
    get { return _submitParameterCommand; }
}

private bool CanSubmitParameter(object parameter)
{
    return true;
}

private void ExecuteSubmitParameter(object parameter)
{
    ObservableCollection<ISqlParameterMetadata> sqlParams = parameter as ObservableCollection<ISqlParameterMetadata>;

    if (sqlParams != null)
    {
        ISqlParameterMetadata sqlStartParam = sqlParams.Where(x => x.Name == "StartDate").FirstOrDefault();
        ISqlParameterMetadata sqlEndParam = sqlParams.Where(x => x.Name == "EndDate").FirstOrDefault();

        if (sqlStartParam != null && sqlStartParam.Value != null &&
            sqlEndParam != null && sqlEndParam.Value != null)
        {

            DateTime startDate = (DateTime)sqlStartParam.Value;
            DateTime endDate = (DateTime)sqlEndParam.Value;

            if (endDate.CompareTo(startDate) > 0)
            {
                this.IsReportParameterError = false;
                sqlStartParam.ClearError("Value");
            }
            else
            {
                this.IsReportParameterError = true;
                sqlStartParam.SetError("Value", "Start date must be earlier than End date");
            }
        }
    }
}

Here is the link to the sample project and the link to the RDL used in this sample.

Conclusion

In this post, I have discussed the report parameter feature in SqlReportViewer. The feature allows you to insert default parameters value, hide parameters, and use custom validation to validate the parameter. If you would like to learn more about SqlReportViewer, please see SqlReportViewer Overview.

As an extra note, hiding parameter feature is an enhancement in the latest SqlReportViewer build and requires the latest ClientUI hotfix.

SqlReportViewer is available in the latest 2011 R2 release which you can download here. If you have questions or feedback regarding SqlReportViewer or other ClientUI controls, feel free to post them to our community forum.

Regards,
Glenn Layaar

Ever since Silverlight 5 was released, we’ve been bombarded with emails and forum posts asking when we will upgrade our tools to support it. And I’m pleased to answer that the day is today. You can download WebUI Studio 2011 R2 Service Pack 1 here which is a free upgrade for all existing subscribers.

Speaking about Silverlight 5 support, we shipped not only about “compatibility” support with the Silverlight 5 runtime, but to the extent of “native” Silverlight 5 support where we improved many areas of our components to leverage the new features introduced in Silverlight 5. Once you installed the service pack, noticed that ClientUI assemblies for Silverlight 5 are now available in the separate folder.

Among the most significant enhancements is the vector printing support. All document viewer lineup in ClientUI – such as Fixed Document Viewer, XPS Document Viewer, Flow Document Viewer, and SQL Report Viewer – now automatically leverage vector printing by default, and fallback to the bitmap printing if unsupported by the printer.

The Flow Document Viewer has been significantly enhanced to support the improved graphic stack introduced in Silverlight 5 which enables the images to dynamically loaded in different UI thread while at the same time maintaining the layout consistency.

Upgrading your existing project to Silverlight 5 is as easy as few clicks away – thanks to the seamless integration to the Silverlight 5 developer tools. Simply bring up the project properties and change the Silverlight target version to Silverlight 5. Once you ok’ed the changes, Visual Studio will refresh the project’s references and automatically pick up the Silverlight 5 version of ClientUI assemblies. To ensure that your project is now upgraded, select a ClientUI assembly and press F4 to see the assembly properties, as shown in the following figure.

Note that ClientUI supports side-by-side development with Silverlight 3, Silverlight 4 and Silverlight 5 – by far the industry’s most comprehensive toolset for Silverlight development.

Another major effort that our team have put in this latest release is a brand-new wizard for Silverlight and WPF templates. Previously, some ClientUI templates depend on the installed Silverlight version. Several templates also have to be made separately to target different version of WCF RIA Services (i.e., RTM, SP1 and SP2). In this latest release, the ClientUI project templates no longer depend on the Silverlight version. A single project template now works flawlessly regardless of the WCF RIA Services, see the shot below.

For data-driven project templates, you can now choose the target Silverlight version when creating a new project, see the shot below.

In addition, the service pack also throws in nearly 100+ enhancements and fixes across all Silverlight, WPF and ASP.NET controls. To see the complete list, please download the release notes here.

So what’re you waiting for? Kick-off the new year with this exciting release, and build some amazing apps fast.

Note: Existing customers can also download the service pack from Intersoft Developer Network, under My Components link.

Best,
Jimmy Petrus

To start off the New Year, we’re pleased to extend our holiday offers until the end of January 2012. Take an action now to get this opportunity before the offers end! Click here for more information about these great offers.

Visit our online store to get your copy along with the free second copy gift today, or feel free to contact me at martin@intersoftpt.com for any questions.

Thank you and we look forward to serving you in 2012!

Regards,
Martin

This great offer is not forever, means that it is limited only until 31st December 2011. So Hurry up! Don’t miss out this great opportunity! Time to save your money – take advantage of this special holiday offer and get two subscription licenses for the price of one. For more information about this promo, click here.

Visit our online store to get your copy along with the free second copy gift today, or feel free to contact me at martin@intersoftpt.com for any questions.

Thank you and happy holiday!

Regards,
Martin

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

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

1. Hospital Medical Scheduler

   UXScheduleView is a powerful, MVVM-ready scheduling control that offers many advanced features and rich user experiences in a single box. This sample is a good demonstration of the latest UXScheduleView with many features enabled such as adding, editing and deleting events.

   This sample defines the views as Daily, Next 3 Days and Week which can be elegantly defined through property sets in the XAML. It also demonstrates UXScheduleView’s strong customization support which allows you to redefine the styles, appearances and templates to fit your requirements, for instances, displaying the photo of the respective doctors.

   In addition, many key features can also be seen in this sample such as high-performance grouping, real-time interactivity and drag-drop support, sophisticated editing capability, ISO usability standards conformance, and more. You can drag-drop the event without having to manually modify the time schedule. Explore the sample.
   

2. Software Project Schedule

   One of the most advanced features in UXScheduleView is its extensible view architecture which enables you to create your own custom views and easily instantiate the custom views into the UXScheduleView control. This sample includes a custom Agenda view which displays events in a simple list view. Notice that the custom view takes advantage of the automatic calendar synchronization which highlights the days covered by the view. Explore the sample.
   

3. Nested Grouping
   If the above scenario shows about standard grouping, this sample demonstrates several advanced grouping features such as multi-level (nested) grouping using UXScheduleView. You can flexibly define the group items and orders through the GroupCollection property. Explore the sample.
   
4. TextPad Editor

   This sample demonstrates a complete overview of the unique features available in UXRibbon such as fluid group and button resizing, state-of-the-art UI design and pixel-perfect layout rendering. It also shows the key ribbon features such as dozen of button variants, fluid tab group, ordered tab group, application menu, backstage view, quick access toolbar, key tips, and much more.

   Despite of the rich features, UXRibbonBar is designed with lightweight and blazing-fast fluent resizing in mind. Explore the sample.
    

5. CRM
   One of the unique metaphors in Ribbon UI is the contextual tab concept which lets you display certain groups of commands based on a certain condition or context. For example, instead of showing schedule-related commands with disabled state initially, it is more intuitive to hide them initially, then show them on-demand when the context is available such as when a follow-up record is selected.

   UXRibbonBar includes full support on this unique “contextual tab” metaphor which is well demonstrated in this business-inspiring CRM sample. Try to select a record in the Follow-up Schedule grid, notice that the “Schedule” contextual group will be shown with the “Follow Up” tab automatically selected.

   UXRibbonBar also supports multiple contextual groups to be activated at the same time. With the “Schedule” contextual group shown, try to click on the Search text box. Notice that a “Search” contextual group will be displayed along side with the “Schedule” contextual group. When the context is out (i.e., tab out from the Search text box), the contextual group will automatically disappear and then select the first tab of the UXRibbonBar. Explore the sample.
   

6. News Buzz
   In this sample, UXFlowDocumentViewer is used to display the latest news documents. Try to select a category in the left navigation and the related news will be displayed in the viewer.

   UXFlowDocumentViewer has multiple view mode switching capability. Try to switch between Page view and Scroll view using the view mode tool commandsand the content will be adjusted to the selected view mode.

   Also, you can perform zooming using either the zoom bar or zoom level. Click the “Show Actual Size” button to reset back to 100%. Or, toggle the full screen mode for maximum reading experience. Click the Print button to directly print the document exactly as user views it.

   Try the search feature to search a text. Try to type “the” and note that all the matched words will be highlighted. When you switch to scroll view, the search text will be persisted and all the matched words will be highlighted as well. Explore the sample.
              

7. Personal Email Viewer

   UXFlowDocumentScrollViewer allows users to view flow content in scroll mode. In scroll mode, the content will flow based on the viewer size.

   In this sample, UXFlowDocumentScrollViewer is used as a personal email viewer, which loads an email (in HTML format) when user selects an item from the top navigation. Explore the sample.
   

8. Product Sales Report per Customer
   

   SQLReportViewer is a SQL report viewer for Silverlight with sophisticated rendering engine – conforming to SQL reporting services rendering. In this sample, SQLReportViewer provides users with the capability to view the product sales report.

   You can perform zooming using either zoom bar or zoom level. Click the “Show Actual Size” button to reset back to 100%. Or, toggle the full screen mode for maximum reading experience. Click the Print button to directly print the report exactly as users views it. Explore the sample.
   

9. Sales Order Invoice

   This sample demonstrates on how SQLReportViewer is able to accurately parse and render any SQL reporting service report, such as a sales order invoice. The thumbnail navigation could be used to jump between pages. Explore the sample.

   You can perform zooming using either zoom bar or zoom level. Click the “Show Actual Size” button to reset back to 100%. Or, toggle the full screen mode for maximum reading experience. Click the Print button to directly print the report exactly as users views it. Explore the sample.
   

10. Data LookupBox

    This sample demonstrates how to implement data lookup using the UXDataLookUpBox control. UXDataLookupBox is an intuitive data input control that combines the ease of auto-complete and the flexibility of custom lookup.

    Try to click the “Search” icon and type “ca” to search customers based on Contact Name. Finally, it will automatically list all orders purchased by the selected customer. Explore the sample.
    

    There are many other samples collection which you can visit in our ClientUI Live Samples. You are welcome to evaluate our 30-days trial in here. Existing customers with valid subscription can obtain the latest WebUI Studio from Developer Network, under My Components shortcut.

    Should you have any questions regarding sales, you can contact martin@intersoftpt.com. Any comments or feedbacks are welcome.

    Thank you and have a nice day.

    Regards,
    Martin

One of the major addition in this release – or I should say the most phenomenal – is the advanced flow document framework that runs on both Silverlight and WPF with one codebase. To be clear, flow document framework is a set of API and object model that allows you to author flowing content with rich formatting and styling. Much like a Word or an HTML document, you use flow document to author content that flows from the top-to-bottom ordering, and either left-to-right or right-to-left direction.

That’s a quick overview. Now let’s deep dive on the flow document framework in ClientUI 6. In this blog post, you’ll learn what you can do with the flow document framework particularly in line-of-business application scenarios.

Comprehensive Document Framework 

With ClientUI flow document framework, you can now create Silverlight and WPF apps that display rich content such as email messages, news, and business documents like invoices – thanks to the comprehensive set of document object model. Similar to the Silverlight elements, you author the content by constructing the document elements and hierarchy through XAML markup.

The framework covers everything you need to author content, from basic document elements such as paragraph, span, hyperlink, bullet list, to advanced document elements such as floater and table. More importantly, you can apply rich formatting to the document through which includes bold, italic, underline as well as customizing text effects such as strikethrough, subscript and superscript.

One of the key features in the document framework is the ability to customize the advanced layout aspects of the paragraph, such as the text indentation, text alignment (with justification support), margin, padding, line spacing, spacing before, spacing after and much more – which give you complete control over your document presentation. See an example below.

You’d have probably realized how difficult it is to create just a simple bullet list in Silverlight – or I should say practically impossible if you also want to create flowing bullet list that takes account indentation with proper line spacing. Thankfully, the ClientUI document framework comes with comprehensive list support.

You can instantly choose from several predefined marker styles such as shown in the figure below.

Create nested bulleted lists such as shown below.

Or even customizing the lists with a custom image, see below.

Better yet, you can arrange an element to float around the other elements by using the built-in floater element. See an example below.

One of the coolest features, IMO, is the truly-impressive border formatting that you can apply on any block containers. It provides over hundreds of possible formatting combination that multiplied from the border styles, border width, border color and border thickness – which can be applied differently on any side of the border. See a series of the various combinations below.

And how about the table support, you might ask. Well, table is one of the most complex specifications in the flow document design. It requires many advanced layout capabilities such as defining column span and row span, determining when to use automatic width and fixed width, determining when the row should automatically grow or clipped based on the size configuration, and really – much more. Fortunately, the ClientUI document framework was thoughtfully designed to cover all the complex table’s requirements.

See an example of a table with row span.

To find out more information on the table support, I suggest you to check out the complete table implementation details here.

Hybrid Flow Document Viewers

Of course, the comprehensive document framework is just a set of code and will be useless without the viewers that can render it. In this release, ClientUI ships three viewers that can render a flow document: scroll viewer, page viewer, and a hybrid viewer.

If you’d like to display a content and allow your users to change the reading mode at runtime, then a hybrid viewer is exactly what you need. See the illustration below for details.

As you can see in the figure above, the flow document viewers inherit the rich viewing features already invented in ClientUI’s viewer lineups, such as printing, precise text selection, copy to clipboard, zooming, searching, and width/height auto fit. You should really check out this link to learn more about the viewer’s capabilities.

Built-in HTML Converter

Although you can author a rich flow document with XAML markup, it’s quite unlikely to use XAML as the interchangeable format particularly in business applications. Say you already have an existing ASP.NET web application that provides rich text editing capability, the content will be much likely stored as HTML or XHTML format. Then ask it straight, how do you read the HTML formatted content and display it in the FlowDocumentViewer?

The answer is pretty much obvious – you’ll need an adapter that converts the HTML into a flow document. The greatest challenge often lies in the HTML parsing algorithm which may take days or even weeks if you’re unfamiliar with regex or token parsing. Thankfully, ClientUI includes a built-in HTML converter that will be automatically applied when you assign a valid HTML formatted content to the viewers – all without extra code. And definitely, if you preferred to build your own parser, a DocumentConverter property was provided to accommodate your needs.

The following screenshot shows an email reader sample which displays an HTML email message in the flow document viewer.

You can also try the sample online, or better yet, download it to your development box and test drive it for yourself. Again, here’s the link for the free trial download. And as usual, feedback, questions and comments are warmly welcomed.

Best,
Jimmy

We’ve been hard at work to update all our sites with fresh look and add over 80 new business-inspiring samples to the online demo – so make sure you check them out here, and here.

In addition to the new controls, this release also includes major enhancements to the resources consumption of all components. It also ships with the top-requested Business Application project template that leverages the latest DevForce release (v6.1.3.1) which I’ll cover in my future blog posts.

There’s nothing much else to say but our deepest gratitude to all our customers and partners for the unceasing support and invaluable feedback – making this release a truly amazing one.

Finally, enjoy R2! Again, click here to download the new R2 today if you haven’t. We hope you love the new release as much as we love building it!

Best,
Jimmy

First of all, if you’re not familiar with SQL Service Reporting Services (further abbreviated as SSRS), I’d suggest you to take a look at the product overview here. There are a number of logical reasons why enterprise companies opted for SSRS instead of Crystal Reports or other reporting solutions. Among the reasons are the pre-bundled license (even for SQL Express edition), strong integration with SQL Server and the highly innovative data presentation format called Tablix. For more information, check out the SSRS resources here.

So now that you’ve heavily invested your report solution on SSRS, one big question that might come across your mind would be: How do I display these SSRS reports right in my apps? If you googled this question, you’d end up getting one or two similar answers. You can either create a proxy ASP.NET website to host your report, or directly targeting the native report server URL in a new browser window – look at the screenshot below.

You see, the overall experience is not quite enticing as you need to popup a new browser window. The experience just doesn’t feel right as the reporting interface feels like entirely separated from the main application. This is particularly true for enterprise-class business applications which require seamless integration between their reporting and the main modules.

Many of our clients agree (I hope you, too) that the best and the most ideal solution is to have a report viewer that native to the Silverlight or WPF platform. That sounds to be right – and so it’s exactly what we’re working on, a report viewer that is capable to render the SSRS report exactly as designed which is native to both Silverlight and WPF platforms. Say hello to ClientUI Report Viewer for SSRS 2008.

Seamless Reporting Experiences

ClientUI’s SQL Report Viewer opens up the possibility to create a better, more integrated reporting experiences for Silverlight and WPF apps. This means that you can now display your reports right in your main apps – not on separate browser windows. Here, take a look at the same sales invoice report running seamlessly in a rich Silverlight app.

Not only you get exact, pixel-perfect results for the display, you also get all the rich experiences of a ClientUI-powered viewer component. Say, the zooming feature, fit to width, printing, expandable/collapsible navigation interface, search, text selection, copy to clipboard and much more.

And if you’re wondering how the report is laid out in the SSRS designer, take a look at the following screenshot. If you compare with the results above, notice that the report viewer renders every SSRS design element precisely, from the position and dimension, to the formatting and styling.

More Than Just Tables

But, wait a minute, how about the support for rich data visualization such as charting and sparklines? Thankfully, it’s well supported through the extensible architecture of our SQL report viewer which enables you to create custom charting renderer. In short, you’ve the freedom to use any third party data visualization that suits you the best.

Too good to be true? Take a look at two of the reference samples below.

The above figure shows the SQL Report Viewer in action with sparklines visualization.

The above figure shows the SQL Report Viewer in action with a simple chart.

That’s all for this post. Hopefully my post gives you inspiration on what you can do with SQL report viewer, and how you should design the reporting solution to fit in your rich Silverlight and WPF apps.

As usual, feedback and comments are warmly welcomed. Look out for my next posts on flow document coverage, and possibly release announcement. Stay tuned!

Best,
Jimmy

Ever since Microsoft enhanced its Ribbon UI in Office 2010 and expanded the use of Ribbon in its Windows 7, more and more developers have begun to adopt the Ribbon UI in their line-of-business applications today – regardless of whether it’s running on the web or on the desktop. On the web, you can find numerous business apps that are now Ribbon-friendly, including Microsoft’s latest Office web apps, SharePoint 2010 and its new Dynamics business solutions lineup.

As a leading UI component vendor, we recognized developer’s needs very well on the Ribbon control, particularly the ones that fully conform to the Office’s Fluent User Interface specification. Our goal is to create feature-rich Ribbon control that pay very detailed attention to the user experiences, yet incredibly easy-to-use. Today, I’m pleased to introduce you our latest masterpiece, Intersoft Ribbon UI for All-platform.

That said, no matter which platform your applications were built on – whether it’s on Silverlight, WPF, ASP.NET, or even HTML 5 – we’ve got you covered. With shared key features and design across different platforms, you can now build immersive Ribbon-friendly apps with your platform of choice without trading off the existing infrastructure and technology investments.

Next, I’ll highlight our Ribbon’s key features implemented in each platform. Read on.

For Silverlight

Among the three platforms, Silverlight is arguably the most appealing platform for developers to build their business apps on. The reasons are obvious – it’s a rich GUI framework that runs on all major browsers and supports both Windows & Mac (unlike the recently announced WinRT which runs only on Win8 but that’ll be another story) – and not to mention its compact runtime that weight only about 6MB. Adding the IE 64 bit support in Silverlight 5 makes it even more appealing as the LoB platform of choice.

So it’s not surprising that our Ribbon for Silverlight (further called UXRibbon) receives the most attention in terms of the design, features, and many user experience aspects. UXRibbon has many features, like in other ribbons, from fluid resizing to dozens of button variants – which I’m not interested to cover in this post. The point of interests that I will share today in this post are mostly the user experience aspects of UXRibbon which aren’t available in the other ribbons.

Let’s start with a quick question, if you have used other ribbons before, have you ever noticed that those ribbons always steal the control focus when you do something on the ribbon? This means that you have to spent an extra click to get back to what you worked on previously. Thankfully, you won’t get such issue in UXRibbon as it’s taken care automatically. This is just an example of a small yet important detail that we implemented as part of our compliance to the ISO standards user experiences.

Furthermore, we designed UXRibbon to be incredibly easy to use. For example, when you define a contextual tab group, you don’t need extra code to show which tab to be shown. It’ll intuitively show the first tab of the contextual group when it’s the first-time selected, and smartly reselect the last selected tab when applicable – just like the way it works in Office apps.

To minimize learning curves, we’ve created numerous reference samples so you can easily explore all the features in one place. While the easiest way to demonstrate Ribbon is through the Word sample, I eventually found it to be quite boring. And even worse, it’s an inspiration killer. Why? Because it leads many developers to believe that Ribbon is only ideal in a text processing application. I often asked by our clients this way “So, if you think Ribbon can be used in business apps, show me!”. Well, that motivates us to come up with several business-inspiring reference samples which we’ll ship in the upcoming release.

One of my favorite LoB samples is the Ribbon usage in a CRM application. As you can see in the following figure, Ribbon enforces a neat organization of commands where related functions are grouped together. Commands that are applicable on certain context can be grouped in contextual tabs which are naturally shown on demand. Trust me, users will praise you to make their work life so much easier.

Built from the ground up to create Office’s latest fluent user experiences, UXRibbon employs modern API and design that directly refers to the Office 2010 specifications – unlike many other ribbon solutions that simply “patch” their ribbons which were originally built with Office 2007 design. As the results, UXRibbon is more sophisticated in terms of design, yet fully customizable in terms of usage.

Take an example from the UXRibbon’s application menu and backstage feature. With the ease of property sets, you can quickly define the background of the application menu which doesn’t only apply to the menu’s header, but also consistently throughout the entire backstage interface such as the header line and the active backstage menu. See the following illustration for a closer preview.

To wrap up this section, I would like to share two more unique features that I haven’t seen in any ribbons in the market yet. It’s again the user experience aspects of the Ribbon.

The first one is the state-of-the-art text wrapping feature, which smartly detect when it should wrap the exceeding text to the second line. It also merges with the dropdown arrow in the case of dropdown and split button. This small yet important detail makes more sense to the whole Ribbon concept, otherwise the Ribbon layout will be further increased by 18 pixels.

Out of dozens of Ribbon-specific controls, the Gallery List is the most sophisticated Ribbon element which participates with the fluid resizing process. UXRibbon’s Gallery List is so meticulously designed so that it feels sleeker and slightly better compared to the original Office design.

Both features are better visualized in the following illustration.

For WPF

UXRibbon for WPF shares very much the same features with Silverlight, so I won’t repeat them again here. Although the functionality is identical, many of the user experience aspects have been specifically optimized for the WPF platform behind the scene. This includes the special integration with UXRibbonGlassWindow which enables the ribbon to appear in non-client area of the window. With the window entirely “glassified” and combined with the pixel-perfect contextual tab design, you can now easily create your own Office 2010 style desktop applications.

The following figure shows the UXRibbon control in the CRM scenario running on WPF. Notice that all styling details and user experience aspects are equally identical with the Silverlight version.

For ASP.NET

You might have heard that we are all for the Silverlight and WPF tools in the next release, that’s not wrong – but keep reminded that we’re fully committed to continue supporting and adding new tools for the ASP.NET platform. That said, the next release will include dozens of enhancements to the existing flagship components such as the new data transfer format for WebGrid, removed dependencies to ActiveX, and enhanced AJAX security to prevent XSS issues.

In addition, the next release will introduce a new member, WebRibbonBar, joining the WebEssentials family. Similar to the Silverlight and WPF version, the RibbonBar for ASP.NET also supports rich UI elements such as contextual tabs and application menu, as well as several button variants like dropdown, split button, and toggle button. It also implements fluent resizing with smooth user experiences that conforms to the Office Ribbon specifications.

Despite of the rich features, WebRibbonBar is designed to be extremely lightweight and strongly focused on line-of-business scenarios. As the results, WebRibbonBar delivers blazing-fast performance particularly when the fluent resizing takes place. See the following figure demonstrating the ASP.NET ribbon control used in the same CRM sample scenario.

In conclusion, the “Ribbon Initiatives” is one of the important milestones in our product roadmap. We’re particularly delighted to deliver the Ribbon control supporting all the three platforms in a single release. With the rich features and fluent user experiences concept, get ready to take your business apps to the next level. Be sure to check it out when it’s released in the coming week. Stay tuned!

Best,
Jimmy