Custom Widget

Develop and Deploy Cross-Browser Web Apps .

Custom Widget

Postby sedrok » Wed Jun 11, 2014 2:06 pm

/!\ this widget cannot be used in UIBuilder

Add this script after XUI libs:
javascript code
<script type="text/javascript" src="newLabel.js"></script>


Widget "newLabel.js":
javascript code
Class("xui.UI.newLabel", "xui.UI.Widget",{
Instance:{
MyCustomFunc:function(v){
var ns = this;

ns.each(function(o){
o.getSubNode('CAPTION').css('transform','rotate('+v*Math.floor(Math.random()*10+1)+'deg)');
o.getSubNode('CAPTION').css('font-size','22px');
o.getSubNode('AUTOT').html('<div style="background-color:white;border:1px solid black;"><ul><li>test</li><li>test1</li></ul></div>');
console.log('start');
});

if(!ns.$running){
ns.$running = true; //to prevent several op calls
_.asyRun(function(){
ns.each(function(o){
o.getSubNode('CAPTION').css('transform','rotate(0deg)');
o.getSubNode('CAPTION').css('font-size','12px');
o.getSubNode('AUTOT').html('');
console.log('stop');
ns.$running = false;
});
}, 3000, null, ns);
}

return ns;
}
},
Initialize:function(){
//modify default template from parent
var t = this.getTemplate();
_.merge(t.FRAME.BORDER,{
BOX:{
$order:0,
CAPTION:{
text : '{caption}',
$order:0
},
AUTOT:{
text : '{autot}',
$order:1
}
}
},'all');
this.setTemplate(t);
},
Static:{
Appearances:{
KEY:{
'background-color':'lightgray'
},
BOX:{
'position':'absolute',
'margin':'20px'
}
},
DataModel:{
caption:{
ini:undefined
},
width:120,
height:60
}
}
});


Example usage code, try to type some text into input
javascript code
// 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.Input())
.setHost(host,"ctl_input1")
.setDirtyMark(false)
.setLeft(160)
.setTop(200)
.setWidth(370)
.setDynCheck(true)
.onChange("_ctl_input1_onchange")
);

append((new xui.UI.newLabel())
.setHost(host,"ctl_label")
.setLeft(0)
.setTop(200)
.setWidth(100)
.setCaption('Hello')
);


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 : {},
_ctl_input1_onchange:function (profile,oldValue,newValue){
var ns = this, uictrl = profile.boxing();
ns.ctl_label.MyCustomFunc('50');
}
}
});
Attachments
21212.jpg
21212.jpg (8.92 KiB) Viewed 3488 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