Tag Archives: UI Components

ClientUI 8 Goes RTM with Redesigned Live Samples

Finally, the wait is over! The new WebUI Studio 2012 R2 release is here with tons of new exciting tools and templates that will surely boost up your development productivity. Despite of the slight delay, I trust the new release worth the wait. First off, we don’t just release new controls to add to your toolbox, we also ship a number of new templates to help you quickly getting started with your projects. Furthermore, we’ve added over 175 new technical samples and over 75 new reference samples – all with brand-new look and feel and completely redesigned user experiences. With these inspiring samples, we wanted to help you unleash your big ideas and creativity and take them to the next level.

Alright, before we gone too far, here are some important links that you’ll need for this new release.

All-new, Completely Redesigned Live Samples.

In addition to many new controls we shipped in this release, we’re pleased to announce the all-new ClientUI live samples with completely redesigned user interface. It’s now featuring larger screen real estate, clean and modern design that allows one to focus better on content, and more intuitive navigation. And for the first time since its first debut 4 years ago, all controls now perform 70% faster than before – thanks to the continuous performance tuning and memory usage optimization.

More importantly, the new live samples puts some of the new R2 controls in action, so you can see how they can be leveraged in your own apps. I’m particularly referring to the new breadcrumb navigation control which completely redefines the overall navigation experiences. Combining hybrid address bar and menu functionality into an elegant user interface, you can now perform navigation in a simple “point-and-click” manner. Let’s take a look at the overview of the redesigned live samples below.

Introducing the all-new ClientUI live samples

And because we loved this intuitive navigation control so much, we decided to release it as a standalone reusable control to our valued customers. Feel free to unleash your big ideas and make it work your own way. Desktop application developers may rejoice! The navigation control is also available in WPF version, so you can be the first to build Windows 8 Explorer style business applications! We also shipped a WPF project template that leverages this versatile navigation control. More on that later.

In addition to the intuitive navigation, you can notice a whole new user experience that our designer team have put into this new live samples, for instances, it sports the improved CoverFlow with realistic depth shadow, better coverage on What’s New and Featured section – thanks to the fluid design allowing you to see more items in larger screen and adapts to reduced items in smaller screen.

Fluid design and improved CoverFlow

And now to the core part, the entire sample canvas has been revamped as well. Unnecessary toolbars and buttons are gone, fancy gradients are wiped out, options and other navigation elements are centralized to a collapsible pane. Embracing on the modern design, it’s now possible for us to create beautiful, full-screen user experience. See the following screenshot for details.

Experience beautiful, full-screen samples.

Enough said, visit the new ClientUI live samples now and experience it for yourself.

In this blog post, I only scratched the surface of the new exciting stuff that we delivered in this release. We’re fully passionate about design and user experiences that balance very well with functionality – and we carefully put that into the engineering process. That said, you can find that all our controls are engineered with thoughtful user experiences, in addition to the rich features and functionalities of course – that’s what sets us apart from other products in the market.

Last but not least, enjoy WebUI Studio 2012 R2! Hopefully this release comes just in time, so you can play around it now and make some planning for your big ideas in the next year. Again, here’s the link to download in case you haven’t done so, and make sure you check out the complete what’s new list here.

All the best,

HTML5 Development – Part 2

In the previous HTML5 development part 1, we have shared our development roadmap for several WebDesktop components which were redesigned to fully support HTML5. As you may already aware, the WebDesktop UI suite contains dozens of standalone components ranging from tab control, navigation panes, to desktop and windowing controls.

In this blog post, we’re going to discuss more about the explorer pane and some windowing controls that have been redesigned for HTML5. WebExplorerPane is a well-known UI component to create rich user interface where a series of navigation items are divided into sections.

Rendering WebExplorerPane

Rendering layout in HTML5 is much more complex than HTML4. The new specification in HTML5 introduces a number of  limitations of TABLE usage thus we spend extra efforts to modify the layout rendering that use TABLE into DIV. In other words, we’re going to create a new WebDesktop version that fully supports HTML5 and CSS3. The goal is to create rich controls with less foot print to improve the overall performance.

