Vista Sidebar Gadget for Cruise Control.NET - Explained

My previous post was about my Vista Sidebar Gadget for Cruise Control.NET. Today I'll drop few lines about the gadget source code.
As you see on the diagram in the previous post, the gadget is making http requests to a home made xml web service in order to get the status of the projects registered in the CC.NET service. The requests are performed with the help of the XmlHttpRequest object. The javascript code looks like this:

1  xmlHttp = new XMLHttpRequest();
2  var url = System.Gadget.Settings.read("url");
3  xmlHttp.open("POST",url,true);
4  xmlHttp.setRequestHeader("Content-Type","text/xml"); 
5  xmlHttp.setRequestHeader("SOAPAction","
       http://tempuri.org/GetProjectStatuses");
6  xmlHttp.onreadystatechange=HandleResponse;
7  xmlHttp.send(soapEnvelop);

This sinpset creates a fresh XMLHttpRequest instance and performs the web service invocation.

• Line 2 reads the Url of the web service from the gadget's setting
• Line 3 prepares the request. The "true" argument specifies that it will be an async request.
• Line 6 passes a function to the XMLHttpRequest instance , which will handle the response from the web service, when available - that's because we are making an async request.
• Lines 4 and 5 prepare Http headers to send with the request
• and finally Line 7 sends the envelop

One may ask the following questions:

• How do you know what the lines 3,4, and 5 should looks like?
• What the content of the soapEnvelop variable should be?

In order to get the answers of these two questions you should browse the url of the xml web service(hopefully it is a .NET web service) .You will see the list of the methods(actions) provided by this web service:

Clicking the GetProjectStatuses method will bring the following screen:

This screen actually shows you what the 3,4 and 5th lines should contain. The first gray area shows what request should be sent. You just may copy the xml content provided and paste it in your source code. This is the content that should be placed in the soapEnvelop variable.

The second gray area shows what the response from the service looks like. It is obvious from the picture, that we will get a list of strings. So, we may use an Xml parser to navigate to the GetProjectsStatusesResult tag to extract its content.This is what the HandleResponse function does:

1 function HandleResponse()
   ...
2   var xmldoc = xmlHttp.responseXML;
3   var responseNode = 
xmldoc.getElementsByTagName(
   "GetProjectStatusesResult").item(0);              
4   for (var iNode = 0;iNode < 
          responseNode.childNodes.length; iNode++){
5    var projectContent=
           responseNode.childNodes.item(iNode).text;
6     var tokens = projectContent.split('|');
7
8          var imgTag=" ";
9             if(tokens[1]=="Success"){
10                  imgTag=imgSuccess;
11             }else{
12               imgTag=imgFailure;
13           }
14          ...
15  }
...

.
• Line 1 gets the xml response from the web service
• Line 3 locates the GetProjectStatusesResult tag.
• Lines 4 through 13 iterates over the GetProjectStatusesResult tag children. Every children here contains the status of a particular CC.NET project

You may download the gadget's source code from here