Flex Examples » iconField http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Changing the label placement on an MX TabBar control in Flex http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/#comments Wed, 10 Nov 2010 02:41:44 +0000 Peter deHaan http://blog.flexexamples.com/?p=3436 In a previous example, “Changing the label placement on an MX ButtonBar control in Flex (redux)”, we saw how you could set the label/icon placement on an MX ButtonBar control in Flex by extending the MX ButtonBar class and setting the navItemFactory property in the mx_internal namespace to a custom class.

The following example [...]]]> In a previous example, “Changing the label placement on an MX ButtonBar control in Flex (redux)”, we saw how you could set the label/icon placement on an MX ButtonBar control in Flex by extending the MX ButtonBar class and setting the navItemFactory property in the mx_internal namespace to a custom class.

The following example shows how you can set the label/icon placement on an MX TabBar control in Flex by extending the MX TabBar class and setting the navItemFactory property in the mx_internal namespace to a custom Tab button class.

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ -->
<mx:Application name="MX_TabBar_navItemFactory_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <comps:CustomTabBar id="tb"
            dataProvider="{viewstack}"
            labelField="label"
            iconField="icon"
            width="300" />
 
    <mx:ViewStack id="viewstack"
            backgroundColor="white"
            width="300" height="100">
        <mx:Canvas id="tab_1"
                label="Tab 1"
                icon="@Embed('Assets.swf#CloseButtonUp')">
            <mx:Button />
        </mx:Canvas>
        <mx:Canvas id="tab_2"
                label="Tab 2"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ColorPicker />
        </mx:Canvas>
        <mx:Canvas id="tab_3"
                label="Tab 3"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ComboBox dataProvider="[red,orange,yellow,green,blue]" />
        </mx:Canvas>
    </mx:ViewStack>
 
</mx:Application>

The custom MX TabBar control, comps/CustomTabBar.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ */
package comps {
    import mx.controls.TabBar;
    import mx.core.ClassFactory;
    import mx.core.mx_internal;
 
    public class CustomTabBar extends TabBar {
        public function CustomTabBar() {
            super();
            mx_internal::navItemFactory = new ClassFactory(CustomTab);
        }
    }
}

And the custom nav item factory, comps/CustomTab.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ */
package comps {
    import mx.controls.tabBarClasses.Tab;
 
    public class CustomTab extends Tab {
        public function CustomTab() {
            super();
            labelPlacement = "top";
        }
    }
}
 
]]> http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/feed/ 4 Changing the label placement on an MX ButtonBar control in Flex (redux) http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/#comments Wed, 10 Nov 2010 02:23:51 +0000 Peter deHaan http://blog.flexexamples.com/?p=3433 In a previous example, “Changing the label placement for a Flex ButtonBar control”, we saw how you could change the button’s label placement relative to its icon in a ButtonBar control in Flex by using the getChildAt() method and labelPlacement property.

The following example shows how you can set the label/icon placement on an [...]]]> In a previous example, “Changing the label placement for a Flex ButtonBar control”, we saw how you could change the button’s label placement relative to its icon in a ButtonBar control in Flex by using the getChildAt() method and labelPlacement property.

The following example shows how you can set the label/icon placement on an MX ButtonBar control in Flex by extending the MX ButtonBar class and setting the navItemFactory property in the mx_internal namespace to a custom class.

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ -->
<mx:Application name="MX_ButtonBar_navItemFactory_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:local="*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <local:CustomButtonBar id="bb"
            dataProvider="{viewstack}"
            labelField="label"
            iconField="icon"
            width="300" />
 
    <mx:ViewStack id="viewstack"
            backgroundColor="white"
            width="300" height="100">
        <mx:Canvas id="tab_1"
                label="Tab 1"
                icon="@Embed('Assets.swf#CloseButtonUp')">
            <mx:Button />
        </mx:Canvas>
        <mx:Canvas id="tab_2"
                label="Tab 2"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ColorPicker />
        </mx:Canvas>
        <mx:Canvas id="tab_3"
                label="Tab 3"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ComboBox dataProvider="[red,orange,yellow,green,blue]" />
        </mx:Canvas>
    </mx:ViewStack>
 
