ICEfaces
  1. ICEfaces
  2. ICE-11414

ace:tree, allow using custom expanded, contracted and leaf icons for nodes

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.3.0.GA_P05
    • Fix Version/s: EE-3.3.0.GA_P06, EE-4.3.0.GA
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      Any

      Description

      Add the ability to specify custom icons for ace:tree nodes for the expanded, contracted and leaf states.

        Activity

        Arturo Zambrano created issue -
        Arturo Zambrano made changes -
        Field Original Value New Value
        Assignee Arturo Zambrano [ artzambrano ]
        Arturo Zambrano made changes -
        Fix Version/s EE-3.3.0.GA_P06 [ 13114 ]
        Judy Guglielmin made changes -
        Support Case References Support Case 14357:- https://icesoft.my.salesforce.com/5000g00001vRwQY
        Hide
        Arturo Zambrano added a comment - - edited

        It's already possible to use custom icons in ice:tree without having to build from source.

        The ice:tree example in the component-showcase application has the following markup.

            <ice:tree id="tree"
                      value="#{treeController.model}"
                      var="node"
                      hideRootNode="false"
                      hideNavigation="false"
                      imageDir="#{styleBean.imageDirectory}">
                <ice:treeNode>
                    <f:facet name="icon">
                        <ice:panelGroup
                                style="display: inline" >
                            <ice:graphicImage
                                 value="/xmlhttp/css/#{styleBean.currentStyle}/css-images/#{node.userObject.icon}"/>
                        </ice:panelGroup>
                    </f:facet>
                    <f:facet name="content">
                        <ice:panelGroup
                                styleClass="selectedNode#{node.userObject eq treeController.selectedUserObject}"
                                style="display: inline" >
                            <ice:commandLink
                                    actionListener="#{treeController.employeeNodeSelected}">
                                <f:param name="employeeId" value="#{node.userObject.employee.id}" />
                                <ice:outputText id="TreeNode"
                                                value="#{node.userObject.text}"/>
                            </ice:commandLink>
                        </ice:panelGroup>
                    </f:facet>
                </ice:treeNode>
            </ice:tree>
        

        Notice that there is an 'icon' facet, containing an ice:graphicImage component, which specifies a path, which happens to be the path of the /css-images folder of the theme currently being used. It is enough to modify the path of this ice:graphicImage component to some other path in the application. The following markup is an example of an image located at the root of the application folder.

                    <f:facet name="icon">
                        <ice:panelGroup
                                style="display: inline" >
                            <ice:graphicImage
                                 value="/#{node.userObject.icon}"/>
                        </ice:panelGroup>
                    </f:facet>
        

        The getLeafIcon(), getBranchContractedIcon(), and getBranchExpandedIcon() of the IceUserObject class are simply String value holders for future reference. Modifying them doesn't alter the appearance of tree nodes per se. The appearance of tree nodes is only altered when those values are consumed somewhere in the application code, as in the example above.

        Show
        Arturo Zambrano added a comment - - edited It's already possible to use custom icons in ice:tree without having to build from source. The ice:tree example in the component-showcase application has the following markup. <ice:tree id= "tree" value= "#{treeController.model}" var = "node" hideRootNode= " false " hideNavigation= " false " imageDir= "#{styleBean.imageDirectory}" > <ice:treeNode> <f:facet name= "icon" > <ice:panelGroup style= "display: inline" > <ice:graphicImage value= "/xmlhttp/css/#{styleBean.currentStyle}/css-images/#{node.userObject.icon}" /> </ice:panelGroup> </f:facet> <f:facet name= "content" > <ice:panelGroup styleClass= "selectedNode#{node.userObject eq treeController.selectedUserObject}" style= "display: inline" > <ice:commandLink actionListener= "#{treeController.employeeNodeSelected}" > <f:param name= "employeeId" value= "#{node.userObject.employee.id}" /> <ice:outputText id= "TreeNode" value= "#{node.userObject.text}" /> </ice:commandLink> </ice:panelGroup> </f:facet> </ice:treeNode> </ice:tree> Notice that there is an 'icon' facet, containing an ice:graphicImage component, which specifies a path, which happens to be the path of the /css-images folder of the theme currently being used. It is enough to modify the path of this ice:graphicImage component to some other path in the application. The following markup is an example of an image located at the root of the application folder. <f:facet name= "icon" > <ice:panelGroup style= "display: inline" > <ice:graphicImage value= "/#{node.userObject.icon}" /> </ice:panelGroup> </f:facet> The getLeafIcon(), getBranchContractedIcon(), and getBranchExpandedIcon() of the IceUserObject class are simply String value holders for future reference. Modifying them doesn't alter the appearance of tree nodes per se. The appearance of tree nodes is only altered when those values are consumed somewhere in the application code, as in the example above.
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Invalid [ 6 ]
        Arturo Zambrano made changes -
        Resolution Invalid [ 6 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Arturo Zambrano made changes -
        Fix Version/s EE-4.3.0.GA [ 13103 ]
        Arturo Zambrano made changes -
        Summary ice:tree, allow using custom icons without having to build from source ace:tree, allow using custom expanded, contracted and leaf icons for nodes
        Arturo Zambrano made changes -
        Description Currently, it is possible to specify custom leaf, branch-contracted, and branch-expanded icons in ice:tree via the IceUserObject methods setLeafIcon(), setBranchContractedIcon(), and setBranchExpandedIcon(), in which one specifies the name of an image file. However, this image file has to be in the /css-images folder of the theme currently being used. If one wishes to use other images that are not already in the theme, then one has to save those images in that folder and build the icefaces jar.

        It would be more convenient if there was no need to build from source just to be able to use custom images in ace:tree.
        Add the ability to specify custom icons for ace:tree nodes for the expanded, contracted and leaf states.
        Hide
        Arturo Zambrano added a comment -

        Re-casting this JIRA to make the improvement for ace:tree.

        Show
        Arturo Zambrano added a comment - Re-casting this JIRA to make the improvement for ace:tree.
        Hide
        Arturo Zambrano added a comment - - edited

        r52701, r52702: added support for 'icon' facet to ace:tree (ee 3.3 maintenance branch and 4.3 trunk)

        Show
        Arturo Zambrano added a comment - - edited r52701, r52702: added support for 'icon' facet to ace:tree (ee 3.3 maintenance branch and 4.3 trunk)
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #52702 Thu Aug 23 15:52:00 MDT 2018 art.zambrano ICE-11414 added support for 'icon' facet to ace:tree
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tree/TreeRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tree/TreeMeta.java
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Judy Guglielmin made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arturo Zambrano
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: