Wednesday, March 17, 2010

Forays into JavaScript development: Aptana -- JavaScript plug-in for eclipse

As I have been reintroducing myself to JavaScript development I have been on the prowl for any good JavaScript editors and I think I may have found one. It is an eclipse plug-in called aptana. Some of the features it provides are:
  • Syntax Highlighting

  • Code Completion (In a single JavaScript file or across multiple in the same folder)… NOTE: JSDT allows code completion within a single file, but breaks down when you have multiple JavaScript files.

  • Validation

  • Support for jQuery, Prototype, YUI, Dojo, etc
I have found that it does work well, but there are some caveats when it comes to code completion. In general it requires that you format your classes in a particular way in order for code completion to work properly. For example when using a namespace (without a class (JSON style)) the following works (when you have one JavaScript file or multiple):

Example #1 that works

var foo = {
myMethod: function(){
},
anotherMehtod: function(){
}
}

Also, if you setup all of your methods to be global then it will pick up those methods as well (not recommended).
Another way you can do it is to create a class such as:

Example #2 that works


function foo() {
}
function bar(a, b){
};
foo.prototype.b = bar;
var x = new foo();
x.b

In the above example the key parts to recognize is that you have to define the class and function separately and then relate them using prototype as in foo.prototype.b = bar, where b will be the name of the method when accessing it via the class and bar is the name of the original method. Although I don’t like the extra work required to setup the class, since it provides me with code completion (a feature I dearly love) I find the pain to be sufferable.
So now that I have told you what works, what doesn’t work when declaring namespaces and functions? I have provided examples of those below:

Example #1 that doesn’t work


var foo = new function(value){
this.myMethod= function(){
}
}


Example #2 that doesn’t work


function foo(value){
this.myMethod= function(){
}
}


Example #3 that doesn’t work


var foo = new function() {
}
function bar(a, b){
};
foo.prototype.b = bar;
var x = new foo();
x.b

Saturday, March 13, 2010

jQuery -- Returning XML with ajax

Over the past week I have been working on a project where I am consuming RESTful web services with jQuery's ajax feature (http://api.jquery.com/jQuery.ajax/). Because I don't have a lot of experience with jQuery and RESTful web services I decided that I would use jsMockito (http://jsmockito.org/) and Qunit (jQuery's unit testing framework) to verify that I can successfully consume the web service with jQuery. When I was running my unit tests I started seeing weird error messages in firefox. The error was something like:

XML parsing error: no element found {file name} Line Number 1, Column 1

I started up fiddler in firefox so that I could see the data being sent to and from the server and was able to identify that the XML was actually being returned and that it was valid XML. After some additional research online I found out that jQuery doesn't allow you to retrieve XML from a domain other than teh one you are running on. This means that if you are running your application on http://myCompany then you will not be able to retrieve data (using XML as the dataType) from http://anotherCompany/. After additional analysis I found that you can set the dataType to either script or json in order to be able to retrieve data from a service that is not on the same domain.