Re: Question on Useability

Solved.

On Wed, Apr 12, 2017 at 7:38 PM, Ed <ej197us@gmail.com> wrote:

Figured out the problem:
iframe.contentDocument.designMode= "On";

Should be off.

But still cant figure out sizing of the ifrrame. The container is 100x100 pct.

Will continue to poke around.

ed

On Wed, Apr 12, 2017 at 5:31 PM, Ed <ej197us@gmail.com> wrote:

Hi Jens,

I made these changes: 
<code>
import com.google.gwt.dom.client.IFrameElement;
private static final IFrameElement iframe = Document.get().createIFrameElement();


FlowPanel innerBox = new FlowPanel();
innerBox.getElement().appendChild(iframe);
 

public static void setIFrame(IFrameElement ife, String url) {
        try {
            RequestBuilder builder = new RequestBuilder(RequestBuilder.POST, url);
            Request request = builder.sendRequest(null, new RequestCallback() {
                @Override
                public void onError(Request request, Throwable exception) {
                    Window.alert("Error setIFrame Load");
                }

                @Override
                public void onResponseReceived(Request requestli, Response responseli) {
                    if (200 == responseli.getStatusCode()) {
                        fillIframe(ife,responseli.getText());
                        addHeadElement(ife, "mycss.css");
                    } else {
                        Window.alert("Oops Server Returned: " + responseli.getStatusCode());
                    }
                }
                final native void addHeadElement(IFrameElement iframe, String cssUrl) /*-{
                  setTimeout(function() {

                    var body;
                    if ( iframe.contentDocument ) {
                      // FF
                      iframe.contentDocument.designMode= "On";
                      iframe.contentDocument.execCommand('styleWithCSS',false,'false');
                      body= iframe.contentDocument.body;
                    }
                    else if ( iframe.contentWindow ) {
                      // IE
                      body = iframe.contentWindow.document.body;
                    }

                    if (body == null) {
                      return;
                    }

                    body.className = "custom-body-classname";
                    var head = body.previousSibling;
                    if(head == null) {
                      head = iframe.contentWindow.document.createElement("head");

                      iframe.contentWindow.document.childNodes[0].insertBefore(head, body);
                    }
                    var fileref = iframe.contentWindow.document.createElement("link");
                    fileref.setAttribute("rel", "stylesheet");
                    fileref.setAttribute("type", "text/css");
                    fileref.setAttribute("href", cssUrl);
                    head.appendChild(fileref);
                  }, 50);
                }-*/;
           
            final native void fillIframe(IFrameElement iframe, String content) /*-{
                  var doc = iframe.document;

                  if(iframe.contentDocument)
                    doc = iframe.contentDocument; // For NS6
                  else if(iframe.contentWindow)
                    doc = iframe.contentWindow.document; // For IE5.5 and IE6

                   // Put the content in the iframe
                  doc.open();
                  doc.writeln(content);
                  doc.close();
                }-*/;



            });
        } catch (Throwable e) {
            Window.alert("Error During Log Out");

        }
    }

</code>

Clicking from outside renders the area, but the click from inside the iframe are broken, it offers a select to move rather then the click fo fill the area.

Also the iframe is not sized it is very small.

Any suggestions?

On Wed, Apr 12, 2017 at 11:52 AM, Ed <ej197us@gmail.com> wrote:

@Jens Thank You I will look into the options

On Wed, Apr 12, 2017 at 11:36 AM, Jens <jens.nehlmeier@gmail.com> wrote:

Well there are two solutions:

1.) use an iFrame => opening links inside the iframe should just work. However the URL won't be displayed in the browsers url bar, maybe you don't want that. And because you mentioned it: The iframe must not have a fixed size, you can stretch it via CSS, an example using CSS Flexbox: https://jsfiddle.net/zzvtafv6/

2.) Make a custom widget/composite that takes the HTML and displays it as you do now. However that widget/composite should then intercept all clicks on anchors, prevent the browser default action, extract the href url and download the contents using a XMLHttpRequest. Once you have the result you can again set the html into your custom widget/composite. Basically don't let the browser fetch the url but do it yourself. However you must implement additional logic for clicks on anchors with modifiers and other special cases (CTRL + left click, right click -> open as, right click -> open) that trigger specific browser actions like opening the link in a new tab. It might be a bit tricky to get right so the user does not notice that you have actually intercepted their clicks.

Using an iframe is probably the easiest solution, and they are still allowed in HTML5.

Maybe there is a possible 3rd solution using web components / html import, see: http://webagility.com/posts/web-components-vs-iframes but I think you still need to intercept clicks that way, as in the 2nd solution.

-- J.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "GWT Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at https://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.