Ribbon Bar

The Ribbon UI is a completely new kind of graphical user  interface,  both  in  appearance  and  interaction terms,   whose   target   is   to   simplify   user accessibility.  Graphically, the Ribbon displays  different  semantic  areas, where operations are grouped and easy to find.  The round button (1) opens a pulldown graphic menu that contains the basic functionality of an application. To the  right of the round button, there is a quick access toolbar (2), which shows the most recently used commands.

The  Ribbon  Bar  is  a  container  for  Ribbon  Pages, as shown  in  the  figure  below.  These  substitute  the MenuBar and the ToolBar, presenting a Tabbed version of the two in the same graphical style. The idea is to avoid showing sets of commands which are not frequently or recently used. It is a sort of hiding buttons/options, but, at the same time, having them ready if needed.

 Menus and Toolbars were designed for applications with a set of limited features. If the number of toolbars, task panes and the number of options in menus increase too much, then it becomes hard to find functionality and the risk is to use minimal part of the rich set of features of an application. Often, users do not know where commands are or even if they exist.

Office 2007 and later introduced some nice ideas, such as:

 For Office 2007 Microsoft used Results-Oriented Design in place of Command-Oriented Design.

Macrovision added to Eagle a set of analysis commands aimed to help the programmer to gather as many information as possible about the application user interface accessibility from users sessions. This data is then analyzed and will help the GUI programmer to design the layout of better interface which reflects user usage patterns.

The Ribbon style helps in such reorganization work, avoiding crowded interfaces, continuous selection of different menus searching the right features, etc., defining the following targets for UI design:

• A persons focus must be on their content not on the UI

• Reduce the number of choices presented at any given time

• Increase efficiency  

• Embrace consistency

• Give features a permanent home

• Straightforward is better than clever

Ribbon Bar Structure

A Ribbon UI is structured in several component parts which can be defined as follows:

1.  Ribbon Bar - the main container contain all menus, pages and controls

2. Application button - main commonly used application configuration and general interaction options

3. Quick Access Toolbar configurable menu containing use defined options for quick access

4. Ribbon Tab tab menu which brings up additional ribbon page options by choice or by context usage

5. Ribbon Page page container on which collection of associated options is displayed

6. Ribbon Group the grouping of collected associated options

We will now describe  each of these parts.

The Ribbon Bar, which is the main container, contains the RibbonPage, the Application Button and the Quick Access Toolbar.  The RibbonPage is identified by a RibbonTab, exactly the same  as in a tabbed window. Each RibbonPage is composed of RibbonGroups, which contains the functionality access. These can be any type of control that access a program feature directly or through other groups of controls, such as Pulldown Buttons, Dialogs, etc. A RibbonGroup can have a caption holding a title and a button to open the entire corresponding set of associated functionality.

The width of the Ribbon determines the type of display of a RibbonGroup:

The Application Button opens up the application main menu, while the Quick Access Toolbar contains a set of controls that are always available to the user regardless of which tab is currently selected.  

The Quick Access Toolbar can be located above or under the tabs:

The user can customize the location and content of the Quick Access Toolbar using a menu that appears when the user clicks the drop-down arrow on the right as shown in the figure on the above right.

 The Ribbon UI added to Eagle in the UI Framework extends the hierarchy structure of Eagle as follows:

The new Eagle command that must be used to create such graphical user interface is the RIBBON command, the basic syntax of which is:

where:

where the  file is an XML file that describes the layout of the ribbon interface.

The following example shows the structure of the layout file simplified for the sake of clarity and the XML schema associated with it.

The file format is based on XML and it complies to the Eagle GAML schema defined in the GAML.xsd file, the structure of which is partially described for the ribbon in the diagram below. The structure of the files is practically the same as before except RIBBON is a child of the GAML braces; refer to the RIBBON command and release notes for details.  GAML is an XML schema used in the definition of the RIBBON structure within Eagle GUI and is designed to be extended to encompass all UI elements in the coming future releases of Eagle which also support UNICODE.  The versions will be branched with one embracing full GAML compliance whilst the other will provide as clear non-intrusive upgrade path for existing code.