</mx:Application>

The custom MX ButtonBar control, CustomButtonBar.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ */
package {
    import mx.controls.ButtonBar;
    import mx.core.ClassFactory;
    import mx.core.mx_internal;
 
    public class CustomButtonBar extends ButtonBar {
        public function CustomButtonBar() {
            super();
            mx_internal::navItemFactory = new ClassFactory(CustomButtonBarButton);
        }
    }
}

And the custom nav item factory, CustomButtonBarButton.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ */
package {
    import mx.controls.buttonBarClasses.ButtonBarButton;
 
    public class CustomButtonBarButton extends ButtonBarButton {
        public function CustomButtonBarButton() {
            super();
            labelPlacement = "top";
        }
    }
}
 
]]> http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/feed/ 1 Displaying icons in an MX MenuBar control in Flex http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/ http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/#comments Fri, 29 Jan 2010 14:47:28 +0000 Peter deHaan http://blog.flexexamples.com/?p=2352 The following example shows how you can display icons in an MX MenuBar control in Flex by setting the iconField property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/ --> <mx:Application name="MenuBar_iconField_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white">   <mx:Script> <![CDATA[ [Embed("assets/BorderContainer.png")] public const BorderContainerIcon:Class;   [Embed("assets/Button.png")] public const ButtonIcon:Class;   [Embed("assets/ButtonBar.png")] public const ButtonBarIcon:Class; ]]> </mx:Script>   <mx:XMLListCollection [...]]]> The following example shows how you can display icons in an MX MenuBar control in Flex by setting the iconField property.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/ -->
<mx:Application name="MenuBar_iconField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            [Embed("assets/BorderContainer.png")]
            public const BorderContainerIcon:Class;
 
            [Embed("assets/Button.png")]
            public const ButtonIcon:Class;
 
            [Embed("assets/ButtonBar.png")]
            public const ButtonBarIcon:Class;
        ]]>
    </mx:Script>
 
    <mx:XMLListCollection id="xmlListColl">
        <mx:source>
            <mx:XMLList xmlns="">
                <topmenu label="BorderContainer" icon="BorderContainerIcon">
                    <submenu label="Properties:">
                        <submenu label="backgroundFill : IFill" />
                        <submenu label="borderStroke : IStroke" />
                    </submenu>
                    <submenu label="Methods:">
                        <submenu label="BorderContainer()" />
                    </submenu>
                    <submenu label="Styles:">
                        <submenu label="backgroundImage : Object" />
                        <submenu label="backgroundImageFillMode : String" />
                        <submenu label="borderAlpha : Number" />
                        <submenu label="borderColor : uint" />
                        <submenu label="borderStyle : String" />
                        <submenu label="borderVisible : Boolean" />
                        <submenu label="borderWeight : Number" />
                        <submenu label="cornerRadius : Number" />
                        <submenu label="dropShadowVisible : Boolean" />
                    </submenu>
                    <submenu label="Events:" />
                </topmenu>
                <topmenu label="Button" icon="ButtonIcon">
                    <submenu label="Properties:" />
                    <submenu label="Methods:" />
                    <submenu label="Styles:" />
                    <submenu label="Events:" />
                </topmenu>
                <topmenu label="ButtonBar" icon="ButtonBarIcon">
                    <submenu label="Properties:" />
                    <submenu label="Methods:" />
                    <submenu label="Styles:" />
                    <submenu label="Events:" />
                </topmenu>
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>
 
    <mx:MenuBar id="mnBr"
            dataProvider="{xmlListColl}"
            labelField="@label"
            iconField="@icon"
            horizontalCenter="0" top="20" />
 
