Tag Archives: WebUI Studio

WebUI Studio 2012 R2 Installer Refresh

Today, we have posted an update to the WebUI Studio 2012 R2 installer which addressed a few glitches related to samples and installation. In addition, the installer “refresh” also includes newer product builds across ASP.NET, Silverlight and WPF tools for enhanced cross-platform compatibility and improved reliability. It’s highly recommended to install WebUI Studio 2012 R2 using the latest installer which you can download here.

The installer “refresh” includes numerous updates that are focused around the new technical samples for Silverlight and WPF. In case you didn’t aware, we now include comprehensive technical samples starting from this release. The difference with the live samples is that technical samples are strongly focused on the product features – and there are no fancy stuff such as decorator graphics or complex styling – so you can quickly and easily discover the “how-to” and knowledge to implement a particular feature of the new products.

If you haven’t seen the technical samples yet, now is a good time to take a look at it. It’s installed by default, and can be found in the Intersoft WebUI Studio program group under the respective platform group. In this release, the technical samples include over 150 samples for charting and 40 samples for the other new products such as Query Builder, Property Grid and BreadCrumb.

Each feature of the new product is covered in each separate sample, making it easy for you to learn the context of a particular feature. With simple interface and intuitive navigation, getting around with the samples is easy and fast – you should try it for yourself.

ClientUI Technical Samples (Silverlight)

Note that the technical samples is available in both Silverlight and WPF platform with the same codebase. The WPF samples demonstrate that the same features available in Silverlight are also working flawlessly in WPF – from the basic features to the animation and user experiences. Here’s the screenshot for the technical samples in WPF.

ClientUI Technical Samples (WPF)

Again, the technical samples is installed by default when you install WebUI Studio for Silverlight and WPF, so there’s no additional download needed. It can be found in the Intersoft WebUI Studio program group under the respective platform group.

I hope you enjoyed the comprehensive learning resources we added in this release. Any questions or feedback are highly welcomed. Thank you for reading!

2012 R2 Online Samples and Documentation Updated

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.

ClientUI Online Documentation

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

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.

ASP.NET Live Samples

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.

WebPaneManager supports fluid layout in HTML5

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

ClientUI 8 Goes RTM with Redesigned Live Samples

Finally, the wait is over! The new WebUI Studio 2012 R2 release is here with tons of new exciting tools and templates that will surely boost up your development productivity. Despite of the slight delay, I trust the new release worth the wait. First off, we don’t just release new controls to add to your toolbox, we also ship a number of new templates to help you quickly getting started with your projects. Furthermore, we’ve added over 175 new technical samples and over 75 new reference samples – all with brand-new look and feel and completely redesigned user experiences. With these inspiring samples, we wanted to help you unleash your big ideas and creativity and take them to the next level.

Alright, before we gone too far, here are some important links that you’ll need for this new release.

All-new, Completely Redesigned Live Samples.

In addition to many new controls we shipped in this release, we’re pleased to announce the all-new ClientUI live samples with completely redesigned user interface. It’s now featuring larger screen real estate, clean and modern design that allows one to focus better on content, and more intuitive navigation. And for the first time since its first debut 4 years ago, all controls now perform 70% faster than before – thanks to the continuous performance tuning and memory usage optimization.

More importantly, the new live samples puts some of the new R2 controls in action, so you can see how they can be leveraged in your own apps. I’m particularly referring to the new breadcrumb navigation control which completely redefines the overall navigation experiences. Combining hybrid address bar and menu functionality into an elegant user interface, you can now perform navigation in a simple “point-and-click” manner. Let’s take a look at the overview of the redesigned live samples below.

Introducing the all-new ClientUI live samples

And because we loved this intuitive navigation control so much, we decided to release it as a standalone reusable control to our valued customers. Feel free to unleash your big ideas and make it work your own way. Desktop application developers may rejoice! The navigation control is also available in WPF version, so you can be the first to build Windows 8 Explorer style business applications! We also shipped a WPF project template that leverages this versatile navigation control. More on that later.

In addition to the intuitive navigation, you can notice a whole new user experience that our designer team have put into this new live samples, for instances, it sports the improved CoverFlow with realistic depth shadow, better coverage on What’s New and Featured section – thanks to the fluid design allowing you to see more items in larger screen and adapts to reduced items in smaller screen.

Fluid design and improved CoverFlow

And now to the core part, the entire sample canvas has been revamped as well. Unnecessary toolbars and buttons are gone, fancy gradients are wiped out, options and other navigation elements are centralized to a collapsible pane. Embracing on the modern design, it’s now possible for us to create beautiful, full-screen user experience. See the following screenshot for details.

Experience beautiful, full-screen samples.

Enough said, visit the new ClientUI live samples now and experience it for yourself.

In this blog post, I only scratched the surface of the new exciting stuff that we delivered in this release. We’re fully passionate about design and user experiences that balance very well with functionality – and we carefully put that into the engineering process. That said, you can find that all our controls are engineered with thoughtful user experiences, in addition to the rich features and functionalities of course – that’s what sets us apart from other products in the market.

Last but not least, enjoy WebUI Studio 2012 R2! Hopefully this release comes just in time, so you can play around it now and make some planning for your big ideas in the next year. Again, here’s the link to download in case you haven’t done so, and make sure you check out the complete what’s new list here.

All the best,
Jimmy

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

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

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

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