PDA

View Full Version : Problem with rendering of forms containing fields with setValue or setEmptyText



mrwho
29 Dec 2010, 5:25 AM
Hello,

I need to set some values in my fields or set the empty texts. During form rendering in Firefox I can see the fields of the form being resized during layout/rendering and the form itself is sort of cascading down before it's fully rendered and ready to use.

What I want to have is a form that's properly laid out before becoming visible and not being visible while partially laid out.

This problem exists only in Firefox. The form is rendered fine in Internet Explorer and Chrome.

This problem exists only when I call setEmptyText or setValue on fields. When I don't set empty texts or fields, the form is rendered nicely even in Firefox.

Am I doing it the wrong way? Or is it a bug?

I tested it with Firefox 3.6.13 (not working fine), Internet Explorer 8 (working fine) and Chrome 10 (working fine).

I'm using GXT 2.2.1.

Thanks.

Here's the simplified test case:

My EntryPoint:


public class TestApp implements EntryPoint {
private LayoutContainer centerLeft;

public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new BorderLayout());

centerLeft = new LayoutContainer();
centerLeft.setLayout(new FitLayout());

centerLeft.add(new ContentPanel());

ContentPanel centerRight = new ContentPanel();
CardLayout centerRightLayout = new CardLayout();
centerRight.setLayout(centerRightLayout);

LayoutContainer buttonContainer = new LayoutContainer();
buttonContainer.setLayout(new CenterLayout());

buttonContainer.add(createButtons());

centerRight.add(buttonContainer);

LayoutContainer center = new LayoutContainer();
center.setLayout(new FillLayout(Orientation.HORIZONTAL));
center.add(centerLeft, new FillData(0, 10, 0, 0));
center.add(centerRight);

BorderLayoutData centerLayoutData = new BorderLayoutData(LayoutRegion.CENTER);
centerLayoutData.setMargins(new Margins(10, 10, 10, 10));

viewport.add(center, centerLayoutData);

RootPanel.get().add(viewport);
}

private LayoutContainer createButtons() {
Button button = new Button("Click me");
button.addSelectionListener(new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent be) {
centerLeft.removeAll();
centerLeft.add(new TestForm());
centerLeft.layout();
}
});

LayoutContainer buttons = new LayoutContainer();
buttons.add(button);

return buttons;
}
}
and my form:


public class TestForm extends ContentPanel {
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);

setLayout(new FitLayout());

VerticalPanel form = new VerticalPanel();

TableData formTableData = new TableData();
formTableData.setPadding(10);

FormPanel formPanel = createForm();

form.add(formPanel, formTableData);

VerticalPanel formContainer = new VerticalPanel();
formContainer.setTableWidth("100%");
formContainer.setHorizontalAlign(HorizontalAlignment.CENTER);

formContainer.add(form);

add(formContainer);
}

private FormPanel createForm() {
FormPanel testForm = new FormPanel();
testForm.setHeaderVisible(false);
testForm.setFrame(true);
testForm.setWidth(350);

FormLayout formLayout1 = new FormLayout();
formLayout1.setLabelWidth(75);

FormLayout formLayout2 = new FormLayout();
formLayout2.setLabelWidth(75);

FormLayout formLayout3 = new FormLayout();
formLayout3.setLabelWidth(75);

FieldSet fieldSet1 = new FieldSet();
fieldSet1.setHeading("Heading 1");

FieldSet fieldSet2 = new FieldSet();
fieldSet2.setHeading("Heading 2");

FieldSet fieldSet3 = new FieldSet();
fieldSet3.setHeading("Heading 3");

fieldSet1.setLayout(formLayout1);
fieldSet2.setLayout(formLayout2);
fieldSet3.setLayout(formLayout3);

TextField<String> field1 = new TextField<String>();
field1.setFieldLabel("Label 1");
field1.setValue("Something");
field1.setEnabled(false);
fieldSet1.add(field1);

TextField<String> field2 = new TextField<String>();
field2.setFieldLabel("Label 2");
field2.setValue("Something");
field2.setEnabled(false);
fieldSet1.add(field2);

TextField<String> field3 = new TextField<String>();
field3.setFieldLabel("Label 3");
field3.setValue("Something");
field3.setEnabled(false);
fieldSet2.add(field3);

TextField<String> field4 = new TextField<String>();
field4.setFieldLabel("Label 4");
field4.setValue("Something");
field4.setEnabled(false);
fieldSet2.add(field4);

DateField field5 = new DateField();
field5.setFieldLabel("Label 5");
field5.setEmptyText("yyyy-dd-mm");
fieldSet3.add(field5);

TimeField field6 = new TimeField();
field6.setFieldLabel("Label 6");
fieldSet3.add(field6);

testForm.add(fieldSet1);
testForm.add(fieldSet2);
testForm.add(fieldSet3);

return testForm;
}
}

