I have a Canvas element, and a FlowPanel on top of it (in z order). When I click on the FlowPanel, it seems to intercept the click and stops propagating it. I don't have any click listeners set on it though. I want the canvas below it to receive the click event.
Is there a way to get the FlowPanel to ignore the click and let it propagate to the canvas that sits below it?
Thanks
In Chrome, Firefox and Safari 4+ you can use the pointer-events CSS property (it's also well-supported by mobile browsers), but for other browsers (IE, Opera and older Safaris) you'll have to listen to click events at the FlowPanel level and fire synthetic click events on the canvas.
Assuming the FlowPanel and the canvas are aligned, at the same position, you should be able to use DomEvent.fireNativeEvent coupled with Document.get().createClickEvent.
Related
I have a disabled button. On mouse hover of this disabled button, I need to display a popup using GWT.
I tried to wrap it inside a panel and coded mouse hover for the panel. But it's not working instantly all the time.
IMO you should try to avoid this situation. For example, if you just want to show a small tooltip you can use a different title for enabled and disabled state explaining the disabled cause.
If you still want to react to an over event on disable button you can use something like this.
SimplePanel p = new SimplePanel();
Button b = new Button("hover me to toggle disable"); p.add(b);
p.addDomHandler(ev -> button.setEnabled(!b.isEnabled()), MouseOverEvent.getType());
RootPanel.get().add(p);
Although as you already have noticed, the browser does not fire over events on disabled inputs. So if you move the mouse without passing through the panel and goes directly to the button you will not receive the event. You can fix this applying this style.
button.gwt-Button[disabled] {
pointer-events: none;
}
But probably this might have some downsides or might not work in all browsers.
I just want to make a moving button , Is there a way to do that in GWT? Thanks in advance.
BS
Out of the box, you can use a DialogBox to display your button. DialogBox can be moved around, but you will need to display something in a Caption that is used for dragging.
Another option is to use PopupPanel. It can be completely invisible (no Caption), but you will have to implement dragging functionality on your own. The advantage is that a PopupPanel floats on top of all the other layers in your UI.
Finally, you can simply add dragging functionality to a regular button. Just remember to check for the boundaries so that a user cannot drag your button outside of the visible browser area - or obscure some important elements of the UI.
GWT 2.5.1; using Eclipse 4.2 with GPE;
UI specified with UiBinder
The app puts up a splash screen containing a "Go" button. That button's click handler does various initialization, including hiding itself and showing three other buttons, images, and text; it also initiates a server request (XMLHttpRequest) via a RequestBuilder. The RequestBuilder callback uses the returned server data to draw a bar graph in a canvas element.
After I click the "Go" button the browser window looks as expected with all the visual elements mentioned above. But the three buttons are not responsive to clicks. Not only are their handlers not invoked, they don't show the slight visual indication of activation when the mouse is clicked on them. The browser is not frozen; e.g., if the window is resized the app's resize handler is called.
Based on logging: after the "Go" button handler returns the RequestBuilder callback executes; then "nothing happens" i.e., there are no more log outputs (unless I resize the window).
FWIW this is my first GWT endeavor.
By experiment, I found a partial answer. The three non-responsive buttons are declared in the ui.xml file with {style.hidden} referring to a visibility:hidden attribute in my .css. In the java code I unhide these buttons with:
protected void showElement(Element e) {
e.removeClassName(style.hidden());
}
Evidently starting life as hidden and then shown this way is insufficient to activate the buttons. I am about to go off to research why this is so, but an answer to this "smaller" question is still welcome as long as I've not posted a comment indicating that I am less ignorant.
(too long for a comment)
I have just discovered that the problem relates to the fact that I have buttons in the same position, of which only certain ones are supposed to be visible at a given time. In other words, the user would see at the same position on the page one of:
ButtonA ButtonB ButtonC
or
ButtonD ButtonE ButtonF
or
BigButtonG (as wide either of the preceding groups)
The problem is that regardless of visibility, whichever of the three above displays is declared last has (in effect) a higher z-index and is the only one that will be mouse-responsive. So I am just about to implement a solution of explicitly setting div z-indexes in the code which shows/hides button groups.
Can you set the button's positions in your UiBinder file rather than in your Java code? Place them in a HorizontalPanel and they'll be spaced automatically.
And rather than interacting at the Element level to hide a button, instead call your button instance with setVisible(true); e.g., buttonA.setVisible(true)
Is it possible to show a popup only in a certain gwt tab or a panel in that tab?
I've found methods to show a popups over the whole page, but not only in specific tabs.
When you switch the gwt tab, the popup should not be visible anymore and new popups should be able to be created, which again are only visible in the switched to gwt tab. Switching back to the other tab should then show the first popup again.
Optionally the rest of the tab, which is not covered by the popup, should not be clickable.
Are there any native methods for this? The gwt Popup Panel only seems to create popups for the whole page.
Edit: I've tried using smartgwts Window which seems to work just the way I want it to. When I switch the gwt-tab, the popup is no longer visible and returns when I switch back. The only problem is, that it isn't displayed right. The frame is placed on the far left side of the browser tab, while the content is displayed on the far left of the gwt-tab. If I move the content, the frame moves too. The frame is visible over the whole browser tab, while the content disappears if I drag it over the gwt-tab edge.
I guess it's because I'm adding a Window to a gwt-Panel. Is there any way to fix this without changing everything to smartgwt?
Not exactly, I think.
But, you can do something in the tab events, like hide the popup in tabs that it doesnt belongs. To avoid the lag of show/hide the popup, you can do this in the BeforeSelectionHandler, like this:
getView().getTabPanel().addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>()
{
#Override
public void onBeforeSelection(BeforeSelectionEvent<Integer> event)
{
showPopupupsForTab(event.getItem());
}
});
In showPopupupsForTab you can show the popups for this tab (you can handle this with a map or something) and hide the others...
Something like this.
Hope it helps.
I'm using the mediaelement.js jQuery plugin HTML5 player. The player is used in the background of the page so that all menus are above the player. This works perfectly on Firefox, Chrome, OSX Safari and Opera. On iPad Safari, the menus still appear above the video in a z-indez position layered div, but I can't actually click on the menus.
Any idea or suggestion?
I'm having the same problem as lonchbox.
On mobile devices I have a anchor with position:fixed on the bottom right corner, that opens up a div on the click event. On any area of the website the click event works normally, but if I try to click on it while above the player, the click doesn't work.
The pointer-events:none solution is not the case since the player is not capturing the wrong intent of the click, and the click event of the player is working correctly.
I'm guessing it's a z-index problem - on a quick debug via the safari web inspector, deleting the player div makes everything alright. But changing the position to absolute and setting up a high z-index (on both the anchor and the player div, also on the player div's parents) didn't made a difference.
So the menu you want to click on, that shows above the media element doesn't work? There is a CSS property that you can set on the element you don't want receiving clicks, its called pointer-events.
So for your player you could have a rule like this:
.thePlayer {
ponter-events:none;
}
when that rule is set, it can no longer receive click events. You probably don't want the rule to apply all the time, so use some javascript to set it only when the dropdown is activated.