Greetings folks, I have an application developed in GWT and I would like to print tall GWT widgets (i.e. taller than one page). I found a method that works with Safari and Chrome browsers but it didn't work with FireFox. Maybe, it's related to the fact that Safari and Chrome are based on the Webkit html rendering technology while Firefox is based on Gecko.
Anyway, I have tried to find a new approach. So, I have just tested the Print class from Andre Freller (the latest version) in order to print GWT widgets. http://groups.google.com.my/group/Google-Web-Toolkit/browse_thread/thread/5bf6997b00dca94a?hl=en I don't know why but in all my tests trying to print any widget (even a short one) result in printing a frustratng (toString()) type of message like [object HTMLDivElement] or [object] Many people seems to succeed using this code, so I'm wondering what I could missed... So, I'm posting on the GWT Google Group, maybe someone else has encountered the same problem and found a solution. I've done my test using Windows XP, GWT 1.5.3 and FireFox 3.0.8, Chrome, IE 7 and Safari 3 So below, you will find the code have wrote to benchmark along with the printing class Thanks fo any help you can provide Claude Coulombe OpenSyllabus project Montreal -------------------------------------------------------------------------------------------- the PrintTest.html file -------------------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- --> <!-- Any title is fine --> <!-- --> <title>PrintTest</title> <!-- --> <!-- 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="br.com.freller.tool.PrintTest.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> <!-- Test Andre Freller Printing Class --> <iframe id="__printingFrame" style="width:0;height:0;border:0"></ iframe> <div id="printPageButton"></div> <div id="printWidgetButton"></div> <div id="printDOMByIdButton"></div> <div id="printStyleWidgetButton"></div> <div id="tallWidget"></div> </body> </html> -------------------------------------------------------------------------------------------- the PaperPrintTest.css file -------------------------------------------------------------------------------------------- body { float:none; position:relative; background-color: white; overflow: visible; } .TallWidgetStyle { background-color: #C3D9FF; padding: 2px; margin: 2px; font-size: 10px; font-weight: normal;} .TallWidgetPaperStyle { float:none; position:relative; background-color: white; overflow: visible; font-weight: bold; } -------------------------------------------------------------------------------------------- the PrintTest.gwt.xml file -------------------------------------------------------------------------------------------- <module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- Inherit the default GWT style sheet. You can change --> <!-- the theme of your GWT application by uncommenting --> <!-- any one of the following lines. --> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> --> <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> --> <!-- Other module inherits --> <!-- Specify the app entry point class. --> <entry-point class='br.com.freller.tool.client.PrintTest'/> <!-- Specify the application specific style sheet. --> <stylesheet src='PaperPrintTest.css' /> </module> -------------------------------------------------------------------------------------------- the Print.java file (the Printing class from Andre Freller) -------------------------------------------------------------------------------------------- package br.com.freller.tool.client; /** * <pre> * Generic printing class * can be used to print the Window it self, DOM.Elements, UIObjects (Widgets) and plain HTML * package br.com.freller.tool.client; * Usage: * You must insert this iframe in your host page: * <iframe id="__printingFrame" style="width:0;height: 0;border:0"></iframe> * * Window: * Print.it(); * * Objects/HTML: * Print.it(RootPanel.get("myId")); * Print.it(DOM.getElementById("myId")); * Print.it("Just <b>Print.it()</b>!"); * * Objects/HTML using styles: * Print.it("<link rel='StyleSheet' type='text/css' media='paper' href='/paperStyle.css'>", RootPanel.get('myId')); * Print.it("<style type='text/css' media='paper'> .newPage { page-break-after: always; } </style>", "Hi<p class='newPage'></p>By"); * </pre> */ import com.google.gwt.user.client.Command; import com.google.gwt.user.client.DeferredCommand; import com.google.gwt.user.client.Element; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.UIObject; public class Print { public static native void it() /*-{ $wnd.print(); $wnd.alert("I am printing a page."); }-*/; public static native void buildFrame(String html) /*-{ var frame = $doc.getElementById('__printingFrame'); if (!frame) { $wnd.alert("Error: Can't find printing frame."); return; } var doc = frame.contentWindow.document; doc.open(); doc.write(html); doc.close(); $wnd.alert("I have build a printing frame."); }-*/; public static native void printFrame() /*-{ var frame = $doc.getElementById('__printingFrame'); frame = frame.contentWindow; frame.focus(); frame.print(); $wnd.alert("I am printing the frame."); }-*/; public static class PrintFrame implements Command { public void execute() { printFrame(); } } public static PrintFrame printFrameCommmand = new PrintFrame(); public static void it(String html) { try { buildFrame(html); DeferredCommand.addCommand(printFrameCommmand); } catch (Throwable exc) { Window.alert(exc.getMessage()); } } public static void it(UIObject obj) { it("", obj.getElement().toString()); } public static void it(Element element) { it("", element.toString()); } public static void it(String style, String it) { it("<html><head>"+style+"</head>\n<body>"+it+"</body></html>"); } public static void it(String style, UIObject obj) { it(style, obj.getElement().toString()); } public static void it(String style, Element element) { it(style, element.toString()); } } Greetings folks, I have an application developed in GWT and I would like to print tall GWT widgets (i.e. taller than one page). I found a method that works with Safari and Chrome browsers but it didn't work with FireFox. Maybe, it's related to the fact that Safari and Chrome are based on the Webkit html rendering technology while Firefox is based on Gecko. Anyway, I have tried to find a new approach. So, I have just tested the Print class from Andre Freller (the latest version) in order to print GWT widgets. http://groups.google.com.my/group/Google-Web-Toolkit/browse_thread/thread/5bf6997b00dca94a?hl=en I don't know why but in all my tests trying to print any widget (even a short one) result in printing a frustratng (toString()) type of message like [object HTMLDivElement] or [object] Many people seems to succeed using this code, so I'm wondering what I could missed... So, I'm posting on the GWT Google Group, maybe someone else has encountered the same problem and found a solution. I've done my test using Windows XP, GWT 1.5.3 and FireFox 3.0.8, Chrome, IE 7 and Safari 3 So below, you will find the code have wrote to benchmark along with the printing class Thanks fo any help you can provide Claude Coulombe OpenSyllabus project Montreal -------------------------------------------------------------------------------------------- the PrintTest.html file -------------------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- --> <!-- Any title is fine --> <!-- --> <title>PrintTest</title> <!-- --> <!-- 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="br.com.freller.tool.PrintTest.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> <!-- Test Andre Freller Printing Class --> <iframe id="__printingFrame" style="width:0;height:0;border:0"></ iframe> <div id="printPageButton"></div> <div id="printWidgetButton"></div> <div id="printDOMByIdButton"></div> <div id="printStyleWidgetButton"></div> <div id="tallWidget"></div> </body> </html> -------------------------------------------------------------------------------------------- the PaperPrintTest.css file -------------------------------------------------------------------------------------------- body { float:none; position:relative; background-color: white; overflow: visible; } .TallWidgetStyle { background-color: #C3D9FF; padding: 2px; margin: 2px; font-size: 10px; font-weight: normal;} .TallWidgetPaperStyle { float:none; position:relative; background-color: white; overflow: visible; font-weight: bold; } -------------------------------------------------------------------------------------------- the PrintTest.gwt.xml file -------------------------------------------------------------------------------------------- <module> <!-- Inherit the core Web Toolkit stuff. --> <inherits name='com.google.gwt.user.User'/> <!-- Inherit the default GWT style sheet. You can change --> <!-- the theme of your GWT application by uncommenting --> <!-- any one of the following lines. --> <inherits name='com.google.gwt.user.theme.standard.Standard'/> <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> --> <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> --> <!-- Other module inherits --> <!-- Specify the app entry point class. --> <entry-point class='br.com.freller.tool.client.PrintTest'/> <!-- Specify the application specific style sheet. --> <stylesheet src='PaperPrintTest.css' /> </module> -------------------------------------------------------------------------------------------- the PrintTest.java file (my testing class) -------------------------------------------------------------------------------------------- package br.com.freller.tool.client; import br.com.freller.tool.client.Print; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.user.client.DOM; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.ClickListener; import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.HasHorizontalAlignment; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; import com.google.gwt.user.client.ui.TextArea; import com.google.gwt.user.client.ui.VerticalPanel; import com.google.gwt.user.client.ui.Widget; /** * Entry point classes define <code>onModuleLoad()</code>. */ public class PrintTest implements EntryPoint { private static class TallWidget extends Composite { public TallWidget() { super(); VerticalPanel container = new VerticalPanel(); container.setHorizontalAlignment (HasHorizontalAlignment.ALIGN_CENTER); container.add(new Label("Andre Freller Class Printing Test")); TextArea textContainer = new TextArea(); textContainer.setHeight("10000px"); String veryLongText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus laoreet sollicitudin leo. " + "Suspendisse erat enim, lacinia et, aliquet ut, dictum sit amet, nisl. Integer fermentum dolor " + "sed augue. Nam suscipit, felis eu consequat rutrum, urna lorem pellentesque velit, ut sollicitudin " + "ante neque in felis. Suspendisse pharetra, tellus eget malesuada dignissim, lectus velit feugiat " + "augue, facilisis convallis ante felis id urna. Ut non sem. Fusce vestibulum auctor enim. Donec " + "vestibulum dui eu nulla. Sed nibh. Integer feugiat pharetra urna. Integer tempus tellus condimentum " + "risus. Maecenas viverra nunc eget massa. Nullam libero felis, vestibulum id, sollicitudin eu, congue " + "vitae, lorem. Nullam urna arcu, faucibus at, condimentum eu, semper quis, erat. Vivamus ultrices nunc " + "vitae lorem. Duis vehicula mauris quis libero. Integer elit. Proin id justo. Donec eget ipsum." + " copy and paste as many times as needed the above paragraph "; textContainer.setText(veryLongText); container.add(textContainer); container.setBorderWidth(2); initWidget(container); this.addStyleName("TallWidgetStyle"); } } public void onModuleLoad() { final TallWidget myWidget = new TallWidget(); RootPanel.get("tallWidget").add(myWidget); Button printPageButton = new Button("Print Page"); printPageButton.addClickListener(new ClickListener() { public void onClick(Widget sender) { myWidget.addStyleName("TallWidgetPaperStyle"); Print.it(); myWidget.removeStyleName("TallWidgetPaperStyle"); } }); RootPanel.get("printPageButton").add(printPageButton); Button printWidgetButton = new Button("Print TallWidget"); printWidgetButton.addClickListener(new ClickListener() { public void onClick(Widget sender) { myWidget.addStyleName("TallWidgetPaperStyle"); Print.it(RootPanel.get("tallWidget")); myWidget.removeStyleName("TallWidgetPaperStyle"); } }); RootPanel.get("printWidgetButton").add(printWidgetButton); Button printDOMByIdButton = new Button("Print DOM TallWidget"); printDOMByIdButton.addClickListener(new ClickListener() { public void onClick(Widget sender) { myWidget.addStyleName("TallWidgetPaperStyle"); Print.it(DOM.getElementById("tallWidget")); myWidget.removeStyleName("TallWidgetPaperStyle"); } }); RootPanel.get("printDOMByIdButton").add(printDOMByIdButton); Button printStyleWidgetButton = new Button("Print TallWidget with Style"); printStyleWidgetButton.addClickListener(new ClickListener() { public void onClick(Widget sender) { myWidget.addStyleName("TallWidgetPaperStyle"); Print.it("<link rel=StyleSheet type=text/css media=paper href=PaperPrintTest.css>",RootPanel.get("tallWidget")); myWidget.removeStyleName("TallWidgetPaperStyle"); } }); RootPanel.get("printStyleWidgetButton").add (printStyleWidgetButton); } } --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to Google-Web-Toolkit@googlegroups.com To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/Google-Web-Toolkit?hl=en -~----------~----~----~----~------~----~------~--~---