Tweaking WebExplorerPane to HTML5 is quite challenging. Most of the issues are coming from the layout and behaviors. As seen in the below figures, the Fig 1.1 shows the rendering problems – notice the padding and the layout issues. The Fig 1.2. shows the tweaked version with pixel-perfect layout and structure.

Figure 1.1 Simple Padding (Layout error)  Figure 1.2 Simple Padding (Layout Fix)

Moving on, we found that expand and collapse behaviors in WebExplorerPane are no longer working in HTML5. Initially, the explorer pane is set to collapse. However, the script behind explorer pane doesn’t work as instructed. This caused the expand/collapse function to fail, which you can see in Fig 2.1 and Fig 2.2 screenshots below.

Figure 2.1 Explorer pane should be in collapsed mode. Figure 2.2 Explorer pane should be in expanded mode.

At the current state, the WebExplorerPane has been completely revamped with the expected behaviors and smooth animation. It’ll be shipped as part of WebDesktop 4.0 in the upcoming release.

Rendering WebDesktopManager

Layout and behavior issues are also found when rendering WebDesktopManager in HTML5. As you can see in Fig 3.1 screenshot below, the desktop window is gone from the screen.

Figure 3.1 WebDesktop Rendering error in HTML5.

The taskbar is rendered well in WebDesktop, but the others are not. This issue occurs because the height’s configuration in HTML5 is more complex. However, this problem can be solved by changing the height of DIV container to 100%. Figure 3.2 DIV’s height is set to 100%.

As a result, the window which is normally visible now becomes invisible due to overflow in the table. When the overflow is removed, it still fails rendering the window as you can see in Figure 3.3.

Figure 3.3 Overflow is removed, window is not properly rendered.

After exploring a lot of sources and references, we’ve decided to eliminate the usage of TABLE because it will produce more complex issues in the future development. Therefore, we decided to use the DIV markup as the main layout rendering in all the windowing controls.

In conclusion, there are several things that we’ve modified in rendering layout, such as WebDesktopManager uses DIV structure so that it’s expandable as well as its window, and the window header’s height is adjustable. The taskbar and shortcut structures are stay the same for now, but we will look forward their next development in the future.

In overall, the result can be seen in the figure below:

Figure 3.4 WebDekstopManager renders well after modification.

The enhancement also applies to WebDesktop’s UI interaction such as resizing or moving the window. As you can see in Fig 4.1 below, the layout structure is not well-rendered and it is again due to table structure issue in HTML5.

Figure 4.1 WebDesktop’s window is not well-rendered.

After several modification on the layout and structure by using the DIV markup, the issue in the window controls can be elegantly solved. See the following figure.

Figure 4.2 Complex Images is well-rendered after using DIV structure.

In addition, we’ve successfully tweaked the entire user interaction features such as window moving, resizing, and drag-drop. With these enhancements, the shadow mode is rendered well when you move or resize the window. See Fig 4.3 and Fig 4.4 for moving and resizing window.

Figure 4.3 Moving window is perfectly rendered with its shadow mode.

Figure 4.4 Resizing window is perfectly rendered with its shadow mode.

In this blog post, we’ve just scratched the surface of the next chapter of our UI tools. Our goal is to revamp all WebDesktop family members to fully support HTML5, and watch out for the brand-new themes that we will ship in R2. Stay tuned for our next development series!.


Getting ready for HTML5 components – Part 1

WebUI Studio 2012 R1 has been released a month ago and we’ve developed several new controls and enhancements to the existing controls. As you know, we already delivered WebGrid 8 and WebCombo 6 in the release which includes full support for HTML5 and CSS3.

For the R2 release, we’re putting major efforts on supporting HTML5 to the rest of our ASP.NET components, including the 30+ WebDesktop UI components and WebEssentials suite.  Even though HTML5 is still in the development phase, nowadays many developers are speeding up their web development to HTML5 technology. Looking into HTML5 capability and advantages, it’s surely promising for web development in the future.

Layouting in HTML5

