How to fire an event when a DialogBox got hided in GWT? - gwt

I want to call a method whenever my DialogBox is hidden. It doesn't matter how it is hidden, it could be someone click close button or it can be hidden by itself. When that happen the system will call a method.
Look at this code.
public class WishListDialogBox extends DialogBox {
#UiField Button closeButton;
public WishListDialogBox() {
setHTML("Wish List");
setWidget(uiBinder.createAndBindUi(this));
closeButton.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
hide();
}
});
}
#Override
public void hide() {
super.hide();
//call some action here;
}
}
The above code only work when I click CloseButton, but when the DialogBox was hidden by itself, nothing happened.
There is no onHide event in DialogBox.
In traditional Java, there is addWindowListener to handle his very easily, but that is missing in GWT DialogBox.
So, How to fire an event when a DialogBox is hidden in GWT?

Finally I found a solution
this.addCloseHandler(new CloseHandler(){
#Override
public void onClose(CloseEvent event) {
// TODO Auto-generated method stub
//do some action here
}
});

Related

GWT Convert ClickHandler to MouseDownHandler

A solution to this question seems to be to use onMouseDown instead of onClick.
To avoid changing all the buttons throughout the application, I wanted to change the Button widget's addClickHandler so that it adds a MouseDownHandler instead.
Something like
#Override
public HandlerRegistration addClickHandler(ClickHandler clickHandler) {
return button.addMouseDownHandler(new MouseDownHandler() {
#Override
public void onMouseDown(MouseDownEvent event) {
clickHandler.onClick(event);
}
});
}
But I cannot pass a MouseDownEvent to the ClickHandler and I cannot instantiate a ClickEvent.
What's the best way to go?

Event.sinkEvents won't work

I have a vaadin 7 client widget which has a DIV element in it. I am trying to register the click event on DIV elment through Event.sinkEvents. however the browser events never get fired. Here is the piece of code
public class MyWidget extends Widget{
private final DivElement popup = Document.get().createDivElement();
public MyWidget() {
initDOM();
initListeners();
}
private void initDOM(){
popup.setClassName(STYLECLASS);
setElement(popup);
}
public void initListeners(){
Event.sinkEvents(popup, Event.ONCLICK|Event.MOUSEEVENTS);
Event.setEventListener(popup, new EventListener() {
#Override
public void onBrowserEvent(Event event) {
Window.alert("clicked"); // this never get fired.
event.stopPropagation();
}
});
}
Please suggest any pointer.
Regards,
Azhar
There is never a need to do DOM.setEventListener in a widget (and in fact it should be avoided) - just override the widget's own onBrowserEvent method after sinking those events. By sinking those events and attaching the widget to a parent, GWT has internally called setEventListener on the widget itself so that it can handle its own events.
Instead of using Event#sinkEvents, use Widget#sinkEvents. And override the widget's onBrowseEvent to handle the events.
This should do it:
public class MyWidget extends Widget{
private final DivElement popup = Document.get().createDivElement();
public MyWidget() {
initDOM();
}
private void initDOM(){
popup.setClassName(STYLECLASS)
setElement(popup);
sinkEvents(Event.ONCLICK|Event.MOUSEEVENTS);
}
#Override
public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);
if(event.getTypeInt()==Event.ONCLICK){
Window.alert("Clicked");
}
}
}
Yes, Overridding the onBrowserEvent method works.
below code worked.
Event.sinkEvents(popup, Event.ONCLICK|Event.MOUSEEVENTS);
replaced with
sinkEvents(Event.ONCLICK|Event.MOUSEEVENTS);
Will sink the events on widget and not on any DIV. after that below brower event got fired.
public void onBrowserEvent(Event event) {
Window.alert("clicked"); // this never get fired.
event.stopPropagation();
}
});

How to capture doubleClickEvent in GWT CellTable