</mx:Application>

Or you can set the dataProvider property to an MXML ArrayListCollection using the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/ -->
<mx:Application name="MenuBar_iconField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="BorderContainer" icon="@Embed('assets/BorderContainer.png')">
                    <mx:children>
                        <mx:Object label="Properties:">
                            <mx:children>
                                <mx:Object label="backgroundFill : IFill" />
                                <mx:Object label="borderStroke : IStroke" />
                            </mx:children>
                        </mx:Object>
                        <mx:Object label="Methods:">
                            <mx:children>
                                <mx:Object label="BorderContainer()" />
                            </mx:children>
                        </mx:Object>
                        <mx:Object label="Styles:">
                            <mx:children>
                                <mx:Object label="backgroundImage : Object" />
                                <mx:Object label="backgroundImageFillMode : String" />
                                <mx:Object label="borderAlpha : Number" />
                                <mx:Object label="borderColor : uint" />
                                <mx:Object label="borderStyle : String" />
                                <mx:Object label="borderVisible : Boolean" />
                                <mx:Object label="borderWeight : Number" />
                                <mx:Object label="cornerRadius : Number" />
                                <mx:Object label="dropShadowVisible : Boolean" />
                            </mx:children>
                        </mx:Object>
                        <mx:Object label="Events:" />
                    </mx:children>
                </mx:Object>
                <mx:Object label="Button" icon="@Embed('assets/Button.png')">
                    <mx:children>
                        <mx:Object label="Properties:" />
                        <mx:Object label="Methods:" />
                        <mx:Object label="Styles:" />
                        <mx:Object label="Events:" />
                    </mx:children>
                </mx:Object>
                <mx:Object label="ButtonBar" icon="@Embed('assets/ButtonBar.png')">
                    <mx:children>
                        <mx:Object label="Properties:" />
                        <mx:Object label="Methods:" />
                        <mx:Object label="Styles:" />
                        <mx:Object label="Events:" />
                    </mx:children>
                </mx:Object>
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
 
    <mx:MenuBar id="mnBr"
            dataProvider="{arrColl}"
            labelField="label"
            iconField="icon"
            horizontalCenter="0" top="20" />
 
</mx:Application>