The biggest challenge that we found during development in HTML5 is its layout. Rendering layout in HTML5 is more complex than HTML4. Based on HTML5 discussion forum, in order to make the layout’s size in percentage (%), the parent level height must be defined as well. Mostly, both <html> and <body> tags are set to 100% for its height.

We realize that WebDesktop structures are mostly using table. However, using table is not recommended because it has a limitation in HTML5. Therefore, we decided to revamp/modify WebDesktop’s structures to fit user’s requirement.

In this first series of my blog post, I’ll be sharing our experiences on the HTML5 development for the 2 members of WebDesktop family, WebCallOut and WebTab. Let’s take a deep look of what we’re currently doing with them.

Rendering WebCallOut

The first time when we convert WebCallOut to HTML5, we got numerous issues with the layout such as shown below.

WebCallOut's layout issue when using HTML5.

WebCallOut's pointer offset when using HTML5.

Notice that the rendering is completely messed up, and the pointer is also offset from the correct position.

After improving the control to support HTML5, the layout and rendering now shows perfect results, such as shown below.

WebCallOut's perfect layout after modified.

WebCallOut's pointer displays correctly after modified.

In the HTML5 migration, we tried our best to achieve pixel-identical results when comparing to the HTML4 implementation. So, if you host the control back to HTML4 doc type, the results will be identical – all with the same codebase.

Rendering WebTab

For the WebTab control, we decided to revamp the structure only for the content because the content itself needs to be in fluid. You’ll see numerous layout issues when using WebTab control in HTML5 such as shown below.

WebTab's structure issue when using HTML5.

During the research phase, we found that the usage of table no longer support fluid content in HTML5. The percentage height of fluid content is getting smaller or rather bigger than its container. When we tried to specify height in fluid content to pixels, it works like charm. Unfortunately, this method makes WebTab’s performance slower than before. Ultimately, we decided to revamp the entire rendering structure and no longer using table as the container to achieve the fluid layout.

WebTab's perfect structure after modified.

In addition, our team pay detailed attention on the UI aspects such as the tab header position and alignment, fixing the animation for active and normal tab header, adjusting style for complex image, and improving the style caused by the tab header’s height.

The tab header that uses complex images will also produce undesired results, which is caused by the table structure that involves multiple rows, shown below.

WebTab's complex images issue when using HTML5.

Thankfully, we found that it is possible to use one row in order to fix the WebTab and put additional final touching. After applying the new technique, the WebTab control now renders perfectly.

WebTab renders complex images perfectly after modified.

Hopefully this post gives you insights and big picture of what we’re doing for the HTML5 initiatives. I will share our development progress for the other controls in the next series of blog posts. So, be sure to keep updated with the next series of our development story.


New Business-Inspiring Samples in ClientUI 6

The latest ClientUI release comes up with new amazing controls that have been awaited by many developers, such as UXScheduleView with its scheduling capabilities, UXRibbon with its rich styling features, UXFlowDocumentViewer with its unique viewing performance and much more. Click here to find out more about the new controls in ClientUI 6.

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.
    UXScheduleView - Medical Scheduler

  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.
    UXScheduleView - Software Project Schedule

  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.
    UXScheduleView - Nested Grouping
  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.
    UXRibbon - TextPad Editor 

  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.
    UXRibbon - CRM

  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.
    UXFlowDocumentViewer - News Buzz           

  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.
    UXFlowDocumentScrollViewer - Personal Email Viewer

  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.
    SQLReportViewer - Product Sales Report

  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.
    SQLReportViewer - Sales Order Invoice

  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.
    UXDataLookupBox - Data LookupBox

    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.


First Look: Intersoft Ribbon UI for Silverlight, WPF and ASP.NET

Last month, I blogged about some new windowing controls that we will ship in our upcoming release. In that post, I’ve also mentioned about the new ribbon controls which turns out to be one of the key highlights in the release. In this post, I’ll share our excitement about this particular control, its key features and benefits, and more importantly, why does it matter to you.

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.

UXRibbon for Silverlight

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.

Backstage Menu in Intersoft UXRibbon

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.

UXRibbon - Superior User Experiences


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.

UXRibbon for WPF


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.

WebRibbon for ASP.NET/HTML5

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!