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

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

        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.

          People

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

            Dates

            • Created:
              Updated:
              Resolved: