PDA

View Full Version : Question about namespaces,separation of logic from GUI code, and calling functions.



thenewmexican
3 Aug 2009, 6:14 PM
I'm making a concentrated effort to separate the GUI definitions from the JS logic that calls server side functions.
I have two files.

One file containing the code which communicates with the backend (myLogic.js)
One file containing the GUI definitions, as well as, the call to the function defined in (myLogic.js)

When the code below is executed. I receive
//: Error from FF ErrorConsole
dwrService.doLogin(); is not a function

My browser is FF 3.0.5
ExtDS version is 3.0
OS: Ubuntu Linux 8.04


/*
* Contained in file: myLogic.js
*/

Ext.ns('com.mystuff.dwrService',function(dwrService){

dwrService.authenticateUser = function(userID,password){

DWRMethods.authenticateUser(userID,password,function(result){




});

}
};


dwrService.doLogin = function(){

var userID = 'myUserID';
var password = 'myPassword';

Ext.example.msg("inside doLogin");

window.setTimeout(function(){
com.myStuff.dwrService.authenticateUser(userID,password);
},1000); //: Millis


};

});





/*
* Contained in MyWindowDef.js
*/
MyDesktop.MyWindow = Ext.extend(Ext.app.Module, {
id:'my-win',
init : function(){
this.launcher = {
text: 'MyWindow',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},



var desktop = this.app.getDesktop();
/*
* Attempt a DWR call
*/

window.authenticationResult = com.mystuff.dwrService.doLogin();


var win = desktop.getWindow('my-win');

if(!win){




win = desktop.createWindow({
layout: 'border',
id: 'mystuff-win',
title:'Test-Win',
width:800,
height:500,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true

}) //: End of desktop.createWindow
}//: End of if
win.show();
}//: end of createWindow function def
});

/*
* Contained in index.html
*/
<script type='text/javascript' src='js/medigridsLogic.js'> </script>
<script type="text/javascript" src="js/medigridsGUIDefs.js"></script>



<script type='text/javascript' src='./jsutils/date.js'> </script>
<script type='text/javascript' src='./dwr/engine.js'> </script>
<script type='text/javascript' src='./dwr/util.js'> </script>
<script type='text/javascript' src='./dwr/interface/DWRMethods.js'> </script>






What am I doing wrong.

Thanks in advance.

Lukman
3 Aug 2009, 6:25 PM
The whole of your myLogic.js is wrong. Where did you get the idea of using Ext.ns() like that? Read the API yet?

thenewmexican
3 Aug 2009, 6:43 PM
Thanks for the reply.

This may seem like a foolish question. But. What does "wrong" mean. Which part is "wrong".
And. What type of "wrong" did you categorise this "wrong" code under.

No. I have not read all of the API. But. The code had no syntax errors in Aptana.
And. Also. There are no examples in the source tree that led me to believe that the code
was "wrong".

Lukman
3 Aug 2009, 6:48 PM
No syntax error doesn't mean your code will work like what you want.

Ext.ns() is just an alias of Ext.namespace() so go to API and find out how Ext.namespace() works.

And no it doesn't work like:


Ext.ns('yournamespace', function() { .... });

That is where you got it wrong.

thenewmexican
3 Aug 2009, 6:54 PM
Thanks again Lukman

I know that Ext.ns is an alias for Ext.namespace.
However. I could not find the API docs for Ex.namespace.
Also. If you do a search in the Ext 3.0 API doc. It comes up empty.

And. Again. There are no examples for this scenario. Which kind of surprises me,
as, separating GUI code from logic, is a basic tenet of sound development principles.

saJoshua
3 Aug 2009, 6:58 PM
Hi thenewmexican,

Try the following approach


Ext.ns('com','com.mystuff');

com.mystuff.dwrService = function(){
// private scope
var a = 1;
var someProcessingFunction = function(){
// do some processing
}

return {
// public scope (the members of this object will be available outside of this function.)
processIt : someProcessingFunction,
someOtherProcessing : function(){
// priveledged scope; (this function can access the private scope and is available outside of this function)
a = a + 2;
return a;
}
}
}()


// call using :
com.mystuff.dwrService.processIt()
com.mystuff.dwrService.someOtherProcessing() // will return 3, 5, 7, 9, etc



ping me if you're still stuck.

Lukman
3 Aug 2009, 7:01 PM
However. I could not find the API docs for Ex.namespace.
Also. If you do a search in the Ext 3.0 API doc. It comes up empty.
Oh dear ...

1) Filter the API doc using keyword "ext"
2) Click on the second "Ext" (with the S icon)
3) Scroll down the page on right-hand side to find reference for "namespace" under "Public Methods" section

So much for your basic tenet, knowing and learning how to use and navigate any API doc is my version of basic tenet of software development.

thenewmexican
3 Aug 2009, 7:02 PM
Thanks. I really appreciate your help.

saJoshua
3 Aug 2009, 7:02 PM
Thanks again Lukman

I know that Ext.ns is an alias for Ext.namespace.
However. I could not find the API docs for Ex.namespace.
Also. If you do a search in the Ext 3.0 API doc. It comes up empty.

And. Again. There are no examples for this scenario. Which kind of surprises me,
as, separating GUI code from logic, is a basic tenet of sound development principles.

the first google result for "Ext 3.0 API doc" is http://extjs.com/deploy/dev/docs/

it is absolutely possible in javascript to separate GUI code from logic code. This is very important in managing larger projects in javascript. ExtJs provided namespacing facilities for creating your classes. What you put in them is up to you.

thenewmexican
3 Aug 2009, 7:06 PM
Just one more thing Lukman.

I'm addressing your next to last post. I know that sure, just because there are no syntax errors, doesn't mean your code is going to work as expected. Yes. Thats true, with respect to the dynamic aspects of code. However. In this particular case. This example, that I have is the DEFINITION of stuff, and as such it static.

So. Yes. I expect to find some syntax error or something.

If I'm defining a method in Smalltalk or Java.
Any IDE catches that, easily.

So. Bad argument Lukman.
But. Thanks again. SaJoshua. You make sense.

saJoshua
3 Aug 2009, 7:10 PM
glad I could help.

Some reading that you might find interesting:
http://bit.ly/iHwGO
http://joshua.drivensoftware.com/

Lukman
3 Aug 2009, 7:16 PM
There are more errors in programming than syntax errors. Your code might not have syntax errors but it might have semantic errors. It might have 'this-is-not-how-the-function-works' errors, which best describes your original code.

Ext.namespace() only helps you declare the namespaces. It does not help you define them. Just look at SaJoshua's code to see how he pulled out the namespace's definition out from Ext.ns() function call. You just can't throw all those into Ext.ns() call.

So this won't work:
Ext.ns('namespace.class', function(title) { this.title = title; });

Instead:
Ext.ns('namespace.class');

namespace.class = function(title) { this.title = title; }