One of the greatest new components in Crosslight 4 is a powerful, full-fledged Charting component, enabling Crosslight developers to easily add stunning charts to their business cross-platform mobile apps. Fully MVVM capable, it works beautifully across iOS and Android platforms.

Have you checked out the new Crosslight Charting yet? If not, then this post is the perfect guide for you. This post will help you learn how to get started with Crosslight Charting.

Starting Off

Let’s try to create the illustrated column chart from scratch. To start off, I created a Blank Crosslight project with Crosslight Project Wizard. I’ll call this CrosslightCharting for now. After the project is created, don’t forget to add the necessary references as well.

Necessary References

• Core project: Add Intersoft.Crosslight.UI.DataVisualization assembly.
• iOS project: Add Intersoft.Crosslight.UI.DataVisualization and Intersoft.Crosslight.UI.DataVisualization.iOS assembly.
• Android project: Add Intersoft.Crosslight.UI.DataVisualization and Intersoft.Crosslight.UI.DataVisualization.Android assembly.

Now you’re ready to begin writing some codes.

Preparing the ViewModel

Let’s prepare the ViewModel that will provide the data to the chart. I’m going to create a ColumnViewModel class inside the CrosslightCharting.Core/ViewModels folder, and write really simple code to initialize the Chart model. Here’s how.

using Intersoft.Crosslight.UI.DataVisualization;
using Intersoft.Crosslight.ViewModels;

namespace CrosslightCharting.Core
{
    public class ColumnViewModel : ViewModelBase<ColumnSeries>
    {
        private Chart _chart;

        public Chart Chart
        {
            get { return _chart; }
            set
            {
                _chart = value;
                OnPropertyChanged("Chart");
            }
        }

        public ColumnViewModel()
        {
            InitializeChart();
        }

        private void InitializeChart()
        {
            this.Chart = new Chart();
            this.Chart.Title.Text = "Agile Sprint Status";

            // setup series for In Progress
            Series inProgressSeries = new ColumnSeries();
            inProgressSeries.Title = "In Progress";
            inProgressSeries.Items = new List<DataPoint>();
            inProgressSeries.Items.Add(new DataPoint("Android", 70));
            inProgressSeries.Items.Add(new DataPoint("iOS", 42));
            inProgressSeries.Items.Add(new DataPoint("WinPhone", 20));
            this.Chart.Series.Add(inProgressSeries);

            // setup series for Resolved
            Series resolvedSeries = new ColumnSeries();
            resolvedSeries.Title = "Resolved";
            resolvedSeries.Items.Add(new DataPoint("Android", 53));
            resolvedSeries.Items.Add(new DataPoint("iOS", 32));
            resolvedSeries.Items.Add(new DataPoint("WinPhone", 40));
            this.Chart.Series.Add(resolvedSeries);
        }
    }
}

As you can see, all we did is simply initializing the chart in the ViewModel and populated two ColumnSeries for it, and add the data points for each series which will be displayed side-by-side. Crosslight Charting library includes component models that you can consume in the shared Core project. The Chart model represents the data source required for the chart, and also provides a wealth of chart configuration and settings. The Series, ColumnSeries, and DataPoint are another example of the component models available in the Charting library.

For the sake of simplicity, the above sample uses static data points as the items source for each series. If your data points are heavily reused across your application, you can definitely refactor the data points into a repository or data manager class which you can easily consume with a simple method call. Later, you can learn more about it from my sample project.

It’s also noteworthy to point out that changes to the Chart model will automatically propagated to the view, thanks to the powerful binding architecture of Crosslight. This means you can add or remove Series dynamically in your app. Of course, you can also set the items source of the Series later in the app’s cycle, such as after fetching data from the server in most real-world scenarios. Better yet, changes you made to the Chart model will not be only propagated to the view, they will be also smoothly animated from the current point to the new point. Absolutely no additional code needed, it just works!

For your reference, here’s a code snippet how to initialize the items source of a Series combined with an async data load.

protected override async void Navigated(NavigatedParameter parameter)
{
    this.Chart.Series.First().Items = await this.Repository.GetAgileStatusAsync("In Progress");
}

That’s pretty cool, right?

Crosslight Charting emphasizes not only on powerful charting capabilities, but also provides developers with easy-to-use and intuitive APIs, so you can get things done without having to worry about the heavy work. If you notice, you don’t necessarily need to define the dependent and independent axes for the chart, since Crosslight Charting comes with automatic axis detection that generates meaningful axis and range, purely based on the given data. Simply beautiful.

Preparing the BindingProvider

