[컴포넌트 개발] JsTree

DOM 요소의 구성에 민감한 컴포넌트

package com.abc.widget;

import java.util.ArrayList;
import java.util.List;

import com.abc.activitytype.view.AnalysisActivityView;
import org.metaworks.annotation.Face;


public class JsTree {

    public JsTree () {

        this.SetData();
    }

    private List<TreeNode> nodeList;

    public List<TreeNode> getNodeList() { return nodeList; }
    public void setNodeList(List<TreeNode> nodeList) { this.nodeList = nodeList; }

    private void SetData() {

        TreeNode tn = new TreeNode("Hive");
        tn.setChildNode(new ArrayList<TreeNode>());

        for (int i = 1; i <= 3; i++) {

            TreeNode tnChild = new TreeNode("Child " + i);

            tn.getChildNode().add(tnChild);
        }

        TreeNode tn2 = new TreeNode("PostgreSQL");
        tn2.setChildNode(new ArrayList<TreeNode>());

        for (int i = 1; i <= 3; i++) {

            TreeNode tnChild = new TreeNode("Child " + i);

            tnChild.setObject((new AnalysisActivityView()).createSymbol());

            tn2.getChildNode().add(tnChild);
        }

        this.setNodeList(new ArrayList<TreeNode>());

        this.getNodeList().add(tn);
        this.getNodeList().add(tn2);
    }

}

package com.abc.widget;

import java.util.List;

import org.metaworks.annotation.Children;
import org.metaworks.annotation.Face;
import org.metaworks.annotation.Name;

@Face(ejsPathForArray="dwr/metaworks/genericfaces/CleanArrayFace.ejs")
public class TreeNode {

    public TreeNode() { }
    public TreeNode(String name) { this.setName(name); }

    private String name;
    private List<TreeNode> childNode;

    @Name
    public String getName() { return name; }
    public void setName(String name) { this.name = name; }

    @Children
    public List<TreeNode> getChildNode() { return childNode; }
    public void setChildNode(List<TreeNode> childNode) { this.childNode = childNode; }


    Object object;
    public Object getObject() {
        return object;
    }
    public void setObject(Object object) {
        this.object = object;
    }


}

<div id="jstree_<%=objectId%>">


    <ul>

        <%=fields.nodeList.here()%>
    </ul>
</div>

TreeNode.ejs :

li 요소로 외부에 div 로 감싸지는 기본 메타웍스 로직을 타면 안됨. div 로 단위 객체 영역을 포장하는 기본 메타웍스 기능을 사용하지 않고 직접 요소를 선언해주기 위해서는 첫 라인에 를 선언해준다.

<!--replace-->

<li Id="objDiv_<%=objectId%>">

    <%=value.name%>

    <%
    if(value.childNode){

    %><ul>
        <%=fields.childNode.here()%>
    </ul><%
    }

    %>

</li>

var com_abc_widget_JsTree = function (objectId, className) {

    var object    = mw3.objects[objectId];
    var dataList  = object.listGrid;
    var columns   = object.columnNames;
    var fieldName = eval(object.fieldName);
    var title     = object.title;

    $('#jstree_' + objectId).jstree();


}