This article may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist. To maintain the flow of the article, we've left these URLs in the text, but disabled the links.
|
Writing HTML Applications for Internet Explorer 5.0
Scott Roberts |
Ever wish you could write your Windows-based applications in HTML? Now you can. With Internet Explorer 5.0, you can easily convert your HTML pages to HTML Applications.
This article is adapted from Programming Microsoft Internet Explorer 5.0 by Scott Roberts (Microsoft Press, 1999). |
Writing applications for Microsoft® Windows® usually requires that you know at least one, and sometimes several, programming languages and development tools. Depending on the type of application you are creating and your particular preference, you might decide to use Microsoft Visual C++®, Visual Basic®, or Visual J++®. But what you need to know doesn't end there! Creating an application for Windows 95, Windows 98, or Windows NT® often involves using the Win32® API, which potentially means learning hundreds of functions. And if you're programming with Visual C++, you might have to learn to program by using the Microsoft Foundation Classes (MFC) or the Active Template Library (ATL). If your application needs to use COM, as many Internet applications do, you have to understand the COM architecture and how to use COM interfaces.
Learning all of these technologies can be quite overwhelming and time-consuming. What if you could apply your knowledge of Dynamic HTML (DHTML) and script to writing Windows-based applications? With Microsoft Internet Explorer 5.0 you can. Internet Explorer 5.0 introduces a new technology known as HTML Applications (HTA). An HTa is a full-fledged Windows-based application that you can create by using only DHTML and scriptin short, it's an HTML document that runs as a Windows-based application. In its simplest form, you can even create an HTa by using only HTML, but it would be staticjust like a Web page that contains only HTML isn't an interactive application. Adding DHTML and script to your HTa is the best way to provide a dynamic experience for your users. When you create HTAs, the possibilities are endless. Any task you can perform through a normal Web page with DHTML, script, and ActiveX® controls can also be performed in an HTA. An HTML Application even provides many advantages over a standard Web page. First, an HTa runs in its own window and not in the Internet Explorer window, where Web pages are displayed, so it appears to your users to be a normal Windows-based applicationbecause it is. Second, unlike a Web page, an HTa is trustedit's not considered a security risk by the browser. If your HTa code contains frames, you can write script in one frame that accesses elements in another frame, even if the other frame exists in a different domain. You can't do this with a normal Web page that is running within Internet Explorer. An HTML Application is considered trusted because it contains only the menus, toolbars, icons, and other elements that you create. An HTa provides all the advantages that a normal Web page offersthe DHTML Object Model (DOM), scripting, the ability to download ActiveX controls, and so forthwithout the user interface or strict security restrictions of the browser. Creating HTAs An HTa could be the simplest type of Windows-based application that you'll ever create. The easiest way to create an HTa is to take an existing Web page that has an .htm or .html extension and change it to .hta. That's it! Now it's an HTA. Try changing the extension of a Web page that you've already created to .hta, and then double-click the file in Windows Explorer. Your HTa will run in a separate window, not in the Internet Explorer window (see Figure 1). |
Figure 1: Creating an HTML Application |
As an alternative, if you want to allow users to access your HTa on the Internet, you can provide a link to it on a Web page just like you would for any other Web page or application. When a user clicks this link, Internet Explorer will display the File Download dialog box (see Figure 2) before the HTa is opened, a security measure meant to alert the user that an executable application is about to open. The user can then determine what to do nextopen the application, or save it to disk to run later. |
Figure 2: Downloading an HTA |
You'll notice one oddity about this new HTA: if the Web page you converted contains a hyperlink and you click on it in the HTA, a new Internet Explorer window will be created to navigate to the hyperlink's URL. The first time you see this happen, you might be a little surprised. Normally when you click on a hyperlink, the navigation occurs in the current window. Remember, though, that HTAs are applications, not Web browsers. In normal Windows-based applications, you don't usually change the contents of the entire application window in response to a user's interaction. You might change the contents of the client area, but not the application window itself. (I'll show you how to create a client area in your HTa later.)
a Basic HTa Window Although creating an HTa can be as simple as changing an .htm or .html file extension to .hta, the new <HTA:APPLICATION> tag marks a page as defaulting to an HTA. Without this tag, the window that you create is just a basic HTa window that contains default settings for the user interface features, as shown in Figure 3. |
Figure 3: a Simple HTA |
You can place the <HTA:APPLICATION> tag in any section of the HTML document, but it is recommended that you place it in the <HEAD> section of the Web page. Because the <HTA:APPLICATION> tag isn't a block tag, no closing tag is needed. The following code is a basic Web page that contains the <HTA:APPLICATION> tag:
Using the <HTA:APPLICATION> tag without supplying any attributes is the same as excluding it. The <HTA:APPLICATION> tag provides several attributes that allow you to control the user interface features of your HTA. These attributes are shown in Figure 4.
Here's the HTML for a more complex HTa that uses all of the attributes listed in Figure 4. Figure 5 shows the results of this code.
Not surprisingly, you can access all the attributes through script on a Web page. The properties are read-only, so you can retrieve the values of the properties corresponding to these attributes in script, but setting them has no effect. |
Figure 5: An HTa with Attributes |
The code in Figure 6 shows how to retrieve the values of
all the attributes that were set in the HTa shown in Figure 5. You can find the entire code for this example in the file Scripting.hta. The code in Figure 6 is a VBScript event handler for the onclick event of a button on the page loaded in this HTA.
The commandLine Property You can set most properties of the <HTA:APPLICATION> tag with their corresponding attributes. However, one property of the <HTA:APPLICATION> tag isn't accessible as an attribute: commandLine. Because an HTa is a full-fledged Windows-based application, you can pass data to it when running it from a command line. You can reference the commandLine property of the <HTA:APPLICA-TION> tag to retrieve command-line parameters that are sent to the HTA. The commandLine property returns a string that contains the full path to the HTa and any additional parameters that are specified when running it. The string is a space-delimited list of all the command-line parameters. For example, you can create a simple HTa named Hello.hta. When the user enters their name, the application displays a hello message. You can run Hello.hta from the command line in Windows NT, and specify the name like so: To run an HTa from the command line in Windows 95 or Windows 98, you must create a shortcut that contains the path to the HTa and any arguments as the target of the shortcut. (The code available from the link at the top of this page includes a sample shortcut named ShrtHello.hta. You'll have to change the target of this shortcut to point to the Hello.hta file on your local hard drive.)
When you retrieve the value of the commandLine property, the string that is returned contains the full path name of the HTa and any input parameters delimited by spaces. If you retrieve the value of the commandLine property at this point, the returned string will look similar to this: To complete the Hello.hta example so that a hello message is displayed when you start the application, parse the command line for the first parameter that follows the path to the Hello.hta file. This first parameter should be the user's name. VBScript is used in this example, and is shown in Figure 7.
Creating an HTa with a Client Area In a Windows-based app, you don't typically redraw the entire application window; you usually redraw only the client area. Redrawing the entire window means redrawing the menus, toolbars, and status bar for the application. I mentioned earlier that if you click on a hyperlink in an HTA, a new instance of Internet Explorer is created to navigate to the target. If you want the navigation to occur in your HTA, you can create a client area by using frames. When you use frames, the client area can take up the entire HTa window or just a portion of it. Because HTAs are considered trusted, they aren't subject to the same security restrictions as Web pages. For instance, when a Web page that is loaded into Internet Explorer contains frames, one frame can't access the object model of other frames if they aren't in the same domain. In other words, in Internet Explorer, frames that are in different domains aren't considered trusted. In HTAs, frames are inherently considered trusted, whether they are in the same or different domains. To protect your user's machine, sometimes you'll want to mark frames that might download potentially harmful content as not trusted. To specify that a frame is not trusted, use the TRUSTED attribute of the <FRAME> or <IFRAME> tags. The value of the TRUSTED attribute is a Boolean and is yes by default. If you set the value of TRUSTED to no, normal security rules in Internet Explorer will be applied to the frame. To see how to create a client area in the HTA, let's develop a Web browser application named MyBrowser that allows you to navigate to Web pages in an <IFRAME> window. This HTa can have Back, Forward, and Go buttons just like Internet Explorer. Figure 8 shows a running instance of MyBrowser. The code for MyBrowser is shown in Figure 9. |
Figure 8: MyBrowser |
In the MyBrowser example, you can type a URL in the text box and navigate to the URL by pressing the Enter key or by clicking the Go button (which is just a submit button). When the Enter key is pressed or the Go button is clicked, the btnGo_onclick event handler is called. In this event handler, if the user didn't supply the Internet protocol type (HTTP, FILE, and so on), MyBrowser assumes that the user wanted the HTTP protocol and prefaces the value that was entered into the text box with the string "http://". Then MyBrowser navigates to the new Web page by changing the href property of the Location object for the frame.
To obtain the Location object, you use the location property of the document object. You can obtain the document object by referencing the document property of frmClient. Therefore, the Location object of the frmClient form is frmClient.document.location. Remember that if you supply an ID for an HTML element, you can reference that element by name in script. Because frame objects are really window objects, you can access the document object of the frame by using the window's document property. You can also navigate backward and forward in the navigation history just as you can with Internet Explorer. When you click either the Back button or the Forward button, a corresponding event handler is called. In either event handler, the history object is obtained from the frame window. Then, either the back or forward method of the history object is called to navigate backward or forward in the history list. More HTa Examples Now that you can create your own HTAs by using only DHTML and script, let's look at two more examples that really show off the power of HTAs. These examples, Memo and Ledger, were created by a friend of mine, Nick Dallett, for my book, Programming Microsoft Internet Explorer 5.0. The Memo application is shown in Figure 10, and the Ledger application is shown in Figure 11. |
Figure 10: Memo |
Figure 11: Ledger |
Full descriptions of each application are beyond the scope of this article. You can download the code for the Memo and Ledger applications from the link at the top of this page.
In these applications, an ActiveX control is used to display the Open and Save dialog boxes and to perform the actual opening and saving of the files. Therefore, before you can use one of these applications, you must register the OpenSave.dll file in the OpenSave directory by using the Regsvr32 application, like this: The Regsvr32 app resides in the \Windows\System directory on Windows 95 and Windows 98, and in the \WinNT\System32 directory on Windows NT-based systems.
To run the applications, simply double-click the Memo.hta file to start the Memo app, or double-click the Ledger.hta file to start the Ledger app. You can open new Memo or Ledger files by clicking the Open button on their toolbars. I've included a few sample files along with the code for each application. The Memo sample files have a .mem extension, while the Ledger sample files have an .lgr extension. When you're ready to save a file in either program, just click the Save button on the toolbar. When you click the Open button or the Save button, each application will display the Open dialog box or the Save dialog box, respectively. Pretty easy, huh? But you already knew that it would be. Wrap-up In this article, I showed how to create full-fledged Windows-based applications by using only DHTML and script. How much simpler can development get? I encourage you to start using HTAs when you need to create Windows-based applications. You'll almost certainly find them much easier to write than their counterparts created using C++ and
Visual Basic. |
http://msdn.microsoft.com/workshop/ essentials/whatsnew/whatsnew.asp
and http://msdn.microsoft.com/msdn-online/workshop/essentials/versions/ie5hta.asp "> |
From the July 1999 issue of Microsoft Internet Developer.