HtmlPanel, custom tag and binder

[David Ignjić]

Hello,

I have problem with widget:

Ui binder file:

<!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:t="urn:import:com.umantis.talent.client.thirdappraisal.widget">

<g:HTMLPanel tag="tr">

<td><g:Label ui:field="label"></g:Label></td>

<td><g:Label ui:field="period"></g:Label></td>

<td><g:Label ui:field="description"></g:Label></td>

<td><t:ValueRadioList ui:field="givenAnswer"></t:ValueRadioList></td>

<td><g:DoubleBox ui:field="scoreValue"></g:DoubleBox></td>

<td><g:TextArea ui:field="givenComment"></g:TextArea></td>

</g:HTMLPanel>

</ui:UiBinder> 

Java file:

package com.umantis.talent.client.thirdappraisal;

import java.util.Map;

import com.google.gwt.core.client.GWT;

import com.google.gwt.editor.client.Editor;

import com.google.gwt.text.shared.AbstractRenderer;

import com.google.gwt.uibinder.client.UiBinder;

import com.google.gwt.uibinder.client.UiField;

import com.google.gwt.user.client.ui.Composite;

import com.google.gwt.user.client.ui.DoubleBox;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.TextArea;

import com.google.gwt.user.client.ui.Widget;

import com.umantis.talent.client.thirdappraisal.widget.ValueRadioList;

import com.umantis.talent.shared.dto.thirdpartyappraisal.ThirdPartyAppraisalQuestionEvaluationModel;

public class QuestionEvaluationEditor extends Composite implements Editor<ThirdPartyAppraisalQuestionEvaluationModel> {

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

    interface QuestionEvaluationEditorUiBinder extends UiBinder<Widget, QuestionEvaluationEditor> {

    }

    @UiField

    Label label;

    @UiField

    Label period;

    @UiField

    Label description;

    @UiField(provided = true)

    ValueRadioList<Long> givenAnswer;

    @UiField

    DoubleBox scoreValue;

    @UiField

    TextArea givenComment;

    private Map<Long, String> dynamicListAnswers;

    public QuestionEvaluationEditor() {

        givenAnswer = new ValueRadioList<Long>(new AbstractRenderer<Long>() {

            @Override

            public String render(Long object) {

                return dynamicListAnswers.get(object);

            }

        });

        initWidget(uiBinder.createAndBindUi(this));

    }

    public void setDynamicListAnswers(Map<Long, String> dynamicListAnswers) {

        this.dynamicListAnswers = dynamicListAnswers;

        givenAnswer.setAcceptableValues(dynamicListAnswers.keySet());

    }

}

I get the error

java.lang.RuntimeException: Cannot find element with id "gwt-uid-67". Perhaps it is not attached to the document body.

at com.google.gwt.uibinder.client.LazyDomElement.get(LazyDomElement.java:70)

at com.umantis.talent.client.thirdappraisal.QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl$Widgets.build_f_HTMLPanel1(QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl.java:89)

at com.umantis.talent.client.thirdappraisal.QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl$Widgets.get_f_HTMLPanel1(QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl.java:79)

at com.umantis.talent.client.thirdappraisal.QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl$Widgets.access$0(QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl.java:78)

at com.umantis.talent.client.thirdappraisal.QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl.createAndBindUi(QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl.java:30)

at com.umantis.talent.client.thirdappraisal.QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl.createAndBindUi(QuestionEvaluationEditor_QuestionEvaluationEditorUiBinderImpl.java:1)

at com.umantis.talent.client.thirdappraisal.QuestionEvaluationEditor.<init>(QuestionEvaluationEditor.java:55)

But if I change line 

<g:HTMLPanel tag="tr"> to <g:HTMLPanel> all working as expected.

I looked into source and problem is with this line

    setElement(scratchDiv.getFirstChildElement());

-->this line    getElement().removeFromParent();

Ok How to solve this ?.

Thanks David Ignjic

[Jens]

Please file an issue for it. 

I once had this issue even without using the "tag" attribute in UiBinder. Actually I could never figure out whats wrong but I had the same LazyDomElement exception. In my case the exception occurs only once in production mode and I was never able to reproduce it.

-- J.

[Thomas Broyer]

I think you just can't do such a thing (using 'tr' as the tag)

The problem is that when parsing <tr><td><span id='gwt-uid-67-></span></td></tr> as innerHTML, the <tr> and <td> and simply dropped, so the HTMLPanel's root element actually becaomes the <span id='gwt-uid-67'>.

Try it for yourself: http://jsfiddle.net/7FhnW/

Maybe the IE-specific workaround is no longer needed and we could now createElement("tr").setInnerHTML("<td><span id='gwt-uid-67'></span></td>") which would work (at least in Chrome, haven't tested anywhere else).

I doubt it though: http://msdn.microsoft.com/en-us/library/ie/ms533897(v=vs.85).aspx

"The innerHTML property is read-only on the col, colGroup, frameSet, html, head, style, table, tBody, tFoot,tHead, title, and tr objects."

Or maybe the IE-specific code could be pushed behind deferred binding.

Anyway, I think it's unsafe to use any table element as HTMLPanel's tag. Maybe we should just call it out in the doc…

[Jens]

I think you just can't do such a thing (using 'tr' as the tag)

The problem is that when parsing <tr><td><span id='gwt-uid-67-></span></td></tr> as innerHTML, the <tr> and <td> and simply dropped, so the HTMLPanel's root element actually becaomes the <span id='gwt-uid-67'>.

Try it for yourself: http://jsfiddle.net/7FhnW/

But if the <span id='gwt-uid-xxxx'> elements are preserved why does LazyDomElement can't find them via Document.get().getElementById()? 

-- J.

[Thomas Broyer]

Here we'd have multiple spans so the temporary <div> would contain "<span id='gwt-uid-1'></span><span id='gwt-uid-2'></span>…" and then the HTMLPanel constructor uses getFirstElementChild() on the div to use as the panel's root element, so the HTMLPanel's root element ends up being the first <span> (rather than the <tr>) and the other spans are ignored/forgotten/garbage-collected.

 

[Jens]

Here we'd have multiple spans so the temporary <div> would contain "<span id='gwt-uid-1'></span><span id='gwt-uid-2'></span>…" and then the HTMLPanel constructor uses getFirstElementChild() on the div to use as the panel's root element, so the HTMLPanel's root element ends up being the first <span> (rather than the <tr>) and the other spans are ignored/forgotten/garbage-collected.

 Ah makes sense..maybe this helps me to identify the issue I had. Same exception but without using a custom tag for HTMLPanel.

-- J.