Tag Archives: Visual Studio 2012

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

WebUI Studio for Visual Studio 2012 is here!

The wait is over – the highly anticipated WebUI Studio 2012 SP1 release is now available for download. Grab your copy here.

As mentioned in my recent posts, the new service pack release includes full support for Visual Studio 2012 which updates all 40+ component designers to adhere the Visual Studio UX guidelines. In addition, this release has been optimized for Windows 8 as well as support for Internet Explorer 10. For details, check out my post here.

Even more, the new service pack ships dozens of new features and major performance improvements to the Silverlight and WPF controls, ranging from the ribbon controls, all variants of selection controls, smoother animation in expandable group box, attribute-based licensing mechanism, and much more. For complete details, make sure you check out the Release Notes document once the service pack is installed successfully.

Help Integration in Visual Studio 2012

In addition to a host of designer-related enhancements, this new release also automatically plug all products documentation into Help Viewer 2.0 which shares the modern Visual Studio interface. The look and feel of the documentation content has been updated as well to share the same metaphor, see the shot below.

Help integration in Visual Studio 2012

Everything you need is here. And whenever you need help, simply press F1 and locate the topics in the new Help Viewer.

More details on Visual Studio 2012

Along with this release, we’re pleased to introduce a new page dedicated to Visual Studio 2012 which contains related information and resources. Check it out at intersoftpt.com/vs2012.

Last but not least, enjoy (Visual + WebUI) Studio 2012! Here’s the download link again in case you missed it.

All the best,
Jimmy

WebUI Studio Designer Reimagined

Last week, Microsoft has finally released its long awaited Visual Studio 2012 to the MSDN subscribers. As VSIP partners, we had the RTM bits several weeks earlier and started testing our component designer features for the new Visual Studio.

Just in timely fashion, we’ve recently completed the development and testing milestones for our new component designer – rebuilt entirely from the scratch to provide the best support for Visual Studio 2012. In this blog post, I’ll share some of the design experiences while remaking our component designer. Read on.

The Visual Studio 2012 UX Guidelines

Since the invention of “Metro” design language, Microsoft has been redesigning all its software products toward the modern UI design, including the recently released Visual Studio 2012. As a result of the redesign, Microsoft has now introduced the so-called “Visual Studio 2012 UX Guidelines” which has to be adhered by its development ecosystem partners. We’re thrilled to be among the first who have adhered to the UX guidelines, and will release our new version at the same time of the official Visual Studio 2012 launch.

To adhere to the UX guidelines, our designer team have redesigned nearly 200+ toolbox icons to the Metro style. Furthermore, we decided to remake the component designer to support the new look and feel of Visual Studio 2012, and more importantly, to support the philosophy of the user experiences which essentially emphasizes on content with reduced decorators.

Meet the new Component Designer for Visual Studio 2012. It’s rebuilt entirely from the scratch to resemble the Visual Studio 2012 interface. The all-new designer is now built on the WPF 4 platform and leveraging our own ClientUI for WPF controls – thanks to the comprehensive and easily style-able controls, we managed to remake the component designer ahead of the expected schedule.

The following screenshot shows the new WebUI Studio component designer with much cleaner design and Metro’s iconography.

Introducing WebUI Studio Designer for Visual Studio 2012

It’s important to note that previous version of Visual Studio will continue to be supported. The WebUI Studio component designer launches the new WPF-based designer only when it’s running inside Visual Studio 2012. This is made possible thanks to the loosely-coupled architecture in the component designer framework.

So, when you’re working with WebUI Studio components in Visual Studio 2008 or 2010, you’ll get the old, clunky component designer with sea of colors. And when you’re in Visual Studio 2012, it automatically launches the new modern-styled component designer. Keep in mind that the control assemblies are identical regardless of the Visual Studio version.

The shots below show the designer comparison between the Visual Studio 2010 and 2012.

Designer support in older version of Visual Studio

Intersoft Component Designer for Visual Studio 2012

