Flex Examples » Repeater http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Toggling child recycling on a Repeater in Flex http://blog.flexexamples.com/2009/10/08/toggling-child-recycling-on-a-repeater-in-flex/ http://blog.flexexamples.com/2009/10/08/toggling-child-recycling-on-a-repeater-in-flex/#comments Fri, 09 Oct 2009 05:05:42 +0000 Peter deHaan http://blog.flexexamples.com/?p=1987 The following example shows how you can toggle child recycling in a Repeater object in Flex by setting the Boolean recycleChildren property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/08/toggling-child-recycling-on-a-repeater-in-flex/ --> <mx:Application name="Repeater_recycleChildren_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ import mx.controls.Alert; ]]> </mx:Script>   <mx:ArrayCollection id="arrColl"> <mx:Object label="One" /> <mx:Object label="Two" [...]]]> The following example shows how you can toggle child recycling in a Repeater object in Flex by setting the Boolean recycleChildren property.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/08/toggling-child-recycling-on-a-repeater-in-flex/ -->
<mx:Application name="Repeater_recycleChildren_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>
 
    <mx:ArrayCollection id="arrColl">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
    </mx:ArrayCollection>
 
    <mx:Panel title="Items"
            status="{arrColl.length} Items"
            width="200">
        <mx:Repeater id="rep" dataProvider="{arrColl}" recycleChildren="true">
            <mx:LinkButton label="{String(rep.currentItem.label).toUpperCase()}"
                    click="Alert.show(event.currentTarget.label);"
                    width="100%"/>
        </mx:Repeater>
    </mx:Panel>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2009/10/08/toggling-child-recycling-on-a-repeater-in-flex/feed/ 0 Using the Repeater class in Flex 4 http://blog.flexexamples.com/2009/03/10/using-the-repeater-class-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/10/using-the-repeater-class-in-flex-gumbo/#comments Wed, 11 Mar 2009 04:07:45 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/10/using-the-repeater-class-in-flex-gumbo/ The following example shows how you can use the Repeater class with Flex 4. The trick to using the Repeater class in Flex 4 is that the repeater must be within an MX container (HBox, VBox, Canvas, mx:Panel, mx:Application, etc).

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/10/using-the-repeater-class-in-flex-gumbo/ --> <s:Application name="Spark_Repeater_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <fx:Declarations> <s:ArrayList [...]]]> The following example shows how you can use the Repeater class with Flex 4. The trick to using the Repeater class in Flex 4 is that the repeater must be within an MX container (HBox, VBox, Canvas, mx:Panel, mx:Application, etc).

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/10/using-the-repeater-class-in-flex-gumbo/ -->
<s:Application name="Spark_Repeater_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Declarations>
        <s:ArrayList id="arrList"
                source="[Red,Orange,Yellow,Green,Blue]"/>
    </fx:Declarations>
 
    <s:VGroup horizontalCenter="0" verticalCenter="0">
        <s:Label text="-- Start" />
 
        <mx:HBox>
            <mx:Repeater id="r" dataProvider="{arrList}">
                <s:Button left="20" top="335" label="{r.currentItem}" />
            </mx:Repeater>
        </mx:HBox>
 
        <s:Label text="Finish --" />
    </s:VGroup>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/03/10/using-the-repeater-class-in-flex-gumbo/feed/ 3 Displaying CheckBox controls using the Repeater in Flex http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/ http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/#comments Thu, 29 May 2008 13:31:53 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/ The following example shows how you can display a series of CheckBox controls using the Flex Repeater with an Array data provider.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.controls.CheckBox; private function button_click(evt:Event):void { var selArr:Array [...]]]> The following example shows how you can display a series of CheckBox controls using the Flex Repeater with an Array data provider.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.CheckBox;

            private function button_click(evt:Event):void {
                var selArr:Array = [];
                var idx:int;
                var len:int = arr.length;
                for (idx=0; idx<len; idx++) {
                    if (checkBox[idx].selected) {
                        selArr.push(checkBox[idx].label);
                    }
                }

                var title:String = selArr.length + " of " + len + " item(s) selected.";
                var message:String = selArr.join("\\n");
                Alert.show(message, title);
            }

            private function doFilter(element:*, index:int, arr:Array):Boolean {
                return element.selected;
            }

            private function checkBox_change(evt:Event):void {
                var ch:CheckBox = evt.currentTarget as CheckBox;
                Alert.show(ch.getRepeaterItem().data);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red" data="red" />
        <mx:Object label="Orange" data="haloOrange" />
        <mx:Object label="Yellow" data="yellow" />
        <mx:Object label="Green" data="haloGreen" />
        <mx:Object label="Blue" data="haloBlue" />
    </mx:Array>

    <mx:Panel id="panel" width="50%" paddingLeft="10" verticalGap="10">
        <mx:Repeater id="checkBoxRepeater" dataProvider="{arr}">
            <mx:CheckBox id="checkBox"
                    label="{checkBoxRepeater.currentItem.label}"
                    data="{checkBoxRepeater.currentItem.data}"
                    change="checkBox_change(event);" />
        </mx:Repeater>
        <mx:ControlBar horizontalAlign="right">
            <mx:Button id="button"
                    label="Click me"
                    emphasized="true"
                    click="button_click(event);" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/29/displaying-checkbox-controls-using-the-repeater-in-flex/feed/ 14 Displaying RadioButton controls using the Repeater in Flex (redux) http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/ http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/#comments Thu, 29 May 2008 02:33:36 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/ In a previous example, “Displaying RadioButton controls using the Repeater in Flex”, we saw how you could use a Repeater in MXML to display a series of Flex RadioButton controls based on a data provider.

The following example shows how you can create a Repeater using ActionScript to accomplish the same thing.

Full code [...]]]> In a previous example, “Displaying RadioButton controls using the Repeater in Flex”, we saw how you could use a Repeater in MXML to display a series of Flex RadioButton controls based on a data provider.

