Creating a simple image gallery with the Flex Tree control at Flex Examples

Apr

Creating a simple image gallery with the Flex Tree control

By Peter deHaan

Categories: Tree Tags: dataDescriptor, hasOwnProperty(), isBranch(), itemRenderer, SWFLoader, Tree.

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.

26 Responses to “Creating a simple image gallery with the Flex Tree control”

Feed for this Entry View blog reactions

1 Klaus Busse Apr 5th, 2008 at 2:42 am

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 eternalko Apr 5th, 2008 at 3:43 am

Hi,

Really nice example! Thanks!

eternalko

PS. Recently I was remaking (PHP bot parsing the content) such forum
http://eternalko.890m.com/pub/sghforum/Forum.htm
to this
http://eternalko.890m.com/pub/simple_tree.swf
Just to make it easier for ME to read it.
Common structure (:
3 peterd Apr 5th, 2008 at 9:01 am

Klaus Busse,

Done. For more information, see the poorly named “Opening branches by clicking rows in a Tree control in Flex”.

Peter
4 Klaus Busse Apr 6th, 2008 at 2:40 am

WOW Peter, that was quick :-)
Thanks!

Klaus
5 Larry Jones Apr 8th, 2008 at 6:51 am

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
6 Declan Apr 8th, 2008 at 7:55 am

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
7 Timmie Apr 22nd, 2008 at 2:46 pm

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!
8 Peter May 28th, 2008 at 12:37 pm

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!!!
9 peterd May 28th, 2008 at 1:19 pm

Peter,

Take a look at Ely Greenfield’s SuperImage component, “Some thoughts on Flex vs. HTML (or… “how I made my Flex List Images stop flickering.”)”.

Peter
10 Richard Jul 8th, 2008 at 3:13 am

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!
11 DeepBlok Jul 19th, 2008 at 4:28 am

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.
12 delta Aug 27th, 2008 at 3:24 am

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
13 peterd Aug 27th, 2008 at 7:32 am

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
14 delta Aug 27th, 2008 at 10:48 pm

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
15 peterd Aug 28th, 2008 at 12:36 am

delta,

There is an example of setting a background image on a Flex VideoDisplay control at “Setting a background image on a VideoDisplay control in Flex”.

Peter
16 delta Aug 28th, 2008 at 2:17 am

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…
17 delta Sep 1st, 2008 at 2:13 am

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…
18 flex lover Nov 3rd, 2008 at 7:37 am

how would you do a link so when you click on the large image it would take you to a url?

thanks

19 peterd Nov 3rd, 2008 at 9:38 am

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

20 flex lover Nov 3rd, 2008 at 1:16 pm

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
21 flex lover Nov 3rd, 2008 at 1:19 pm

found the image center place
22 Luciano - Brazil Nov 4th, 2008 at 10:09 pm

Thanks very much
23 stacey reiman Apr 28th, 2009 at 11:48 am

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?
24 Peter Lindener Apr 30th, 2009 at 1:35 pm

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.
25 Peter Lindener Apr 30th, 2009 at 5:14 pm

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.
26 Onder Jun 4th, 2009 at 3:43 am

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???