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.
<?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.
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
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 (:
Klaus Busse,
Done. For more information, see the poorly named “Opening branches by clicking rows in a Tree control in Flex”.
Peter
WOW Peter, that was quick :-)
Thanks!
Klaus
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
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
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!
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!!!
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
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!
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.
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
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
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
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
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…
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…