changing icon of the treeNode

[altfatterz]

Hi,

I am using 3.1.5-GA and I am tring to apply our look&feel on the tree component.
My question would be is there a possibility to change the icon of a node dinamicaly. I mean when the node is expanded we would present there an open folder icon, when it is collapsed there would be a closed folder icon.

Any comments would be appreciated.
Thanks

[ilya_shaikovsky]

what about iconCollapsed and iconExpanded attributes? ;)

[altfatterz]

Hi,

"iconCollapsed" and "iconExpanded" handle different icons. With that you can change the default "arrow" icons. (Arrow to right when it is collapsed, arrow down when it is expanded)

[mamathaks]

Try using icon attribute and iconLeaf attribute

[altfatterz]

My tree looks like this:

<rich:tree id="tree" value="#{modelTreeManagedBean.rootNode}"
 var="item" nodeFace="#{item.type}"
 changeExpandListener="#{modelTreeManagedBean.onExpand}"
 iconCollapsed="/images/icons/nav-plus2.png"
 iconExpanded="/images/icons/nav-minus2.png"
 icon="/webuif/images/book-closed.gif"
 iconLeaf="/webuif/images/book-closed.gif">

 <rich:treeNode type="world">
 <h:outputText value="#{item.name}" />
 </rich:treeNode>

 <rich:treeNode type="continent">
 <h:outputText value="#{item.name}" />
 </rich:treeNode>

 <rich:treeNode type="country">
 <h:outputText value="#{item.name}" />
 </rich:treeNode>
</rich:tree>

The expand listener looks like this:

public void onExpand(NodeExpandedEvent event) {
 UITree tree = (UITree) event.getComponent();

 if (tree.isExpanded()) {
 tree.getNodeFacet().setIcon("/webuif/images/book-open.gif");
 } else {
 tree.getNodeFacet().setIcon("/webuif/images/book-closed.gif");
 }
}

Expanding the "World" node:

http://delfin.unideb.hu/~az0009/richfaces/tree1

Expanding the "North America" node

http://delfin.unideb.hu/~az0009/richfaces/tree2

Collapsing the "World" node:

http://delfin.unideb.hu/~az0009/richfaces/tree3

Expanding the "World" node again:

http://delfin.unideb.hu/~az0009/richfaces/tree4

As you can see there all of the child nodes of the "World" node have "opened folder" icon, which is not right...

Any comments how to solve it would be appreciated.

[altfatterz]

No idea then how to change the icon when toggling the nodes?

[smile24]

"As you can see there all of the child nodes of the "World" node have "opened folder" icon, which is not right... "

Unfortunately I have the same problem. Altfatterz did You find any solution for this?

[mhn]

I want also change the icon of the node depending on the state.

Any ideas how to do this with 3.3.3 ?

[ilya40umov]

The "icon" , "iconCollapsed" , "iconExpanded" , "iconLeaf" attributes define icons for the component.

Look at this:

http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/rich_treeNode.html

[mhn]

The images iconCollapsed and iconExpanded (arrows) are for the navigation lines (TreePlusImage, TreeMinusImage) on the left side.

I want to change the node icon depending on the state.

In your sample I want to use another image for the open node "Chris Rea", not for the small arrows.

Or did I oversee anything?

[ilya40umov]

Take a look at the following link:

http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?c=tree&tab=usage

iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer.gif"

Is it what you are looking for?

[mhn]

No, that's not what I want.

In this sample I would like that e.g. the singer icon of "Baccara" turns from yellow to green after opening the node.

So I want just another icon for expanded and collapsed nodes.

In my app I want to use an open and a closed folder icon for nodes with sub nodes.

[ilya40umov]

Well. It looks like you need something that's currently not supported in RF(Or at least I don't know how to do that).

Please create a new question and completely clarify your requirements so that RF team will be able to analyze your question and probably let you create a jira for this feature.

[jb_]

Hi Zoltan,

I know this is extremely late. But I have recently come across this issue myself and have solved it. Here is how I did it.

My Tree:

                 <rich:tree style="width:550px" nodeSelectListener="#{taskMenus.processSelection}"

                       changeExpandListener="#{taskMenus.processExpansion}"

                       reRender="selectedTitle, selectedDesc" ajaxSubmitSelection="true"

                       value="#{taskMenus.treeNode}" var="item" ajaxKeys="#{null}" treeNodeVar="treeNode"

                        preserveModel="none" switchType="ajax" icon="#{treeNode.colour}" iconLeaf="#{treeNode.colour}"

                        componentState="#{taskMenuState.componentState}" id="treeMenu">                                                               

                 </rich:tree> 

TaskMenus.java:

  @SuppressWarnings("unchecked")

  public void processExpansion(NodeExpandedEvent event){

      HtmlTree tree = (HtmlTree) event.getComponent();

      TaskNode<String> node = (TaskNode<String>) tree.getTreeNode();

      if( (tree.isExpanded()) && (node.getMode().equals("2")) ){

          // if the mode is 2 change the node icon on selection to a blank icon

          node.setColour("/images/000.bmp");

      }

  }

  private void addNodes(String path, TreeNode<String> node, Properties properties) {

      boolean end = false;

      int counter = 1;

      while (!end) {

          String key = path != null ? path + '.' + counter : String.valueOf(counter);

          String value = properties.getProperty(key);           

          if (value != null) {

              TaskNode<String> nodeImpl = new TaskNode<String>();

              String[] valuearray = value.split("::-");                           

              nodeImpl.setData(valuearray[0]);             

              nodeImpl.setColour(valuearray[1]);

              nodeImpl.setTaskKey(valuearray[2]);

              nodeImpl.setDescription(valuearray[3]); 

              nodeImpl.setMode(valuearray[4]);

              node.addChild(new Integer(counter), nodeImpl);

              addNodes(key, nodeImpl, properties);

              counter++;

          } else {

              end = true;

          }

      }

  }

Now to explain how I change the icons. The tree sets default icons to the task nodes. The attribute changeExpandListener calls the processExpansion method. The processExpansion method checks to see if the tree node has been expanded. In my case I also check if the mode of the node is equal to 2, but you can ignore that because I only change icons if the mode is 2. Once expanded a new icon path is set thus altering the icon's image.