Author Archives: martinlie

Webinar: Building native cross-platform enterprise apps with Crosslight 2

Crosslight 2 introduces new powerful enterprise application framework which includes everything you need to build data-driven apps fast, from remote data retrieval, generating domain models that is shareable in both client and server and much more. Built on top or rock-solid MVVM pattern, Crosslight advanced mobile services cover a wide range of enterprise business scenarios, such as sending push notifications, perform UI-agnostic social network operations, loading data and image asynchronously, and much more. Better yet, Crosslight comes with full Visual Studio integration support and you can build powerful connected apps without leaving your favorite IDE.

Join us for a 3-days webinar starting from 10th – 12th June 2014 to learn how Crosslight 2 empowers you to build gorgeous apps with advanced Crosslight UI and services across four platforms in dramatically less time with less effort. Click here to register your seat today. Find out more about Crosslight here: http://www.intersoftpt.com/crosslight/.

Cheers,
Martin Lie

Intersoft Studio Special Offer 2013

To celebrate the upcoming Visual Studio 2013 sim-ship launch, I’m happy to announce our latest special offer promo for all MSDN subscribers around the world. This exclusive special offer gives you 20% off for new purchase of any Intersoft Studio subscriptions. On top of that, we will add another subscription to your account — free of charge.

Get it whilst its hot! Click
here to learn how to take advantage of this great offer. You can also contact me for more information about this offer.

Warm Regards,
Martin

Intersoft Product Survey 2013

The arrival of Windows 8 adds more choices to the platform stack that mobile developers should consider. So my question is, do you plan to build Windows 8 apps, or perhaps you already built one? As we’re planning our roadmap ahead, we’d love to hear from you – which platforms will you build your next apps on, the challenges you’re facing, and what tools you need to get your jobs done right.

Join our 2013 product survey and place your vote so we can align our next product roadmap to your development needs.

Your participation is an effective way to present your thoughts and opinions about our products and service to the management of Intersoft Solutions. I do believe that your valuable feedback would be very useful to help us improve our products and services in the future.

If you have any questions or technical difficulties, please don’t hesitate to drop an email to me at martin@intersoftpt.com.

Thank you for your time and participation.

Regards,
Martin

New Business-inspiring Samples in ClientUI 8

We’re excited to announce the latest WebUI Studio 2012 R2 release which is now immediately available for download here. In this R2 release, we’ve added dozens of new powerful controls for Silverlight and WPF that users have been waiting for. For ASP.NET, we’ve completely redesigned the new WebDesktop from the ground up to support the latest web standards such as HTML5 and CSS3.

To discover new controls and features that we’ve included in R2 release, you can visit What’s New in 2012 R2. In this blog post, I will share some of the featured reference samples demonstrating the new products, as well as reviewing the key features.

