I'm using GWT 2.4. I'm trying to create a tabs panel that has multiple tabs, so many that sometimes they exceed the allotted horizontal boundaries. How can I make a horizontal scroll bar appear? Here is how I'm creating my tabs panel now ...
tabsPanel = new TabLayoutPanel(BAR_HEIGHT_IN_EM, Style.Unit.EM);
final List<ScrollPanel> tabs = new ArrayList<ScrollPanel>();
for (final Node tabNode : documentNode.getChildren()) {
// Get the tab's child widgets and add them
// into the tab panel.
final ScrollPanel childpanel = new ScrollPanel();
childpanel.setHeight(SCROLL_PANEL_HEIGHT_PCT);
...
tabsPanel.add(childpanel, tabName);
} // for
tabsPanel.setWidth("100%");
tabsPanel.setHeight("100%");
As you can see, I tried width="100%", but no scroll panels appear that allow me to see the excess tabs.
Thanks, - Dave
There is no built in way to do this with the TabLayoutPanel, but looking at it's code it is possible to do this:
SimplePanel tab = (SimplePanel) getTabWidget(0).getParent();
FlowPanel tabBar = (FlowPanel) tab.getParent();
LayoutPanel container = (LayoutPanel) tabBar.getParent();
Element tabBarContainerLayer = container.getWidgetContainerElement(tabBar);
tabBarContainerLayer.getStyle().clearOverflowX();
DISCLAIMER: untested
Related
I was wondering is there any possibility to get the inner size of a
com.google.gwt.user.client.ui.ScrollPanel
object in GWT? I would like to create a children of the ScrollPanel that fits exactly into the empty space, without activating the scroll bars.
The ScrollPanel is initialized as follows:
[begin update after answer of #Abhijith Nagaraja]
public void onModuleLoad() {
Window.setMargin("0px");
TabLayoutPanel tabs = new TabLayoutPanel(30, Unit.PX);
//attach the tab panel to the body element
RootPanel.get(null).add(tabs);
//set the TabLayoutPanel to full size of the window.
String width = (Window.getClientWidth()) + "px";
String height = (Window.getClientHeight()) + "px";
tabs.setSize(width, height);
//create the scroll panel and activate the scroll bars
ScrollPanel scrollPanel = new ScrollPanel(new Button("a second button"));
scrollPanel.getElement().getStyle().setOverflowX(Overflow.SCROLL);
scrollPanel.getElement().getStyle().setOverflowY(Overflow.SCROLL);
//attach the scroll panel to the DOM
tabs.add(scrollPanel, "tab1");
System.out.println(scrollPanel.getOffsetWidth()); // --> 0
System.out.println(scrollPanel.getOffsetHeight()); // --> 0
}
[end update]
Reason: I want to initialize a dynamic visualization (which requires scrollbars at a later point in time) in such a way that, it looks nice and avoiding to add the ScrollPanel later.
ScrollPanel sp = new ScrollPanel();
...
int innerWidth = sp.getOffsetWidth()- sp.getElement().getScrollWidth();
...
NOTE: You can use the above code only if your scrollPanell is attached to the screen. In other words it should be rendered.
DOM.setStyleAttribute(scrollpanel.getElement(), "maxHeight", mMainHeight + "px");;
I have a loading popup that I need to display on the top of the page, even if the user scroll down.
What I tried so far is to set the popup position as follows
setPopupPosition(Window.getClientWidth()/2 , 0);
The popup shows up on the absolut top.
The situation can be resolved easily if you view it from a different angle: Not the popup position should adjust to the page - instead, the page should scroll behind the centering popup, e.g.:
final ScrollPanel scrollPanel = new ScrollPanel();
RootLayoutPanel.get().add(scrollPanel);
pagePanel = new FlowPanel();
scrollPanel.setWidget(pagePanel);
pagePanel.add(...);
Now add the entire page contents to pagePanel (instead of adding them directly to rootPanel).
Then you can create popups like this:
final PopupPanel popupPanel = new PopupPanel();
popupPanel.add(...);
popupPanel.center();
You'll still have to re-center the popup when the window resizes, but apart from that, the popup will always be at the center in front of the scrolling page.
To achieve this you can implement Window.addWindowScrollHandler. It will always be on top whatever you do.
DialogBox dialog = new DialogBox();
dialog.setWidget(...);
Window.addWindowScrollHandler(new ScrollHandler() {
#Override
public void onWindowScroll(ScrollEvent event) {
dialog.setPopupPosition((Window.getClientWidth() - widthOfDialog) / 2, event.getScrollTop());
}
});
Hope this helps.. Thanks..
The solution that worked for me is this
setPopupPosition(Window.getClientWidth()/2 , Window.getScrollTop());
Given the code below, how is it possible to use a percentage to get width and hight
(when I do tabs.setWidth("80%") - it doesn't work).
any idea?
final TabSet tabs = new TabSet();
tabs.setWidth("80%"); //this doesn't work I use tabs.setHeight(600);
tabs.setHeight(600);
Add your TabSet to a Layoutmanager and do the sizing there (do not use size on the TabSet directly):
final TabSet tabs = new TabSet();
//TODO create some tabs
VLayout vLayout = new VLayout();
vLayout.addMember(tabs);
vLayout.setWidth("100%");
vLayout.setHeight("100%");
See examples how to use VLayout in the smartgwt showcase - layout . There are also other Layoutmanagers HLayout, VStack, HStack,...
How can i disable a tab (i.e the user cannot open the tab when he clicks on it) in the TabLayoutPanel?I searched online but was not able to find a solution
Thanks
Use a BeforeSelectionHandler:
TabLayoutPanel myPanel = new TabLayoutPanel();
// Add children...
myPanel.addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>() {
#Override
public void onBeforeSelection(BeforeSelectionEvent<Integer> event) {
// Simple if statement - your test for whether the tab should be disabled
// will probably be more complicated
if (event.getItem() == 1) {
// Canceling the event prevents the tab from being selected.
event.cancel();
}
}
});
If you want to style the disabled tab differently than enabled tabs, you can use TabLayoutPanel#getTabWidget to get the tab widget and add a style name to it.
For anyone who comes across this later:
As of GWT version 1.6, disabling/enabling tabs is built into GWT.
The TabBar class has a method setTabEnabled(int index, boolean enabled) that enables/disables the tab at a given index.
For example, to disable all the tabs in a TabPanel:
TabPanel myTabPanel = new TabPanel();
// Add children
TabBar tabBar = myTabPanel.getTabBar();
for(int i=0; i<tabBar.getTabCount(); i++) {
tabBar.setTabEnabled(i, false);
}
See the GWT javadoc for more info.
To style disabled tabs differently (which GWT does automatically, but if you wanted to change the style): disabled tabBarItem divs are given another CSS class: gwt-TabBarItem-disabled.
You can access tab style by casting class Tab to Widget
TabPanel tabPanel = new TabPanel();
((Widget)tabPanel().getTabBar().getTab(tabsToDisable.iterator().next())).addStyleName("disabled");
I have this code which sets up a "main" container into which other modules of the application will go.
LayoutContainer c = new LayoutContainer();
c.setScrollMode(Scroll.ALWAYS);
parentContainer.add(c, <...>);
Then later on, I have the following as an event handler
pContainer = c; // pContainer is actually a parameter, but it has c's value
pContainer.removeAll();
pContainer.setLayout(new FitLayout());
LayoutContainer wrapperContainer = new LayoutContainer();
wrapperContainer.setLayout(new BorderLayout());
wrapperContainer.setBorders(false);
pContainer.add(wrapperContainer);
LayoutContainer west = pWestContentContainer;
BorderLayoutData westLayoutData = new BorderLayoutData(LayoutRegion.WEST);
westLayoutData.setSize(pWidth);
westLayoutData.setSplit(true);
wrapperContainer.add(west, westLayoutData);
LayoutContainer center = new LayoutContainer();
wrapperContainer.add(center, new BorderLayoutData(LayoutRegion.CENTER));
pCallback.withSplitContainer(center);
pContainer.layout();
So in effect, the container called 'west' here will be where the module's UI gets displayed. That module UI then does a simple rowlayout with two children. The botton child has RowData(1, 1) so it fills up all the available space.
My problem is that the c (parent) container reports a height and width value which includes the value underneath the scrollbars. What I would like is that the scrollbars show all the space excluding their own space.
This is a screenshot showing what I mean:
alt text http://img265.imageshack.us/img265/9206/scrollbar.png
Try adding padding equivalent to the scroll bars size 14px? on the container where the Scroll.Always is being applied