dojox.gfx doesn't work in iframe on IE

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

dojox.gfx doesn't work in iframe on IE

OldGuru
In order to print graphics in a gfx surface, I created an iframe to render and print it from there, thus avoid printing other parts of the page.

It works fine in Firefox but in IE, although dijit widgets are displayed without problem, I receive an error as soon as I call dojox.gfx.createSurface(div_element). The error message is "Unexpected call to method or property access".

Here is the code snippet that I use to create the iframe and surface. I appreciate any suggestion to resolve this problem.

  Prnt.framediv = document.createElement('DIV');
  Prnt.framediv.id = 'iframe_div';
  document.body.appendChild(Prnt.framediv);
  Prnt.framediv.style.position = 'fixed';
  Prnt.framediv.style.left = '0px';
  Prnt.framediv.style.top = '0px';
  Prnt.framediv.style.zIndex = (popupConfig.ZIndex + 1000);
  Prnt.framediv.innerHTML = '<iframe id="printframe" src="Print.html" width="' + Prnt.width + '" height="' + Prnt.height + '" frameborder="0" marginheight="0" marginwidth="0" onload="Prnt.frameLoaded()"></iframe>';

Prnt.frameLoaded = function()
{
  Prnt.fwin = document.getElementById('printframe').contentWindow;
  Prnt.fdoc = Prnt.fwin.document;
  dojo.setContext(Prnt.fwin, Prnt.fdoc);
  var st = Prnt.fdoc.body.style;
  st.width = String(Prnt.width) + 'px';                           // Adjust iframe body's width
  st.height = String(Prnt.height) + 'px';                         // Adjust iframe body's height
  Prnt.container = Prnt.fdoc.getElementById('prsurface');
  Prnt.createLayout(Prnt.render);
}
Prnt.createLayout = function(fncallback)
{
  Prnt.cp = new dijit.layout.ContentPane({style: ('width:' + Prnt.cpWidth + 'px; height:' + Prnt.cpHeight + 'px; padding:0;')}, Prnt.container);
  Prnt.cp.startup();

...

  Prnt.surface = dojox.gfx.createSurface(Prnt.cp.domNode);
  Prnt.surface.whenLoaded(surfReady);

...

On a side note, I also welcome any ideas to print a surface in other ways. I already tried using toSVG() to convert the surface to svg and then, on server, to png image by ImageMagick. Again, it works fine with Firefox but the svg image produced in IE causes ImageMagick's convert utility to fail.
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

Jared Jurkiewicz
Try Apache Batik.  I had it render IE SVG fine when produced from IE.

-- Jared

On Sat, May 29, 2010 at 12:36 AM, OldGuru <[hidden email]> wrote:

>
> In order to print graphics in a gfx surface, I created an iframe to render
> and print it from there, thus avoid printing other parts of the page.
>
> It works fine in Firefox but in IE, although dijit widgets are displayed
> without problem, I receive an error as soon as I call
> dojox.gfx.createSurface(div_element). The error message is "Unexpected call
> to method or property access".
>
> Here is the code snippet that I use to create the iframe and surface. I
> appreciate any suggestion to resolve this problem.
>
>  Prnt.framediv = document.createElement('DIV');
>  Prnt.framediv.id = 'iframe_div';
>  document.body.appendChild(Prnt.framediv);
>  Prnt.framediv.style.position = 'fixed';
>  Prnt.framediv.style.left = '0px';
>  Prnt.framediv.style.top = '0px';
>  Prnt.framediv.style.zIndex = (popupConfig.ZIndex + 1000);
>  Prnt.framediv.innerHTML = '<iframe id="printframe" src="Print.html"
> width="' + Prnt.width + '" height="' + Prnt.height + '" frameborder="0"
> marginheight="0" marginwidth="0" onload="Prnt.frameLoaded()"></iframe>';
>
> Prnt.frameLoaded = function()
> {
>  Prnt.fwin = document.getElementById('printframe').contentWindow;
>  Prnt.fdoc = Prnt.fwin.document;
>  dojo.setContext(Prnt.fwin, Prnt.fdoc);
>  var st = Prnt.fdoc.body.style;
>  st.width = String(Prnt.width) + 'px';                           // Adjust
> iframe body's width
>  st.height = String(Prnt.height) + 'px';                         // Adjust
> iframe body's height
>  Prnt.container = Prnt.fdoc.getElementById('prsurface');
>  Prnt.createLayout(Prnt.render);
> }
> Prnt.createLayout = function(fncallback)
> {
>  Prnt.cp = new dijit.layout.ContentPane({style: ('width:' + Prnt.cpWidth +
> 'px; height:' + Prnt.cpHeight + 'px; padding:0;')}, Prnt.container);
>  Prnt.cp.startup();
>
> ...
>
>  Prnt.surface = dojox.gfx.createSurface(Prnt.cp.domNode);
>  Prnt.surface.whenLoaded(surfReady);
>
> ...
>
> On a side note, I also welcome any ideas to print a surface in other ways. I
> already tried using toSVG() to convert the surface to svg and then, on
> server, to png image by ImageMagick. Again, it works fine with Firefox but
> the svg image produced in IE causes ImageMagick's convert utility to fail.
> --
> View this message in context: http://dojo-toolkit.33424.n3.nabble.com/dojox-gfx-doesn-t-work-in-iframe-on-IE-tp853823p853823.html
> Sent from the Dojo Toolkit mailing list archive at Nabble.com.
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://docs.dojocampus.org
> [hidden email]
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

OldGuru
Jared Jurkiewicz wrote
Try Apache Batik.  I had it render IE SVG fine when produced from IE.
It's a Java-based toolkit that provides API for Java applets. Since I haven't worked with Java and also I'm currently under severe time constraints, I didn't try that. Do you know how it can be used by JavaScript?

Farid
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

OldGuru
Could one of dojox.gfx developers please tell me if it's a known issue in GFX extension and I should try to find another way, or it's supposed to work but I'm doing something wrong.

I appreciate any comments.
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

Jared Jurkiewicz
Can you provide a simple 'testcase' that shows what you're trying to
do and the error from the frame?  Testcases are far more likely to get
a clear, definitive, answer.

-- Jared

On Sun, May 30, 2010 at 1:36 PM, OldGuru <[hidden email]> wrote:

>
> Could one of dojox.gfx developers please tell me if it's a known issue in GFX
> extension and I should try to find another way, or it's supposed to work but
> I'm doing something wrong.
>
> I appreciate any comments.
> --
> View this message in context: http://dojo-toolkit.33424.n3.nabble.com/dojox-gfx-doesn-t-work-in-iframe-on-IE-tp853823p856623.html
> Sent from the Dojo Toolkit mailing list archive at Nabble.com.
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://docs.dojocampus.org
> [hidden email]
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

Jared Jurkiewicz
I know you provided a code snippit, but a fully working single-page
testcase is simpler for people to look at (as they don't have to
guess/infer what you are doing and spend time building the testcase
themselves).

-- Jared

On Sun, May 30, 2010 at 1:39 PM, Jared Jurkiewicz
<[hidden email]> wrote:

> Can you provide a simple 'testcase' that shows what you're trying to
> do and the error from the frame?  Testcases are far more likely to get
> a clear, definitive, answer.
>
> -- Jared
>
> On Sun, May 30, 2010 at 1:36 PM, OldGuru <[hidden email]> wrote:
>>
>> Could one of dojox.gfx developers please tell me if it's a known issue in GFX
>> extension and I should try to find another way, or it's supposed to work but
>> I'm doing something wrong.
>>
>> I appreciate any comments.
>> --
>> View this message in context: http://dojo-toolkit.33424.n3.nabble.com/dojox-gfx-doesn-t-work-in-iframe-on-IE-tp853823p856623.html
>> Sent from the Dojo Toolkit mailing list archive at Nabble.com.
>> _______________________________________________
>> FAQ: http://dojotoolkit.org/support/faq
>> Book: http://docs.dojocampus.org
>> [hidden email]
>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>>
>
_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

Eugene Lazutkin
No it is not a known issue --- dojox.gfx is known to work in frames.

Please prepare a minimalistic example like Jared advised, open a ticket
in the trac, and attach it as a file, so we can run it and see what goes
wrong.

Cheers,

Eugene Lazutkin
Dojo Toolkit, Committer
http://lazutkin.com/

On 05/30/2010 12:41 PM, Jared Jurkiewicz wrote:

> I know you provided a code snippit, but a fully working single-page
> testcase is simpler for people to look at (as they don't have to
> guess/infer what you are doing and spend time building the testcase
> themselves).
>
> -- Jared
>
> On Sun, May 30, 2010 at 1:39 PM, Jared Jurkiewicz
> <[hidden email]> wrote:
>> Can you provide a simple 'testcase' that shows what you're trying to
>> do and the error from the frame?  Testcases are far more likely to get
>> a clear, definitive, answer.
>>
>> -- Jared
>>
>> On Sun, May 30, 2010 at 1:36 PM, OldGuru <[hidden email]> wrote:
>>>
>>> Could one of dojox.gfx developers please tell me if it's a known issue in GFX
>>> extension and I should try to find another way, or it's supposed to work but
>>> I'm doing something wrong.
>>>
>>> I appreciate any comments.
>>> --
>>> View this message in context: http://dojo-toolkit.33424.n3.nabble.com/dojox-gfx-doesn-t-work-in-iframe-on-IE-tp853823p856623.html
>>> Sent from the Dojo Toolkit mailing list archive at Nabble.com.
>>> _______________________________________________
>>> FAQ: http://dojotoolkit.org/support/faq
>>> Book: http://docs.dojocampus.org
>>> [hidden email]
>>> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>>>
>>
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://docs.dojocampus.org
> [hidden email]
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
[hidden email]
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

OldGuru
Eugene Lazutkin wrote
No it is not a known issue --- dojox.gfx is known to work in frames.

Please prepare a minimalistic example like Jared advised, open a ticket
in the trac, and attach it as a file, so we can run it and see what goes
wrong.

Cheers,

Eugene Lazutkin
Dojo Toolkit, Committer
http://lazutkin.com/

On 05/30/2010 12:41 PM, Jared Jurkiewicz wrote:
> I know you provided a code snippit, but a fully working single-page
> testcase is simpler for people to look at (as they don't have to
> guess/infer what you are doing and spend time building the testcase
> themselves).
>
> -- Jared
Thanks for the replies. I'll get to it as soon as I can.

Farid
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

OldGuru
In reply to this post by Eugene Lazutkin
Eugene Lazutkin wrote
No it is not a known issue --- dojox.gfx is known to work in frames.

Please prepare a minimalistic example like Jared advised, open a ticket
in the trac, and attach it as a file, so we can run it and see what goes
wrong.

Cheers,

Eugene Lazutkin
Dojo Toolkit, Committer
http://lazutkin.com/

On 05/30/2010 12:41 PM, Jared Jurkiewicz wrote:
> I know you provided a code snippit, but a fully working single-page
> testcase is simpler for people to look at (as they don't have to
> guess/infer what you are doing and spend time building the testcase
> themselves).
>
> -- Jared
>
> On Sun, May 30, 2010 at 1:39 PM, Jared Jurkiewicz
> <jared.jurkiewicz@gmail.com> wrote:
>> Can you provide a simple 'testcase' that shows what you're trying to
>> do and the error from the frame?  Testcases are far more likely to get
>> a clear, definitive, answer.
>>
>> -- Jared
I opened Ticket #11240 in trac and attached a test case.
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

OldGuru
OldGuru wrote
Eugene Lazutkin wrote
No it is not a known issue --- dojox.gfx is known to work in frames.

Please prepare a minimalistic example like Jared advised, open a ticket
in the trac, and attach it as a file, so we can run it and see what goes
wrong.

Cheers,

Eugene Lazutkin
Dojo Toolkit, Committer
http://lazutkin.com/

On 05/30/2010 12:41 PM, Jared Jurkiewicz wrote:
> I know you provided a code snippit, but a fully working single-page
> testcase is simpler for people to look at (as they don't have to
> guess/infer what you are doing and spend time building the testcase
> themselves).
>
> -- Jared
>
> On Sun, May 30, 2010 at 1:39 PM, Jared Jurkiewicz
> <jared.jurkiewicz@gmail.com> wrote:
>> Can you provide a simple 'testcase' that shows what you're trying to
>> do and the error from the frame?  Testcases are far more likely to get
>> a clear, definitive, answer.
>>
>> -- Jared
I opened Ticket #11240 in trac and attached a test case.
Considering the number of open tickets, it may take a while for this problem to be resolved through the trac. So, I pasted the test files here and appreciate if someone can suggest a workaround.

The test case consists of files gfxcase.html and Print.html. To run the test, place the files in a directory and navigate to gfxcase.html.

_____________________ Print.html _____________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="assets/casscss/cass.css" />
<link rel="stylesheet" type="text/css" href="assets/cassjs/dijit/themes/soria/soria.css" />
</head>
<body class="soria" style="color: #404040; background-color: white; background-image: none;">
  <div id="printdiv" style="position: absolute; left: 0; top: 0;">
    <div id="prsurface" style="border: 0; display: inline;"></div>
  </div>
</body>
</html>

_____________________ gfxcase.html _____________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>GFX Case</title>
<script type="text/javascript"> <!----------------------------------------------------> var Prnt = {} function loadDojo(fncallback) { djConfig = { // Dojo Config object afterOnLoad : true , parseOnLoad : false , isDebug : false , locale : 'en-gb' , addOnLoad : fncallback , require : [ 'dojo._base.Color' , 'dojo.colors' , 'dijit.dijit' , 'dijit.layout.ContentPane' , 'dojox.gfx' , 'dojox.gfx.shape' , 'dojox.gfx.arc' ] }; var js = document.getElementsByTagName('head')[0].appendChild(document.createElement('script')); js.src = 'http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js'; js.type = 'text/javascript'; } function loaded() { Prnt.framediv = document.createElement('DIV'); Prnt.framediv.id = 'iframe_div'; document.body.appendChild(Prnt.framediv); Prnt.framediv.style.position = 'fixed'; Prnt.framediv.style.left = '0px'; Prnt.framediv.style.top = '0px'; Prnt.framediv.innerHTML = '<iframe id="printframe" src="Print.html" width="700" height="500" frameborder="0" marginheight="0" marginwidth="0" onload="Prnt.frameLoaded()"></iframe>'; } Prnt.frameLoaded = function() { Prnt.fwin = document.getElementById('printframe').contentWindow; Prnt.fdoc = Prnt.fwin.document; dojo.setContext(Prnt.fwin, Prnt.fdoc); Prnt.container = Prnt.fdoc.getElementById('prsurface'); Prnt.cp = new dijit.layout.ContentPane({style: ('width:700px; height:500px; padding:0;')}, Prnt.container); Prnt.cp.startup(); alert('Before createSurface()'); Prnt.surface = dojox.gfx.createSurface(Prnt.cp.domNode); alert('After createSurface()'); Prnt.surface.whenLoaded(Prnt.render); } Prnt.render = function() { Prnt.surface.createShape({type: 'ellipse', cx: 300, cy: 200, rx: 80, ry: 40}).setFill('blue').setStroke('black'); } <!----------------------------------------------------> </script>
</head>
<body style="color: black; background-color: lightgrey;" onload="loadDojo(loaded)">
 

BODY

</body>
</html>

_____________________________________________
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

chiropract
This post has NOT been accepted by the mailing list yet.
In reply to this post by OldGuru
Reply | Threaded
Open this post in threaded view
|

Re: dojox.gfx doesn't work in iframe on IE

OldGuru
In reply to this post by OldGuru
I managed to find a work around for the problem:

    - Load another copy of dojo (the custom build) in iFrame.
    - After dojo is loaded in iFrame add:
            Prnt.gfx = dojox.gfx;
            dojox.gfx = Prnt.fwin.dojox.gfx;

    - Before destroying the iFrame add:
            dojox.gfx = Prnt.gfx;
            Prnt.gfx = null;

There is a catch though; for some reason you cannot pass an array as a parameter to gfx methods. So, for example, when I needed to combine several transformations in setTransform(), I used multiply() instead of an array of transformations. Or, instead of createPolyline([points]) I used createShape({type: 'polyline', points: [points]}).
OldGuru wrote
OldGuru wrote
Eugene Lazutkin wrote
No it is not a known issue --- dojox.gfx is known to work in frames.

Please prepare a minimalistic example like Jared advised, open a ticket
in the trac, and attach it as a file, so we can run it and see what goes
wrong.

Cheers,

Eugene Lazutkin
Dojo Toolkit, Committer
http://lazutkin.com/

On 05/30/2010 12:41 PM, Jared Jurkiewicz wrote:
> I know you provided a code snippit, but a fully working single-page
> testcase is simpler for people to look at (as they don't have to
> guess/infer what you are doing and spend time building the testcase
> themselves).
>
> -- Jared
>
> On Sun, May 30, 2010 at 1:39 PM, Jared Jurkiewicz
> <jared.jurkiewicz@gmail.com> wrote:
>> Can you provide a simple 'testcase' that shows what you're trying to
>> do and the error from the frame?  Testcases are far more likely to get
>> a clear, definitive, answer.
>>
>> -- Jared
I opened Ticket #11240 in trac and attached a test case.
Considering the number of open tickets, it may take a while for this problem to be resolved through the trac. So, I pasted the test files here and appreciate if someone can suggest a workaround.

The test case consists of files gfxcase.html and Print.html. To run the test, place the files in a directory and navigate to gfxcase.html.

_____________________ Print.html _____________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="assets/casscss/cass.css" />
<link rel="stylesheet" type="text/css" href="assets/cassjs/dijit/themes/soria/soria.css" />
</head>
<body class="soria" style="color: #404040; background-color: white; background-image: none;">
  <div id="printdiv" style="position: absolute; left: 0; top: 0;">
    <div id="prsurface" style="border: 0; display: inline;"></div>
  </div>
</body>
</html>

_____________________ gfxcase.html _____________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>GFX Case</title>
<script type="text/javascript"> <!----------------------------------------------------> var Prnt = {} function loadDojo(fncallback) { djConfig = { // Dojo Config object afterOnLoad : true , parseOnLoad : false , isDebug : false , locale : 'en-gb' , addOnLoad : fncallback , require : [ 'dojo._base.Color' , 'dojo.colors' , 'dijit.dijit' , 'dijit.layout.ContentPane' , 'dojox.gfx' , 'dojox.gfx.shape' , 'dojox.gfx.arc' ] }; var js = document.getElementsByTagName('head')[0].appendChild(document.createElement('script')); js.src = 'http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js'; js.type = 'text/javascript'; } function loaded() { Prnt.framediv = document.createElement('DIV'); Prnt.framediv.id = 'iframe_div'; document.body.appendChild(Prnt.framediv); Prnt.framediv.style.position = 'fixed'; Prnt.framediv.style.left = '0px'; Prnt.framediv.style.top = '0px'; Prnt.framediv.innerHTML = '<iframe id="printframe" src="Print.html" width="700" height="500" frameborder="0" marginheight="0" marginwidth="0" onload="Prnt.frameLoaded()"></iframe>'; } Prnt.frameLoaded = function() { Prnt.fwin = document.getElementById('printframe').contentWindow; Prnt.fdoc = Prnt.fwin.document; dojo.setContext(Prnt.fwin, Prnt.fdoc); Prnt.container = Prnt.fdoc.getElementById('prsurface'); Prnt.cp = new dijit.layout.ContentPane({style: ('width:700px; height:500px; padding:0;')}, Prnt.container); Prnt.cp.startup(); alert('Before createSurface()'); Prnt.surface = dojox.gfx.createSurface(Prnt.cp.domNode); alert('After createSurface()'); Prnt.surface.whenLoaded(Prnt.render); } Prnt.render = function() { Prnt.surface.createShape({type: 'ellipse', cx: 300, cy: 200, rx: 80, ry: 40}).setFill('blue').setStroke('black'); } <!----------------------------------------------------> </script>
</head>
<body style="color: black; background-color: lightgrey;" onload="loadDojo(loaded)">
 

BODY

</body>
</html>

_____________________________________________