The following example shows how you can create a Repeater using ActionScript to accomplish the same thing.

Full code after the jump.

I’m not saying that creating a Repeater using ActionScript is the best/preferred/pretty way of doing this, but it is just one of many solutions.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <comps:MyComp />

</mx:Application>

comps/MyComp.as

/**
 * http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/
 */
package comps {
    import flash.events.Event;

    import mx.containers.ApplicationControlBar;
    import mx.containers.Canvas;
    import mx.containers.Form;
    import mx.containers.FormItem;
    import mx.containers.HBox;
    import mx.controls.Alert;
    import mx.controls.Label;
    import mx.controls.RadioButton;
    import mx.controls.RadioButtonGroup;
    import mx.core.Application;
    import mx.core.Repeater;
    import mx.core.UIComponentDescriptor;
    import mx.styles.CSSStyleDeclaration;
    import mx.styles.StyleManager;

    public class MyComp extends Canvas {
        private var arr:Array;
        private var appControlBar:ApplicationControlBar;
        private var form:Form;
        private var formItem:FormItem;
        private var lbl:Label;
        private var hBox:HBox;
        private var radioGroup:RadioButtonGroup;
        private var radioRepeater:Repeater;

        public function MyComp() {
            super();
            init();
        }

        private function init():void {
            var alertCSS:CSSStyleDeclaration;
            alertCSS = StyleManager.getStyleDeclaration("Alert");
            alertCSS.setStyle("backgroundAlpha", 0.8);
            alertCSS.setStyle("backgroundColor", "black");
            alertCSS.setStyle("borderAlpha", 0.8);
            alertCSS.setStyle("borderColor", "black");

            arr = [];
            arr.push({label:"Red", data:"red"});
            arr.push({label:"Orange", data:"haloOrange"});
            arr.push({label:"Yellow", data:"yellow"});
            arr.push({label:"Green", data:"haloGreen"});
            arr.push({label:"Blue", data:"haloBlue"});

            radioGroup = new RadioButtonGroup();

            lbl = new Label();

            formItem = new FormItem();
            formItem.label = "selectedValue:";
            formItem.addChild(lbl);

            form = new Form();
            form.styleName = "plain";
            form.addChild(formItem);

            appControlBar = new ApplicationControlBar();
            appControlBar.dock = true;
            appControlBar.addChild(form);
            Application.application.addChildAt(appControlBar, 0);

            hBox = new HBox();
            hBox.setStyle("horizontalGap", 60);
            addChild(hBox);

            var descriptorProps:Object = {};
            descriptorProps.type = RadioButton;
            descriptorProps.document = this;
            descriptorProps.propertiesFactory = radioPropFac;
            descriptorProps.events = {change:"radioButton_change"};

            var radioDescriptor:UIComponentDescriptor = new UIComponentDescriptor(descriptorProps);

            radioRepeater = new Repeater();
            radioRepeater.dataProvider = arr;
            radioRepeater.childDescriptors = [radioDescriptor];
            radioRepeater.initializeRepeater(hBox, true);
        }

        private function radioPropFac():Object {
            var obj:Object = {};
            obj.label = radioRepeater.currentItem.label;
            obj.group = radioGroup;
            return obj;
        }

        public function radioButton_change(evt:Event):void {
            var radio:RadioButton = RadioButton(evt.currentTarget);
            var item:Object = radio.getRepeaterItem();
            var cssObj:CSSStyleDeclaration;
            cssObj = StyleManager.getStyleDeclaration("Alert");
            cssObj.setStyle("modalTransparencyColor", item.data);
            cssObj.setStyle("themeColor", item.data);
            Alert.show(item.label, "getRepeaterItem()");

            callLater(updateSelectedValue, [evt]);
        }

        private function updateSelectedValue(evt:Event):void {
            lbl.text = radioGroup.selectedValue.toString();
        }
    }
}

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex-redux/feed/ 17 Displaying RadioButton controls using the Repeater in Flex http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/ http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/#comments Wed, 28 May 2008 13:43:15 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/ The following example shows how you can display a series of RadioButtons using the Flex Repeater with an Array data provider.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> Alert { backgroundAlpha: 0.8; backgroundColor: black; borderAlpha: 0.8; borderColor: black; } </mx:Style> [...]]]> The following example shows how you can display a series of RadioButtons using the Flex Repeater with an Array data provider.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Alert {
            backgroundAlpha: 0.8;
            backgroundColor: black;
            borderAlpha: 0.8;
            borderColor: black;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.RadioButton;

            private function radioButton_change(evt:Event):void {
                var radio:RadioButton = RadioButton(evt.currentTarget);
                var item:Object = radio.getRepeaterItem();
                var cssObj:CSSStyleDeclaration;
                cssObj = StyleManager.getStyleDeclaration("Alert");
                cssObj.setStyle("modalTransparencyColor", item.data);
                cssObj.setStyle("themeColor", item.data);
                Alert.show(item.label, "getRepeaterItem()");
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Red" data="red" />
        <mx:Object label="Orange" data="haloOrange" />
        <mx:Object label="Yellow" data="yellow" />
        <mx:Object label="Green" data="haloGreen" />
        <mx:Object label="Blue" data="haloBlue" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="selectedValue:">
                <mx:Label text="{radioGroup.selectedValue}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HBox id="hb" horizontalGap="60">
        <mx:RadioButtonGroup id="radioGroup" />
        <mx:Repeater id="radioRepeater"
                dataProvider="{arr}">
            <mx:RadioButton id="radioButtons"
                    label="{radioRepeater.currentItem.label}"
                    group="{radioGroup}"
                    change="radioButton_change(event);" />
        </mx:Repeater>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/28/displaying-radiobutton-controls-using-the-repeater-in-flex/feed/ 1 Creating a pop up TitleWindow using the PopUpButton control in Flex http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/#comments Mon, 14 Apr 2008 05:49:42 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ The following example shows how you can create a pop up TitleWindow container using the Flex PopUpButton control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> TitleWindow { roundedBottomCorners: false; borderColor: haloSilver; backgroundColor: haloSilver; borderAlpha: 0.8; backgroundAlpha: 0.8; dropShadowEnabled: false; } [...]]]> The following example shows how you can create a pop up TitleWindow container using the Flex PopUpButton control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        TitleWindow {
            roundedBottomCorners: false;
            borderColor: haloSilver;
            backgroundColor: haloSilver;
            borderAlpha: 0.8;
            backgroundAlpha: 0.8;
            dropShadowEnabled: false;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.CheckBox;
            import mx.controls.dataGridClasses.DataGridColumn;

            private function checkBox_change(evt:Event):void {
                var ch:CheckBox = evt.currentTarget as CheckBox;
                var idx:int = int(ch.data);
                var obj:Object = arrColl.getItemAt(idx);
                obj.sel = ch.selected;
                arrColl.disableAutoUpdate();
                arrColl.setItemAt(obj, idx);
            }

            private function selectAll(evt:Event):void {
                var idx:int;
                var item:Object;
                for (idx=0; idx<arrColl.length; idx++) {
                    item = arrColl.getItemAt(idx);
                    item.sel = CheckBox(evt.currentTarget).selected;
                }
                arrColl.refresh();
            }

            private function sel_labelFunc(item:Object, col:DataGridColumn):String {
                var bool:Boolean = item.hasOwnProperty("sel") &&
                            (item.sel == "true" || item.sel == true);
                return bool.toString();
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array id="arr">
                <mx:Object label="Button" />
                <mx:Object label="ButtonBar" />
                <mx:Object label="CheckBox" />
                <mx:Object label="ColorPicker" sel="true" />
                <mx:Object label="ComboBox" sel="true" />
                <mx:Object label="DataGrid" sel="true" />
                <mx:Object label="DateChooser" />
                <mx:Object label="DateField" sel="true" />
                <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" sel="true" />
                <mx:Object label="Menu" />
                <mx:Object label="MenuBar" />
                <mx:Object label="NumericStepper" sel="true" />
                <mx:Object label="ProgressBar" />
                <mx:Object label="RadioButton" />
                <mx:Object label="RadioButtonGroup" />
                <mx:Object label="RichTextEditor" sel="true" />
                <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" sel="true" />
                <mx:Object label="VideoDisplay" />
                <mx:Object label="VRule" />
                <mx:Object label="VScrollBar" />
                <mx:Object label="VSlider" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:PopUpButton id="popUpButton"
                label="Please select some components"
                openAlways="true"
                close="arrColl.refresh();">
            <mx:popUp>
                <mx:TitleWindow id="titleWin"
                        height="200"
                        showCloseButton="true"
                        verticalScrollPolicy="on"
                        horizontalScrollPolicy="off"
                        close="popUpButton.close();">
                    <mx:ToolBar width="320">
                        <mx:Repeater id="myRep"
                                dataProvider="{arrColl}">
                            <mx:CheckBox data="{myRep.currentIndex}"
                                    label="{myRep.currentItem.label}"
                                    selected="{myRep.currentItem.sel}"
                                    change="checkBox_change(event);"
                                    width="100" />
                        </mx:Repeater>
                    </mx:ToolBar>
                    <mx:ControlBar>
                        <mx:CheckBox label="Select All"
                                labelPlacement="left"
                                change="selectAll(event);" />
                    </mx:ControlBar>
                </mx:TitleWindow>
            </mx:popUp>
        </mx:PopUpButton>
    </mx:ApplicationControlBar>

    <mx:DataGrid dataProvider="{arrColl}">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="sel"
                    labelFunction="sel_labelFunc" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/13/creating-a-pop-up-titlewindow-using-the-popupbutton-control-in-flex/feed/ 17 Creating a resizing ToolBar in Flex http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/ http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/#comments Sun, 06 Jan 2008 08:26:27 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/06/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 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.

 
]]> http://blog.flexexamples.com/2008/01/06/creating-a-resizing-toolbar-in-flex/feed/ 9 Displaying images from an XML file using the Repeater component http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/#comments Thu, 04 Oct 2007 06:44:41 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ The following example shows you how to use the Repeater component to display images loaded from an external XML file.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XML id="imagesXML" source="images.xml" /> <mx:Zoom id="zoom" /> <mx:HBox id="hBox"> <mx:Repeater id="rep" dataProvider="{imagesXML.image}"> <mx:Image source="{rep.currentItem.@src}" [...]]]> The following example shows you how to use the Repeater component to display images loaded from an external XML file.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="imagesXML" source="images.xml" />

    <mx:Zoom id="zoom" />

    <mx:HBox id="hBox">
         <mx:Repeater id="rep"
                 dataProvider="{imagesXML.image}">
            <mx:Image source="{rep.currentItem.@src}"
                    toolTip="{rep.currentIndex}:{rep.currentItem.@alt}"
                    completeEffect="{zoom}" />
        </mx:Repeater>
    </mx:HBox>

</mx:Application>

images.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/ -->
<images>
    <image src="images/Button.png" alt="Button" />
    <image src="images/ButtonBar.png" alt="ButtonBar" />
    <image src="images/CheckBox.png" alt="CheckBox" />
    <image src="images/ColorPicker.png" alt="ColorPicker" />
    <image src="images/ComboBox.png" alt="ComboBox" />
    <image src="images/DataGrid.png" alt="DataGrid" />
    <image src="images/DateChooser.png" alt="DateChooser" />
    <image src="images/DateField.png" alt="DateField" />
</images>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/03/displaying-images-from-an-xml-file-using-the-repeater-component/feed/ 12