Tag Archives: Metro

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

Advertisements

Coming in 2012 R2: Intersoft-designed Charts, Powerful Query Builder, Modern UI Themes, and much more

It’s really been a busy month for everyone in the DevDiv at Intersoft as we’re heading toward R2 release. As we haven’t post any new updates recently, you might have been wondering what we’re up to. Thankfully, you’ve just tuned in at the right time because I have some very exciting updates to share in this blog post.

For a decade, we’ve been doing what we do best – creating user interface components that are beautiful inside and out where amazing user experiences meet powerful functionality. And today, we’ve made some of the world’s best tools that help developers build amazing applications ahead of time. But we don’t stop here. In the upcoming release, you’ll find a handful of new exciting tools that do what it does best, so you can stay focused on your business requirements and things that matter the most to you.

The upcoming R2 release is an exceptionally important milestone for us and our valued customers. After nearly a year of intensive development iterations, we’re pleased to say that we’ve recently reaching the stable sprints and will deliver two of the most wanted products in this release.

For the first time ever, say hello to Intersoft’s own charting data visualization suite which will target a broad range of platforms. And business developers may rejoice! A full-fledged XAML reporting engine is coming your way which includes a powerful C# style scripting support for the most demanding business reports. Read on.

Gorgeous charts. Uncompromised performance.

Written from the ground up, Intersoft Charting delivers everything you need to create beautiful charts for your business apps, plus dozens of innovative features not available elsewhere.

We started off our engineering by creating  an advanced canvas that provides reliable support for interactivity features such as zooming, panning, and box selection. We took the zooming capability to the next level by supporting horizontal, vertical, or both directions. And together with smooth panning, resizing with aspect ratio locking and region zoom, Intersoft Charting is built for touch-first user experiences in mind.

Intersoft Chart takes user experience to a whole new level

Furthermore, Intersoft Charting employs the most advanced rendering technique that puts data points and lines in the most accurate device pixel in your screen. This translates to crystal clear results, and no more blurry lines!

Intersoft Chart delivers pixel-perfect, gorgeous data visualization

Designed by Intersoft’s own artists, the brand new charting will offer four predefined color schemes and styles that you can choose with a simple property set. Whether you prefer vivid colors, natural colors, or Metro colors, there’s a palette for that. Or if you prefer to use your own palettes, feel free to define as many custom palettes as you like and reuse them throughout the chart instances.

Intersoft Designed Palettes

With numerous great features such as smart axis intervals, MVVM support for series binding, linked charts, and over 20+ stunning chart types; we’re confident that Intersoft Charting will deliver an ultimate, enterprise-grade data visualization solution for all your application development needs. More details on Charting will be posted in a separate post by our engineers.

Build Complex Query Visually

Business users have been long asking for the flexibility to edit queries/filters at runtime, but very few provide such functionality in the market. One of the reasons is the design challenges that require extensive research on the user experiences to make it work beautifully. I’m excited to introduce our newest data-aware control lineups: UXQueryBuilder.

Query Builder is an advanced data filtering control that allows users to visually build complex queries/filters. Take a look at the Query Builder’s control design below.

QueryBuilder Design Overview

It’s designed in such a way that allows users to interact with complex nested conditions through an intuitive, modern user interface. When a nested filter is added, the control automatically creates a visual branch. It’s also packed with numerous built-in subtle animations to deliver smooth user experiences, such as when a condition is added or removed, and when a single condition is converted to a composite condition.

More importantly, the Query Builder works seamlessly with all ClientUI data controls that are built upon QueryDescriptor framework. This means that you can connect the Query Builder to a Grid View in a simple property set. And you’ll find that things just work – adding a new filter condition and see the Grid’s data will be filtered accordingly.

One of the engineering excellences we put on this control is the capability to support Entity Framework’s navigation properties out of the box – you gotta love this feature! So whenever the Query Builder finds navigation properties in your object, it will list them to the available properties which users can use as the filter condition without extra efforts at developer’s end. Of course, you can exclude certain navigation properties if desired.

Built-in Navigation Properties Support

And in most cases, your data model might include master-detail relations, think of Product  table that has CategoryID field. It won’t make sense for users to remember the ID to be able to filter a category – I trust you’ll agree with me on that! Thankfully, we built a feature that lets you pre-populate the master data when the control requires it. We make it as simple as possible so that you only have to define an attribute to your model and specify the class that will handle the data retrieval, either synchronously or asynchronously.

