Microsoft introduced HTML Applications (HTAs) in Internet Explorer (IE) 5.0, so it's been around for a while. For me, at least, it was a nice little jewel tucked away awaiting discovery: HTA came to my attention when I decided to look into what those Microsoft Scripting Guys were using to run their Scriptomatic 2.0 tool.
An HTA is mainly just an HTML page with an .hta extension. However, an HTA isn't subject to the tight restraints or security constraints of an HTML page. Think of HTA as a wrapper for your VBScript scripts. You can use HTML code to create a slick UI to gather user input, and the user can perform actions simply by clicking on specific buttons that run your embedded VBScript subroutines.
My August 2005 article about HTA UIs, "Hooked on HTAs," (InstantDoc ID 46795) laid out the basics of the HTA structure and coding elements and demonstrated a simple input screen that had two input fields and two buttons. This article shows you how to set up more-versatile UIs that you can use to drive your VBScript scripts and utilities. We'll look at the HTA window and the various objects that you can employ to interact with the user. I'll also show you how to associate your VBScript subroutines with buttons.
The HTA Input Box
The VBScripting Using an HTA User Interface input box, which Figure 1 shows, consists of the following elements:
A textbox
A password box
A single-select list box
A multiselect list box
Three radio buttons
An On Change selection combo box
Three check boxes
A button for everything else in this list except for the On Change item. Each button executes an associated VBScript subroutine as a demo.
An Exit button
The VBScriptUI.hta file contains the code that creates the input box in Figure 1. You can download VBScriptUI.hta from the Windows Scripting Solutions Web site. Go to http://www.windowsitpro.com/windowsscripting, enter 47533 in the InstantDoc ID text box, then click the 47533.zip hotlink. To view the file, open it in Notepad. In that file, you'll notice HTML code for the following elements:
The textbox. The Change TextBox Color textbox is a regular textbox that accepts any type of input or keystrokes. In this application, its function is to gather a red-green-blue (RGB) combination from the user and change the textbox's interior color. The user is expected to enter an RGB value or a hexadecimal value in the form RGB(r,g,b) or #hhhhhh. Each RGB value can be any number from 0 to 255. The hex value can be any 6-character hex value from 000000 to ffffff. The leading pound sign (#) is optional.
This textbox includes error checking; an appropriate instructional pop-up message displays if the user keys in anything that won't produce a color. The code resets the RGB value to rgb(64,255,64), which overwrites the incorrect user input.
The password box.This box demonstrates the use of a password inputtype textbox. This textbox automatically masks user input with asterisks. The user can key in anything without restriction or error. When a user clicks Display Password, a message pops up that shows the unmasked password that the user entered.
The single-select list box.This simple list has three entries. When users click the drop-down arrow, they can choose Item 1, Item 2, or Item 3. When they click SingleSelect, a pop-up box displays the selected item.
The multiselect list box.This relatively simple list box has three items the user can choose from. But instead of being able to select only one item, the user can select any combination of items. To select multiple items, users need to hold down Ctrl or Shift. The Ctrl key allows non-adjacent selections with a click of the mouse button. The Shift key selects all items between the item selected and the previous selected item (inclusive). When the MultiSelect button is clicked, a message box displays all selected items.
The radio buttons.The user can choose any one of the three radio buttons at any time. When a user clicks RadioButton Selected, a message box displays which radio button is selected. Obviously, in a real-world application, the subroutine associated with this radio button would do more than just display what the user clicked. This example demonstrates that you can determine which radio button was selected and perform a specific action for that button.
The On Change combo box. This drop-down item doesn't use a button to launch the message showing what the user selected. It uses the onchange attribute of the drop-down selection box. For this field, the changing of the selection triggers the associated subroutine.
The check boxes.The user can select one or more of the three check boxes. When a user clicks the CheckBox Selected button, the subroutine associated with the onclick event displays a message for each box that's checked. Here again, you'd do something more than just display what the user selected in a real application.
The Exit button.The Exit button closes the application and the application window by using the short, succinct self.close method. When you use this method, you need to make sure that your subroutines include appropriate cleanup code, such as setting your variables to the Nothing keyword. Alternatively, you might run a cleanup subroutine when the Exit button is clicked instead of immediately closing the application.
Note that the buttons in this application trigger the VBScript subroutines. Each button has an individual onclick event that triggers a specific subroutine to run. In the On Change combo box, a user changing the selection triggers the subroutine. If you used this application as an example when writing your own application, you might have similar buttons, boxes, and text as well as similar subroutines. However, the code in your subroutines would be different.
Inside the Head Element
The code for the VBScripting Using an HTA User Interface input box is too long to print in its entirety, so I'll show only excerpts here. Listing 1 shows the head and style elements in VBScriptUI.hta, which define the input box features and appearance. Between the
and tags are the title and HTA:APPLICATION elements. The title element declares what will appear as the HTA's window title. It appears in the top pane of the application window. The seven lines of code in the HTA:APPLICATION element define the application window's style features. This example's application window has no scroll bar, can run only as a single instance, and will be maximized when opened. "Hooked on HTAs" includes a table that lists the available HTA:APPLICATION attributes and gives their possible values, including defaults.
The style element defines the look of the internal window of the application. In this case, it's defining the color, font, and margins. The background color in this application is buttonface--a nice shade of gray. The font identifies the name of the font and its point size, and the margins are expressed in pixels.
Prev. page
[1]
2
next page 
