Using Toolbars, Toolbar Buttons, and Toolboxes
Along with menus, you can create toolbars in your application that contain toolbar buttons used to initiate some operation in the application. The buttons can display text, an icon, or a combination of both. You can use the group component to group related toolbar buttons.
Toolbars can also contain other UI components, such as drop-down lists, command buttons, and command links. However, toolbar buttons provide additional functionality:
The af:commandToolbarButton component has a popup facet that enables you to provide pop-up menus from a toolbar button.
The flex property of a component can be set to an integer that indicates the ratio of this component to other flexible components within the same container.
You can use more than one toolbar component by enclosing them in a toolbox component (in the Layout group of the Component Palette). Doing so stacks the toolbars so that the first toolbar on the page displays on the top, and the last toolbar displays on the bottom. When you use more than one toolbar, you can set the flex attribute on the toolbars to determine which toolbar should be the longest. If you want toolbars to be displayed next to each other (rather than stacked), you can enclose them in a group component.
Within a toolbar, you can set one component to stretch so that the toolbar will always equal that of its parent container. When a window is resized such that all the components within the toolbar can no longer be displayed, the toolbar displays an overflow icon.