在UIBinder的iFrame中添加GWT小部件？

Question

I want to insert GWT Widgets like FlowPanel, HTMLPanel inside and iframe using GWT. I found this post which inserts content as a String into an iFrame. But, this does not help when I want to integrate other panels and widgets.

I find out how to insert GWT Widgets and Panels programmatically into GWT. Here is how I do it:

  public interface Resources extends ClientBundle {

    @Source({Css.DEFAULT_CSS})
    Css css();

  }

  public interface Css extends CssResource {

    String DEFAULT_CSS = "test/client/app/start/StartView.gss";

    String outerBox();
    String iframe();
    String test();

  }

  @UiField(provided = true)
  Resources resources;

  @UiField(provided = true)
  Messages messages;

  @Inject
  public StartView(final Binder binder, Resources resources, Messages messages)    
  {
    this.resources = resources;
    resources.css().ensureInjected();
    this.messages = messages;
    initWidget(binder.createAndBindUi(this));

    final IFrameElement iframe = Document.get().createIFrameElement();
    FlowPanel innerBox = new FlowPanel() {
       @Override
       protected void onLoad() {
         super.onLoad();

         FlowPanel p1 = new FlowPanel();
         p1.addStyleName(resources.css().test());

         HTMLPanel panel = new HTMLPanel("Hello World!");
         panel.setStyleName(resources.css().test());  // does not work
         p1.add(panel);

         final Document doc = iframe.getContentDocument();
         BodyElement body = doc.getBody();

         body.appendChild(p1.getElement());
         panel.setStyleName(resources.css().test());  // does not work
         p1.getElement().addClassName(resources.css().test()); // does not work

       }
    };
  }

My uiBinder:

<ui:with type="test.client.app.start.StartView.Resources" field="resources" />
<ui:with type="test.client.messages.Messages" field="messages" />

<g:FlowPanel ui:field="outerPanel" addStyleNames="{resources.css.outerBox}">
</g:FlowPanel>

The former code inserts GWT Panels into an iframe. The problem is that I cannot set any css style. Even if I set the style with:

panel.setStyleName(resources.css().test());  // does not work
p1.getElement().addClassName(resources.css().test()); // does not work

both variants do not work. I know I can inject a general css file in the head of the iframe document, but I want to use the GWT resources.

How can I set the styles using CSS/GSS Resources for the Panels inside the iframe?

Answer 1

I would suggest to add content to the iframe programmatically using IFrameElement and retrieving the iframe document with getContentDocument() in order to append the new content.

By the way you can still use UIBinder like this, in your view.ui.xml:

 <iframe  ui:field="container"/>

and in your View.java:

 @UiField IFrameElement container;

About CSS I think the main issue is that iframe is like a sandbox and does not share information with the parent document. My best guess is that you should clone your <link/> or <style/> element from the parent and append it into the <head/> of the child.

The final solution is:

    Event.sinkEvents(iframe, Event.ONLOAD);
    Event.setEventListener(iframe, new EventListener() {
        @Override
        public void onBrowserEvent(Event event) {
            StyleElement style = Document.get().createStyleElement();
            style.setInnerText(resources.css().getText());
            iframe.getContentDocument().getHead().appendChild(style);

            ParagraphElement pEl = Document.get().createPElement();
            pEl.setInnerText("Hallo World");
            pEl.addClassName(resources.css().whatever());
            iframe.getContentDocument().getBody().appendChild(pEl);
        }
    });

The event listener is necessary in order to retrieve the document from the iframe you should wait the frame to load it, even if it is an about:blank .

Answer 2

An <iframe> can't contain child elements (they'll be ignored) since it's effectively a browser window nested in your document. You have to use its src attribute to specify a resource to load.