p: TreeNode :自定义TreeNode类型的自定义图标

Question

我运行的是Primefaces 5.3.10，Mojarra 2.2.13，Java8和Tomcat8。

我想有一个具有不同类型的TreeNodes的primefaces树。每种类型的TreeNode都应该使用相应的自定义图标呈现。

我在网上研究了几个例子，但找不到一个可行的解决方案。

我有一个java类TreeModel.java，它提供了一个TreeNode：

public class TreeModel {

    TreeNode root = new DefaultTreeNode("Root", null);

    public TreeNode getRoot(){
        return root;
    }

    public void populizeTree(){
        TreeNode node = new DefaultTreeNode("customType1", "nodeName", root);
        TreeNode subNode = new DefaultTreeNode("customType2", "subNodeName", node);
        TreeNode subNode2 = new DefaultTreeNode("customType3", "subNode2Name", node);
    }
}

和一个描述我的树的CustomTree.xhtml：

<p:tree value="#{TreeModel.root}" 
     var="node" 
     highlight="true"
     dynamic="true"
     selectionMode="single"
     id="modultree"
     style="width: 980px;">
      <p:treeNode type="customType1" icon="icon-modul">
          <h:outputText value="#{node}"/>
      </p:treeNode>
      <p:treeNode type="customTyp2" icon="icon-konto">
          <h:outputText value="#{node}"/>
      </p:treeNode>
      <p:treeNode type="customType3" icon="icon-exam">
          <h:outputText value="#{node}"/>
      </p:treeNode>
</p:tree>

为了为不同的TreeNode类型显示不同的图标，我还创建了一个名为TreeNode.css的css文件：

.icon-modul {
    background: transparent url("#{resource['images:hio-modul.png']}")!important;
    height: 16px;
    width: 16px;
}

.icon-konto {
    background: transparent url("#{resource['images:hio-konto.png']}")!important;
    height: 16px;
    width: 16px;
}

.icon-exam {
    background: transparent url("#{resource['images:hio-pruefung.png']}")!important;
    height: 16px;
    width: 16px;
}

并将png文件放在目录/myApp/resources/images/中。

我尝试了一些变化，但无论哪种方式，自定义图标都不会被渲染。

我做错了什么？

Answer 1

Kukeltje的提示解决了我的问题。使用Firebug，我可以看到css应该是这样的

.ui-widget-content .icon-exam {
    background-image: url("../images/hio-pruefung.png") !important;
    height: 16px;
    width: 16px;
}

我找不到使用以下语法引用图像的方法:url(“#{resource‘’images:hio-pruefun.png‘}”)