Pre-populate details lookup asynchronously

Modern UI Themes and Design Templates

All the buzzes and hypes are on Windows 8 as Microsoft launched its latest operating system last week. Although the new UI looks cool and modern at a glance, it could be very challenging in the design process. Without thoughtful design, you may eventually end up with too-plain, boring colorful boxes. I’ve started to find such apps in the Windows Store which exhibits lower apps quality and leads to poor user experiences.

The good news is that we’ll be coming up with very exciting and fresh design themes that comply with the Windows 8 Modern UI. We decided to include the new themes in this upcoming release, thanks to your vote up. Every control is redesigned meticulously – pixel by pixel, color by color, and shape by shape – to create look and feel that are fresh and modern. The result is a balanced combination of design that embraces modern lines but still look great on eyes.

Intersoft Designed Modern UI Themes

But we don’t just create themes, we took it to a whole new level where the entire design is connected to a set of accent colors that you can personalize, thanks to the brand-new theme manager. We designed the templates from the bottom up in order to achieve a kind of design that looks great in both light and dark theme, on the top of the customizable color theme. Every design aspects, from the font family, size, vector-based icons and colors are all thoughtfully connected to achieve such beautiful results.

It’s such an excellent engineering process that combines great architecture and beautiful design that makes it possible for the theme color to change instantly without performance degradation no matter how complex your content is. There are no visual tree tracing, no dependencies on certain structures or classes, and definitely no heavy-lifting such as scanning all the controls within the page.

Theme-aware design lets users personalize application and color theme

And the best of all, our design team will come up with a few stunning project templates that you can use instantly to create your next-generation, modern-style business apps in both Silverlight and WPF platforms.

And more…

In this blog post, I’ve only scratched the surface of what we’ll come up with in the upcoming release. There are much more new exciting lineups that I couldn’t cover in this single post. In conclusion, this release will be a very important milestone for us and our customers, particularly as we’re entering two huge market segments at once.

Finally, I hope you liked what you see so far. And if you’ve got questions or feedback, make sure you write them down in the comment box below. Thanks for reading, and stay tuned for my next post!

All the best,
Jimmy

Coming up: Visual Studio 2012, Windows 8 and IE 10 Support

We started out the first WebUI Studio 2012 release with dozens of new enhancements and exciting features including full HTML5 doctype support in our flagship ASP.NET controls such as WebGrid and WebCombo. The 2012 R1 was released last month, you can check out the complete what’s new list here.

In this post, I wanted to share our plans for the upcoming WebUI Studio updates. In particular, we’re excited to be part of Visual Studio 2012 sim-ship partner. This means that we will release a WebUI Studio update within 30 days of the Visual Studio 2012 release.

Visual Studio 2012 Support

All WebUI Studio components will support Visual Studio 2012 when it arrives in the next few weeks. This includes the ASP.NET, Silverlight and WPF suite. All designer extensions for Visual Studio will be enhanced to support Visual Studio 2012, including the toolbox, Metro-style component designer and icons, as well as the prebuilt project templates and project wizards.

See the screen preview of the designer support below for the ASP.NET controls.

WebGrid and ISDataSource in Visual Studio 2012

For Silverlight and WPF, most of the designer extensions such as adorners, context menu, and region services will continue to work in Visual Studio 2012. See the preview below.

ClientUI 7 in Visual Studio 2012

Windows 8 and IE 10 Support

Earlier last month, Windows 8 has reached the Release Preview milestone which also includes a significant update to its Windows Internet Explorer browser. The IE 10 Release Preview includes great improvements to the parsing rules to make HTML5 “just work” in the same way across browsers. However, there are several implications and trade-off due to the improvements. One of the implications is the removal of legacy features, including the conditional comments, element behaviors and XML data islands.

The removal of XML data islands caused several breaking changes since it’s used extensively in our ASP.NET tools. The next update of WebUI Studio will address the XML parsing changes and include full support for IE 10 in both desktop and Metro mode. These changes will not require any efforts in the customer’s code.

The following screen preview shows WebGrid 8 running on the IE 10 Metro standards mode.

WebGrid 8 running in IE 10 Metro

Best,
Jimmy