Generate Tabbed Interfaces Automatically With JavaScript OOP-2 : Page 2

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 += '<div id="';
      tpText += this.tab.id;
      tpText += '" class="tab" style="top:';
      tpText += this.tab.top;
      tpText += ';left:';
      tpText += this.tab.left;
      tpText += ';width:';
      tpText += this.tab.width;
      tpText += '" onClick="showPanel(\'';
      tpText += this.tab.id + '\',\'' + this.panel.id;
      tpText += '\')" onMouseOver="hilite(this)" 
         onMouseOut="unHilite(this)">';
      tpText += this.tab.text;
      tpText += '</div>';
      tpText += '<iframe id="';
      tpText += this.panel.id;
      tpText += '" class="panel" src="';
      tpText += this.panel.src;
      tpText += '"></iframe>';
      document.write(tpText);
   }

Despite the complex look of the code, the writeTabPanel() method just builds a string containing <div> and <iframe> elements and their associated events so the tabPanel will function properly.

Next you need to write some methods to handle the events that the tabPanel fires after it has been written to the page. Add the following code to your file:

   //document vars and methods
   var currentPanel = '';
   var currentTab = '';
   function showPanel(tab,panel){
      hidePanel(currentPanel);
      document.getElementById(panel).
         style.visibility = 'visible';
      currentPanel = panel;
      setState(tab);
      currentTab = tab;
   }
function hidePanel(panel){
      if(currentPanel!='')
         document.getElementById(panel).
            style.visibility = 'hidden';
   }
   function hilite(tab){
      tab.style.backgroundColor = '#ddddff';
   }
   function unHilite(tab){
      tab.style.backgroundColor = '#ffffff';
   }
   function setState(tab){
      if(currentTab!='')
         document.getElementById(currentTab).
            style.color = 'navy';
      document.getElementById(tab).style.color = 'red';
   }

The methods above handle all the user interaction with the UI. Save the file as oopTabbedUI.js in an empty directory.

Previous Page

Next Page