RibbonX Control Type Tour, Part 2

Article
04/13/2006

Today's Guest Writer: Savraj Dhanjal

Savraj is a Program Manager on the Office User Experience team focused on user interface extensibility for Office developers.

Hey everyone! Another week, another batch of RibbonX controls and attributes. You can use last week's markup wrapper to create valid XML from code snippets below.

CheckBox

The checkBox is one of the many new control types exposed in the Ribbon. It's got the same behavior as a toggleButton, but it has a completely different visual style. Checkboxes are useful for settings and options that don't change content in your document. ToggleButtons, like the built-in Bold button, are better for cases where you want the state of your selection reflected. Office 2007's most prominent built-in checkBoxes are on the View Tab.

Three checkBoxes. The mouse hovers over the second checkBox.

Unlike most other controls, a checkBox, when promoted to the QAT, keeps its label by default. Just right click a custom checkBox, select add to QAT, and voila, it's available so you can always get to it.

Custom checkBox on the QAT.

Separator

A separator is just that--a logical division between controls in your group. Separators have no label--just a unique ID. By themselves, they're not very interesting, but they can politely part controls that are too close for comfort within a group.

Separation in action.

<group id="myGroup" label="Settings"> <checkBox id="c1" label="Office Seat Heater" onAction="heater"/> <checkBox id="c2" label="Mouse Traction Control" onAction="traction"/> <checkBox id="c3" label="Keyboard Sport Mode" onAction="sport"/> <separator id="s1"/> <button id="b1" imageMso="ExcelChartGallery1" size="large" label="Air/Fuel Mixture" /></group>

LabelControl

The labelControl lets you put a text label in your group. The label provides a little extra information to make sure the user's on the right track, and often eliminates text duplication among the controls below it. Labels, like checkBoxes, are seen in very few places in the Office 2007 Ribbon.

Labels. Use sparingly.

<group id="myGroup" label="Settings"> <labelControl id="lc1" label="HCI PowerToys" /> <checkBox id="c2" label="Mouse Traction Control" onAction="traction"/> <checkBox id="c3" label="Keyboard Sport Mode" onAction="sport"/> <separator id="s1"/> <labelControl id="lc2" label="Ambiance" /> <checkBox id="c4" label="Background Music" onAction="enableMusic"/> <checkBox id="c5" label="Mood Lighting" onAction="enableLights"/></group>

Tips & Launchers

To provide more information about a particular control on hover, you can use the tooltip (soon to be renamed screentip) and supertip attributes on controls. The tooltip works as you would expect, and the supertip is a multi-line text string.

Using the tooltip and supertip properties to explain traction control on mouse hover.

The group shown above also has a "dialog launcher," in the bottom-right corner. This launcher opens a the full settings dialog. You declare the launcher by putting a button in the advanced section of a group.

As a final note, you'll notice my COM Add-In's name, "RibbonX Demo," is in the footer of the super tooltip. This way, end-users can directly associate additional functionality with the add-in that provided it, giving credit where credit is due. Pressing F1 for help will take end-users to help on Office add-ins. Unfortunately, end-users would probably uninstall my add-in, because Mouse Traction Control isn't implemented. I hear we're working on it for Office 14. :)

Comments

Anonymous
April 13, 2006
"The checkBox is one of the many new control types exposed in the Ribbon. It's got the same behavior as a toggleButton, but it has a completely different visual style."

Why have a separate element for it? Surely a better decision would have been:

<toggle style="button"/>
<toggle style="checkbox"/>

Keep sematics and presentation separate!

And given that the label and all the other bits of these elements could very easily be considered its "content", why not have the more flexible:

<button id="b1" size="large"><imageMso="ExcelChartGallery1"/> Air/Fuel Mixture</button>

instead of the really restrictive schema you seem to have now? That would have allowed UI designers to put the icons after, or even within, the text of the button, if they thought it was appropriate.
Anonymous
April 13, 2006
How do we create these supertips in our own applications?
Anonymous
April 13, 2006
I can see that each group defaults to three rows of small-size controls. But how do you define a group to only have 2 rows, like the groups "Font" and "Paragraph"?
Anonymous
April 13, 2006
This is excellent stuff. Jensen, do you suppose that you can explain in a bit more detail the changes between Beta 1 and Beta 1 Technical Refresh, that would be great.

The View tab especially intrigues me.

Cheers.
Anonymous
April 16, 2006
Hi,This's great!
Anonymous
April 17, 2006
why is "Press F1 for help" added for ribbon elements added by a com addin, when F1 can only ever bring up the app's help, not an addin's help?

Preferably office would allow addins to register their help topics properly, but at a minimum why add a road sign that says take exit F1 when exit F1 doesn't go where you want?
Anonymous
October 27, 2008
PingBack from http://mstechnews.info/2008/10/the-office-2007-ui-bible/
Anonymous
June 14, 2009
PingBack from http://adirondackchairshub.info/story.php?id=2705
Anonymous
June 18, 2009
PingBack from http://homelightingconcept.info/story.php?id=144

Share via

RibbonX Control Type Tour, Part 2

Today's Guest Writer: Savraj Dhanjal

Comments

Additional resources