Note: the text string displayed in the above XML file can be treated in exactly the same way as in Eagle TAB files, which means that there is full support for the Message Function (e.g.: m(11,27)) and Eagle pathnames (e.g.: @application/utils/recover.cmd or -NUPASDIR/open.bmp ).

(The listing above represents only part of the file for practicality purposes)

The ribbon interface layout starts as a static map of the interface, but during the processing of the application, it can be changed dynamically. For instance, the Quick Access Toolbar changes accordingly to the most used features or to the applications strategy.

    Office 2007 Silver theme

    Office 2007 Obsidian theme

The above images show the ribbon as always being visible, but it is also possible to minimize it and reduce the real estate taken up by the  user interface even further.

                           Minimized ribbon     

In this case the ribbon tabs remain visible but when selected will open up the relevant corresponding ribbon page.  The ribbon will then will be made invisible once more when it is selected again.  This behavior is achieved by right-clicking on the application button and selecting the Minimize the Ribbon option from the pulldown menu as illustrated in the above lower image.

Ribbon Selecting, Inserting and Removing Pages

A Ribbon UI is structured in several component parts which can be defined as follows:

where:

The new page must be defined in an XML file containing the specification of the new page;

If the XML file contains more pages, they are also inserted as well.

It is important to note that the original XML file used to install the RibbonBar is changed and its content   is   updated   with   the   inserted   or   removed   pages.   This   reflects   the   persistency characteristic of the new XML-based Eagle graphic user interface.

 The above example in GAML becomes:

The First line can include the schema for run-time validation purposes:

Ribbon UI philosophy

In this paragraph we will outline some characteristics of a Ribbon-based user interface, considering the factors that enrich the interactive nature of an interface.  These ideas are those which have been embraced by the proposers of the Ribbon interface.  Most of our research derives from the considerable user and developer studies Microsoft undertook during the design of the Office 2007 user interface.

Mnemonics

A mnemonic is a readily recognizable character (or set of characters) that the user can type to quickly execute a command or an action.  In the ribbon bar the relevant mnemonics are shown in a tooltip near to the related command option when the ALT key is pressed. A mnemonic could be considered as being the same as a shortcut key or accelerator, that is, a quick access way for the user can to activate a specific action ribbon choice.

The user presses ALT and the relevant mnemonic key to navigate the ribbon page activating a tab  group or to execute an action/command.  Pressing the ALT and the mnemonic key also displays a  label associated with a tab group which is then used to navigate to the tab group. The user presses the mnemonic key again when within a menu or tab group to activate or toggle the appropriate choice from within the same menu or tab group.

Mnemonics keys are available for  the follow:

• Tab page;

• Controls inside pages;

• Quick access toolbar buttons;

• Application node;

• Buttons inside the application menu.

The mnemonic can have one or more keys and the developer can set the appropriate tips in the xml configuration file.

In practical terms if we consider for example the previous image, if the user needs to navigate to the Project Document button (which is the last control in the Review page), the correct sequence of keys will be as follows:

 Polling extensions

Since we have new GUI objects, we also have new GUI events, which are reported by the Eagle POLLING command with new values for the system variables the command sets.

WT Variable:

The RibbonBar is a totally new GUI objects and it is represented with the value 12 in the WT variable.

MN Variable:

The value given to the MN variable is the RibbonPage Tab id or one of the following values for the special case:

 BN Variable:

The value given to the BN variable is the RibbonButton id or the index of the selected option for the special case, starting from 1.

With this mapping a mainloop function is able to detect if the GUI event comes from

- a RibbonBar object (WT=12)

- a RibbonPage (MN >= 1) and which button (BN),

- the Quick Access Toolbar (MN = 0) and which option (BN),

- the FileMenu (MN = -1) and which option (BN).

Recent documents gallery

The Application menu, which is accessible through the Application Menu Button, is divided in two main parts.  The left side is comprised of buttons (such as New, Open or Save) and the right side contains a nested submenu.

