Distributed UI Module function

Develop and Deploy Cross-Browser Web Apps .

Distributed UI Module function

Postby kevinotton » Fri Jul 04, 2014 1:41 pm

Is it possible to call a function in a module that has been loaded using the distributed UI model.

I have a form loading as a module based on a previous selection and see how to interact between index.js and module1.js.

It is my lack of knowledge in JS causing the problem.

Also in CrossUI debug is it possible to get the PHP calls working. I can't find any useful help on debug

Thanks
Kevin
kevinotton
 
Posts: 39
Joined: Thu May 15, 2014 8:18 am
Location: Needham Market, Suffolk, UK

Re: Distributed UI Module function

Postby sedrok » Mon Jul 07, 2014 8:00 am

1) first way to do

Set parent variable when loading (this.$parent = ns):
javascript code
var ns = this;

xui.ComFactory.newCom("App.employees",function(){
this.$parent = ns;
this.show();
});



Call from module1:
javascript code
var ns = this;
ns.$parent.ctl_input1.setValue(123);


/!\ Also i determined that the variable $parent will not be available in '_on_ready' event function in module1, but it will in '_on_render'

2) Second way
Set global variable in on_ready function in application (not in module1):
javascript code
_on_ready:function() {
window.$ns = this;
}


Call from module1 from anywhere:
javascript code
window.$ns.ctl_input1.setValue(123);




PHP calls in debug? I don't know - i don't use Crossui debug , i'm using browser debug.
You can just log your code using console.log() + firebug or calling xui.echo()

Also you can edit your application and test it if you unzip Crossui on web path:
Example:
i have apache installed at c:\xampp\htdocs\
unziped Crossui to c:\xampp\htdocs\XUI
all projects by default are stored in XUI/XUIWorkSpace/..

so to test i need to navigate: http://localhost/XUI/XUIWorkSpace/.../

edit in crossui RAD tool and test in browser just save in RAD and press ctrl+f5 in browser with firebug - http://localhost/XUI/XUIWorkSpace/.../
sedrok
 
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm

Re: Distributed UI Module function

Postby kevinotton » Mon Jul 07, 2014 8:39 am

Thanks for the reply, I will try the calls later.

I do have Xampp installed and run debug in the way you describe.
The debug in CrossUI seems to give greater fault detail and I was curious why the php driven parts that work ok in the browser do not work in the debug screen.

Kevin
kevinotton
 
Posts: 39
Joined: Thu May 15, 2014 8:18 am
Location: Needham Market, Suffolk, UK

Re: Distributed UI Module function

Postby sedrok » Mon Jul 07, 2014 9:09 am

this worked in RAD:

   
// 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.SButton())
.setHost(host,"ctl_sbutton1")
.setLeft(130)
.setTop(70)
.setCaption("click me")
.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.message('test');
xui.Ajax('http://localhost/aaa.php',{},
function(rsp){
console.log(rsp);
},
function(){
alert('error');
}).start();
}
}
});
   


PHP file contains : [1,2,3,4]
Attachments
13123124.jpg
13123124.jpg (191.44 KiB) Viewed 28296 times
sedrok
 
Posts: 26
Joined: Tue Jun 03, 2014 12:50 pm

Re: Distributed UI Module function

Postby kevinotton » Mon Jul 07, 2014 2:31 pm

I am not sure the link is the correct way.

I have index.js with a menu selection to add a device to the map and offer the appropriate menu for the device.

On selecting the map location I need to update the fields in the new module menu or call a function in the loaded module

Kevin
Attachments
module3.jpg
update the loaded modules fields
module3.jpg (24.86 KiB) Viewed 28289 times
module2.jpg
select add device
module2.jpg (20.88 KiB) Viewed 28289 times
module1.jpg
click on map
module1.jpg (14.13 KiB) Viewed 28289 times
kevinotton
 
Posts: 39
Joined: Thu May 15, 2014 8:18 am
Location: Needham Market, Suffolk, UK

Re: Distributed UI Module function

Postby sedrok » Mon Jul 07, 2014 2:51 pm

ok just use global variable (2-nd way)
It can be used in every place of javascript code.

for example:
<a href='#' onclick='window.$ns.ctl_input1.setValue("hello")'>test</a>
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