OOUI/Toolbars

Toolbars
Toolbars are complex interface components that permit users to easily access a variety of tools (e.g., formatting commands) and actions, which are additional commands that are part of the toolbar, but not configured as tools.

Developers create and customize the individual tools, and then register them with a ToolFactory, which creates the tools on demand. Each tool has a symbolic name (used when registering the tool), a title (e.g., ‘Insert picture’), and an icon.

Individual tools are organized in toolgroups, which are displayed as menus of tools, lists of tools, or as a single bar of tools. You can customize the arrangement and order of the toolgroups when you set up the toolbar. Tools can display in any order, but each can only appear once in the toolbar.

The following is an example of a basic toolbar. We will be looking more closely at each of the components making up this example later in this documentation. To see this demo live, please see the [ https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.Toolbar code-generated documentation].

Tools
Tools are created by extending the abstract Tool class or one of its subclasses, PopupTool or ToolGroupTool. Each tool must be configured with a static name, title, and icon property:


 * &mdash; The symbolic name is used internally to register the tool with a ToolFactory. Tools must be registered with a tool factory before they can be used in a toolbar.
 * &mdash; The title text is used in different ways depending on the type of group the tool is placed inside (ToolBarGroup, ToolMenuGroup, or ToolListGroup). For ‘bar’ toolgroups, where only an icon is displayed to identify the tool, the title text is used as a tooltip that is displayed when a user moves the mouse over the tool.  For ‘list’ toolgroups, the title text is used to identify the tool in the dropdown menus used in the user interface.  If a keyboard shortcut has been defined for the tool, the shortcut will automatically be displayed.  For tools in ‘bar’ toolgroups, the keyboard shortcut is displayed in a tooltip; for tools in ‘menu’ and 'list' toolgroups, the shortcut appears to the right of each item in the dropdown menu.
 * &mdash; The icon is also used in different ways depending on the type of toolgroup that the tool is inside. For ‘bar’ toolgroups, the icon is displayed in the toolbar to identify the tool.  For ‘list’ toolgroups, the icon is displayed beside the title text in the dropdown menu.  For ‘menu’ toolgroups, the icon is ignored.

In addition to the static properties, tools must also implement the following two methods:


 * onSelect &mdash; used to specify the action the tool will carry out when it is selected
 * onUpdateState &mdash; used to synchronize the state of the tool with the state of its larger context. For example, this method could be used to select the ‘bold’ tool in the toolbar when the text cursor is moved inside an area of bolded text.

Tools can also be configured with a static ' group ' property, which can later be used when adding the tool to a bar, menu, or list toolgroup (see ToolGroups for an example of how this is done):

For a complete list of supported methods and configuration options, please see the [ https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.Tool code-level documentation for the Tool class].

PopupTool
Popup tools open a popup window when they are selected from the toolbar. Unlike standard tools, popup tools do not require that developers specify an or  method, as these methods have been implemented already.

For a complete list of supported methods and configuration options, please see [ https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.PopupTool the code-level documentation for the PopupTool class].

ToolGroupTool
A ToolGroupTool is a special sort of tool that can contain other tools and toolgroups. The ToolGroupTool was specifically designed to be used inside a ‘bar’ toolgroup to provide access to additional tools from the bar item.

For a complete list of supported methods and configuration options, please see [ https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ToolGroupTool the code-level documentation for the ToolGroupTool class].

ToolGroups
Tools are organized into toolgroups, which are created by a ToolGroupFactory and then added to the toolbar when the toolbar is set up. Individual tools can be added to any type of toolgroup (bar, list, or menu). The type of toolgroup determines how the included tools are arranged in the toolbar:
 * &mdash; Tools are displayed by icon in a single row.
 * &mdash; Tools are displayed with a label and icon in a dropdown menu. The tool's title is used as the label text.  The list can be configured to be collapsed and expanded with the allowCollapse config.
 * &mdash; Tools are displayed by label in a dropdown menu. The tool's title is used as the label text.  ‘menu’ tool groups are generally used for sets of mutually exclusive tools, such as a group of text formatting commands (paragraph, heading, etc).

