Creating a simple image gallery with the Flex TileList control


http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/

By Peter deHaan
Categories: TileList Tags: addPopUp(), centerPopUp(), Image, itemRenderer, PopUpManager, removePopUp(), TileList.
Similar to a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.

Full code after the jump.

View MXML

<?xml version=”1.0″ encoding=”utf-8″?>
<!– http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
layout=”vertical”
verticalAlign=”middle”
backgroundColor=”white”>

<mx:Style>
global {
modal-transparency: 0.9;
modal-transparency-color: white;
modal-transparency-blur: 9;
}
</mx:Style>

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

private var img:Image;

private function tileList_itemClick(evt:ListEvent):void {
img = new Image();
// img.width = 300;
// img.height = 300;
img.maintainAspectRatio = true;
img.addEventListener(Event.COMPLETE, image_complete);
img.addEventListener(ResizeEvent.RESIZE, image_resize);
img.addEventListener(MouseEvent.CLICK, image_click);
img.source = evt.itemRenderer.data.@fullImage;
img.setStyle(“addedEffect”, image_addedEffect);
img.setStyle(“removedEffect”, image_removedEffect);
PopUpManager.addPopUp(img, this, true);
}

private function image_click(evt:MouseEvent):void {
PopUpManager.removePopUp(evt.currentTarget as Image);
}

private function image_resize(evt:ResizeEvent):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}

private function image_complete(evt:Event):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
]]>
</mx:Script>

<mx:WipeDown id=”image_addedEffect” startDelay=”100″ />

<mx:Parallel id=”image_removedEffect”>
<mx:Zoom />
<mx:Fade />
</mx:Parallel>

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

<mx:TileList id=”tileList”
dataProvider=”{xmlListColl}”
itemRenderer=”CustomItemRenderer”
columnCount=”4″
columnWidth=”125″
rowCount=”2″
rowHeight=”100″
themeColor=”haloSilver”
verticalScrollPolicy=”on”
itemClick=”tileList_itemClick(event);” />

</mx:Application>
View CustomItemRenderer.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<!– http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ –>
<mx:VBox xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
horizontalAlign=”center”
verticalAlign=”middle”>

<mx:Image source=”{data.@thumbnailImage}” />

<mx:Label text=”{data.@title}” />

</mx:VBox>

View gallery.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<!– http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ –>
<gallery>
<image title=”Flex”
thumbnailImage=”assets/fx_appicon-tn.gif”
fullImage=”assets/fx_appicon.jpg” />
<image title=”Flash”
thumbnailImage=”assets/fl_appicon-tn.gif”
fullImage=”assets/fl_appicon.jpg” />
<image title=”Illustrator”
thumbnailImage=”assets/ai_appicon-tn.gif”
fullImage=”assets/ai_appicon.jpg” />
<image title=”Dreamweaver”
thumbnailImage=”assets/dw_appicon-tn.gif”
fullImage=”assets/dw_appicon.jpg” />
<image title=”ColdFusion”
thumbnailImage=”assets/cf_appicon-tn.gif”
fullImage=”assets/cf_appicon.jpg” />
<image title=”Flash Player”
thumbnailImage=”assets/fl_player_appicon-tn.gif”
fullImage=”assets/fl_player_appicon.jpg” />
<image title=”Fireworks”
thumbnailImage=”assets/fw_appicon-tn.gif”
fullImage=”assets/fw_appicon.jpg” />
<image title=”Lightroom”
thumbnailImage=”assets/lr_appicon-tn.gif”
fullImage=”assets/lr_appicon.jpg” />
<image title=”Photoshop”
thumbnailImage=”assets/ps_appicon-tn.gif”
fullImage=”assets/ps_appicon.jpg” />
</gallery>

Similar to a previous example, “Creating a simple image gallery with the Flex HorizontalList control”, the following example shows how you can create a simple photo gallery in Flex using the TileList control, Image control, and the PopUpManager class.

Full code after the jump.

View MXML

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

    <mx:Style>
        global {
            modal-transparency: 0.9;
            modal-transparency-color: white;
            modal-transparency-blur: 9;
        }
    </mx:Style>

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

            private var img:Image;

            private function tileList_itemClick(evt:ListEvent):void {
                img = new Image();
                // img.width = 300;
                // img.height = 300;
                img.maintainAspectRatio = true;
                img.addEventListener(Event.COMPLETE, image_complete);
                img.addEventListener(ResizeEvent.RESIZE, image_resize);
                img.addEventListener(MouseEvent.CLICK, image_click);
                img.source = evt.itemRenderer.data.@fullImage;
                img.setStyle("addedEffect", image_addedEffect);
                img.setStyle("removedEffect", image_removedEffect);
                PopUpManager.addPopUp(img, this, true);
            }

            private function image_click(evt:MouseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as Image);
            }

            private function image_resize(evt:ResizeEvent):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }

            private function image_complete(evt:Event):void {
                PopUpManager.centerPopUp(evt.currentTarget as Image);
            }
        ]]>
    </mx:Script>

    <mx:WipeDown id="image_addedEffect" startDelay="100" />

    <mx:Parallel id="image_removedEffect">
        <mx:Zoom />
        <mx:Fade />
    </mx:Parallel>

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

    <mx:TileList id="tileList"
            dataProvider="{xmlListColl}"
            itemRenderer="CustomItemRenderer"
            columnCount="4"
            columnWidth="125"
            rowCount="2"
            rowHeight="100"
            themeColor="haloSilver"
            verticalScrollPolicy="on"
            itemClick="tileList_itemClick(event);" />

</mx:Application>

View CustomItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalAlign="center"
        verticalAlign="middle">

    <mx:Image source="{data.@thumbnailImage}" />

    <mx:Label text="{data.@title}" />

</mx:VBox>

View gallery.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
<gallery>
    <image title="Flex"
        thumbnailImage="assets/fx_appicon-tn.gif"
        fullImage="assets/fx_appicon.jpg" />
    <image title="Flash"
            thumbnailImage="assets/fl_appicon-tn.gif"
            fullImage="assets/fl_appicon.jpg" />
    <image title="Illustrator"
            thumbnailImage="assets/ai_appicon-tn.gif"
            fullImage="assets/ai_appicon.jpg" />
    <image title="Dreamweaver"
            thumbnailImage="assets/dw_appicon-tn.gif"
            fullImage="assets/dw_appicon.jpg" />
    <image title="ColdFusion"
            thumbnailImage="assets/cf_appicon-tn.gif"
            fullImage="assets/cf_appicon.jpg" />
    <image title="Flash Player"
            thumbnailImage="assets/fl_player_appicon-tn.gif"
            fullImage="assets/fl_player_appicon.jpg" />
    <image title="Fireworks"
            thumbnailImage="assets/fw_appicon-tn.gif"
            fullImage="assets/fw_appicon.jpg" />
    <image title="Lightroom"
            thumbnailImage="assets/lr_appicon-tn.gif"
            fullImage="assets/lr_appicon.jpg" />
    <image title="Photoshop"
            thumbnailImage="assets/ps_appicon-tn.gif"
            fullImage="assets/ps_appicon.jpg" />
</gallery>
Advertisements

~ by mjcprasad2000 on February 3, 2009.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

 
%d bloggers like this: