GWT how to create ul li widget in UiBinder?

Question

I would like to generate <ul><li> element in gwt. I wonder How to achieve this. Can Someone help?

I use gwt 2.7

UiBinder code

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder 
    xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'
    >


        <li ui:field="listItem" class="menu open">
            <m:MaterialLink ui:field="hyperlink" textColor="blue"></m:MaterialLink>
        </li>


</ui:UiBinder>

Java code

@UiField LIElement listItem;

Console output

[INFO] GET /recompile/cms
[INFO]    Job pl.daniel.cms.cms_1_69
[INFO]       starting job: pl.daniel.cms.cms_1_69
[INFO]       Compiling module pl.daniel.cms.cms
[INFO]          Computing all possible rebind results for 'pl.daniel.cms.client.ui.template.menu.GatekeeperProtectedMenuEntry.Binder'
[INFO]             Rebinding pl.daniel.cms.client.ui.template.menu.GatekeeperProtectedMenuEntry.Binder
[INFO]                Invoking generator com.google.gwt.uibinder.rebind.UiBinderGenerator
[INFO]                   [ERROR] Not allowed in an HTML context: <m:MaterialLink textColor='blue' ui:field='hyperlink'> (:12)
[INFO]          [ERROR] Errors in 'gen/pl/daniel/cms/client/ui/template/menu/com_gwtplatform_mvp_client_DesktopGinjector_DesktopGinjectorGinjector_fragment.java'
[INFO]             [ERROR] Line 93: Failed to resolve 'pl.daniel.cms.client.ui.template.menu.GatekeeperProtectedMenuEntry.Binder' via deferred binding
[INFO]          Unification traversed 1505 fields and methods and 454 types. 7 are considered part of the current module and 7 had all of their fields and methods traversed.
[INFO]          [WARN] Some stale types ([pl.daniel.cms.client.ui.template.menu.GatekeeperProtectedMenuEntry_BinderImpl, pl.daniel.cms.client.ui.template.menu.GatekeeperProtectedMenuEntry_BinderImpl$Widgets]) were not reprocessed as was expected. This is either a compiler bug or a Generator has legitimately stopped creating these types.
[INFO]       [ERROR] Compiler returned false
[INFO]       [WARN] recompile failed
[INFO]       [WARN] continuing to serve previous version

Answer 1

Add an HTMLPanel as the root of your widget. HTMLPanel is the default, but it doesn't have to be HTMLPanel, it could also be a FlowPanel or something else.

So something like this will do:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder 
    xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'
    xmlns:m='urn:import:gwt.material.design.client.ui'
>

<g:HTMLPanel>
    <li ui:field="listItem" class="menu open">
        <m:MaterialLink ui:field="hyperlink" textColor="blue"></m:MaterialLink>
    </li>
</g:HTMLPanel>