Atlas

Json converters lacking in Microsoft AJAX RTM

6/5/2007

Json converters lacking in Microsoft AJAX RTM Having spent some time developing a project using a CTP version of Microsoft Ajax ("ATLAS" back in the day) I finally came to migrate the project to the RTM version. After uninstalling the CTP release, and installing the RTM release I wasn't surprised to see the project no longer compile. But once the basic problems were fixed (mainly name changes, tag prefixes, and a new [scriptservice] attribute for your web service classes) I was still seeing errors in the application. One of the main problems were errors of 'System.InvalidOperationException: A circular reference was detected ...' when calling a webservice that returned a DataTable or DataRow[]. The UI of this project was pretty much built on client-side calls to update and select data in this way, so suddenly I had a lot of select methods that stoped working (and in a project with 300+ stored procedures behind the scenes this was a headache!) I expected a few niggles but what I didn't expect was that the Json converters for DataTable and DataRow were no longer included (DataSet too I guess, but I wasn't using that in this project). I noticed that the references to the converters in the web.config were commented out and replaced with: ... 'that doesn't look right', I thought. Having seen online that the January 2007 CTP release had solid Json converters included I decided to use these rather than write my own (although that does look interesting :-) ). It turned out to be not too hard to get this working. All that is required is to replace the converter/add elements with those from the January CTP And to add the January CTP Microsoft.Web.Preview.dll file to the bin directory of your project (or the Global Assembly Cache if you prefer). To get file with the converters I had to download the Jan CTP, install on a virtual machine (I didn't want to run the CTP install after the RTM one) and copy the one file I wanted. To save you the hassle I have attached the file below. I was using a pretty old beta and in some cases had to refer to column values via a getProperty method... ...these had to change to directly accessing the column value as a property... ...which I prefer, even though it involved rather a lot of typing in this instance. Hey presto, my javascript was able to see my data again. That was all I had to do to migrate this section of my project. If you have the same problem with passing Data tables out of web services back to javascipt, then follow the tips above and all will be well :-)

Web service calls from javascript using ATLAS (part 3) - Complex properties

25/8/2006

Web service calls from javascript using ATLAS (part 3) - Complex properties Part two covered returning objects with multiple properties from a webservice and accessing those properties from javascript. This article demonstrates that even 'complex' properties are supported by the ATLAS framework. A complex property in this context is one like below: The getVcard method returns some HTML in the vCard microformat. Your javascript stays nice and simple as below... The reason this works is that the javascript object is given each property from the .NET object by the ATLAS framework. If there was a property that showed the current time then the javascript version of the property would always show the time at which it was created. I have found this to be a useful to keep my code/logic where I want it - not embedded in HTML!

Web service calls from javascript using ATLAS (part 2) - Complex return types

25/8/2006

Web service calls from javascript using ATLAS (part 2) - Complex return types Following on from part one which showed how to make web service calls from javscript, this article will now show the flexibility of the ATLAS framework by calling a web service that returns an object from javascript. Lets expand from the previous example with the web service below... You need to add reference to this web service to your ASP.NET page. This is achieved in exactly the same way as before... You can now make JavaScript calls to the web service as shown below... I was very impressed that the properties of the c# class are now available to me in javascript. I hope you are too. I have to say, credit goes to Paul Hayman who originally pointed this out to me. Credit also to the ATLAS team of course! #$#Link to part three of this article

Web service calls from javascript using ATLAS (part 1)

25/8/2006

Web service calls from javascript using ATLAS (part 1) ATLAS provides a fantastic mechanism for making web service calls from javascript code. Take the simple web service below... You need to add reference to this web service to your ASP.NET page. This is achieved using the ScriptManager tag as in the example below... Infact only the Services and ServiceReference elements are added to the basic scriptManager tag. Note taht there seems to be a limitation in the CTP that I am using where the web service needs to be in the same web site as your project. This is a serious limitation but it shouldn't be too hard to create a proxy for any web service runing elsewhere until this is fixed in the next CTP. You can now make JavaScript calls to the web service as shown below... I hope you find the example useful in your own applications.

Auto-complete using ATLAS

22/8/2006

Auto-complete using ATLAS Setting up an auto-complete input box in ATLAS is pretty simple, here is a quick guide to illustrate this... Assuming you already have the ATLAS framework referenced in your project then select an to apply auto-complete to. See Mark's article for adding ATLAS to an existing web site: http://www.geekzilla.co.uk/View2C00AD81-BA3C-4E02-A265-C2C3925B4B23.htm Start by adding the following auto-complete extender, referencing the TextBox object you want to extend... Note the ServiceMethod and ServicePath attributes, these specify the webservice and method that will take what the user has typed so far and return an appropriate list to select from. The web method definition should be as follows: The user input so far is passed into prefixText and maximum number of records to return is passed into count (although this is a 'recommendation' only - the control will show whatever count you return). The string[] returned will be displayed in the familiar auto-complete dropdown panel allowing the user to select a valid response either with the mouse or cursor keys. By default the auto-complete does not kick in until the user types a third character in the TextBox - this default can be overridden using the MinimumPrefixLength attribute. Consider that the webmethod will be called for every keystroke after this minimum so do ensure that the webmethod will return in a timely manner or a few users typing will generate significant load on your server. If your method is by necessity slow, then consider increasing the minimum prefix. Similar to with making web service calls from javascript (see http://www.geekzilla.co.uk/View91E6FCCB-DB0A-499C-A2CC-9854452D2086.htm) there seems to be a limitation in that the web service must be part of the same project.

Comparing ATLAS and Dojo (part 1)

8/8/2006

Comparing ATLAS and Dojo (part 1) This is a first article in a series comparing some of the functionality of ATLAS with another popular AJAX framework called Dojo. Both frameworks have some powerfull components and there is a high degree of overlap. This first article is a straight comparision of the Dojo TitlePane and the ATLAS CollapsiblePanel components. Both components provide client side presentation of a content area with a title/header switch which allows the user to hide/unhide the content. First thing to note is ease of use. Despite the intelisense help in VS2005 it is still much easier to add the Dojo component. Once you have some bolier plate .js includes/definitions and register the TitlePane the code to add the functionality is trivial: Compare this to the ATLAS code, which still has some boiler plate to add the ATLAS ScriptManager: With ATLAS you have to link the behaviour (extender) to a control, the asp:Button. You will notice also that it works by having a panel containing the collapsing area inside another panel. Code wise it looks much more complex, however, this is mainly due to the additional properties and control you have around the collapsing area. For staters ATLAS supports horizontal and vertical collapsing. Also you can set the hide/unhide switch to be almost any other asp control. Documentation is currently thin on the ground for the Dojo control but it appears to create the switch area as a link or as a static text placeholder. So if you just want a simple collapsing area Dojo fits the bill. If you need much more control or different behaviour use ATLAS. I built two pages, one based on Dojo and one on ATLAS. Both used the same elements where possible, .css for instance. Both had three collapsible panels. For a simplistic performance test I ran a proxy and monitored GET request/response times and found the following results: || Dojo || || First request || 1.539 sec || || Cached requests || 0.572 sec || || ATLAS || || First request || 1.042 sec || || Cached requests || 0.807 sec || I ran Dojo with debug=true so some additional scripts were downloaded but this seems fair based on the beta basis of both frameworks. The initial Dojo page and scripts come in at a hefty 229204 bytes. The ATLAS page weighs in at 90392. So the basic performance results favour Dojo after the initial page request. Trying to come to some conclusion of this comparison is difficult. At the moment both frameworks are beta so not production strength. I would have to say depending on your WEB 2.0 efforts you might chose either. If you are trying to introduce some AJAX into an existing application then Dojo TitlePane is easier. If you are starting from scratch then you have greater range of function with ATLAS CollapsiblePanel. Choose the one which best suits your needs.

Launching an Atlas ModalPopupExtender from JavaScript

14/7/2006

Launching an Atlas ModalPopupExtender from JavaScript {Looking for an '''Ajax version''' of this article??}http://www.geekzilla.co.uk/View38736C2B-BAD3-418A-A5B0-DAC4F1A5A83A.htm Looking round the web there are some crazy ways people are trying to launch the ModalPopupExtender from JavaScript, the most common way being setting a timeout which calls the Click method of a hidden button. Here's a more eligant way. The groundworks Add a hidden button ('''which will NEVER be used''') surrounding it with a hidden DIV. Add the ID of the hidden button to the ModalPopupProperties and more importantly, add an ID to the ModalPopupProperties element it's self. Showing the modal popup Now you've done this, in Javascript, you can display the modal quite easily... here's how. Hiding the modal popup Just as easy... Full example As requested here is a full example.. also, see the downloadable demo.

Using a DataSet as a return type on an Atlas Javascript WebService call

14/7/2006

Using a DataSet as a return type on an Atlas Javascript WebService call If the WebService you are calling returns a DataSet it may not be obvious how to get to the data in the returned object. Here is a little example which may help you on your way.. Notice the DataSet is an array of Table objects. Use the '''.getItem(rowIndex)''' method to return the row and the '''.getProperty(columnName | columnIndex)''' to access your data.

Calling a WebService (from JavaScript) with Atlas

12/7/2006

Calling a WebService (from JavaScript) with Atlas This is too easy and damn powerful! WebServices can be called from JavaScript directly once the service is registered in the Script Manager. Script Manager Add your service to the manager as seen below: JavaScript Once the ScriptManager has discovered the web service, it creates all the objects for you.. The above example is a very simple one.. It is possible to return an AtlasDataSet or your own object.

Remembering position of DragOverlayExtender with Profile

6/7/2006

Remembering position of DragOverlayExtender with Profile You can get Atlas to store the last known position of your floating panel in the profile. Three things you need to do to get this to work. ProfileScriptService In the page with the DragOverlayExtender you'll need to add a atlas:ProfileScriptService control (this is responsible for communicating with the profile back on the server) : DragOverlayExtender You need to set the property name to store the position in, in this example my property name is PopupPosition Web.Config entries This had me baffled for a while, I knew that I had to add the property (PopupPosition) to my Profile/Properties in the '''system.web''' section: What I didn't realise that I needed to add another section to the '''microsoft.web''' section. See below for example: '''Note:''' You can specify more than one property in the profileService element, simply seperate them with a ; Alternatively, you could specify * and it will have access to all properties.