How to register ClickHandler to a vector grahpic in gwt-graphics and get-plattform - gwt

Question

I’m trying to use gwt-graphics in a gwt-plattform project.
When I try to register a ClickHandler of a circle I got an exception:
I can add a ClickHandler to the circle in the view, but how can a add in the presenter?
view:
import org.vaadin.gwtgraphics.client.DrawingArea;
import org.vaadin.gwtgraphics.client.shape.Circle;
import com.gwtplatform.mvp.client.ViewImpl;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.HasClickHandlers;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HasValue;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;
import com.google.inject.Inject;
import com.google.gwt.user.client.ui.AbsolutePanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.PushButton;
public class MainPageView extends ViewImpl implements MainPagePresenter.MyView {
private static String html = "<h1>Web Application Starter Project</h1>\n"
+ "<table align=\"center\">\n"
+ " <tr>\n"
+ " <td colspan=\"2\" style=\"font-weight:bold;\">Please enter your name:</td>\n"
+ " </tr>\n"
+ " <tr>\n"
+ " <td id=\"nameFieldContainer\"></td>\n"
+ " <td id=\"sendButtonContainer\"></td>\n"
+ " </tr>\n"
+ " <tr>\n"
+ " <td colspan=\"2\" style=\"color:red;\" id=\"errorLabelContainer\"></td>\n"
+ " </tr>\n" + "</table>\n";
private final HTMLPanel panel = new HTMLPanel(html);
private final Label errorLabel;
private final TextBox nameField;
private final Button sendButton;
private AbsolutePanel absolutePanel = new AbsolutePanel();
Image image_1;
Image image;
DrawingArea d;
Circle circle;
#Inject
public MainPageView() {
sendButton = new Button("Send");
nameField = new TextBox();
nameField.setText("GWT User");
errorLabel = new Label();
// We can add style names to widgets
sendButton.addStyleName("sendButton");
// Add the nameField and sendButton to the RootPanel
// Use RootPanel.get() to get the entire body element
panel.add(nameField, "nameFieldContainer");
panel.add(sendButton, "sendButtonContainer");
d = new DrawingArea(500, 500);
panel.add(absolutePanel);
absolutePanel.setHeight("500px");
// circle.addClickHandler(new ClickHandler() {
//
// #Override
// public void onClick(ClickEvent event) {
// Window.alert("image2");
//
// }
// });
image = new Image("ball1.png");
absolutePanel.add(image, 59, 10);
image.setSize("100px", "100px");
image_1 = new Image("Hexagon.svg");
absolutePanel.add(image_1, 115, 10);
image_1.setSize("100px", "100px");
absolutePanel.add(d, 100, 100);
//
Circle circle = new Circle(100, 100, 150);
circle.setStrokeColor("red");
d.add(circle);
panel.add(errorLabel, "errorLabelContainer");
}
#Override
public Widget asWidget() {
return panel;
}
#Override
public HasValue<String> getNameValue() {
return nameField;
}
#Override
public HasClickHandlers getSendClickHandlers() {
return sendButton;
}
#Override
public void resetAndFocus() {
// Focus the cursor on the name field when the app loads
nameField.setFocus(true);
nameField.selectAll();
}
#Override
public void setError(String errorText) {
errorLabel.setText(errorText);
}
// #Override
// public HasClickHandlers getImage1() {
// return image;
// }
//
// #Override
// public HasClickHandlers getImage2() {
// return image_1;
//
// }
#Override
public HasClickHandlers getCircle() {
return circle;
}
}
Presenter:
package mybla.client.core;
import org.vaadin.gwtgraphics.client.shape.Circle;
import com.gwtplatform.mvp.client.Presenter;
import com.gwtplatform.mvp.client.View;
import com.gwtplatform.mvp.client.annotations.ProxyStandard;
import com.gwtplatform.mvp.client.annotations.NameToken;
import mybla.client.place.NameTokens;
import com.gwtplatform.mvp.client.proxy.ProxyPlace;
import com.google.inject.Inject;
import com.google.gwt.event.shared.EventBus;
import com.gwtplatform.mvp.client.proxy.RevealRootContentEvent;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.HasClickHandlers;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.HasValue;
import com.gwtplatform.mvp.client.proxy.PlaceManager;
import com.gwtplatform.mvp.client.proxy.PlaceRequest;
import mybla.shared.FieldVerifier;
public class MainPagePresenter extends
Presenter<MainPagePresenter.MyView, MainPagePresenter.MyProxy> {
public interface MyView extends View {
HasValue<String> getNameValue();
HasClickHandlers getSendClickHandlers();
void resetAndFocus();
void setError(String errorText);
HasClickHandlers getCircle();
// HasClickHandlers getImage2();
//
// HasClickHandlers getImage1();
}
#ProxyStandard
#NameToken(NameTokens.main)
public interface MyProxy extends ProxyPlace<MainPagePresenter> {
}
private final PlaceManager placeManager;
#Inject
public MainPagePresenter(final EventBus eventBus, final MyView view,
final MyProxy proxy, final PlaceManager placeManager) {
super(eventBus, view, proxy);
this.placeManager = placeManager;
}
#Override
protected void revealInParent() {
RevealRootContentEvent.fire(this, this);
}
#Override
protected void onBind() {
super.onBind();
registerHandler(getView().getSendClickHandlers().addClickHandler(
new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
sendNameToServer();
}
}));
// registerHandler(getView().getImage1().addClickHandler(new ClickHandler() {
//
// #Override
// public void onClick(ClickEvent event) {
// Window.alert("image1");
//
// }
// }));
registerHandler(getView().getCircle().addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("image2");
}
}));
}
#Override
protected void onReset() {
super.onReset();
getView().resetAndFocus();
}
/**
* Send the name from the nameField to the server and wait for a response.
*/
private void sendNameToServer() {
// First, we validate the input.
getView().setError("");
String textToServer = getView().getNameValue().getValue();
if (!FieldVerifier.isValidName(textToServer)) {
getView().setError("Please enter at least four characters");
return;
}
// Then, we transmit it to the ResponsePresenter, which will do the server call
placeManager.revealPlace(new PlaceRequest(NameTokens.response).with(
ResponsePresenter.textToServerParam, textToServer));
}
}

Answer 1

In your presenter:
getView().getCircle().addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event)
{
Window.alert("image2");
}
});
This will use the getter method set in the presenter.view, to access the circle in the View itself.

Answer 2

Looks like the circle you instantiate in your View's constructor is a local variable, not the class-scope variable your getCircle() method returns. Additionally, the commented out code for adding the onclick handler is before the code that instantiates the local variable.
You have:
...
// circle.addClickHandler(new ClickHandler() {
//
// #Override
// public void onClick(ClickEvent event) {
// Window.alert("image2");
// }
// });
...
Circle circle = new Circle(100, 100, 150);
circle.setStrokeColor("red");
d.add(circle);
Change it to:
...
circle = new Circle(100, 100, 150); // This now references the class-scope variable, rather than creating a new local variable.
circle.setStrokeColor("red");
d.add(circle);
circle.addClickHandler(new ClickHandler() { // This will no longer throw a null-pointer exception.
#Override
public void onClick(ClickEvent event) {
Window.alert("image2");
}
});