Hello,
i have planned to design my application with following areas:
-----------------------------------
Toolbar Area
----------------------------------
Workspace Header (for some information or filter criteria's)
-----------------------------------
Workspace Area
-----------------------------------
Statusbar Area
-----------------------------------
To use a datagrid which automatically resizes with the screensize, I have
read that the best way
is to use the DockLayoutPanel.
I have also read following article:
https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels
In this articel it's also recommended to use Layout Panels for better
standard mode support.
Therefore I have build a very easy example to test the Layout Panels.
In my GwtTestDock.java example I have created a empty application skeleton
with Layout Panels.
In GwtTestDockFilled.java I have filled this skeleton with some widgets.
In this example I have some problems:
* The css padding is not working for SimpleLayoutPanel. Which class should
I use instead?
I want to use the css padding in the empty skeleton class because if I
replace the widgets for
this place holder, it should automatically use the css of the parent
(slpWorkspaceHeaderPlaceholder).
I don't want to set the padding for every child
of slpWorkspaceHeaderPlaceholder.
* The Disclosure Panel for "Additional Details" is not working. The reason
is because the DockLayoutPanel
has a fix size for North. I tested a solution that I just change the North
size if I open the Disclosure Pane but
the animation is not working.
* Is this the right track to design my application or should I use
different Panels?
* Should I try to use only Layout Panels (better standard-mode support) or
are there special cases for other Panels?
Thx for any help.
Marco
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-web-toolkit/-/m7UFnpv49UgJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
package com.test.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.LayoutPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.DisclosurePanel;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.TextColumn;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GwtTestDock implements EntryPoint {
private SimpleLayoutPanel slpToolbarPlaceholder;
private SimpleLayoutPanel slpWorkspacePlaceholder;
private SimpleLayoutPanel slpWorkspaceHeaderPlaceholder;
private SimpleLayoutPanel slpStatusbarPlaceholder;
/**
* This is the entry point method.
*/
public void onModuleLoad() {
RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();
DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PX);
rootLayoutPanel.add(dockLayoutPanel);
dockLayoutPanel.addNorth(getSlpToolbarPlaceholder(), 60.0);
dockLayoutPanel.addNorth(getSimpleLayoutPanel_2(), 60.0);
dockLayoutPanel.addSouth(getSimpleLayoutPanel_3(), 60.0);
dockLayoutPanel.add(getSlpWorkspacePlaceholder());
}
private SimpleLayoutPanel getSlpToolbarPlaceholder() {
if (slpToolbarPlaceholder == null) {
slpToolbarPlaceholder = new SimpleLayoutPanel();
}
return slpToolbarPlaceholder;
}
private SimpleLayoutPanel getSlpWorkspacePlaceholder() {
if (slpWorkspacePlaceholder == null) {
slpWorkspacePlaceholder = new SimpleLayoutPanel();
}
return slpWorkspacePlaceholder;
}
private SimpleLayoutPanel getSimpleLayoutPanel_2() {
if (slpWorkspaceHeaderPlaceholder == null) {
slpWorkspaceHeaderPlaceholder = new SimpleLayoutPanel();
slpWorkspaceHeaderPlaceholder.setStyleName("test");
}
return slpWorkspaceHeaderPlaceholder;
}
private SimpleLayoutPanel getSimpleLayoutPanel_3() {
if (slpStatusbarPlaceholder == null) {
slpStatusbarPlaceholder = new SimpleLayoutPanel();
}
return slpStatusbarPlaceholder;
}
}
package com.test.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.SimplePager;
import com.google.gwt.user.cellview.client.TextColumn;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DisclosurePanel;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.LayoutPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.view.client.ListDataProvider;
public class GwtTestDockFilled implements EntryPoint {
private SimpleLayoutPanel slpToolbarPlaceholder;
private SimpleLayoutPanel slpWorkspacePlaceholder;
private SimpleLayoutPanel slpWorkspaceHeaderPlaceholder;
private SimpleLayoutPanel slpStatusbarPlaceholder;
private LayoutPanel layoutPanel;
private FlowPanel flowPanel;
private Button btnBack;
private Button btnNew;
private Label lblName;
private TextBox txtName;
private DisclosurePanel disclosurePanel;
private LayoutPanel layoutPanel_1;
private Label lblStreet;
private TextBox txtStreet;
private DataGrid<Person> dataGrid;
private TextColumn<Person> colName;
private TextColumn<Person> colStreet;
private DockLayoutPanel dockLayoutPanel_1;
private LayoutPanel layoutPanel_2;
private SimplePager simplePager;
private ListDataProvider<Person> dataProvider = new ListDataProvider<GwtTestDockFilled.Person>();
private static final String[] NAMES = {
"Mary", "Patricia", "Linda", "Barbara", "Elizabeth", "Jennifer", "Maria",
"Susan", "Margaret", "Dorothy", "Lisa", "Nancy", "Karen", "Betty",
"Helen", "Sandra", "Donna", "Carol", "Ruth", "Sharon", "Michelle",
"Laura", "Sarah", "Kimberly", "Deborah", "Jessica", "Shirley", "Cynthia",
"Angela", "Melissa", "Brenda", "Amy", "Anna", "Rebecca", "Virginia",
"Kathleen", "Pamela", "Martha", "Debra", "Amanda", "Stephanie", "Carolyn",
"Christine", "Marie", "Janet", "Catherine", "Frances", "Ann", "Joyce",
"Diane", "Alice", "Julie", "Heather", "Teresa", "Doris", "Gloria",
"Evelyn", "Jean", "Cheryl", "Mildred", "Katherine", "Joan", "Ashley",
"Judith", "Rose", "Janice", "Kelly", "Nicole", "Judy", "Christina",
"Kathy", "Theresa", "Beverly", "Denise", "Tammy", "Irene", "Jane", "Lori"};
/**
* This is the entry point method.
*/
public void onModuleLoad() {
RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();
DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.PX);
rootLayoutPanel.add(dockLayoutPanel);
dockLayoutPanel.addNorth(getSlpToolbarPlaceholder(), 60.0);
dockLayoutPanel.addNorth(getSimpleLayoutPanel_2(), 60.0);
dockLayoutPanel.addSouth(getSimpleLayoutPanel_3(), 60.0);
dockLayoutPanel.add(getSlpWorkspacePlaceholder());
fillDataGrid();
}
private void fillDataGrid(){
for(int i = 0; i < NAMES.length; i++){
Person p = new Person();
p.setName(NAMES[i]);
p.setStreet("Spring Road");
dataProvider.getList().add(p);
}
}
private SimpleLayoutPanel getSlpToolbarPlaceholder() {
if (slpToolbarPlaceholder == null) {
slpToolbarPlaceholder = new SimpleLayoutPanel();
slpToolbarPlaceholder.setWidget(getFlowPanel());
}
return slpToolbarPlaceholder;
}
private SimpleLayoutPanel getSlpWorkspacePlaceholder() {
if (slpWorkspacePlaceholder == null) {
slpWorkspacePlaceholder = new SimpleLayoutPanel();
slpWorkspacePlaceholder.setWidget(getDockLayoutPanel_1());
}
return slpWorkspacePlaceholder;
}
private SimpleLayoutPanel getSimpleLayoutPanel_2() {
if (slpWorkspaceHeaderPlaceholder == null) {
slpWorkspaceHeaderPlaceholder = new SimpleLayoutPanel();
slpWorkspaceHeaderPlaceholder.setStyleName("test");
/**
* --- css file test --
*
* .test {
* margin: 4px;
* padding: 20px;
* background-color: Lime;}
*/
slpWorkspaceHeaderPlaceholder.setWidget(getLayoutPanel());
}
return slpWorkspaceHeaderPlaceholder;
}
private SimpleLayoutPanel getSimpleLayoutPanel_3() {
if (slpStatusbarPlaceholder == null) {
slpStatusbarPlaceholder = new SimpleLayoutPanel();
}
return slpStatusbarPlaceholder;
}
private LayoutPanel getLayoutPanel() {
if (layoutPanel == null) {
layoutPanel = new LayoutPanel();
layoutPanel.add(getLblName());
layoutPanel.setWidgetLeftWidth(getLblName(), 0.0, Unit.PX, 56.0, Unit.PX);
layoutPanel.setWidgetTopHeight(getLblName(), 0.0, Unit.PX, 16.0, Unit.PX);
layoutPanel.add(getTxtName());
layoutPanel.setWidgetLeftWidth(getTxtName(), 62.0, Unit.PX, 165.0, Unit.PX);
layoutPanel.setWidgetTopHeight(getTxtName(), 0.0, Unit.PX, 25.0, Unit.PX);
layoutPanel.add(getDisclosurePanel());
layoutPanel.setWidgetLeftWidth(getDisclosurePanel(), 0.0, Unit.PX, 250.0, Unit.PX);
layoutPanel.setWidgetTopHeight(getDisclosurePanel(), 31.0, Unit.PX, 200.0, Unit.PX);
}
return layoutPanel;
}
private FlowPanel getFlowPanel() {
if (flowPanel == null) {
flowPanel = new FlowPanel();
flowPanel.add(getBtnBack());
flowPanel.add(getBtnNew());
}
return flowPanel;
}
private Button getBtnBack() {
if (btnBack == null) {
btnBack = new Button("New button");
btnBack.setText("Back");
btnBack.setSize("50px", "50px");
}
return btnBack;
}
private Button getBtnNew() {
if (btnNew == null) {
btnNew = new Button("New button");
btnNew.setSize("50px", "50px");
btnNew.setText("New");
}
return btnNew;
}
private Label getLblName() {
if (lblName == null) {
lblName = new Label("Name");
}
return lblName;
}
private TextBox getTxtName() {
if (txtName == null) {
txtName = new TextBox();
}
return txtName;
}
private DisclosurePanel getDisclosurePanel() {
if (disclosurePanel == null) {
disclosurePanel = new DisclosurePanel("Additional Details", false);
disclosurePanel.setAnimationEnabled(true);
disclosurePanel.setContent(getLayoutPanel_1());
}
return disclosurePanel;
}
private LayoutPanel getLayoutPanel_1() {
if (layoutPanel_1 == null) {
layoutPanel_1 = new LayoutPanel();
layoutPanel_1.setSize("5cm", "60px");
layoutPanel_1.add(getTxtStreet());
layoutPanel_1.setWidgetLeftWidth(getTxtStreet(), 60.0, Unit.PX, 91.0, Unit.PX);
layoutPanel_1.setWidgetTopHeight(getTxtStreet(), 0.0, Unit.PX, 32.0, Unit.PX);
layoutPanel_1.add(getLblStreet());
layoutPanel_1.setWidgetLeftWidth(getLblStreet(), 0.0, Unit.PX, 56.0, Unit.PX);
layoutPanel_1.setWidgetTopHeight(getLblStreet(), 0.0, Unit.PX, 22.0, Unit.PX);
}
return layoutPanel_1;
}
private Label getLblStreet() {
if (lblStreet == null) {
lblStreet = new Label("Street");
}
return lblStreet;
}
private TextBox getTxtStreet() {
if (txtStreet == null) {
txtStreet = new TextBox();
}
return txtStreet;
}
private DataGrid<Person> getDataGrid() {
if (dataGrid == null) {
dataGrid = new DataGrid<Person>();
dataProvider.addDataDisplay(dataGrid);
dataGrid.addColumn(getColName(), "Name");
dataGrid.addColumn(getColStreet(), "Street");
}
return dataGrid;
}
private TextColumn<Person> getColName() {
if (colName == null) {
colName = new TextColumn<Person>() {
@Override
public String getValue(Person object) {
return object.getName();
}
};
}
return colName;
}
private TextColumn<Person> getColStreet() {
if (colStreet == null) {
colStreet = new TextColumn<Person>() {
@Override
public String getValue(Person object) {
return object.getStreet();
}
};
}
return colStreet;
}
private DockLayoutPanel getDockLayoutPanel_1() {
if (dockLayoutPanel_1 == null) {
dockLayoutPanel_1 = new DockLayoutPanel(Unit.PX);
dockLayoutPanel_1.addSouth(getLayoutPanel_2(), 40.0);
dockLayoutPanel_1.add(getDataGrid());
}
return dockLayoutPanel_1;
}
private LayoutPanel getLayoutPanel_2() {
if (layoutPanel_2 == null) {
layoutPanel_2 = new LayoutPanel();
layoutPanel_2.add(getSimplePager());
layoutPanel_2.setWidgetLeftWidth(getSimplePager(), 50.0, Unit.PCT, 50.0, Unit.PCT);
}
return layoutPanel_2;
}
private SimplePager getSimplePager() {
if (simplePager == null) {
simplePager = new SimplePager();
simplePager.setDisplay(getDataGrid());
}
return simplePager;
}
public class Person{
private String name;
private String street;
public Person(){
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getStreet() {
return street;
}
public void setStreet(String street) {
this.street = street;
}
}
}