Ersmarker
14 Jan 2011, 12:31 AM
Try the following.



public class TestApp implements EntryPoint {
private LayoutContainer centerLeft;

public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new BorderLayout());

centerLeft = new LayoutContainer();

centerLeft.setHideMode(HideMode.VISIBILITY);

centerLeft.setLayout(new FitLayout());

centerLeft.add(new ContentPanel());

ContentPanel centerRight = new ContentPanel();
CardLayout centerRightLayout = new CardLayout();
centerRight.setLayout(centerRightLayout);

LayoutContainer buttonContainer = new LayoutContainer();
buttonContainer.setLayout(new CenterLayout());

buttonContainer.add(createButtons());

centerRight.add(buttonContainer);

LayoutContainer center = new LayoutContainer();
center.setLayout(new FillLayout(Orientation.HORIZONTAL));
center.add(centerLeft, new FillData(0, 10, 0, 0));
center.add(centerRight);

BorderLayoutData centerLayoutData = new BorderLayoutData(LayoutRegion.CENTER);
centerLayoutData.setMargins(new Margins(10, 10, 10, 10));

viewport.add(center, centerLayoutData);

RootPanel.get().add(viewport);
}

private LayoutContainer createButtons() {
Button button = new Button("Click me");
button.addSelectionListener(new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent be) {

centerLeft.hide();

centerLeft.removeAll();
centerLeft.add(new TestForm());
centerLeft.layout();

centerLeft.show();

}
});

LayoutContainer buttons = new LayoutContainer();
buttons.add(button);

return buttons;
}
}

mrwho
15 Jan 2011, 5:48 AM
Thanks for your idea.

However, to avoid blinking I changed the TestForm to extend LayoutContainer and my EntryPoint now looks like this:


public class TestApp implements EntryPoint {
private LayoutContainer centerLeft;

public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new BorderLayout());

centerLeft = new ContentPanel();
centerLeft.setLayout(new FitLayout());

ContentPanel centerRight = new ContentPanel();
CardLayout centerRightLayout = new CardLayout();
centerRight.setLayout(centerRightLayout);

LayoutContainer buttonContainer = new LayoutContainer();
buttonContainer.setLayout(new CenterLayout());

buttonContainer.add(createButtons());

centerRight.add(buttonContainer);

LayoutContainer center = new LayoutContainer();
center.setLayout(new FillLayout(Orientation.HORIZONTAL));
center.add(centerLeft, new FillData(0, 10, 0, 0));
center.add(centerRight);

BorderLayoutData centerLayoutData = new BorderLayoutData(LayoutRegion.CENTER);
centerLayoutData.setMargins(new Margins(10, 10, 10, 10));

viewport.add(center, centerLayoutData);

RootPanel.get().add(viewport);
}

private LayoutContainer createButtons() {
Button button = new Button("Click me");
button.addSelectionListener(new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent be) {
TestForm testForm = new TestForm();
testForm.setHideMode(HideMode.VISIBILITY);
testForm.hide();

centerLeft.removeAll();
centerLeft.add(testForm);
centerLeft.layout();

testForm.show();
}
});

LayoutContainer buttons = new LayoutContainer();
buttons.add(button);

return buttons;
}
}
It works ok now, but it looks like a workaround for a Firefox issue. Is this caused by lazy rendering in GXT? Will it work better in GXT 3 (I read that there will be no lazy rendering in GXT 3)?