MVVM tree example to show add/insert/delete/move/drag?

answered 2013-05-13 10:47:00 +0800

benbai
2228 ● 6
http://www.zkoss.org

I tried a simple sample, online demo: ZKTREEMVVM_CRUD

code:

test.zul

<zk>
    <!-- tested with ZK 6.5.1.1 -->
    <window apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('test.TestVM')">
        <hlayout>
            Selected Node (as path):
            <label value="@load(vm.selectedNodePath)" />
        </hlayout>
        <hlayout>
            Add or Append to child:
            <textbox value="@bind(vm.valueToAdd)" />
            <button label="Add" onClick="@command('addValue')" />
            <button label="Append to child" onClick="@command('appendValueToChild')" />
        </hlayout>
        <hlayout>
            <button label="Delete" onClick="@command('removeSelectedNode')" />
        </hlayout>
        <hlayout>
            Update:
            <textbox value="@bind(vm.valueToUpdate)" />
            <button label="Update Value" onClick="@command('updateSelectedNode')" />
        </hlayout>
        <tree id="tree" model="@bind(vm.model)"
            width="600px" height="200px"
            onSelect="@command('keepSelectedNode')">
            <treecols>
                <treecol label="data" />
            </treecols>
            <template name="model" var="node">
                <treeitem>
                    <treerow>
                        <treecell label="@bind(node.data)" />
                    </treerow>
                </treeitem>
            </template>
        </tree>
    </window>
</zk>

TestVM.java

package test;

import java.io.File;
import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.event.SelectEvent;
import org.zkoss.zul.DefaultTreeModel;
import org.zkoss.zul.DefaultTreeNode;
import org.zkoss.zul.Tree;
import org.zkoss.zul.TreeModel;

/**
 * tested with ZK 6.5.1.1
 * 
 * @author benbai
 *
 */
@SuppressWarnings({ "rawtypes", "unchecked" })
public class TestVM {
    File file = new File("C:" + File.separator + "Program Files");
    DefaultTreeModel _model;
    DefaultTreeNode _selectedNode;
    String _valueToAdd;
    String _valueToUpdate;

    public TreeModel<DefaultTreeNode<String>> getModel () {
        DefaultTreeNode root = new DefaultTreeNode(null,
                new DefaultTreeNode[] {new DefaultTreeNode("aaa", (List)null)
        });
        if (_model == null) {
            _model = new DefaultTreeModel<String>(root);
        }
        return _model;
    }
    public void setValueToAdd (String valueToAdd) {
        _valueToAdd = valueToAdd;
    }
    public String getValueToAdd () {
        return _valueToAdd;
    }
    public void setValueToUpdate (String valueToUpdate) {
        _valueToUpdate = valueToUpdate;
    }
    public String getValueToUpdate () {
        return _valueToUpdate;
    }
    public String getSelectedNodePath () {
        StringBuilder sb = new StringBuilder("");
        if (_selectedNode != null) {
            List<DefaultTreeNode> nodes = new ArrayList<DefaultTreeNode>();
            DefaultTreeNode node = _selectedNode;
            while (node.getParent() != null) {
                nodes.add(0, node);
                node = (DefaultTreeNode)node.getParent();
            }
            for (int i = 0; i < nodes.size(); i++) {
                if (i > 0) {
                    sb.append(" - ");
                }
                sb.append(nodes.get(i).getData());
            }
        }
        return sb.toString();
    }
    @Command
    @NotifyChange("selectedNodePath")
    public void keepSelectedNode (@ContextParam(ContextType.TRIGGER_EVENT) SelectEvent event) {
        _selectedNode = ((Tree)event.getTarget()).getSelectedItem().getValue();
    }
    @Command
    @NotifyChange("model")
    public void addValue () {
        addNode(false);
    }
    @Command
    public void appendValueToChild () {
        addNode(true);
    }
    @Command
    @NotifyChange("selectedNodePath")
    public void removeSelectedNode () {
        if (_selectedNode != null) {
            _selectedNode.getParent().remove(_selectedNode);
            _selectedNode = null;
        }
    }
    @Command
    @NotifyChange({"model", "selectedNodePath"}) // 6.5.1 bug, node becomes leaf node after setData
    public void updateSelectedNode () {
        if (_valueToUpdate != null
            && _selectedNode != null) {
            _selectedNode.setData(_valueToUpdate);
        }
    }
    public void addNode (boolean asChild) {
        if (_valueToAdd != null && !_valueToAdd.isEmpty()
            && _selectedNode != null) {
            DefaultTreeNode parent = asChild? _selectedNode : (DefaultTreeNode)_selectedNode.getParent();
            List children = parent.getChildren();
            if (asChild) {
                parent.add(new DefaultTreeNode(_valueToAdd, (List)null));
            } else {
                children.add(children.indexOf(_selectedNode)+1, new DefaultTreeNode(_valueToAdd, (List)null));
            }
        }
    }
}