By Josep Valls
http://josep.valls.name
You may need to add simple UI functions to a VBScript, Internet Explorer enables you to do so using HTML Applications through its HTML renderer and object model.
An HTML Application (hta) is just an HTML file saved with the .hta extension, you just need to add a HTA:APPLICATION tag to enable the trusted security model and set up most of the desktop application settings.
<HEAD>
<TITLE>My Monster Application</TITLE>
<HTA:APPLICATION ID="oMyApp"
APPLICATIONNAME="monster"
BORDER="none"
CAPTION="no"
ICON="/graphics/creature.ico"
SHOWINTASKBAR="no"
SINGLEINSTANCE="yes"
SYSMENU="no"
WINDOWSTATE="maximize">
</HEAD>
You may get full documentation from Microsoft website:
http://msdn.microsoft.com/workshop/author/hta/overview/htaoverview.asp
Note that it will run always with the Internet Explorer engine so you may write your code in JavaScript or VBScript, but bear in mind all the IE bugs and CSS hacks.
Here I'll comment some hints and tips.
To give your hta the standard Windows look & feel you should use the standard system color codes and the default pointer. CSS Level 2 defines some standard colors to use within HTML.
<style type="text/css">
<!--
body{
background-color:Menu;
color:MenuText;
cursor:default;
}
-->
</style>
| CSS 2 Color Name | Example (Using Background-color) |
Description |
|---|---|---|
| ActiveBorder | Active window border. | |
| ActiveCaption | Active window caption. | |
| AppWorkspace | Background color of multiple document interface. | |
| Background | Desktop background. | |
| ButtonFace | Face color for three-dimensional display elements. | |
| ButtonHighlight | Dark shadow for three-dimensional display elements (for edges facing away from the light source). | |
| ButtonShadow | Shadow color for three-dimensional display elements. | |
| ButtonText | Text on push buttons. | |
| CaptionText | Text in caption, size box, and scrollbar arrow box. | |
| GrayText | Grayed (disabled) text. This color is set to #000 if the current display driver does not support a solid gray color. | |
| Highlight | Item(s) selected in a control. | |
| HighlightText | Text of item(s) selected in a control. | |
| InactiveBorder | Inactive window border. | |
| InactiveCaption | Inactive window caption. | |
| InactiveCaptionText | Color of text in an inactive caption. | |
| InfoBackground | Background color for tooltip controls. | |
| InfoText | Text color for tooltip controls. | |
| Menu | Menu background. | |
| MenuText | Text in menus. | |
| Scrollbar | Scroll bar gray area. | |
| ThreeDDarkShadow | Dark shadow for three-dimensional display elements. | |
| ThreeDFace | Face color for three-dimensional display elements. | |
| ThreeDHighlight | Highlight color for three-dimensional display elements. | |
| ThreeDLightShadow | Light color for three-dimensional display elements (for edges facing the light source). | |
| ThreeDShadow | Dark shadow for three-dimensional display elements. | |
| Window | Window background. | |
| WindowFrame | Window frame. | |
| WindowText | Text in windows. |
Skinning an hta GUI is fairly simple bearing in mind that we are working with an HTML file. Using CSS you may apply a customized skin to the hta elements and using client side scripting you can change the element's properties under different events.
I'm using the following CSS for buttons.
.custom_button {
border-right: 0px;
border-top: 0px;
font-size: 13px;
background-image: url(btn_90x22a.gif);
border-left: 0px;
width: 90px;
cursor: hand;
color: #000000;
border-bottom: 0px;
font-family: arial, helvetica, sans-serif;
height: 22px;
background-color: transparent;
}
You may have different classes for the different button state and switch them through the onMouseOver, onMouseDown and onMouseOut by changing the object class using VBScript.
your_button.classname="custom_button"
You may zip all your resources in a compressed file set up a self extracting module to decompress silently all the files to a temporary folder and run your main hta. Add a custom icon to your self extracting file and you'll get a nice executable to distribute to your friends, family or plonker customers.
btn_90x22a.gif
btn_90x22b.gif
btn_90x22c.gif
Background images for buttons' states
bg520.gif
bg260.gif
Background images for the main application window and text boxes
EscapeStrings.hta
Main HTML Application, double click to run or view source code using your favorite IDE or a simple plain text editor.
skin.css
Application CSS file for skinning the GUI. Note that there are some styles also defined in the hta itself so it can run standalone.
soft.valls.ico
Application icon
Download all support files (EscapeStrings_hta_gui.zip)
http://sourceforge.net/projects/escapestrings
SourceForge.net project page for Escape Strings
http://josep.valls.name
Visit my website and mail me your suggestions or comments