Our months of hard work finally paid off. It’s finally here. With excellent craftsmanship and fine attention to detail, we’re very proud to announce the all-new and powerful WebUI 2016. The entire WebUI lineup consisting of highly-advanced 40+ web components now finally receives a truly deserved facelift.

Accessing the New WebUI Live Experience

For so long, customers have enjoyed our live WebUI demos through http://live.intersoftsolutions.com. While this experience is adequate, being redirected to another site for a hands-on experience just won’t cut it anymore. So we decided to integrate the new samples right our website. That’s right, now you can experience the new WebUI samples with the gorgeous unified modern theme, right from our website.

Don’t worry, we’ve put these buttons everywhere, so you can easily access them from various pages in WebUI, although it is very much recommended to access them from /WebUI. Should you miss this experience and open the old live samples, you’ll be greeted with the following dialog box.

Without further ado, let’s get right onto the new WebUI Live Experience.

The Home Screen

Right when you launch the new Live Experience, you’ll be greeted with a nice and modern blurred background, showcasing the flagship products of WebUI. This experience works best on modern desktop browsers supporting HTML5 and CSS3.

If you click on products such as WebDesktop and WebEssentials, you can also find a grid of sub-components in them.

WebGrid

When you launch WebGrid for the first time, you’ll be greeted with the First Experience.

This first experience sample demonstrates many of the top UI features available in WebGrid, combined with some unique features such as column freezing, filter suggestion and more.

Some of the top features demonstrated in this sample are:

• Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
• Improved user interface with a new set of fresh icons, background images and UI elements.
• New context menu engine. Try to right click on the Grid area to experience the new context menu system.
• LiveFreeze™ column freezing feature. The only column freezing implementation that perfectly simulates Excel® freezing behavior.
• Automatic Filter Suggestion. Try to right click on a cell (eg, “Owner”), then choose one of the available filter options. The suggested filter options are based on selected cell’s data type and value.
• Filter Status Indicator. When one or more columns are filtered, notice that the filter indicator status is changed to “Filtered”. This indicator helps end users to understand the current state of filters without has to display filter bar. You can click on the filter status indicator to toggle the filter state.
• SmartWebResources™. This innovative technology enable this sample to run without dependencies to “physical” client resources. All client resources such as scripts and images are retrieved directly from resource assembly.
• Declarative datasource control binding. Notice that there are no codes required for the data binding operation (see C# and VB tab).

Samples Navigation Experience

To navigate between samples, you can easily use the arrows on the left and right-hand side of the screen, or use the menu button on the top-left corner of the screen. This will open the Menu panel and you can easily jump between samples.

If you wish to go back the controls grid, simply click the Home button. Should you encounter any problems or hassles with the samples, feel free to chat with us directly using the live messenger on the bottom-right corner.

WebCombo

This the First Experience when you launch the WebCombo sample.

This sample demonstrates the unified modern theme of WebCombo and many of its key features such as SmartWebResources™ and declarative datasource control binding.

Notice that there are no code required for the data binding operation (see C# and VB tab). Try experimenting with the WebCombo controls in this page to see some unique features in action. For instance, Reports-To is using multiple selection feature combined with image column type.

WebInput

This is the First Experience when you launch the WebInput sample.

This sample demonstrates the unified modern theme of WebInput and its key features.

Some of the new features demonstrated in this sample are:

• Sleek look and feel with the all-new “Elegant” Default Style. The Default Style feature significantly reduces page output size by eliminating in-line styles. Try to view source and notice there are no styles generated in the page level.
• Ordinary input text and multiline input text features, like demonstrated in FirstName, LastName, Address, City, Country fields.
• Display and edit format features, like demonstrated in Birth Date field.
• Other edit format feature, like demonstrated in First Name, Last Name, Phone, Extension fields.

This sample also demonstrate integration between WebInput and .NET Validator Control such as RequiredValidator and CompareValidator.

WebScheduler

This is the First Experience when you launch the WebScheduler sample.

This sample is designed to model a car-rental tracking scenario – demonstrating how WebScheduler performs in real-world enterprise application. Bound to over 3000 events, WebScheduler delivers responsive user experiences regardless of the data size.

The powerful JSON technology and smart client paging rendering significantly improved the overall WebScheduler performance to a new level not possible before. This sample combines both the ViewPort™ and EventPageSize™ Client Paging rendering enabling WebScheduler to load in a flash.

Try to play around with the scheduler. Use the upper right vehicle locator for a quick jump. Click on the visual indicator on the resources area to populate the car information.

WebDesktop

This is the First Experience when you launch the WebDesktop sample.

This reference sample demonstrates the beautiful modern theme and many groundbreaking features in WebDesktopManager such as shortcuts and comprehensive window management. It also showcases the integration of various WebDesktop components to create full-fledge and immersive web applications, which include WebPaneManager, WebToolBar, WebTab, WebDialogBox, WebNotification and more. Try to double click each icon to see the WebDesktop components in action.

WebEssentials

This is the First Experience when you launch the WebEssentials sample.

This reference sample perfectly demonstrates WebEssentials component suite which comprised of 8 innovative controls, ranging from accordion, calendar, slider, to rating. WebEssentials enables you to create interactive and visually engaging modern web applications.

In this Online Resume scenario, WebAccordion is used as the main container, dividing this lengthy form into three sections. WebProgressBar is used to indicate the section completion process. The bar will be filled as users click on next. WebCalendar is used for date input and WebSlider for selecting a specific range. WebSlidingMenu is used on the right FAQ section. Click on a question and the answer is shown in a swift and smooth sliding animation.

Additionally, WebFlyPostBackManager is used to populate the section’s content on demand as users click the next button. In Section 1, WebFileUploader is used for image uploading, demonstrating its seamless AJAX upload experience.

WebTextEditor

This is the First Experience when you launch the WebTextEditor sample.

WebTextEditor is the industry’s first text editor that integrates intuitive writing tools, in-line spelling checker, and sophisticated uploading capability in a single interface – enabling you to rapidly build rich CMS application that delivers breakthrough, unique editing experience to your end users.

This sample demonstrates tight integration with Desktop Manager, Spell Checker, File Uploader and many UI components from WebDesktop to produce sophisticated, state-of-the-art CMS application that ultimately feels like a desktop word processing application.

WebTreeView

This is the First Experience when you launch the WebTreeView sample.

WebTreeView provides rich features that lets you easily create hierarchical data presentation. This powerful control incorporates numerous unique features such as:

• Data Binding
• Tristate checkbox
• Add, edit, and delete node
• Drag and Drop node(s)
• Keyboard Navigation
• Load On Demand
• Layout Manager and Structure Manager
• Auto Postback
• Flexible and highly customizable to meet your design needs
• client-side API – WebTreeView Designer

The above sample utilizes Enable Tristate CheckBox and Keyboard Navigation features.

Explore the Samples

We hope that you liked our new samples. To start taking advantage of our best WebUI release yet, feel free to download the new Premier Studio 2016 here. Happy exploring!

In this first post of the year, I’d like to share something fresh and exciting for all of you. As you might have aware, we’ve been working hard on a big release since the past few months. It’s in deed our biggest release yet so far — with major upgrades to all flagship products across all 7 platforms which include WebUI, ClientUI, and obviously, Crosslight. So what does that mean to you, and what you can expect in the upcoming release? Read on.

Whether you have a Premier subscription, or individual platform subscription, you’re getting the most out of your investment, and more importantly, get ready to kick off the new year with new goodies we’ve prepared for you.

As we’re reaching the RTM milestone, most of the product bits are ready. That said, here are some latest previews, fresh from the kitchen.

A Whole New Level of Crosslight Development Experience

Crosslight developers, rejoice! Gone are the days of assembly references nightmare. In the new release, we’re strongly focused in creating a better development experience in addition to new tools and features. Our goal is to make getting started with Crosslight as easy as 1-2-3, where you can start from a blank Xamarin project or downloading a Crosslight sample, add Crosslight package, and start writing some code.

To make that happen, we’ve created over 60 NuGet packages that you can consume with a simple click. We designed our packages to be atomic which align with the Crosslight nature: highly extensible and modular.

Unlike typical packages, Crosslight NuGet packages are designed for cross-platform targeting, allowing you to simply add a single package which automatically install to multiple projects in the solutions, including Core, iOS, Android, Windows Phone and Windows 8 projects. In addition, we also made available special packages for Xamarin Support and Google Play Services which have been strongly signed. The end result is clear, a much streamlined, hassle-free development experience.

More importantly, Crosslight’s packages implemented auto dependencies which greatly improve developer experince. Let’s say you want to add logging with Azure integration, you just need to add the Crosslight Logging Azure Insights package. It automatically adds required dependencies such as Crosslight Logging and Azure Service packages to all client and server projects.

This makes building cross-platform apps with Crosslight ultimately simple and easy. Not to mention you can now perform updates in a single click as new Crosslight updates are available. No more frustrating, error-prone manual updates.

But wait, does it work in Xamarin Studio on the Mac? Yep, absolutely. The entire goal of adopting NuGet is due to cross-platform nature of Crosslight where developers typically work with the project across different operating systems and IDEs. Using NuGet is the perfect strategy for such cross-platform development since all references are stored locally in each solution folder.

To make NuGet works the way we desire, we shipped a special package manager console add-in for Xamarin Studio. This allows you to simply type a command, and have the specified package added to all projects in the solution.

Here’s an example result of a Crosslight solution with NuGet in Xamarin Studio.

Note that although Crosslight 5 pre-release packages have been made available to NuGet for a while, they are published particularly for testing purpose. The latest submission is a near-final build which is feature-complete and stable. Surely you can give it an early look, although we recommend you to wait for a little while, at least until we released the accompanying samples next week.

Introducing Crosslight Android Material

Crosslight Android Material is arguably the most anticipated features in Crosslight 5. The new release ships thousands of new features and resolved backlogs. But what excites me the most in this release is the all-new, shiny Crosslight for Android Material, which is a result of many months of intensive engineering and meticulous UX design.

We’ve made it super easy for you to create beautiful Android Material experience. It’s all started with the new Crosslight Fragment component which provides a wealth of APIs and built-in features. Let’s take a quick look at the Material version of our popular Inventory sample.

Unlike the native Android development, creating Material experience with Crosslight is simple yet elegant. Here are some code snippets to give you some ideas how Crosslight Material APIs look like.

Want to add bar items? It’s easy.

protected override void Initialize()
{
    base.Initialize();

    this.AddBarItem(new BarItem("SaveButton", CommandItemType.Save) { ShowAsAction = ShowAsAction.Always });
    this.AddBarItem(new BarItem("CancelButton", CommandItemType.Cancel) { ShowAsAction = ShowAsAction.Always });
}

Adding a floating action button? Just a single API to call.

protected override void Initialize()
{
    base.Initialize();

    this.FloatingActionButtons.Add(new FloatingActionButton("EditItem")
    {
        Position = FloatingActionButtonPosition.BottomRight,
        IconId = Resource.Drawable.edit,
        Direction = FloatingActionButtonDirection.Up,
        HideOnScrollUp = true
    });
}

Presenting a parallax image with collapsible toolbar? Piece of cake.

protected override void Initialize()
{
    base.Initialize();

    this.ToolbarSettings.Mode = ToolbarMode.Collapsing;
    this.ToolbarSettings.CollapsingToolbarSettings.EnableParallaxImage = true;
    this.ToolbarSettings.CollapsingToolbarSettings.ExpandedHeight = 240;
}

iOS-style swipe-to-action? That’s built-in.

protected override void Initialize()
{
    base.Initialize();

    this.EditActions.Add(new EditAction("Sold"));
    this.EditActions.Add(new EditAction("Delete", true));
}

The result of the edit actions can be seen below.

As seen in several examples above, we’ve redesigned the entire Android development experience so you can define behaviors and features with simple API, minimizing the needs on AXML layout. That saves countless of hours, we’ve experienced that ourselves.

The Crosslight Android Material ships with 50+ components exclusively engineered for Material user experience. This includes a brand-new navigation view, card view, recycle view, collection view, and iOS-style split view complete with editing mode, multiple selection and all data-related functionality you would expect.

The following image shows the all-powerful SplitViewFragment.

To let you quickly learn and explore the new Crosslight for Android Material, we’re re-creating over 40 Crosslight samples to support the latest platforms and best practices. All Crosslight samples are also NuGet-enabled now, so you can now get started by simply downloading them and restore the packages. We’ll be publishing out these new samples ahead of the release so you can give it a try early. Stay tuned for our next announcement.

Big WebUI Revolution.

It’s unlike any WebUI you’ve seen before. All 40+ WebUI components are redesigned from the ground-up to leverage the latest technologies and trends in web development. In the previous post, Nicholas has shown you a preview of the upcoming WebUI redesign. But that’s only a fraction of what we’re working on. We introduced hundreds of new styles which are meticulousy designed for every component, every feature, and every little interaction detail.

In this post, I’m thrilled to show you WebGrid Enterprise 10, with its all-new, wonderful user interface design. It marries the best of both worlds — the most advanced data grid functionality and a modern user interface. Here’s how WebGrid 10 looks like at a glance.

The new WebGrid theme is designed to be timeless, incorporating SVG for all icons and glyphs, allowing your WebUI apps to look great in any screen display, from standard resolutions to iMac 5K display. To make that dream a reality, our designers have been busy creating some 500+ icons exclusively designed for WebUI, then engineered to perfection with our latest Unified Theming framework.

The redesign for hierarchical and batch update UI have been one of the most challenging tasks as they are unique features in WebGrid. You won’t find any design references on jQuery or Bootstrap-based grids which are mostly a plain table. So we invented one for you.

Pivot chart, one of the flagship features in WebGrid, has been completely redesigned along with the ribbon, pivot area, drag-drop interaction, data filter experience and more.

And even to every little details, such as sort indicator, filter elements, and context menu. Everything is new in WebGrid 10.

How about other WebUI components? Definitely you won’t be able to build a full-fledged web app with only a single WebGrid component. We’ve a lot of new and interesting UI goodies to offer. For instance, WebPaneManager now allows you to create various modern layout such as those found in Apple Mail app, OneDrive, or iCloud. The entire lineup of WebDesktop, WebEssentials, and WebScheduler are joining force this big WebUI revolution.

We can’t wait to deliver these exciting major WebUI release to you soon. Stay tuned for our next announcement when our new demo is published.

Stunning Charts for Enterprise Reporting.

As if it weren’t enough, the 2016 release also ships a major upgrade to ClientUI, the enterprise developer’s choice of toolset. We’re strongly focused in creating new features that make enterprise desktop apps development even easier.

You can now add professional-looking charts right in your reports. It works the way you expect it to be — drag the chart to the designer surface, bind it to a data source, and choose a chart type from the intuitive Chart Designer. Voila! Here you go.

The following images show the chart designer and the report viewer respectively.

We offer dozens of chart types commonly used in financial and enterprise reports, including bar, column, pie, doughnut, bubble, scatter, range and much more.

That’s not all. The new chart feature will be also available and fully supported in WPF platform. In the previous release, the reporting suite are only partially available in WPF. And starting in this release, we’re pleased to announce that all ClientUI components and features in Silverlight have been made available in WPF. Our WPF team has been working hard to optimize every control and features so they run with best performance and flawlessly in WPF as well as in the latest Windows 10 release.

And as a bonus, ClientUI 12 will include a report conversion tool for Crystal Report files. So if you’re tasked to migrate a bunch of CR reports, you’ll love this small yet time-saving tool.

Coming Soon

Premier Studio 2016 is slated for a public release on mid February 2016. Our team is currently making final touch to the products and preparing an even better development experience to everyone. Last but not least, we’re also working on a new series of getting started guide and improvements to over hundreds of documentation pages.

Last but not least, we’re giving out a free 3 month extension for all expiring subscriptions between Nov 2015 and Jan 2016. We’d love to have you joining us to celebrate our biggest release yet.

At the meantime, we want to hear from you what new tools/features in the upcoming release that you anticipated the most. We’ll also welcome any feedback!

Best,
Jimmy

As outlined in our 2013 product roadmap, we’re going to have very exciting new products coming up soon. There will be entirely new kind of lineups that we’ll introduce such as reporting and cross-platform native mobile development tools. On top of that, we will also be making available several major product upgrades to the ASP.NET lineup which include WebScheduler, WebTextEditor, WebEssentials, WebInput and the rest of the ASP.NET components.

All of the upgraded components will feature full HTML5 and CSS3 support. This means that – for the first time ever – our entire ASP.NET lineup have fully support HTML5. This allows you to use any combination of the components in your HTML5-powered web apps. Furthermore, we’re implementing nearly 90% of user-driven feature requests and reported issues.

In this post, I’ll share some details about the improvements and new features made available to the WebTextEditor and WebEssentials.

Improved Spell Checker and Redesigned WebTextEditor

The WebTextEditor suite is one of the products that will receive major updates in the upcoming release.  The WebTextEditor suite includes three components: text editor, spell checker and file uploader. All of them

One of the most frequently requested feature is the tighter integration between spell checker and text editor component. When integrated to text editor, the spell checker component has now supported spell checking in multiple sections. This allows users to simply press the spell checker button, and it will go through all the sections available in the text editor. See screenshot below.

More importantly, all the three components in WebTextEditor now fully support HTML5. This is a significant upgrade due to the various different editing behaviors across multiple browsers – even when they run on same HTML5 doctype.

Furthermore, the next generation WebTextEditor will sport the new Modern UI design consistently throughout the entire user interface elements – from the look and feel, colors, icons, panels to the status bar and tool bars. It’s important to note that, unlike competing products, our Modern theme is not just a simple visual styling, many various elements and layout are also revamped to look best with the Modern theme. Take a closer look at the screenshot below.

And here’s another shot showing the Modern theme with the enhanced Gallery task pane, context menu, dropdown button, and the rest of the input controls.

The same goes to the spell checker component. When used in standalone mode, the dialog box now sports Modern UI theme as well.

All-new Modern UI Themes

In the upcoming release, WebEssentials will also receive major version upgrade. It will  join the flagship product family to fully support HTML5 that renders identically in all modern browsers today.

As Microsoft-based software shop, you may have feel the pressure from your customers to align your products’ user interface to match the latest design from Microsoft. You’re in luck – all 15+ user interface components in the WebEssentials umbrella will sport Windows 8 style (“Modern”) user experiences. Get a closer look at the WebEssentials components with the Modern theme design applied. I hope you liked them!

WebAccordion

WebRating

WebCalendar

WebProgressBar

WebSlider

WebListBox

In addition to the new theme, WebListBox will include a much anticipated feature: Horizontal orientation. You will now be able to use the listbox as scrolling toolbar or navigation menu with intuitive user experiences.

WebSlidingMenu

WebRibbon

Summary

In this blog post, I’ve shared some high-level details toward the upcoming release for the ASP.NET lineup. This will be a very exciting release as we’re renewing all our ASP.NET components to support the latest technology. None left behind! This means that you’ll be able to use any combination of our tools in your HTML5-based project without worrying the compatibility issues across major browsers, including recent ones such as Firefox 20 and Internet Explorer 10.

And with the all-new Modern UI design theme made available to the entire user interface components, you can align your application’s look and feel with the latest Microsoft’s user interface design, and further take your application to the next level.

In the next post, I will share the rest of our ASP.NET product family that will join the HTML5 and Modern UI revolution, including WebScheduler, WebInput, and WebTreeView. Thanks for reading, and stay tuned for the next post!

Warm Regards,
Handy

First of all, Happy New Year! I hope you enjoyed building apps with our tools in the past year, and we look forward to work with you again in 2013! We’ve plenty of exciting new products that we’re planning in this new year, and we’ll update our roadmap shortly in the next few weeks.

In case you missed the news, we’ve shipped the 2012 R2 volume release last month. You can download it here, and check out the what’s new list here. In addition to the new products listed in the “what’s new” list, the R2 release actually ships much more new features and enhancements that weren’t listed in the website. For instances, we also introduced sophisticated “cell locking” feature in UXGridView, brand-new theme manager, performance improvements in all combobox-variant controls, new usability feature in UXRibbon, and much more.

Where can I see all the new features and enhancements, you might asked. It’s in the documentation that you can access online today. The online product documentation features lightweight navigation interface similar to those in Help Viewer. You can easily browse through each topic from the left-side tree navigation, or from the breadcrumb at the top.

I’ve compiled several interesting topics that I think you should check out:

• What’s New in ClientUI 8
• Theme Manager Overview
• UXChart Overview
• UXBreadCrumb Overview
• UXQueryBuilder Overview
• UXPropertyGrid Overview
• Walkthrough and How-to Topics

In addition to the online documentation, we’ve also recently updated the online samples for ASP.NET. The online samples now reflect the latest release which includes all-new WebDesktop samples demonstrating HTML5 and CSS3 support. In addition, many of the samples have been updated to the latest Modern UI styles.

Among dozens of WebDesktop controls that receive full HTML5 support, one that is quite noteworthy is the WebPaneManager control which undergone major surgery in order to achieve “fluid layout” that works in HTML5 browsers. If you’ve worked with layouting in HTML5, I trust you already foresee the difficulty level to create “fluid layout” that supports dynamic width/height, not to mention the support for nested groups and resizing and other UX features. Luckily, you can easily achieve complex layout now using the enhanced WebPaneManager control. See the following screenshot for example.

The beauty of the new WebPaneManager is that it’s very lightweight – thanks to the revamped layout from TABLE to DIV, and more importantly, it supports combination of fluid and static width/height – all without requiring scripting! This means that when users resize the browser, they’ll see real-time response. We haven’t seen a control with such capabilities thus far in the market, so we’re pleased to be the first delivering such innovative controls to you.

Well, you can check out the WebPaneManager samples and the rest of updated ASP.NET online samples here. Enjoy!

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

This is a great opportunity to build your next RIAs using our rich Silverlight UI controls. Furthermore, we will deliver over 50 new Silverlight UI controls by April 2010, giving you more power to build rich and interactive business applications with full integration with the upcoming Visual Studio 2010 and many more. To learn more about our upcoming release, please contact me to request the product roadmap and see for yourself.

This promo is valid until 28^th February 2010. Please click here for more details or email me at nathania@intersoftpt.com for any questions.

Warm Regards,
Nathania