jakarta-taglibs-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Richard Esmond" <richard_esm...@hotmail.com>
Subject DHTML Web Design Tool
Date Tue, 12 Sep 2000 14:07:09 GMT
Hello everyone,

I just joined the developer distribution to see if this might be an 
appropriate venue to toss some functionality that I have not had the time to 

A little over a week ago, I mentioned that I had a DHTML code set that 
implemented a good portion of a drag-n-drop VB-like GUI design environment 
for building HTML forms (screen shot is attached, web address is listed 
below).  It is extensible and comes prepackaged with:

   Text Labels
   DB Fields
   Radio Buttons
   Standard Buttons
   Group Options
   Check Boxes
   Tables (not yet fully implemented, but not difficult)

One of the people on the board where I mentioned this encouraged me to show 
it to the struts group.  A few days ago I mailed a screenshot and pointer to 
a demo, but I havn't gotten any replies.  It's possible that the mail was 
incorrect, but I don't think so.

Anyway, after looking around the Apache sites, it looked to me that either 
the taglibs or velocity groups would be better integration points for a Web 
design tool.

If anyone is interested in this GUI interface, then I am happy to donate the 
code, imperfect though it may be, and clean it up with documentation as 
well.  On a go forward basis I will help as much as I can, but I am heavily 
committed already, so that would be mostly Q&A or hitting really sticky 

Current Status:
The code has only been tested under IE5.01, but I wrote every line with a IE 
reference in one hand and a NS reference in another.  I did not use any 
functionality that I could not find an equivelent option on both, so it can 
be finished out to work 'cross browser' in a few days and some debugging.

The design is extensible, but the strategy is terribly over simplified.  I 
had mainly been experimenting with the boundries and limitations of 
drag-n-drop within a browser.  Since the source code set is not very large, 
I would recomend a redevelopment effort around some existing extesion model, 
taglibs for example, and use the source from my demo as a guide for the UI 
interaction etc.  I spent quite a bit of time getting the drag-n-drop code 
to work without using any IE or NS unique facilities.  Unfortunatly, shortly 
after I got it working I had to leave it, so I need to clean things up some.

Here is all you should need to know to use the demo.

It has four frames:

   Toolbar                 Form Canvas

   Schema List             Property Frame

First click on a object in the toolbar, then draw a rect. anywhere on the 
form canvas - and the object will appear.

Now you can drag the new object anywhere you want.

(I have code that allows drag resizing, but it is less stable, so I didn't 
put that out.)

Try the different object types, and look at the different property frames 
that come up.  (Obviously more properties needed to be added, but I didn't 
want to take that too far until I replace the extension model.)

NOTE:  One issue with the properties frame is the cursor has to leave an 
edited field before the object will update.

If you click on a blank area in the forms canvas, you will get a simple 
property list for the form itself.  Here you can turn on and off the 'Snap' 
feature.  With Snap on it is much easier to allign objects, with Snap off 
moving objects animates much smoother.

If you select an object and click on one of the color boxes listed in the 
property frame, a somewhat slick color wheel will pop up and allow you to 
change forground, background or text colors.

Anyway, if anyone is interested in playing around with it the address is:

If someone wants to persue it, I will be happy to do some cleanup, package 
up the approparate files and spend some time on the phone with 'whoever'.

Let me know if you have any problems,
Richard Esmond

Get Your Private, Free E-mail from MSN Hotmail at http://www.hotmail.com.

Share information about yourself, create your own public profile at 

View raw message