Hybrid UiBinder Issue: “Not allowed in an HTML context: <g:HTML>” with Parent/Child ImageElement Binding

[divyanshu kumar]

Hi GWT Community,

I’m running into a compile‑time error in my UiBinder definitions and would appreciate any pointers.

Background

• Architecture:

  • A parent class defines its logo as an ImageElement.

  • A subclass must therefore bind the same logo via a native <img> tag.

What I’ve Tried

1. Binding the logo inside an <g:HTMLPanel>:

   <g:HTMLPanel> <img ui:field="logo" src="/static/images/codi-logo.svg" height="30px"/> </g:HTMLPanel>
   when I recompile.

---

Questions

1. Binding native DOM elements
   What’s the best way to bind a native <img> (or other elements) when the parent class expects an ImageElement?

Thanks in advance for any advice or best practices you can share!

[Craig Mitchell]

Just bind it as normal:

@UiField ImageElement logo;

Although, maybe I'm misunderstanding the question.

[divyanshu kumar]

It’s still throwing an error. Here’s the log:

     [java] Compiling module com.google.appinventor.YaClient-dev
     [java]    Ignored 7 units with compilation errors in first pass.
     [java] Compile with -strict or with -logLevel set to TRACE or DEBUG to see all errors.
     [java]    Computing all possible rebind results for 'com.google.appinventor.client.utils.HTML5DragDrop.HTML5DragDropSupport'
     [java]       Rebinding com.google.appinventor.client.utils.HTML5DragDrop.HTML5DragDropSupport
     [java]          Invoking generator com.google.gwt.query.rebind.JsniBundleGenerator
     [java]             JsniBundleGenerator - importing external javascript: com/google/appinventor/client/utils/html5dnd.js
     [java]    Computing all possible rebind results for 'com.google.appinventor.client.style.mobile.TopToolbarMob.TopToolbarMobUiBinder'
     [java]       Rebinding com.google.appinventor.client.style.mobile.TopToolbarMob.TopToolbarMobUiBinder
     [java]          Invoking generator com.google.gwt.uibinder.rebind.UiBinderGenerator
     [java]             [ERROR] Not allowed in an HTML context: <g:HTML> (:18)
     [java]    [ERROR] Errors in 'com/google/appinventor/client/style/mobile/TopToolbarMob.java'
     [java]       [ERROR] Line 51: Failed to resolve 'com.google.appinventor.client.style.mobile.TopToolbarMob.TopToolbarMobUiBinder' via deferred binding
     [java]    [WARN] For the following type(s), generated source was never committed (did you forget to call commit()?)
     [java]       [WARN] com.google.appinventor.client.style.mobile.TopToolbarMob_TopToolbarMobUiBinderImpl

[Craig Mitchell]

That error is about an <g:HTML> somewhere.  Not a <g:HTMLPanel>.

[divyanshu kumar]

yes i even used <g:HTML> it throws same error.

[Craig Mitchell]

Can you share your whole ui.xml file?

[Craig Mitchell]

This is not allowed:

<g:HTML>
<img srcset="" src="/static/images/codi-logo.svg" ui:field="logo" height="37px"/>
</g:HTML>

It has to be an HTMLPanel.  Ie:

<g:HTMLPanel>
<img srcset="" src="/static/images/codi-logo.svg" ui:field="logo" height="37px"/>
</g:HTMLPanel>

HTML is for arbitrary HTML.  HTMLPanel can attach child widgets.

On Sunday, 15 June 2025 at 7:57:00 pm UTC+10 divyanshu kumar wrote:

