Tag Archives: HTML5

Announcing Intersoft 2013 Product Roadmap

We’ve recently completed the product planning and strategy for the rest of the 2013 fiscal year. There are a lot of new exciting direction in our product lineup which is exactly what I want to share in this blog post. Many of our roadmap will be based on your feedback – thanks for participating with our 2013 product survey. If you haven’t aware with the survey, please click here to participate and let your voice be heard.

Flashing back at a glance, 2012 was such an amazing year as we delivered hundreds of new controls to various .NET development platforms. We delivered major line-of-business controls which include a high-performance tree list, a multitude of data-aware controls such as pageable combobox, multiple selection combobox, innovative query builder; Windows 8 style navigation controls as well as the industry’s first charting suite with full MVVM and data binding support. In addition, all flagship ASP.NET components have been updated to support latest browsers, and several have been redesigned to support HTML5.  As you can see, it was really one of our most aggressive releases in our release history.

As you may have aware, all our product lineup so far (until 2012 R2) are mainly based on Microsoft’s .NET technology and strongly focused on line-of-business application development for the Web and Desktop platforms which include ASP.NET, Silverlight and WPF. To the date, we’re proud to empowering hundreds of thousands developers worldwide with an indispensible toolset that enables them to build .NET based business applications easily, quickly, and rapidly.

While the web and desktop platforms will still be around in the foreseeable future, we learnt that the software development landscape and paradigm has shifted aggressively to target mobile devices. Of course, that’s not a new story as the mobile development ecosystem has existed since the advent of iPhone and Android devices. Back at those times, most apps were targeting consumers – and there are very little needs or demands in the business or enterprise spaces for mobile apps. However, based on our extensive research and development since the past year, and based on the demands from our enterprise customers, we’ve seen the light shed on the mobile world. Read on.

Enter the Mobile World

At Intersoft, our ultimate mission is to create incredibly powerful and easy-to-use tools that enable rapid business application development. From ASP.NET, Silverlight to WPF – we’ve accomplished our mission very well. This year, we will continue our development journey to the other side of the world – the mobile development world. I’m very excited to announce that the mobile tools development will now become our priority and we’re committed to deliver successful mobile tools – just as we’ve successfully delivered hundreds of ASP.NET, Silverlight and WPF tools.

Why entering the mobile development world, you might ask. There are a number of reasons why we finally decided to jump into the mobile bandwagon, but I’ll try to keep my answer simple: because it’s the future of computing. Sure, people will continue to use their PC at home (as in Gates vision “One PC at every home’s desk”), but today people no longer spent most of their time on the PC – thanks (or blame) to the powerful ARM-based mobile devices that allows you to do many productivity tasks on the go.

The same paradigm has now entered the small and medium business as well as larger enterprises. Ask yourself this question, why would you need a PC on your office desk if you can login to your corporate network and check your sales reports, signing documents, review executive dashboards and many more – all with the small mobile device in your hand? Furthermore, with low-cost and affordable mobile devices today, businesses have started to reveal the benefits and advantages of mobile over PC such as reduced TCO and maximized employees productivity. As businesses increase their interest and demands on mobile, that will mean one thing in the end: increased demands on business mobile application development

Ultimately, that will simply mean one thing to you: get yourself ready for mobile development. And to us: get ready to deliver mobile tools for rapid business apps development.

Mobile Development Challenges

As a third party .NET vendor, it makes sense to choose the easiest and closest route to enter the mobile development, and that would be definitely the Windows Phone or WinRT since both are still based on .NET platform. The main problem, however, is the relatively slow adoption rate which makes it less appealing on the business side. This is understandable because enterprises cannot control what mobile devices their employees and consumers use. Most requirements that we heard from our enterprise clients will be to support at least two of the most owned mobile devices. Needless to say, that will definitely fall to iOS and Android based devices. As we see it, one of the biggest challenges here is multiple mobile platforms support, just like multiple browsers support in the Web development.

Obviously, we all loved .NET and C# which has been our mother language for decades. And also to the Silverlight and the great MVVM pattern that allow us to layer our applications in a way that enables truly scalable and extensible architecture. As you discover the mobile development, you will find horrible platform divergences and unfortunately none of your favorite skills are applicable in these mobile native platforms, for examples, iOS uses Objective-C while Android uses Java. Alternatively, you may want to resort to HTML5 – only if your users afford mediocre and compromised user experiences.

If you’re Silverlight or WPF developers, you may feel – at a glance – reaching the bottom of your career. You might be unfamiliar with Objective-C or Java, yet you hated JavaScript. It’s a rather difficult choice – go learn Objective-C, Java and WinRT; or anxiously waiting for new clients wanting to build Silverlight apps. None of these choices sound appealing.