One of the most useful benefits with the migration to WPF is that you get automatic support for the screen resolution and font scaling. This means that if your Windows is set to use 125% larger font, the component designer will automatically reflect the control and layout to fit to the desired scale. The WinForms layout didn’t have that luxury, and it’s extremely difficult to manage the auto scaling settings. This is why you’ll find many inappropriately truncated text and graphics in the old designer when using larger font scaling.

Furthermore, the WPF designer has much better performance compared to WinForms in terms of initial loading, rendering, animation and navigation. This allows us to achieve the “fast and fluid” user experiences.

Back to the main subject, we actually reimagine all aspects of the designer – whether it’s the functionality or the design. For examples, compared to the previous version, the new Layout Manager has much cleaner surface, and eventually makes it more intuitive and easier-to-use at a glance. The art of this design language is that it focuses on the content and brings the functionality back to where it supposed to be. Take a look at the screenshot below.

Layout Manager

We also pay attention on the user experience details where message boxes should be avoided whenever possible. In this remake, we’re now displaying important messages in the accented status bar.

Component Designer with Accented Status Bar

Meanwhile, the Structure Manager is also redesigned with the identical aesthetic and consistent layout, enabling users to understand the user interface with less learning curves.

Structure Manager

Simplified and Smarter User Experiences

One thing that we learnt about Metro design language is that it’s not only about the user interface, i.e., the colors, themes or shapes. The true essences behind the philosophy is the simplified user experiences. But, the “simplified” here doesn’t necessary mean removing features, it’s more to making user experiences smarter which allows users to perform a task or function in less time, and more efficiently.

We have a number of interesting stories about making user experiences simpler yet smarter while remaking the component designer for WebGrid.

With hundreds of features, it’s quite challenging to find a particular setting or feature in the property window. So we introduced a component designer to address this challenge that looks like the following shot.

Pre VS 2012 designer for WebGrid

I personally think that the idea and purpose of such designer is good, although the existing design may now look cluttered. At a glance, the settings are spreading everywhere. Notice that we have numerous in the left-side navigation vertically, and also some tabs in the top arranged horizontally.

In the WebGrid designer remake, we managed to put everything back to where it should through a deep category rearrange that is based on content and function similarity. Tabs such as Advanced, Localization Manager and Pivot Charting are now removed from the top since they are now part of the Properties. Redundant navigation items are merged into a content that makes more sense. See the shots below to get a closer look.

WebGrid Designer for Visual Studio 2012

WebGrid Designer for Visual Studio 2012

With the designs shown above, you’re no longer served with massive user interface elements that present the same function. So the Properties tab basically means that “come here for all settings-related tasks”. This allows us to keep the design ideal with balanced functionality. Lessons learned.

Similarly, we simplify the Caching and Performance Tuning tabs such as shown below…

Pre VS 2012 WebGrid designer

… into just a single Advanced tab shown below.

WebGrid designer with smarter user experiences

We designed smarter user experiences by categorizing them into expandable groups styled with lightly-shaded accent and Metro colors.

Furthermore, the new designer is not simply a remaking effort, we actually added a number of new options that makes performance tuning a breeze. Notice the red highlighted area in the shot above, you can now enable the built-in resources compression with a single click. This feature actually existed since the 2009 release, but not easily discoverable as you need to manually make changes to the web.config file.

More options are now added to the Common Settings view which includes the new features introduced in the recent releases. For instances, enabling HTML5 rendering mode across the application is simply a tick away.

WebGrid designer with smarter user experiences

All 40+ Component Designer Redesigned

In this blog post, I’ve only scratched the surface of our new component designer for Visual Studio 2012. In addition to flagship products such as WebGrid, we also update the designer of entire WebUI Studio family, including WebCombo, WebInput, WebScheduler, WebTextEditor and the rest of components resembled in WebDesktop and WebEssentials.

As far as I can say, we’re making WebUI Studio the first-class citizen of Visual Studio 2012 which enables both products to work best together for the ultimate application development experiences.

We’re expecting to deliver all these new exciting features in the upcoming WebUI Studio service pack release by next week – and hopefully faster. The service pack will also include many new enhancements for Windows 8 and Internet Explorer 10, all-new project templates for Visual Studio 2012, as well as reliability improvements to all Silverlight and WPF components. Stay tuned for the release announcement!

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