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 :-)

Lightweight Ajax

27/8/2006

Lightweight Ajax Ajax doesn't have to be complicated - at its most basic it just means partial updates your pages rather than reloading the whole page. The attached js library contains just two functions - GetContent and RunJS. GetContent() takes a URL and a element name: It simply populates the elements innerHTML with whatever the URL returns. Optionally you can also specify to append to the div content rather than repalce. Run() takes a URL only: It simply runs whatever the URL returns. The simple example below shows how these can be used to create rich interface such as a node tree. The source for this is attached as a zip file below, but I'll summarsie here; The Default.aspx page references the Ajax.js file and contains a function init() that adds a few nodes. The variable 'node' is just a unique reference for each div - note that the GetContent() calls reference myDiv, myDiv1 etc. The Node.aspx file is pretty simple also; It just contains another

element and link to populate it, again using the GetContent() function. Because of the simplicity of the functions, integrating with other tools such as Rico is not complex. This is not a replacement for a framework such as ATLAS, but it is a lot easier to pick up if you just want to Ajax enable key functions in your existing application.

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.

Adding ATLAS to an Existing Web Application

27/7/2006

Adding ATLAS to an Existing Web Application Recently had to add '''ATLAS''' to an existing ASP.NET 2.0 application and found that there is more to it than simply adding a reference to the Microsoft.Web.Atlas.dll. I tried registering the assembly in an '''<@ Register>''' tag after adding the reference but still had errors that the '''atlas:''' tags where not known - missing assembly. So something else was missing. Comparing the '''web.config''' revealed several missing entries required to plumb in the Atlas libraries. So my receipe to add Atlas is as follows: 1. Add the '''Microsoft.Web.Atlas.dll''' either manually or via adding the '''AtlasToolkit components''' to the toolbox. 2. Add the following lines to the '''web.config''' under the '''configuration''' root node. I have included the commented sections found in the default web.config. You may already have some settings in these sections so watch out you don't overwrite or duplicate a section. 3. Add the following under the '''system.web''' node. Again watch out for duplicating a section. Be especially carefull around the '''compliation''' node. Chances are this will exist with a value indicating wether you want '''debug''' on or off. Just make sure you add the additional '''buildProviders'''. Hey presto, you should now be able to add script managers and have some of that ATLAS goodness.

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.

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.