The items in the right hand section can be customized to contain a specific menu depending on the button selected in the left side.  This means that the button is expandable and can group together complimentary application functionality using a single easy-to-use entry point.

In addition to expandable buttons (such as Print), the Application menu has a default gallery that displays Recent Documents.

The structure of the Recent Documents menu enables definition of:

·         the title;
·         the size, the maximum number of elements present in the gallery;
·         the list of elements.

In order to accommodate the gallery of Recent Documents the XML file, representing the ribbon interface, has been extended and a new Ribbon.xsd schema file has been created. The new part has been included in the ApplicationButton structure, located after the FileMenu definition:

...

      <ApplicationButton Image="EagleRibbon.bmp" ... >

      ...

            <FileMenu Exit= ...>

...

</FileMenu>

            <Gallery Title="Gallery Items" Size="12">

                  <GalleryItem Id="3" Text="File 1" Action="do ..."/>

                  <GalleryItem Id="2" Text="File 2" Action="do ..."/>

                  <GalleryItem Id="1" Text="File 3" Action="..."/>

            </Gallery>

      ...

      </ApplicationButton>

As shown in the xml sample above, the Gallery element must be used to define the Recent Document menu.  The Gallery consists of two attributes, a label for the title (Title) and the number of element shown in the Recent Documents menu (Size), and within this is an unbounded list of GalleryItem objects.

The GalleryItem type describes single items present in the Recent Documents menu using the following attributes:

·         Id : index of the item inside the menu;

·         Text : label displayed for the item;

·         Action : command executed when the item is selected.

The ribbon command has been extended to manage the gallery and to modify its characteristics at runtime, meaning the developer doesnt need to access the XML file directly. The changes applied to the ribbons gallery are persisted in the XML file used for creating the ribbon itself.

The new command options are:

·         ribbon gallery, size=<value> : change the maximum number of options

·         ribbon gallery, title=<string> : change the title

·         ribbon gallery, add=<string>, action=<string> : add on top a new option with an associated action.

The syntax of the new command is as follows:

 where:

For example:

When the user adds a new item to the gallery list, the Id of the other elements in the XML file are increased by one unit and the new item will be appended to the list with an Id = 1, for instance:

Note,the order of GalleryItem objects is not relevant because the presentation is guided by the Id value.  The most recent GalleryItem is given the id=1 meaning it is displayed at the top of the list and so on for all other items.

When an option is selected the related action is executed and polling returns the following values:

Help Button

The ribbon bar includes an additional button located on the right hand side of the bar near the system mdi buttons.

This object, called help button, could be used to execute a specific action in order to support the user displaying a help document, web page or something else.

The Help button is enabled by setting the RIBBON_HELP_ICON to with an existing icon file (*.ico); the icon binder has to contain a 16x16 image. When the RIBBON_HELP_ICON option is not present in the configuration file or the defined icon file does not exist the button is not displayed.

Furthermore a developer can set tooltip text by defining the RIBBON_HELP_TEXT and an action with the RIBBON_HELP_ACTION entry. By default the help button doesnt have tooltip text or an associated action defined.

INI Sample :

Messages Support

Starting with v.14.5.1.b03, Eagle RibbonBar supports text/messages taken from the Eagle Message File.

Anywhere it is possible to specify text using a string (e.g.: Label=Straight Pipe), it is now possible to use the  m(set,line) function instead.

A few examples follow:

Restrictions

Usually Eagle supports two syntaxes for messages:

1.      m(set,line)

2.      mess(set,line)

In the actual implementation of the RibbonBar only the first syntax is supported.

Furthermore, whilst Eagle is able to inject a text message in place of a m(set,line) phrase using syntax like:

The RibbonBar however does not support that method; you must use text or a message:

                <Option Id="1" Label="Ambient Light"   or

<Option Id="1" Label="m(15,62)"

Whilst the syntax:

<Option Id="1" Label="Ambient m(15,58)"

is invalid.

The  <KeyTip> element is an exception to that rule.  In fact, it accepts the following partially-mixed syntax: