After years of considering what types of controls to put in a Web page, the main technologies that work are ActiveX, Java and DHTML. I thought only Java or ActiveX could provide the types of controls I needed, until I saw the game Asteroids, written in DHTML. If you haven't seen it, here's the link: http://msdn.microsoft.com/workshop/Author/dhtml/tutorial/asteroids/asteroids.htm.

Although this is an old link now (in Internet terms), it's still impressive. DHTML (Dynamic HTML) is lightweight compared to Java and ActiveX. Taking this into account, along with a few other considerations, I lean toward a DHTML solution for creating controls inside a Web page.

Recently, middle-tier server software has added another dimension to the process of creating dynamic content. EAS from Sybase provides Jaguar and Dynamo, which can combine to drive a rich Web site. The reality of Web development is that there are a number of technologies that are in some sense "implied" when we start to work with DHTML, namely: JavaScript, Cascading Style Sheets (CSS) and the Document Object Model (DOM).

JavaScript is an interpreted language that the Web browser understands. It has become the dominant scripting language executing in the Web browser. CSS is a way to define groups of attributes that can be applied to HTML objects, and the DOM describes the relationship of objects in the browser.

In this article I'll show how to create, use and deploy a DHTML tab control using EAS. Using EAS's PSINCLUDE I will show how the tab control can work with EAS's Web DataWindow on one tab and simultaneously work with any other content on the other tabs.

Note: The example source code works with Microsoft's IE 4.0 and above browsers. It may work with Communicator 5.0 when it's completed, as there have been indications that Communicator 5.0 will provide full support for DHTML. But for now the statement made by Danny Goodman, author of Dynamic HTML - The Definitive Reference, published by O'Reilly, rings true: "We will be tantalized by features of one browser, only to have our hopes dashed when we learn that those features aren't available in the other browser." Fortunately, IE is a popular browser for corporate environments where the population that uses Web sites can be controlled vis-ˆ-vis which browser to use.

Three Files Needed for the Tab Control
I've included three files, two comprise the tab control itself (tab.js, tab.css) and one implements the tab control (tabcontrol.stm). These three files can be found on the PBDJ Web site, www.PowerBuilderJournal.com. Let's start with tabcontrol.stm and see how it pulls in the other files to create the tab control (see Listing 1.)

1. The first line of Listing 1 includes the CSS file that describes the appearance of the tabs. The outer area of the tab control is described by #tblTabControl (see tab.css on the Web site). The tab pages and tabs are described by the remaining classes, in the file except for the #divAAA and #divBBB classes, which describe the content on the tab page.
2. Listing 2 creates variables in a script area that will be used in the client-side browser:
   • The variable intNumTabs tells the tab control the number of tabs at runtime.
   • The variable intCurrentTab indicates the current tab. JavaScript is 0-based so arrays start at 0, not at 1 like PowerScript.
   • The array sArrayNames tells the tab control the names of the "tabs." Basically, the tabs are HTML DIV blocks, which are made visible and invisible when we select a tab. The next line creates the array with the names of the HTML DIV blocks.

Next, I'll explain how this works.

<script src="Script/tab.js"></script>

3. The second line of Listing 2 includes the client-side script for the tab control runtime execution. This file has one function that makes the tab control work.

   OnClickTab is called by the click event on the tab. If the current tab is selected it returns, doing nothing. If the new tab is not the current tab, it then creates a string that is dynamically built from the information contained in the array sArrayNames and the current tab indicator intCurrentTab. This string is then evaluated by the JavaScript routine, eval(), which causes the tab control to "switch" tabs. Now, that's dynamic!

   sRefStr = "document.all." +sArrayNames[intCurrentTab]+".style.visibility
   = 'visible';";
   eval(sRefStr);
   

HTML for the Tab Control
Now that the files needed for the tab control have been included, the HTML for the tab control can be examined (see Listing 3). The HTML table is wrapped in a <div> block, which aids in positioning the tab control. The table is given the CSS ID tblTabControl to control the outer appearance. There are two rows (<tr>) and three cells (<td>) per row in the table. The first row is given the CSS ID trTabList. This will create a region that will cause the cursor to appear as a hand. The three cells in this row define the appearance of the tab area. The classes are changed inside the loop in tab.js. This loop will assign clsTabSelLeft to any table cell on row 0 that is to the "left" of the currently selected tab.

tblTabControl.rows(0).cells(i).className = "clsTabSelLeft";

The other cells are treated in the same manner thus controlling the appearance of the tab pages to the left, right and the currently selected one. The third cell of the first row is given the class clsTabBlank and defines the appearance of the area remaining after the tabs. This area will cancel the click event so that a tab is not selected outside of a tab area. And in the same manner the second row defines the content appearance of the tab page.

By using eval() and a loop in tab.js the functionality now exists so you can easily add more tabs to your tab control. Simply duplicate the second "<td></td>" block in each table row for each additional tab you want (see Listing 4). You'll also need to add another element to:

sArrayNames = new Array("divAAA", "divBBB", "YourNewDiv");

And add an appropriate class like divAAA in tab.css to match the name.

What to Include on the Tab Page
The last part, Listing 5, indicates what to include on the tab page itself. Basically, this can be any other object. In this case the PowerSite object model PSINCLUDE is used to include the server-side generated output of the Web DataWindow on one page and the results of a PowerBuilder method from Jaguar in the other. The nice thing about the HTML <div> block is that anything within the block is affected by what happens to the block as a whole. Moreover, they can be absolutely positioned and have their content be scrollable. The DIV blocks are given ID's, which become part of the DOM structure for the resulting Web page. These IDs point to the CSS div classes, which cause the tab page to take on the CSS properties and allow the JavaScript in tab.js to find them (see code snippet on page 32). The last part is a terminating </div> block to match the starting <div>.

One point about PSINCLUDE: the file that is included won't need the HTML <head><body> tags usually associated with HTML pages. All you will want are the dynamo tags "<%%>" surrounding the Web DataWindow or other EAS controls. If what you want are some HTML radio buttons and forms, then the same will apply, just include the HTML objects desired without the <head><body> tags. Or you can mix them.

EAS brings a lot of power to what content can be generated. The tab control is a basic control for presenting content. This should give you sufficient information to use the tab control in your Web pages.