showPrintPreview() and PrintProperties

[cjustice]

I'm trying to use Canvas.showPrintPreview() and the PrintProperties to include more objects to be rendered. I have some icons and TextItems that I would to include.

I've tried to called setIncludeControls() as shown below, but it just makes things worse - it now isn't showing labels.

Am I using this properly?

PrintProperties printProperties = new PrintProperties();
				String omit[] = printProperties.getOmitControls();
				String includes[] = new String[1];
				includes[0] = "com.smartgwt.client.widgets.Canvas";
				printProperties.setIncludeControls(includes);
				Canvas.showPrintPreview(components, printProperties, "Flight Plan", new PrintPreviewCallback() {
					
					@Override
					public void execute(PrintCanvas printCanvas, PrintWindow printWindow) {
						// TODO Auto-generated method stub
						
					}
				});

Also, is it possible to get to show background colors of the widgets? Or any border styling that is set via css?

Thanks!
Chris

[Isomorphic]

includeControls should use just the leaf name of the class (eg "Canvas").

TextItems would not normally be omitted, they'd just show their value without a surrounding editor (useless on a piece of paper).

The default printing styles are intended for black and white printing. You could re-introduce colors by changing the various print-specific styles in skin_styles.css to be more like the normal styles. We wouldn't recommend re-introducing background color unless you are sure all users will be doing exclusively color printing.

[cjustice]

I do want to show a TextItem, as I want the value the user has entered to be on the printing. I tried turning it on, by adding it to the includeControls, but it didn't show up. Here is my code:

PrintProperties printProperties = new PrintProperties();
				String omit[] = printProperties.getOmitControls();
				String includes[] = new String[1];
				includes[0] = "TextItem";
				printProperties.setIncludeControls(includes);
				Canvas.showPrintPreview(components, printProperties, "Flight Plan", new PrintPreviewCallback() {
					
					@Override
					public void execute(PrintCanvas printCanvas, PrintWindow printWindow) {
						// TODO Auto-generated method stub
						
					}
				});

[Isomorphic]

Again, normal behavior for a TextItem is that it's value *will* show up, it just won't render the editing box around the value when printed. So no need to customize includeControls, but if you somehow have a particular TextItem that's not printing, let's get some more details on that.

[cjustice]

After reviewing the code, I have found they are FloatItem and not TextItem instances that are not displaying.

I do see that I'm using explicit positioning for the Form containing the FloatItem. Could that be an issue?

[CODE]
form.setLeft(rowStart + (i * 62));
form.setTop(top);
hullLayout.addChild(form);
[CODE]

[Isomorphic]

FloatItem will likewise normally just print its value so that's not the problem, but absolute positioning is a problem - we can't replicate that in printed output (browser bugs / limitations) so we don't print such content by default.

You can either:
1. rearrange things so that this widget doesn't need to be absolutely positioned

2. set printChildrenAbsolutelyPositioned which will work in limited cases and may be OK here.

[cjustice]

Could you tell me more about the print specific styles in skin_styles.css? How do I identify them?

We have extensive styling in our app, and we keep those styles in a separate style sheet. When I call showPrintPreview(), the style sheet doesn't load, and the printing doesn't resemble anything like what the web page looks like. Font information, borders, colors, etc are lost. How do I make sure that this style sheet is included in the print preview? The same thing also happens when I export to PDF, so I need the styling accounted for there as well.

Thanks!
Chris

The default printing styles are intended for black and white printing. You could re-introduce colors by changing the various print-specific styles in skin_styles.css to be more like the normal styles. We wouldn't recommend re-introducing background color unless you are sure all users will be doing exclusively color printing.

[Isomorphic]

Various components support setting print-specific styles (see the list in the Printing overview). In many cases these default to null (meaning just use the normal, non-print style). In others the system defaults to using a different style for printing - for example ListGrid headers use the "printHeader" style defined in skin_styles.css.

If you've customized the *default* look and feel for a bunch of components, what you basically have is a custom skin, and by adding your custom declarations to skin_styles.css you can include them in both the printed view and PDF export.

Instructions for packaging a custom skin are in the QuickStart Guide, "Extending SmartGWT" chapter.

[cjustice]

We have already created a custom skin which we use as the base skin for all projects at our company.

For each project, we create a secondary css file, that has styling specific to each project. There are many places in the application that have styling to layouts and fonts that are specific to an instance of a layout or label. These aren't skinning, but styling.

Is it possible to have the print view or the pdf rendering use this secondary skin? It would not be desirable to include every project's specific css styling in the master custom skin (skin_styles.css) as it shared across multiple projects.

Thanks!
Chris

If you've customized the *default* look and feel for a bunch of components, what you basically have is a custom skin, and by adding your custom declarations to skin_styles.css you can include them in both the printed view and PDF export.

Instructions for packaging a custom skin are in the QuickStart Guide, "Extending SmartGWT" chapter.

[Isomorphic]

Doing so is a bit awkward right now (we haven't had a request for further styling printed output) - for print preview / browser-based printing, you would need to modify the printFrame.html helper file that gets loaded to include your extra CSS file. The URL for this helper is settable via PrintCanvas.setPrintFrameURL().

For PDF export, there's a very recently added mechanism to add an additional stylesheet, documented on the PDFExport class itself.

If you can wait a couple of weeks, we plan to simplify this into a single API where you can specify that you want to add a stylesheet for printing and PDF export.

[cjustice]

I'll give those a try for now, and it is great that you are modifying the api to support adding stylesheets!

Please let me know when it is ready, and I'll be happy to test it for you!

Chris

[cjustice]

you would need to modify the printFrame.html helper file that gets loaded to include your extra CSS file. The URL for this helper is settable via PrintCanvas.setPrintFrameURL().

How do you get a hold of the PrintCanvas used by Canvas.showPrintPreview()? Do I have to create the PrintWindow and PrintCanvas manually instead of using Canvas.showPrintPreview()?

Thanks

[Isomorphic]

Use PrintCanvas.setDefaultProperties() to change the default.

[cjustice]

Bingo! That worked. It made a huge difference in how the print view was rendering once our custom styling was applied.

Thanks!