Since our ViewModel and Chart model is ready, let’s prepare the Binding Provider which will bind the Chart model to the view. This is where the magic will happen.

Simply create a new Crosslight Binding Provider using the item templates built into Visual Studio (Windows) or Xamarin Studio (Mac). I’ll call this ColumnBindingProvider, and I’ll put it inside the CrosslightCharting.Core/BindingProviders folder.

#region Usings

using Intersoft.Crosslight;
using Intersoft.Crosslight.UI.DataVisualization;

#endregion

namespace CrosslightCharting.Core
{
    public class ColumnBindingProvider : BindingProvider
    {
        #region Constructors

        public ColumnBindingProvider()
        {
            this.AddBinding("ChartView", ChartProperties.ChartProperty, new BindingDescription("Chart", BindingMode.TwoWay));
        }

        #endregion
    }
}

There’s not much to explain here as the code is self explanatory. It simply binds the ChartView to the Chart property of the ViewModel. That’s it. Now you have the ViewModel with complete data populated as well as the BindingProvider.

Creating the Chart for iOS

You’re now ready to create the ViewController that will host the chart in iOS. I’ll create a new ViewController called ColumnViewController inside the CrosslightCharting.iOS/ViewControllers folder. Here’s the ColumnViewController file:

#region Usings

using CrosslightCharting.Core;
using Intersoft.Crosslight;
using Intersoft.Crosslight.UI.DataVisualization.iOS;

#endregion

namespace CrosslightCharting.iOS
{
    [ImportBinding(typeof(ColumnBindingProvider))]
    public partial class ColumnViewController : UIChartViewController<ColumnViewModel>
    {
        protected override void InitializeView()
        {
            base.InitializeView();

            this.NavigationItem.Title = "Column Series";
        }
    }
}

As you see from the code above, the ViewController contains almost nothing except for the BindingProvider and the ViewModel I’ve just created before. Also note that you need to subclass the UIChartViewController class. The UIChartViewController provides a ChartView property which returns the instance of UIChartView that it manages. It also automatically registers the ChartView as an identifier, allowing you to easily bind to the chart view in the binding provider.

Simply run the project to see the Crosslight Charting in action.

You’ve just created your first Crosslight Charting application in iOS. Congratulations! Well, how about the Android platform?

Creating the Chart for Android

Well, since you’ve prepared the ViewModel and the BindingProvider, so, as you guessed it, all you need to do, is just to provide the “view” for Android platform. Let’s create an Activity for that. I’ll call it ColumnActivity, and put it inside the CrosslightCharting.Android/Activities folder.

#region Usings

using Android.App;
using Intersoft.Crosslight.Android;
using CrosslightCharting.Core;
using Intersoft.Crosslight;

#endregion

namespace CrosslightCharting.Android
{
    [Activity(Label = "Column Series")]		
    [ImportBinding(typeof(ColumnBindingProvider))]
    public class ColumnActivity : Activity<ColumnViewModel>
    {
        protected override int ContentLayoutId
        {
            get
            {
                return Resource.Layout.ColumnSeriesLayout;
            }
        }
    }
}

Again, nothing’s here except for the ViewModel and the BindingProvider we’ve created earlier. As you can see, I’ve provided a layout for this activity by creating an Android layout file inside the CrosslightCharting.Android/Resources/Layout folder, called ColumnSeriesLayout.axml. Let’s see how this file looks like.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white"
    android:gravity="center">
    <Intersoft.Crosslight.UI.DataVisualization.Android.ChartView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/ChartView" />
</LinearLayout>

The layout is simply a ChartView that covers the entire screen. I’ve also put a white background to get better visibility of the chart. Android version is done. Let’s see it in action.

Now, I want you to pay attention to how Crosslight Charting manages to create the axes automatically for you, and define the “smart” ranges for those axes that fits the screen nicely. Also notice that the legend is automatically generated for you based on the given data points. How cool is that? See, I told you that it works consistently between iOS and Android platform.

And if you need to customize anything about the Chart, whether its data source, series, or other settings, you do it only once in the  ViewModel. At this point, I hope you’ve started to get the point how Crosslight works in overall, and how it lives to its highly acclaimed 100% shared UI logic.

Learning more about Crosslight Charting

You’ve successfully created a column chart with Crosslight Charting. In addition to column charts, Crosslight Charting also supports many other chart types such as area, bar, doughnut, line, pie, scatter, step area, and much more.

If you’re interested in learning more, I highly suggest you to check out the list of topics here:

• Understanding chart series
• Understanding chart axis
• Understanding chart legend
• Understanding chart title
• Configuring chart appearance
• Understanding animation
• Enabling zoom
• Using data annotation

I also highly recommend you to check out the samples directly to see all of the features hands-on. It is available in the Git repository in this link.

You can also find the source code to this our Git repository here.

Till next post,

Cheers
Nicholas Lie

Building on rock-solid foundation, the next major iteration of Crosslight will continue to offer new components and features that make cross-platform apps development even easier and more rapidly. There are a number of key areas that we’re focusing in the upcoming release which include data access, enterprise frameworks, form builders, modern UI components based on latest platforms, as well as new component category that will surely boost your decelopment productivity even further.

In this post, I will give you a sneak preview of the upcoming features particularly for the iOS platform.

Sliding Parallax Animation

Since its initial release, Crosslight includes a rich drawer navigation component with sliding animation available for all platforms. The next release will include many visual improvements for the drawer navigation. Specifically for the iOS platform, we’ll be adding a nice, modern parallax effect alongside with the drawer slide animation. See the example below.

It’s worth noted that the parallax velocity can be customized according to your desire. It also supports the right-side drawer with consistent experience.

Stunning Spring Animation

Yep, you read it right! With just a simple property set, you can now quickly add a compelling spring animation to your drawer navigation apps. No wrestling through hundred lines of code and tedious animation works. The built-in spring  animation also handles rotation well when the drawer was opened, then recalculate the new scale size based on the updated orientation — all in buttery-smooth animation.

New Visual Effect Settings for Table View

In addition to stunning animations, the next release will also include a vast array of new, iOS 8-esque visual effects that can be applied to the table view with just a single property set.

Unlike the conventional approach which will require you to create a custom cell template just to apply the vibrancy effect, Crosslight’s enhanced table view lets you apply a visual effect to the entire table view content by simply specifying the type of the effect you wish to apply. No tedious workaround necessary. So if you’ve got dozens of table view in existing projects, you’ll really appreciate this handy time-saving feature.

Furthermore, you can also easily apply the gorgeous vibrancy effect to the selection background, which beautifully blends together with the new spring layout of drawer navigation.

Alternatively, if you prefer a solid color for the table view content (which still looks great with the parallax background btw), you might want to apply a subtle vibrancy effect to the table separator, just like how Apple did it in some of their interfaces such as in the Notification Center.

More to Come

We’ve got much more exciting stuff in the next major release of Crosslight. Beyond just UI components, the upcoming major release will also deliver the next generation data and enterprise framework which will transform the way you build reliable and scalable business-oriented apps, including support for comprehensive key scenarios on large-scale data sync. Furthermore, data access performance will never be the same again as we’re coming up with an advanced OData implementation supporting previously-impossible navigational query and aggregate projection — all programmable directly from the client.

Subscribe to our blogs, Facebook and Twitter —stay tuned for our next updates.

Best,
Jimmy

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.

• Download WebUI Studio 2012 R2
• What’s New in 2012 R2
• ASP.NET Live Samples
• ClientUI Live Samples

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.

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.

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.

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,
Jimmy

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.

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.

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.

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%.

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.

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:

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.

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.

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.

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!.

Cheers,
Handy

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.

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.

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.

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.

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.

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.

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.

Cheers,
Handy

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.
   

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

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.

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

The upcoming volume release of WebUI Studio will include a major version of ClientUI, Intersoft’s flagship UI suite for Silverlight and WPF development. I’ve shared some details of the new controls which you can read in my previous post here. In addition to many Silverlight and data-centric controls, ClientUI 6 is also strongly focused in new user interface controls for WPF development. Among the new WPF stuff are some cool windowing controls which I’ll cover in this blog post.

With its fast user adoption and exponential growth, Windows 7 is a platform too hard to ignore for developers – despite of all the recent buzz in web and cloud platform. This is further supported by the recent announcement that Microsoft has sold 450 million copies of Windows 7, which makes it “still” the world’s most popular operating system.

So what does this all mean to you? If you’re building Windows apps, I’d say that it’s now the right time to upgrade your desktop apps and take advantage of many new user interface features in Windows 7 – which will surely welcomed by Windows’ large consumer base. The first step that you can do for a quick start, for example, is to change the classic window interface to Windows 7’s new Aero-glass.

Our upcoming tools for WPF will include a new window control that takes advantage of Windows 7’s enhanced Aero-glass user experience. With just a single markup declaration, UXGlassWindow transforms your existing classic desktop apps into beautifully-looking apps with Windows 7’s slick Aero-glass user experience. UXGlassWindow is unique in the way it handles transparency and custom drawing which enables truly impressive glass interface with borderless content area, yet delivers great performance.

