Flex Examples » HorizontalList http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Displaying a border on specific sides of a HorizontalList control in Flex http://blog.flexexamples.com/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/ http://blog.flexexamples.com/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/#comments Mon, 27 Jul 2009 00:07:59 +0000 Peter deHaan http://blog.flexexamples.com/?p=1243 The following example shows how you can toggle which sides of a Flex HorizontalList control display the border outline by setting the borderSides style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderSides_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:HorizontalList id="hList" borderColor="red" borderSides="left right" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> [...]]]> The following example shows how you can toggle which sides of a Flex HorizontalList control display the border outline by setting the borderSides style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/ -->
<mx:Application name="HorizontalList_borderSides_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:HorizontalList id="hList"
            borderColor="red"
            borderSides="left right"
            labelField="label"
            horizontalScrollPolicy="on"
            columnWidth="120"
            columnCount="5"
            rowHeight="90">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <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:Object label="Nine" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:HorizontalList>
 
</mx:Application>

You can also set the borderSides style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/ -->
<mx:Application name="HorizontalList_borderSides_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        HorizontalList {
            borderSides: "top bottom";
        }
    </mx:Style>
 
    <mx:HorizontalList id="hList"
            borderColor="red"
            labelField="label"
            horizontalScrollPolicy="on"
            columnWidth="120"
            columnCount="5"
            rowHeight="90">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <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:Object label="Nine" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:HorizontalList>
 
</mx:Application>

Or, you can set the borderSides style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/ -->
<mx:Application name="HorizontalList_borderSides_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var sides:String = "";
                if (leftCh.selected) {
                    sides += " left";
                }
                if (rightCh.selected) {
                    sides += " right";
                }
                if (topCh.selected) {
                    sides += " top";
                }
                if (bottomCh.selected) {
                    sides += " bottom";
                }
                hList.setStyle("borderSides", sides);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="left:">
                <mx:CheckBox id="leftCh"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="right:">
                <mx:CheckBox id="rightCh" 
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="top:">
                <mx:CheckBox id="topCh"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="bottom:">
                <mx:CheckBox id="bottomCh"
                        selected="true"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HorizontalList id="hList"
            borderColor="red"
            labelField="label"
            horizontalScrollPolicy="on"
            columnWidth="120"
            columnCount="5"
            rowHeight="90">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <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:Object label="Nine" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:HorizontalList>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2009/07/26/displaying-a-border-on-specific-sides-of-a-horizontallist-control-in-flex/feed/ 0 Setting the border color on a HorizontalList control in Flex http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/#comments Tue, 30 Jun 2009 06:59:49 +0000 Peter deHaan http://blog.flexexamples.com/?p=1247 The following example shows how you can set the border color on a Flex HorizontalList control by setting the borderColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="borderColor:"> <mx:ColorPicker id="colorPicker" selectedColor="black" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar>   <mx:HorizontalList [...]]]> The following example shows how you can set the border color on a Flex HorizontalList control by setting the borderColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ -->
<mx:Application name="HorizontalList_borderColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="black" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HorizontalList id="hList"
            borderColor="{colorPicker.selectedColor}"
            labelField="label"
            horizontalScrollPolicy="on"
            columnWidth="120"
            columnCount="5"
            rowHeight="90">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <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:Object label="Nine" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:HorizontalList>
 
</mx:Application>

You can also set the borderColor style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ -->
<mx:Application name="HorizontalList_borderColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        HorizontalList {
            borderColor: haloBlue;
        }
    </mx:Style>
 
    <mx:HorizontalList id="hList"
            labelField="label"
            horizontalScrollPolicy="on"
            columnWidth="120"
            columnCount="5"
            rowHeight="90">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <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:Object label="Nine" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:HorizontalList>
 
</mx:Application>

Or, you can set the borderColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ -->
<mx:Application name="HorizontalList_borderColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                hList.setStyle("borderColor", evt.color);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="black"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HorizontalList id="hList"
            labelField="label"
            horizontalScrollPolicy="on"
            columnWidth="120"
            columnCount="5"
            rowHeight="90">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <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:Object label="Nine" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:HorizontalList>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/feed/ 0 Creating a simple image gallery with the Flex HorizontalList control (redux) http://blog.flexexamples.com/2008/08/06/creating-a-simple-image-gallery-with-the-flex-horizontallist-control-redux/ http://blog.flexexamples.com/2008/08/06/creating-a-simple-image-gallery-with-the-flex-horizontallist-control-redux/#comments Thu, 07 Aug 2008 03:55:32 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/06/creating-a-simple-image-gallery-with-the-flex-horizontallist-control-redux/ In a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, we saw how to create a simple image gallery using the HorizontalList control and Image control in Flex.

