Can u help me customizing node and relative css of AllouUI DiagramBuilder ?
After a few attempts and thanks above all to the help of the previous posts on the same tool
AlloyUI (diagram-builder) extends
Add custom node to Alloyui DiagramBuilder in JAVA
How to add custom nodes and properties to AlloyUI diagram builder
I managed to create new custom nodes but CSS doesn't work as I expect:
If I modify the NAME attribute of the node, obtaining the application of the style defined by the CSS sheet (only the color at the moment) but I lose enabling the Settings tab.
If I extend the css class diagram-node (.diagramnode;) with the desired background, the change is ignored.
JS:
<script type="text/javascript">
YUI().use('aui-diagram-builder',
function(Y) {
//definizione del nuovo DropDown
Y.CustomDropDownCellEditor = Y.Component
.create({
NAME : 'CustomDropDownCellEditor',
EXTENDS : Y.DropDownCellEditor
});
//definizione del nuovo nodo
Y.DiagramNodeCustomWithDropDown = Y.Component
.create({
NAME : 'diagram-node',
ATTRS : {
type : {
value : 'customTaskWithDropDown'
},
currency : {
validator : Y.Lang.isValue
}
},
EXTENDS : Y.DiagramNodeTask,
prototype : {
initializer : function() {
this.SERIALIZABLE_ATTRS
.push('choseOne');
},
//configura ed inserisce la dropDown
getPropertyModel : function() {
var model = Y.DiagramNodeTask.superclass.getPropertyModel
.apply(this, arguments);
var values = new Y.CustomDropDownCellEditor(
{
options : {
dollar : 'Dollar',
euro : 'Euro',
yen : 'Yen',
gold : 'Gold'
}
});
model
.push({
name : 'Currency',
attributeName : 'currency',
editor : values
});
return model;
}
}
});
//definiziane del secondo nodo custom
Y.DiagramNodeCustomWithTwoMoreField = Y.Component
.create({
NAME : 'diagram-node',
ATTRS : {
type : {
value : 'customWithTwoMoreField'
},
price : {
validator : Y.Lang.isString,
value : 'A Custom default'
},
cost : {
validator : Y.Lang.isString,
value : 'A Custom default'
}
},
EXTENDS : Y.DiagramNodeTask,
prototype : {
getPropertyModel : function() {
var model = Y.DiagramNodeTask.superclass.getPropertyModel
.apply(this,
arguments);
model
.push({
attributeName : 'price',
name : 'Price'
});
model.push({
attributeName : 'cost',
name : 'Cost'
});
return model;
}
}
});
Y.DiagramBuilder.types['customTaskWithDropDown'] = Y.DiagramNodeCustomWithDropDown;
Y.DiagramBuilder.types['customWithTwoMoreField'] = Y.DiagramNodeCustomWithTwoMoreField;
//ORIGINALE
var availableFields = [
....., {
iconClass : 'diagram-node-task-icon',
label : 'Limited Chose',
type : 'customTaskWithDropDown'
}, {
iconClass : 'diagram-node-state-icon',
label : 'Description State',
type : 'customWithTwoMoreField'
} .....
];
new Y.DiagramBuilder({
availableFields : availableFields,
boundingBox : '#DiagramBuilderContainer',
fields : [ {
name : 'HellGate',
type : 'start',
xy : [ 10, 10 ]
} ],
srcNode : '#DiagramBuilderBuilder'
}).render();
});
CSS:
.customdropdowncelleditor-hidden {
display: none;
}
.diagramnodecustomwithdropdown {
background-color: #00FFFF ;
}
.diagramnodecustomwithtwomorefield {
background-color: #FF0090 ;
}
How can I define two different styles for the DiagramNodeCustomWithDropDown and DiagramNodeCustomWithTwoMoreField nodes? I need to define background and border, nothing more for now.
To proceed further I am now trying to save the diagram on my database in json format (logically passing through a form and a servlet)
the obstacle in front of me is: how do I save the result of the JS function on an hidden input: Y.DiagramBuilder().toJSON() ??
perhaps it is useful to know that I am working in Liferay 7.1 ...
Here is my JSP page:
UPDATE:
Here the solution:
NEW UPDATE:
Damn, it's not over yet... and here I really ran out of ideas and can't find support elsewhere:
the conversion to json and the saving on db works but the recovery from json fails with the following error
The script of the diagram Builder is above, and then i leave a json for a nonsense diagram used for the test.
JSON:
Is there anyone who can help me?
LAST UPDATE (SOLUTION): I have published the solution in my comment HERE Have a nice day!