Introducing DOCJSLIB Version 2.0: Writing Applications - Doc JavaScript

Writing Applications with DOCJSLIB 2.0

We have explained the general principles of writing applications with DOCJSLIB in our previous column, Introducing DOCJSLIB, A Cross-Browser JavaScript Library. To summarize, you can build your application without bothering with the browser dependencies. You can implement your ideas in a top-down fashion, and leave the fine details to DOCJSLIB. The two relatively complex tasks you still have to manage are the elements' IDs and the onClick event handler. The best way to learn is by example. We'll show you, step by step, how to build the Pop-out Elements application, emphasizing the solution to these two items.

First, we need to design the mechanics of the pop-out elements. Our proposal is just one of many alternatives. You are encouraged to explore other designs. In our design, every pop-out element is a pair of an image and a box. The image looks like a folder tab and shows its index subject. In our pop-out example, the index tabs are JavaScript Examples and JavaScript Columns. Notice that the labels are part of the GIF files, so you cannot modify them from your script. We want to create the illusion that whenever the user clicks an index tab, a box pops out, pushing the index tab to its right. We can fill the box with links, images, or any other HTML tags. We chose to implement the popping effect by initially hiding the box and then exposing it when the user clicks the appropriate index tab. The reverse scenario occurs when the user clicks the index tab when the box is exposed. The box disappears and the index tab returns to its original left-justified position. Any box exposed will be positioned at the top of the heap, covering any lower-level boxes that might be underneath it. We also assume that the easiest way to hide a box or to expose it, is by switching the element's visibility property on and off.

As we mentioned above, managing the elements' IDs is one of your few challenges in building DOCJSLIB-based application. The image representing the index tab for JavaScript Examples is assigned the "examples" ID, while the other image for the JavaScript Columns index tab is assigned the "columns" ID. As mentioned above, each image has a paired box that pops out when the image is clicked. Each box's label is comprised of its image's label, concatenated with the string "Box". The examples box is labeled "examplesBox", and the columns box is labeled "columnsBox". As is explained in the next page, the heart of the algorithm is to derive the box's ID from the its corresponding image's ID, automatically. We chose the concatenation of the string "Box" as the automatic derivation algorithm.