The ABCs of HTAs: Scripting HTML Applications

HTAs

Add a Gradient Background to Your HTAs

OK, you might be able to fool your boss and your co-workers, but you can’t fool the Scripting Guys. You might tell everyone else that you’re interested in HTAs because the graphical user interface makes it quicker and easier for people to run scripts, and because the formatting capabilities of HTML enable you to produce richer and more informative reports. But we know the truth: you’re interested in HTAs because you, as a “mere” script writer, can create really cool-looking tools that rival commercial applications. That’s what you really find compelling about HTAs. We understand: image really is everything!

Unfortunately, there’s a problem: you’re a system administrator, not a graphic artist. How the heck are you supposed to create a cool-looking user interface? What can you do beyond coloring the background red or blue or green? (And using clip art is not an option, because you don’t want to have to distribute a bunch of .jpg files along with your HTA.)

Well, here’s one thing you can do: give your HTAs a nice gradient background. It looks cool, it’s easy to do, and the capability is built right into Internet Explorer; you don’t need .jpg files or .gif files or anything beyond your HTA itself. And, as you can see, the final result is actually kind of nice:

Gradiant Background

So how in the world did we do this? Relax; it’s far easier than it looks. In fact, all we did was apply the Gradient filter that’s built into Internet Explorer. Here’s the code (and, cross our hearts, this is all the code it takes):

<html>
<head>
<title>Gradient Example</title>

<HTA:APPLICATION 
     ID="objAutoRefresh"
     APPLICATIONNAME="Gradient Example"
     SCROLL="auto"
     SINGLEINSTANCE="yes"
>
</head>

<body STYLE="font:14 pt arial; color:white;
 filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr='#000000', EndColorStr='#0000FF')">

Is this cool or what?

</body>
</html>

The gradient itself is constructed as part of the <BODY> tag. Here’s the code that actually creates the gradient. Note that in addition to the gradient, we also defined the font size, family, and color in the <BODY> tag. But that’s optional; we could have specified font formats later, when we actually typed some text on the page.

Here’s the filter code:

filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr='#000000', EndColorStr='#0000FF')

We begin by defining the filter we’re planning to use: DXImageTransform.Microsoft.Gradient. We then define the following gradient properties:

  • GradientType. There are two types of gradients: horizontal (value of 1) and vertical (value of 0). We used a horizontal gradient for this example.

  • StartColorStr. A string value representing the starting color. For our gradient we started with black (#000000) and ended with blue (#0000FF). We’ll tell you how we came up with those color values in a moment.

  • EndColorStr. A string representing the end color for our gradient.

That’s it; specify the gradient filter, define those three property values, and you have a very spiffy background for your HTA.

Here’s another example. This one uses a vertical gradient, with a starting color of maroon and an ending color of pink. The code looks like this:

<html>
<head>
<title>Gradient Example</title>

<HTA:APPLICATION 
     ID="objAutoRefresh"
     APPLICATIONNAME="Gradient Example"
     SCROLL="auto"
     SINGLEINSTANCE="yes"
>

</head>

<body STYLE="font:14pt arial; color:white;
 filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#800000', EndColorStr='#DB7093')">

Is this cool or what?

</body>

And the HTA itself looks like this:

Gradient Background

And, yes: we get a little misty-eyed each time we look at it, too.

But there’s no time for that now; we’ve still got work to do. After all, what about those color values? Are we Scripting Guys able to just look at the color pink and go, “Hmmm, pink. Must be a #DB7093.”

Of course we can; can’t you? Oh, well, no shame in that. If for some reason you haven’t memorized all the Internet Explorer color table values just point your browser here:

https://msdn.microsoft.com/workshop/author/dhtml/reference/colors/colors.asp

That page includes a list of all the colors supported in Internet Explorer 4.0 and beyond.

And here’s something else we’ll mention, just to whet your appetite: there might actually be more things you can do to spiff up your HTAs than just add gradient backgrounds. For details, be sure and check back with us every month or so.