I have got several Composite and I would like to add an Handler to one of them which fire an event if the user open this composite. Is there any Handler for?
Thank you
A good/easy way to fire events is by the use of the GQuery library, which emulates JQuery in GWT code.
It allows you to do things like:
$(yourWidget).blur();
to fire a blur event on yourWidget, for example... if you don't mind adding a dependency to GQuery to your project, this is the way to go in my opinion.
You can even provide a Function which will be called after the event has fired, as in:
$(yourWidget).click(new Function() {
public boolean f(Event e) {
e.preventDefault();
return false;
}
}
I am not sure how you would do that in pure GWT, but it's obviously possible... you may want to see how GQuery does that.
http://code.google.com/p/gwtquery/
Related
I want to replicate this jQuery call in gQuery to open all closed Accordion panels at once:
$('.panel-collapse:not(".in")').collapse('show');
I have tested this on my app and it works, however I am unable to successfully implement the same logic using gQuery to call the JavaScript collapse method:
#Override
public void onClick(ClickEvent event) {
GQuery.$(".panel-collapse").not(".in").trigger("collapse", "show");
}
What is the correct way to call JavaScript methods from gQuery?
Further Info - I have successfully tested this gQuery code in my onClick method to add a test class to the affected divs - so I am certain the selector part of the above query works:
GQuery.$(".panel-collapse").not(".in, .MENU").addClass("test");
Why you can't use collapse with GQuery
IIRC collapse() is not a jQuery API method. Maybe you're using Bootstrap JS, or some jQuery plugin that provides this functionality, but it's not one of the jQuery API methods and thus it's not provided by GQuery.
Why trigger wouldn't work either
GQuery, or GwtQuery, is not a wrapper for jQuery, but a full Java implementation of the jQuery API.
What this means is that, when you do something like this:
GQuery.$(".panel-collapse").not(".in").slideToggle();
You're not invoking jQuery's $(), not(), or slideToggle(); you are using a Java library to achieve the same result.
That's the reason why trying something like trigger("slideToggle") won't work: because a) slideToggle() is not an event, but a function; and b) GQuery doesn't make use of jQuery's JS functions.
Solution with GQuery
You can achieve the same "accordion" effect using the slideUp(), slideDown() and slideToggle() functions methods. To open all the collapsed elements, just calling slideDown() on them should work:
GQuery.$(".panel-collapse").not(".in").slideDown();
For full accordion effect, combine those with the toggleClass() and removeClass() methods to mark which elements are open / closed so you know which ones to toggle when clicked.
Solution with native collapse()
Now, if you don't mind the advice... GQuery is great, but the animations are far from being as smooth as in native jQuery. I guess the same happens with Bootstrap.
If you can (and I can't see a reason why you couldn't), just use JSNI to make a native call to collapse() like this:
private native void collapseAll() /*-{
$wnd.$('.panel-collapse:not(".in")').collapse('show');
}-*/;
This requires that you load jQuery (or Bootstrap) in your page, but since you said that invoking collapse() in plain JS worked, I guess that's your case.
As we are facing GWT performance issues in a mobile app I peeked into Google Wave code since it is developed with GWT.
I thought that all the buttons there are widgets but if you look into generated HTML with firebug you see no onclick attribute set on clickable divs. I wonder how they achieve it having an element that issues click or mousedown events and seemingly neither being a widget nor injected with onclick attribute.
Being able to create such components would surely take me one step further to optimizing performance.
Thanks.
ps: wasnt google going to open source client code too. Have not been able to find it.
You don't have to put an onclick attribute on the HTML to make it have an onclick handler. This is a very simple example:
<div id="mydiv">Regular old div</div>
Then in script:
document.getElementById('mydiv').onclick = function() {
alert('hello!');
}
They wouldn't set the onclick property directly, it would have been set in the GWT code or via another Javascript library.
The GWT documentation shows how to create handlers within a GWT Java app:
public void anonClickHandlerExample() {
Button b = new Button("Click Me");
b.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// handle the click event
}
});
}
This will generate an HTML element and bind a click handler to it. However, in practice this has the same result as using document.getElementById('element').onclick() on an existing element in your page.
You can hook functions to the onclick event using JavaScript. Here's an example using jQuery:
$(document).ready(function(){
$("#div-id").click(function(){
/* Do something */
});
});
If you're interested in optimizing performance around this, you may need to investigate event delegation, depending on your situation.
A click event is generated for every DOM element within the Body. The event travels from the Body down to the element clicked (unless you are using Internet Explorer), hits the element clicked, and then bubbles back up. The event can be captured either through DOM element attributes, event handlers in the javascript, or attributes at any of the parent levels (the bubbling or capturing event triggers this).
I'd imagine they've just set it in a .js file.
Easily done with say jQuery with $(document).ready() for example.
There is a similar question to this for ExtJS but not for GXT.
I wish to simply add an onclick handler to a TreePanel in GXT. That is, I wish to perform an operation when a user clicks on a node in the tree. The showcase does not seem to cover this most basic usecase.
Thanks,
Premature cry for help it seems.
This seems to do the trick:
treePanel.addListener(Events.OnClick, new Listener<TreePanelEvent<ModelData>>() {
public void handleEvent(TreePanelEvent<ModelData> be) {
// do something here
};
});
Can we add a listener for mouse move events on the main document in GWT? I'm not sure how to do this and if whatever I do add will interfere with other parts of GWT (like drag and drop?). In javascript I do this:
window.onload = function() {
document.onmousemove = function(e) {
alert("the mouse was moved!");
};
}
I'm just not sure where to start, GWT got a bit confusing for me since the new stuff was introduce in 2.0 (I used to use 1.4),
Thanks
I'm not sure why you'd want to monitor the movement of the mouse in the whole window, but a quick and dirty solution would be to wrap everything in a FocusPanel and add a handler via addMouseMoveHandler(MouseMoveHandler handler) (check the other interfaces that FocusPanel implements - there's quite a lot of them :)). AFAICT, this shouldn't conflict with anything else (drag&drop is not part of GWT, BTW ;)) - unless you start to mess around with the event itself (like stop propagating it) or something.
I want to disable/enable user interaction (mouse click more specificly) on many widgets like hyperlink, button, etc which are contained in a composite (flextable)
there are more than one click handlers, and I don't want to bother with removing and adding listeners according to mode (interaction enabled/disabled)
Any ideas would be appriciated...
You forgot to mention the version of GWT. In GWT 2.0 you can use this code snippet or something similar. This feature allows you to cancel events before they are handed over to the target widget.
Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
public void onPreviewNativeEvent(NativePreviewEvent pEvent) {
final Element target = pEvent.getNativeEvent().getEventTarget().cast();
// block all events targetted at the children of the composite.
if (DOM.isOrHasChild(getElement(), target)) {
pEvent.cancel();
}
}
});
There is a GlassPanel compoent in google-web-toolkit-incubator. I am almost sure it does what you need. Either way, it is a good idea to cover a disabled component whit one of these.