Or you can create the ArrayListCollection object using ActionScript using the following awkward code:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/ -->
<mx:Application name="MenuBar_iconField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
 
            [Embed("assets/BorderContainer.png")]
            public const BorderContainerIcon:Class;
 
            [Embed("assets/Button.png")]
            public const ButtonIcon:Class;
 
            [Embed("assets/ButtonBar.png")]
            public const ButtonBarIcon:Class;
 
 
            [Bindable]
            public static var arrColl:ArrayCollection;
 
            public function init():void {
                /* BorderContainer */
                var borderContainerProperties:Array = [];
                borderContainerProperties.push({label:"backgroundFill : IFill"});
                borderContainerProperties.push({label:"borderStroke : IStroke"});
 
                var borderContainerMethods:Array = [];
                borderContainerMethods.push({label:"BorderContainer()"});
 
                var borderContainerStyles:Array = [];
                borderContainerStyles.push({label:"backgroundImage : Object"});
                borderContainerStyles.push({label:"backgroundImageFillMode : String"});
                borderContainerStyles.push({label:"borderAlpha : Number"});
                borderContainerStyles.push({label:"borderColor : uint"});
                borderContainerStyles.push({label:"borderStyle : String"});
                borderContainerStyles.push({label:"borderVisible : Boolean"});
                borderContainerStyles.push({label:"borderWeight : Number"});
                borderContainerStyles.push({label:"cornerRadius : Number"});
                borderContainerStyles.push({label:"dropShadowVisible : Boolean"});
 
                var borderContainerEvents:Array = [];
 
                var borderContainerObj:Object = {label:"BorderContainer", icon:BorderContainerIcon,
                    children:[{label:"Properties:", children:borderContainerProperties},
                        {label:"Methods:", children:borderContainerMethods},
                        {label:"Styles:", children:borderContainerStyles},
                        {label:"Events:", children:borderContainerEvents}]};
 
                /* Button */
                var buttonProperties:Array = [];
                var buttonMethods:Array = [];
                var buttonStyles:Array = [];
                var buttonEvents:Array = [];
 
                var buttonObj:Object = {label:"Button", icon:ButtonIcon,
                    children:[{label:"Properties:", children:buttonProperties},
                        {label:"Methods:", children:buttonMethods},
                        {label:"Styles:", children:buttonStyles},
                        {label:"Events:", children:buttonEvents}]};
 
                /* ButtonBar */
                var buttonBarProperties:Array = [];
                var buttonBarMethods:Array = [];
                var buttonBarStyles:Array = [];
                var buttonBarEvents:Array = [];
 
                var buttonBarObj:Object = {label:"Button", icon:ButtonBarIcon,
                    children:[{label:"Properties:", children:buttonBarProperties},
                        {label:"Methods:", children:buttonBarMethods},
                        {label:"Styles:", children:buttonBarStyles},
                        {label:"Events:", children:buttonBarEvents}]};
 
                arrColl = new ArrayCollection([borderContainerObj, buttonObj, buttonBarObj]);
            }
        ]]>
    </mx:Script>
 
    <mx:MenuBar id="mnBr"
            dataProvider="{arrColl}"
            labelField="label"
            iconField="icon"
            horizontalCenter="0" top="20" />
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/01/29/displaying-icons-in-an-mx-menubar-control-in-flex/feed/ 7 Displaying icons in a Flex PopUpButton control (Redux) http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/ http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/#comments Wed, 21 Jan 2009 07:53:11 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/ In a previous example, “Displaying icons in a Flex PopUpButton control”, we saw how you could add icons to a PopUpButton control’s nested menu using an Array data provider.

The following example shows you how you can add icons to a pop up menu in a PopUpButton control in Flex by specifying the iconField [...]]]> In a previous example, “Displaying icons in a Flex PopUpButton control”, we saw how you could add icons to a PopUpButton control’s nested menu using an Array data provider.

The following example shows you how you can add icons to a pop up menu in a PopUpButton control in Flex by specifying the iconField property in the PopUpButton control’s nested Menu control using an XML data provider.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/ -->
<mx:Application name="PopUpButton_popUp_Menu_iconField_test_2"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

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

            [Embed("assets/Button.png")]
            public const ButtonIcon:Class;

            [Embed("assets/ButtonBar.png")]
            public const ButtonBarIcon:Class;

            [Embed("assets/CheckBox.png")]
            public const CheckBoxIcon:Class;

            [Embed("assets/ColorPicker.png")]
            public const ColorPickerIcon:Class;

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = xmlList;
                menu.labelField = "@label";
                menu.iconField = "@icon";
            }
        ]]>
    </mx:Script>

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
           fontWeight: normal;
           textAlign: left;
        }
    </mx:Style>

    <mx:XMLList id="xmlList">
        <node label="Alert" />
        <node label="Button" icon="ButtonIcon" />
        <node label="ButtonBar" icon="ButtonBarIcon" />
        <node label="CheckBox" icon="CheckBoxIcon" />
        <node label="ColorPicker" icon="ColorPickerIcon" />
    </mx:XMLList>

    <mx:PopUpButton id="popUpButton"
            label="Select a control..."
            popUp="{menu}"
            preinitialize="initMenu();"
            creationComplete="popUpButton.open();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2009/01/20/displaying-icons-in-a-flex-popupbutton-control-redux/feed/ 8 Setting a custom tool tip field on a ButtonBar control in Flex http://blog.flexexamples.com/2008/04/27/setting-a-custom-tool-tip-field-on-a-buttonbar-control-in-flex/ http://blog.flexexamples.com/2008/04/27/setting-a-custom-tool-tip-field-on-a-buttonbar-control-in-flex/#comments Sun, 27 Apr 2008 17:16:49 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/27/setting-a-custom-tool-tip-field-on-a-buttonbar-control-in-flex/ The following example shows how you can specify a custom field to be used for a tool tip in a Flex ButtonBar control by setting the toolTipField property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/27/setting-a-custom-tool-tip-field-on-a-buttonbar-control-in-flex/ --> <mx:Application name="ButtonBar_toolTipField_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Array id="arr"> <mx:Object label="Accordion" toolTip="Le Accordion" icon="@Embed('assets/Accordion.png')" /> <mx:Object label="ApplicationControlBar" toolTip="Le ApplicationControlBar" icon="@Embed('assets/ApplicationControlBar.png')" [...]]]> The following example shows how you can specify a custom field to be used for a tool tip in a Flex ButtonBar control by setting the toolTipField property.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/27/setting-a-custom-tool-tip-field-on-a-buttonbar-control-in-flex/ -->
