my  block

where uzairs roam

I’m having an absolutely awesome dicking around with script.aculo.us. For those who don’t know, script.aculo.us is a fabulous Javascript library built on Prototype to add a lot of cool AJAX functionality. Prototype ispretty tightly bound to Ruby-on-Rails, and apparently script.aculo.us is meandering down that route too. Massive shame — it really is quite nice, and it’s a shame that the lack of documentation and (to put it bluntly) championing of RoR as the end-all-be-all of web development is keeping it from the rest of the web dev community.

Anyway, since Atlas is a little ways off from being production-ready, I decided I’d see if I could put script.aculo.us to some use on my project (yes, the one with RI that I started many moons ago). I initially just wanted a quick solution for making some elements draggable, but since I discovered the shopping card demo, I’ve become quite keen on bringing Droppables into the mix as well.

Unfortunately, as I mentioned above, there’s little to no documentation on how to actually use the library — the website will literally go no further than to show you some source code. Ruby source code. Brilliant.

Thankfully, Javascript is simple and obvious since you can choose to ‘view source’ any website you come across.

Creating Draggable objects

Draggable is the JS class that describes objects that can be dragged (mouse-down on them and move the mouse around). Here’s how to create a draggable object:

<img id="image1" src="image.gif" />
<script language="text/javascript">
new Draggable ('image1', {ghosting:true});<script>

The ghosting option makes the image translucent when it is being dragged. There are several other cool options, including revert, which is often used with Droppable objects to make the Draggable return to its original position on mouse-up. Of course, seemingly none of this is documented, and you have to go digging through the code to find them. You’ll notice that the inevitable call to getElementById is hidden and script.aculo.us accepts simply the element ID you want to manipulate. Nice touches like that win hearts.

To make one of my FormView’s draggable, I wrapped the <asp:FormView> tag in my aspx file in a div and gave it a convenient name, to prevent having to register the script (see my post about name mangling).

An important thing to note is that once you’ve made your element Draggable, it’s tricky to manipulate it with your own re-positioning code. For example, suppose you’ve got a Draggable that you also want to be able to reposition by clicking anywhere on the page. If you write your own scriptlet to do this, you run into all the problems associated with relative and absolute positioning. Not insurmountable, but there goes half an hour…

Using Droppables

Here’s a trickier problem. Like I mentioned, I thought the shopping cart demo was really cool, and I was very keen on doing something similar on my page. Unfortunately, the code available is pretty cryptic:

< %= drop_receiving_element "cart", 
      :update => "items", :url => { :action => "add" },
      :accept => "products", :hoverclass => "cart-active",
      :loading => "Element.show('indicator')",
      :complete => "Element.hide('indicator')" %>

This is translated to the Javascript below:

<script type="text/javascript">
Droppables.add('cart', {accept:'products', onDrop:function(element){
  new Ajax.Updater('items', '/demos/shop/add',
  {onLoading:function(request){Element.show('indicator')}, 
  onComplete:function(request){Element.hide('indicator')}, 
  parameters:'id=' + encodeURIComponent(element.id), 
  evalScripts:true, asynchronous:true})}, hoverclass:'cart-active'})</script>

Again, not easy to interpret: what exactly is the add page returning? Merely a count of the various elements the cart contains, or the actual HTML to represent the cart?

For the answer, one need only visit http://script.aculo.us/demos/shop/add?id=item_2_0. This is the actual URL the demo hits when you drop a t-shirt into the cart (that item ID is out of the page source) . You might need to visit the actual cart first and add a t-shirt to get the server-side bit set up properly — I ran into a ‘null array’ exception when I tried it directly.

Hitting that URL shows that the add page is returning the full state of the shopping cart, serialized as HTML.

I haven’t gotten around to coding the equivalent ASP.NET yet, but it should be simple. Equally, given how cleanly the library interacts with HTML elements (eg. requiring only the element ID to be able to apply effects), it should be easy to use the other stuff provided.