Customize FormItem & DynamicForm Rendering

[atomatom]

I'd like to change the rendering for DynamicForm and FormItem to use different HTML rendering.

In particular, I'd like to use twitter bootstrap styling on forms, which leaves most of the layout to CSS - unlike DynamicForm which uses tables to structure the layout.

I'm wondering what the most sensible approach is here. I see a few options:

1) don't use DynamicForm at all

2) write a custom getInnerHTML for DynamicForm - and likewise for each type of FormItem

3) transform the HTML generated by DynamicForm (override getInnerHTML) - ouch. ie, call the super method and strip out the table layout. dirty!

4) customize the HTML by directly editing DynamicForm.js - perhaps create a new FormLayoutType - FORM("form")

I suspect that 1) is probably the best course of action, although I can see a lot of work, eg validators, etc. 2) is likely the recommended best practice way to do this - although I imagine it will require a fair bit of re-implementing code as well. 3) is just wrong - but could be the quickest (but dirtiest) way to get this going. 4) seems appealing to me (and perhaps less work than 1 or 2), but means I'm creating a fork of the DynamicForm.js code to love and maintain till death do us part.

Any thoughts/suggestions appreciated.

[atomatom]

Shockingly, a quick stab at 3) aka the dirty way yielded a mostly functional result.

The only thing I found not working was the SpinnerItem controls. Validation seems to work, as do DateItem, Select and Combo Items.

	form = new DynamicForm() {
			@Override
			public String getInnerHTML() {
				String innerHTML = super.getInnerHTML();

				DivElement original = DOM.createDiv().cast();
				original.setInnerHTML(innerHTML);

				DivElement modified = DOM.createDiv().cast();

				NodeList<com.google.gwt.dom.client.Element> formNodes = original
						.getElementsByTagName(FormElement.TAG);

				if (formNodes.getLength() > 0) {
					com.google.gwt.dom.client.Element formNode = formNodes
							.getItem(0);
					Node newFormNode = formNode.cloneNode(false);
					modified.appendChild(newFormNode);
					TableElement table = formNode.getFirstChildElement().cast();
					NodeList<TableRowElement> rows = table.getRows();
					for (int r = 0; r < rows.getLength(); r++) {
						TableRowElement row = rows.getItem(r);
						startRow(newFormNode);
						for (int c = 0; c < row.getCells().getLength(); c++) {
							TableCellElement cell = row.getCells().getItem(c);
							NodeList<Node> cellContents = cell.getChildNodes();
							for (int n = 0; n < cellContents.getLength(); n++) {
								Node child = cellContents.getItem(n);
								Node childCopy = child.cloneNode(true);
								addCell(newFormNode, childCopy, cell);
							}
						}
						endRow(newFormNode);
					}

					return modified.getInnerHTML();
				}

				GWT.log("Could not find form element");
				return "";
			}

			private void startRow(Node newFormNode) {
			}

			private void endRow(Node newFormNode) {
			}

			private void addCell(Node newFormNode, Node childCopy,
					TableCellElement cell) {
				newFormNode.appendChild(childCopy);
			}
		};