Keep your developer skills sharp by automatically signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.

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.