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:)
- Black
- Default
- Forest
- Hay
- Office2007
- Outlook
- Simple
- Sunset
- Telerik
- Vista
- Web20
- WebBlue
Here is a list of the supported decorated elements:
- Buttons
- CheckBoxes
- Fieldsets
- H4,H5,H6
- Label elements
- RadioButtons
- Scrollbars
- Textareas
- Textboxes
- Decoration zone (NEW!)
- 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.