java - Zk:如何创建具有数据绑定(bind)交互的 "load on demand"树？

Question

我们想以 MVVM 模式创建一棵树。

这棵树应该有 2 个通过参数传递的目录。 我们的目标是创建一个目录浏览器，我们希望在打开子目录时能够“按需加载”，以获得更好的性能。

目前，我们在文档中找到了示例，但它不完整:

public class TreeSelectionVM {

    private TreeModel<TreeNode<String>> itemTree;
    private String pickedItem;
    //omit getter and setter for brevity
}

<window apply="org.zkoss.bind.BindComposer"
    viewModel="@id('vm') @init('org.zkoss.reference.developer.mvvm.collection.TreeSelectionVM')">
    <tree id="tree" model="@bind(vm.itemTree) " width="600px"
    selectedItem="@bind(vm.pickedItem)">
        <treecols>
            <treecol label="name" />
            <treecol label="index" />
        </treecols>
        <template name="model" var="node" status="s">
            <treeitem open="@bind(node.open)">
                <treerow>
                    <treecell label="@bind(node.data)" />
                    <treecell label="@bind(s.index)" />
                </treerow>
            </treeitem>
        </template>
    </tree>
</window>

我们应该管理 onOpen 事件吗？或者我们应该实现 TreeModel 和 TreeNode 方法(getChild & co)？

谢谢。

Answer 1

这是一个更完整的 zk mvvm 树示例，它类似于按需加载的目录浏览器:

https://github.com/simbo1905/zktreemvvm

只需使用“git clone”检查它，然后运行它:

mvn -Djetty.port=8080 package jetty:run

代码将在给定端口上启动自己的jetty服务器。

它使用 Apache Commons VFS作为文件系统的抽象，而不是使用原始的 java.io.File ，后者更难模拟和单元测试。默认情况下，代码显示一个 ZK 屏幕来浏览 commons-vfs2-2.0.jar 的内部，就好像它是常规文件和文件夹一样。只需将 ViewModel 类中的 FILE_SYSTEM_URI uri 更改为文件位置(例如“file:///some/path/”)即可查看常规文件系统。

zul 页面包含一棵树，并将其模型绑定(bind)到 vm.treeModel，并将 selectedItem 事件绑定(bind)到 vm.pickedItem 方法:

<?xml version="1.0" encoding="UTF-8"?>
<zk>
    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('org.github.simbo1905.zktreemvvm.CommonsVfs220ViewModel')">
        <tree model="@load(vm.treeModel)" selectedItem="@bind(vm.pickedItem)">
            <treecols>
                <treecol label="name" />
                <treecol label="index" />
            </treecols>
            <template name="model" var="node" status="s">
                <treeitem>
                    <treerow>
                        <treecell label="@bind(node) @converter('org.github.simbo1905.zktreemvvm.NodeConverter')" />
                        <treecell label="@bind(s.index)" />
                    </treerow>
                </treeitem>
            </template>
        </tree>
    </window>
</zk>

@Converter 对树模型中保存的 FileObject 数据进行友好渲染。

实际的 ViewModel 没有做太多事情，只是保存 selectedItem 事件处理程序(除了日志之外什么都不做)并提供对 TreeModel 的访问:

public TreeModel<FileObject> getTreeModel() {
    if (treeModel == null) {
        try {
            FileSystemManager fsManager = VFS.getManager();
            FileObject fo = fsManager.resolveFile( FILE_SYSTEM_URI );
            treeModel = new CachingVfsTreeModel(fo);
        } catch (FileSystemException e) {
            throw new IllegalArgumentException(String.format("Could not open VFS uri: %s",FILE_SYSTEM_URI),e);
        }
        }
    return treeModel;
}

主要工作是在 VfsTreeModel 类中，它扩展了 AbstractTreeModel 并定义了强制方法

public class VfsTreeModel extends AbstractTreeModel<FileObject> {

// __ snip __

@Override
public FileObject getChild(FileObject parent, int index) {
    log.info(String.format("%s getChild on %s with index %s", level(parent), innerName(parent), index));
    FileObject child = null;
    try {
        FileObject[] children = parent.getChildren();
        child = children[index];
    } catch (FileSystemException e) {
        throw new IllegalArgumentException(e);
    }
    return child;
}

@Override
public int getChildCount(FileObject node) {
    int childCount = 0;
    try {
        FileType type = node.getType();
        if( type == FileType.FOLDER ){
            childCount = node.getChildren().length;
        }
    } catch (FileSystemException e) {
        throw new IllegalArgumentException(e);
    }
    log.info(String.format("%s getChildCount on %s returning %s",level(node),innerName(node), childCount));
    return childCount;
}

@Override
public boolean isLeaf(FileObject node) {
    boolean isLeaf = false;
    try {
        FileType type = node.getType();
        isLeaf = (type == FileType.FILE );
    } catch (FileSystemException e) {
        throw new IllegalArgumentException(e);
    }
    log.info(String.format("%s isLeaf on %s returning %s", level(node),innerName(node), isLeaf));
    return isLeaf;
}

此错误跟踪器中建议覆盖 getPath，以防止框架进行大量其他调用来找出该信息:

http://tracker.zkoss.org/browse/ZK-1278

该方法被实现为遍历根:

@Override
public int[] getPath(FileObject node) {
    List<Integer> paths = new ArrayList<Integer>();
    try {
        FileObject parent = node.getParent();
        while (parent != null && parent.getType().equals(FileType.FOLDER)) {
            FileObject[] children = parent.getChildren();
            for( int index = 0; index < children.length; index++){
                FileObject c = children[index];
                if( node.equals(c)){
                    paths.add(index);
                    break;
                }
            }
            node = parent;
            parent = node.getParent();
        }
    } catch (FileSystemException e) {
        throw new IllegalArgumentException(e);
    }
    int[] p = new int[paths.size()];
    for( int index = 0; index < paths.size(); index++){
        p[index] = paths.get(p.length - 1 - index); // reverse
    }
    log.info(String.format("%s getPath on %s",level(node),innerName(node)));
    return p;
}

在以下树模型文档和“海量数据”文档中建议缓存:

http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/Model/Tree_Model

http://books.zkoss.org/wiki/ZK%20Developer%27s%20Reference/Performance%20Tips/Listbox,%20Grid%20and%20Tree%20for%20Huge%20Data/Implement%20ListModel%20and%20TreeModel

因此，在示例代码中，ViewModel 创建了 VfsViewModel 的缓存子类。刷新页面将创建新的对象并让缓存被垃圾收集，这对于本示例来说可能已经足够了。