• Article

Hey, Scripting Guy!Flowers Blooming. Dialogs Popping. Spring Is Here.

The Microsoft Scripting Guys

Download the code for this article: HeyScriptingGuy2007_05.exe (151KB)

Ah, spring is here. And are we ever glad. After a winter of record rainfall, ice storms, snow storms, and wind storms—one of which sent a large tree crashing into one of the Scripting Guys’ backyards, missing the house by inches and sending the Scripting Dog into hiding behind the couch—spring is finally here, and we’re enjoying a little cool rain before some warmer Pacific Northwest rain sets in for the summer.

While we watch the drizzle outside, we thought this would be a good time to get a little adventurous with our scripting and look at HTML Applications (HTAs). And when we say adventurous, we mean it. We’re not going to do any kind of introduction here; we’re going to assume you already know what an HTA is and how to create one. If you don’t, you should check out the HTA Developers Center on the Script Center. In particular, you’ll want to read the two articles in the HTAs for Beginners section. Once you’ve done that, you’ll be all caught up and ready to come back here.

In this column, we’re going to show you how to create dialog boxes. Not only that, but we’ll show you how to pass information back and forth between the main HTA and the dialog box. Yes, the fresh air of spring really has made us ambitious, hasn’t it? Enjoy it while it lasts.

As you might know, there are two kinds of dialog boxes: modal and mode­less. The difference is that when you open a modal dialog box, you can’t return to the main window from which the dialog box was opened until you close the dialog box. When you open a modeless dialog box, you can move back and forth between the windows. However, if you close the main window, your modeless dialog box will also close.

Creating a modal dialog box works exactly the same way as creating a mode­less dialog box. The only difference is that to create a modal dialog box you call the ShowModalDialog function, and to create a modeless dialog box you call the ShowModelessDialog function. Both functions accept the same parameters. Let’s start by looking at a simple HTA that opens a modal dialog box (see Figure 1).

Figure 1 Simple starter dialog

<html> 
<head> 
<title>Modal Example</title>
<HTA:APPLICATION 
  APPLICATIONNAME=”MainModal”>
</head>

<script language=”VBScript”> 
Sub ShowDialog 
 intReturn = _
    ShowModalDialog(“modaldialog.hta”) 
 textbox.Value = intReturn
End Sub
</script> 

<body> 
<button onclick=”ShowDialog”>
 Show Dialog Box</button> <p>
<input type=”text” name=”textbox”>
</body> 
</html>

Here we’ve created an HTA titled Modal Example. In the <body> area of our HTA, we’ve added two elements: a button labeled Show Dialog Box and a textbox named textbox, both of which you can see in Figure 2. When you click the button, the ShowDialog subroutine runs.

Figure 2 Actual HTA modal dialog

Figure 2** Actual HTA modal dialog **

The ShowDialog subroutine is pretty simple. We call the ShowModalDialog function, passing as a parameter the name of the HTA file we want to display as the modal dialog box, in this case modaldialog.hta. (We’re assuming modaldialog.hta is in the same folder as this HTA. If it’s not, you’ll need to include the full file path here.)

We also capture a return value (int­Return) from ShowModalDialog. We display this value in the textbox. You’ll see in a moment how we get this return value. One important thing to note is that the call to ShowModalDialog will not return until the modal dialog box is closed. That means the return value won’t be assigned to the textbox until after the dialog box is closed.

Now let’s take a look at modaldialog.hta, the dialog box that our calling HTA opens (see Figure 3). In this HTA, we’ve created two elements: a listbox named listbox and a button labeled OK, as shown in Figure 4. We’ve added four items to the listbox labeled Option 1, Option 2, and the like, and assigned corresponding values, 1 through 4, to each of those items. When the OK button is clicked, the CloseWindow subroutine runs.

Figure 3 modaldialog.hta

<html> 
<head> 
<title>Modal Dialog Box</title>
<HTA:APPLICATION 
  APPLICATIONNAME=”ModalDialog”>
</head>

<script language=”VBScript”> 
Sub CloseWindow
  window.returnValue = listbox.Value
  window.Close 
End Sub
</script> 

<body> 
<select size=”3” name=”listbox”>
 <option value=”1”>Option 1</option>
 <option value=”2”>Option 2</option>
 <option value=”3”>Option 3</option>
 <option value=”4”>Option 4</option>
</select>
<p>
<input type=”button” id=”idBtn” value=”OK” onclick=”CloseWindow”> 
</body> 
</html>

Figure 4 HTA that represents the modal dialog box

Figure 4** HTA that represents the modal dialog box **

The CloseWindow subroutine is pretty simple. The first thing we do is read the value of the item in the listbox that has been selected and assign that value to the window.returnValue property. For example, if the user chose Option 2, the value 2 would be assign­ed to window.returnValue. We then call the window.Close method to close the dialog box.

At this point, control returns to the main HTA. Remember our call to ShowModalDialog:

intReturn = _
  ShowModalDialog(“modaldialog.hta”)