<mx:Application name="ButtonBar_toolTipField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Array id="arr">
        <mx:Object label="Accordion"
                toolTip="Le Accordion"
                icon="@Embed('assets/Accordion.png')" />
        <mx:Object label="ApplicationControlBar"
                toolTip="Le ApplicationControlBar"
                icon="@Embed('assets/ApplicationControlBar.png')" />
        <mx:Object label="Box"
                toolTip="Le Box"
                icon="@Embed('assets/Box.png')" />
        <mx:Object label="Canvas"
                toolTip="Le Canvas"
                icon="@Embed('assets/Canvas.png')" />
        <mx:Object label="ControlBar"
                toolTip="Le ControlBar"
                icon="@Embed('assets/ControlBar.png')" />
    </mx:Array>
 
    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            labelField="label"
            toolTipField="toolTip"
            iconField="icon"
            height="32" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/27/setting-a-custom-tool-tip-field-on-a-buttonbar-control-in-flex/feed/ 4 Creating a simple image gallery with the Flex HorizontalList control http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/ http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/#comments Sat, 16 Feb 2008 05:08:19 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/ This request comes to us from a faithful reader who was wondering how you can display a full image when a user clicks on a thumbnail in a HorizontalList control in Flex. My solution was to put the thumbnail image and full image URLs in the data provider and then use bindings to the HorizontalList [...]]]> This request comes to us from a faithful reader who was wondering how you can display a full image when a user clicks on a thumbnail in a HorizontalList control in Flex. My solution was to put the thumbnail image and full image URLs in the data provider and then use bindings to the HorizontalList control’s selectedItem property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/ -->
<mx:Application name="HorizontalList_selectedItem_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Array id="arr">
        <mx:Object label="Flex"
                thumbnailImage="assets/fx_appicon-tn.gif"
                fullImage="assets/fx_appicon.jpg" />
        <mx:Object label="Flash"
                thumbnailImage="assets/fl_appicon-tn.gif"
                fullImage="assets/fl_appicon.jpg" />
        <mx:Object label="Illustrator"
                thumbnailImage="assets/ai_appicon-tn.gif"
                fullImage="assets/ai_appicon.jpg" />
        <mx:Object label="Dreamweaver"
                thumbnailImage="assets/dw_appicon-tn.gif"
                fullImage="assets/dw_appicon.jpg" />
        <mx:Object label="ColdFusion"
                thumbnailImage="assets/cf_appicon-tn.gif"
                fullImage="assets/cf_appicon.jpg" />
        <mx:Object label="Flash Player"
                thumbnailImage="assets/fl_player_appicon-tn.gif"
                fullImage="assets/fl_player_appicon.jpg" />
        <mx:Object label="Fireworks"
                thumbnailImage="assets/fw_appicon-tn.gif"
                fullImage="assets/fw_appicon.jpg" />
        <mx:Object label="Lightroom"
                thumbnailImage="assets/lr_appicon-tn.gif"
                fullImage="assets/lr_appicon.jpg" />
        <mx:Object label="Photoshop"
                thumbnailImage="assets/ps_appicon-tn.gif"
                fullImage="assets/ps_appicon.jpg" />
    </mx:Array>
 
    <mx:Panel title="{horizontalList.selectedItem.label}"
            height="100%"
            horizontalAlign="center">
        <mx:Image id="img"
                source="{horizontalList.selectedItem.fullImage}"
                maintainAspectRatio="true"
                horizontalAlign="center"
                width="{horizontalList.width}"
                height="100%" />
        <mx:ControlBar horizontalAlign="center">
            <mx:HorizontalList id="horizontalList"
                    labelField="label"
                    iconField="thumbnailImage"
                    dataProvider="{arr}"
                    itemRenderer="CustomItemRenderer"
                    columnCount="4"
                    columnWidth="125"
                    rowCount="1"
                    rowHeight="100"
                    horizontalScrollPolicy="on" />
        </mx:ControlBar>
    </mx:Panel>
 