sure here it is:

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:ai="urn:import:com.google.appinventor.client.widgets"
xmlns:actions="urn:import:com.google.appinventor.client.actions"
xmlns:mob="urn:import:com.google.appinventor.client.style.mobile"
ui:generatedFormat="com.google.gwt.i18n.server.PropertyCatalogFactory"
ui:generatedKeys="com.google.gwt.i18n.server.keygen.MethodNameKeyGenerator"
ui:generateLocales="default">
<ui:with field="messages" type="com.google.appinventor.client.OdeMessages"/>
<ui:with field="config" type="com.google.appinventor.client.OdeMessages"/>
<g:FlowPanel styleName="ode-TopPanel">
<g:HTML>
<img srcset="" src="/static/images/codi-logo.svg" ui:field="logo" height="37px"/>
</g:HTML>
<mob:TopToolbarMob ui:field="topToolbar"/>
<g:FlowPanel ui:field="rightPanel">
<g:FlowPanel styleName="ode-TopPanelAccount">
<g:Label text="{messages.readOnlyMode}" styleName="ode-TopPanelWarningLabel"
ui:field="readOnly"/>
<!-- Help Menu -->
<ai:DropDownButton name="Help" caption="{messages.helpTabName}" styleName="ode-TopPanelButton"
ui:field="helpDropDown" align="right" icon="help">
<ai:DropDownItem name="About" caption="{messages.aboutMenuItem}">
<actions:AboutAction/>
</ai:DropDownItem>
<hr/>
<ai:DropDownItem name="Guide" caption="{messages.guideTabName}">
<actions:OpenGuideAction/>
</ai:DropDownItem>
<ai:DropDownItem name="Feedback" caption="{messages.feedbackTabName}">
<actions:OpenFeedbackAction/>
</ai:DropDownItem>
<ai:DropDownItem name="Library" caption="{messages.libraryMenuItem}">
<actions:OpenLinkAction link_name="Library"/>
</ai:DropDownItem>
<ai:DropDownItem name="GetStarted" caption="{messages.getStartedMenuItem}">
<actions:OpenLinkAction link_name="GetStarted"/>
</ai:DropDownItem>
<ai:DropDownItem name="Extensions" caption="{messages.extensionsMenuItem}">
<actions:OpenLinkAction link_name="Extensions"/>
</ai:DropDownItem>
<ai:DropDownItem name="Tutorials" caption="{messages.tutorialsMenuItem}">
<actions:OpenLinkAction link_name="Tutorials"/>
</ai:DropDownItem>
<ai:DropDownItem name="Troubleshooting" caption="{messages.troubleshootingMenuItem}">
<actions:OpenLinkAction link_name="Troubleshooting"/>
</ai:DropDownItem>
<ai:DropDownItem name="Forums" caption="{messages.forumsMenuItem}">
<actions:OpenLinkAction link_name="Forums"/>
</ai:DropDownItem>
<ai:DropDownItem name="ShowSplash" caption="{messages.showSplashMenuItem}">
<actions:ShowSplashAction/>
</ai:DropDownItem>
<ai:DropDownItem name="ShowShortcuts" caption="{messages.showShortcuts}">
<actions:ShowShortcutsAction/>
</ai:DropDownItem>
</ai:DropDownButton>

<g:FlowPanel styleName="ode-TopPanelLinks" ui:field="links">
<ai:DropDownButton styleName="ode-TopPanelButton" rightAlign="true"
ui:field="languageDropDown" icon="language"/>
<ai:DropDownButton styleName="ode-TopPanelButton" rightAlign="true"
ui:field="accountButton" icon="logout">
<ai:DropDownItem name="Signout" caption="{messages.signOutLink}">
<actions:SignOutAction/>
</ai:DropDownItem>
<ai:DropDownItem name="Signout" ui:field="deleteAccountItem"
caption="{messages.deleteAccountLink}">
<actions:DeleteAccountAction/>
</ai:DropDownItem>
</ai:DropDownButton>
</g:FlowPanel>
</g:FlowPanel>
</g:FlowPanel>
</g:FlowPanel>
</ui:UiBinder>

[divyanshu kumar]

I tried this as well, but I'm still facing the same issue.

<g:HTMLPanel>

<img srcset="" src="/static/images/codi-logo.svg" ui:field="logo" height="37px"/>

</g:HTMLPanel>

[divyanshu kumar]

Thanks for your response.The issue is resolved! Turns out, it was caused by a minor problem in another file. 

[Jens]

You can also replace the root FlowPanel (ode-TopPanel) with a HTMLPanel. Both are represented with a div element but HTMLPanel allows to mix GWT widgets with native HTML. Then you do not have to wrap the <img> element with HTMLPanel because you already are in a HTMLPanel. Saves a div element.

If you do that you might need to adjust the class used in the UiBinder interface definition in your corresponding java file.

Also:

    [java] Compiling module com.google.appinventor.YaClient-dev
    [java]    Ignored 7 units with compilation errors in first pass.
    [java] Compile with -strict or with -logLevel set to TRACE or DEBUG to see all errors.

I would recommend always compiling with -strict parameter to see all errors.

-- J. 

[divyanshu kumar]

Thanks 😊

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-tool...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-web-toolkit/e1bce52a-af3a-44ad-84f5-1e1c72e88223n%40googlegroups.com.