Flex Examples

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.