Creating a simple image gallery with the Flex Tree control

The following example shows how you can create a simple image gallery in Flex using a Tree control and a SWFLoader control.

Full code after the jump.

View MXML

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

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

            private function tree_itemClick(evt:ListEvent):void {
                var t:Tree = evt.currentTarget as Tree;
                var dataObj:Object = evt.itemRenderer.data;
                if (dataObj.hasOwnProperty("@src")) {
                    swfLoader.source = dataObj.@src;
                } else if (t.dataDescriptor.isBranch(t.selectedItem)) {
                    swfLoader.source = null;
                    panel.status = "";
                }
            }

            private function tree_labelFunc(item:Object):String {
                var suffix:String = "";
                if (tree.dataDescriptor.isBranch(item)) {
                    suffix = " (" + item.children().length() + ")";
                }
                return item.@label + suffix;
            }

            private function swfLoader_complete(evt:Event):void {
                panel.status = (swfLoader.bytesTotal/1024).toFixed(2) + 'KB';
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp" source="data/dp.xml" />

    <mx:HDividedBox width="100%" height="100%">
        <mx:Panel width="200" height="100%">
            <mx:Tree id="tree"
                    dataProvider="{dp}"
                    labelFunction="tree_labelFunc"
                    showRoot="false"
                    width="100%"
                    height="100%"
                    itemClick="tree_itemClick(event);" />
        </mx:Panel>
        <mx:Panel id="panel"
                width="100%"
                height="100%"
                backgroundColor="white">
            <mx:SWFLoader id="swfLoader"
                    scaleContent="true"
                    width="100%"
                    height="100%"
                    complete="swfLoader_complete(event);" />
            <mx:ControlBar>
                <mx:LinkButton label="{swfLoader.source.toString()}" />
            </mx:ControlBar>
        </mx:Panel>
    </mx:HDividedBox>

</mx:Application>

data/dp.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ -->
<root>
    <gallery label="RIA">
        <file label="ColdFusion" src="assets/cf_appicon.jpg" />
        <file label="Dreamweaver" src="assets/dw_appicon.jpg" />
        <file label="Flash" src="assets/fl_appicon.jpg" />
        <file label="Flash Player" src="assets/fl_player_appicon.jpg" />
        <file label="Flex" src="assets/fx_appicon.jpg" />
    </gallery>
</root>

View source is enabled in the following example.

32 thoughts on “Creating a simple image gallery with the Flex Tree control

  1. Hi Peter,

    nice example. Here – as in the tree control in general – I can’t open a branch by clicking on the branches name or icon, but have to aim for the triangle.

    Wouldn’t expanding the hit area to open and close branches be a nice tutorial?

    Thanks for all your great stuff here

    Klaus

  2. Hi Peter,

    When link to swf’s these were full apps not movies and click on the tree several times I get an 1034 error runtime error. Going between images no problem. I am not sure I am inserting the other apps correctly. So how about creating the tree that links to swf’s in the right panel. Just like the component explorer. Nice work.
    Thanx

  3. Hi Peter,

    I am looking for a simple example of a Tree Control linking to content, rather than an image in the right hand panel.

    Pretty much like what eternalko has done here: http://eternalko.890m.com/pub/simple_tree.swf

    Would it be at all possible for you to post such an example or point me in the right direction.

    Much appreciated!
    Declan

  4. I am trying to implement this same example tree code into flex builder 3. I am very new to flex programming and am having a problem when running my code. I feel as if there is something I am doing incorrectly as far as compiling my code to swf files. Also I am confused about where the final html document comes into play. Anyone out there that can help, or at least direct me to where this sort of beginners tutorial may be. Thanks!

  5. How would you edit this app so that the images are not reloaded every time one clicks on the image name in the tree? In other words, only one server hit per image, no matter how many times one views the various images.
    Many thanks!!!

  6. You good sir, are a genius. I’ve been trying to figure out how to get a tree menu to load modules dynamicly. After many fruitless searches I came accross this code which I was able to adapt, and now everything works as it should.

    Thank you, thank you, thank you!

  7. ok! about the UNLOAD FEATURE? it does not work in reality…swfLoader does not unload when you try to load new content, it seems like it just become invisible in the back ground still playing movie, sound or whatever it was doing before being replaced…is there a way to get it to really work in a real production as promissed here.

  8. HI peter,

    i need your help ,pla help me…
    Is there any option to display videos instead of images there while clicking on the link sof treemenu………….

    if u give it flash it is much more better for me,bec actually i have a project like this exactly
    and i have no time.my client wants flv videos loading dynamically in flash with the help of treemenu in left panel with scroll bar.he wants to edit xml for treemenu afterwards while he paste the videos in folder..

    can u help me plz.he wants in swf format..
    flex also doesnt matter……….plz help me…save my job…..i will be very thankful to u…..

    THANKS

  9. delta,

    If you want to play videos instead of images, use the VideoDisplay control instead of the SWFLoader control. Apart from that, I don’t think you’ll need to change any code.

    Peter

  10. Hi Perter,

    I am very sorry to trouble u again,actually i dont have good knowledge in flex.anyway my client gave few images for background to display in bg of treemenu and bg of videodisplay.i dont know whether it is possible in flex to put those images in bg’s…because in flex the components were used. And in the components background the designs must be used which were given by client..

    So can u help me in flash with treemenu(with 2 submenus inside,and one more submenu in the first submenu) which can be edited with xml for menus and linking them to flv files to load inside flash in a flvPlayer component etc…

    Please save my job,i am in new job and this is my first project and i dont want to loose my impression…i asked many people nobody could do it…i have hope in u …

    I will be very thankful to u if u do this help for me…..

    Thanks

  11. Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…Peter Thank You So Much…

  12. i want one more submenu in the list like if i click on the menu folder “ALL” i can see a list.im that there is flash link.if i click on flash link i want one more submenu in that like actionscript etc..how can i make that possible…

  13. flex lover,

    You can use the navigateToURL() method, as seen in the following example:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Script>
            <![CDATA[
                import flash.net.navigateToURL;
    
                private function img_doubleClick(evt:MouseEvent):void {
                    var urlReq:URLRequest = new URLRequest(evt.currentTarget.source);
                    navigateToURL(urlReq, "_blank");
                }
            ]]>
        </mx:Script>
    
        <mx:Image id="img1"
                source="http://www.helpexamples.com/flash/images/image1.jpg"
                doubleClickEnabled="true"
                doubleClick="img_doubleClick(event);" />
    
        <mx:Image id="img2"
                source="http://www.helpexamples.com/flash/images/image2.jpg"
                doubleClickEnabled="true"
                doubleClick="img_doubleClick(event);" />
    
    </mx:Application>
    

    Peter

  14. great, thanks for thant and thanks for the quick reply,

    2 other questions.

    how can i have an image or the first image be up already?

    how do i center the image?

    thanks so much

  15. Hello! Awesome blog, you’ve helped a newbie like me tons :)

    I used your code to create a bare bones beginning to my app, with 2 SWFloaders populated via the xml tree (thanks for that!) These 2 SWFLoaders correspond to a content box for lessons, and a virtual tutor box for videos. All of the content are AS3 swfs. I want to place buttons in my content so that I can change out the SWFs in either of the SWFLoaders in the Flex app. Do you know the code I would need in order to do that in my Flex app, as well as in my FLA files?

  16. Dear
    Peter –

    I got this tree control based image galery demo to compile and run with the latest Gumbo sdk, that is, utilizing the old 2006 name space….. Then with my attempts to move into using the latest Gumbo/Spark based components… I’m finding that apparently that the newer XML document parsing component have also have a recently rearranged there API…. I’ll do more reading, Then I gather there is some problem adding the XML parser resulting to be a member of its parent container??

    Im trying to figure out how this XML parsing should now be written with the new Gumbo API, Any assistance in helping bring your example code up to the latest would be great!….P.S. where should I send the Flex zip archives of the revised 3D Action Script example that I took a bit furthe… that is, I pulled the Action Script it’s own “.as” file.??

    All the best
    -Peter L.

  17. Figured it out, in Gumbo’s MXML an fx:XML object creation tag, must be declared as inside an fx:Declarations open/closing tag pair…. once one makes this adjustment, with a just splendid mix of s:,fx: and mx: name space designators ( kind of drives one crazy guessing which ones to use for any given object, and things could become even more obscure if this name space craziness continues with the Gumbo sdk ) … given these these adjustments this example has been made to execute withing the latest Gumbo sdk….

    Let me know where I should send the updated,Gumbo revised, FLEX project archive files..

    Cheers
    -Peter L.

  18. Hi there;

    i want to make a tree control but when i click it i dont want to show image,i want to show other mxml or html sites….how can i make it???

  19. Peter,
    I have been looking for an example of a tree that controls a list of images. As the user works his way down the branches of the tree the list filters the images until the final leaf displays a single image. Any suggestions?

    1. @Apoorv,

      Are you modifying the example at all? I tried importing the example ZIP into Flash Builder 4 and compiling using the Flex 3.5 SDK and it worked as expected (although I did have a compiler error which required me to create a /libs/ folder in my project).

      Peter

      1. Hey Peter ,
        Thnks it worked after downloading source code previously it wasnt working .

        I have 1 more query .. Can we add pictures to the directory ? If yes than please guide me .
        Like if the person clicks All than also a picture is shown

        waiting for your reply

        Regards
        Apoorv

  20. Peter deHaan,

    Great example. But i have a requirement to support automation testing, where in i want to assign a dynamic id to each node of a tree. Is it possible in any way?

Comments are closed.