In our recent lab test, we used the graphic intensive control such as UXFlow to test the performance when hosted in the UXGlassWindow. Even with the 3D perspective, reflection and all sort of cool effects enabled, the UXFlow experiences remain swift and fluid. This enables you to design rich apps with UXGlassWindow without have to worry a bit on the overall performance. See the screenshot below for a sneak preview.

Furthermore, the upcoming release will also include a special glass window that integrates to ribbon bar. As you may already aware, the next release will ship a feature-complete ribbon control which offers pixel-perfect rendering, blazing-fast performance and granular control definition. I will blog more about ribbon in the next post.

UXRibbonGlassWindow features true ribbon integration to the client window area, unlike other similar solutions which simply offer a generic glass window. In addition, this special window will be rendered borderless and allows the ribbon to extend perfectly to the edge of the glass window which delivers Office 2010 identical user experiences. See the illustration below.

In conclusion, we have a wide range of exciting tools coming in the next release that enable you to build rich applications faster – whether it’s for the web or for the desktop. The upcoming new Aero-glass window controls, wonderful ribbon bar, and awe-inspiring user experiences are the key components for building powerful, user-centric business apps.

I hope this post gives you some ideas about what we’re working on and what you can expect in the upcoming release. As usual, feedback and questions are warmly welcomed.

Best,
Jimmy

Intersoft WebSpellChecker is an easy-to-use, yet powerful spell checking component for ASP.NET. In addition to typical spell check features that you expected, WebSpellChecker delivers several innovative features that are not available elsewhere, such as Microsoft Word-style red-wave underline highlight, built-in dialogbox with intuitive design, natural integration with WebTextEditor, wide cross browsers support and more.

In case you’re not aware, WebTextEditor actually includes 3 controls. So you can think it more like a Suite or Collection product. It includes 3 essential components: rich text editor, spell checker and file uploader. That means if you get a copy of WebTextEditor, then you get all three with the price of one. More values for your bucks spent — what could be better in such economic condition?

Speaking on the pricing wise, WebTextEditor is set at a very affordable pricing and is certainly in the range of competitive market price. Unlike other solutions, we deliver a full and real editor functionality without requiring you to buy separate components for spell checking and uploading — an all-in-one suite for all your form editing needs.

Allright, let’s jump into WebSpellChecker in more details.

Intersoft WebSpellChecker is the first spell checker component to provide two modes of spell checking user interface.

1. Red-wave Underline Highlight
   WebSpellChecker introduces more natural, intuitive way to perform spell checking with red wave highlight feature. To correct misspelled words, just right click on each misspell word and choose the correct word from the displayed word(s) in context menu. It makes spell checking faster and easier than ever.

   

   Please note that this red wave highlight feature can only be enabled on editable IFRAME.

2. User-friendly Dialog Box Interface
   This mode will be automatically enabled when the target control is not an editable IFRAME. The dialog box interface includes visual elements that display checked words and the suggestion words list. Just double click on a word in suggestion list or click on the Change button to correct the misspelled word with the selected suggested word, and finally click on Done button to accept all changes and close the dialog box.
   

User interaction on WebSpellChecker can be done through several options available in the context menu interface or in WebDialogBox interface.

Here are the options:

1. Change
   This option is only available in WebDialogBox mode; it is used to change the selected misspelled word with the selected suggested word.
   Alternatively, you can correct the misspelled word by simply double clicking on the suggested word.
   
2. Add to dictionary
   Often times, WebSpellChecker may show specific terms such as scientific or other valid words as misspelled words. This occurred because the specific words don’t exist in dictionary. WebSpellChecker makes it possible for users to add such words into dictionary, so that WebSpellChecker will not mark it as misspelled word again in the future. To add word to a dictionary, simply right click on the specific word and choose “Add to dictionary” option in the context menu.Note that in order to add to dictionary, the dictionary folder’s permission should be granted with write access.
   
3. Ignore
   This command is used in a scenario where user would like WebSpellChecker to ignore a misspelled word so it will be marked as correct word instead of misspelled. If there are other similar words, WebSpellChecker will not mark other instances as correct word. This command is available in both context menu and dialog box interface.
   
4. Ignore All
   Similar with Ignore command, “Ignore all” will mark the misspelled word to correct word. The only difference is “Ignore all” will mark all similar words as correct words, instead of just the selected word.
   

That’s all for now! In my next post, I’ll discuss how you can integrate spell checker into rich text editor easily, and elegantly. To learn more about spell checker features, please head to Spell Checker Features page.

For any questions, feedback, or thoughts, please feel free to comment on my post. Thank you for reading.

Best Regards,
Budianto Muliawan