Browse DevX
Sign up for e-mail newsletters from DevX


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




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Automate the Process
On 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>&nbsp;</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>&nbsp;</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.

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.
Thanks for your registration, follow us on our social networks to keep up-to-date