</mx:Application>

View CustomItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/ -->
<mx:VBox name="CustomItemRenderer"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalAlign="center"
        verticalAlign="middle">
 
    <mx:Image source="{data.thumbnailImage}" />
 
    <mx:Label text="{data.label}" />
 
</mx:VBox>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/15/creating-a-simple-image-gallery-with-the-flex-horizontallist-control/feed/ 76 Adding icons to the Flex LinkBar control http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/#comments Sun, 10 Feb 2008 05:19:20 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ The following example shows how you can add icons to the LinkBar control in Flex by setting the iconField property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="Button" ico="@Embed('assets/Button.png')" /> <mx:Object label="ButtonBar" ico="@Embed('assets/ButtonBar.png')" /> <mx:Object label="CheckBox" ico="@Embed('assets/CheckBox.png')" /> [...]]]> The following example shows how you can add icons to the LinkBar control in Flex by setting the iconField property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Button"
                ico="@Embed('assets/Button.png')" />
        <mx:Object label="ButtonBar"
                ico="@Embed('assets/ButtonBar.png')" />
        <mx:Object label="CheckBox"
                ico="@Embed('assets/CheckBox.png')" />
        <mx:Object label="ColorPicker"
                ico="@Embed('assets/ColorPicker.png')" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            iconField="ico" />

</mx:Application>

View source is enabled in the following example.

If you are using a ViewStack as a data provider for the LinkBar control, you could use the following code instead:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:LinkBar id="linkBar"
            dataProvider="{viewStack}" />

    <mx:ViewStack id="viewStack" width="{linkBar.width}">
        <mx:VBox label="Button"
                icon="@Embed('assets/Button.png')">
            <mx:Label text="Button..." />
        </mx:VBox>
        <mx:VBox label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')">
            <mx:Label text="ButtonBar..." />
        </mx:VBox>
        <mx:VBox label="CheckBox"
                icon="@Embed('assets/CheckBox.png')">
            <mx:Label text="CheckBox..." />
        </mx:VBox>
        <mx:VBox label="ColorPicker"
                icon="@Embed('assets/ColorPicker.png')">
            <mx:Label text="ColorPicker..." />
        </mx:VBox>
    </mx:ViewStack>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/09/adding-icons-to-the-flex-linkbar-control/feed/ 4 Displaying icons in a Flex PopUpButton control http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/ http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/#comments Fri, 25 Jan 2008 07:57:09 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/ The following example shows you how you can add items to a pop up menu in a PopUpButton control in Flex by specifying the iconField property in the PopUpButton control’s nested Menu control.

Full code after the jump.

View MXML

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="top" backgroundColor="white"> <mx:Script> <![CDATA[ [...]]]> The following example shows you how you can add items to a pop up menu in a PopUpButton control in Flex by specifying the iconField property in the PopUpButton control’s nested Menu control.

