Tree component customization

Hi all,
I'm new to flex and having a hard time figuring out the best way to approach the following problem (in Flex context, _not_ AIR):
I need a tree representation of some hierarchical/composite data structures as depicted below (for those familiar with XMLSpy, the diagram is similar to the XSD tree structure diagrams):                                                                                     |-------------|
                                                                                     | Child       |
                                                                                     | child info |
                                      |------------------|                           |-------------|
                                   |--| Child            |--------- Choice (x) ------|
                                   | | Child Info      (x)                          |-------------|
                                   | --------------------                           | Child       |
                                   |                                                 | child info |
---------------                    | |------------------|                           |-------------|
| Parent      |------ Sequence (x)-|--| Child            |
| Parent Info (x)                  |   | Child Info     (x)
---------------                    |   --------------------
                                   |
                                   | |------------------|
                                   |--| Child            |
                                      | Child Info      (x)
The (x) in the picture are the collapse/expand buttons.
What would be the best way to approach this project ?
- Is it a customization of the standard Tree component + custom Tree Item Renderer ?
- The nodes should be expandable/collapsible + selectable (additional information to be displayed on selection of node without expand/collapse effect)
- For the nodes would it make sense to derive them from the ToggleButton ? (and what would be the most sensefull way of introducing the second line on the button ? Or just building a proper graphical component for it (derived from Group)?
- What is the most effective way to deal with the balancing of the tree in such a way that subtrees move out of the way/in place on expand resp. collapse of nodes ? (through (H/V)groups ?)
- What would be the most efficient way to deal with the connectors between nodes ?
- dataprovider would be an XML structure - what is the best place to put the building algo ? (Every node know how to create itself and the first level children ? Or a tree traverse on the XML structure, building all components in one go ?)
Any advice/thoughts/references are welcome !
Thanks in advance,
Best regards,
Bart

Sorry for the "text picture" - if you copy/paste it in word (with courier new font
), the picture becomes clear ;-)

