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:
<html>
<head>
<title>Tabbed UI Generator</title>
</head>
<body>
<form name="tgForm">
<table border="1">
<tr>
<td> </td>
<td>
<input type="radio" value="horiz"
name="orient" checked="true"
onFocus="orientation='horiz';">
Horizontal Tabs
<input type="radio" value="vert"
name="orient" onFocus=
"orientation='vert';">
Vertical Tabs
</td>
</tr>
<tr>
<td>Tab 1</td>
<td>ID:
<input type="text" name="tab1ID">Text:
<input type="text" name="tab1Text" > Top:
<input type="text" name="tab1Top"
size="4"> Left:
<input type="text" name="tab1Left"
size="4"> Width:
<input type="text" name="tab1Width"
size="4">
</td>
</tr>
<tr>
<td>Panel 1</td>
<td>ID:
<input type="text"name="panel1ID" > Src:
<input type="text" name="panel1Src" >
</td>
</tr>
<tr>
<td>Tab 2</td>
<td>ID:
<input type="text" name="tab2ID"> Text:
<input type="text" name="tab2Text" > Top:
<input type="text" name="tab2Top"
size="4"> Left:
<input type="text" name="tab2Left"
size="4"> Width:
<input type="text" name="tab2Width"
size="4">
</td>
</tr>
<tr>
<td>Panel 2</td>
<td>ID:
<input type="text" name="panel2ID" > Src:
<input type="text" name="panel2Src" >
</td>
</tr>
<tr>
<td>Tab 3</td>
<td>ID:
<input type="text" name="tab3ID"> Text:
<input type="text" name="tab3Text" > Top:
<input type="text" name="tab3Top"
size="4"> Left:
<input type="text" name="tab3Left"
size="4"> Width:
<input type="text" name="tab3Width"
size="4">
</td>
</tr>
<tr>
<td>Panel 3</td>
<td>ID:
<input type="text" name="panel3ID" > Src:
<input type="text" name="panel3Src" >
</td>
</tr>
<tr>
<td>Tab 4</td>
<td>ID:
<input type="text" name="tab4ID"> Text:
<input type="text" name="tab4Text" > Top:
<input type="text" name="tab4Top"
size="4"> Left:
<input type="text" name="tab4Left"
size="4"> Width:
<input type="text" name="tab4Width"
size="4">
</td>
</tr>
<tr>
<td>Panel 4</td>
<td>ID:
<input type="text" name="panel4ID"> Src:
<input type="text" name="panel4Src">
</td>
</tr>
<tr>
<td>Tab 5</td>
<td>ID:
<input type="text" name="tab5ID"> Text:
<input type="text" name="tab5Text" > Top:
<input type="text" name="tab5Top"
size="4"> Left:
<input type="text" name="tab5Left"
size="4"> Width:
<input type="text" name="tab5Width"
size="4">
</td>
</tr>
<tr>
<td>Panel 5</td>
<td>ID:
<input type="text"name="panel5ID" > Src:
<input type="text" name="panel5Src" >
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button"
onClick="buildTabbedUI(this.form)"
value="Build TabbedUI">
</td>
</tr>
<tr>
<td>Code</td>
<td>
<textarea rows="15" cols="70"
name="code"></textArea><
/td>
</tr>
</table>
</form>
</body>
</html>
Finally, add the following
<script> tag to the head of the document:
<script language="JavaScript">
var orientation = 'horiz';
function buildTabbedUI(form){
var tabText =
'<html>\n<head>\n
<title>TabbedUI</title>\n
<link rel="stylesheet" href="';
tabText += orientation;
tabText +='.css">\n
<script src="oopTabbedUI.js">
</scr' + 'ipt>\n
</head>\n
<body>
<script language="JavaScript">\n';
var firstTab, firstPanel;
for(i=1; i<6; i++){
if(notEmpty(eval('form.tab' + i +
'ID').value)){
tabText += 'var tabPanel' + i
+ ' = new tabPanel(new tab
("'; tabText += eval('form.tab' +
i + 'ID').value + '","';
tabText += eval('form.tab' +
i + 'Text').value + '",';
tabText += eval('form.tab' + i +
'Top').value + ',';
tabText += eval('form.tab' + i +
'Left').value + ',';
tabText += eval('form.tab' + i +
'Width').value + '), new panel
("';
tabText += eval('form.panel' + i +
'ID').value + '","';
if(i==1){
firstTab = eval('form.tab' + i +
'ID').value;
firstPanel = eval('form.panel' + i +
'ID').value
}
tabText += eval('form.panel' + i +
'Src').value + '"));\n';
tabText += 'tabPanel' + i +
.writeTabPanel();\n';
}
}
tabText += 'showPanel("' + firstTab + '","' +
firstPanel + '");\n';
tabText += '</scr' + 'ipt></body></html>';
form.code.value = tabText;
}
function strip(filter,str){
var i,curChar;
var retStr = '';
var len = str.length;
for(i=0; i<len; i++){
curChar = str.charAt(i);
if(filter.indexOf(curChar)<0)
//not in filter, keep it
retStr += curChar;
}
return retStr;
}
function notEmpty(str){
if(strip(" \n\r\t",str).length ==0)
return false;
else
return true;
}
</script>
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.
Digg
del.icio.us
Newvine
furl
StumbleUpon
BlinkList
Newsvine
Magnolia
Facebook
Tailrank
Slashdot
Technorati
Google Bookmarks
Yahoo Favorites
Windows Live
Ask
Previous Page