Full code after the jump.

View MXML

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="top"
        backgroundColor="white">

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

            [Bindable]
            private var menu:Menu;

            private function initMenu():void {
                menu = new Menu();
                menu.dataProvider = arr;
            }
        ]]>
    </mx:Script>

    <mx:Style>
        PopUpButton {
            popUpStyleName: myCustomPopUpStyleName;
        }

        .myCustomPopUpStyleName {
           fontWeight: normal;
           textAlign: left;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Alert" />
        <mx:Object label="Button"
                icon="@Embed('assets/Button.png')" />
        <mx:Object label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')" />
        <mx:Object label="CheckBox"
                icon="@Embed('assets/CheckBox.png')" />
        <mx:Object label="ColorPicker"
                icon="@Embed('assets/ColorPicker.png')" />
    </mx:Array>

    <mx:PopUpButton id="popUpButton"
            label="Select a control..."
            popUp="{menu}"
            preinitialize="initMenu();"
            creationComplete="popUpButton.open();" />

</mx:Application>

View source is enabled in the following example.

If your data provider didn’t have an “icon” field, you could set the iconField property on the Menu instance to the field with the icon you want to display, as shown in the following snippet:

View MXML

<mx:Array id="arr">
    <mx:Object label="Alert" />
    <mx:Object label="Button"
            img="@Embed('assets/Button.png')" />
    <mx:Object label="ButtonBar"
            img="@Embed('assets/ButtonBar.png')" />
    <mx:Object label="CheckBox"
            img="@Embed('assets/CheckBox.png')" />
    <mx:Object label="ColorPicker"
            img="@Embed('assets/ColorPicker.png')" />
</mx:Array>

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

        [Bindable]
        private var menu:Menu;

        private function initMenu():void {
            menu = new Menu();
            menu.iconField = "img";
            menu.dataProvider = arr;
        }
    ]]>
</mx:Script>

