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.
Related
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(){
....
});
}-*/;
I am performing the following action in GWT
public class FooPanel extends SimplePanel {
private String url;
public FooPanel () {
super(DOM.createAnchor());
Button button = new Button();
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
foo();
}
});
add(button);
}
}
however when I run the code I get the following error
SimplePanel can only contain one child widget
However Button is a single widget so I am not sure what the problem is? The problem doesn't occur if i don't add the button
Remove this line:
super(DOM.createAnchor());
You don't need it.
You can simply use your Button in your code, or extend a Button widget. Adding a Button to a SimplePanel does not offer any benefits.
Have a look at source code of SimplePanel#add() to analyze this error.
#Override
public void add(Widget w) {
// Can't add() more than one widget to a SimplePanel.
if (getWidget() != null) {
throw new IllegalStateException("SimplePanel can only contain one child widget");
}
setWidget(w);
}
Now its clear from the source code that you have already added a widget in SimplePanel.
Call SimplePanel#getWidget() to get the already added widget.
Look at the source code of default constructor if SimplePanel class. It might help you to understand that how SimplePanel enclose the widget inside it.
/**
* Creates an empty panel that uses a DIV for its contents.
*/
public SimplePanel() {
this(DOM.createDiv());
}
Try with setWidget(button); instead of add(button);
When the user clicks a button, I want to fire the ListGrid Selection event. I called "resultControl.resultGrid.selectRecord(0);" but it didn't work.
From your initial question and your comment, I understand that you want to simulate a selection event in your ListGrid, through a button. Assuming that I understand well, and you are only interested in one record selection (the first one), all you have to do is the following:
final ListGrid listGrid = new ListGrid();
//Initialize your listgrid's data etc.
listGrid.addSelectionChangedHandler(new SelectionChangedHandler() {
#Override
public void onSelectionChanged(SelectionEvent event) {
SC.say("here my code");
}
});
IButton button = new IButton("Select");
button.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
listGrid.selectRecord(0);
}
});
A last note, System.out or System.err won't produce anything when your application runs in production mode. Use a suitable logging solution or the SC.say(), if you want to provide the user with a message, instead.
I'm new to GWT programming. So far I have a DialogBox which is supposed to collect a login and a password, which can if required launch another DialogBox that allows someone to create a new account.
The first of these two DialogBoxes always appears at the top left of the browser screen, and can't be dragged, although part of the definition of a DialogBox is that it can be dragged. However, the second DialogBox can be dragged about the screen without any problem.
What I'd really like is for the first DialogBox to appear in the middle of the screen & be draggable, both of which I thought would happen automatically, but there's not.
So, what things can stop a DialogBox from being draggable? There is nothing on the RootPanel yet. Does that make a difference?
Code fragments available if they help, but perhaps this general outline is enough for some pointers.
Thanks
Neil
Use dialogBox.center() This will center your DialogBox in the middle of the screen. Normally a DialogBox is by default draggable.
Just tried it out and it doens't matter if your RootPanel is empty our not. When I just show the DialogBox on ModuleLoad it is draggable and it is centered. Probably the problem is situated somewhere else.
This is the example of google itself:
public class DialogBoxExample implements EntryPoint, ClickListener {
private static class MyDialog extends DialogBox {
public MyDialog() {
// Set the dialog box's caption.
setText("My First Dialog");
// DialogBox is a SimplePanel, so you have to set its widget property to
// whatever you want its contents to be.
Button ok = new Button("OK");
ok.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
MyDialog.this.hide();
}
});
setWidget(ok);
}
}
public void onModuleLoad() {
Button b = new Button("Click me");
b.addClickListener(this);
RootPanel.get().add(b);
}
public void onClick(Widget sender) {
// Instantiate the dialog box and show it.
new MyDialog().show();
}
}
Here more information about the DialogBox.
Without seeing any of your code it's hard to tell what's going wrong. The following code works for me (ignore the missing styling...):
public void onModuleLoad() {
FlowPanel login = new FlowPanel();
Button create = new Button("create");
login.add(new TextBox());
login.add(new TextBox());
login.add(create);
create.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
final DialogBox box = new DialogBox();
FlowPanel panel = new FlowPanel();
Button close = new Button("close");
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
box.hide();
}
});
panel.add(new Label("some content"));
panel.add(close);
box.setWidget(panel);
box.center();
}
});
DialogBox firstBox = new DialogBox(false, true);
firstBox.setWidget(login);
firstBox.center();
}
Both boxes are draggable and shown in the center of your browser window.
Looks like you're overriding this method in Widget:
public void fireEvent(GwtEvent<?> event) {
if (handlerManager != null) {
handlerManager.fireEvent(event);
}
}
In Widget, handlerManager refers to a private HandlerManager.
Either add super.fireEvent(event) to your method or as you have done rename it.
Well, with vast amounts of trial and error I have found the problem, which was just this: I had a method in an object I'd based on DialogBox called fireEvent, which looked like this:
public void fireEvent(GwtEvent<?> event)
{
handlerManager.fireEvent(event);
}
Then, when a button was clicked on the DialogBox, an event would be created and sent off to the handlerManager to be fired properly.
And it turns out that if I change it to this (LoginEvent is a custom-built event):
public void fireEvent(LoginEvent event)
{
handlerManager.fireEvent(event);
}
... or to this ....
public void fireAnEvent(GwtEvent<?> event)
{
handlerManager.fireEvent(event);
}
the DialogBox is draggable. However, if the method begins with the line
public void fireEvent(GwtEvent<?> event)
then the result is a DialogBox which can't be dragged.
I'm a bit unsettled by this, because I can't fathom a reason why my choice of name of a method should affect the draggability of a DialogBox, or why using a base class (GwtEvent) instead of a custom class that extends it should affect the draggability. And I suspect there are dozens of similar pitfalls for a naive novice like me.
(Expecting the DialogBox to centre itself was simply my mistake.)
It seems that Panel doesn't inherit from HasClickHandlers and I can't add a clickHandler to DivElement. Is there any way to add the clickHandler to a DIV?
EDIT: The reason I can't use Label as that the DIV I want to be clickable contains other DIV.
By default, Panel doesnt 'sink' the onCLick event. That is, clicking on Panels doesnt actually result into a 'ClickEvent' and hence the handler isnt fired. To use click events with Panel (or for that matter any other Widget) you must first invoke sinkEvents() on it with the appropriate event bits.
For example:
SimplePanel p = new SimplePanel();
p.sinkEvents(Event.ONCLICK);
p.setTitle("Click me");
p.setSize("600px", "600px");
p.addHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
Window.alert("SimplePanel clicked!");
}
}, ClickEvent.getType());
The above piece of code first 'enables' click events for the SimplePanel using p.sinkEvents(Event.ONCLICK); and then goes on to add the standard ClickHandler onto it. Note that even though SimplePanel doesnt implement HasClickHandlers, you can always add a handler using the addHandler() method.
Use the FocusPanel.
A simple panel that makes its contents focusable, and adds the ability to catch mouse and keyboard events.
public class ClickableDiv extends FlowPanel implements HasClickHandlers {
#Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
}
That should be all you need. addDomHandler will take care of "sinking" the event type for you.