Similar Messages

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(){

[F8] Tree Component: How can I hide/remove the scrollbar and border?

I'm using the Tree Component in my Flash 8 Pro - Project. I'm
trying to customize the look of the Tree component in two ways:
1. Is there any way to remove the scrollbar from the Tree
Component?
2. Can I also remove the Border from the Tree Component?
I checked the Component Inspector and couldn't find any
options for the scrollbar nor the border.
Does anyone know how to do this or could you point me in the
right direction?
Thanks

You can use the Status-4-Evar extension to replace some functionality that was lost withthe removal of the Status bar in Firefox 4.
Open the Customize window via "View > Toolbars > Customize" or via "Firefox > Options > Toolbar Layout" after you have installed the Status-4-Evar extension and drag the items (Status Text, Progress Meter, Download Status) upon the Add-ons Bar (View > Toolbars > [X] Add-on Bar)
* Status-4-Evar: https://addons.mozilla.org/firefox/addon/235283/

JDev10g: Using a Tree component based on different queries.

Hello,
I've been doing some research on how to implement a tree component in ADF which I got working. However I need to implement a tree component that uses several different queries.
The parent node would be one query, the child/leaf nodes would be based on another query but still related to the parent.
For Example: 'select parent_nodes from mydatabase' then 'select child_nodes from mydatabase where child_nodesID = parent_nodesID'
This will ultimately have to branch down more levels but I'm not sure exactly how to achieve this. I'm thinking I have to create new View Objects but I'm not sure exactly how to do that either.
Thank you in advance.

For an SQL query on a database use a View Object. First, you will need to create a new Entity object to represent each table in the database you need to use in the queries. Once you have created your view objects with their correct SQL queries, you need to specify how they are related. Example:
RootView is all elements with ParentId of null.
OtherView is all elements with ParentId not null.
RootToOtherLink is a view link which links RootView.Id to OtherView.ParentId. You can specify this in the dialog. You will want to select all accessors available to make your life easier later, but make sure to name them something you will recognize, like "RootToOtherDestination".
You will also need OtherToOther Link which links OtherView.Id to OtherView.ParentId. This starts the recursive nature of the hierarchical relationship.
Once you have this set up, you will need to create an Application Module so that you have a data control you can bind your tree to. Set up the data model in a hierarchical fashion using your link.
This will create a data control on the Data Controls pane you can drag onto your .jspx page. A menu will show up from which you can select tree component. This will take you to the tree binding dialog. Here is where all your work so far will pay off. You want to click the green plus button to add your RootView. Then, with the RootView selected you will want to hit the green plus again to select your destination accessor, such as "RootToOtherDestination" as mentioned earlier. This will show the OtherView as a child of the RootView. Finally, with OtherView selected you will want to hit the green plus again and select your other destination accessor, such as "OtherToOtherDestination". Select the attributes you want to have available to your tree at the bottom of the dialog and click ok.
Your tree will show up. If you want to customize the way it looks or especially the attributes it displays in a node, those can be edited in the <af:tree> tag on your .jspx page.

Styling a tree component

Hi!
I would like to customize a tree component so that "nodes"
actually look like buttons.
i tried exporting the style and edit with flash, but that way
I can only edit the tree icons...
what I want is the Name of my node appearing inside of the
icon so that if i make the icon wide and look like a button, the
text should not be beside it....if i make any sense here..
maybe there's a way to use another component?
i only want one level below the node, so i could use an
Accordion but it doesn't work for empty containers (Canvas), it
always slides down a bit , even if you set the canvas' width and
height to 0 and the accordion to resizeToContent..
i hope i'm not too confusing and that someone can help me :)
cheers

Some people have adapted the tree control to make Treemaps.
Maybe that could help you
http://www.zeuslabs.us/2006/12/25/flex-treemap-subversion-download/

Tree component in jsp files...

We are customizing Bpel Human task jsp pages.
Generally. We are using ADF tree ..
But this pages are auto generated and based on jsp technology.
So we need to use jsp components.
is there any jsp tree component to use in jsp pages.
Standart jdeveloper lib or external.
Thansk...

Hi Frank,
I was dealing (and I'm still dealing with this) to make work a JSP tree component, reading this Oracle JDeveloper 10g (10.1.2) official documentation
http://www.oracle.com/webapps/online-help/jdeveloper/10.1.2/state/content/navId.4/navSetId._/vtTopicFile.developing_mvc_applications%7Cadf_pcustomizingtreecontrol%7Ehtml/vtTopicId./
seems that is possible to make run the DCTree component for JSP, but it crashes too much. (Token Validation, refreshing, and a few bad code things that make me impossible to customize it for a workaround).
Any idea?
Thanks.
Jaume

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?

Layout issue with af:tree component

I am using af:tree component but I am finding layout issue with it. I have a requirement where in I need the tree to stretch to the available space but a horizontal and a vertical scrollbar comes up automatically. Is there a way to handle this issue?

User, without your jdev version it's hard to help.
Have you embedded the tree component in a stretch layout?
Timo

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>

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(){

Ext. data source and Tree component

Im using tree component and XMLConnector here.
as far as i can see results in my tree (when testing my
movie) it ouputs data thats loaded fom ext. XML file.
But the problem is that it publishes [type Function] in the
tree.
no actual xml nodes are visible, just bunch of [type
Function]
ive also searched for info / tutorial how to publish actual
xml data in the tree component but without any luck.
So what should i do and how ?

Solved
xml tags needed just a label with attributes

Tree component and loading xml files into text field

Hello and thank you for taking the time to read my issue....
I am making a simple self help application. I have a tree component that loads the different catagories and topics for my help app dynamically via an xml file...no issues there.
I then want it so that when the user cliecks on the actual topic that the TextArea component will load the info from another xml file using the name of the topic as the name of the xml file to make it that much easier for anyone to maintain this program.
So far the code i have is this.
myTreeListener.change = function(eventObject)
    var theSelectedNode = eventObject.target.selectedNode;
    var theSelectedNodeLabel = theSelectedNode.attributes.label;
    topicTextArea.text +=
I am a little fuzzy when it comes to loading the xml file in. Should i be loading html instead of xml is my other question as well?
Thanks in advance for your help
FG

Check out the Oracle XDB Developer's Guide, Chapter 3. There is an example of using BFileName function to load the xml files from a directory object created using create or replace directory. It works really well.
Ben

Tree component display problem when text too long???

hi all
whenever i use a tree component to display some sort of text, i run into problems when the width of the text being display for a node is larger than the width of the tree component.
Given: Tree tree1 with Node node1 and Child Node child1
When the text of either node1 or child1 is longer than the width of tree1, the text is displayed on its own single line UNDERNEATH the node images. this makes the text look like it does not belong to the group of children of a given node.
is there anyway to add maybe a text area or some sort of scrolling region to allow for any length of text for any node??
thanks everyone!

Yes, you can change the size of the tree node text field. Please see the "Tree Node Component Properties Window" section in the Help Contents within the IDE. Look at the info under the "Appearance" section.

How to build a form with a tree component

Hi, i'd like to know if it's posssible to build a form with
the Flash 8 Tree component.
My menu looks like a tree but the childnodes of this tree are
some form criteria that you can aditionate and post to a serveur.
I try to use the accordeon menu, and it works but my menu
must have dynamic heigth, and open all the boxes like the tree
component...
I'm in a hole... please healp me...
Thinks

Sans,
I am no Apex expert, but with a situation as "complex" as yours, have you thought about creating a VIEW that joins these 7/8 tables, placing an INSTEAD OF trigger on that view to do all the business logic in the database, and base your application on the view?
This is the "thick-database" approach that has been gaining momentum of late. The idea is to put your business logic in the database wherever possible, and let the application (Form, Apex, J2EE, whatever) concentrate on UI issues,

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>

Tree component customization

Similar Messages

Maybe you are looking for