I want to add printing to my Javascript web application. The application is developed in GWT.
My method includes copying the current active view (Widget) to an iFrame and print the iFrame. This works perfectly fine, when using plain HTML. When I add a Canvas Element, the Canvas element is copied as expected but not redrawn. Is there something I am missing?
I don't think you can do it that way, however you could send the canvas as an image to be printed, using someting like the following (in jQuery):
var image = $('canvas').toDataURL("image/png");
Using image as the src for an image will display the contents of the canvas. Instead of adding a canvas element, add an image witht the same dimensions, and replace its src.
Related
In my flutter application, there is an image I would like to show that comes from another website. On that website, the image is actually a <canvas> element in HTML. I have seen resources about turning the Flutter Canvas into an image, or turning one's own <canvas> element into an image in JavaScript, but never anything about getting it from an external page.
The site I am trying to use is the NOAA Radar view. I could use a WebView to show the entire site but that seems needlessly heavy when I just need a still image.
What would be the best way about getting a still image from the site's <canvas> tag. I tried performing a http GET on the URL but there is no <canvas> tag present there when I do it in curl (via the html package). I believe this is because the canvas is rendered with JavaScript after the page loads.
I have a long form with text inputs, and in the middle of it, I'd like to insert a jquery upload (blueimp) file plugin which uses a form element. I know that nested forms are not valid markup. How can I use CSS to visually position a form element inside another form element without doing some messy absolute positioning?
It seems like using an iframe to generate the content, and then inserting the iframe into the middle of the original form works quite well. I'm unfamiliar with the caveats of iframes but everything seems to work fine.
In my GWT application, I have an iFrame embedding a PDF object. The PDF itself is retrieved from a servlet returning it with application/pdf as content type. In Chrome, my Popup, which is a GXT Window, shows in front of the embedded pdf just fine.
In IE however, the popup hides behind the embedded PDF, even if I make its z-index the max value for IE.
I have also tried to call the Window's focus method after loading it, and looked into alternatives for iFrame, but it led to nothing.
How do I make sure the popup Window will show in front of the PDF? What's causing the fact that the PDF brutally forces itself to the front in the current situation?
Internet Explorer has Windowed and Windowless elements - How the Z-index Attribute Works for HTML Elements. Embedded PDF is displayed using plug-in, so it cannot be behind plain DIV.
You should use the technique when an additional IFRAME is put in front of PDF plug-in, but behind the popup. This effectively will make the popup cover displayed PDF. It seems that GXT itself does not provide such a facility (or it does not work properly). You should probably implement your own popup window by extending the one being used. There you would override show() method to create and size additional IFRAME.
A good starting example is the implementation of PopupImplIE6 in GWT.
I have an iframe that contains GWT code. I'd like from that code to dynamically change the iframe dimensions.
I'm trying the following:
Element iframe = we start from some element inside the iframe;
while (!iframe.getTagName().toLowerCase().equals("iframe")) { // get embedding iframe
iframe = iframe.getParentElement();
}
iframe.setAttribute("style", "height:100px;width:100px;");
It doesn't work. Somewhere in the middle I reach a null parent before getting to the iframe.
How can I change the iframe dimensions from GWT that runs within the iframe itself? I don't mind if its a JSNI-based solution.
Thanks!
You can't do it. If the document inside the iFrame is in your domain, and the document which includes the iFrame is in a different domain, the security mechanism will prevent you from making any changes from one to the other.
I am working to recreate (conceptually) a prototype I've written in Cappuccino in GWT/GXT. Cappuccino made it trivial to display an external webpage as part of the application by using a WebView.
However, I cannot find any way to do this with GWT/GXT. There is a HtmlContainer widget, but this seems to be intended for something else. Any suggestions on how to do this?
If you have the html-code and just want to render it use the "HTML"-widget. Form the docs
A widget that can contain arbitrary HTML. This widget uses a element, causing it to be displayed with block layout.
If you want to display a different page e.g. stackoverflow.com in your webapp use the "frame" widget. From the docs:
A widget that wraps an IFRAME element, which can contain an arbitrary web site.
You can set the url of a ContentPanel
e.g.
ContentPanel panel = new ContentPanel();
panel.setUrl("http://www.url.com/page");
panel.setHeaderVisible(false);
panel.setBorders(false);
panel.setBodyBorder(false);
You can also do this for the GXT Window class too.