Below are some of the top new samples that go to my favorite list.

  1. Sales Dashboard
    UXChart is a collection of advanced charting control coupled with powerful MVVM data-binding capability for your Silverlight and WPF business application. UXChart takes any kind of data and transform them into beautiful charts that can leverage your business presentation.In this sample, UXChart is used to display the sales overview of Northwind’s merchandise over time while demonstrating its selection ability. Notice that there are 4 different types of chart, which are pie, doughnut, smooth lines and multiple series column charts. If you select one of the pie area in the upper left corner chart, the selected pie area exploded as the rest of the charts moves fluently to show the data corresponding to the selected area. Explore the sample.
    UXChart - Sales Dashboard
  2. Revenue Analysis
    UXChart is created on top of an advanced canvas that provides reliable support for interactivity features such as zooming, panning, and box selection.This sample shows UXChart amazing zoom capability in a Profit / Loss analysis scenario. The zoom options are enabled by default which allows users to easily zoom into specific area of the chart. You can move the zoom slider or scroll your mouse wheel to zoom in/out on the cursor position. See that the content seamlessly shrink and grow while maintaining the perfect gridline thickness thanks to UXChart advanced rendering technique. Pan through your data while maintaining your zoom level by dragging the slider or canvas to any direction. Try double clicking on the chart canvas to activate the step zoom feature. Explore the sample.UXChart - Revenue Analysis
  3. Sales Drill Down
    UXChart supports data drill down. In a drilldown chart, the data plots in each chart (for example pie slieces in Pie chart or columns in Column chart) act as hotspots to reveal the breakdown values of the selected data. With UXChart’s solid architecture you can even create multiple levels of drilldown.This sample created to showcase UXChart built-in drill down capability in a Product List scenario. Along with presenting exquisite charts, UXChart also pays close attention to every element involved in the charting control in order to bring state-of-the-art user experiences. Enjoy smooth animation as UXChart loads your data for the first time or during value changes. Both axis intervals are capable of shrinking and growing dynamically to cope with fluctuating data during zooming operation. Explore the sample.SalesDrilDown
  4. Hospital Management
    UXChart is a suite of business-oriented charting toolset equipped with a diverse list of chart types. It comes with more than 20 different chart types including bar, column, line, area, smooth line, smooth area, step area, donut, pie, bubble, radar, polar, scatter, stacked bar, stacked column, and more.In this sample, UXChart is used to present a hospital bed management dashboard. The Weekly Accuracy of Discharge Prediction chart shows how UXChart can bring more dynamics in data illustration by customizing the x-axis into percentage display. With UXChart, you don’t have to move your cursor on top of a particular data point to view its value. Try to move your cursor near any data points and the intelligent nearest-point-finder feature will trigger the intuitive tooltips to reveal the exact value behind the chart for accurate data reading. Explore the sample.HospitalManagement
  5. Web Analytics
    UXChart is engineered from the ground up with solid architecture to ensure blazing-fast performance and maximum scalability. It offers full support for MVVM data binding which unlocks the possibility of real-time chart update within your business application.This sample shows how UXChart can be used to display real-time traffic data and its associated data. With UXChart you don’t have to try hard pointing your cursor in order to read values behind a data point. Try to move your cursor near any data point and the intelligent nearest-point-finder feature will trigger the intuitive tooltips to reveal the exact value behind the chart for accurate data reading. Notice how the tooltip glides smoothly from one data point to another as you move your cursor around. Explore the sample.WebAnalytic
  6. Housing Filter
    UXQueryBuilder is an advanced data filtering control that allows user to dynamically build complex queries through an intuitive user interface. UXQueryBuilder also supports server-side filtering through QueryDescriptor, FilterDescriptors or client-side filtering through CollectionView. In this sample, uses QueryBuilder to filter a collection of houses in a house finder scenario. Explore the sample.HousingFilter
  7. Heritage Property Finder
    UXPropertyGrid is a versatile editor control that displays the properties of an object, which support all kinds of data types including text, boolean, date-time and even advanced data types such as enumeration.UXPropertyGrid allows multiple object properties to be displayed and edited. Therefore, this sample uses this control to edit a collection of house properties. Try holding Shift key while selecting several houses and notice how UXPropertyGrid lists all properties that are common to the two objects.PropertyFinder
  8. Customer List
    UXPropertyGrid provides built-in data binding support to read property values from a data source. With full MVVM support, you can easily populate a data collection property from a ViewModel. In addition, the component model annotation support allows the control to read the property’s settings automatically based on the specified attributes, such as the display caption, format string, maximum length, and many others.CustomerList
  9. Windows-style File Explorer
    UXBreadCrumb is an advanced navigation control that allows users to easily navigate between pages, with the familiar look of Windows Explorer navigation. UXBreadCrumb combines the address bar and menu functionality in an elegant single interface, enabling users to perform navigation in simple point-and-click manner.This sample shows how to emulate Windows-style file explorer while highlighting UXBreadCrumb’s powerful features such as load-on-demand and full MVVM support. Try to navigate around different nodes and notice that the icon and address are automatically synchronized to the current navigation target. Thanks to smart resizing feature, UXBreadCrumb automatically resize and adjust the URI into ellipsis text when the URI is exceeding the limit.FileExplorer
  10. Help Viewer
    UXBreadCrumb unleashes its maximum potential when a sitemap data is provided. It is automatically synchronized to the current navigation page. Users will also appreciate the sleek interface, ISO-compliance modal input and intuitive keyboard navigation.This sample demonstrates the UXBreadcrumb’s dynamic sitemap reading capability by populating the navigation nodes from external XML file. This control full supports both mouse and keyboard for navigating and editing. Try to use keyboard arrows to navigate between items and press F2 to enter editing mode where you can directly type in the target URL. Alternatively, you also can click the arrow down icon to enter the editing mode.HelpViewer

To find out more samples and experience it for yourself, please visit ClientUI Live Samples.

Feel free to download your copy here. And while waiting for the download, be sure to check out the complete what’s new list here. Existing customers with valid subscription can obtain the latest WebUI Studio from Developer Network, under My Components shortcut.

Any comments or feedbacks are welcome. If you have any questions regarding your account and subscriptions, please feel free to reach me by email.

Thank you and have a nice day.

Cheers,
Martin Lie

Introducing WebDesktop 4 – Final Part

Continuing my blog series on our upcoming release, I’m pleased to share the final part of WebDesktop’s development for HTML5 and CSS3. In my previous posts, I’ve shared the development progress of converting WebDesktopManager controls into HTML5. You can check the previous posts here: Part 1 and Part 2. In this final part of my post, I’m going to cover the new features for the rest of WebDesktop controls such as WebDesktopManager, WebDialogBox, WebPaneManager, WebSplitter, WebNotification and many others.