The following example shows how you can change the full image whenever you roll your mouse cursor over the items in the [...]]]> In a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, we saw how to create a simple image gallery using the HorizontalList control and Image control in Flex.

The following example shows how you can change the full image whenever you roll your mouse cursor over the items in the HorizontalList control, as well as how you can double click an item in the Horizontal List control to display the image using the PopUpManager class.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/06/creating-a-simple-image-gallery-with-the-flex-horizontallist-control-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Panel {
            titleStyleName: panelTitleStyle;
        }

        .panelTitleStyle {
            fontWeight: bold;
            letterSpacing: 4;
            textAlign: center;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Image;
            import mx.events.ListEvent;
            import mx.events.ResizeEvent;
            import mx.managers.PopUpManager;

            private var fullImg:Image;

            private function init(obj:Object = null):void {
                if (obj == null) {
                    panel.title = "";
                    img.source = null;
                } else {
                    panel.title = String(obj.@title).toUpperCase();
                    img.source = obj.@fullImage;
                }
            }

            private function horizontalList_change(evt:ListEvent):void {
                init(evt.target.selectedItem);
            }

            private function horizontalList_itemRollOver(evt:ListEvent):void {
                init(evt.itemRenderer.data);
            }

            private function horizontalList_itemRollOut(evt:ListEvent):void {
                if (horizontalList.selectedIndex == -1) {
                    init(null);
                } else {
                    init(horizontalList.selectedItem);
                }
            }

            private function horizontalList_doubleClick(evt:MouseEvent):void {
                var obj:Object = evt.currentTarget.selectedItem;
                fullImg = new Image();
                fullImg.source = obj.@fullImage;
                fullImg.toolTip = "Click to close pop up";
                fullImg.buttonMode = true;
                fullImg.useHandCursor = true;
                fullImg.addEventListener(ResizeEvent.RESIZE, fullImg_resize);
                fullImg.addEventListener(MouseEvent.CLICK, fullImg_click);
                PopUpManager.addPopUp(fullImg, this, true);
            }

            private function fullImg_resize(evt:ResizeEvent):void {
                PopUpManager.centerPopUp(fullImg);
            }

            private function fullImg_click(evt:MouseEvent):void {
                PopUpManager.removePopUp(fullImg);
            }
        ]]>
    </mx:Script>

    <mx:XML id="xml" source="gallery.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />

    <mx:Panel id="panel"
            layout="absolute"
            styleName="opaquePanel"
            height="100%">
        <mx:Image id="img"
                scaleContent="true"
                horizontalCenter="0"
                verticalCenter="0"
                maintainAspectRatio="true"
                width="250"
                height="250"
                completeEffect="Fade" />
        <mx:ControlBar>
            <mx:HorizontalList id="horizontalList"
                    dataProvider="{xmlListColl}"
                    labelField="lbl"
                    iconField="src"
                    itemRenderer="CustomItemRenderer"
                    columnCount="4"
                    columnWidth="125"
                    rowHeight="100"
                    horizontalScrollPolicy="on"
                    change="horizontalList_change(event);"
                    itemRollOver="horizontalList_itemRollOver(event);"
                    itemRollOut="horizontalList_itemRollOut(event);"
                    doubleClickEnabled="true"
                    doubleClick="horizontalList_doubleClick(event);" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/08/06/creating-a-simple-image-gallery-with-the-flex-horizontallist-control-redux/feed/ 25 Setting the horizontal scroll position in the HorizontalList control in Flex http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/ http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/#comments Fri, 04 Apr 2008 03:15:23 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/ The following example shows how you can scroll the Flex HorizontalList control by setting the horizontalScrollPosition property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.SliderEvent; private function prev():void { var pos:int = hList.horizontalScrollPosition-1; var min:int = 0; var [...]]]> The following example shows how you can scroll the Flex HorizontalList control by setting the horizontalScrollPosition property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function prev():void {
                var pos:int = hList.horizontalScrollPosition-1;
                var min:int = 0;
                var value:int = Math.max(min, pos);
                hList.horizontalScrollPosition = value;
            }

            private function next():void {
                var pos:int = hList.horizontalScrollPosition+1;
                var max:int = hList.maxHorizontalScrollPosition;
                var value:int = Math.min(pos, max);
                hList.horizontalScrollPosition = value;
            }

            private function slider_change(evt:SliderEvent):void {
                hList.horizontalScrollPosition = evt.value;
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object lbl="Illustrator" src="ai_appicon-tn.gif" />
        <mx:Object lbl="Adobe AIR" src="air_appicon-tn.gif" />
        <mx:Object lbl="ColdFusion" src="cf_appicon-tn.gif" />
        <mx:Object lbl="Dreamweaver" src="dw_appicon-tn.gif" />
        <mx:Object lbl="Flash" src="fl_appicon-tn.gif" />
        <mx:Object lbl="Flash Player" src="fl_player_appicon-tn.gif" />
        <mx:Object lbl="Fireworks" src="fw_appicon-tn.gif" />
        <mx:Object lbl="Flex" src="fx_appicon-tn.gif" />
        <mx:Object lbl="Lightroom" src="lr_appicon-tn.gif" />
        <mx:Object lbl="Photoshop" src="ps_appicon-tn.gif" />
    </mx:Array>

    <mx:Panel styleName="opaquePanel">
        <mx:HorizontalList id="hList"
                dataProvider="{arr}"
                itemRenderer="HorizontalListItemRenderer"
                verticalScrollPolicy="off"
                horizontalScrollPolicy="off"
                columnWidth="100"
                columnCount="4"
                rowHeight="100"
                rowCount="1"
                borderSkin="{null}" />
        <mx:ControlBar>
            <mx:Button label="Previous" click="prev();" />
            <mx:HSlider id="slider"
                    minimum="0"
                    maximum="{hList.maxHorizontalScrollPosition}"
                    value="{hList.horizontalScrollPosition}"
                    liveDragging="true"
                    snapInterval="1"
                    tickInterval="1"
                    showDataTip="false"
                    width="100%"
                    change="slider_change(event);" />
            <mx:Button label="Next" click="next();" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View HorizontalListItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/ -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
        styleName="plain">

    <mx:Image source="{data.src}"
            horizontalCenter="0"
            verticalCenter="0" />
    <mx:Label text="{data.lbl}"
            fontWeight="bold"
            horizontalCenter="0"
            bottom="0" />

</mx:Canvas>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/03/scrolling-the-horizontallist-control-in-flex/feed/ 18 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 Displaying scroll tips in a HorizontalList control in Flex http://blog.flexexamples.com/2008/01/04/displaying-scroll-tips-in-a-horizontallist-control-in-flex/ http://blog.flexexamples.com/2008/01/04/displaying-scroll-tips-in-a-horizontallist-control-in-flex/#comments Sat, 05 Jan 2008 05:01:06 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/04/displaying-scroll-tips-in-a-horizontallist-control-in-flex/ The following example shows how you can display scroll tips in a Flex HorizontalList control by setting the Boolean showScrollTips property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/04/displaying-scroll-tips-in-a-horizontallist-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="Accordion" /> <mx:Object label="ApplicationControlBar" /> <mx:Object label="Box" /> <mx:Object label="Canvas" [...]]]> The following example shows how you can display scroll tips in a Flex HorizontalList control by setting the Boolean showScrollTips property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/04/displaying-scroll-tips-in-a-horizontallist-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Accordion" />
        <mx:Object label="ApplicationControlBar" />
        <mx:Object label="Box" />
        <mx:Object label="Canvas" />
        <mx:Object label="ControlBar" />
        <mx:Object label="DividedBox" />
        <mx:Object label="Form" />
        <mx:Object label="FormHeading" />
        <mx:Object label="FormItem" />
        <mx:Object label="Grid" />
        <mx:Object label="HBox" />
        <mx:Object label="HDividedBox" />
        <mx:Object label="Panel" />
        <mx:Object label="TabNavigator" />
        <mx:Object label="Tile" />
        <mx:Object label="TitleWindow" />
        <mx:Object label="VBox" />
        <mx:Object label="VDividedBox" />
        <mx:Object label="ViewStack" />
    </mx:Array>

    <mx:HorizontalList id="horizontalList"
            dataProvider="{arr}"
            columnWidth="175"
            columnCount="3"
            rowCount="1"
            rowHeight="100"
            showScrollTips="true" />

</mx:Application>

View source is enabled in the following example.

If you want to customize the scroll tip’s appearance, you can set the ToolTip style in an external .CSS file or <mx:Style /> block, as shown in the following snippet:

<mx:Style>
    ToolTip {
        backgroundColor: haloBlue;
        color: white;
        fontWeight: bold;
    }
</mx:Style>

If you want to customize the scroll tip’s text, you can set the scrollTips property to true and set the scrollTipFunction property, as shown in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/04/displaying-scroll-tips-in-a-horizontallist-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ToolTip {
            backgroundColor: haloBlue;
            color: white;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Accordion" />
        <mx:Object label="ApplicationControlBar" />
        <mx:Object label="Box" />
        <mx:Object label="Canvas" />
        <mx:Object label="ControlBar" />
        <mx:Object label="DividedBox" />
        <mx:Object label="Form" />
        <mx:Object label="FormHeading" />
        <mx:Object label="FormItem" />
        <mx:Object label="Grid" />
        <mx:Object label="HBox" />
        <mx:Object label="HDividedBox" />
        <mx:Object label="Panel" />
        <mx:Object label="TabNavigator" />
        <mx:Object label="Tile" />
        <mx:Object label="TitleWindow" />
        <mx:Object label="VBox" />
        <mx:Object label="VDividedBox" />
        <mx:Object label="ViewStack" />
    </mx:Array>

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

            private function horizontalList_scrollTipFunc(direction:String, position:Number):String {
                var str:String;
                var max:Number;
                var pct:String;

                switch (direction) {
                    case TileBaseDirection.HORIZONTAL:
                        max = horizontalList.maxHorizontalScrollPosition;
                        break;
                    case TileBaseDirection.VERTICAL:
                        max = horizontalList.maxVerticalScrollPosition;
                        break;
                }

                pct = numberFormatter.format(position / max * 100);
                str = position + " of " + max + " (" + pct + "%)";

                return str;
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter" precision="0" />

    <mx:HorizontalList id="horizontalList"
            dataProvider="{arr}"
            columnWidth="175"
            columnCount="3"
            rowCount="1"
            rowHeight="100"
            showScrollTips="true"
            scrollTipFunction="horizontalList_scrollTipFunc" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/04/displaying-scroll-tips-in-a-horizontallist-control-in-flex/feed/ 1 Setting alternating colors on a Flex HorizontalList control http://blog.flexexamples.com/2008/01/04/setting-alternating-colors-on-a-flex-horizontallist-control/ http://blog.flexexamples.com/2008/01/04/setting-alternating-colors-on-a-flex-horizontallist-control/#comments Sat, 05 Jan 2008 04:17:58 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/04/setting-alternating-colors-on-a-flex-horizontallist-control/ The following example shows how you can alternate item colors in a HorizontalList control in Flex by setting the alternatingItemColors style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/04/setting-alternating-colors-on-a-flex-horizontallist-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="Accordion" icon="@Embed('assets/Accordion.png')" /> <mx:Object label="ApplicationControlBar" icon="@Embed('assets/ApplicationControlBar.png')" /> <mx:Object label="Box" icon="@Embed('assets/Box.png')" [...]]]> The following example shows how you can alternate item colors in a HorizontalList control in Flex by setting the alternatingItemColors style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/04/setting-alternating-colors-on-a-flex-horizontallist-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Accordion"
                icon="@Embed('assets/Accordion.png')" />
        <mx:Object label="ApplicationControlBar"
                icon="@Embed('assets/ApplicationControlBar.png')" />
        <mx:Object label="Box"
                icon="@Embed('assets/Box.png')" />
        <mx:Object label="Canvas"
                icon="@Embed('assets/Canvas.png')" />
        <mx:Object label="ControlBar"
                icon="@Embed('assets/ControlBar.png')" />
        <mx:Object label="DividedBox"
                icon="@Embed('assets/DividedBox.png')" />
        <mx:Object label="Form"
                icon="@Embed('assets/Form.png')" />
        <mx:Object label="FormHeading"
                icon="@Embed('assets/FormHeading.png')" />
        <mx:Object label="FormItem"
                icon="@Embed('assets/FormItem.png')" />
        <mx:Object label="Grid"
                icon="@Embed('assets/Grid.png')" />
        <mx:Object label="HBox"
                icon="@Embed('assets/HBox.png')" />
        <mx:Object label="HDividedBox"
                icon="@Embed('assets/HDividedBox.png')" />
        <mx:Object label="Panel"
                icon="@Embed('assets/Panel.png')" />
        <mx:Object label="TabNavigator"
                icon="@Embed('assets/TabNavigator.png')" />
        <mx:Object label="Tile"
                icon="@Embed('assets/Tile.png')" />
        <mx:Object label="TitleWindow"
                icon="@Embed('assets/TitleWindow.png')" />
        <mx:Object label="VBox"
                icon="@Embed('assets/VBox.png')" />
        <mx:Object label="VDividedBox"
                icon="@Embed('assets/VDividedBox.png')" />
        <mx:Object label="ViewStack"
                icon="@Embed('assets/ViewStack.png')" />
    </mx:Array>

    <mx:HorizontalList id="horizontalList"
            dataProvider="{arr}"
            alternatingItemColors="[#FFFFFF, #EEEEEE]"
            columnCount="3"
            columnWidth="175"
            rowCount="1"
            height="100" />

</mx:Application>

View source is enabled in the following example.

You can also set the alternatingItemColors style using an external .CSS file or <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    HorizontalList {
        alternatingItemColors: #FFFFFF, #EEEEEE;
    }
</mx:Style>

Or, you can set the style using ActionScript, as seen in the following snippet:

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

        private function horizontalList_initialize(evt:FlexEvent):void {
            horizontalList.setStyle("alternatingItemColors", [0xFFFFFF, "#EEEEEE"]);
        }
    ]]>
</mx:Script>

<mx:HorizontalList id="horizontalList"
        dataProvider="{arr}"
        columnCount="3"
        columnWidth="175"
        rowCount="1"
        height="100"
        initialize="horizontalList_initialize(event);" />
 
]]> http://blog.flexexamples.com/2008/01/04/setting-alternating-colors-on-a-flex-horizontallist-control/feed/ 0 Changing the background alpha of a HorizontalList control in Flex http://blog.flexexamples.com/2008/01/04/changing-the-background-alpha-of-a-horizontallist-control-in-flex/ http://blog.flexexamples.com/2008/01/04/changing-the-background-alpha-of-a-horizontallist-control-in-flex/#comments Sat, 05 Jan 2008 03:53:03 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/04/changing-the-background-alpha-of-a-horizontallist-control-in-flex/ The following example shows how you can change the background fill alpha on a HorizontalList control in Flex by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/04/changing-the-background-alpha-of-a-horizontallist-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Style> Application { backgroundGradientColors: red, black; } </mx:Style> <mx:Script> <![CDATA[ [...]]]> The following example shows how you can change the background fill alpha on a HorizontalList control in Flex by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/04/changing-the-background-alpha-of-a-horizontallist-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        Application {
            backgroundGradientColors: red, black;
        }
    </mx:Style>

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

            private function init():void {
                slider.value = horizontalList.getStyle("backgroundAlpha");
            }

            private function slider_change(evt:SliderEvent):void {
                horizontalList.setStyle("backgroundAlpha", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="Accordion" />
        <mx:Object label="ApplicationControlBar" />
        <mx:Object label="Box" />
        <mx:Object label="Canvas" />
        <mx:Object label="ControlBar" />
        <mx:Object label="DividedBox" />
        <mx:Object label="Form" />
        <mx:Object label="FormHeading" />
        <mx:Object label="FormItem" />
        <mx:Object label="Grid" />
        <mx:Object label="HBox" />
        <mx:Object label="HDividedBox" />
        <mx:Object label="Panel" />
        <mx:Object label="TabNavigator" />
        <mx:Object label="Tile" />
        <mx:Object label="TitleWindow" />
        <mx:Object label="VBox" />
        <mx:Object label="VDividedBox" />
        <mx:Object label="ViewStack" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        liveDragging="true"
                        tickInterval="0.1"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:HorizontalList id="horizontalList"
            dataProvider="{arr}"
            backgroundAlpha="1.0"
            backgroundColor="haloSilver"
            columnWidth="175"
            columnCount="3"
            rowCount="1"
            rowHeight="100" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/04/changing-the-background-alpha-of-a-horizontallist-control-in-flex/feed/ 0