Inside the Script Element
The script element in VBScriptUI.hta identifies VBScript as the scripting language and contains seven subroutines. The subroutines are where the real work of the application occurs. The HTA input box is mainly a way for you to acquire user input and for the user to select one or more processes to perform. You'll generally have a subroutine for each button in your HTA input box. I won't go into the details of each subroutine here, but a few subroutines warrant some explanation:
The Window_Onload subroutine, which Listing 2 shows, executes when the HTA opens. This is a good place to do upfront work that doesn't require user interaction.
The RadioButtons subroutine, which Listing 3 shows, evaluates whether a radio button is selected. You use the Checked property of the object. You also need to indicate which button you're evaluating. For example, to check the first radio button, you'd use the following code:
If RadioButton(0) _.Checked Then ...
As you can see, radio buttons are structured as an array. Note that the first element number is 0.
The ChBx subroutine, which Listing 4, page 4, shows, also uses the Checked property to determine whether any check box is selected.
However, check boxes aren't
structured like an array. You evaluate them by their names. For
example:
If CheckBox1.Checked Then ...
If CheckBox2.Checked Then ...
If CheckBox3.Checked Then ...
The SelectMulti subroutine, which Listing 5, page 4, shows, uses the Selected property to evaluate multiselect items as an array. To evaluate whether items are selected, you can use a For...Next statement and code like this:
If (MultiSelect.Options(i) _.Selected) Then ...
Inside the HTA Body
You define the UI buttons, boxes, and drop-down lists inside the body of the HTA. Many attributes are associated with HTML objects, but here I'll list the important attributes that you should be aware of:
In this application, the input type attribute can be "button", "text", "radio", "checkbox", or "password". You can group together radio buttons (input type="radio") as long as they have the same name attribute. However, when you group them, only one button can be enabled at a time. You can group check boxes (input type="checkbox") by their value attribute. After opening the application, the user can select any number of the available check boxes.
The name attribute specifies the name of the object. You can use it in your VBScript code to modify or display the value of the object or field. You refer to a specific item value by its name, followed by a period and the value property.
For example, I use the following code to display the contents of the password textbox object when a user clicks the password button:
MsgBox passwordtextbox.value
I clear the password entry box by replacing the value with an empty string with this code:
passwordtextbox.value = ""
You use the value attribute of a Textbox object to set, change, or display the value of that object. The first textbox, for example, initially contains rgb(192,0,0) when the application is opened. A button's value attribute is simply the text on the button face.
The onclick attribute (you could think of it as a method), which I used extensively throughout this demo, refers to an action to perform. With the exception of the Exit button, all onclick actions in this example are linked to subroutines. To associate a subroutine with an onclick attribute, set it equal to the subroutine name. For instance, you'd use onclick="changecolor" for the ChangeColor button to run the routine that changes the background color of the first text input box.
Drop-down lists or selection boxes begin with the select size attribute. Select indicates that you can make a selection, and size indicates how many selections should be visible to the user. You set the attribute to the number of selections you want to display. For example, select size="3" shows the first three selections of the dropdown list. Note that if you want to create a multiselect box in which a user can select more than one item, you must include the multiple attribute. You must also create each drop-down item with the option statement. If you want an item to be selected automatically when the application starts, you need to use the selected attribute as I did in the code <option selected value="Item1">
Item1</option>.
The onchange attribute (think of it as an event), which I used in the On Change drop-down list example, is similar to the onclick attribute in that it performs an action. However, this attribute's action takes place when an item in the selection box changes. When this object changes, it triggers the associated subroutine--in this case, the OnChangeEx subroutine.
The last item of importance is the Exit button. In this demo, it closes the application by using the onclick attribute, but instead of the button calling a subroutine, the action performed is simply self.close.
Change for the Better
HTAs let you create versatile UIs that users will find easy to use. With HTAs, you'll find it much easier to gather a wide variety of user input from within one application and to perform any number of basic or complicated tasks with just a little bit of HTML experience.
End of Article
Prev. page
1
[2]
next page -->
