Question on Useability

[Ed]

Hi,

The attached diagram explains the problem.

In summary:

When a user clicks in the work area (basic html from server) it takes over the entire screen.

I am trying to replace a Frame (Works) with something without fixed sizing and be able to scroll the data within the workarea.

The reason for basic html is render times for the number of fields being returned from the server.  Converting this data to json causes the render time to balloon.

Splitting data into smaller pieces is not an option at this point.

Any advice would be greatly appreciated

Ed

[Jens]

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.

[Ed]

@Jens Thank You I will look into the options

--
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+unsub...@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.

[Ed]

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 <ej1...@gmail.com> wrote:

@Jens Thank You I will look into the options

On Wed, Apr 12, 2017 at 11:36 AM, Jens <jens.ne...@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.

[Ed]

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

[Ed]

Solved.