Creating a Windows HTA

How to Create an HTML Application for Windows

Oct 30, 2008
Mark Alexander Bain

Create an HTA - Mark Alexander Bain

This article shows how to build and HTA - a Windows GUI application that can be developed without the need for expensive additional software.

Anyone who has tried scripting in Windows will have found that the GUI (the Graphical User Interface) is very limited, in fact the only user interaction is via :

the command line
input boxes
message boxes

Each one is useful, but not very pretty and very long winded to use - if this was, for example, an application for obtaining the stock quotes for a number of companies from Yahoo! Finance, then the user may accept typing in two or three companies, but not ten or fifteen.

No, what the user would prefer to have is an application where they can drag and drop date, or use Combo (drop-down) boxes; which means, of course, that the developer will have to look into a full blown programming language, all the overheads that will incur.

That's unless the developer knows about HTAs - HTML Applications.

What is an HTA

An HTA is an application that uses HTML (HyperText Markup Language) as its user interface (just like any web page), but it can run without the restrictions built into web browsers. For instance a web browser script may not access local files or the user's network; and for all of this the developer just needs a text editor.

Creating an HTA

Any HTA consists of three sections:

the <HTA:Application> section controls the appearance of the HTA window
the <script> section contains the functionality of the HTA
the <body> section is where the GUI itself resides

This simple structure can be used to quickly develop a useful application - in this case one which will display a different message according the the selection of a drop-down box; and it's worth noting that both VBScript and Javascript can be used (as shown in this example):

<head>

<HTA:APPLICATION

ID="simplehta"

APPLICATIONNAME="A Simple HTA"

SCROLL="no"

SINGLEINSTANCE="yes"

</head>

'Set the title

document.title = simplehta.APPLICATIONNAME

Sub run_vbscript_button

'Find out which option has been selected

id = sel_company.selectedIndex

'Display the result

output_area.innerhtml = "VBScript says that the Yahoo! Finance code is " _

& sel_company.options(id).value

End Sub

</script>

function run_javascript_button () {

/*The Javascript does the same job, but in a slightly different way*/

var output_area = document.getElementById ('output_area');

var sel_company = document.getElementById ('sel_company');

var id = sel_company.selectedIndex

output_area.innerHTML =

"Javascript says that the Yahoo! Finance code is "

+ sel_company.options(id).value;

}

</script>

<body>

<option value=MSFT>Microsoft</option>

</select>

<input type="button" value="Run VBScript Code"

id="run_vbscript_button" onClick="run_vbscript_button">

<input type="button" value="Run Javascript Code"

id="run_javascript_button" onClick="run_javascript_button">

</body>

Conclusion

The HTA is not run via a web browser. Instead, if the code above is saved to a file with a .hta extension then it can be run by double clicking on its icon from Windows explorer. Of course, the file can also be moved to the Desktop or the start menu to create a simple desktop application - one that needs no additional software installing, just an ordinary Windows PC.

Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...