I have a ScrollPanel and I want to reset his scrolling position when it is hidden.
To do so I call the scrollTop method. As I can see it is not working when the ScrollPanel is hidden.
Here a sample code:
public void onModuleLoad() {
StringBuilder html = new StringBuilder();
for (int i = 0; i<1000; i++) html.append("row "+i+"<br>");
HTMLPanel content = new HTMLPanel(html.toString());
final ScrollPanel scrollPanel = new ScrollPanel(content);
scrollPanel.setHeight("200px");
RootPanel.get().add(scrollPanel);
RootPanel.get().add(new Button("TEST", new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
scrollPanel.scrollToTop();
scrollPanel.setVisible(false);
scrollPanel.scrollToBottom();
scrollPanel.setVisible(true);
}
}));
}
After clicking the TEST button the ScrollPanel keep is top position.
Any idea how to scroll it when hidden?
You can't scroll a hidden element because it does not have an offset position, i.e. both "top" and "bottom" would return zero.
See a possible solution: http://blog.gaijindesign.com/jquery-scrolltop-to-a-hidden-element/
Related
I`m using GWT-Popup-Panel with the following code:
private static class MyPopup extends PopupPanel {
public MyPopup() {
// PopupPanel's constructor takes 'auto-hide' as its boolean parameter.
// If this is set, the panel closes itself automatically when the user
// clicks outside of it.
super(true);
// PopupPanel is a SimplePanel, so you have to set it's widget property to
// whatever you want its contents to be.
setWidget(new Label("Click outside of this popup to close it"));
}
}
public void onModuleLoad() {
final Button b1 = new Button("About");
b1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
final MyPopup g = new MyPopup();
g.setWidget(RootPanel.get("rightagekeyPanel"));
g.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
public void setPosition(int offsetWidth, int offsetHeight) {
g.setPopupPosition(b1.getAbsoluteLeft(), b1.getAbsoluteTop());
g.setAutoHideEnabled(true);
}
});
g.setVisible(true);
g.setWidth("500px");
g.setHeight("500px");
g.show();
}
});
It does appear when clicking Button b1, but not when clicking it the second time. What is wrong?
Make one popup, outside of your ClickHandler, at the same level as your Button. You also don't need that PositionCallback to center your popup. You can just call g.center() to show it and center it. It's a known issue on the GWT support pages that it won't center properly if you don't set a width to it. It will center properly if you give your popup a proper width.
The reason it doesn't show again is because you remove the widget inside RootPanel.get("rightagekeyPanel") and put it into your popup. It is no longer there the next time you try to do it.
A widget can only be in one place at a time, so if you remove it from its parent, keep track of it with a variable or something, so you can re-use it. Otherwise, you must re-instantiate the widget.
public void onModuleLoad() {
final Button b1 = new Button("About");
final MyPopup g = new MyPopup(); //create only one instance and reuse it.
g.setAutoHideEnabled(true);
g.setSize("500px", "500px"); //sets width AND height
b1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
g.setWidget(RootPanel.get("rightagekeyPanel"));//DON'T DO THIS.
g.center();//will show it and center it.
}
});
}
Just say in my case I had to add some widget to make the PopUpPanel appear. Try using a label to make sure the Popup is showing.
PopupPanel popup = new PopupPanel();
popup.setVisible(true);
popup.center();
popup.show();
popup.setWidth("500px");
popup.setHeight("500px");
popup.add(new Label("Test"));
How Can i position Popup at the mouse clicked position in GWT. I tried using the getX, and getY on the flextable and set the Popup to that position but that isn't working.
Quick example:
final RootLayoutPanel rootLayoutPanel = RootLayoutPanel.get();
final FocusPanel focusPanel = new FocusPanel();
/* just to make the clickable area visible */
focusPanel.getElement().getStyle().setBackgroundColor("red");
rootLayoutPanel.add(focusPanel);
final PopupPanel popupPanel = new PopupPanel();
popupPanel.add(new Label("Popup"));
popupPanel.show();
focusPanel.addClickHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent event) {
final int left = event.getClientX();
final int top = event.getClientY();
popupPanel.setPopupPosition(left, top);
}
});
Notes:
Make sure to show the PopupPanel after adding the focusPanel, otherwise it will be behind the focusPanel.
I'm using the RootLayoutPanel here, but you could also work relative to a different element (use left = event.getRelativeX(myContextElem); etc.)
If you don't want to use a FocusPanel (which has ClickHandlers), you could alternatively use a MouseDownHandler, but in that case you then need to call sinkEvents(Event.ONMOUSEDOWN).
I'm having trouble getting ScrollPanel.scrollToBottom to work. It's not scrolling to the bottom of the panel. Here's an example snippet:
FlexTable flexTable = new FlexTable();
// Add loads of rows to the flex table here..
ScrollPanel scrollPanel = new ScrollPanel(flexTable);
scrollPanel.scrollToBottom();
// Add the scrollPanel to the view here..
I have also tried using scrollToBottom() method in the onLoad() overriden method, but it doesn't work.
What am I doing wrong here?
Delay the scrollToBottom() command, so that the ScrollPanel is ready to take input.
Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
#Override
public void execute() {
// your commands here
scrollPanel.scrollToBottom();
}
});
I am building an application in GWT. I have a decorated tabpanel in
my application.Where in am adding panels to it dynamically.Now i want
to achieve the closing of these tabs. I want to add a close image to
the tab bar and event to that image for closing. I am using UIbinder.
the working code is like that;
private Widget getTabTitle(final Widget widget, final String title) {
final HorizontalPanel hPanel = new HorizontalPanel();
final Label label = new Label(title);
DOM.setStyleAttribute(label.getElement(), "whiteSpace", "nowrap");
ImageAnchor closeBtn = new ImageAnchor();
closeBtn.setResource(images.cross());
closeBtn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
int widgetIndex = tabs.getWidgetIndex(widget);
if (widgetIndex == tabs.getSelectedIndex()) {
tabs.selectTab(widgetIndex - 1);
}
tabs.remove(widgetIndex);
}
});
hPanel.add(label);
hPanel.add(new HTML("   "));
hPanel.add(closeBtn);
hPanel.setStyleName("gwt-TabLayoutPanelTab");
return hPanel;
}
In order to add tab,
public void addTab() {
TabWriting tw = new TabWriting(); /* TabWriting in my case, this can be any widget */
tabs.add(tw, getTabTitle(tw, "Writing"));
tabs.selectTab(tw);
}
You'll going to need, ImageAnchorClass
public class ImageAnchor extends Anchor {
public ImageAnchor() {
}
public void setResource(ImageResource imageResource) {
Image img = new Image(imageResource);
img.setStyleName("navbarimg");
DOM.insertBefore(getElement(), img.getElement(), DOM
.getFirstChild(getElement()));
}}
It isn't supported natively in GWT.
You can manually try to add it.
Read this - http://groups.google.com/group/google-web-toolkit/browse_thread/thread/006bc886c1ccf5e1?pli=1
I haven't tried it personally, but look at the solution by gregor (last one).
You kinda need to do something along the lines of this
GWT Close button in title bar of DialogBox
First you need to pass in the tab header when you create the new tab. The header you pass in should have your tab text and also an X image or text label to click on. Then add a event handler on the close object that gets the widget you are adding to the tabPanel and removes it. Here is some inline code that works
public void loadTab(final Widget widget, String headingText, String tooltip) {
HorizontalPanel panel = new HorizontalPanel();
panel.setStyleName("tabHeader");
panel.setTitle(tooltip);
Label text = new Label();
text.setText(headingText);
text.setStyleDependentName("text", true);
Label close = new Label();
close.setText("X");
close.setTitle(closeText_ + headingText);
text.setStyleDependentName("close", true);
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("close this tab");
ClientGlobal.LOG.info("widget : " + tabPanel_.getWidgetIndex(widget));
tabPanel_.remove(tabPanel_.getWidgetIndex(widget));
}
});
panel.add(text);
panel.add(close);
panel.setCellHorizontalAlignment(text, HasHorizontalAlignment.ALIGN_LEFT);
panel.setCellHorizontalAlignment(close, HasHorizontalAlignment.ALIGN_RIGHT);
tabPanel_.add(widget, panel);
tabPanel_.getTabWidget(widget).setTitle(tooltip);
tabPanel_.selectTab(widget);
}
I have a GWT dialog box that looks like the following:
public class FooDialog extends DialogBox {
public FooDialog() {
setText("Foo Dialog");
VerticalPanel outer = new VerticalPanel();
outer.setBorderWidth(3);
outer.setSize("400px", "200px");
outer.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
outer.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);
Button cancelButton = new Button("Cancel", new ClickHandler() {
public void onClick(ClickEvent event) {
hide();
}
});
HorizontalPanel buttons = new HorizontalPanel();
buttons.setBorderWidth(3);
buttons.add(cancelButton);
outer.add(buttons);
setWidget(outer);
}
}
For some reason the 'buttons' panel does not obey the horizontalAlignment setting; it sticks to the left side of the outer panel. It does, however, obey the vertialAlignment setting. Any ideas? Thanks!
Tables don't respect the parent's horizontal alignment property. Instead, set the left & right margins of the child table to "auto".
buttons.getElement().getStyle().setProperty("marginLeft", "auto");
buttons.getElement().getStyle().setProperty("marginRight", "auto");
More Info: Center a table with CSS