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?
Related
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();
}
});
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
}
});
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.
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.
I have been really struggling to get Drag and Drop working in GWT. Last 3 days, I was trying to create a basic drag and drop application and failed. Currently I can drag it around, but I am unable to drop to any location.
How can we solve it? Do we need to modify onDragEnd - I am under the impression that unless I specifically have to do something, I dont have to? I am quite confused.
Also, how do I limit the drop to any single area? I do understand that we can do it using DropController. But I have defined the panels using UiBinder, so how do I get that panel back to link in the DropController? i.e. RootPanel.get() gives me the basic root panel and not the actual panel I want. I tried RootPanel.get("field-id"), but that is showing null even if that id is available. What am I doing wrong?
The code I have written is as follows:
public class TestPanel extends Composite implements
DragHandler, HasMouseDownHandlers, HasMouseUpHandlers, HasMouseMoveHandlers, HasMouseOutHandlers {
interface Binder extends UiBinder<Widget, TestPanel> { }
private static final Binder binder = GWT.create(Binder.class);
#UiField AbsolutePanel absolutePanel;
private PickupDragController TestDragController;
private Image img = new Image("./testicon.png");
public TestPanel(){
initWidget(binder.createAndBindUi(this));
absolutePanel.add(img);
TestDragController = new PickupDragController(RootPanel.get(), false);
AbsolutePositionDropController dropController = new AbsolutePositionDropController(
RootPanel.get());
TestDragController.registerDropController(dropController);
TestDragController.addDragHandler(this);
TestDragController.makeDraggable(this, getDragHandle());
}
private Widget getDragHandle() {
return img;
}
#Override
public void onDragEnd(DragEndEvent event) { }
#Override
public void onDragStart(DragStartEvent event) { }
#Override
public void onPreviewDragEnd(DragEndEvent event) throws VetoDragException { }
#Override
public void onPreviewDragStart(DragStartEvent event) throws VetoDragException { }
#Override
public HandlerRegistration addMouseDownHandler(MouseDownHandler handler) {
return addDomHandler(handler, MouseDownEvent.getType());
}
#Override
public HandlerRegistration addMouseUpHandler(MouseUpHandler handler) {
return addDomHandler(handler, MouseUpEvent.getType());
}
#Override
public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler) {
return addDomHandler(handler, MouseMoveEvent.getType());
}
#Override
public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {
return addDomHandler(handler, MouseOutEvent.getType());
}
}
and the testpanel uibinder looks like the following:
<g:AbsolutePanel ui:field="absolutePanel" styleName="{style.panel}">
</g:AbsolutePanel>
If somebody can help me out, I will be very much obliged.
K
P.S: To explain more: I was able to solve the first question by updating onDragEnd as the following:
#Override
public void onDragEnd(DragEndEvent event) {
DragContext context = event.getContext();
RootPanel.get().add(context.draggable, context.desiredDraggableX, context.desiredDraggableY);
}
but, I am not sure whether this is the correct solution - since I think I should not be doing the positioning myself.
If you're new to GWT dnd, why don't you try the working demo ?
There is a lot of examples and all the source code is available.
(And no, you're not supposed to do the positionning yourself)
You have to add a DragOverHandler on the drop target(s): even if it does nothing, it defines the component as a drop target.
Of course, you still need to define the DropHandler too on this component (and optionally, DragEnterHandler and DragLeaveHandler for visual feedback, in general).
The DragEndHandler is called even if the target isn't reached (drag abandoned in a non-drop area), it is used to change the state of the dragged object, you might need to set a way for the DropHandler to communicate success on dropping to the DragEndHandler (shared variable, EventBus, etc.).