RadRibbonBar for ASP.NET AJAX arrives in Q1 2011

As some of you may have already seen in our roadmap, we are about to release a brand new AJAX RadRibbonBar control with Q1 2011. In fact, we released a Q1 2011 beta with a preview of this control and live demos almost a week ago. I will describe here what the control looks like, does and will do in the final release.

Some forewords,

or the importance of the KISS principle

We all know that Microsoft's Ribbon control is quite complex and requires its rendering to be flexible to allow execution of its resizing features and overall presentation. This is the reason we decided to keep the rendering as simple as possible to ensure consistent look, easy configuration and possible future improvements - for instance Microsoft’s Ribbon control is not configurable on the client, but we want to be able to provide that functionality sooner or later if the need arises. To ensure this simple rendering, we also needed to keep the number of embedded RadControls in it as little as possible or, instead, to risk creating a multi-headed monster with enough Javascript to run a nuclear power plant. Currently we include an embedded RadTabStrip and RadMultiPage in our RadRibbonBar, but we plan to remove them for the final release and use simpler tabs instead.

The hungry Web,

or how to minimize your baggage

Another thing we wanted to avoid is the usage of big sprites – they load slower and consume a good deal of memory - browsers keep images in memory decompressed and with 32bit color depth. Another problem with buttons with rounded corners is that you need at least 4 elements to style the 4 corners and several big sprites for the different states to allow the button to be resizable in all directions. To create this imageless rendering, we decided to turn to the RadScheduler appointment rendering that we introduced in Q1 2010. You can see in the next picture that it was created using only the borders and backgrounds of 3 elements, where the innermost element holds an optional alpha transparent gradient that gives it some depth. The three elements provide it with a 2px rounded corner.

With RadRibbonBar buttons though, we decided to go for only 2 elements and a rounded corner of 1px (which is the size of the rounded corners in Microsoft’s ribbon, at least in Office 2007 and Windows 7 themes), while keeping the third for the gradient and some additional effects where needed:

This technique gave us several advantages – freely resizable buttons without big, complex and memory hungry sprites (while still looking good), less elements used to build them, and last but not least – accessibility, since background images are not rendered in high contrast mode, but borders are. Another good thing this rendering is giving us is that all buttons regardless of their size are rendered with the same elements and are easily exchangeable – a requirement if we want to do the resizing without major hickups. Change a class and get a completely different button. The same goes for the menu items - the same internal rendering structure, allowing to change its appearance completely by just moving it from the menu to the root element.

Accessibility 101,

or what happens when the screen goes black

Another thing that I wanted to implement is a way to set both images for a large size button with only a single image (an icon sprite) and still keep the high contrast theme rendering intact (simply said, having both sprites and accessibility, something usually not possible). We decided to shoot several rabbits with one bullet and used the clip() CSS property. Something we should note about clip() is that it only works on position: absolute IMG elements and to do this we needed a container. In the current RadRibbonBar rendering every image is loaded in a span container with position: relative and the image itself has position: absolute and clip() to show only the needed part of it. This method essentially works like a sprite with images, but has two cons – you need specific size for the container and a specially designed sprite for it (16x16 top left + 32x32 at the bottom = 32x48 size):

Here comes the second rabbit – RadRibbonBar has 3 rendering modes - Auto, Clip and Dual. By default RadRibbonBar is in Auto mode and uses the Clip image rendering and you will need the specially crafted image sprite for the large button. However every button has two image URL properties - ImageUrl and ImageUrlLarge – one for the small and one for the large image. If you set the ImageUrlLarge property of a button, it will automatically change in the Dual image rendering and separate images will be used for the small and large icons. Additionally you can force different rendering modes per item. Or, if you still prefer sprites - you can hide the image and use the container to set background sprites, effectively killing the third rabbit. However, in the Q1 2011 beta only the clip rendering is fully developed, so please stick to it.

Drink me, eat me,

or resizing assets by importance

Resizing was the hardest part - it is done by overall priority of a group and then by priority of buttons - first resizing buttons from large to middle to small and later collapsing the whole group. Each time a group shadow is created, measured and used in the calculation if the groups will fit in the available space. After collapsing the collapsed group can be clicked and a drop down is shown which is essentially a detached group container with an expanded group moved in. After closure the group is moved back to the original container.

Furthermore, each button can be resized downwards to the smallest button size, but can only be resized upwards to its original size, thus keeping the importance intact. If needed we can add a property to avoid resizing for specific buttons.

Into the rabbit hole,

or what is ticking on the server

On the server RadRibbonBar’s structure is divided into two main parts: Containers and Items. The Containers are RibbonBarTab and RibbonBarGroup. In each RibbonBarGroup the user can put the different types of Items: Button, SplitButton, Menu and ButtonStrip. (The last will be available in the official Q1 2011 release.)

The types of Items speak about their functionality and structure by themselves; still here are brief descriptions of each of those:

• Button – a clickable Button;
• SplitButton – a set of Buttons organized in a drop down. Clicking on the arrow shows a drop down holding the Buttons. Clicking on the SplitButton button area translates to clicking on the first button in the drop down;
• Menu – a set of Buttons organized in hierarchy in a drop down. Clicking on the Item shows a drop down containing Buttons;
• ButtonStrip – a set of Buttons, which render continuously (without space between them) that makes them look as if they are one whole section (the buttonstrip is not yet available in the beta).

RadRibbonBar now supports four server-side events:

• ButtonClick – fires when a Button is clicked;
• SplitButtonClick – fires when a Button inside a SplitButton is clicked;
• MenuButtonClick – fires when a Button inside a Menu is clicked;
• LauncherClick – fires when the Launcher (if enabled) of a Group is clicked

  All the events have also their client-side counterparts in our well-known -clicking/-a clicked flavor (e.g. OnClientButtonClicking, which when cancelled will not throw the subsequent OnClientButtonClicked event, after which the postback - if a server-side ButtonClick event is handled - will occur). However client events are still not supported in the Q1 2011 beta.

  Check the demos below for sample RadRibbonBar markup.

  Resolution

  which is just that

  At the end what you get is full blown RadRibbonBar that looks like this:

  

  and works like this – see the beta demos. Let us know if you have questions or suggestions for improvement. They will help us shape the final product.

   

  Disclaimer: No rabbits were harmed while this blog post was written.