Need to catch MouseOutEvent when mouse leaves grid. Tried this:
grid.addHandler(new MouseOutHandler() {
#Override
public void onMouseOut(MouseOutEvent event) {
...
}
}, MouseOutEvent.getType());
but it fires on every cell in grid. Any help ?
First, use addDomHandler instead.
grid.addDomHandler(new MouseOutHandler() {
#Override
public void onMouseOut(MouseOutEvent event) {
...
}
}, MouseOutEvent.getType());
The difference is that addHandler does not wire the event up to the dom, but addDomHandler does. This seems to not always be required since once the event is wired up, it need not be done again, but as a good practice, every time you add a dom event handler to a widget, you should always use addDomHandler (or directly call sinkEvents, etc).
Okay, the real question asked was that too many events are going off, instead of just the general 'did the mouse leave the grid' event.
To handle this, check if the eventTarget of the event is the grid's own element. You are getting many events since you are getting all mouseout events for every element that is inside the grid, but just need to filter this down to the specific ones you are interested in.
This will look something like this:
grid.addDomHandler(new MouseOutHandler() {
#Override
public void onMouseOut(MouseOutEvent event) {
//check event target of the event
Element target = (Element) event.getNativeEvent().getEventTarget();
if (grid.getElement().equals(target) {
// the mouse has left the entire grid
// ...
}
}
}, MouseOutEvent.getType());
Solution came from jQuery via JSNI:
private native void addMouseLeaveHandler(Element element) /*-{
$wnd.$(element).mouseleave(function(){
....
});
}-*/;
Related
I have a problem with the GWT MouseHandler events:
This the code:
#Override
protected void extend(ServerConnector target) {
final Widget widget = ((ComponentConnector) target).getWidget();
widget.addDomHandler(new MouseOverHandler() {
#Override
public void onMouseOver(MouseOverEvent e) {
widget.setVisible(false);
}
}, MouseOverEvent.getType());
widget.addDomHandler(new MouseOutHandler() {
#Override
public void onMouseOut(MouseOutEvent event) {
widget.setVisible(true);
}
}, MouseOutEvent.getType());
}
I am using Vaadin, this is inside the an extension connector. The hovered element is a simple label. Everything works great when I either use only the MouseOverHandler or the MouseOutHandler, but when I use them together I get this horrible result (please, take a look at the video to understand what I mean):
http://tinypic.com/player.php?v=jrxpq0%3E&s=8#.VMSkFnCUc4Q
Why does MouseOverHandler and MouseOutHandler do so when they are together?
This has nothing to do with gwt. You are hiding the widget, when the mouse is over it. When the element hides, the mouse is not over it anymore and so the mouseOut event is triggered, which makes the widget visible again. This will trigger the mouseOver event again and the loop begins again.
It is basically this:
<div onMouseOver="this.style='visibility:hidden;'" onMouseOut="this.style=''">blub</div>
Or on jsfiddle to play around: http://jsfiddle.net/9cwsqca4/
I am using GWT wrapper by MoxieGroup for Highcharts. How can I make it so that any click anywhere on the chart will fire an event. Thought this might be the right starting point
chart.addDomHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event)
{
Window.alert("Clicked");
}
}, ClickEvent.getType());
It seems like highcharts has some trouble passing events through it, either by design or because of some conflict with the SVG. That said the MoxieGroup has a couple methods that should help you out.
This is the method you should use to add a click handler to the background of the chart. Clicking on the series, or near the series won't fire this handler.
chart.setClickEventHandler(new ChartClickEventHandler() {
#Override
public boolean onClick(ChartClickEvent chartClickEvent) {
GWT.log("chart click"+chartClickEvent.getClientX());
return false;
}
});
The following handler will allow you to capture the click events when you click on a series.
chart.setSeriesPlotOptions(new SeriesPlotOptions()
.setSeriesClickEventHandler(new SeriesClickEventHandler() {
public boolean onClick(SeriesClickEvent clickEvent) {
GWT.log("series click");
return true;
}
})
);
Between the two of them you should be able to capture most of the click events on the chart.
quick question on GWT from a newbie. Considering the following code:
FlowPanel block = buildMyBlock(); // buildMyBlock builds a FlowPanel with different widgets in it
block.addDomHandler(
new ClickHandler()
{
#Override
public void onClick(ClickEvent event)
{
// do some stuff
}
},
ClickEvent.getType());
in the onClick() method, I'd like to be able to make different treatments depending on the internal elements that have been clicked inside block
Is it possible? And how ?
You can use Element.as(event.getNativeEvent().getEventTarget()) to retrieve the actual target of the event.
I've been looking through GXT3's Tree API for some way to execute an action when I click or double click on a node in a tree, and I can't seem to find anything that would work.
I know TreeGrid has a CellClickHandler and CellDoubleClick handler, but there doesn't seem to be anything similar for Tree. There's the generic addHandler method inherited from Widget but this seems like it would apply to the whole tree, not a specific node.
Is there something I'm overlooking, or a different / better way to do this?
use the TreePanel's selection model:
treePanel.getSelectionModel().addSelectionChangedListener(
new SelectionChangedListener<BaseTreeModel>() {
#Override
public void selectionChanged(SelectionChangedEvent<BaseTreeModel> se) {
BaseTreeModel selectedItem = se.getSelectedItem();
// implement functionality
}
}
);
see the TreePanel API for a reference.
Use this for Single Selection
tree.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
tree.getSelectionModel().addSelectionHandler(new SelectionHandler<MenuView.MenuDto>() {
public void onSelection(SelectionEvent<MenuDto> event) {
MenuDto mnu = event.getSelectedItem();
Info.display("Tree Handler", mnu.getDescripcion());
}
});
For Multiple Selections
tree.getSelectionModel().addSelectionChangedHandler(new SelectionChangedHandler<MenuView.MenuDto>() {
public void onSelectionChanged(SelectionChangedEvent<MenuDto> event) {
List<MenuDto> mnus = event.getSelection();
Info.display("Tree Handler", mnus.get(0).getDescripcion());
}
});
Another option is to override Tree's onDoubleClick (or onClick) method:
Tree tree = new Tree<MyModel, String>(store, valueProvider){
#Override
protected void onDoubleClick(Event event) {
TreeNode<MyModel> node = findNode(event.getEventTarget().<Element> cast());
Info.display("Double Click", "You double clicked this node!");
super.onDoubleClick(event);
}
};
Figured it out.This can be achieved by using the Cell Action Tree, an implementation of which can be found here: http://www.sencha.com/examples/#ExamplePlace:cellactiontree
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.