Using Atlas to make webservices calls from sidebar gadget..

  • Article

Last post we did a REST call using XmlHttp from a sidebar gadget... but let's admit it, we were all doing xmlhttp calls in 2000 and we were 'geeks'... it was not until 2005? that this exact same code became "cool" because it was called AJAX ...  So here is the ticket to get you to the cool group -- every one knows I will never make that :(

Pre-requisites (or stuff you get with the sample code located here)   

  1. Create an Atlas website ( might want to check https://atlas.asp.net, if you don't know Atlas, you will need an hour there)
  2. Create a Web Service...    mine has the very creative name of "WebService.asmx"  and it has a function called GetVolume that returns an object .... [arguably a 'complex type']

The client code: 

  1. Copy the atlasruntime.js  from a machine that has Atlas installed to your gadget's js directory (or any where that you can get to from your gadget).. 
     By default, my atlas install put the files under \Program files\Microsoft asp.net\atlas\v2.0.50727\atlas\scriptlibrary\debug
     

  2. The trick: Atlas by default uses frames to get around cross-site scripting...

    That gets messy if you are trying to generate a proxy with out using the Atlas' server side script manager.. so instead I forced Atlas to use xmlhttp with out frames.. and when it goes directly it is a breeze.. The caveat is that the parameter to forceXmlHttp is hidden some where that I could not [though did not look too hard] get to easily... if you download the sample code for this project, search atlasruntime.js for 'jaimer' to see the change.. for those going at it alone, it is line 2317 ... in atlasruntime.js ( Sept CTP ) ... the code around it looks like this:

    Sys.Net.WebRequest = function() {
    Sys.Net.WebRequest.initializeBase(this, [true]);
    var _url = null;
    ...... //lots of stuff here
    var _delegateRequest = null;
     //jaimer Changed this line... from
    // var _forceXmlHttp = false; /* to */
    var _forceXmlHttp= true;

  3. Create a proxy to your web service from your gadget code..
    [So I added a new Javascript file, called AtlasServiceProxy.js and I put the same stuff that atlas gets by making the call to WebService.asmx/js [this is what they use to get the proxy] ... If you have an aspx website, with a webservice, you can just navigate to it using IE, and add the /js after the webservice URL ... (e.g. https://jaimersvr/AtlasWs/Webservice.asmx/js ] and it should look like the one below.. Notice I did have to add one line, the this.path = <url to my webservice> ..

    Type.registerNamespace('AtlasSample');
    AtlasSample.WebService=new function()
    {
    // These parameters can of course be set at runtime... In my case, I hardcoded them here for brevity
    this.path = "https://jaimersvr/AtlasWS/WebService.asmx" ;
    this.appPath = "https://jaimersvr/AtlasWS/" ;
    var cm=Sys.Net.ServiceMethod.createProxyMethod; cm(this,"EchoString","s"); } 

  4. OK,  I think that is all we needed...  we are now ready to party w/ ajax.. :)  To run the sample, simply click in the button in the gadget...

WHY BOTHER using Atlas to call webservices instead of just plain old XmlHttp like we did on my last post??...
Well, there is one nice reason to do this: Atlas does some nice JSON serialization on the back-end and front-end, so  the results come back as objects instead of as an XML file you need to parse...   for example, my webservice returns an object...  that looks like this in C#:

public

class VolumeObject {
public string At10m;
public string At50m;
public string At100m ;
}
using Atlas, I do not need to write the XML de-serialization code ...

/*digress: why this weird object I started with a simple Echo function ... that returned what you sent.. but then I decided to do a more complex object .. so I thought an echo would do... here you get the echo at 10m ( LOUD ) at 50m ( LOud) and at 100m when it fades (loud) ....  you can stop gagging now :) */

The code for this sample is located here,  there is a client side component ( sample.gadget)  and a server side component  ( AtlasWS ) ... You will as usual have to change the URLs in AtlasServiceProxy.js  from pointing to my servers to pointing to yours..

Cheers. ..