Ribbon 2010

Architecture of the Server Ribbon

The Server ribbon in Microsoft SharePoint Foundation 2010 creates a consistent user interface for working with SharePoint objects. You can extend the ribbon declaratively using Server ribbon XML and simple ECMAScript (JavaScript, JScript), or you can use ribbon XML and a page component for more advanced scenarios.

Basic Objects in the Server RibbonThe top-level elements in the ribbon are tabs. Tabs appear across the top of the page in a SharePoint site. Each tab organizes a set of groups. These groups contain sets of controls. Each group can contain multiple controls and has a label to identify each group. The controls inside the group include buttons, drop-down menus, check boxes, combo boxes, split buttons, and galleries. Each of these controls is tied to a unique command.

 

What is Ribbon feature in sharepoint 2010.
Ribbon in sharepoint 2010 provide a consistence UI interface. Ribbon is the new feature provided by sharepoint 2010 which introduced tabs, group,controls on the header section of site. tab is the top element of ribbon framework, tabs associated one or multiple groups and groups associate one or multiple controls, every control can be used in the tabs including the button,dropdown,label etc as well as some new controls has also been introduced........... ribbon does not have the facility to used custom control or user control. a particuler control can not be hide or show while whole ribbon can be shown or hide.
Below is the ribbon architect.
IRibbonMenu- provide ribbon interface to implement
SPRibbonButton-
SPRibbonMenu-
SPRibboncommondUI-
SPRibbonQuery-
http://msdn.microsoft.com/en-us/library/gg552606.aspx
http://www.c-sharpcorner.com/uploadfile/anavijai/create-a-custom-tab-in-the-sharepoint-ribbon-interface/  created custom tab group control

The purpose behind ribbon architecture to provide a more user driven interface in sharepoint 2010. ribbon architect came after much research and discussion. Ribbon interface allows the component controls which must be associated the current activity such as while adding the text into document there is no need to display the controls to insert images and tables in microsoft 2010 while entering text into document a seprate tab is provided to insert the images and tables.

Sharepoint 2010 server ribbon architect
The default ribbon is built by sharepoint from the installation of sharepoint 2010. The ribbon interface is based on the the file CMDUI.xml which is the part of site defination from which site is created. The location of xml file is (Root web)\Template\Globle\xml\

SharePoint 2010 Server Ribbon Component
Tab :
Group:
Controls:
Contextual tab group:

Tabs on the SharePoint 2010 Server Ribbon

Tabs are the root of server ribbon components. Tabs contain one or more group and similar functionality.

Groups on the SharePoint 2010 Server Ribbon. : - 

Every tab contains the one or more group,  Groups are associated with one or multiple controls and similer functionality each group can have a title. Each group is defined by a template which is used to define the layout of group and how it will apear on the scalling of group. Scaling refer to the situation where there is too many controls to show in the ribbon.

Controls : Without controls the ribbon framework is nothing. controls refer to the items on which an action is performed each group can have multiple controls and there are a set of controls which can be defined into server ribbon framework like button,dropdown,listbox, etc.

Group Templates on the SharePoint 2010 Server RibbonGroup templates are used to define the different layout options for the controls within a group. Microsoft includes 29 group templates in the CMDUI.xml file (to locate them, search for the element <RibbonTemplates /> at the end of this file).

Contextual tabs :
Contextual tab groups are used to provide functions that are not global to the current context, such as the page. They appear only when certain circumstances have been met and contain one or more tabs.

Adding the cusom button into document tab of shared document lib, for this we created a empty site and empty element in which we have the xml
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction
  Id="DemoHelloWorldButton"
  RegistrationType="List"
  RegistrationId="101"
  Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
         Location="Ribbon.Documents.New.Controls._children">
          <Button
           Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"
           Alt="Hello World Ribbon Button"
           Sequence="10"
           Image32by32="/_layouts/images/PPEOPLE.GIF"
           Command="Demo_HelloWorld"
           LabelText="Hello World Demo"
           TemplateAlias="o2"/>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
         Command="Demo_HelloWorld"
         CommandAction="javascript:alert('Hello World!');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
</Elements>


This example shows how to create Custom Tab, Custom Group , Custom Control using the ribbon

<?xmlversion ="1.0"encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
    Id="CustomRibbonTab"
    Location="CommandUI.Ribbon"
    RegistrationId="101"
    RegistrationType="List">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
         Location="Ribbon.Tabs._children">
          <Tab
            Id="Ribbon.CustomTab"
            Title="Custom Tab"
            Description="Custom Tab !!!"
            Sequence="501">
            <Scaling
              Id="Ribbon.CustomTab.Scaling">
              <MaxSize
                Id="Ribbon.CustomTab.MaxSize"
                GroupId="Ribbon.CustomTab.CustomGroup"
                Size="OneLargeTwoMedium"/>
              <Scale
                Id="Ribbon.CustomTab.Scaling.CustomTabScaling"
                GroupId="Ribbon.CustomTab.CustomGroup"
                Size="OneLargeTwoMedium" />
            </Scaling>
            <Groups Id="Ribbon.CustomTab.Groups">
              <Group
                Id="Ribbon.CustomTab.CustomGroup"
                Description="Custom Group!"
                Title="Custom Group"
                Sequence="52"
                Template="Ribbon.Templates.CustomTemplate">
                <Controls Id="Ribbon.CustomTab.CustomGroup.Controls">
                  <Button
                    Id="Ribbon.CustomTab.CustomGroup.CustomButton"
                    Command="CustomTab.CustomButtonCommand"
                    Sequence="15"
                    Description=""
                    LabelText="Custom Button"
                    Image32by32="/_layouts/images/PPEOPLE.GIF"
                    TemplateAlias="cust1"/>
                  </Controls>
                </Group>
              </Groups>
            </Tab>
        </CommandUIDefinition>
        <CommandUIDefinition Location="Ribbon.Templates._children">
          <GroupTemplate Id="Ribbon.Templates.CustomTemplate">
            <Layout
              Title="OneLargeTwoMedium"
              LayoutTitle="OneLargeTwoMedium">
              <Section Alignment="Top"Type="OneRow">
                <Row>
                  <ControlRef DisplayMode="Large" TemplateAlias="cust1" />
                </Row>
                </Section>
              </Layout>
            </GroupTemplate>
            </CommandUIDefinition>
          </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
         Command="CustomTab.CustomButtonCommand"
          CommandAction="javascript:alert('Hello, world!');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction>
  </Elements>

Server Ribbon Communication
The ribbon uses multiple objects to interact with the rest of the page. It must know which controls are enabled, the state of the controls, and when to refresh. The Server ribbon communicates by using the CommandDispatcher, PageManager, and PageComponent objects among others. Each of these objects plays an important role in interacting with the ribbon.
The PageManager initializes all of the controls and registers the PageComponent objects for the ribbon. One instance of the PageManager lives on the page.

The CommandDispatcher handles all of the PageComponent objects and the commands they can handle. When a command is received on the page, the CommandDispatcher receives the command and passes it to the correct PageComponent.

A PageComponent is created in ECMAScript (JavaScript, JScript) and handles commands passed by the CommandDispatcher. After the PageComponent is added to the page, you use JavaScript to create an instance of your PageComponent and register it with the PageManager. The PageComponent can then respond to the commands you defined in ribbon XML.

White paper blog links
http://msdn.microsoft.com/en-us/library/ff407290.aspx