View source

 
]]> http://blog.flexexamples.com/2008/01/24/displaying-icons-in-a-flex-popupbutton-control/feed/ 5 Changing the label placement for a Flex ButtonBar control http://blog.flexexamples.com/2008/01/08/changing-the-label-placement-for-a-flex-buttonbar-control/ http://blog.flexexamples.com/2008/01/08/changing-the-label-placement-for-a-flex-buttonbar-control/#comments Tue, 08 Jan 2008 08:18:50 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/08/changing-the-label-placement-for-a-flex-buttonbar-control/ The following example shows how you can change the button’s label placement relative to its icon in a ButtonBar control in Flex by using the getChildAt() method and labelPlacement property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/08/changing-the-label-placement-for-a-flex-buttonbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.controls.Button; [...]]]> The following example shows how you can change the button’s label placement relative to its icon in a ButtonBar control in Flex by using the getChildAt() method and labelPlacement property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/08/changing-the-label-placement-for-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Button;
            import mx.controls.ButtonLabelPlacement;

            [Bindable]
            [Embed("assets/arrow_down.png")]
            private var arrowDown:Class;

            [Bindable]
            [Embed("assets/arrow_left.png")]
            private var arrowLeft:Class;

            [Bindable]
            [Embed("assets/arrow_right.png")]
            private var arrowRight:Class;

            [Bindable]
            [Embed("assets/arrow_up.png")]
            private var arrowUp:Class;

            private function init():void {
                var idx:uint;
                var len:uint = buttonBar.numChildren;
                var btn:Button;
                /* Loop over each button. */
                for (idx = 0; idx < len; idx++) {
                    /* Get reference to current Button. */
                    btn = buttonBar.getChildAt(idx) as Button;
                    /* Set labelPlacement property to current item in
                       arr Array object. */
                    btn.labelPlacement = arr[idx].label;
                }
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="left" img="{arrowLeft}" />
        <mx:Object label="right" img="{arrowRight}" />
        <mx:Object label="top" img="{arrowUp}" />
        <mx:Object label="bottom" img="{arrowDown}" />
    </mx:Array>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            iconField="img"
            buttonHeight="64"
            width="500"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/08/changing-the-label-placement-for-a-flex-buttonbar-control/feed/ 3 Adding icons to the Flex ButtonBar control http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/ http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/#comments Tue, 08 Jan 2008 07:02:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/ The following example shows how you can add icons to the ButtonBar control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ [Bindable] [Embed("assets/Button.png")] private var buttonIcon:Class; [Bindable] [Embed("assets/ButtonBar.png")] private var buttonBarIcon:Class; [Bindable] [Embed("assets/CheckBox.png")] private var checkBoxIcon:Class; [Bindable] [Embed("assets/ColorPicker.png")] [...]]]> The following example shows how you can add icons to the ButtonBar control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("assets/Button.png")]
            private var buttonIcon:Class;

            [Bindable]
            [Embed("assets/ButtonBar.png")]
            private var buttonBarIcon:Class;

            [Bindable]
            [Embed("assets/CheckBox.png")]
            private var checkBoxIcon:Class;

            [Bindable]
            [Embed("assets/ColorPicker.png")]
            private var colorPickerIcon:Class;
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Button" icon="{buttonIcon}" />
        <mx:Object label="ButtonBar" icon="{buttonBarIcon}" />
        <mx:Object label="CheckBox" icon="{checkBoxIcon}" />
        <mx:Object label="ColorPicker" icon="{colorPickerIcon}" />
    </mx:Array>

    <!-- The data provider has an "icon" property. -->
    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            height="32" />

</mx:Application>

View source is enabled in the following example.

The previous example works because the the data provider has an “icon” field, and the default value for the ButtonBar control’s iconField property is “icon”.

The following snippet shows how you can override the default value for the ButtonBar control’s iconField property in MXML:

<mx:Array id="arr">
    <mx:Object label="Button" img="{buttonIcon}" />
    <mx:Object label="ButtonBar" img="{buttonBarIcon}" />
    <mx:Object label="CheckBox" img="{checkBoxIcon}" />
    <mx:Object label="ColorPicker" img="{colorPickerIcon}" />
</mx:Array>

<!-- The data provider has an "img" property, so use ButtonBar
     control's iconField property to set the icons on the
     control. -->
<mx:ButtonBar id="buttonBar"
        dataProvider="{arr}"
        iconField="img"
        height="32" />

You could also set the iconField property using ActionScript, as shown in the following snippet:

<mx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        private function buttonBar_initialize(evt:FlexEvent):void {
            buttonBar.iconField = "img";
        }
    ]]>
</mx:Script>

<mx:Array id="arr">
    <mx:Object label="Button" img="{buttonIcon}" />
    <mx:Object label="ButtonBar" img="{buttonBarIcon}" />
    <mx:Object label="CheckBox" img="{checkBoxIcon}" />
    <mx:Object label="ColorPicker" img="{colorPickerIcon}" />
</mx:Array>

<mx:ButtonBar id="buttonBar"
        dataProvider="{arr}"
        height="32"
        initialize="buttonBar_initialize(event);" />

Or, the slightly more condensed version:

<mx:Array id="arr">
    <mx:Object label="Button" img="{buttonIcon}" />
    <mx:Object label="ButtonBar" img="{buttonBarIcon}" />
    <mx:Object label="CheckBox" img="{checkBoxIcon}" />
    <mx:Object label="ColorPicker" img="{colorPickerIcon}" />
</mx:Array>

<mx:ButtonBar id="buttonBar"
        dataProvider="{arr}"
        height="32"
        initialize="buttonBar.iconField = 'img';" />
 
]]> http://blog.flexexamples.com/2008/01/07/adding-icons-to-the-flex-buttonbar-control/feed/ 21