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.
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.
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.
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.
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:
RadRibbonBar now supports four server-side events:
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.
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.
Iana Tsolova is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.
Copyright © 2016, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.