EasyHTML DTC Controls

Written by Bjarke Viksoe.
This article was submitted 7/10/2000.

EasyHTML contains 3 Design Time Controls (DTCs) that enables Web page developers to have the power of ASP scripting at design time without the Microsoft Internet Information Server (IIS).

You can download the controls here.

This tool is only working with mostly outdated HTML editing software from the year 2000 era, such as Microsoft Visual InterDev. While you may not get to use the ActiveX controls in a live system, you may want to inspect the source code for interesting tibits, such as the ASP language parser.

ASP scripting for everyone

Some time ago I decided to venture into creating my own homepage. My ISP doesn't allow server-side scripting or any fancy stuff - just plain HTML. But I needed consistent layout on all my pages and I also wanted to include contents from a database. I really enjoy the power of server-side scripting, so I decided to add ASP-like scripting to my favourite HTML editor through a few Design Time Controls.

The EasyHTML Controls

The EasyHTML controls allow you to use client-side ASP scripting.

The HInclude control

The HInclude DTC control is the simplest control of them all. It basically allows you to import a raw HTML file into your page.

The HTemplate control

This control does roughly the same as the HInclude control. It is different only by the fact that you can supply a number of replacement arguments. Before the imported HTML file is added to the target page, predefined tokens will be searched and replaced with the arguments you supply.

The HScript control

The last of the three controls, HScript, is the most advanced. It allows you to execute a script, which generates the HTML output to include on the page.
The scripting syntax is very similar to the well-known ASP syntax and you can use both VBScript and JavaScript as scripting language. To make the transition even smoother from ASP scripting, an object model is available, which partly implements the ASP Server, Request, Response, Session and Application objects.

How to use EasyHTML

What is a DTC?

A DTC is a regular ActiveX control with support for a few additional COM interfaces. These interfaces allow the control to communicate with its design environment.
The DTC control is added right on the HTML page when you design the web page. It is however hidden from the rendering because it is enclosed in HTML comments:

<!--METADATA TYPE="DesignerControl" startspan
  <OBJECT classid="clsid:C706EB9E-111-1111-1111-000000000000"
  id=DTCcontrol style="LEFT: 0px; TOP: 0px">
  <PARAM NAME="Argument" VALUE="anything">
  </OBJECT>
-->
*Actual DTC output: anything*
<!--METADATA TYPE="DesignerControl" endspan-->

The DTC control only shows up in the design environment (e.g. FrontPage Editor). The design environment will ask the control to generate runtime text, which is added to the page instead of the control. On the actual page only the runtime text that the control generates is shown. In the sample above only the string *Actual DTC output: anything* gets included in the final HTML document.

Where are they?

First you need a design environment that supports DTC controls. Macromedia Dreamweaver, SoftQuad HoTMetaL, Microsoft Visual Interdev and FrontPage do. However, Microsoft has recently depricated the technology so you will probably need to look for old versions of the mentioned editors to find one that still supports them.
When you have installed the controls, simply drag one over to the HTML or ASP page.

How to configure each control?

Each control can be configured using its property pages. You usually right-click on the control and pick the Properties menu-item. Each control can be configured differently.

The HInclude control

This simple control has only one property: Filename. In the properties dialog you can browse for a filename and pick any file you want. This file will be included unmodified into the target page.

The HTemplate control

The HTemplate control extends the HInclude control with support for customisable arguments. It also includes a raw HTML file in the target page, but allows you to customize the contents using replacement tokens.
Using a template file you can define a number of custom arguments. Each argument can have a value assigned, which can be used to control to the output.
The HTemplate control uses the arguments to replace text in the HTML include text. The arguments are called Arg1 to Arg8, and if the HTML text included contains the tokens %ARG1% to %ARG8%, they will be replaced with the values the user enter in the property page of the control.

[Arguments]
Arg1=Table title,String
Arg2=Table height,Integer

[Template]
<i>This is argument 1 %ARG1% and this is #2 %ARG2%</i>

The template file format

The template file is formatted like a standard .INI configuration file.
It consists of 3 sections:

Preferences
Arguments
Template

The Preferences section is optional and can contain a reference to an external file, which is included as output in the target page. If this entry is not defined, the complete contents of the Template section will be read and used as page output instead.
The Arguments section contains the custom arguments that can be used to configure the control.

[Preferences]
TemplateFile=<file to include>
Language=<VBScript | JScript (used only for HScript)>
Locked=<Y | N (locks main property page)>

[Arguments]
Arg1=<argument title>,<String | Integer | Filename>
Arg2=Custom argument 2,Filename
...
Arg8=The last argument is 8,String

[Template]
Template/scripting text used if the TemplateFile entry
is not present in the Preferences section.

The template arguments

You may define 8 arguments. They must be called Arg1 to Arg8. You are however allowed to give them meaningful titles that show up in the property pages.

Each argument has a data type assigned. It controls the format of the value the user can enter in the property page. Only the String, Integer and Filename types are supported:

The String type is the most common and allows you to enter any string of 300 characters.
The Integer type allows you to enter any valid integer in the property page.
The Filename is a special variant of the String type and adds a browse button in the property page.

The HScript control

The HScript control allows you to use ASP syntax scripting to create your HTML contents.
You also customize this control by defining a number of arguments, whose value can be changed in the DTC's property page.

The HScript language

The HScript control runs a kind of embedded scripting language that allows you to create truly dynamic HTML contents. It's very ASP like - in fact if you have already done ASP scripting you will not know the difference.
The following shows a valid script:

<% 
   Dim a
   a = 1
%>
The value of <i>a</i> is <%= CStr(a) %>

If you are not familiar with ASP scripting, there are several good books about this topic.

Configuring the control

To define arguments and other properties for the control, you can use the same template file as the HTemplate control uses. It's is however easier to just point to a file with the ASP extension as input, and then use the ASP processing directives to configure the control.

Processing directives takes the form:

<%@ item="value" %>

You probably already know the ASP language directive:

<%@ Language="VBScript" %>

This directive is also used by the HScript control. It controls the scripting language used.
Here is a list of the predefined directives:

<%@ Language="<VBScript | JScript>" %>
<%@ Locked="<Y | N>" %>
<%@ Arg1="<title>,<String | Integer | Filename>" %>
<%@ Arg2="<title>,<String | Integer | Filename>" %>
<%@ Arg3="<title>,<String | Integer | Filename>" %>
<%@ Arg4="<title>,<String | Integer | Filename>" %>
<%@ Arg5="<title>,<String | Integer | Filename>" %>
<%@ Arg6="<title>,<String | Integer | Filename>" %>
<%@ Arg7="<title>,<String | Integer | Filename>" %>
<%@ Arg8="<title>,<String | Integer | Filename>" %>

Here is a sample HScript file with 2 configurable arguments:

<%@ Language="VBScript" %>
<%@ Arg1="First argument,INTEGER" %>
<%@ Arg2="The Second argument,STRING" %>
The remaining contents contains regular HTML and script code...

The arguments are used to customize each control's properties. Use the Property Pages of the control to apply values to the arguments.

The HScript Object Model

To assist you in creating rich and dynamic HTML, the HScript language has access to several predefined objects that help you create better web solutions.
These objects are scaled-down versions of the Server, Request, Response, Session and Application objects already known from ASP. They contain most of the commonly used methods, such as

  Response.Clear
  Response.Write("text")
  Response.Stop
  Application.Contents("variable")
  Session.Contents("variable")
  Request.QueryString("argument")
  Request.ServerVariables("variable")

The arguments you supply in the template are passed as entries in the Request.QueryString collection. Arguments are referenced by their title.
The following sample shows how to use them:

<%@ Language="VBScript" %>
<%@ Arg1="Table title,String" %>
<%@ Arg2="Table height,Integer" %>
<%
   Dim s, i
   s = Request.QueryString("Table title")
   i = CLng( Request.QueryString("Table height") )
%>

The Source Code

The C++ source code for the EasyHTML DTC controls is freely downloadable.
Here is a few enlightening answers to the basic questions about the design of the source code:

How do you make a DTC?

As explained, the DTC is nothing but an ActiveX control with support of a few additional interfaces. It's easiest when you use the Visual C++ ATL Wizard to generate one. The additional interfaces needed are quickly implemented, and Microsoft even supply ATL classes for these in a library called "ActiveX Designer SDK". I don't actually use it, but it will explain to you how to create your own controls.

How did you do the ASP script?

The ASP-like script is regular Active Scripting. Active Scripting is a Microsoft technology that allows you to run VBScript and JScript code (well, any scripting language in fact).

The ASP syntax contains embedded HTML. That does present a bit of a problem, because this is not something the Active Scripting Engine is happy about.
The trick is to turn the complete ASP text into the native scripting language. For instance...

<b>This is a <%= Request.QueryString("noun") %></b>
<%
  If a=1 Then Response.Write("<h1>A headline</h1>")
%>
<i>Some more HTML</i>

would become...

Response.Write("<b>This is a " + Request.QueryString("noun") + "</b>")

  If a=1 Then Response.Write("<h1>A headline</h1>")

Response.Write("<i>Some more HTML</i>")

For complex pages this conversion wasn't possible if the scripting languages didn't have such as weak syntax. Especially the surprising misuse of colons (:) allowed in VBScript makes it possible to do this conversion.
Some knowledge about the particular scripting language used is needed by the control to handle it correctly. (like the syntax of writing Response.Write for VBScript and JScript). But it is otherwise surprisingly easy to parse.

How about the ASP object model then?

These are regular IDispatch COM objects and Active Scripting allows you to add such objects to the script code's name-space.
I left out some of the tricky parts of the original ASP Object Model, but simulating the few functions that are needed for common ASP pages was not hard.

It's almost too good...

Well, you should remember that the controls are not used in a live interactive environment. One of the most useful features with server-side scripting is the ability to generate dynamic contents based on user settings, session states and page arguments.
You can still use session variables in the Object Model of the HScript control, but remember that you don't have an active user.

TODO List

Implement a better file refresh scheme.
Support the IIS include directive.
Implement the complete ASP object model.
Make sure relative filenames works.

Notes

DTC are rarely supported by HTML Editors these days as the object model of Internet Explorer changed and depricated the IE ActiveX Editor mode.

Source Code Dependencies

Microsoft Visual C++ 6.0
Microsoft ATL Library
Microsoft WTL 3.0 Library
Microsoft Active Scripting SDK
Microsoft DTC SDK
Microsoft Windows SDK

Installation Guide

Extract the file and run the setup application.
Open Microsoft Visual InterDev and open the "Design-Time Controls" tab in the Toolbox.
Right-click and pick "Customize Toolbar..." and select the EasyHTML controls.
Drag the HScript control on to any HTML page.

Download Files

EasyHTML install file (220 Kb)
Source Code (90 Kb)