PDA

View Full Version : how to align widgets in a ContentPanel using RowLayout with horizontal orientation.



rahulpatel
17 Dec 2010, 8:46 AM
I cannot get the label1 and button1 widget to align horizontally using the below code. The whole resultSuitePanel disappears when i set the orientation to horizontal.

Thanks.

Here is the relevant code:

ContentPanel mainPanel = new ContentPanel();
mainPanel.setLayout(new FitLayout());
Button saveBtn = new Button("Save");
Button cancelBtn = new Button("Cancel");
ToolBar toolBar = new ToolBar();
toolBar.add(saveBtn);
toolBar.add(new SeparatorToolItem());
toolBar.add(cancelBtn);

FormPanel formPanel = new FormPanel();
formPanel.setHeaderVisible(false);
TextField<String> name = new TextField<String>();
name.setFieldLabel("Name");
TextField<String> description = new TextField<String>();
description.setHeight(50);
description.setFieldLabel("Description");
formPanel.add(name, new FormData("100%"));
formPanel.add(description, new FormData("100%"));

ContentPanel resultSuitePanel = new ContentPanel();
resultSuitePanel.setLayout(new RowLayout(Orientation.HORIZONTAL));
resultSuitePanel.setHeaderVisible(false);

Label label1= new Label("Label1");
resultSuitePanel.add(label1, new MarginData(10));
resultSuitePanel.add(new Button("Button1"));
mainPanel.setTopComponent(toolBar);
mainPanel.add(formPanel);
formPanel.setHeight(100);
mainPanel.add(resultSuitePanel);

Viewport viewport = new Viewport();
viewport.add(mainPanel, new MarginData(10));
initComponent(viewport);

sven
17 Dec 2010, 8:51 AM
There are a couple of issues in your layoutchain. I fixed them:
class Test implements EntryPoint {

public void onModuleLoad() {
ContentPanel mainPanel = new ContentPanel();
mainPanel.setLayout(new RowLayout());
Button saveBtn = new Button("Save");
Button cancelBtn = new Button("Cancel");
ToolBar toolBar = new ToolBar();
toolBar.add(saveBtn);
toolBar.add(new SeparatorToolItem());
toolBar.add(cancelBtn);

FormPanel formPanel = new FormPanel();
formPanel.setHeaderVisible(false);
TextField<String> name = new TextField<String>();
name.setFieldLabel("Name");
TextField<String> description = new TextField<String>();
description.setHeight(50);
description.setFieldLabel("Description");
formPanel.add(name, new FormData("100%"));
formPanel.add(description, new FormData("100%"));

ContentPanel resultSuitePanel = new ContentPanel();
resultSuitePanel.setLayout(new RowLayout(Orientation.HORIZONTAL));
resultSuitePanel.setHeaderVisible(false);

Label label1 = new Label("Label1");
resultSuitePanel.add(label1, new MarginData(10));
resultSuitePanel.add(new Button("Button1"));
mainPanel.setTopComponent(toolBar);
mainPanel.add(formPanel,new RowData(1,100));
mainPanel.add(resultSuitePanel,new RowData(1,1));

Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());
viewport.add(mainPanel, new MarginData(10));
RootPanel.get().add(viewport);
}

}

rahulpatel
17 Dec 2010, 8:59 AM
Awesome! Thanks.

rahulpatel
17 Dec 2010, 10:12 AM
Hey Sven,
The margin data I added to Label1 does not show up. Am i missing something.

Thanks.

sven
17 Dec 2010, 10:16 AM
Sorry, have not looked at that. Fixed both margins too now

class Test implements EntryPoint {

public void onModuleLoad() {
ContentPanel mainPanel = new ContentPanel();
mainPanel.setLayout(new RowLayout());
Button saveBtn = new Button("Save");
Button cancelBtn = new Button("Cancel");
ToolBar toolBar = new ToolBar();
toolBar.add(saveBtn);
toolBar.add(new SeparatorToolItem());
toolBar.add(cancelBtn);

FormPanel formPanel = new FormPanel();
formPanel.setHeaderVisible(false);
TextField<String> name = new TextField<String>();
name.setFieldLabel("Name");
TextField<String> description = new TextField<String>();
description.setHeight(50);
description.setFieldLabel("Description");
formPanel.add(name, new FormData("100%"));
formPanel.add(description, new FormData("100%"));

ContentPanel resultSuitePanel = new ContentPanel();
resultSuitePanel.setLayout(new RowLayout(Orientation.HORIZONTAL));
resultSuitePanel.setHeaderVisible(false);

Label label1 = new Label("Label1");
resultSuitePanel.add(label1, new RowData(-1, -1, new Margins(10)));
resultSuitePanel.add(new Button("Button1"));
mainPanel.setTopComponent(toolBar);
mainPanel.add(formPanel, new RowData(1, 100));
mainPanel.add(resultSuitePanel, new RowData(1, 1));

Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());
viewport.add(mainPanel, new FitData(10));
RootPanel.get().add(viewport);
}

}