What is the best approach for handling a complex form in html?

Question

I need to implement a webform (JSP, struts) featuring loads of checkboxes and textfields. Basically I have a tree made of checkboxes which has to be extendable (like adding a new node). On another page the same data is used, but refined. So you add again child nodes to the mentioned data structure using textboxes etc. I can describe the datastructure in XML: But contains about 100 rows in reality.

I found 3 approaches: 1. Do a webform in JSP which lowers the user experience because lots of postbacks are necessary (every time i add/edit/delete a node, subnode...) 2. do it in async fashion. -> loads of javascript to handle the structure of the data (keep the XML data in a hidden div and update ui) 3. go for a RIA like OpenLaszlo

What do you suggest?

Answer 1

If you already know OpenLaszlo, go for it. You will end up with a better user experience with less work.

You should target user interface and performance when developing an app. So IMO, plain JSP will be my last approach.

Answer 2

You can consider client side rendering.
It allows to build very responsive web apps:

• build your JSP pages to deliver JSON data, no HTML here

• use a javascript templating engine in the browser to convert the data in HTML client side. I'm the author of PURE but there are plenty of others on the web that may suit better your style

• when the user types or press submit, parse the form using a common technique found in many frameworks.
  i.e: the "name" attribute is the path to set the value in the JSON
  <input name="employee.name" type="text" ... />

• When the form is parsed, post back the JSON to a JSP page that will read it and do the backend work.

You can use XML instead of JSON and XSLT instead of a JS templating engine, but if you target the web browser only, it adds an extra layer of complexity and trouble to parse the XML.

Answer 3

Please any one can show me the html code for the following form field. 17201-2635489-1 first dash after Ist 5 digits and second dash after second 7 digits as shown above.

Thanks a lot.