Nuggets for Noppets

I recently decided to create a new custom class called “ImageLink”. This is a NOLOH Link class extended to do more “tricks” with images. The main use-case was to be able to specify (in NOLOH parlance) “out” and “over” graphics as background images and have the Text value of the Link CSS text-indented using a negative offset. The real requirement was so that I could use fonts of my choice as a graphic without concern as to their availability on an end-user’s machine.

The first twist was that I actually wanted to use CSS Sprites for this requirement. NOLOH tends to use regular image files for these kinds of things but I had my own reasons for wanting to use Sprites. The new class is constructed by simply “feeding” it a configuration “container”. I really like using object literals in Javascript for this kind of thing and in PHP, I use an associative array to do the same thing. It’s not quite as terse as an object literal but it works just the same. In this array you can specify all manner of properties including ServerEvents that are just another NOLOH object that can be passed around and assigned as required. All in all, it works extremely well.

The second twist was that I wanted a “third” background image for a “selected” state. This is where the plot thickens. What I really wanted was to be able to have a NOLOH Group of my ImageLink objects with a “selected” background image, again, provided by a CSS Sprite.

I should state here and now that visually, everything I wanted to achieve is available straight “out of the box” by using a NOLOH RolloverImage; I just wanted to do it my way using Sprites. All I needed to do was make the ImageLink class implement Groupable and it would “play nicely” with the NOLOH Group container. In reality, that meant that I did nothing other than specify “implements Groupable” in the class definition as NOLOH controls provide the required implementation by default. I also needed to create some Javascript to set the “selected” property on the client-side DOM object.

Now here’s the thing. I really like Javascript and enjoy using it but for some reason, this tiny piece of Javascript was causing me a few problems. I couldn’t remember the NOLOH ClientEvent approach or how to add the Javascript into the NOLOH “mix”. Whilst this stuff is in the API documentation, I wasn’t at all comfortable because with NOLOH, I tend to rattle out code all day long without so much as a second thought.

Like all good developers, I decided to refer back to my last NOLOH client-side code to see how I did all of this “black magic”. Of course, it was totally straightforward and simple as are most things in NOLOH. Then something caught my eye; the code file was last accessed in March 2009. After a little more checking, the last time I had done any NOLOH client-side Javascript coding was March 2009.

So, for the last twelve months, I’ve been developing NOLOH PHP/Ajax applications with all the client-side effects, automated state-management, XHR etc., but guess what? I haven’t written a single line of Javascript!

I admit, the title of this post is indeed a misnomer. But the fact remains; I have been creating Ajax applications without hand coding a single line of Javascript and what’s more, you can too. As usual, head over to http://www.noloh.com/ and take a look for yourself.