Announcement

Collapse
No announcement yet.
X
Collapse
  • Page of 1
  • Filter
  • Time
Clear All
new posts
Previous template Next
    #1

    DrawPane Printing Issues in IE9/8/7

    Our app is making use of the DrawPane, and when we print it via its parent using Canvas.showPrintPreview(), it renders fine in most browsers except IE 9/8/7. It also exports to PDF via RPCManager.exportContent() in all browsers, including IE.

    We are seeing DrawLabel and DrawLine components showing up at the top left when they should be in the DrawPane on the bottom right. I've attached example code that you can run to reproduce the problem.

    I'm running Isomorphic SmartClient/SmartGWT Framework (SNAPSHOT_v8.3d_2012-09-14/Enterprise Deployment 2012-09-14).

    This is a problem for our IE users.

    Thanks,
    Chris
    Attached Files
    Tags: None
    #2
    We're not seeing this from a quick test using your test case and IE9 (running on Windows 7).
    We're testing against the latest code on the 3.1d branch.

    As a quick sanity check we'd recommend you try the latest nightly build in case you hit a temporary regression in the September 14th build.

    Assuming you do still see the problem, a couple of tips to help us reproduce the problem:
    - What exact OS / Browser combo are you seeing the problem with?
    - Do you see this problem in development mode only (IE with the codesvr parameter on the URL), or in compiled mode as well?
    - When you encounter this issue, is the problem evident in the Print Preview window, or does that look correct (but appear badly formatted on the printed page once you actually print it out)?
    If the problem is visible on the Print Preview window, could you show us a screenshot so we can be clear what exactly you're seeing.
    - Can you show us the .gwt.xml file you're using as well as the contents of the bootstrap HTML file? There may be some difference between your test case and ours (such as different skins being loaded, different doctype, etc) which is causing this for you

    Thanks
    Isomorphic Software

    Comment

      #3
      I downloaded the SmartGWT EE version from 9-27:
      SmartClient Version: SNAPSHOT_v8.3d_2012-09-27/Enterprise Deployment (built 2012-09-27)

      Unfortunately it is still printing in the print preview incorrectly for me.

      I'm using IE Version 9.0.8112.16421 on Windows 7 Enterprise, Version 6.1 Build 7600.

      I see this happen in compiled mode with the war deployed to tomcat. The misprinting is shown in the Print Preview Window. I have attached a screen shot.

      Here is my gwt.xml file contents:
      Code:
      <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN" 
    "http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module rename-to="customds">
    <inherits name='com.google.gwt.user.User'/>
    <inherits name="com.smartgwt.tools.SmartGwtTools"/>
    <inherits name="com.smartgwtee.tools.Tools"/>
    <inherits name="com.smartgwtee.SmartGwtEE"/>
    <inherits name="com.smartgwt.Drawing"/>
	<inherits name="com.smartgwt.Charts"/>
    <entry-point class='com.smartgwt.sample.client.PrintDrawIssue'/>
</module>
      Thanks for your help!
      Attached Files

      Comment

        #4
        Thanks for the follow up. Can you show us the contents of the HTML "bootstrap" file -- the file you actually hit with the browser too?
        I just want to check whether this is a DOCTYPE issue or whether there's anything else in there that might account for the difference

        Comment

          #5
          Here is the html file - it is CustomDS.html. I took your sample project and refactored it to make my test case. Just a note, we have this problem in our application as well.

          Code:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>CustomDS</title>
    
    <!-- IMPORTANT : You must set the variable isomorphicDir to [MODULE_NAME]/sc/ so that the SmartGWT resource are 
	  correctly resolved -->	
	<script> var isomorphicDir = "customds/sc/"; </script>

    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->      
    <script type="text/javascript" language="javascript" src="customds/customds.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>
    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

  </body>
