HTML Applications: Giving WSH a User Interface

So you’ve been writing scripts for a while. You’re accustomed to the bland look of the Cscript window and the lack of substance of the Wscript environment. You need something with a little more substance; something that looks like a real application so that you don’t feel as though your programming skills are inferior.

If you’ve been reading my articles you’ve already learned how to interact with your users but there’s still something missing.  Your scripts have a lackluster shine at best.  Sure they may work like an application, but they just don’t look the part.  It’s time to add a UI.

A UI, or user interface, is the combination of windows and forms that make up an application’s desktop presence. For years we’ve grown used to seeing applications running inside of these visual containers. Not since the days of DOS have we seen interactive command prompt windows, so why should we believe that WSH would be stuck inside of this archaic mold? In fact, it’s not.

While WSH itself is forced to run within the constraints of the Cscript or Wscript environments, there is another Windows Scripting technology that uses WSH and yet has the ability to break away from this trip down memory lane.

That technology is known as HTML Applications. These are, in a sense, WSH scripts packaged inside of an HTML environment. This environment relies on both the Windows Script Host engine and Internet Explorer to provide scripters with a whole new scripting environment. One that is as powerful as it is tangible.

Okay, so HTML Applications, or HTAs, do not actually have windows and forms. In fact, they only run inside of a window and their forms consist of html pages; but with the proper design time the end-user experience is nearly identical.

All right, all right! Enough with the explanations already. You’re ready to see one of these in action and I have to admit that you won’t fully understand the concept until you do, so let’s get started.

{mospagebreak title=Creating your first HTA} 

Like all other scripts, HTAs are nothing more than simple text files. They use the .hta file extension and can be executed directly. They take the form of an html file. Those of you familiar with browser scripting will find making the transition very easy.

You’ll be able to take advantage of both the WSH environment as well as the browser DOM. Since HTAs execute in a subset of Internet Explorer, you’ll also be able to do most anything the browser itself can do. That means (among other things) that you have XHTML, HTML, CSS, and JavaScript at your disposal. If you can do it inside your browser, chances are good that you can do it in an HTA as well.

A basic HTA script looks quite similar to a traditional HTML page. There are two things that I find quite refreshing about HTAs as opposed to web development. In an HTA, you’re always using Internet Explorer. This eliminates a need for cross-browser compatibility. Second, you don’t have to concern yourself with validation.  While I recommend getting used to XHTML’s “table-less” design, you can freely use them in HTAs and no one will ever know the difference.

<html>

<head><title>My HTA</title>

<HTA:APPLICATION ID="oHTA";

  APPLICATIONNAME="Visual Ping";

  BORDER="thin";

  BORDERSTYLE="normal";

  SINGLEINSTANCE="no";

 />

</head>

<body>

</body>

</html>

As you can see, an HTA is constructed of simple HTML. The only difference is the inclusion of the HTA:APPLICATION object. The addition of this object is what allows you to use the HTA DOM. You can set its exposed properties in the form of attributes.  For a complete list of attributes, please visit the MSDN HTML Application Reference.

Notice the inclusion of the ID attribute. This allows us to assign a reference to the HTA:APPLICATION object. You will use this reference later in your script whenever you need to access the properties or methods associated with the HTA DOM.

This code doesn’t do much at this point. A blank page isn’t very useful. We need to add some HTML.

We’re going to make an HTA that performs a simple ping operation. It will then return the result back into our window. But before we get too involved, let’s get some simple stuff out of the way.

{mospagebreak title=Building the page} 

To begin with, we’re going to need some HTML for the page layout. This is pretty simple. I’m displaying a small form for the user to enter a hostname or IP address along with a button that will fire it off.

<p><span class="title">Visual Ping Utility</span><hr><br>

    <p>Hostname: <input type="text" size="40" name="T1">

    <input type="submit" name="B1" value="Submit"></p>

This is about as simple as you can get for a page. Be sure to place this code between the body tags. You’ll probably notice that I haven’t included an action for my form (or even the form element). This is because I’m not going to redirect anywhere. Instead, I’m going to build my script off of the button event instead.  You’ll see this later.

<div id=Output></div>

In the meantime, we need somewhere to put our output. An empty DIV will do nicely. Go ahead and place that directly under the last bit of HTML you just used.

Now we can start building our script, but before we get too involved, let’s make sure that our window displays the size we want it to. Add the following script between the <head> and </head> tags.

<script type="text/vbscript">

Sub Window_OnLoad

   self.resizeTo 600, 400

End Sub

</script>

The subroutine you’ve just added is what’s known as an event procedure. This is a procedure that executes in response to a specific event. Typically you would need to bind to its source; however, in this case it is available natively.

The OnLoad event is fired by the Window object (browser window) whenever a page is fully loaded. In VBScript you denote an event procedure with the object_event naming convention. In this case, we’re telling the HTA to resize itself to 600 by 400 pixels once it has loaded. Be sure to use the <script> tag.  Remember, we’re building in HTML.

Now we’ll add the rest of our script within the same <script> tag as well.

Set WshShell = CreateObject("WScript.Shell")

strOut=""

 

Sub B1_onClick

   cmdarg="%comspec% /c ping.exe " & T1.value

   Set objExCmd = WshShell.Exec(cmdarg)

  

   strOut=objExCmd.StdOut.ReadAll

  

   Set regEx = New RegExp

   regEx.Pattern = "[fnrv]+"

   regEx.Global = True

   regEx.Multiline = True

   strOut = regEx.Replace(strOut, "<br>")

   Output.innerHTML= strOut

End Sub

Notice that I’ve used another event procedure. This one is attached to the button we added previously.  (Notice how I’ve used the element’s ID as the object). Here we’re just telling the HTA to execute this code any time that the button is clicked.

The code is pretty simple. When it runs, it takes the value from the text box and issues it to the ping command. It then captures the output from the ping command and writes it dynamically inside of our empty DIV.

The purpose of the regular expression is to take the ping output and reformat it as HTML. We’re just removing any line breaks and replacing them with HTML’s <br> tag.

Save your file and give it a test run.  You should be able to enter a hostname or IP address and see the results back in the same window after pressing the button.

{mospagebreak title=Taking it one step further} 

At this point you have your first working HTML Application, albeit a little bland.  Let’s take a few minutes to dress it up a bit. Remember, we are working with an HTML page so let’s go ahead and add some CSS styling. Make sure it goes between the HEAD tags.

<style>

body {

   background-color:#E8E8E8;

   font:13px "Century Gothic";

   color:#000;

 

hr {

   color:#000;

 

.title {

   font-weight:700;

 

</style>

Again, this is a simple CSS example. We’ve added a background color, fixed up the font, and styled the horizontal rule. It’s nothing fancy, but if you save and run this again, you’ll see what a difference a little style makes.

Now that you have a working HTA, all that’s left it to have some fun with it. Try dressing it up some by adding images and tables. Anything you could put in a web page is fair game to try. Remember that images and scripts should be relative to the directory where the HTA executes and MAY be web references.

Thanks for playing along. I hope you enjoyed the first segment in this series.  Stayed tuned for part two when we take a look at some more advanced HTA coding techniques.

In the meantime, have some fun. Until next time, keep coding.

Join the conversation
about this article

View thread