PDA

View Full Version : What is wrong with BorderLayoutExample?



hstang
6 Jul 2009, 2:22 PM
Hi, I'm taking the BorderLayoutExample code right out of the samples web application. When I run the code (without any modifications) in FF and IE, it looks entirely broken. The south region appears to be in the middle hovering over the other regions. The west and east regions do not maintain their height when collapsed/expanded. The south region disappears and could not be shown again. But in the sample application, it looks perfectly fine. I'm confused. Anyone knows why?

sven
6 Jul 2009, 2:24 PM
You should try to post your code how you implement it.

hstang
6 Jul 2009, 5:11 PM
Hi,

The code I took is copied verbatim from the samples BorderLayoutExample.
For completion, below is the self-executable code that demonstrates my problem (just copy and pasting from the BorderLayoutExample from samples):



public class BorderLayoutExample extends LayoutContainer {

public BorderLayoutExample() {
final BorderLayout layout = new BorderLayout();
setLayout(layout);

ContentPanel north = new ContentPanel();
ContentPanel west = new ContentPanel();
ContentPanel center = new ContentPanel();
center.setHeading("BorderLayout Example");
center.setScrollMode(Scroll.AUTOX);

FlexTable table = new FlexTable();
table.getElement().getStyle().setProperty("margin", "10px");
table.setCellSpacing(8);
table.setCellPadding(4);

for (int i = 0; i < LayoutRegion.values().length; i++) {
final LayoutRegion r = LayoutRegion.values()[i];
if (r == LayoutRegion.CENTER) {
continue;
}
SelectionListener<ButtonEvent> sl = new SelectionListener<ButtonEvent>() {

@Override
public void componentSelected(ButtonEvent ce) {
String txt = ce.getButton().getText();
if (txt.equals("Expand")) {
layout.expand(r);
} else if (txt.equals("Collapse")) {
layout.collapse(r);
} else if (txt.equals("Show")) {
layout.show(r);
} else {
layout.hide(r);
}

}
};
table.setHTML(i, 0, "<div style='font-size: 12px; width: 100px'>" + r.name() + ":</span>");
table.setWidget(i, 1, new Button("Expand", sl));
table.setWidget(i, 2, new Button("Collapse", sl));
table.setWidget(i, 3, new Button("Show", sl));
table.setWidget(i, 4, new Button("Hide", sl));
}
center.add(table);

ContentPanel east = new ContentPanel();
ContentPanel south = new ContentPanel();

BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH, 100);
northData.setCollapsible(true);
northData.setFloatable(true);
northData.setHideCollapseTool(true);
northData.setSplit(true);
northData.setMargins(new Margins(5, 5, 0, 5));

BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150);
westData.setSplit(true);
westData.setCollapsible(true);
westData.setMargins(new Margins(5));

BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(5, 0, 5, 0));

BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 150);
eastData.setSplit(true);
eastData.setCollapsible(true);
eastData.setMargins(new Margins(5));

BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH, 100);
southData.setSplit(true);
southData.setCollapsible(true);
southData.setFloatable(true);
southData.setMargins(new Margins(0, 5, 5, 5));

add(north, northData);
add(west, westData);
add(center, centerData);
add(east, eastData);
add(south, southData);
}

}

sven
7 Jul 2009, 2:06 AM
The code yuo pasted here is not running standalone. There is o lot code missing. Please post YOUR complete code and not only the example.

hstang
7 Jul 2009, 6:54 AM
Hi,


Here's the complete code:


public class Test implements EntryPoint
{
class BorderLayoutExample extends LayoutContainer
{
public BorderLayoutExample()
{
final BorderLayout layout = new BorderLayout();
setLayout(layout);

ContentPanel north = new ContentPanel();
ContentPanel west = new ContentPanel();
ContentPanel center = new ContentPanel();
center.setHeading("BorderLayout Example");
center.setScrollMode(Style.Scroll.AUTOX);

FlexTable table = new FlexTable();
table.getElement().getStyle().setProperty("margin", "10px");
table.setCellSpacing(8);
table.setCellPadding(4);

for (int i = 0; i < Style.LayoutRegion.values().length; i++)
{
final Style.LayoutRegion r = Style.LayoutRegion.values()[i];
if (r == Style.LayoutRegion.CENTER)
{
continue;
}
SelectionListener<ButtonEvent> sl = new SelectionListener<ButtonEvent>()
{

@Override
public void componentSelected(ButtonEvent ce)
{
String txt = ce.getButton().getText();
if (txt.equals("Expand"))
{
layout.expand(r);
}
else if (txt.equals("Collapse"))
{
layout.collapse(r);
}
else if (txt.equals("Show"))
{
layout.show(r);
}
else
{
layout.hide(r);
}

}
};
table.setHTML(i, 0, "<div style='font-size: 12px; width: 100px'>" + r.name() + ":</span>");
table.setWidget(i, 1, new Button("Expand", sl));
table.setWidget(i, 2, new Button("Collapse", sl));
table.setWidget(i, 3, new Button("Show", sl));
table.setWidget(i, 4, new Button("Hide", sl));
}
center.add(table);

ContentPanel east = new ContentPanel();
ContentPanel south = new ContentPanel();

BorderLayoutData northData = new BorderLayoutData(Style.LayoutRegion.NORTH, 100);
northData.setCollapsible(true);
northData.setFloatable(true);
northData.setHideCollapseTool(true);
northData.setSplit(true);
northData.setMargins(new Margins(5, 5, 0, 5));

BorderLayoutData westData = new BorderLayoutData(Style.LayoutRegion.WEST, 150);
westData.setSplit(true);
westData.setCollapsible(true);
westData.setMargins(new Margins(5));

BorderLayoutData centerData = new BorderLayoutData(Style.LayoutRegion.CENTER);
centerData.setMargins(new Margins(5, 0, 5, 0));

BorderLayoutData eastData = new BorderLayoutData(Style.LayoutRegion.EAST, 150);
eastData.setSplit(true);
eastData.setCollapsible(true);
eastData.setMargins(new Margins(5));

BorderLayoutData southData = new BorderLayoutData(Style.LayoutRegion.SOUTH, 100);
southData.setSplit(true);
southData.setCollapsible(true);
southData.setFloatable(true);
southData.setMargins(new Margins(0, 5, 5, 5));

add(north, northData);
add(west, westData);
add(center, centerData);
add(east, eastData);
add(south, southData);
}
}

public void onModuleLoad()
{
RootPanel.get().add(new BorderLayoutExample());
}
}
Again, here are the problems that I saw:

- The south region appears to be in the middle hovering over the other regions.
- The west and east regions do not maintain their height when collapsed/expanded.
- The south region disappears and could not be shown again.

sven
7 Jul 2009, 6:57 AM
You need to size that layoutcontainer.