Tools can be added to a toolgroup in one of several ways: by symbolic name, by group name, or with the ' * ' (asterisk) catch-all:

Add tools by :

Add tools by. A tool's group name is specified with the tool's static 'group' property (see Tools for an example).

Add tools with the :

Developers can further curate the arrangement of the tools using the toolgroup’s and  configuration options, which will arrange the tools at the top of the tool list (or front of the toolbar) or end, respectively. These settings are particularly useful when tools have been added to the toolbar en masse (e.g., with the asterisk catch-all or when a group of tools is added to a toolgroup) to manage their priority.

BarToolGroup
Tools in a   are displayed by icon in a single row. The title of the tool is displayed when users move the mouse over the tool.

For a complete list of supported methods and configuration options, please see [ https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.BarToolGroup the code-level documentation for the BarToolGroup class].

ListToolGroup
Tools in a   are displayed by icon and label in a dropdown menu. The tool's title is used as the label text. List groups can be configured to be expanded and collapsed. Collapsed lists will have a ‘More’ option that users can select to see the full list of tools. If a collapsed toolgroup is expanded, a ‘Fewer’ option permits users to collapse the list again.

In addition to a,  can also be configured with a  and  :

Use the config to designate tools as collapsible (‘ help ’ and ‘ stuff ’, in the following example). By default, the list opens in its collapsed state, and users must click the 'More' option to see the collapsed tools:

To display a collapsible list in its expanded state when the list is opened, set the config to  :

Alternatively, you may wish to specify the names of tools that should never be collapsed. This is done with the config. In the following example, only the ‘help’ tool has been designated as expanded; all other tools are collapsed by default.

For a complete list of supported methods and configuration options, please see [ https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ListToolGroup the code-level documentation for the ListToolGroup class].

MenuToolGroup
Tools in  s are displayed by label in a dropdown menu. The tool's title is used as the label text, and the menu label is updated to reflect which tool or tools are currently selected. Note that all tools must define an method if a  is used.

Configuring the toolbar
In addition to containing toolgroups, the toolbar can be configured with actions, CSS, accelerator keys, and/or an optional shadow.

Note that ‘actions’ in the context of the toolbar are different from ActionWidgets. For toolbars, ‘actions’ refers to an empty container that is right-aligned and can contain whatever you’d like.

Adding tool groups
Toolgroups are added to the toolbar with the toolbar's method:

Adding actions
Toolbars have an optional 'actions' area, which contains commands that are available to users but are not configured as tools. In the following example, the toolbar has been configured to use actions, in this case two additional buttons, ‘Action’ and ‘Disabled’. For the purpose of brevity, only the action-specific code is included in the example (the rest is just the same as the basic toolbar).

Using CSS to style tool labels
Tool labels can be styled with built-in CSS classes that are named after each tool: oo-ui-tool-name-&lt; symbolic name of tool > (e.g., oo-ui-tool-name- picture). The following example uses CSS classes to customize the appearance of the ' picture ' and the ' help ' tool labels.



Using accelerator keys
The OOUI library does not contain an accelerator system, but the Toolbar class does contain a hook for one. To use an accelerator system, subclass the toolbar and override the method, which is meant to return a label that describes the accelerator keys for the tool passed (by symbolic name) to the method.

Accelerator labels (e.g., Ctrl + M ) are displayed in different ways depending on the type of toolgroup used:


 * For bar toolgroups, the accelerator label appears in the tooltip displayed when users move the mouse over the tool.
 * For menu and list toolgroups, the accelerator label is right-aligned and rendered in gray text, which still complies to WCAG level AA.

Building the toolbar
The toolbar must be appended to the document before it can be built. Once it is appended, the toolbar can be initialized:

For a complete list of supported methods and configuration options, please see [ https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.Toolbar the code-level documentation for Toolbars].