I'm trying to make a GWT CellTable catch events of type DoubleClickEvent, but while the CellTable correctly receives events of type ClickEvent when a row is clicked in the UI, it not see any DoubleClickEvent when the row is double-clicked.
So, if I click a row in the UI, the handler declared for ClickEvent is correctly triggered, but if I double click the handler declared for DoubleClickEvent is not triggered, instead.
Am I doing something wrong or CellTable itself cannot handle DoubleClickEvent at all?
In the latter case, what could be a good way to capture double-clicks in a table?
Below, the code for my CellTable declaration:
CellTable<ServiceTypeUI> contentTable = new CellTable<ServiceTypeUI>(10, style);
contentTable.setSelectionModel(new SingleSelectionModel<ServiceTypeUI>());
contentTable.addHandler(new DoubleClickHandler() { // HANDLER NOT CORRECTLY TRIGGERED
#Override
#SuppressWarnings("unchecked")
public void onDoubleClick(DoubleClickEvent event) {
presenter.doubleClickHandler(event);
}
}, DoubleClickEvent.getType());
contentTable.addHandler(new ClickHandler() { // HANDLER CORRECTLY TRIGGERED
#Override
#SuppressWarnings("unchecked")
public void onClick(ClickEvent event) {
presenter.clickHandler(event);
}
}, ClickEvent.getType());
I've also tried removing ClickEvent handler declaration and the SelectionModel declaration, to avoid that any of those capture the DoubleClickEvent event and treat it as a ClickEvent but the DoubleClickHandler has not been triggered even in this case.
CellTable<ServiceTypeUI> contentTable = new CellTable<ServiceTypeUI>(10, style);
contentTable.addHandler(new DoubleClickHandler() { // HANDLER NOT CORRECTLY TRIGGERED
#Override
#SuppressWarnings("unchecked")
public void onDoubleClick(DoubleClickEvent event) {
presenter.doubleClickHandler(event);
}
}, DoubleClickEvent.getType());
SingleSelectionModel<T> selectionModel
= new SingleSelectionModel<T>();
cellTable.setSelectionModel(selectionModel);
cellTable.addDomHandler(new DoubleClickHandler() {
#Override
public void onDoubleClick(final DoubleClickEvent event) {
T selected = selectionModel
.getSelectedObject();
if (selected != null) {
//DO YOUR STUFF
}
}
},
DoubleClickEvent.getType());
You have to replace the T with the your "ServiceTypeUI" . The value selected will be the object which was been chosen from the user.

Using drag mouse handlers with GWT canvas

I am currently developing a paint-like application for GWT. I would like to add a mouse handler that runs when the user drags the mouse across the canvas(like making a square,etc;), the problem is that I'm not surewhat handler to use. Looking through the handlers implemented in canvas has lead me to some hints, but the documentation as to what event the apply to is scant.
Does anyone know how I should implement it? Thanks.
There is no "dragging" handler. You imlement "dragging" with MouseDown, MouseMove and MouseUp events.
class YourWidget extends Composite
{
#UiField
Canvas yourCanvas;
private boolean dragging;
private HandlerRegistration mouseMove;
#UiHandler("yourCanvas")
void onMouseDown(MouseDownEvent e) {
dragging = true;
// do other stuff related to starting of "dragging"
mouseMove = yourCanvas.addMouseMoveHandler(new MouseMoveHandler(){
public void onMouseMove(MouseMoveEvent e) {
// ...do stuff that you need when "dragging"
}
});
}
#UiHandler("yourCanvas")
void onMouseUp(MouseUpEvent e) {
if (dragging){
// do other stuff related to stopping of "dragging"
dragging = false;
mouseMove.remove(); // in earlier versions of GWT
//mouseMove.removeHandler(); //in later versions of GWT
}
}
}
I've messed around with this as well and produced this little thing awhile ago:
http://alpha2.colorboxthing.appspot.com/#/
I basically wrapped whatever I needed with a FocusPanel. In my case it was a FlowPanel.
From that program in my UiBinder:
<g:FocusPanel ui:field="boxFocus" styleName="{style.boxFocus}">
<g:FlowPanel ui:field="boxPanel" styleName="{style.boxFocus}"></g:FlowPanel>
</g:FocusPanel>
How I use the focus panel (display.getBoxFocus() seen below just gets the FocusPanel above):
display.getBoxFocus().addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
}
});
display.getBoxFocus().addMouseDownHandler(new MouseDownHandler() {
#Override
public void onMouseDown(MouseDownEvent event) {
}
});
display.getBoxFocus().addMouseMoveHandler(new MouseMoveHandler() {
#Override
public void onMouseMove(MouseMoveEvent event) {
}
});
display.getBoxFocus().addMouseUpHandler(new MouseUpHandler() {
#Override
public void onMouseUp(MouseUpEvent event) {
}
});
// etc!
To answer your question about what handler to use for "dragging" I haven't found a single handler to do that for me. Instead I used a MouseDownHandler, MouseMoveHandler, and a MouseUpHandler.
Use the MouseDownHandler to set a flag that determines when the users mouse is down. I do this so that when MouseMoveHandler is called it knows if it should do anything or not. Finally use MouseUpHandler to toggle that flag if the user has the mouse down or not.
There have been some flaws with this method (if the user drags their mouse off of the FocusPanel), but because my application was just a fun side project I haven't concerned myself with it too much. Add in other handlers to fix that if it becomes a big issue.

