As stated, everything you did so far sounds good.
I think you're only missing some CSS to be able to see your nodes. You can see it working here
Check out the CSS Panel
.aui-diagram-node-custom .aui-diagram-node-content {
/* Style of your node in the diagram */
}
.aui-diagram-node-custom-icon {
/* Style of your node icon in the nodes lists */
}
Note: Starting from alloy-2.0.0pr6, css classes are no longer prefixed with aui-, so keep that in mind when you start using a newer version. I've put together an example here
Edit: To be able to expose new attributes to the editor panel, the custom field needs to extend the getPropertyModel
method to add the new properties to the model.
getPropertyModel: function() {
var instance = this;
var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
Here you can find an updated example