Adding a Splash Screen to an HTA
Scripting Week 3: Kick It Up a Notch
With Scripting Week 3 we have two major objectives. One, we want to show you how to add some useful functionality (like dialog boxes and GUI interfaces) to your system administration scripts. That’s really our main goal: helping you find ways to make your scripts faster and more efficient.
In addition to that, however, we also want to show you how to add a little bit of flair and pizzazz to those same scripts. After all, if you can make your script look a tad bit more professional without having to put in a lot of extra work, well, why not?
But what exactly do we mean by making your scripts “a tad bit more professional”? Well, the idea is to try and make your scripts look and feel more like finished applications.
For example, most applications feature a “splash screen” upon startup, a secondary screen that pops up for a few seconds and displays the application name and copyright information. You know, something like this:
What that means, of course, is that if you’re creating an HTA (HTML Application) then you might as well try to keep up with the Joneses and add a splash screen to your application as well. For example, you might want to display a very simple little splash screen each time the HTA starts up:
But wouldn’t a splash screen like that require a lot of extra work? Well, you know what they say: if it took a lot of work you’d never find the Scripting Guys doing it. Instead a splash screen takes no more code than this:
<html>
<head>
<title>Simple Splash Screen</title>
</head>
<SCRIPT LANGUAGE="VBScript">
Sub Window_OnLoad
iTimerID = window.setInterval("ShowSplash", 5000)
End Sub
Sub ShowSplash
Splash.Style.Display = "None"
Main.Style.Display = "Inline"
End Sub
</SCRIPT>
<body bgcolor="buttonface">
<DIV id="Splash" STYLE="Background-color:white;Height:200;Width:400;
Border:0.1mm solid black;position:relative;top:100;left:175;font:14pt arial;">
<CENTER>
<br><br>
A Sample HTA<br>
The Microsoft Scripting Guys<br><br><br>
<font size="2">Copyright 2005 Microsoft Corporation. All rights reserved.</font>
</CENTER>
</DIV>
<DIV id="Main" STYLE="display:none;position:absolute">
<input type="radio" name="RadioOption" value="atl-dc-01">atl-dc-01<BR>
<input type="radio" name="RadioOption" value="atl-dc-02">atl-dc-02<BR>
<input type="radio" name="RadioOption" value="atl-dc-03">atl-dc-03<P>
<input id=runbutton class="button" type="button" value="Run Script">
</DIV>
</body>
</html>
Before we delve into the code let’s briefly explain how the splash screen works. When you create an HTA you usually put all your text, controls, and other goodies directly within the <BODY> tag. For example:
<body> <H1>Here’s an H1 heading.</H1> </body>
This time around we’re not going to do that. Instead, we’re going to create two separate <DIV> tags. Our first <DIV> will contain the HTML coding for our splash screen; the second <DIV> will contain our text, controls, and other goodies. When the HTA starts only the first <DIV> (the splash screen) will be visible. At the same time we’ll start a timer that runs for 5 seconds; when time is up we’ll run a script that hides the splash screen and then displays the second <DIV>, the one that contains all user interface elements for our HTA. It’s not the fanciest thing in the world, but it works. And, best of all, it doesn’t require a lot of extra coding.
Let’s take a quick look at our two <DIV> tags. The HTML code for our splash screen looks like this:
<DIV id="Splash" STYLE="Background-color:white;Height:200;Width:400; Border:0.1mm solid black;position:relative;top:100;left:175;font:14pt arial;"> <CENTER> <br><br> A Sample HTA<br> The Microsoft Scripting Guys<br><br><br> <font size="2">Copyright 2005 Microsoft Corporation. All rights reserved.</font> </CENTER> </DIV>
Needless to say, the stuff that goes in between the <DIV> and </DIV> tags is entirely up to you; that can be any valid HTML, including pictures. What we need to focus on are the parameters included with the <DIV> tag itself:
Parameter | Description |
id="Splash" | The name given to the <DIV>. This enables us to manage the <DIV> programmatically. (You know, do things like run a script that hides the <DIV> after 5 seconds. |
Background-color:white | Background color for the <DIV>. We chose white just to ensure a contrast between the splash screen and the HTA body background color (buttonface). Obviously you can color your splash screen any way you like. |
Height:200 | Height of the <DIV>, in pixels. |
Width:400 | Width of the <DIV>, in pixels. |
Border:01.mm solid black | Just for the heck of it we’re putting a 0.1 millimeter-thick solid black border around the <DIV>. This helps create the illusion that our splash screen is floating above the HTA itself. |
position:relative | The position parameter – along with the top and left parameters – is crucial. Setting the position to relative and specifying values for the top and left borders of the <DIV> causes our splash screen to be centered within the HTA, which is exactly what we want. |
top:100 | Top border for the <DIV> (100 pixels from the top of the application window). We hard-coded these values based on the default size of an HTA. You could also programmatically set the position of the <DIV>. |
left:175 | Left border for the <DIV> (100 pixels from the left side of the application window). |
font:14pt arial | While we were at it we decided to go ahead and specify a default font and font size. |
For this sample HTA our GUI interface consists of a few radio buttons and a push button:
<DIV id="Main" STYLE="display:none;position:absolute">
<input type="radio" name="RadioOption" value="atl-dc-01">atl-dc-01<BR>
<input type="radio" name="RadioOption" value="atl-dc-02">atl-dc-02<BR>
<input type="radio" name="RadioOption" value="atl-dc-03">atl-dc-03<P>
<input id=runbutton class="button" type="button" value="Run Script">
</DIV>
Again, the controls and HTML tags inside the <DIV> don’t really matter. What does matter are the parameters applied to the <DIV> tag:
Parameter | Description |
id="Main" | The name given to the <DIV>. |
display:none | This ensures that this <DIV> (and thus our GUI interface) is not visible when the HTA starts. |
position:absolute | Why absolute instead of relative? Well, this time we want the <DIV> to be jammed up against the top-left edge of the application window; we don’t want to center it or do anything fancy with it. Thus we set the position to absolute. |
OK, so much for the HTML layout. Now let’s take a look at the two scripts that manage the display of the splash screen.
To begin with, we have a Window_OnLoad subroutine that, like all Window_OnLoad subroutines, automatically runs each time the HTA starts or is refreshed:
Sub Window_OnLoad
iTimerID = window.setInterval("ShowSplash", 5000)
End Sub
As you can see, there isn’t much to this subroutine: all it does is use the setInterval method to create a timer that – after 5 seconds (5,000 milliseconds) – calls the subroutine ShowSplash.
That subroutine is pretty simple, too:
Sub ShowSplash
Splash.Style.Display = "None"
Main.Style.Display = "Inline"
End Sub
Two lines of code: the first line hides the splash screen <DIV> and the second displays our main <DIV>, the one with all the controls and stuff. That’s all we have to do.
Remember, your splash screen is just an HTML container: you can add pictures, add animation, do whatever you want to spiff it up even more. For example, here’s a simple little addition that adds a drop shadow effect and a gradient background to the splash screen:
<DIV id="Splash" STYLE="Height:200;Width:400;Border:0.1mm solid black;
position:relative;top:100;left:175;font:14pt arial;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#4169E1', EndColorStr='#F0F8FF')
progid:DXImageTransform.Microsoft.dropshadow(OffX=10, OffY=10,
Color='gray', Positive='true')">
All we’ve done is add a filter parameter and specify the Drop Shadow multimedia filter and the Gradient background filter. What does that buy us? Well, it buys us a splash screen that now looks like this:
Considering the amount of “work” this took, that’s not too bad. Not too bad at all.
