Aardvark Javascript / Ajax / DHTML tools

Aardvark javascript ajax dhtml tools
Use the Aardvark bookmarklet to easily select elements on a web page, then instantly generate w3c DOM code to build those elements in your Javascript application.

With Aardvark, you can select elements on a web page (for instance, a static html mockup of parts of your Ajax application), press J, and get Javascript code to dynamically generate identical elements. Unlike typical DOM techniques, it isn't hard to look at or tedious to work with, in fact, the code generated looks nearly identical to the equivalent HTML. You may then paste this code into your DHTML/Ajax application, hook it up appropriately, and tweak it to your heart's desire.

Unlike innerHTML based approaches, you can easily get direct references to interior elements, and can thus avoid having to deal with the potential conflicts of using global identifiers such as element id's (as well as the annoyingness of not being able to get references to inner elements until you've added them to the document), and can avoid the ugliness of stringified event handlers.

First, we'll assume you -- or your web designer -- have made a static mock up of your page or widget in HTML. Now just use Aardvark to select your items, and automatically generate efficient and pretty Javascript, which will dynamically create the same DOM structure as the HTML does, but by using w3c DOM calls. As you can see in the example below, the Javascript is really no bulkier than the corresponding HTML code -- in fact, it looks an awful lot like the HTML. It is intended to be just as readable and editable as HTML, but to also play well with the rest of your Javascript application.

Example:

widget
A simple "widget", (shown here selected by Aardvark) consisting of a div element with 3 children elements: a string of text, an image, and an "a" element, which in turn contains another image....


Pressing "V" in
Aardvark displays
the HTML code
for the widget:
<div style="margin-right: 1em;" class="fontWidget">
Adjust font size:
<img alt="small font" src="minus-dim.gif" />
<a href="/fontAdjust.php?size=large&page=/index.php">
<img alt="large font" src="plus.gif" />
</a>
</div>

"J" displays the
Javascript code
that describes
the widget:
 
DIV ({style: {marginRight:"1em"}, className:"fontWidget"},
  "Adjust font size:",
  IMG ({alt:"small font", src:"minus-dim.gif"}),
  A ({href:"fontAdjust.php?size=large&page=/index.php"},
    IMG ({alt:"large font", src:"plus.gif"})
  )
these nested function calls (which look similar to the equivalent html) are thin wrappers around w3c DOM calls and assignments

To make this work, you simply have to include a source file, DomGenerator.js (get it here). No need to bring in a large library of someone else's code that you don't understand, and then be forced to use it for everything -- this is a small and simple file that should perfectly mesh with with any DOM based code you might already be using. To avoid polluting global namespace, the function calls are actually members of the DomGenerator object --- so to use them, you must surround the block of code with a "with (DomGenerator) { }" block.

Note that you can "catch" any of the interior elements into local variables, so that you can do whatever you might want to do with them, either before or after appending them to the document.