SharePoint 2010 Ribbon Customization Part I: Architecture of Ribbon

In This article I will cover the architecture of Ribbon control. Tabs appear across the top of the page in SharePoint 2010 sites. Top element of Ribbon is Tab. The Ribbon is defined using xml in a Feature manifest or as a Custom Action.
What Ribbon Contains?
To see ribbon’s internal you need to look into CMDUI.xml file, which you can find at location 14\template\global\xml\cmdui.xml.

Ribbon Control’s skeleton,

Ribbon Objects
CommandUI	Starting point for Ribbon which points to the namespace http://schemas.microsoft.com/sharepoint/"
Ribbon	Represents OOB ribbon control. SharePoint 2010 has only one instance of Ribbon control per page. Ribbon control by default configured with all OOB Contextual Tabs, Tabs and Templates. At runtime ribbon gets trimmed for non-required tabs and shows only relevant tabs. e.g. While rendering any List only “List Tools” contextual tab gets rendered, rest all tabs gets trimmed.
Tabs	It is a collection of all tabs. Its ID is "Ribbon.Tabs". Whenever we want to add new tab to ribbon then we have refer this collection. We have to instruct ribbon to insert custom tab into Tabs collection. To instruct ribbon to insert tab into its collection we need to use Location attribute and have to give value as “Ribbon.Tabs._children”.
Tab	This represents a single tab for a ribbon or Contextual Tabs. We can have custom tab on New/Edit/Display/ListView forms. Tab acts like a container and contains controls which can raise the events on client side and server side. Following are the child objects of tab.
	Scaling: this element decides how the controls get rendered and scale at runtime. It has two more child elements, ·       MaxSize: controls the max size of control on tab. ·       Scale: handles the scaling for controls.
	Groups: It is a collection of group(s). We can add custom group to any tab. To do so we need to instruct ribbon to insert defined xml as a groups into tab. Location attribute needs to be properly configured and acceptable value for that is “Ribbon.Tabs.Groups._children”.
	Group: It groups the various control into one entity. It has a child element “Controls” which contains the declaration for various controls.  Every Group is binded to Template and this template decides the layout for that group. We can customize the Group elements. We can add, remove and replace the control from a group. For that, we need to configure Location attribute properly. The standard formula is, “Ribbon.[Tab].[Group].Controls_children”. For an instance for List’s ListItem tab if you want to insert new control in its Manage group then the location value would be “Ribbon.ListItem.Manage.Controls._children”.
	Controls: Allowable controls in Groups are Button, Checkbox, Color Picker, Combo Box, Drop Down, Flyout Anchor, Label, Menu, Menu Section, MRU Split Button, Spinner, Split Button, Text Box, and Toggle Button. Each of these controls has to tie with command. This command can be execute at client side or server side
ContextualTabs	This holds one or more tabs and defines the context for holding tabs. Its ID is “Ribbon.ContextualTabs”.We can add custom Contextual Tabs and for that we need to configured Location attribute and allowable value is, “Ribbon.ContextualTabs._children”. We can customize the OOB contextual tabs also for an instance if you want to add new tab into List’s Contextual tab then location attribute would be “Ribbon.ListContextualGroup._children”.
Ribbon Templates	It is a collection of all group templates. Its ID is “Ribbon.Templates”. We can add custom group template, to do so, the acceptable value for location attribute is “Ribbon.Templates._children”.
GroupTemplate	Every group from tab requires a template, this template helps ribbon to control the size of controls and scale them at rendering time. GroupTemplate has following child elements:
	Layout: Element has LayoutTitle attribute which is used to mention Size attribute of MaxSize and Scale element. [they are the child elements of Scaling Element and scaling element is a child element of a tab]
	Section: Element has two child elements Alignment & Type. Alignment defines the position of control and Type decides how many rows this section will contain.
	Row: Element has three child elements ControlRef, OverflowArea and Strip. ·       ControlRef & OverflowArea Elements has two attributes, o   DisplayMode which controls display of controls. Acceptable values are Small, Medium, Large and Text. o   TemplateAlias its values is used to mention TemplateAlias of control. ·       Strip: Element contains collection ControlRef elements and they gets displayed as a strip on ribbon.

Custom Tab declaration XML,

Sample Tab on New Form,

Download: Source Code
Further Articles:
I am going to explore more with ribbon and going to post all my findings with source code. So keep a track of below articles.

• SharePoint 2010 Ribbon Customization Part I: Architecture of Ribbon
  
• SharePoint 2010 Ribbon Customization Part II: How to Add/Remove/Replace Tab Controls
  
• SharePoint 2010 Ribbon Customization Part III: How to create Tab at various Locations?
  
• SharePoint 2010 Ribbon Customization Part IV: How to add PostBack commands to ribbon?
  
• SharePoint 2010 Ribbon Customization Part V: How to dynamically populate ribbon controls?
  
• SharePoint 2010 Ribbon Customization Part VI: How to enable/disable buttons in ribbon conditionally?