Mouse hover on disabled button - gwt

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.

Related

Implementing "onclickout" with GWT

I need a way of capturing onclick event when a user clicks out of a FocusPanel(in the form of a dialog box). I need to warn the user to save their work before clicking outside thus losing the panel. I know how to do it in JavaScript but it I am stuck with GWT. Any assistance will be appreciated.
Every click event provides coordinates of a click. Check that these coordinates are outside of your popup panel.
Alternatively, make your PopupPanel modal, so that users can exit it only by clicking on UI elements that you provide, for example, submit and cancel/close buttons.

How to use Focus on GWT?

I have strange problem..
I want to do this:
I have a focuspanel. In default I want to give him focus:
this.setFocus(true);
I have function onBlur which is able to save all information from focuspanel. But the focus panel doesn's have focus... I must click on him, and in other place to start function onBlur..
Second problem is a... When I have focus and I click on other widget in my focus panel I lose focus.. (Which I have from click on this panel.) It is not expect.
Only way to save information is to fill it in the focus panel, click on the blank space in focus panel and in other place out focus panel.. I don't know how to fix it..
Please, help!
A FlowPanel is a div and can't have focus by default, you need to set the tabindex: https://stackoverflow.com/a/3656524/66416

Show popup/window in a gwt tab

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.

Facebook Send flyout clipping issues

I have a problem with the flyout generated by the Facebook Send button. After clicking the "Send" button the flyout is generated and displayed behind some elements. Obscuring the buttons in the flyout.
I read that this is because of a parent element with the overflow:hidden style. However, I cannot remove this attribute since it will mess up the rest of my sites layout.
I tried to dynamically remove the overflow:hidden attribute upon clicking the Send button (Accepting the layout mess if someone actually uses the send button). Using the following code:
FB.Event.subscribe("message.send", function(response) { //Remove the
overflow:hidden styling here });
Unfortunately this event only fires upon actually sending the flyout form, which is too late as need to take action as soon as the button is pressed that shows the flyout.
Could anyone tell me how to bind an onclick event to the "Send" button or how to reposition the flyout completely. Or perhaps there is an alternate solution I have not yet considered.
Thanks in advance
Fixed position might work for some, but for most it will mess up your layout.
What worked for me is to take off any overflow: auto higher up in your CSS.
I did that and it works great!

What event activates the keyboard in mobile safari

So the focus event causes the soft keyboard to come up for input fields. Im trying to find a way to stop this occuring. The reason is, as some of you may know, a click event has a 300ms delay before anything happens.
To get around this, we have implemented Googles FastButton http://code.google.com/mobile/articles/fast_buttons.html its working good after a minor tweak to also prevent a second mousedown, but if we click on a button and go to a second page that also has a input textfield, the keyboard still pops up.
I've tried preventing the touchend, mousedown, mouseend, click, firing again, and that helps it by not having the flashing cursor on the textfield but the keyboard is still there. If i blur the field you still see the keyboard popping up then disapparing which is not acceptable.
Any ideas?
Hmm... have you considered disabling the fields with disabled="disabled" while loading, and only then enabling them? It might let you get around the initial focused state that launches the keyboard, so that you can blur first, then enable?