In version 4, WebDesktop has been refined to fully support the latest web standards. This allows you to use many of the advanced WebDesktop features in your next-generation web applications and at the same time leveraging cutting-edge technologies such as HTML5 and CSS3. With our latest innovation of “Windows 8 ready” Component Designer, you can easily configure every properties and styles using the latest Visual Studio 2012.

WebNavPane

WebNavPane is one of the many UI controls demanded by application developers. Unfortunately, the existing WebNavPane was designed for HTML4 which mainly uses table for layouting. The first time when we convert WebNavPane to HTML5, we encountered issues with the layout such as shown below:

WebNavPane before modified in HTML5

As you can see, WebNavPane’s border doesn’t get rendered properly and the container becomes smaller. After improving the control to support HTML5, the layout and rendering now shows a perfect results, such as shown below:

WebNavPane after modified in HTML5.

Furthermore, we’ve also added a metro style in the latest WebNavPane. This control has been redesigned and developed to fully inherit the styles in Windows 8. And of course, we’re ready to give the best UI in styles and performance in the latest Windows 8.

WebNavPaneMetro

WebCallOut

Previously, we’ve discussed about the layout issues occurring in WebCallOut when it is set to HTML5 in the beginning. The rendering is completely messed up and the pointer is also offset from the correct position. After numerous improvements made, we’re happy to introduce metro styling in the latest WebCallOut. The metro styles consist of Metro Orange, Metro Silver and metro Simple such as shown below:

WebCallOut Metro Simple

WebCallOut Metro Silver

WebCallOut Metro Orange

WebExplorerPane

We’ve extremely improved WebExplorerPane from its layout. Rendering its layout in HTML5 is much more complex than HTML4. However, we’ve managed to overcome these obstacles and proudly introduced the new metro style in the latest WebExplorerPane.

WebExplorerPane Metro Style

It perfectly renders and matches the “Windows 8-ready” styling starting from its layout, font color and style and many others.

WebDesktopManager

As we’ve discussed in previous Part 2, there are numerous enhancements in the window and desktop rendering. Since the new specification in HTML5 introduces a number of limitations of TABLE usage, therefore we’ve decided to remove all TABLE usage and use DIV instead.

WebDesktop 4 has added 3 new features to give users freedom in perform styling over WebDesktopManager. Now, the icon in Taskbar is no longer depending on window or shortcut. They can be determined by defining the TaskBarImage property in WebDesktopWindow or WebDesktopShortcut.

You can perform styling to container when using complex image border type. In the previous version, the container’s style will not be assigned in the container itself when using complex image. Starting from WebDesktop 4, you can easily perform styling by setting the ApplyContainerStyle property to true.

WebDesktopManager Metro Style

WebDialogBox

The changes made in WebDialogBox is almost similar to WebDesktopWindow. By inheriting WebDesktopWindow’s structure, WebDialogBox is rendered using DIV instead of TABLE. With HTML5, the rendering of each browser will be more consistent and more solid than HTML4. WebDialogBox also supports CSS3 for its styling.

Introducing Metro theme for WebDesktop

Since the invention of “Metro” design language, Microsoft has been redesigning all its software products toward the modern UI design, including the recently released Microsoft Windows 8. As a leading tool vendor, we’re pleased to be the among the first to support Metro design language.

That said, our designer team has designed a comprehensive Metro theme that can be easily applied to all existing WebDesktop controls such as WebDesktopManager, WebDialogBox, WebTab and so on. Each control theme is thoughtfully designed to get the right look and feel particularly when it comes to contrast colors. See the screenshot below.

WebDesktop Metro Style

The following screenshots show the Metro theme running on WebDesktop 4. Remember, these are real web applications built on ASP.NET, and run on your favorite browsers.

WebNavPane Metro Style

Outlook Metro Style

The new WebDesktop 4 will be available in the upcoming R2 release which is going to be shipped anytime soon in this December 2012. Be sure to stay updated with the next announcement.

Cheers,
Handy

October Special Double Offer

Good day to all of you.

In this opportunity, I’d like to announce our special double promo in this month. If you purchase any of WebUI Studio subscription license, you will be given a direct 20% discount. Then, you will have a privilege to enter our Wheel of Fortune page to claim your prize. For more information about this lucky promo, see the following link:
http://intersoftpt.com/Corporate/News.aspx?page=News&EventId=211

The promo will be effective from 10th October 2012 until 30th November 2012. Don’t miss out this special promo! Grab your WebUI Studio subscription license today through our online store.

Please contact me immediately at martin@intersoftpt.com to join this limited offer.

Thank you and look forward to seeing you in our Wheel of Fortune promo.

Regards,
Martin

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

Cheers,
Handy