The Ribbon control

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Version:

Home | Sign in | English

Help

The Ribbon control

Overview of Ribbon control

Creating a Ribbon control

Characteristics of Ribbon control

Related examples

See also

The Ribbon control

Overview of Ribbon control

The Ribbon control proposes an additional feature regarding the menus found in your applications. It is used to present in a small surface a large number of controls arranged logically in order to perform choices.

For example, the different menus of the "Sales Management" application presented in ribbon:

In this example, the different elements of the Ribbon control are buttons but any type of control can be used.

At run time, the ribbon elements are more or less displayed according to the size of the window. If some elements cannot be displayed, a little arrow is used to "expand the ribbon" and to display all the elements in a popup window:

Notes:

The TAB key pressed on an edit control found in the Ribbon control is used to go to the next control (according to the tabulation order).
The ENTER key pressed on an edit control found in the Ribbon control has no effect.

Creating a Ribbon control

To create a Ribbon control:

In the window editor, click or select "Insert .. Ribbon".On the "Creation" pane, in the "Containers" group, expand "Tab and associated" and click "Ribbon".
Other possibility: On the "Window" pane, in the "Bars and menus" group, expand "Other bars" and select "Ribbon".
Click the position where the control will be created in the window. The control appears in creation mode.
Define the characteristics of the Ribbon control. To display the control characteristics, select "Description" from the popup menu of control.
Insert the requested controls into the different groupings. All types of controls can be included in a grouping.

To transform the popup menu of a window into a Ribbon control:

Open the window containing the main menu.
Select "Control .. Swap .. Main menu to Ribbon". On the "Modification" pane, in the "Transformations" group, expand "Refactoring and swapping" and select "Main menu to ribbon".

Caution: To use this option, the Ribbon control must not exist in the window.

Characteristics of Ribbon control

The Ribbon control includes panes and groups.

Each pane is represented by an icon and a caption.

Each pane contains one or more groups separated by a vertical line.

Description of a Ribbon control

The description window of a Ribbon control is used to:

define the different panes of the Ribbon control ("General" tab). For each pane, you have the ability to define:
- the caption of the pane,
- its initial status,
- the image displayed beside the caption.
  The position of this image can be modified in the "Style" tab ("Caption of active pane" and "Captions of inactive panes" elements).
- the tooltip of the pane.
define the different groupings displayed by each pane ("General" tab). For each grouping, you have the ability to define:
- the caption of the grouping. This caption will be displayed at the bottom of the grouping when this one is opened.
- whether the pane displays a specific button ("With button (click process)").
  In this case, the click process of grouping will be run when this button is clicked by the user.
  This allows you to display a popup menu or a specific window for example, ...
- the image that will be displayed when the grouping is reduced. The dimensions of this image must be set to 32 x 32.

Notes:

The image used for the drawing of the panes can be customized in the description window of the control ("Details" tab).
Several options used to customize the panes and the groupings are available in the description window of the control ("Style" tab).

Using buttons in a Ribbon control

If a Button control is found in a grouping of a Ribbon control, the "GUI" tab of the Button control is used to configure the management mode of the button when the ribbon is reduced.

You can:

avoid reducing the control.
reduce it to display the image of button and its caption.
reduce it to display the image of button.

The last two options are interesting for the buttons that display a specific icon and a caption.

Note: You have the ability to use buttons with arrow in a Ribbon control, allowing for example to classify the actions for perform hierarchically.

Related Examples:

Training (WINDEV): WD Flowchart

[ + ] This example is used to create organization charts.
An organization chart is used to indicate the repartition of the managers within a company and the relationships that exist between these managers.