Tree Component Icons
I'm using the tree component for a little Windows Parody I'm making. In my .fla, There's a tree component that loads an external XML file. I can't figure out how to add custom icons to my component, though.
I know it's possible to set the icons for just the default folder and file icons, but since it's a Windows Parody, there'll be different icons for different file types, folder types, etc.
In other words, I'd like to have a different icon for every item in my Tree component.
How can I do this?
Here are the contents of my XML file:
<node>
<node label="Desktop">
</node>
<node label="Documents">
<node label="Pictures" isBranch="true" />
<node label="Movies" isBranch="true" />
<node label="Games" isBranch="true" />
<node label="Video" isBranch="true" />
</node>
<node label="Computer">
<node label="Local Disk (C:)" isBranch="true" />
<node label="Local Disk (D:)" isBranch="true" />
<node label="DVD-RAM Drive (E:)" isBranch="true" />
<node label="DVD/CD-RW Drive (F:)" isBranch="true" />
</node>
<node label="Readme.txt" isBranch="true" />
</node>
And the code on the first frame of my .fla file. The Tree's name is "fileTree", and the XML file is "doors_explorerXML.xml".
//Tree
var fileDP:XML = new XML();
fileDP.ignoreWhite = true;
fileDP.load("doors_explorerXML.xml");
fileDP.onLoad = function() {
fileTree.dataProvider = this.firstChild;
Also, I don't need to have an XML file loaded. If there's an easy way that does it all within Flash, please tell me. I just need to be able to handle events from the Tree.
Im having the same issue. I dont know how to change the tree icons separately with the xml. Is there anyone who knows how to do it?
This is what I got so far. However, i can only get my first branch to show custom icons. I tried ALOT, but i guess I´m doing something completely wrong.
Here is the code for my tree so far:
my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.load("tree.xml");
my_xml.onLoad = function(){
myTree.dataProvider = this.firstChild;
var folders = my_xml.firstChild.firstChild;
var docs = folders.childNodes;
for (var i=0; i < docs.length; i++){
currDoc = docs[i];
trace(docs[i]);
var docIcon = currDoc.attributes.pic;
switch(docIcon){
case "pdf":
myTree.setIcon(currDoc, "pdfIcon");
break;
case "word":
myTree.setIcon(currDoc, "wordIcon");
break;
case "excel":
myTree.setIcon(currDoc, "excelIcon");
break;
case "ie":
myTree.setIcon(currDoc, "ieIcon");
break;
}//switch
} //for
};//onLoad
And here is the XML I used:
<node label="» Dokument typer">
<node label="» links - document">
<node label="test.url" url="http://www." pic="ie" info="test text" />
<node label="test.doc" url="test.doc" pic="word" info="test text" />
<node label="test.excel" url="test.xls" pic="excel" info="test text" />
<node label="test.pdf" url="test.pdf" pic="pdf" info="test text." />
</node>
<node label="» Links - document">
<node label="test URL" url="http://www." pic="ie" info="test text." />
<node label="test URL" url="http://www." pic="ie" info="test text." />
</node>
</node>
Similar Messages
-
How do you change the Tree Component Icons?
Hi,
I have been trying to get to grips with the tree component. I
want to
customise it so that I can have a different icon for each
different link.
E.g. a QT logo for a video etc. If no valuse is found for the
'icon'
attribute it will just display the default.
Within my XML file I have created a new attribute for each
link called
'icon' and has a value of 'movie.gif' or something similar.
In my flash file, I have created the following code:
theTree.iconFunction = function (node:XMLNode) {
var iconNode:String = item.attributes.icon;
if (iconNode != undefined) {
return iconNode;
However, it does not seem to work. My knowledge of
ActionScript is pretty
poor so I assume I have made a mistake in there somewhere.
Can anyone help
me with this?
Thanks!Check out the Component Reference... you change the icon for
a single node, as far as I know there's no automated process beyond
that. So assuming your tree component instance is named "theTree"
you might do this to change the icon of the first node:
theTree.dataProvider = yourXML; // make sure you don't try to
change the icon before you load data into the tree
var theNode = theTree.getTreeNodeAt(0); // the first node in
your tree
theTree.setIcon(theNode,'myIcon'); // set the icon
Where "myIcon" is a MovieClip you have in your library that
you have set the "linkage identifier" as "myIcon".
That iconFunction doesn't make a whole lot of sense to me,
because first of all I don't know why it would be attached to
theTree, and second it's referring to "item" which is not defined,
and third its taking the parameter "node" and not doing anything
with it. But perhaps there is some cool way to make a single
function which handles icons for your entire tree automatically,
that would certainly be nice.
However, like I said, as far as I know that function will do
nothing without calling tree.setIcon() in some way. I just made a
function which might do what you want -- it recursively loops
through an entire tree and sets it's icon based on the XML
attribute "icon":
function setAllIcons(branch){
for(var i in branch.childNodes){
var node = branch.getTreeNodeAt(i);
theTree.setIcon(node,node.attributes['icon']);
if(node.hasChildNodes){
setAllIcons(node);
So basically, you run setAllIcons(theTree.dataProvider) after
you have loaded and applied the XML. -
Problem refreshing the Tree Component icons
Hello,
I'm using the Tree, adding the nodes dinamically, following the example: http://www.netbeans.org/kb/55/vwp-databasetree.html
This Tree shows the access permissions from the users, and show a red icon on the itens without permissions and a green icon on the itens with permissions.
In the nodes, I add an action that change this permissions when the user click.
If the permission is Ok on the clicked item, the action remove this permission and vice-versa.
The action is working fine, but the problem is the refresh of the tree after click. The icons stay like before the click. It is refreshed only if I navigate to another page and return after. Then the icons are showed correct.
In the method that add the nodes, I select the node icons like this:
if (havePermissionModulo(grupo, modulo)){
moduloNode.setImageURL(imgPermissaoOk);
}else{
moduloNode.setImageURL(imgPermissaoNegada);
Where imgPermissaoOk and imgPermissaoNegada have the path to the images.
Sorry by my english :)It is hard to tell
When the user clicks on an icon, is the page submitted to the server and the page redisplaying itself?
Is the tree's clientSide property cleared (that is, false).
Is the browser caching the images? What if you hit a Shift-Reload? -
Custom icon per entry in the AS2 Tree Component (using CS3)
I have a tree component that loads its data from an XML file and I wonder if I can customize every entry to have its own icon by adding an icon attribute to every entry in the XML and giving the tree an action to read that icon (which would exist in the library of the Flash file). My goal is to reproduce a tree within an application that my company is developing (it's for a training tool related to that application).
My XML says something like <node label = 'Label' heading = 'LABEL' desc = 'Description' icon = 'icon1' />
My label is what the tree displays, the heading is what the information dialog in the training tool displays as a title bar, the desc is what the training tool displays within the body of the text for the function description and the icon is what I want to be a reference to the graphic in the library to place as an icon in front of the item rather than use setStyle with the properties for disclosure, leaf, and folder icons.
Is that possible? I haven't found a solution for it yet.I've never used the Tree component, so I'm just guessing here....
There is a slight delay before the xml file loads and your tree has its data provider.
Perhaps during that time there is no node at mTree.getTreeNodeAt(0) to open? Try adding this just before the last line of your code:
trace("the node is: "+mTree.getTreeNodeAt(0));
What do you get?
You might need to move that code inside the xml's load event handler.
Another thing is that the Flash components tend to work on an invalidate-then-wait-one-frame-to-redraw kind of model. So it is possible you will need to wait one frame after the xml has loaded and then tell it to open that node.
The doLater method might help with that.
var home:MovieClip=this;
var xmlTreeData:XML = new XML();
xmlTreeData.onLoad = function() {
mTree.dataProvider = this.firstChild;
mTree.doLater(home,"delay");
xmlTreeData.ignoreWhite = true;
xmlTreeData.load("xml/treeValues1.xml");
mTree.setStyle("fontSize","11");
mTree.setStyle("selectionColor","0xE0E0E0");
mTree.setStyle("useRollOver",false);
function delay(){ -
Tree component - can I declaratively hide the disclosure icon
I have just started working with the tree component. Within the data model that I am working with, I've got branches that may or may not contain children. The child nodes are lazily fetched (which is good, for performance), but this results in the tree not knowing if children exist until the disclosure icon (the arrow) is clicked. This means that when the branch contains no children, the user has to click the arrow, and the arrow just disappears without anything on the tree changing. Because of the nature of the legacy data model that I am working with, I actually have an attribute that indicates if children exist (and I could have created a formula based attribute if no such indicator existed in the data model). I would like to be able to check this attribute (via EL or some other method) and suppress the disclosure icon if no children exist, but I have not found a way of doing it. Is this possible?
I was able to get this to work using the following disclosure listener:
public void testDisclosureListener(RowDisclosureEvent rowDisclosureEvent) {
Object rowKey = null;
FacesCtrlHierNodeBinding rowData = null;
RichTree tree = (RichTree)rowDisclosureEvent.getSource();
RowKeySet rks = rowDisclosureEvent.getAddedSet();
if (rks != null && rks.size() == 1) {
rowKey = rks.iterator().next();
tree.setRowKey(rowKey);
rowData = (FacesCtrlHierNodeBinding)tree.getRowData();
if ( rowData != null && rowData.getChildren() != null ) {
// Iterate through the children of the expanded node and check if they have children
for ( Object child : rowData.getChildren() ) {
FacesCtrlHierNodeBinding childNode = (FacesCtrlHierNodeBinding)child;
if ( childNode.getChildren() == null || childNode.getChildren().size() == 0 ) {
// Child node is a leaf. Add it to the disclosed rows, to that the ADF tree will not display a disclosure icon
tree.getDisclosedRowKeys().add(childNode.getKeyPath());
} -
Label display issue in Tree component when it is having vertical scrollbar
I am using tree component as dropdown factory for combo box. When i open dropdown, it doesn't have vertical scrollbar and all the root nodes are getting displayed correctly(in closed mode). Now if i try to open any node, i am getting vertical scrollbar as the child nodes are more. Now the problem is if scroll down, some of the nodes(labels) are not getting displayed but i am able to see the icon. If i keep on scrolling bottom to top and top to bottom, some of the nodes are showing labels and some are not(It is inconsistant).
I have not used any custom item renderer for tree control. I used my custom dataDescriptor which i have implemented from ITreeDataDescriptor. Also I tried extending DefalutDataDescriptor, but no luck.Does it work if the tree is not in a combobox?
-
Questions about AS2 Tree Component (Flash CS3)
I have Flash application with a Tree component on the Stage. I'm using an XML file to create the structure of the Tree component.
Each entry on my XML has the attributes id, label, heading, desc, and icon.
My problem is that I can't seem to be able to set the Tree to default with the first node open.
My code is:
var xmlTreeData:XML = new XML();
xmlTreeData.onLoad = function() {
mTree.dataProvider = this.firstChild;
xmlTreeData.ignoreWhite = true;
xmlTreeData.load("xml/treeValues1.xml");
mTree.setStyle("fontSize","11");
mTree.setStyle("selectionColor","0xE0E0E0");
mTree.setStyle("useRollOver",false);
mTree.setIsOpen(mTree.getTreeNodeAt(0), true);
My tree populates fine, and the handler I retrieve whatever item is clicked works great. However, the tree refuses to default to having that first node open.
I'm also interested in placing custom icons into certain nodes via the icon attribute I've set in the XML, but that will have to come later I guess.I've never used the Tree component, so I'm just guessing here....
There is a slight delay before the xml file loads and your tree has its data provider.
Perhaps during that time there is no node at mTree.getTreeNodeAt(0) to open? Try adding this just before the last line of your code:
trace("the node is: "+mTree.getTreeNodeAt(0));
What do you get?
You might need to move that code inside the xml's load event handler.
Another thing is that the Flash components tend to work on an invalidate-then-wait-one-frame-to-redraw kind of model. So it is possible you will need to wait one frame after the xml has loaded and then tell it to open that node.
The doLater method might help with that.
var home:MovieClip=this;
var xmlTreeData:XML = new XML();
xmlTreeData.onLoad = function() {
mTree.dataProvider = this.firstChild;
mTree.doLater(home,"delay");
xmlTreeData.ignoreWhite = true;
xmlTreeData.load("xml/treeValues1.xml");
mTree.setStyle("fontSize","11");
mTree.setStyle("selectionColor","0xE0E0E0");
mTree.setStyle("useRollOver",false);
function delay(){ -
Incremental Loading of a Tree Component
I'm working on an explorer-type interface in Flex 2 for
browsing a remote file repository. It's a standard split-pane
affair with a directory tree on the left and a listing on the
right.
Because the entire directory tree can be rather large, I need
to load it incrementally as the user expands nodes rather than all
at once. I failed to find a relevant example so I wrote my own. It
works, but I'm new to Flex and am not sure if there's an easier way
or if there are any pitfalls to the way I did it.
I posted my code here:
http://xocoatl.blogspot.com/2007/01/incremental-loading-of-tree-in-flex-2.html
Any comments here or on the blog are appreciated; I'm
guessing that having a good example of the "right" way to do this
will be useful to many others.
Thanks.i am also using another workaround using CSS trick(inlineStyle). if #{node.children} is null, i am placing an empty 10x10 white png image file over expand icon on tree node.
following code is nodeStamp of tree component.
<f:facet name="nodeStamp">
<af:group id="g1">
<af:image source="/images/spacer.png" id="i1" inlineStyle="border: 2px solid white; position: absolute; margin-left:-14px;" rendered="#{node.children == null}"/>
<af:commandLink text="#{node.name}" id="cl1" partialSubmit="true"/>
</af:group>
</f:facet> -
I have a swf file that is a Tree Component... (So when it
diplays it looks like a Directory structure with folders and files)
Some nodes access url links... And some access .doc files on
the network... This works fine when I run it from my local site,
but when I run it on the remote site (Intranet server) the nodes
that reference file paths so nothing, instead of opening the file,
the url type links do work fine on the remote site.
Any thoughts on why this might be occurring ? I am putting
the swf and the associated xml file and html page on the remote
site... Am I missing a file or setting on the server that I have
locally? I am also including my .as file and xml file for review.
Any help would be greatly appeciated.
xml code:
<node>
<node label="Training Information" data="">
<node label="HP Learning Center" url="
http://h30187.www3.hp.com"
/>
<node label="HP Class Schedule" url="
http://h30187.www3.hp.com/all_courses.jsp"/>
<node label="Excel Charting Tips" data="IT Web
Docs/Advanced Tips and Tricks for Excel Charting.wmv" />
<node label="Email Contacts" data="file:///P|/IT
information/Tips/Contacts - Keeping track.doc" />
<node label="Assigning Tasks in Outlook" data="IT Web
Docs/Assigning and tracking tasks in Outlook.doc" />
</node>
<node label="Technical Documentation" data="">
<node label="myMCC Info Guide" data="IT Web
Docs/MyMccIntro.pdf" />
<node label="MCC Webex Guide" data="IT Web
Docs/MCCWebex.pdf" />
<node label="Scudder Access Guide " data="IT Web
Docs/AccessDWS-Scudder.pdf" />
<node label="VPN Install Guide" data="IT Web
Docs/MCCCitrixAccessGatewayVPN-Install.pdf" />
<node label="VPN User Guide" data="IT Web
Docs/MCCCitrixAccessGatewayVPN-Use.pdf" />
<node label="Samsung i830 Guide" data="IT Web
Docs/Samsung_i830_User_Guide.pdf" />
<node label="Treo 700w Guide" data="IT Web
Docs/treo_700w_user_manual.pdf" />
</node>
</node>
Action Script code:
import mx.controls.Tree;
class TreeNavMenu extends MovieClip {
var menuXML:XML;
var menuTree:Tree;
function TreeNavMenu() {
// Set up the appearance of the tree and event handlers.
menuTree.setStyle("fontFamily", "_sans");
//menuTree.setStyle("fontSize", 6);
menuTree.fontSize = 14;
menuTree.setSize(250, 300);
menuTree.move(0,0);
// Load the menu XML.
var treeNavMenu = this;
menuXML = new XML();
menuXML.ignoreWhite = true;
menuXML.load("TreeNavMenu.xml");
menuXML.onLoad = function() {
treeNavMenu.onMenuLoaded();
function change(event:Object) {
if (menuTree == event.target) {
var node = menuTree.selectedItem;
// If this is a branch, expand/collapse it.
if (menuTree.getIsBranch(node)) {
menuTree.setIsOpen(node, !menuTree.getIsOpen(node), true);
// If this is a hyperlink, jump to it.
var url = node.attributes.url;
var file = node.attributes.data;
if (url) {
getURL(url, "_blank");
else {
getURL(file, "_blank");
// Clear any selection.
menuTree.selectedNode = null;
function onMenuLoaded() {
menuTree.dataProvider = menuXML.firstChild;
menuTree.addEventListener("change", this);
This does work fine locally... But the file paths node do not
work when I publish to the Intranet server.
Thanks-DaveIt is quite a pain in the rear to skin the AS2 components.
And I don't know of many 3rd party components for AS2. I know of
plenty AS3 3rd party components, but if you were using AS3
components you wouldn't need a Tree to replicate the adobe video
workshop type navigation, all you would need is the built in List
component. If you can go sans icons, I would suggest using the AS2
List to get the feel you're looking for. -
When I click a leaf in the Tree Component I have a function
called using the itemClick Property. When I click a node (the
folder icons) I get the AS3 error below. Does this only show up
with Debug versions of Flash Player. Plus how do I stop this error
from occurring if the user happens to have the debug version
installed?
Error #2044: Unhandled ioError:. text=Error #2032: Stream
Error.
at main/loadMyXML()
at main/collectionSelect()
at main/__gTree_itemClick()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at mx.controls.listClasses::ListBase/mouseClickHandler()
at mx.controls::Tree/mouseClickHandler()ORA-00600 internal errors should be reported to Oracle Support by SR. If you don't have a support contract try searching the web for more information and possible fixes or workarounds.
From the information available on MOS, if the type of the PG.ID_PAR_PLANO_GER column is not VARCHAR2, then try converting P22_ID_PAR_PLANO_GER to the same type. -
Tree component transparent background
Trying to make the tree component have transparent
background.
I have tried puting it in a movie clip and making that Alpa =
0 but that makes the scroll bar and node icons disappear.
Is there a actionscript genius out there that would be kind
enough to help an aspiring flash junkie out?
Thanks in advance.I just did the same myself and it became transparent....
import mx.styles.CSSStyleDeclaration;
if(_global.styles.Tree==undefined){
_global.styles.Tree=new CSSStyleDeclaration();
_global.styles.Tree.setStyle("backgroundColor","undefined");
however - after i did this, i lost the possibility to click
on the items in the tree - i could move with the up and down arrows
but thatds not the point so can anyone help me out here
please? -
This should be an easy one...but it's not working for me.
When I specify an icon gif for a node in my tree, where does Forms 6i load it from?
Thanks in advance!THANKS for the reply - I have tried your solution and I get the same icon/image for both the branches and leaves of the tree.
More specifically - If one goees into the Help in JDev 11.1.1.2 and goes to the following help page
Page --> Bindings tab > Model --> Bindings --> Insert Item --> tree
(Under "Create Tree Binding dialog " and "Create Tree Table Binding dialog" in the JDev Help)
One sees that the tree branches use a folder and the leaves of the tree us a 'sheet of paper'. The same icons also being used for the Tree Table at the same reference. I also have seen this on other doc. No where does it mention anything about how to set any icons for any level in a tree component.
Thanks again - Casey -
I have an issue with using tree component for our application. We need to provide expand/collapse facility for tree component (using default (+) and (-) icons). Does ADF_UIX support s for this situation. Please provide me any guideline....
I have an issue with using tree component for our application. We need to provide expand/collapse facility for tree component (using default (+) and (-) icons). Does ADF_UIX support s for this situation. Please provide me any guideline....
-
Hi, I've been playing around with a trail version of flex and
was interested to know if anybody had tried to implement the drag
and drop functionality of the Tree component to a TileList? After
much messing about I noticed the format of the Tree data in the
DragSource was different to that of other lists. I've tried
overriding the addDragData method to see if I can change the format
of the data although this seems to cause problems when the Drag
complete event is triggered. Any ideas or help would be
appreciated.Hey, Thanks for the reply. Yes this appears to work although
it took a bit of messing around and I still had to override the
dragCompleteHandler method of the Tree component to get the tree
view to update. One issue I do have (This appears to be an issue
with the tree component) is as you drag and drop files across from
one tree to another, when you remove the last child node the parent
node which has a folder icon changes to a document icon. Is there a
way around this? -
Is there a way to define a linkage id to set the icon for the
tree component in external XML? This is what I tried and it does
not work.
<node label="Test" data="SomeID" icon="SomeLinkageID">
The tree node is using the default folder icon. I know I
could set the icon after it is loaded but why cann't I just throw
in something to define the icon in the XML?
ThanksHi,
Could you elaborate a litle more exacly what you need to do?
I found the link http://help.sap.com/saphelp_470/helpdata/en/86/8280db12d511d5991b00508b6b8b11/content.htm that maybe assist you.
Please remember to evaluate the replays, this incentive the SDN to keep growing,
regards,
Fabio
Maybe you are looking for
-
Number of photos in iphoto 6 Slideshow
Hi. I've owned my Mac for 4 days (never owned a computer in my life before this). I'm trying to create a slideshow to post on the internet for my family to view as most of them live so far away. I moved all the pictures i wanted in the slideshow into
-
Why we don't give CC and adapter for sender Idoc and HTTPs ? I know that two are in ABAP stack, then how to communicate that and where the XML conversion done at ABAP sys or XI server or conversion not required ?
-
N86 firmware upgrade on 3three network??
I have V11.043 and there is still no update for it. Will there ever be an update to V20 firmware, if so when?
-
Multi format report using BI Analytics
Hi, I would like to know if it is possible to design and build a multi format report (each format on a different page) using BI Analytics. For eg if i have to display a report containing performance details of a single portfolio belonging to a custom
-
What does the "i'" stand for?
I could not find an appropriate place for this question so I am posting it here as this is one of my most frequently visited communites. What does the "i" mean in iTunes, iPad, iTouch...? Your responses are appreciated.