calc workflow, control-name-independent, available statuses

Develop and Deploy Cross-Browser Web Apps .

calc workflow, control-name-independent, available statuses

Postby sedrok » Mon Jun 30, 2014 3:22 pm

Example shows how to calculate available statuses for transition.

Enter status name into 'Input' control and press 'show'

Blue - is anavailable blocks
Yellow - current status
Green - available for transition

   
// The default code is a com class (inherited from xui.Com)
Class('App', 'xui.Com',{
// Ensure that all the value of "key/value pair" does not refer to external variables
Instance:{
// To initialize instance(e.g. properties)
initialize : function(){
// To determine whether or not the com will be destroyed, when the first UI control be destroyed
this.autoDestroy = true;
// To initialize properties
this.properties = {};
},
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=[], append=function(child){children.push(child.get(0));};

append((new xui.UI.SVGPaper())
.setHost(host,"ctl_svgpaper1")
.setLeft(40)
.setTop(120)
.setWidth(650)
.setHeight(430)
);

host.ctl_svgpaper1.append((new xui.svg.rectComb())
.setHost(host,"ctl_rectcomb1")
.setSvgTag("FlowChart:Process")
.setAttr({"KEY":{"x":230, "y":90, "width":160, "height":40, "fill":"90-#5198D3-#A1C8F6", "stroke":"#004A7F"}, "TEXT":{"text":"В очереди", "fill":"#fff", "font-size":"12px", "font-weight":"bold"}})
.onTextClick("_ctl_rectcomb1_ontextclick")
);

host.ctl_svgpaper1.append((new xui.svg.rectComb())
.setHost(host,"ctl_rectcomb2")
.setSvgTag("FlowChart:Process")
.setAttr({"KEY":{"x":250, "y":250, "width":120, "height":40, "fill":"90-#5198D3-#A1C8F6", "stroke":"#004A7F"}, "TEXT":{"text":"Тестирование", "fill":"#fff", "font-size":"12px", "font-weight":"bold"}})
);

host.ctl_svgpaper1.append((new xui.svg.rectComb())
.setHost(host,"ctl_rectcomb3")
.setSvgTag("FlowChart:Process")
.setAttr({"KEY":{"x":250, "y":170, "width":120, "height":40, "fill":"90-#5198D3-#A1C8F6", "stroke":"#004A7F"}, "TEXT":{"text":"Разработка", "fill":"#fff", "font-size":"12px", "font-weight":"bold"}})
);

host.ctl_svgpaper1.append((new xui.svg.rectComb())
.setHost(host,"ctl_rectcomb4")
.setSvgTag("FlowChart:Process")
.setAttr({"KEY":{"x":230, "y":330, "width":160, "height":40, "fill":"90-#5198D3-#A1C8F6", "stroke":"#004A7F"}, "TEXT":{"text":"Завершено", "fill":"#fff", "font-size":"12px", "font-weight":"bold"}})
);

host.ctl_svgpaper1.append((new xui.svg.rectComb())
.setHost(host,"ctl_rectcomb5")
.setSvgTag("FlowChart:Process")
.setAttr({"KEY":{"x":250, "y":10, "width":120, "height":40, "fill":"90-#5198D3-#A1C8F6", "stroke":"#004A7F"}, "TEXT":{"text":"Старт", "fill":"#fff", "font-size":"12px", "font-weight":"bold"}})
);

host.ctl_svgpaper1.append((new xui.svg.connector())
.setHost(host,"ctl_connector1")
.setSvgTag("Connectors:Straight")
.setAttr({"KEY":{"path":"M,310,50L,310,90", "stroke":"#004A7F", "stroke-width":2, "arrow-start":"oval-midium-midium", "arrow-end":"classic-wide-long"}, "BG":{"stroke":"#fff", "stroke-width":4}})
.setFromObj("ctl_rectcomb5")
.setFromPoint("bottom")
.setToObj("ctl_rectcomb1")
.setToPoint("top")
);

host.ctl_svgpaper1.append((new xui.svg.connector())
.setHost(host,"ctl_connector2")
.setSvgTag("Connectors:Straight")
.setAttr({"KEY":{"path":"M,310,130L,310,170", "stroke":"#004A7F", "stroke-width":2, "arrow-start":"oval-midium-midium", "arrow-end":"classic-wide-long"}, "BG":{"stroke":"#fff", "stroke-width":4}})
.setFromObj("ctl_rectcomb1")
.setFromPoint("bottom")
.setToObj("ctl_rectcomb3")
.setToPoint("top")
);

host.ctl_svgpaper1.append((new xui.svg.connector())
.setHost(host,"ctl_connector55")
.setTagVar({"form":"form1"})
.setSvgTag("Connectors:flowchart")
.setAttr({"KEY":{"path":"M,230,110H,200V,350H,230", "stroke":"#004A7F", "stroke-width":2, "arrow-start":"oval-midium-midium", "arrow-end":"classic-wide-long"}, "BG":{"stroke":"#fff", "stroke-width":4}})
.setType("flowchart")
.setFromObj("ctl_rectcomb1")
.setFromPoint("left")
.setToObj("ctl_rectcomb4")
.setToPoint("left")
);

host.ctl_svgpaper1.append((new xui.svg.connector())
.setHost(host,"ctl_connector56")
.setSvgTag("Connectors:flowchart")
.setAttr({"KEY":{"path":"M,370,190H,400V,270H,370", "stroke":"#004A7F", "stroke-width":2, "arrow-start":"oval-midium-midium", "arrow-end":"classic-wide-long"}, "BG":{"stroke":"#fff", "stroke-width":4}})
.setType("flowchart")
.setFromObj("ctl_rectcomb3")
.setFromPoint("right")
.setToObj("ctl_rectcomb2")
.setToPoint("right")
);

host.ctl_svgpaper1.append((new xui.svg.connector())
.setHost(host,"ctl_connector57")
.setSvgTag("Connectors:flowchart")
.setAttr({"KEY":{"path":"M,250,270H,220V,190H,250", "stroke":"#004A7F", "stroke-width":2, "arrow-start":"oval-midium-midium", "arrow-end":"classic-wide-long"}, "BG":{"stroke":"#fff", "stroke-width":4}})
.setType("flowchart")
.setFromObj("ctl_rectcomb2")
.setFromPoint("left")
.setToObj("ctl_rectcomb3")
.setToPoint("left")
);

host.ctl_svgpaper1.append((new xui.svg.connector())
.setHost(host,"ctl_connector58")
.setSvgTag("Connectors:Straight")
.setAttr({"KEY":{"path":"M,310,290L,310,330", "stroke":"#004A7F", "stroke-width":2, "arrow-start":"oval-midium-midium", "arrow-end":"classic-wide-long"}, "BG":{"stroke":"#fff", "stroke-width":4}})
.setFromObj("ctl_rectcomb2")
.setFromPoint("bottom")
.setToObj("ctl_rectcomb4")
.setToPoint("top")
);

append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton334")
.setLeft(40)
.setTop(70)
.setCaption("show")
.onClick("_ctl_sbutton334_onclick")
);

append((new xui.UI.Input())
.setHost(host,"ctl_input3")
.setDirtyMark(false)
.setLeft(40)
.setTop(30)
.setValue("В очереди")
);

append((new xui.UI.SButton())
.setHost(host,"ctl_sbutton905")
.setLeft(120)
.setTop(70)
.setCaption("clear")
.onClick("_ctl_sbutton905_onclick")
);

return children;
// ]]Code created by CrossUI RAD Tools
},
// Give a chance to load other com
iniExComs : function(com, threadid){
},
// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
},
// This instance's events
events : {"onRender":"_com_onrender"},
_com_onrender:function (com,threadid){
window.$ns = this;
},
_ctl_rectcomb1_ontextclick:function (profile,e,src){
var ns = this, uictrl = profile.boxing();
xui.echo(ns.ctl_rectcomb1.getAttr().KEY.fill);
},
_ctl_sbutton334_onclick:function (profile,e,src,value){
var ns = this, uictrl = profile.boxing();
ns._ctl_sbutton905_onclick();
var cur_stat = ns.ctl_input3.getValue(); //'В очереди';
var cur_stat_obj;
_.each(ns,function(o,i){
if(i.indexOf('ctl_rectcomb') === 0 && o.getAttr().TEXT.text == cur_stat){
var old_TEXT = o.getAttr();
old_TEXT.KEY.fill = '90-#AAA808:0-#AAA808:100';
o.setAttr('KEY',old_TEXT.KEY);
cur_stat_obj = o.getAlias();
return;
}
});

_.each(ns,function(o,i){
if(i.indexOf('ctl_connector') === 0 && o.getFromObj() == cur_stat_obj){
var oo = ns[o.getToObj()];
var old_TEXT = oo.getAttr();
old_TEXT.KEY.fill = '90-#249200:0-#249200:100';
old_TEXT.KEY.cursor = 'pointer';
old_TEXT.TEXT.cursor = 'pointer';
oo.setAttr('KEY',old_TEXT.KEY);
oo.setAttr('TEXT',old_TEXT.TEXT);
}
});
},
_ctl_sbutton905_onclick:function (profile,e,src,value){
var ns = this;
_.each(ns,function(o,i){
if(i.indexOf('ctl_rectcomb') === 0){
var old_TEXT = o.getAttr();
old_TEXT.KEY.fill = '90-#5198D3-#A1C8F6';
old_TEXT.KEY.cursor = 'default';
old_TEXT.TEXT.cursor = 'default';
o.setAttr('KEY',old_TEXT.KEY);
o.setAttr('TEXT',old_TEXT.TEXT);
}
});
}
}
});
   
Attachments
45234t4efeg.jpg
Blue - is anavailable blocks
Yellow - current status
Green - available for transition
45234t4efeg.jpg (27.3 KiB) Viewed 3427 times
34534g453.jpg
Blue - is anavailable blocks
Yellow - current status
Green - available for transition
34534g453.jpg (29.89 KiB) Viewed 3428 times
sedrok
 
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm

Return to CrossUI for Web Apps

Who is online

Users browsing this forum: No registered users and 0 guests

cron