RadFormDecorator Q2 2009 - more decoration options, faster rendering!

RadFormDecorator might be one of the lesser-known controls in the RadControls for ASP.NET AJAX suite, yet it is a control that can eliminate much of the hassle and greatly reduce the time needed for completing the look and feel of a Web solution. What the control does is decorate elements that are usually rendered by the browser, such as buttons, checkboxes, radiobuttons, fieldsets, etc.

It just so happens that this product can be used for free - as it is one of the goodies that Telerik provides for the whole ASP.NET community out there!

As of Q2 2009, the RadFormDecorator will feature a new - faster and more flexible- rendering, as well as support for <select> (<asp:DropDownList/> and <asp:ListBox/>) elements.

For example, here is what a page might look like when it has not been decorated:


By simply adding a RadFormDecorator control to the page and setting its DecoratedControls="All" property, one would end up with a completely different result:


In addition, since RadFormDecorator is a fully fledged member of the RadControls suite for ASP.NET AJAX, it features the same number of built-in skins which help the developer deliver that look and feel finishing touch in a snap. The available skins (designed to integrate with the rest of the RadControls suite are:)

1. Black
2. Default
3. Forest
4. Hay
5. Office2007
6. Outlook
7. Simple
8. Sunset
9. Telerik
10. Vista
11. Web20
12. WebBlue

Here is a list of the supported decorated elements:

1. Buttons
2. CheckBoxes
3. Fieldsets
4. H4,H5,H6
5. Label elements
6. RadioButtons
7. Scrollbars
8. Textareas
9. Textboxes
10. Decoration zone (NEW!)
11. Select elements (NEW!)

For a taste of things how the RadFormDecorator performs its task, I am posting two screenshots from the RadEditor dialogs where the decorator is used - the ImageManager and the FindAndReplace dialog. Surprisingly, to achieve this look there is practically no custom CSS written - it is all provided by the RadFormDecorator and the other RadControls used on the pages:

 

And here is more news: for the coming Q2 2009 we have implemented a new and faster rendering of the RadFormDecorator and its performance can be experienced at the BETA demos here. We wanted to use an approach that takes maximum advantage of the browser's CSS engine and its ability for CSS inheritance and attribute selectors. Certainly, the *old* RadFormDecorator rendering uses much of the same approach, but it is relying much more heavily on the browser's JavaScript engine, which is approximately 10 times slower. The new rendering also performs much better with partial page updates with AJAX.

In addition to providing support for SELECT elements, here are some of the improvements that have been brought by the new rendering:
- Buttons are decorated in a manner that preserves the button at its original location. It is simply wrapped in a link element. This allows for existing client-scripts that manipulate buttons to continue working - e.g. changing its text. Event handlers, such as onmouseover, onmouseout, etc will work as well.
- <label> elements, header (H4, H5 and H6) elements, scrollbars (IE only) are styled using CSS inheritance only. Hence they are decorated as soon as they are parsed on the page, before page load. This allows for their pure "native" look, as if they were skinned from the server-side.
- For the most part fieldsets, textboxes and textareas are styled by using CSS inheritance. In fact in FireFox and Safari it is only this mechanism used. In Opera and IE, due to lack of support for CSS3 rounded corners selector, a second pass is needed to render those with the help of javascript.

There have been also the usual performance optimizations and occasional bugfixes - and the end result is a control that is the perfect finishing touch for any web application! Enjoy.