Include HTML component in Uibinder

Question

I would like to include some HTML codes in my gwt UiBinder. For example, put a navigation menu bar in a UiBinder as follows.

MenuBarBinder.ui.xml

<g:HTMLPanel>
    <div class="topnav">
        <a ui:field="home" class="active" href="#home">Home</a>
        <a ui:field="news" href="#news">News</a>
        <a ui:field="contact" href="#contact">Contact</a>
        <a ui:field="about" href="#about">About</a>
    </div> 
</g:HTMLPanel>

MenuBarBinder.java

public class MenuBarBinder extends Composite{

private static MenuBarBinderUiBinder uiBinder = GWT.create(MenuBarBinderUiBinder.class);

interface MenuBarBinderUiBinder extends UiBinder<Widget, MenuBarBinder> {
}

public MenuBarBinder() {
    initWidget(uiBinder.createAndBindUi(this));
}
@UiField
//How can I refer the ui:field here?

}

How can I refer the ui:field in MenuBarUiBinder.java with @UiField?

Since HTML has more options on designing the UI than GWT widget, it would be very helpful to recommend a tutorial describing this.

Thanks

Answer 1

If the element is an anchor <a> then you would link that to a GWT AnchorElement:

<a ui:field="home" class="active" href="#home">Home</a>

...

@UiField AnchorElement home;