DialogBox in GWT isn't draggable or centred

I'm new to GWT programming. So far I have a DialogBox which is supposed to collect a login and a password, which can if required launch another DialogBox that allows someone to create a new account.
The first of these two DialogBoxes always appears at the top left of the browser screen, and can't be dragged, although part of the definition of a DialogBox is that it can be dragged. However, the second DialogBox can be dragged about the screen without any problem.
What I'd really like is for the first DialogBox to appear in the middle of the screen & be draggable, both of which I thought would happen automatically, but there's not.
So, what things can stop a DialogBox from being draggable? There is nothing on the RootPanel yet. Does that make a difference?
Code fragments available if they help, but perhaps this general outline is enough for some pointers.
Thanks
Neil
Use dialogBox.center() This will center your DialogBox in the middle of the screen. Normally a DialogBox is by default draggable.
Just tried it out and it doens't matter if your RootPanel is empty our not. When I just show the DialogBox on ModuleLoad it is draggable and it is centered. Probably the problem is situated somewhere else.
This is the example of google itself:
public class DialogBoxExample implements EntryPoint, ClickListener {
private static class MyDialog extends DialogBox {
public MyDialog() {
// Set the dialog box's caption.
setText("My First Dialog");
// DialogBox is a SimplePanel, so you have to set its widget property to
// whatever you want its contents to be.
Button ok = new Button("OK");
ok.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
MyDialog.this.hide();
}
});
setWidget(ok);
}
}
public void onModuleLoad() {
Button b = new Button("Click me");
b.addClickListener(this);
RootPanel.get().add(b);
}
public void onClick(Widget sender) {
// Instantiate the dialog box and show it.
new MyDialog().show();
}
}
Here more information about the DialogBox.
Without seeing any of your code it's hard to tell what's going wrong. The following code works for me (ignore the missing styling...):
public void onModuleLoad() {
FlowPanel login = new FlowPanel();
Button create = new Button("create");
login.add(new TextBox());
login.add(new TextBox());
login.add(create);
create.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
final DialogBox box = new DialogBox();
FlowPanel panel = new FlowPanel();
Button close = new Button("close");
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
box.hide();
}
});
panel.add(new Label("some content"));
panel.add(close);
box.setWidget(panel);
box.center();
}
});
DialogBox firstBox = new DialogBox(false, true);
firstBox.setWidget(login);
firstBox.center();
}
Both boxes are draggable and shown in the center of your browser window.
Looks like you're overriding this method in Widget:
public void fireEvent(GwtEvent<?> event) {
if (handlerManager != null) {
handlerManager.fireEvent(event);
}
}
In Widget, handlerManager refers to a private HandlerManager.
Either add super.fireEvent(event) to your method or as you have done rename it.
Well, with vast amounts of trial and error I have found the problem, which was just this: I had a method in an object I'd based on DialogBox called fireEvent, which looked like this:
public void fireEvent(GwtEvent<?> event)
{
handlerManager.fireEvent(event);
}
Then, when a button was clicked on the DialogBox, an event would be created and sent off to the handlerManager to be fired properly.
And it turns out that if I change it to this (LoginEvent is a custom-built event):
public void fireEvent(LoginEvent event)
{
handlerManager.fireEvent(event);
}
... or to this ....
public void fireAnEvent(GwtEvent<?> event)
{
handlerManager.fireEvent(event);
}
the DialogBox is draggable. However, if the method begins with the line
public void fireEvent(GwtEvent<?> event)
then the result is a DialogBox which can't be dragged.
I'm a bit unsettled by this, because I can't fathom a reason why my choice of name of a method should affect the draggability of a DialogBox, or why using a base class (GwtEvent) instead of a custom class that extends it should affect the draggability. And I suspect there are dozens of similar pitfalls for a naive novice like me.
(Expecting the DialogBox to centre itself was simply my mistake.)