General

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

Creating a Tag Cloud in C#

22/8/2006

Creating a Tag Cloud in C# I wanted to add a TagCloud to GeekZilla. The first thing I did was look around the web for some examples (or free components). To my supprise none jumped out at me. So, I decided to write my own. At first I found myself wondering how I would render different size words randomly within a

. How would I be able to position them in relation to each other? float:right?? After looking at a few tag coulds {de.licio.us}http://del.icio.us/tag/ , {dotnetkicks}http://www.dotnetkicks.com/ etc I discovered that tag clouds are infact displayed in alphabetical order and the word size doesn't change much. My Needs The TagCloud would need to be able to be generated from a DataTable containing the columns 'tag' and 'count'. In my case the data would come from a Sql Server 2005 database. At the database level I'd be doing the aggregation and ordering. The TagCould code would only need to worry about weighting the tags. The Data First of all I created a view of all tags with their grouping: I then created a stored procedure which would return me the top 60 tags ordered alphabetically: The UI I decided to place the tag control within a UserControl incase I needed to include it in more than one page, in the end it was only used in the MasterPage. I created a method called GetCloud() which would contain the logic for the tag weighting. The method accepts a DataTable and a String based Cloud Template. The Cloud Template is tokenised, the replaced version is returned for each tag in the DataTable. Next I included some validation on the input table. Now time to get down to business. To figure out the weight of the tag I first needed to know the Min and Max tag occurances. For this I used DataTable.Compute(). You can see more information on the Compute() method in my article about EvaluatingExpressions. With the Min and Max known I could loop through the DataTable figuring out the tag weight. First of all I needed to calculate the weight as a percentage. For this I divided the number of occuances by the maximum occurances and multiplied it by 100. With the weight percentage I apply a bunch of cascading 'if' statements to figure out which weight classification the tag belongs to Lastly I replace the tokens in the cloud template and append the result to a StringBuilder. When all are evaluated, return the StringBuilder CSS Ok, this code generates a bunch of Anchor tags. I'd need to use CSS to make the thing look decent. The cloud template used the weight to assign an appropriate style to each tag. The styles used are *weight1 *weight2 *weight3 *weight4 *weight5 The following StyleSheet was created to bring these tags to life within a '''

''' called '''tagCloud''' Adding my cloud to the UserControl Html The Html is really simple, as you can see below: Code Behind The '''Page_Load()''' calls my DataAccessLayer to get the DataTable and passes the data to the local '''GetCloud()''' method. Note the use of ResolveClientUrl The Result You can see the result of my efforts right here on GeekZilla, if you're interested in using or enhancing this code, feel free to download the example application linked from the bottom of this article. I hope my code makes your life a bit easier, if nothing else I hope it inspires you to add a cloud to your site... doesn't just have to be for tags ;-)

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.

Integrating Dojo Fisheye and SiteMapDataSource

25/7/2006

Integrating Dojo Fisheye and SiteMapDataSource Everybody seems to be getting excited over this AJAX thing. Even Microsoft are (at last... ok they started it with OWA) getting on the bandwagon with the Atlas libraries. Of course just because Atlas exists doesn't mean you cannot use some other snazzy client side AJAX toolkits and one of the richest is the '''Dojo Toolkit'''. It includes a rich set of components including a range of 'widgets' for increasing user productivity. They also add a wow factor. My current favourite is the '''Fisheye list bar widget'''. This renders an icon bar Apple Mac style which cycles in size smoothly as the user moves the mouse pointer over it. Having been asked to redesign an old commision I decided I would like to make use of the new ASP.NET navigation components but thought it would be cool to tie the data components to this Fisheye control and render a really slick navigation bar. There already have been some use of Dojo with ASP.NET and even intergrating it with Atlas but Fisheye is quite a recent widget addition and documentation is ongoing so to save you sometime here's what you need to do. Add the Dojo bootstrap .js and other widget .js libraries to your project. I added navigation to a master page. First add some boiler plate script to include set a debugging switch, include the Dojo bootstrapper and register the needed widget libraries: I decided to hold the site structure and navigation elements in '''web.sitemap''' and access it through the a '''SiteMapDataSource''' component. Then process each node and create the Fisheye list of items. The code below looks a bit messy but I will pick out some key features of the Fisheye widget: This code creates a vertical icon bar which when mouse-overed enlarge to the max size and swing out slightly from the left with a caption positioned on the right of the icon on which the mouse is over. The '''dojo-FisheyeList''' is defined in the widget library. Hopefully most of the settings speak for themselves. You can switch the '''dojo:orientation''' between vertical and hortizontal. '''dojo-attachedge''' specifies where the icons snap back to once they loose focus. '''dojo-labeledge''' specifies where the label (kind of tooltip) appears when a particular icon has focus. These two properties support top, bottom, left and right. The '''dojo-FisheyeListItem''' creates the link icon. Again the properties should be self explanatory. The '''onclick''' event links to some other custom javascript to handle navigation as defined in the '''web.sitemap'''. There are numerous uses for Dojo. Non widget libraries include function such as IO, encryption, logging and xml manipulation to name a few. And it includes support for JSON under the rpc components. In short this is a very rich toolkit and something all developers should give at least a once over. So if you have a few minutes to spare check out the demos at http://dojotoolkit.org/ and ''''see it in action''''.

Garmin and Google Maps

19/6/2006

Garmin and Google Maps The bought a Garmin Forerunner recently which is a really cool piece of kit but the maps that come with it are very poor. Google maps has an API that allows you to integrate these rich maps into your own web applications. Garmin has the option to export your training history as an XML file. This XML file contains not just Latitude and Longitude points but also your heart rate, the time, elevation and what you were doing (i.e. cycling or running). From these you can work out more details such as how steep the hill was , how fast you were running and how hard your heart was pumping. Google provides a well documented API largely in Javascript. The current site, just shows a list of bike rides from the GPS XML extract and plots the ride on the map. It animates the ride by overlaying a small section of the ride in red and using setTimeout in a loop to keep it moving. Some of the key aspects are explained below... A reference to the google maps API script is included as described in the documentation. A map is created, on the server the width and height of the map is calculated (by looking at east/west-most and north/south-most points) and the javascript created to ensure that the map is centred and zoomed appropriately. The zoom model is a logarithmic one and I had to do a little relunctant maths to create this function. The source javascript shows an array of GLatLng objects. These are google map representations of a point on a map. The map objects addOverlay method is called to add a GPolyline object (a line) to the line. The animation is acheived by creating a GPolyline from a few points at a time. The GPolyline is then removed and replaced a bit further along the ride (which is basically an array).