Add custom components to RAD tool

Write your functional requirement here, be Specific please!

Add custom components to RAD tool

Postby mingodad » Sun May 18, 2014 7:39 am

Hello !

There is a way to add our own custom components to the RAD tool ?

Examples:
1 - We make customize a treegrid with some extra controls and want to reuse it on several places.
2 - We have a generic form with some basic fields and want to reuse/extend it on several places.
3 - We customize a component and want to reuse it in several places.

This functionality already exists or is documented somewhere ?
mingodad
 
Posts: 11
Joined: Fri May 16, 2014 11:23 am

Re: Add custom components to RAD tool

Postby mingodad » Sun May 18, 2014 10:32 am

I did an attempt to extend a widget/component then I realize that there is no documentation about the class system used by xui.
How it works ?
Do we need to call "super" on constructor/initialize from derived classes ?

Is it possible to make the example bellow to work on RAD tool in design/debug mode ?

Here is the code for my experiment:
BaseWidget.js
javascript code
// The default code is a com class (inherited from xui.Com)
Class('App.BaseWidget', '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.SButton())
.setHost(host,"ctl_sbutton0")
.setLeft(260)
.setTop(40)
.setWidth(110)
.setCaption("click me base")
.onClick("_ctl_sbutton0_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 : {},
_ctl_sbutton0_onclick : function (profile, e, src, value) {
var uictrl = profile.boxing();
xui.alert("hi","I'm " + uictrl.getAlias());
}
}
});

index.js
javascript code
// The default code is a com class (inherited from xui.Com)
Class('App', 'App.BaseWidget',{
// 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.SButton())
.setHost(host,"ctl_sbutton1")
.setLeft(30)
.setTop(30)
.setWidth(80)
.setCaption("click me0")
.onClick("_ctl_sbutton1_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 : {},
_ctl_sbutton1_onclick : function (profile, e, src, value) {
var uictrl = profile.boxing();
xui.alert("hi","I'm " + uictrl.getAlias());
}
}
});
Attachments
xui-expected-extending.png
Expected result of the sample project
xui-expected-extending.png (2.43 KiB) Viewed 8205 times
mingodad
 
Posts: 11
Joined: Fri May 16, 2014 11:23 am

Re: Add custom components to RAD tool

Postby support » Mon May 19, 2014 11:42 am

Currently, you can not add custom control into RAD's Tools Box, you can use it in runtime only.

If you want to call parent class's function, you can use "arguments.callee.upper":

javascript code
arguments.callee.upper.apply(this,arguments);

javascript code
iniComponents : function(){
// [[Code created by CrossUI RAD Tools
var host=this, children=arguments.callee.upper.apply(this), append=function(child){children.push(child.get(0));};



But we do not recommend you modify code in " [[Code created by CrossUI RAD Tools".
support
 
Posts: 351
Joined: Sat Apr 27, 2013 9:22 am

Re: Add custom components to RAD tool

Postby mingodad » Mon May 19, 2014 12:31 pm

So how we can not create elements based on another custom element in RAD ?
It's not a nice feature of RAD tool !

Applying your suggestion make it work as expected at runtime, but RAD tool in design mode complain "Can not call method 'apply' of undefined".

Any plans to allow it ?
mingodad
 
Posts: 11
Joined: Fri May 16, 2014 11:23 am

Re: Add custom components to RAD tool

Postby support » Mon May 19, 2014 12:57 pm

No, it's a logic problem. Can you do it in VB/Delphi or VS designer?

Actually, what you did is not to custom a control, but derive xui.Com class. The bigger CrossUI App maybe use many reuse classes, but they are all runtime code.

RAD Tool can't read those runtime code(in another file), especially UI code, it can resolve the code in the current file only.
support
 
Posts: 351
Joined: Sat Apr 27, 2013 9:22 am

Re: Add custom components to RAD tool

Postby mingodad » Mon May 19, 2014 2:06 pm

Yes Lazarus, Delphi can do it they call it "visual form inheritance", also https://github.com/enyojs/ares-project from enyojs allow our custom classes/components to appear on the toolbox by default.

I imagine that the same principle that is used to instantiate base class/components at runtime could also be used by the RAD tool.

Anyway thanks again for your time, attention and great work !
mingodad
 
Posts: 11
Joined: Fri May 16, 2014 11:23 am

Re: Add custom components to RAD tool

Postby support » Tue May 20, 2014 12:46 am

"visual form inheritance" is not a normal class, it must be added some properties and wrapped.

If more customers want to add this function, we can do it in the next version.
support
 
Posts: 351
Joined: Sat Apr 27, 2013 9:22 am

Re: Add custom components to RAD tool

Postby tomy300 » Tue Aug 12, 2014 12:14 am

Yes I would like to see that too in crossUI

Visual C# can do this too, we can create control proprety and method that can be reuse. This will be a very good feature to add.

thanks
tomy300
 
Posts: 70
Joined: Sat Nov 09, 2013 12:27 am


Return to Functional Requirement

Who is online

Users browsing this forum: No registered users and 0 guests

cron