But wait a second, what if it’s possible to write native iOS and Android apps leveraging exactly the same .NET skillset that you already accustomed to? And takes it even further, what if you can build iOS and Android apps using your favorite Silverlight-style data binding and MVVM pattern? That would be too good to be true, you might think. If such “possibility” exists, that will not only save your careers and make your development life a lot easier, but more importantly, it opens up a whole new opportunities to explore and a lot of potential business apps that you can contribute for the world.

Frankly speaking, we’ve been extensively researching to look for that “possibility” in the past years. We were silent and seemingly have no progress whatsoever when it comes to mobile. That’s because we want to ensure everything before we gave you that shed of light, the news of the existence of that “possibility”. We’re almost there, read on.

Introducing Crosslight

So here we are. I’m honored to be the first to announce our mobile tool project codename “Crosslight”. Yup, Crosslight. As if it’s the reborn of Silverlight, Crosslight enables you to use the same Silverlight and MVVM skillset to create cross-platform mobile applications. And so that’s how the name was coined. I tend to think the philosophy this way “The light to the cross-platform mobile development”.

If you’ve developed MVVM-based Silverlight apps using our ClientUI library, you’ll find pretty much the same thing in Crosslight. You’ll find delegate command, event aggregator, IoC container, and everything you loved about MVVM such as ViewModel, and converter. So far, we’ve managed to revive many of the data binding capabilities found in Silverlight such as two-way data binding, converter, nested property path binding, collection binding, item templating and more – and we have recreated all those capabilities to both iOS and Android platforms.

At the end, you’ll be able to create business apps that are not only targeting iOS and Android, but also targeting Windows Phone 8 and WinRT. I hope you’ve got it clear at this point, Crosslight is all about modern mobile development, from iOS, Android, to Windows Phone 8 and WinRT. Along the way, we will be also introducing our new technology partner who provides non Microsoft implementation of .NET that makes Crosslight a reality. Stay tuned for the upcoming announcement.

We believe that the best and the right direction for the mobile development is to build mobile apps using the native SDK of each platform – instead of hybrid HTML5 apps. Now that you can build amazing mobile apps with C# and MVVM, there are no reasons for not building one with native SDK which offers the best, uncompromised user experiences.

Soon – hopefully before the end of March – you’ll be able to beta testing Crosslight and start building your first cross-platform, MVVM-based mobile business apps.

Silverlight, WPF, ASP.NET and HTML5

Now that we’re going to have Crosslight, what’s going to happen to Silverlight and the rest of .NET platforms? Needless to worry, we’re highly committed to the existing platforms who make the most of our customer base. We will continue to make new best-of-breed components for Silverlight and WPF – particularly the new Reporting lineup which has been in development since last year. This reporting lineup is huge and noteworthy – because we’ll bring in new technologies that weren’t possible previously. That’s mainly because most reporting players in the market didn’t build their Silverlight/WPF reporting product from the scratch, but simply porting from .NET 2.x based which used old and outdated techniques.

On the ASP.NET lineup, this year we will have major upgrades to all our ASP.NET components. And when we say “all”, we really mean it. This simply means that all ASP.NET components will be redesigned to support HTML5 and CSS3, including WebEssentials, WebInput, and WebTreeView. Also expect new version of WebScheduler with improved day light saving and time zone support, as well as new version of WebTextEditor with IE10 support and much more.

Wrapping up

At this point, you can see for yourself that 2013 is going to be a very exciting year for all of us. The new Crosslight, and new tools across Silverlight, WPF and ASP.NET will keep us busy enough throughout the year. In the upcoming 2013 R1 release, we will be the first vendor to offer toolset with the broadest platforms support– ASP.NET, Silverlight, WPF, iOS, Android, Windows Phone and WinRT.

This is probably the longest product roadmap blog that I’ve ever wrote so far. But I hope you enjoy reading and learning our roadmap, and hopefully it gives you insights about our direction, where we will spend our time and effort the most, and what you will receive as part of your on-going annual subscriptions. So the next thing that you should do is checking your account and make sure your Premier subscriptions are up-to-date for the rest of the year.

To find out more details about our 2013 roadmap, please logon to Intersoft Developer Network using your Intersoft ID to read the complete details about the upcoming products as well as the release schedules. After logged on, bring up the Home window, then click on the link in the Announcement section to open the product roadmap window.

For prospect customers who are interested in our 2013 roadmap, please send your email to sales@intersoftpt.com to request a copy. We’ll send you a copy of NDA to be signed in order to receive the roadmap details.

Best,
Jimmy

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

Getting ready for HTML5 components – Part 1

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

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

Layouting in HTML5

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

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

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

Rendering WebCallOut

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

WebCallOut's layout issue when using HTML5.

WebCallOut's pointer offset when using HTML5.

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

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

WebCallOut's perfect layout after modified.

WebCallOut's pointer displays correctly after modified.

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

Rendering WebTab

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

WebTab's structure issue when using HTML5.

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

WebTab's perfect structure after modified.

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

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

WebTab's complex images issue when using HTML5.

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

WebTab renders complex images perfectly after modified.

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

