Creating a resizing ToolBar in Flex

The following example shows how you can create a toolbar in Flex by using the ToolBar container which automatically wraps and re-lays out its children when the toolbar is resized. According to the documentation in the class file (see [SDK Directory]\frameworks\projects\framework\src\mx\controls\richTextEditorClasses\ToolBar.as):

The ToolBar container lays out its children in a single horizontal row. If the width of the container is less than the measured width, the children wrap to the next line.
While wrapping, any VRule controls (separators) at the end of a row or the beginning of a row are not drawn.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="images">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
        <mx:Object label="DataGrid" />
        <mx:Object label="DateChooser" />
        <mx:Object label="DateField" />
        <mx:Object label="HorizontalList" />
        <mx:Object label="HRule" />
        <mx:Object label="HSlider" />
        <mx:Object label="Image" />
        <mx:Object label="Label" />
        <mx:Object label="LinkBar" />
        <mx:Object label="LinkButton" />
        <mx:Object label="List" />
        <mx:Object label="Menu" />
        <mx:Object label="MenuBar" />
        <mx:Object label="NumericStepper" />
        <mx:Object label="ProgressBar" />
        <mx:Object label="RadioButton" />
        <mx:Object label="RadioButtonGroup" />
        <mx:Object label="RichTextEditor" />
        <mx:Object label="Spacer" />
        <mx:Object label="SWFLoader" />
        <mx:Object label="TabBar" />
        <mx:Object label="Text" />
        <mx:Object label="TextArea" />
        <mx:Object label="TextInput" />
        <mx:Object label="TileList" />
        <mx:Object label="Tree" />
        <mx:Object label="VideoDisplay" />
        <mx:Object label="VRule" />
        <mx:Object label="VScrollBar" />
        <mx:Object label="VSlider" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="percentWidth:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="100"
                        value="35"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="10"
                        dataTipPrecision="0" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:VBox id="vBox"
            verticalAlign="middle"
            horizontalAlign="center"
            backgroundColor="black"
            backgroundAlpha="0.1"
            width="100%"
            height="200">
        <mx:ToolBar id="toolBar"
                 percentWidth="{slider.value}"
                 backgroundColor="haloSilver"
                 minWidth="18">
            <mx:Repeater id="imgRepeater"
                    dataProvider="{images}">
                <mx:Image id="img"
                        source="assets/{imgRepeater.currentItem.label}.png"
                        toolTip="{imgRepeater.currentItem.label}" />
            </mx:Repeater>
        </mx:ToolBar>
    </mx:VBox>

</mx:Application>

View source is enabled in the following example.

Tagged as: percentWidth