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).
Related
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/
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"));
Is there a way to add image or icon inside a GWT TextBox widget?
EDIT: The image is required to have a ClickHandler.
If you are only interested in visually adding an icon , you can add it using css such as :
background-image:url('icon.png');
background-repeat:no-repeat;
UPDATE :
If you need to add events to image, you can bind an image and a textbox in a horizontal panel as in #Sandro Munda's answer. Also another method is to use an absolute panel and css to make the image and the textbox overlap as such :
public class TextBoxWithImage extends Composite {
public TextBoxWithImage() {
AbsolutePanel p = new AbsolutePanel();
p.add(new TextBox());
Image image = new Image("images/down.png");
image.getElement().getStyle().setMarginLeft(-20, Unit.PX);
p.add(image);
image.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("Clicked!");
}
});
initWidget(p);
}
}
Not directly.
You can extend an HorizontalPanel and create your new widget like the ValueSpinner class does (from the Gwt Mosaic project).
ValueSpinner.java
As you can see, the ValueSpinner joins a TextBox and an Image inside a HorizontalPanel to create the widget.
i need to register a cross platform and version independent click event to the document.
that means i have a two text box and submit button but when i click outside of the two text box and submit button then
alert will be displayed .how can i achive this by gwt
document.get().addMouseClick ???
The easiest way that comes to mind is to wrap everything in a FocusPanel:
ClickHandler clickHandler = new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("TextBox/Button clickHandler.");
event.stopPropagation(); // The important line - We stop the event
// propagation here so that the FocusPanel
// doesn't get the event
}
};
TextBox textBox = new TextBox();
textBox.addClickHandler(clickHandler);
Button button = new Button("Test");
button.addClickHandler(clickHandler);
// Since FocusPanel is a SimplePanel, it can only have one child, so we are
// wrapping everything additionally in a HorizontalPanel
HorizontalPanel hPanel = new HorizontalPanel();
hPanel.add(textBox);
hPanel.add(button);
FocusPanel focusPanel = new FocusPanel(hPanel);
focusPanel.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("Outside."); // Clicked outside of the TextBox/Button
}
});
RootPanel.get().add(focusPanel);
The downside is that you need to assign ClickHandlers to every element you don't want an alert for (you can use the same ClickHandler for that to save memory - like I did above). Other than that, the FocusPanel implementation should ensure that the onclick behavior stays cross-browser.
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