y last DHTML solution showed you how to create a tabbed user interface (UI). Unfortunately, the code to write the UI was specific for each document. It would be far more convenient to have a way to generate such interfaces automatically using generic routines. That way, you could create as many tabbed UIs as you need?without repeating the code each time.



Creating tabbed interfaces is straightforward, but tedious and document-specific. How can you automate the process and make it reusable?



Mixing object oriented programming(OOP) with some clever string tricks makes creating the tabbed UI generator a snap!Design an Object Oriented Tabbed UI
As with any OOP project, the first step is to design the objects you’ll need. For this exercise, you’ll create tabPanel objects, each of which consists of a tab object and a panel object. The tab and panel objects hold property values, and the tabPanel objects hold references to a tab and a panel as well as a method to display the tabPanel in an HTML document.

You need constructors for the objects. Open your favorite text editor and enter the following code:

   //tab constructor    function tab(id, text,top,left,width){      this.id = id;      this.text = text;      this.top = top;      this.left = left;      this.width = width;   }   //panel constructor   function panel(id, src){      this.id = id;      this.src = src;   }   //tabPanel constructor   function tabPanel(tab, panel){      this.tab = tab;      this.panel = panel;      this.writeTabPanel = writeTabPanel;   }

The preceding constructors define the objects required for the project. As you can see, tab objects have id, text, top, left, and width member variables. The code in this project implements panel content as external objects, so panel objects consist of an id and a source (src) for the external content. Each tabPanel object consists of a tab and a panel.

You need a way to write the tabPanel to the document, so the next step is to create a method to do the writing, called writeTabPanel(). Append the following code to the file you just started:

   //method that writes tabPanel implementation to page   function writeTabPanel(){      var tpText = ”;      tpText += ‘

‘;      tpText += this.tab.text;      tpText += ‘
‘;      tpText += ‘‘;      document.write(tpText);   }

Despite the complex look of the code, the writeTabPanel() method just builds a string containing

and