When the new settings, described in Adding Application Settings, were added to the Application Settings Web page (AppSetting.asp), it looked very crowded, and the page was too large to see all the fields without scrolling. Visually the form seemed chaotic. The F & M developers rewrote the Application Settings Web page so that the new version of the Web page has an organized and coherent user interface.
Features of the rewrite include:
The content of the page was already organized into four functional areas (Exchange, Time Limits, Critique, and Miscellaneous). The script on the rewritten AppSetting.asp page uses DIV sections to create areas on the form that can expand and collapse independently. The following code fragment shows you how the Exchange DIV section is coded. The script for the Exchange, Time Limits, Critique, and Miscellaneous DIV sections is very similar, and you can examine the full script in AppSettings.asp.
<div ID="Exchange">
<table width="65%" COLS="2" BORDER="0">
<tr><td> Server:</td><td><input type="text" name="ExchangeServer" value="<%= Application("ExchangeServer") %>"></td></tr>
<tr><td> Organization:</td><td><input type="text" name="ExchangeOrg" value="<%= Application("ExchangeOrg") %>"></td></tr>
<tr><td> Site:</td><td><input type="text" name="ExchangeSite" value="<%= Application("ExchangeSite") %>" ></td></tr>
<tr><td> Admin Account (Optional):</td><td><input type="text" name="ExchangeAdmin" value="<%= Application("ExchangeAdmin") %>"></td></tr>
<tr><td> Admin Password(Optional):</td><td><input type="password" name="ExchangePass" value="<% 'Keep original value unless overwritten %>"></td></tr>
<tr><td COLSPAN="2"><font SIZE="-2"> </font></td></tr>
</table>
</div>
Assigning multiple child attributes to a parent tag creates an association between the children. For example, in the following code fragment, the DIV tag with ID = Title1 is the parent tag and it has two child attributes: Child1 = Exchange and Child2 = Image1. One child is an IMG tag and the other a DIV tag with ID= Exchange.
<div><img CLASS="COLLAPSINGIMAGE" CHILD1="Exchange" CHILD2="Title1" ID="Image1" src="../images/plus.gif" WIDTH="15" HEIGHT="15">
<b CLASS="COLLAPSINGTITLE" CHILD1="Exchange" CHILD2="Image1" ID="Title1">Exchange</b>
</div>
Clicking the Plus or the Minus image, <ID = Image1>, makes it the parent tag and it controls the display of the child attributes having <ID = Title1> and <ID = Exchange>. Conversely, when the label named Exchange, <ID = Title1>, is clicked it becomes the parent tag and <ID = Exchange> and < ID = Image1> are now the children. This mapping allows the display of the page to change when the Plus or the Minus is clicked.
<div><img CLASS="COLLAPSINGIMAGE" CHILD1="Exchange" CHILD2="Title1" ID="Image1" src="../images/plus.gif" WIDTH="15" HEIGHT="15">
<b> CLASS="COLLAPSINGTITLE" CHILD1="Exchange" CHILD2="Image1" ID="Title1">Exchange</b>
</div>
<div ID="Exchange">
...
</div>
The supporting function that maps this parent-child relationship is the expandCollapse function. This function is called when the mouse is clicked anywhere on the form and the function identifies where the click occurred.
oSource = event.srcElement;
If the source of the click is a label with className = "COLLAPSINGTITLE" or an image with className = "COLLAPSINGIMAGE" the parent-child relationship is remapped.
if (oSource.className == "COLLAPSINGTITLE")
{
oChild1 = document.all(oSource.getAttribute('CHILD1'));
oChild2 = document.all(oSource.getAttribute('CHILD2'));
if (oChild1.style.display=='none')
{
//alert('Expanding: ' + oSource.getAttribute('CHILD1'));
theForm.elements('F_'+oSource.getAttribute('CHILD1')).value = 'True';
oChild1.style.display='';
oChild2.src='../images/minus.gif';
}
else
{
//alert('Collapsing: ' + oSource.getAttribute('CHILD1'));
theForm.elements('F_'+oSource.getAttribute('CHILD1')).value = 'False';
oChild1.style.display='none';
oChild2.src='../images/plus.gif';
}
}
else if (oSource.className == "COLLAPSINGIMAGE")
{
oChild1 = document.all(oSource.getAttribute('CHILD1'));
if(oChild1.style.display=='none')
{
//alert('Expanding: ' + oSource.getAttribute('CHILD1'));
theForm.elements('F_'+oSource.getAttribute('CHILD1')).value = 'True';
oChild1.style.display='';
oSource.src='../images/minus.gif';
}
else
{
//alert('Collapsing: ' + oSource.getAttribute('CHILD1'));
theForm.elements('F_'+oSource.getAttribute('CHILD1')).value = 'False';
oChild1.style.display='none';
oSource.src='../images/plus.gif';
}
}
else
return
//alert('Expanding: ' + oSource.getAttribute('CHILD1'));
theForm.elements('F_'+oSource.getAttribute('CHILD1')).value = 'True';
oChild1.style.display='';
oSource.src='../images/minus.gif';
When the administrator clicks the Plus or the label next to it (Exchange, Time Limits, Critique, or Miscellaneous), script shown in Collapsing and Expanding Nodes executes and the Web page appears as shown here:
When the administrator clicks the Minus or the label next to it (Exchange, Time Limits, Critique, or Miscellaneous), script shown in Collapsing and Expanding Nodes executes and the Web page appears as shown here:
