title: Add GWT Widgets inside an iFrame in UIBinder?
body: <p>I want to insert GWT Widgets like FlowPanel, HTMLPanel inside and iframe using GWT. I found <a href="http://bealetech.com/blog/2010/01/25/embedding-html-document-in-an-iframe-with-gwt/" rel="nofollow">this</a> post which inserts content as a String into an iFrame. But, this does not help when I want to integrate other panels and widgets. </p>
  
  <p>I find out how to insert GWT Widgets and Panels programmatically into GWT. Here is how I do it: </p>
  
  <pre><code>  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
  
         }
      };
    }
  </code></pre>
  
  <p>My uiBinder: </p>
  
  <pre><code>&lt;ui:with type="test.client.app.start.StartView.Resources" field="resources" /&gt;
  &lt;ui:with type="test.client.messages.Messages" field="messages" /&gt;
  
  &lt;g:FlowPanel ui:field="outerPanel" addStyleNames="{resources.css.outerBox}"&gt;
  &lt;/g:FlowPanel&gt;
  </code></pre>
  
  <p>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: </p>
  
  <pre><code>panel.setStyleName(resources.css().test());  // does not work
  p1.getElement().addClassName(resources.css().test()); // does not work
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>How can I set the styles using CSS/GSS Resources for the Panels inside the iframe?</strong> </p>