Hi Thomas,
the reason why I want to use an iframe is the following. I want to create a
JavaScript widget which is integrated into another third party page. Have a
look at this: https://www.livechatinc.com/ They have a chat widget which
has the following structure:
<div class="some-outer-div-stype">
<iframe>
// widget content
</iframe>
</div>
I guess they use the iframe such that the page containing the widget does
not change the css or html tree of the widget.
Do you see how such a technique can be used with GWT?
Am Dienstag, 5. Januar 2016 10:16:39 UTC+1 schrieb Thomas Broyer:
>
>
>
> On Monday, January 4, 2016 at 8:31:56 PM UTC+1, confile wrote:
>>
>> I want to insert GWT Widgets like FlowPanel, HTMLPanel inside and iframe
>> using GWT.
>>
>
> TL;DR: you can't.
>
>
>
>> 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());
>>
>>
> When doing this, you're neutralizing event handling on the widgets, making
> many of them unusable.
>
> What you need to do is either:
>
> - load a GWT app into the iframe and communicate with it to make it
> build the UI you're expecting
> - or only "inject" elements into the frame, not widgets.
>
> But one has to wonder why you want to use an iframe to begin with…
>
>
>
>>
>> panel.setStyleName(resources.css().test()); // does not work
>> p1.getElement().addClassName(resources.css().test()); // does not
>> work
>>
>> }
>> };
>> }
>>
>> 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?*
>>
> As Grzegorz Nowak said, you need to inject your stylesheet into the iframe
> first; it's as easy as creating a <style> element and setting its content
> to resources.css().getText() (which is basically what ensureInjected() does
> in $doc / Document.get())
>
--
You received this message because you are subscribed to the Google Groups "GWT
Contributors" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to google-web-toolkit-contributors+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-web-toolkit-contributors/31d3bf3a-06f9-4044-b539-4fec5710432d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
