6 Replies Latest reply on Jan 18, 2008 11:44 AM by Carey Foushee

    rich:tree How to set a different icon for a different type o

    Marcin A Newbie

      Hello,

      I'm new to RichFaces and I'm trying to set a different icon for a different type of file in the tree. I'm building tree (directory structure) dynamically using TreeNodeImpl class, I don't know if that's the proper way of doing it, if not - please correct me.

      <rich:tree ajaxSubmitSelection="true" switchType="client" value="#{MyBean.rootNode}" var="item">
      </rich:tree>
      


      My problem is that the TreeNodeImpl class has no way of customizing the node's icon, based on the file's type.

      Please, can someone provide me some sample code, how to dynamically set the icon for a different type of file in tree? or is there a way of setting node's different text color based on the file's type?

      Thank you, for your reply's

        • 1. Re: rich:tree How to set a different icon for a different ty
          Florian Marwede Expert

          Let some class inherit from TreeNodeImpl (for example "IconTreeNode"), give a member "icon" with setter/getter. Build on server side a tree structure with icons you want and say in jsp/facelet: icon="#{item.icon}" or something like this.

          Hope it helps.

          • 2. Re: rich:tree How to set a different icon for a different ty
            Nick Belaevski Master

            Add several rich:treeNode having different "type" attributes with icons customized through icon* attributes or facets. Bind node of concrete type using tree's "nodeFace" attribute. See the demo: http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf for more info

            • 3. Re: rich:tree How to set a different icon for a different ty
              Marcin A Newbie

              I have created a class

              public class TreeIconNodeImpl extends TreeNodeImpl {
              
               private String type;
              
               public void setType(String type) {
               this.type = type;
               }
              
               public String getType() {
               return type;
               }
              
              }
              


              Then I have built a tree recursivly (directory structure) using TreeIconNodeImpl class (rootNode), in jsp I have:

              <rich:tree ajaxSubmitSelection="true" switchType="client" value="#{MyBean.rootNode}" var="item"
              nodeFace="#{item.type}">
               <rich:treeNode type="test_type" icon="/images/tree/test.gif">
               <h:outputText value="#{item.data}"/>
               </rich:treeNode>
              </rich:tree>
              


              and this does not work. I'm having PropertyNotFoundException: Bean: java.lang.String, property: type. That indicates that #{item} is a String, but I want to have TreeIconNodeImpl .

              Please can someone give me a hint how to bind the #{item} variable to for example TreeIconNodeImpl, so that I could set a different icon for a different type of node?




              • 4. Re: rich:tree How to set a different icon for a different ty
                Carey Foushee Newbie

                I am trying to do the exact same thing, and am getting the same exception as well. Can you someone please address this?

                • 5. Re: rich:tree How to set a different icon for a different ty
                  Andrew Hart Newbie

                  Well, this is one problem I have managed to solve. The problem with your example below is that you have extended TreeNodeImpl to add a type attribute. Then, in your JSP snippet, you attempt to reference this new type attribute by dereferencing it in the EL expression as:

                  <rich:tree ajaxSubmitSelection="true" switchType="client" value="#{MyBean.rootNode}" var="item"

                  But, the problem here is that var="item" is used to bind a variable name "item" to the OBJECT that is contained in the TreeNodeImpl, not the Treenode itself. So, item is referring to the data object contained by the tree node, not the tree node itself.

                  The way I handled this (and I am sure there are lots of other ways) was to first create an enumerated type called "Icon" where I associated an enumerated type with a type string and also with the path to an icon image. Then, I defined an Iconic interface which has methods to return an attribute of the Icon enumeration as well as methods to interrogate that enumerated attribute value to return the type string and the path to the tree icon to be displayed. So, all of the objects that I am going to put into the tree implement this Iconic interface. When I build my tree I then stuff them into the TreeNodeImpl using setValue. When you then create the var="item" as you did above, item will be referring to this DATA OBJECT, not the TreeNodeImpl. So, then your TreeNode tag might look like this:


                  <rich:treeNode type="#{item.iconTypeName}"
                  iconLeaf="#{item.iconImagePath}"
                  icon="#{item.iconImagePath}"
                  rendered="#{!item.editingAllowed}">
                  <h:outputText value="#{item.name}"/>
                  </rich:treeNode>


                  As you can see, my Iconic interface also has an attribute that states whether or not I should be permitted to edit the Iconic object, and that's what the "editingAllowed" attribute is supposed to communicate. I then render a commandLink to open up a modalPanel to edit the object. That's where MY problem is happening, but I'm not getting any feedback on that. But, as far as having generic JSP treetag code that renders different icons based on the type of object in the tree, this is how I did it.

                  Hope it helps.

                  Your original post quoted below:


                  "krooshon" wrote:
                  I have created a class

                  public class TreeIconNodeImpl extends TreeNodeImpl {
                  
                   private String type;
                  
                   public void setType(String type) {
                   this.type = type;
                   }
                  
                   public String getType() {
                   return type;
                   }
                  
                  }
                  


                  Then I have built a tree recursivly (directory structure) using TreeIconNodeImpl class (rootNode), in jsp I have:

                  <rich:tree ajaxSubmitSelection="true" switchType="client" value="#{MyBean.rootNode}" var="item"
                  nodeFace="#{item.type}">
                   <rich:treeNode type="test_type" icon="/images/tree/test.gif">
                   <h:outputText value="#{item.data}"/>
                   </rich:treeNode>
                  </rich:tree>
                  


                  and this does not work. I'm having <b>PropertyNotFoundException: Bean: java.lang.String, property: type</b>. That indicates that #{item} is a String, but I want to have TreeIconNodeImpl .

                  Please can someone give me a hint how to bind the #{item} variable to for example TreeIconNodeImpl, so that I could set a different icon for a different type of node?




                  • 6. Re: rich:tree How to set a different icon for a different ty
                    Carey Foushee Newbie

                    Thanks for detailed answer that really helped.