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 [email protected].
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.
