Browse DevX
Sign up for e-mail newsletters from DevX


Consuming External Web Services with Microsoft Atlas  : Page 3

To consume external Web services in Atlas, you build a server-based Web service proxy to the service. The good news is that you can leverage Visual Studio and Atlas features to handle most of the work.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Building the ZipCode JavaScript Client
Now that the server-side Web service code is ready, you can create a JavaScript client that accesses the service. Add ZipCodeConduitClient.aspx by adding a Web form to your ZipCodeRUs using the "Add New Item…", "Web Form" option

In the ZipCodeConduitClient.aspx code, enable Microsoft Atlas by creating a an instance of Atlas's ScriptManager and adding a reference to the ASP.NET-based Web service ZipCodeConduitService.asmx file to the element of the Web page as shown in the code below.

... <head id="Head1" runat="server"> <title>Zip Code Information Service - Atlas JavaScript Conduit Client</title> <atlas:ScriptManager ID="scriptManager" runat="server" EnableScriptComponents="true"> <Services> <atlas:ServiceReference Path="ZipCodeConduitService.asmx" /> </Services> </atlas:ScriptManager> <script type="text/xml-script"> <page xmlns:script= "http://schemas.microsoft.com/xml-script/2005"> <components> <webRequestManager batchSize="5" enableBatching="true" batchDelay="3000" /> </components> </page> </script> </head> ...

Figure 2. ZipCodeConduitClient.aspx: The figure shows the ZipCodeConduitClient.aspx page in design mode in Visual Studio.
Interestingly, the preceding code enables batched Web service requests between JavaScript and the Web service. Adding the webRequestManager element, with the enableBatching attribute value set to true causes Atlas to handle all the grunt work of accumulating all the requests and executing them at all at once in a batch. Atlas also keeps track of all the return values and objects from the Web service. The code above batches up to five requests (or waits for three seconds to accumulate additional requests—whichever occurs first) and then executes all the requests at once.

Now you can create visual elements of the web page by adding HTML and ASP elements along the lines a shown below to create a page that looks similar to the one shown in Figure 2.

... <form id="ZipCodeConduitClient" runat="server" ></form> <h4> Enter ZipCodes: 1> <input id="textZipCode1" /> 2> <input id="textZipCode2" /> 3> <input id="textZipCode3" /> <input id="buttonZipCode" type="button" value="Get Information" onclick="return OnbuttonZipCode_click()" /> </h4> <table border="1" cellpadding="5" cellspacing="2"> <tr> <td></td> <td><asp:Label ID="corelationId1" runat="server" Text="."/></td> <td><asp:Label ID="corelationId2" runat="server" Text="."/></td> <td><asp:Label ID="corelationId3" runat="server" Text="."/></td> </tr> <tr> <td>ZipCode</td> <td><asp:Label ID="zipCode1" runat="server" Text="."/></td> <td><asp:Label ID="zipCode2" runat="server" Text="."/></td> <td><asp:Label ID="zipCode3" runat="server" Text="."/></td> </tr> ... <tr> <td></td> <td><asp:Label id="message1" runat="server" Text="."/></td> <td><asp:Label id="message2" runat="server" Text="."/></td> <td><asp:Label id="message3" runat="server" Text="."/></td> </tr> </table> <br /> <asp:Label ID="message" runat="server" BorderStyle="Groove" BackColor="#FF8080" BorderWidth="1px" Font-Bold="True" ForeColor="White">Ready</asp:Label> ...

Notice that the "Get Information" (named buttonZipCode in the source code) button is wired to invoke the OnbuttonZipCode_click() JavaScript function, which runs the code shown below.

<script type="text/javascript" language="JavaScript"> function OnbuttonZipCode_click() { document.getElementById('message').innerHTML = "Retrieving Information..."; if (document.getElementById('textZipCode1'). value.length > 0) { service = ZipCodeConduitService.GetZipCodeInfo( "1", document.getElementById('textZipCode1').value, OnComplete, //Complete event OnTimeout, //Timeout event OnError // Error event ); } ... } return false; } ... </script>

In the OnbuttonZipCode_click function, the ZipCodeConduitService JavaScript proxy object is implicitly made available by Atlas because of the added to the element earlier. Notice that the GetZipCodeInfo() function takes three parameters in addition to the two parameters expected by the GetZipCodeInfo() function on ZipCodeConduitService Web service. This is because Atlas makes all Web service calls asynchronously; after making a Web service call, the JavaScript client code does not wait for the server's response. When the response arrives, the Atlas framework needs a callback function on the client. The additional parameters to the GetZipCodeInfo method required from JavaScript code are pointers to these callback functions. The response from server could be successful, return an error message, or the call could timeout without returning a response. The preceding code handles each possible response type with the OnComplete(), OnError(), and OnTimeout() functions respectively.

You can see those functions in the code below. These functions receive a result parameter, which contains the response returned by the server. In this case, the ZipCodeConduitService returns an instance of the ZipCodeConduitData class to the OnComplete() function, and returns a ZipCodeConduitException exception to OnError().

... function OnComplete(result) { document.getElementById('message').innerHTML = "Ready"; if (result.CorelationId == '1') { document.getElementById('corelationId1').innerHTML = result.CorelationId; ... document.getElementById('message1').innerHTML = result.Message; } else if (result.CorelationId == '2') { ... } else if (result.CorelationId == '3') { ... } } function OnError(result) { displayMessage(result); }

Figure 3. ZipCodeConduitClient In Action: Here's the ZipCodeConduitClient.aspx page running in a Web browser showing the results retrieved for three ZIP codes.
function OnTimeout(result) { document.getElementById('message').innerHTML = "Request Timeout"; } function displayMessage(result) { if (result.CorelationId == '1') { document.getElementById('message1').innerHTML = result.get_message(); } ... } </script>
The Code in Action
With both the server and client code in place, you're ready to enjoy the fruits of your labor. Start ZipCodeConduitClient.aspx in debug mode in Visual Studio or deploy your application to a Web site and enter three ZIP codes to retrieve details of all three ZIP codes at once as shown in Figure 3.

AJAX made developing responsive Web applications simpler, and now Microsoft has raised the ante by simplifying the process of calling Web services from AJAX-enabled client applications. As AJAX moves further into mainstream development, you can expect Microsoft to integrate Atlas even more closely into Visual Studio and other Microsoft development platform and products.

Gautam Shah has been developing and integrating applications for over a decade. He has designed patented solutions that enable information sharing between government agencies. His interests center around J2EE, .NET, Open Source, BizTalk, Indian cooking, and anything that's vaguely interesting on the New York Times non-fiction bestseller list.
Thanks for your registration, follow us on our social networks to keep up-to-date