JSF Tree 组件之 rich:tree

      现在有多少人在用JSF，没有办法调查，只知道07年到09年市场上介绍JSF有关的书籍总共就10本左右，10年没有出新书，框架无好坏，适用就好。有缘在过去的一个小项目中使用，并且升级后的版本中也在使用。

      设计一个树要考虑一下几个问题：

      1、输入什么类型数据结构

      2、采用什么方式刷新

      3、展现（JSF已经帮助我们完成）

      这里我们看看JSF Tree的基础组件，rich:tree标签

输入数据：org.richfaces.model.TreeNode

 ... private TreeNodeImpl<String> stationRoot = new TreeNodeImpl<String>(); private TreeNodeImpl<String> stationNodes = new TreeNodeImpl<String>(); private String[] kickRadioFeed = { "Hall & Oates - Kiss On My List", "David Bowie - Let's Dance", "Lyn Collins - Think (About It)", "Kim Carnes - Bette Davis Eyes", "KC & the Sunshine Band - Give It Up" }; ... stationRoot.setData("KickRadio"); stationNodes.addChild(0, stationRoot); for (int i = 0; i < kickRadioFeed.length; i++){ TreeNodeImpl<String> child = new TreeNodeImpl<String>(); child.setData(kickRadioFeed[i]); stationRoot.addChild(i, child); } ...

展现：

... <rich:tree value="#{stations.stationNodes}" var="station"> <rich:treeNode> <h:outputText value="#{station}" /> </rich:treeNode> </rich:tree> ...

 

输入数据：stations.xml

<?xml version="1.0"?> <station name="KickRadio"> <feed date="today"> <song time="07:00">Hall & Oates - Kiss On My List</song> <song time="07:03">David Bowie - Let's Dance</song> <song time="07:06">Lyn Collins - Think (About It)</song> <song time="07:10">Kim Carnes - Bette Davis Eyes</song> <song time="07:15">KC & the Sunshine Band - Give It Up</song> </feed> </station>

 

初始化

... private TreeNode data; ... FacesContext context = FacesContext.getCurrentInstance(); data = XmlTreeDataBuilder.build(new InputSource(getClass().getResourceAsStream("stations.xml"))); ...

 

展现

... <rich:tree id="treeXML" value="#{stations.data}" var="vardata"> <rich:treeNode> <h:outputText value="#{vardata.attributes['name']}" /> <h:outputText value="#{vardata.attributes['date']}" /> <h:outputText value="#{vardata.attributes['time']}" /> <h:outputText value=" #{vardata.text}" /> </rich:treeNode> </rich:tree> ...

 

输入数据：list

... <h:form> <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> <rich:treeNode type="artist" iconLeaf="/images/tree/singer.png" icon="/images/tree/singer.png"> <h:outputText value="#{item.name}" /> </rich:treeNode> <rich:treeNode type="album" iconLeaf="/images/tree/disc.png" icon="/images/tree/disc.png"> <h:outputText value="#{item.title}" /> </rich:treeNode> <rich:treeNode type="song" iconLeaf="/images/tree/song.png" icon="/images/tree/song.png"> <h:outputText value="#{item.title}" /> </rich:treeNode> </rich:tree> </h:form> ...

 

是不是比较简单，和我们c标签里循环比较类似。上面都没有说明树如何刷新的问题，richfaces 的 rich:tree 支持三种模式：ajax/client/server

<h:form> <rich:tree switchType="client" style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> <rich:treeNode type="artist" iconLeaf="/images/tree/singer.gif" icon="/images/tree/singer.gif"> <h:outputText value="#{item.name}" /> </rich:treeNode> <rich:treeNode type="album" iconLeaf="/images/tree/disc.gif" icon="/images/tree/disc.gif"> <h:outputText value="#{item.title}" /> </rich:treeNode> <rich:treeNode type="song" iconLeaf="/images/tree/song.gif" icon="/images/tree/song.gif"> <h:outputText value="#{item.title}" /> </rich:treeNode> </rich:tree> </h:form>

 

默认是Ajax模式，我们可以配置： switchType="client"或 switchType="server"