Ian Bicking: the old part of his blog

Ajax Experimentations: Filebrowser

This weekend I started experimenting with a filebrowser application. It's much more Ajax-y than my previous experiment with Ajax. Unfortunately I don't trust that it is secure yet, so I can't give you a demo, but I can give a screenshot.

I used the Prototype library from Rails. I found it quite pleasant. Despite its association with Rails, it has no noticeable server-side integration (which I strongly prefer). It introduces some new patterns to Javascript, but Javascript can use some new patterns. For example, you can use $(id_name) equivalent to document.getElementById(id_name). Which is damn nice, because document.getElementById is a stupidly long name. If there were a dozen such shortcuts, that'd be a problem, but there's not and it's not a problem.

It could really use some documentation. Good old hand-written documentation, not fancy generated API documentation. I can understand what the code does well enough, but it's hard for me to tell what the code is intended to do, or how I'm intended to use it. But it's short, so it's not that hard to work my way through it.

As an example, here's how you call a URL, and insert whatever it returns into a container by the given id:

<a onclick="new Ajax.Updater('container_id', 'http://...')">

I'm not entirely sure I like this style; I find I often want the page to run Javascript in addition to updating some content. You can do this:

<a onclick="new Ajax.Updater(
  'container_id', 'http://...',
  {onComplete: function (req) {...}})">

But I don't like putting so much logic in the link itself. But experimentation will tell better than my inexperience opinion (especially with respect to Javascript). The underlying functions are easy enough to use that I could implement other techniques if I want. The whole library is just 768 lines long, 567 if you leave out the visual effects, 283 if you leave out the form stuff and Insertions (both of which are probably interesting, but I don't yet understand).

Created 13 Jun '05

Comments:

I agree that it's unfortunate that prototype doesn't give you an eval- oriented updater out of the box, but it shouldn't be hard to add one.

The main point of "the form stuff" is the serialize method, which can be used to ease submitting a form asynchronously. Insertions are to insert or append the result to your container, instead of replacing it.

# Jonathan Ellis

# Alexei

There is an excellent ajax file explorer here: http://www.fileexplorer.net

but! while the application is free, the components are not.

# Alexei

IE only and ASP based -- not very interesting to me. Obviously I'm not doing anything wildly novel with this; I think it's actually mostly interesting (at least to me) in that it's pluggable. Well, not really, but it has the potential at least.

# Ian Bicking

There's more that you could probably knock out of Prototype if you wanted. I'm not sure why it defines Array.push and Function.apply if they don't exist; they both exist in IE 6. I don't have access to any older versions of IE, though, so maybe they are there for IE5.something compatibility?

# Adam Vandenberg

Hum... Noia icons set and ajax : it seems Python world share some ideas : http://www.nimail.org/screenshots/screenshot3.png (</ads>).

# Thomas Herve