Complex form layouts without Layout containers

[Padster]

Hey folks,
I heard Darrell Meyer talk about how its not good practice to use containers for the layout of complex forms as it is very slow, instead use HTML fragments!

I often work with complex forms that have column layouts and field sets to organize the fields and im unable to create this without using tons of containers.

Attached is a screen shot of one such form, each column is a seperate container and those container are then organised in a field set with a column layout.
ScreenShot109.jpg
Anyone know what darrell means with HTML fragments or how would you achieve this layout?

Thanks,

Patrick

[sven]

One approach could be to use HtmlContainer. There you could have the required markup, for example a table. Each field would be rendered into a specific cell that you can target with a css selector.

HtmlLayoutContainer does not resize its children automatically. Do you require this feature too?

[Padster]

Hi Sven,

I rarely use layouts like anchor layout or percentage sizing for form fields so resize may not be a big issue.

Do you have any code snippet or examples where this is acheived?

Im not som familar with CSS/HTML as i should be (lazy java developer) I've been trying like this but no luck yet.

FormPanel form = new FormPanel();

TextField ro = new TextField();
ro.setReadOnly(true);
ro.setFieldLabel("ReadOnly field");
ro.setValue("READ ONLY");

TextField dis = new TextField();
dis.disable();
dis.setFieldLabel("Disabled field");
dis.setValue("DISABLED");

StringBuffer sb = new StringBuffer();
sb.append("<div id='ro'></div>");
sb.append("<div id='dis'></div>");

HtmlContainer html = new HtmlContainer(sb.toString());
html.add(ro, "#ro");
html.add(dis, "#dis");

form.add(html);

Thanks,

[sven]

I run your code and it works as expected. What exactly does not work for you?

[Padster]

Sven,

I expect the form labels, padding etc to be shown but i cant get this working

ScreenShot110.jpg

[sven]

Sorry.

The FormLabels are comming from the FormLayout. Because you are no longer using a FormLayout, you will need to put them into your markup:

StringBuffer sb = new StringBuffer();
sb.append("<div style="padding: 10px">LABEL 1</div>");sb.append("<div id='ro'></div>");
sb.append("<div style="padding: 10px">LABEL 2</div>");sb.append("<div id='dis'></div>");

[Padster]

Sven,

Sorry for the late reply and thanks for you help ill give that a go

Thanks,

Patrick

[maxblais]

I'm interested in this too, because we create complex form that use sometime up to 10 ContentPanel some embedded in others. This is a convenient way to code and easy to maintain.

I'm not sure using String buffer could be a solution for us. the code will become too hard to maintain
So what do you guys suggest, code maintenance vs speed ?
Why can't gxt convert our Container into optimal html code instead ?