13 Replies Latest reply on Apr 13, 2011 8:56 PM by Jason Barles

    changing icon of the treeNode

    Zoltan Altfatter Newbie

      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

        • 1. Re: changing icon of the treeNode
          Ilya Shaikovsky Master

          what about iconCollapsed and iconExpanded attributes? ;)

          • 2. Re: changing icon of the treeNode
            Zoltan Altfatter Newbie

            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)





            • 3. Re: changing icon of the treeNode
              Mamatha K S Newbie

              Try using icon attribute and iconLeaf attribute

              • 4. Re: changing icon of the treeNode
                Zoltan Altfatter Newbie

                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.


                • 5. Re: changing icon of the treeNode
                  Zoltan Altfatter Newbie

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

                  • 6. Re: changing icon of the treeNode
                    Marcin Bednarek Newbie

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

                    • 7. changing icon of the treeNode
                      Michael Heinen Newbie

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

                      Any ideas how to do this with 3.3.3 ?

                      • 9. changing icon of the treeNode
                        Michael Heinen Newbie

                        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?

                        • 10. changing icon of the treeNode
                          Ilya Sorokoumov Master

                          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?

                          • 11. changing icon of the treeNode
                            Michael Heinen Newbie

                            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.

                            • 12. changing icon of the treeNode
                              Ilya Sorokoumov Master

                              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.

                              • 13. Re: changing icon of the treeNode
                                Jason Barles Newbie

                                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.