'GWT UiBinder Event Handling for html component in the widget

ui.xml

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
<g:HTMLPanel ui:field="myWidget" addStyleNames='{style.topnav}'>
     <div class='{style.topnav}'>
        <a class='{style.active}' id="home" href="#home">Home</a>
        <a id="news" href="#news">News</a>
        <a id="contact" href="#contact">Contact</a>
        <a id="about" href="#about">About</a>
    </div> 
</g:HTMLPanel>
</ui:UiBinder> 



@UiField HTMLPanel myWidget;

public MenuBarBinder() {
    initWidget(uiBinder.createAndBindUi(this));
    setupHandlers();
}

I apply the handler to myWidget which is a HTMLPanel.

private void setupHandlers() {
    myWidget.addDomHandler(
    new MouseOverHandler() {
        @Override
        public void onMouseOver(MouseOverEvent event) {
            
            
            Window.alert(event.getRelativeElement().getString());
            
            switch (event.getRelativeElement().getId()) {   
                case "home":
                    Window.alert("Home");
                    break;
                case "news":
                    Window.alert("News");
                    break;
                case "contact":
                    Window.alert("Contact");
                    break;
                case "about":
                    Window.alert("About");
                    break;
            }
        }
    },
    MouseOverEvent.getType());
}

I apply the handler to myWidget which is a HTMLPanel. So, it only response to the event on the HTMLPanel. But within the HTMLPanel, there are some HTML components. Is it possible for the event handler to response to these HTML components?

I prefer the HTML codes rather that the gwt counter part in ui.xml because we have a html designer.

Thanks



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source