A little help here please. I am experimenting with our exiting non-gwt web page to see if it can be converted. It is quite complicated. Therefore I simplified it down to just a few statements to try and get a feel for how gwt would handle things. The following is a very straight forward ui.xml file. It uses HTML DIV statements because the non-gwt version does. It is as follows":
<ui:UiBinder xmlns:ui="urn:ui:
com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:a="urn:import:com.google.gwt.dev.asm">
<ui:style>
</ui:style>
<g:HTMLPanel>
<!-- Arts code starts here -->
<div>
<div>
<h1>This is a big title.</h1>
<h2>This is a smaller title.</h2>
<div >
<div ui:field="fubarHome">
<a style="float:left" href='#'>Home</a>
</div>
</div> >
</div>
</div>
<!-- Arts code ends here. -->
</g:HTMLPanel>
</ui:UiBinder>
My supporting java form is as followings:
public class TanHpForm extends Composite{
private static TanHpFormUiBinder uiBinder = GWT
.create(TanHpFormUiBinder.class);
interface TanHpFormUiBinder extends UiBinder<Widget, TanHpForm> {
}
public TanHpForm() {
initWidget(uiBinder.createAndBindUi(this));
}
@UiField DivElement fubarHome ;
@UiHandler("fubarHome")
void handleFubarHomeClick(ClickEvent e) {
Window.alert("Hello!");
}
}
This causes a "does not have 'addClikcHandler' method associated error. I know that the easy answer is to use widgets in the ui.xml file but at this time it is not practical. Therefore, I placed the ui:field with the div. How can I associate a click handler to this field?
You can't.
You can add a ClickHandler on the HTMLPanel and then filter out events that happened outside the div (aka event delegation pattern).
Or you can simply replace your <div> with a <g:HTML> widget, which is "a div as a widget with many event handlers and containing HTML". If you need a HTMLPanel instead (because you have other ui:field to put within it), then you'd have to trade the @UiHandler with a call to addDomHandler in your Java code.