Automate the ProcessOn first glance, creating all of those external files seemed like more work than it was worth. But by modularizing all the code, it becomes much easier to create a Tabbed UI Generator. The generator can create a set of up to five tabPanel objects; however the number is arbitrary. Feel free to modify it to suit your needs.

I'll create form fields to hold the properties for the tabs and panels as well as a text area to display the code. You'll be able to copy and paste the code into a new file from there. Open up a new file and create the UI for the generator:

Save the completed file as tabbedUIGenerator.htm. This complicated-looking script lets you enter tab ids, values, and content sources, and then builds a string for an HTML page that includes the proper external files and tabPanel objects based on the entered data. You can cut-and-paste the result directly into an HTML page. You can test a live copy here.

Some of the helper functions I've included may look familiar to you as I borrowed them from my article Automate Your Form Validation. The functions ensure that the code processes only those rows in the table that contain data.

I've made some assumptions with this applicationmost notably that Tab1 and Panel1 should display when the page loads. I've also assumed that, at the very least, the Tab1 and Panel1 rows in the table will contain useful information.

One short warning: You can't embed a complete closing <script> tag inside the generated string. Instead, break the string into two separate concatenated strings, such as ".

I hope you'll find this tool useful, but more importantly, I hope you see the value in applying object oriented principles to a design problem. This is precisely the type of logic behind HTML editors such as Dreamweaver, GoLive, and FrontPage. The benefit to rolling your own automation processes is that you gain control over the generated code.

Tom Duffy , DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the College's in-house web design studio.