There are a number of possible strategies.
One is to simply keep the logic in one or more external .VBS files. This works for simple HTAs, but eventually you are once again faced with complexity.
In more complicated HTAs you may have any number of external ("dialog") windows, or multiple "panels" or frames. One way to handle this is to use conventional HTML frames. Another is to use iframes. In either case, the
parent object can be useful.
Here is a trivial example, using <IFRAME> and
parent:
main.hta
Code:
<HTML>
<HEAD>
<HTA:APPLICATION
scroll="no">
<STYLE>
BODY {background-color: #6666cc; margin: 0}
IFRAME {width: 100%}
.clsHeader {background-color: #333399; text-align: center;
color: #ffffff; font-size: 120%}
.clsNavBar {background-color: #ccccff; width: 120px;
vertical-align: top}
.clsNav {text-decoration: underline; color: #3333cc}
.clsNavSel {text-decoration: underline; color: #ff6666}
.clsPanel {background-color: #ffcccc;
vertical-align: top}
</STYLE>
<SCRIPT language="VBScript" defer>
'Define application globals.
Dim lngTotal
Dim strMessage
Sub NavHiTest(ByVal N, ByVal Candidate)
If N Is Candidate Then
Candidate.className = "clsNavSel"
Else
Candidate.className = "clsNav"
End If
End Sub
Sub NavHi(ByVal N)
NavHiTest N, navFirst
NavHiTest N, navSecond
End Sub
Sub navFirst_onclick()
NavHi navFirst
document.all.ifrPanel.src = "first.htm"
End Sub
Sub navSecond_onclick()
NavHi navSecond
document.all.ifrPanel.src = "second.htm"
End Sub
Sub window_onload()
window.resizeTo 620, 220
End Sub
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="100%" height="100%">
<TR>
<TD colspan="2" class="clsHeader">
Total: <SPAN id=spnTotal>0</SPAN>,
Message: <SPAN id=spnMessage>*none*</SPAN>
</TD>
</TR>
<TR>
<TD class="clsNavBar">
<DIV id="navFirst" class="clsNav">First Panel</DIV>
<DIV id="navSecond" class="clsNav">Second Panel</DIV>
</TD>
<TD class="clsPanel">
<IFRAME id="ifrPanel" frameborder="no" scrolling="no"
application="yes" allowtransparency="true"
src="none.htm">
</IFRAME>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
none.htm
Code:
<HTML>
<BODY bgcolor="transparent">
</BODY>
</HTML>
first.htm
Code:
<HTML>
<HEAD>
<STYLE>
BODY {background-color: transparent;
margin: 0}
INPUT#btnTotal {width: 60px}
</STYLE>
<SCRIPT language="VBScript">
Sub btnTotal_onclick()
With parent
.lngTotal = .lngTotal + CLng(txtVal.value)
.spnTotal.innerText = CStr(.lngTotal)
End With
End Sub
Sub window_onload()
txtVal.focus
End Sub
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="100%">
<TR>
<TD width="120">Value to add:</TD>
<TD><INPUT type="text" id="txtVal"></TD>
</TR>
<TR>
<TD></TD>
<TD>
<INPUT type="button" id="btnTotal"
value="Total it">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
second.htm
Code:
<HTML>
<HEAD>
<STYLE>
BODY {background-color: transparent;
margin: 0}
INPUT#txtMessage {width: 100%}
INPUT#btnPost {width: 60px}
</STYLE>
<SCRIPT language="VBScript">
Sub btnPost_onclick()
parent.spnMessage.innerText = txtMessage.value
End Sub
Sub window_onload()
txtMessage.value = parent.spnMessage.innerText
If txtMessage.value = "*none*" Then
txtMessage.value=""
End If
txtMessage.focus
End Sub
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="100%">
<TR>
<TD width="120">Message:</TD>
<TD>
<INPUT type="text" id="txtMessage"
maxlength="50">
</TD>
</TR>
<TR>
<TD></TD>
<TD>
<INPUT type="button" id="btnPost"
value="Post it">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Yes, this is probably more verbose than need be to illustrate the point.
The important thing is to look at the "global data" items declared in the script block in
main.hta and the references to them via
parent in both
first.htm and
second.htm.
This can give you good data encapsulation, code isolation, and general modularity by making the "panels" or frame pages separate. At the same time you still have access to global data or even object references.
If one wanted to go further, the script blocks could reference external .VBS files and the style blocks could be in separate .CSS files as well. Sometimes this is more pleasing to the "separate your presentation from logic" fans. Personally I think it's overkill for HTA development, though your mileage (and opinion) may vary.