<af:toolbar>

af:toolbar toolbar toolbar

UIComponent class: oracle.adf.view.rich.component.rich.layout.RichToolbar
Component type: oracle.adf.RichToolbar

Unsupported agents: pda

A toolbar is designed to be used inside of an <af:toolbox> and usually contains commandToolbarButtons or groups of commandToolbarButtons. You may use a toolbar outside of a toolbox though doing so will cause the toolbar to lose some of the geometry management functionality that the toolbox and toolbar provide. For example, the flex attribute will have no feasible meaning if the toolbar is not inside a toolbox. Toolbars are not rendered on printable pages.

Typically you would put a commandToolbarButton or group component in a toolbar. You may alternatively put a facetRef, iterator, or switcher in a toolbar if these wrappers provide components that would normally belong in the toolbar.

Groups

If you group the children of a toolbar, separators will be drawn between the children of a group.

Stretching

If you have an <af:toolbox> with multiple toolbars or menuBars displayed on a single row, you can specify how they are stretched in relationship to each other by specifying their flex attributes. You can control stretching within a toolbar by using its stretchId property. If you want a toolbar to align certain items to the left, and other items to the right, you can put an <af:spacer> in between them. You would then specify the toolbar's stretchId to that spacer. A toolbar that specifies a stretchId should also have a flex value assigned, to indicate to the toolbox that it requires special handling.

Example of right-aligning commandToolbarButtons:

            <af:toolbox>
              <af:toolbar flex="1" stretchid="stretch1">
                <af:group>
                  <af:commandToolbarButton text="Forward"
                                           icon="/images/fwdarrow_gray.gif"
                                           disabled="true"></af:commandToolbarButton>
                  <af:commandToolbarButton icon="/images/uplevel.gif" />
                </af:group>
                <af:commandToolbarButton id="search" text="Search"
                                         icon="/images/search.gif" />
                <af:commandToolbarButton text="Folders"
                                         icon="/images/folders.gif" />
            
                
                <af:spacer id="stretch1" clientComponent="true"/>
            
                <af:commandToolbarButton text="Reports" />
                <af:commandToolbarButton id="toggleRefresh"
                                         text="Refresh:OFF" />
              </af:toolbar>
            </af:toolbox>
          

Updating through PartialTriggers

Note that if a toolbar child component is going to be updated through partial page rendering, you need to update the toolbar as well. You do this by adding the child components id to the toolbar's partialTriggers attribute. This way the toolbar can appropriately manage its children in respect to sizing and placement in overflow. Also note that many input components also update themselves through partial page rendering. If you include an input component (or quickQuery) on a toolbar, you should include that child's id in the toolbar's partialTriggers attribute so that the toolbar also updates when the input component is replaced. Because this partialTrigger will cause overflow to close during the toolbar ppr, toolbar child components that update themselves via ppr outside of a submit (like InputComboboxLOV) will work better when not in overflow.

<af:toolbar>
            <af:group>
              <af:commandToolbarButton id="search" text="Search" icon="/images/search.gif"/>
              <af:commandToolbarButton text="Folders" icon="/images/folders.gif"/>
            </af:group>
            <af:group>
              <af:commandToolbarButton text="Reports"/>
              <af:commandToolbarButton id="toggleRefresh" text="Refresh:OFF"/>
            </af:group>
          </af:toolbar>
   

Events

Attributes