</html>
          I don't know if it would help you, but I could send you the war file for this, or the contents of my project, or even the entire zipped up SmartGWT install with this sample project.

          Thanks!

          Originally posted by Isomorphic View Post
          Thanks for the follow up. Can you show us the contents of the HTML "bootstrap" file -- the file you actually hit with the browser too?
          I just want to check whether this is a DOCTYPE issue or whether there's anything else in there that might account for the difference

          Comment

            #6
            The reason we were failing to see this was indeed the doctype. In IE9 with an HTML5 doctype we make use of the new CANVAS element to render out draw elements whereas in back-compat mode, and in earlier versions of IE we use VML.

            There was a bug in the way VML-rendered drawPanes' printHTML was being generated that led to this misalignment.

            We've made a change to address this. Please try the next nightly build (3.1d branch, dated September 29 or greater) and let us know if you continue to have problems with this

            Thanks
            Isomorphic Software

            Comment

              #7
              I'm so glad you figured out what the issue was. I'm looking forward to trying the next build. I'll post back with results.

              Thank you very much!
              Chris

              Comment

                #8
                One other thought- should I be changing the doctype in my html to HTML5? Or should it stay as is for backwards compatibility?

                Thanks.

                Comment

                  #9
                  Some newer SmartClient / SmartGWT features make use of HTML5 features which are only available in Internet Explorer 9 if you set this doctype.
                  Using CANVAS elements for drawing is one of them, as well as some changes to our skinning system to make use of new css3 capabilities where available.

                  This means it probably does make sense to migrate to setting this doctype.
                  Having the HTML5 doctype in place is supported - you shouldn't see any ill effects on your application (and if you do we will treat them as bugs).

                  Having said this - this will not effect older browsers such as IE versions earlier than 9, so this bug would still need fixing.

                  Comment

                    #10
                    I downloaded the 10/01 nightly build, and the fix did work for me.

                    Thank you!
                    Chris

                    Comment

                      #11
                      - I am using IE 8 (my enterprise requirement, for another ~6 months)
                      - My DrawPane is the child of a Canvas.
                      - The screen display is as expected, a Canvas showing DrawItems where I have placed them.
                      - But the Canvas.getPrintHTML that I set as the body of a PDF simply does not show the DrawPane at all.

                      So to confirm, when you write "this bug would still need fixing," this is the expected behavior on IE 8?

                      If so I'll workaround it by reverting to Img overlays as I had working previously. Or am I missing something?

                      Comment

                        #12
                        In order for PDF export to be used in IE8 and previous, a series of additional .jars are needed. If they were missing, it would break this feature.

                        Comment

                          #13
                          OK, I've looked at this further. The jars you mentioned are all in place. And that is very informative page, thanks.

                          It looks like code is generated for the DrawPane (XML within HTML), but nothing ends up displayed on the PDF.

                          Are you able to tell what's wrong? I've snipped the HTML part, here is just the DrawPane XML that is embedded.
                          Code:
                          <?xml:namespace prefix = rvml /><rvml:GROUP style="POSITION: absolute; WIDTH: 750px; HEIGHT: 350px; TOP: 5px; LEFT: 5px; rotation: 0" id=isc_DrawPane_0$435 class=rvml coordorig="0 0" coordsize = "750,350"><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 13px; HEIGHT: 13px; TOP: 104px; LEFT: 190px" id=isc_DrawItem_0 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "blue" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:LINE id=isc_DrawItem_1 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" from = "190,104" to = "203,117" filled = "f" strokecolor = "blue" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "round" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:LINE><rvml:LINE id=isc_DrawItem_2 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" from = "190,117" to = "203,104" filled = "f" strokecolor = "blue" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "round" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:LINE><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 13px; HEIGHT: 13px; TOP: 104px; LEFT: 282px" id=isc_DrawItem_3 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "black" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 13px; HEIGHT: 13px; TOP: 104px; LEFT: 360px" id=isc_DrawItem_4 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "black" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px; TOP: 168px; LEFT: 38px" id=isc_DrawItem_5 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "blue" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:LINE id=isc_DrawItem_6 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" from = "38,168" to = "50,180" filled = "f" strokecolor = "blue" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "round" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:LINE><rvml:LINE id=isc_DrawItem_7 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" from = "38,180" to = "50,168" filled = "f" strokecolor = "blue" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "round" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:LINE><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px; TOP: 183px; LEFT: 38px" id=isc_DrawItem_8 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "black" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px; TOP: 198px; LEFT: 38px" id=isc_DrawItem_9 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "black" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px; TOP: 213px; LEFT: 38px" id=isc_DrawItem_10 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "black" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px; TOP: 168px; LEFT: 227px" id=isc_DrawItem_11 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "black" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px; TOP: 183px; LEFT: 227px" id=isc_DrawItem_12 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "black" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px; TOP: 198px; LEFT: 227px" id=isc_DrawItem_13 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "black" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 13px; HEIGHT: 13px; TOP: 161px; LEFT: 458px" id=isc_DrawItem_14 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "blue" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT><rvml:LINE id=isc_DrawItem_15 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" from = "458,161" to = "471,174" filled = "f" strokecolor = "blue" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "round" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:LINE><rvml:LINE id=isc_DrawItem_16 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" from = "458,174" to = "471,161" filled = "f" strokecolor = "blue" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "round" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:LINE><rvml:ROUNDRECT style="POSITION: absolute; WIDTH: 13px; HEIGHT: 13px; TOP: 177px; LEFT: 458px" id=isc_DrawItem_17 class=rvml onmousedown="return isc_DrawPane_0.mouseDown();" arcsize = "0" coordsize = "21600,21600" filled = "f" strokecolor = "black" strokeweight = ".75pt"><rvml:STROKE class=rvml opacity = "1" miterlimit = "8" joinstyle = "miter" endcap = "flat" dashstyle = "solid"></rvml:STROKE><rvml:FILL class=rvml opacity = "1"></rvml:FILL><rvml:SHADOW class=rvml on = "f"></rvml:SHADOW></rvml:ROUNDRECT></rvml:GROUP></div>
                          Any advice appreciated, thanks.

                          Comment

                            #14
                            What do you see in the server-side log when the .pdf is being generated? If there are errors or warnings during that process, you need to look into those.

                            Comment

                            Previous template Next
                            Working...
                            X