HTML Applications: Giving WSH a User Interface - Building the page
(Page 3 of 4 )
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.
Next: Taking it one step further >>
More Windows Scripting Articles
More By Nilpo
