在JAVA中向Alloyui DiagramBuilder添加自定义节点

时间:2015-10-27 07:40:47

标签: java alloy-ui

我一直在使用this example与Alloyui制作图表,但我找不到在 JAVA 中制作自定义节点的方法。

我试过简单地将它添加到AvaliableFields中,但似乎不起作用:

diagramBuilder.setAvailableFields(
    new NodeType(
         "diagram-node-custom-icon",
         "Custom",
         "custom"
     ));

我已经在另一个例子中直接在javascript中完成了这项工作:

 Y.DiagramNodeCustom = Y.Component.create({
        NAME: 'diagram-node',

        ATTRS: {
            type: {
                value: 'custom'
            },
            myAtt: {
                validator: Y.Lang.isString,
                value: ''
            },
            myAtt2: {
                validator: Y.Lang.isString,
                value: ''
            }
        },

        EXTENDS: Y.DiagramNodeTask,

        prototype: {
            getPropertyModel: function () {
                var instance = this;

                var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);

                model.push({
                    attributeName: 'myAtt',
                    name: '123'
                });

                model.push({
                    attributeName: 'myAtt2',
                    name: '456'
                });

                return model;
            }
        }
    });

但我只想触摸java部分。有任何想法吗?

2 个答案:

答案 0 :(得分:0)

好像这个加载项不接受自定义节点,所以我正在使用Javascript。

答案 1 :(得分:0)

这是an example,我希望它可以帮到你:

<a href="www.footester.com/foofootestest">Test Environment #1</a>
<div class="container">
  <div class="alert alert-info">
    <strong>Note: The testers are not using this link as a part of their test environment!</strong>
  </div>
</div>
<a href="www.footester.com/foofootestest">Test Environment #1</a>
<div class="container">
  <div class="alert alert-info">
    <strong>Note: The testers are not using this link as a part of their test environment!</strong>
  </div>
</div>
<a href="www.footester.com/foofootestest">This does not get Alert</a>
<a href="www.footester.com/foofootestest">Test Environment #1</a>
<div class="container">
  <div class="alert alert-info">
    <strong>Note: The testers are not using this link as a part of their test environment!</strong>
  </div>
</div>
var Y = YUI().use(
    'aui-diagram-builder',

function (Y) {

    Y.DiagramNodeCustom = Y.Component.create({
        NAME: 'diagram-node',

        ATTRS: {
            type: {
                value: 'custom'
            },
            customAttr: {
                validator: Y.Lang.isString,
                value: 'A Custom default'
            }
        },

        EXTENDS: Y.DiagramNodeTask,

        prototype: {
            getPropertyModel: function () {
                var instance = this;

                var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);

                model.push({
                    attributeName: 'customAttr',
                    name: 'Custom Attribute'
                });

                return model;
            }
        }
    });

    Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;

    var availableFields = [{
        iconClass: 'diagram-node-start-icon',
        label: 'Start',
        type: 'start'
    }, {
        iconClass: 'diagram-node-task-icon',
        label: 'Task',
        type: 'task'
    }, {
        iconClass: 'diagram-node-custom-icon',
        label: 'Custom',
        type: 'custom'
    }, {
        iconClass: 'diagram-node-end-icon',
        label: 'End',
        type: 'end'
    }];

    diagram = new Y.DiagramBuilder({
        availableFields: availableFields,
        boundingBox: '#myDiagramContainer',
        srcNode: '#myDiagramBuilder'
    }).render();
});
.diagram-node-custom .diagram-node-content {
    background: url(http://a.deviantart.net/avatars/m/e/mercedes77.gif?5) no-repeat scroll center transparent;
}
.diagram-node-custom-icon {
    background: url(http://dribbble.s3.amazonaws.com/users/1266/screenshots/213334/emoticon-0188-nyancat.gif) no-repeat scroll center transparent;
}

另见https://github.com/mstahv/diagram-builder