The return value assigned to intReturn is the value we assigned to window.returnValue in our dialog box HTA. So if we choose Option 2 in the dialog box, which assigns the value 2 to window.re­turnValue, intReturn will be equal to 2, and the following line of code displays that value to the textbox:

textbox.Value = intReturn

Now that we’ve seen how to get a value from a dialog box, let’s see how we’d get a value to a dialog box. This time we’ll use a modeless dialog box (see Figure 5), but remember, modal and modeless work the same, so this same process will work with a modal dialog box.

Figure 5 Going modeless

<html>
<head>
<title>Modeless Example</title>
<HTA:APPLICATION 
  APPLICATIONNAME=”ModelessMain”>
</head>

<script language=”VBScript”>
Sub ShowDialog
  intReturn = _
    window.ShowModelessDialog _
    (“modelessdialog.hta”, _
    lstServers.Value, _
    “dialogHeight:400px;dialogWidth:300px”)
End Sub
</script>

<body>
<select size=”1” name=”lstServers”>
 <option value=”server1”>Server1</option>
 <option value=”server2”>Server2</option>
 <option value=”server3”>Server3</option>
 <option value=”server4”>Server4</option>
</select>
<p>
<input type=”button” value=”Retrieve Processes” onclick=”ShowDialog”>
</body>
</html>

Figure 7 Data passed to modeless dialog

Figure 7** Data passed to modeless dialog **

This time we’ve created a dropdown listbox named lstServers (you can tell it’s a dropdown because the size is equal to 1). There’s also a button labeled Retrieve Processes. When the button is clicked, the ShowDialog subroutine runs. The ShowDialog subroutine has only one line, the call to the window.ShowModelessDialog function, as shown here:

intReturn = _
  window.ShowModelessDialog _
  (“modelessdialog.hta”, _
  lstServers.Value, _
  “dialogHeight:400px;dialogWidth:300px”)

The first parameter we pass to this function is the name of the HTA we want to run in the dialog box, in this case modelessdialog.hta. The second parameter is the Value property of our listbox. Remember, the Value property contains the value of the selected option in the listbox. So if the user selected Server2 from the listbox, the Value would be server2. This parameter is how we pass information to the dialog box. (If you want to pass multiple values, you could pass them in this parameter as an array or maybe a collection.)

We’ll see in a moment how the dialog box receives the value in this parameter. But first, notice we put in a third parameter:

“dialogHeight:400px;dialogWidth:300px”

This parameter contains a string that specifies the height and width we want for our dialog box. In this case, we’ve specified a height of 400 pixels (400px) and width of 300 pixels. As we saw in our modal example, we can leave this parameter blank and the dialog box will be displayed as the default size for the computer.

Now let’s take a look at modelessdialog.hta (in Figure 6) and see how the dialog box reads in the value that is passed to it.

Figure 6 modelessdialog.hta

<html>
<head>
<title>Modeless Dialog</title>
<HTA:APPLICATION 
  APPLICATIONNAME=”Processes”>
</head>

<script language=”VBScript”>
Sub window_onLoad
  strComputer = window.dialogArguments
  Set objWMIService = GetObject(“winmgmts:” _
    & “{impersonationLevel=impersonate}!\\” _
    & strComputer & “\root\cimv2”)
  Set colProcesses = objWMIService.ExecQuery   _
    (“Select * from Win32_Process”)

  strHTML = “<h1>” & strComputer & “</h1><p>”
  For Each objProcess in colProcesses
    strHTML = strHTML & objProcess.Name & _
       “<br>”
  Next

  DataArea.InnerHTML = strHTML
End Sub
</script>

<body>
<span id=”DataArea”></span>
</body>
</html>

In this HTA, the only element that we have specified is a span, which contains the full area of the dialog box. In our script section, we’ve defined a window_onLoad subroutine. This subroutine will run as soon as the HTA is opened (in this case, by the call to ShowModelessDi­a­log). Take a look at the first line in this subroutine:

strComputer = window.dialogArguments

We’re assigning to the variable strComputer the contents of the property window.dialogArguments. And what do you think is in this property? See, you must be waking up with the Spring too. That’s right, it’s the value passed in the second parameter of the call to ShowModelessDialog. If Server2 was selected in the main window, strComputer now contains the value server2.

The rest of the subroutine simply retrieves all the processes from strComputer and displays them in the span area. You can see the results of this operation in Figure 7.

Happily, you now have the whole summer to play with HTA dialog boxes. Unless, of course, you happen to live in the Southern Hemisphere, in which case winter is coming and you might have some difficulty if you wind up with as many power outages during your winter as we had around here during ours.

The Microsoft Scripting Guys work for—well, are employed by—Microsoft. When not playing/coaching/watching baseball (and various other activities) they run the TechNet Script Center. Check it out at www.scriptingguys.com.

© 2008 Microsoft Corporation and CMP Media, LLC. All rights reserved; reproduction in part or in whole without permission is prohibited.