Cheers,
Handy

WebUI Studio 2012 is here!

The wait is over. We’re incredibly excited to announce the immediate availability of WebUI Studio 2012 today! The new release ships major upgrades for the flagship ASP.NET data controls such as WebGrid and WebCombo – featuring full HTML5 support, and includes dozens of must-have data controls specifically designed to address line-of-business scenarios in Silverlight/WPF application development.

You can download your copy here. And while waiting for the download, be sure to check out the complete what’s new list here.

In addition, you might want to check out many updates that we’ve put together in this release including the live samples for both ASP.NET and Silverlight, as well as online documentation. The WebGrid documentation is now completely revamped to match the new documentation standards and guidelines that we introduced in ClientUI.

Along with the new release, we’re pleased to announce the launch of Intersoft’s new website design. Completely revamped for the best user experiences, you can now get around faster and easier than ever before. And with clean yet elegant design, you can focus on the information and content better. We hope you liked our redesigned website!

Intersoft's new home

Last but not least, enjoy WebUI Studio 2012! Again, click here to download the new 2012 today if you haven’t. We hope you love the new release as much as we love building it!

Note: For active subscribers, you will receive the new license keys within 24 hour. Make sure you have whitelisted the intersoftpt.com domain to avoid communication problems.

All the best,
Jimmy

WebUI Studio 2012 for ASP.NET Goes HTML5

Earlier this year, we conducted a short product survey to all our customers and industry partners. Nearly 92% of all respondents indicates that they are interested in HTML5 development, followed with Silverlight 5 at approximately 85% – up 15% since the previous survey last year. We thoughtfully consider the survey results to drive our products development roadmap. That said, we’re pleased to announce that the upcoming 2012 release will include two major ASP.NET releases: WebGrid Enterprise 8 and WebCombo 6.

Full HTML5 and CSS3 Support

As written in our 2012 product roadmap, HTML5 is going to be one of our key focuses in this year’s releases. In the first volume, it’s confirmed that we’ll deliver the next major version of WebGrid Enterprise and WebCombo – both are the flagship data controls in our ASP.NET lineup.

The new WebGrid and WebCombo have been redesigned to fully support HTML5, which includes compliance to the HTML5 doc type and removal of the obsolete markups. The control rendering has been significantly revamped in order to achieve pixel-perfect layout in HTML5. And better yet, we employed HTML5 adaptive rendering technique so you can expect 100% backward compatibility with HTML4 and XHTML doctype. This means that your existing projects that are still using HTML4 or XHTML doctype will continue to work as is.

With full HTML5 support, you can expect consistent results in terms of layout and behaviors across popular HTML5-ready browsers such as IE 9, Firefox 12, and Chrome 18. For example, the pivot charting feature in WebGrid now renders flawlessly across all browsers, including the Ribbon and all UI interactions such as drag-and-drop, resizing, and so forth.

HTML5 Support for Pivot Charting in WebGrid 8

When the control detects the use of HTML5 doc type, it will automatically leverage CSS3 which leads to smaller footprint and more elegant results. For instances, WebCombo 6 leverages many of the approved CSS3 specifications such as the round corner and drop shadow feature. Note that in pre-HTML5, the round corner was achieved with multiple DIVs and a number of quirk styles. These solutions no longer apply in HTML5, and has been replaced with CSS3 starting in the upcoming WebUI Studio release.

WebCombo 6 leverages CSS3 for round corner and shadow effect

No Features Are Too Minor

When we talked about HTML5 support, we really meant it. We’ve gone the great length and depth to revive all features to work perfectly in HTML5 – regardless of whether they are major or minor features.

For instances, a small yet useful feature such as tree lines visibility in WebGrid is now supported in HTML5. Rather than forcing our customers to disable this feature, we’ve revamped the entire rendering markup to get it working in HTML5 with consistent results across all browsers. The following screenshot shows the WebGrid control with nested hierarchical feature enabled running on IE9 standards mode.

Full HTML5 Support in WebGrid 8

Most WebGrid’s key features have been enhanced to support HTML5, from column freezing, filtering and paging, keyboard navigation, column moving and resizing, to custom editors, client-side binding and smart batch update.

All key features are revamped to fully support HTML5 and CSS3

Similarly, the new WebCombo received major enhancements enabling all features to work precisely across all modern browsers, from multiple columns layout, auto complete behavior, search box position, to the smallest details such as the control styles.

WebCombo 6 features pixel-perfect rendering and styles in HTML5 apps

In conclusion, the full compliance with HTML5 and the leverage of CSS3 mark a major milestone in the WebUI Studio for ASP.NET lineup roadmap. The new WebGrid and WebCombo are only the starting point in this release, you can expect the rest of ASP.NET components to be fully HTML5-ready in this year’s second release.

If you’ve specific HTML5-related features that you’d love to see in the upcoming releases, please feel free to drop your comments in the box below.

Best,
Jimmy