Construct your own HTML authoring tool

Many developers use HTML authoring tools such as Dreamweaver or FrontPage to design and implement their own custom Web pages. These tools are nice because all the functionality you need is in one WYSIWYG tool. However, these tools sometimes offer too much functionality.

For instance, say you want to provide users with the ability to create data entry forms based on a particular template. It works sort of like a report builder, except instead of providing information for the end user, the form is for data entry. This way, you can give your form builders a tool that is automatically bound to some data source, and they can provide the data entry form for their end users. In this article, I'll create a simple page that provides the author with the ability to create a Web page using an <INPUT> element and a <SELECT> element to create a data entry form. (Note: To view the sample in this article, direct your IE 5.0 or above browser here.)

First, think about where the data will be going. In this example, the data is going to one simple table called SALES on SQL Server. The available fields are salesperson (int) and amount (money). The salesperson field is a foreign key to another table called SALES_STAFF. This table contains the salesperson's first_name and last_name. Since this table is a reference table, the author will probably want to create a <SELECT> list for this field. The amount field will likely be a simple <INPUT> element.

Now you need to provide a mechanism for creating these elements. We want to create a design area for the author to select the field and then select the appropriate element. Then, they'll be able to place the element and assign a few properties to the element. In the case of a <SELECT> list, they'll be able to assign the size property and create a list of choices. As for the <INPUT> element, they'll be able to assign the size property. In addition, the author will be able to set a few style properties, such as the positioning of the element on the form. Also, the author will be able to associate the data field with the element. The form "canvas" will be a <DIV> element. Listing A contains the code for the page layout.

The available HTML elements are on the left of the screen. When the user positions an element on the screen, they'll see the available properties for that element in the property table at the bottom of the screen. This table is bound to the corresponding XML property data. When the user changes the data in the property table, the new element's properties reflects those changes.

The user can position the element within the <DIV> with the cursor to change the position properties, or the user can enter new values in the properties table. To change the position within the <DIV> with the cursor, I add an HTC to provide that functionality. Listing B contains the code for the HTC.

This takes the difference of the coordinates from when the user first clicks on the object to each mouse movement and adds the difference to the existing position of the object.

In order to bind the data so that each property is listed in the table, I bind the table to a single-property XML data island. Every time I set the focus on another element, I load that element's XML to that data island, which rebinds the information in the table. When the element loses focus, the data is gathered, synchronized, and the new element XML property data is loaded.

In order to create the elements, I include some JavaScript within the Web page to handle this. View Listing C.

I also do some covert operations to give me an event to satisfy the completion of a bound table. I add an <IMG> tag to the rows and use itsonload event to get the rowIndex property of the created row; I can then use that index value to grab the associated property node. This way, I can set whether to display the <SELECT> element for the data field.

Once you create all the elements, the XML data is stored in a file or a database. Then, an XSLT stylesheet is used to reformat the output, and the new HTML form is created. The data is automatically linked to the data fields through XML data binding on the page, and the XML data can be submitted to add/update the underlying data.

Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client server to corporate intranet applications.