1

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

asked 2013-05-06 09:36:38 +0800

davout gravatar image davout
1435 3 18

Looking through the ZK demos most of the code is based around MVC.

It would be good to have a MMVM example that showed how to accomplish add, insert, delete, move, drag'n drop.

Any volunteers?

delete flag offensive retag edit

Comments

Let me try to post an example on this.

Senthilchettyin ( 2013-05-06 10:04:19 +0800 )edit

I would be interested to see such an example/small talk also.

Col ( 2013-05-07 02:37:37 +0800 )edit

1 Answer

Sort by ยป oldest newest most voted
1

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

benbai gravatar image 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));
            }
        }
    }
}
link publish delete flag offensive edit

Comments

+1 Great stuff benbai. Thanks very much for sharing.

Col ( 2013-05-15 12:34:53 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2013-05-06 09:36:38 +0800

Seen: 111 times

Last updated: May 13 '13

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More