Tree组件使用指南之六：不同的树节点显示不同的图标

运行环境：JDeveloper 11.1.2.2.0 + Oracle Database 10g Express Edition 10.2.0.1。

默认情况下，树节点的最左边是一个三角形的图标，如何换成我们自己的图标呢？如何让不同的树节点显示不同的图标呢？

重点步骤说明：

1. 创建的自己的Skin文件，去掉默认的图标

关于如何创建Skin文件，请参考《使用CSS为应用动态换肤》。

mySkin.css文件内容如下：

/**ADFFaces_Skin_File / DO NOT REMOVE**/

@namespace af "http://xmlns.oracle.com/adf/faces/rich";

@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

af|tree::collapsed-icon-style

{

background-image: none;

}

af|tree::expanded-icon-style

{

background-image: none;

}

注意，你也可以在这里直接设置你的图标文件，但经过多次测试，我发现效果并不好，并且会报错，很不稳定。

因此这里只是去掉了原有的图标，而在页面中通过af:image组件放置你自己的图标。

2. 在页面中增加自己的图标

<f:facet name="nodeStamp">
<af:switcher id="s1" facetName="#{node.hierTypeBinding.viewDefName}">
<f:facet name="model.DepartmentsView">
<af:panelGroupLayout id="pgl2">
<af:image source="/resources/images/folder.gif" id="i1" inlineStyle="height:14px; width:16px;vertical-align:middle;"/>
<af:outputText value="#{node}" id="ot1"/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="model.EmployeesView">
<af:panelGroupLayout id="pgl3">
<af:image source="/resources/images/file.gif" id="i2" inlineStyle="height:14px; width:16px;vertical-align:middle;"/>
<af:outputText value="#{node}" id="ot2"/>
</af:panelGroupLayout>
</f:facet>
</af:switcher>
</f:facet>

为了能够让不同的节点显示不同的图标，这里使用了af:switch组件，其中facetName="#{node.hierTypeBinding.viewDefName}"，这个值返回的是当前节点的DefName。

该值与每个facet的name值比较，匹配的则显示该facet中的内容。

如果不清楚DefName应该设置成什么值，可以参考页面对应的PageDef文件中每个节点的nodeDefinition定义。

3. 运行

可以看出，原来的三角形图标不见了，并且Department节点和Employee节点的图标是不同的。





Project 下载：ADF_Tree_SelectionListener(4).7z

参考文献：

1. http://javaosdev.blogspot.jp/2011/10/adf-skinning-tree-icons.html
2. https://blogs.oracle.com/jdevotnharvest/entry/how_to_render_different_node
3. https://forums.oracle.com/forums/thread.jspa?messageID=9905610
4. https://forums.oracle.com/forums/thread.jspa?threadID=2184020
5. https://forums.oracle.com/forums/thread.jspa?threadID=1339233
6. https://forums.oracle.com/forums/thread.jspa?messageID=10362899
7. https://cn.forums.oracle.com/forums/thread.jspa?messageID=10350126
8. http://jdevadf.oracle.com/adf-richclient-demo/docs/tagdoc/af_tree.html http://maping930883.blogspot.com/2012/06/adf136tree.html