PDA

View Full Version : Tabscroll problem with the TabPanel inside ViewPort



msauter
2 Sep 2009, 3:56 AM
Hi,
i have a problem using the TabPanel with the TabScroll-Feature, inside a ViewPort-Layout. I am using the standard BorderLayoutExample and added a TabPanel inside the CENTER-ContentPanel. At startup, i create 20 Tabs for the TabPanel.

When the screen is first shown, you can see (at picture tab1), that after "Test Tab 3" the other following Tabs are not rendered. When i click for example on "Test Tab 3", the other missing tabs are now rendered.

The other problem is the resizing of the whole window. When i reduce the width of the window, then the right-Tabscroll-icon is disappearing (picture tab2). When i enlarge the window, it appears at the last position.

When i make a fullscreen-size, then i see that the other hidden tabs are not rendered (same issue like picture tab1).

Any idea how to solve the problem?



public void onModuleLoad() {
LayoutContainer viewport = new Viewport();
viewport.setLayout(new FillLayout());
viewport.add(new BorderLayoutExample());
RootPanel.get().add(viewport);
}


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);

// ****** Add here my TabPanel ******
center.add(demo());


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);
}
private TabPanel demo () {
TabPanel mainTabPanel = new TabPanel();
mainTabPanel.setStyleName("maintabpanel_verticalpanel_tabpanel");
mainTabPanel.setMinTabWidth(115);
mainTabPanel.setResizeTabs(true);
mainTabPanel.setAnimScroll(true);
mainTabPanel.setTabScroll(true);
mainTabPanel.setCloseContextMenu(true);
mainTabPanel.setPlain(false);
addDemoTabs(mainTabPanel);
return mainTabPanel;
}

private void addDemoTabs(TabPanel tabp) {
for (int i = 0; i < 20; i++) {
TabItem item = new TabItem("Test Tab "+i);
item.setStyleName("tabpanelcontent");
item.add(new ContentPanel());
item.setClosable(true);
tabp.add(item);
}
}
}

The_Jackal
30 Sep 2009, 5:55 PM
The issue you have is you add the TabPanel to a ContentPanel using the default layout (FlowLayout) and this doesn't work well for dynamic layouts.

Instead you want to use a RowLayout and add the TabPanel with a RowData(1,1). This will add it with 100% with and 100% height and resize the child as the window resizes.

Here are the modifications to your code:



public LayoutContainer getBorderLayoutEx()
{
....

ContentPanel north = new ContentPanel();
ContentPanel west = new ContentPanel();
ContentPanel center = new ContentPanel();

center.setHeading("BorderLayout Example");
center.setScrollMode(Scroll.AUTOX);

// NEW CODE START
center.setLayout(new RowLayout());
RowData rd = new RowData(1,1);

// ****** Add here my TabPanel ******
center.add(demo(), rd);
// NEW CODE END

Regards,
Carl

msauter
1 Oct 2009, 12:28 PM
This was the solution, thank you very much!:)