printingfrompyjamas edited this page Oct 5, 2011 · 2 revisions

Printing from Pyjamas Applications

This page is a place for people to record useful knowledge about any quirks or difficulties they might find in getting good printed output from Pyjamas applications.

There is no fundamental problem about printing from a Pyjamas application but it as well to be aware of the fact that the layout widgets used by Pyjamas are mostly based on HTML tables and that other HTML constructs, when embedded in tables, do not always behave as they would otherwise.

I describe here a problem I came across, for the benefit of anyone who might attempt a similar task.

Printing page breaks between sections of output

I created an application which read data from a database via JSONRPC and constructed a set of HTML tables. The user interface consisted of a row of ListBoxes in which the user could select various options in a hierarchical manner from left to right. Any change in one of these list boxes would trigger the obtaining of a new set of data and display of a new set of tables.

I wanted the user to be able to print out any or all of the tables on separate sheets of paper.

Original Application Structure

The application was based on a SimplePanel with a VerticalPanel as the primary layout widget. The ListBoxes were contained in a HorizontalPanel which was added to the VerticalPanel. The tables, which were generated as a string of HTML (much faster than using widgets such as Grid etc.), were displayed by calling setHTML on an HTMLPanel which was added to the Vertical Panel.

The HTML string for the tables, if simply saved as a file, with headers, printed perfectly in Internet Explorer (V8), Firefox (V7) and Chrome (V14). However, if printing was attempted from the Pyjamas application, while Internet Explorer always inserted page breaks correctly, even when using scaling factors other than 'Shrink to Fit', both Firefox and Chrome frequently omitted some or all of the page breaks and how they behaved was very scaling dependent.

I eventually realised that was probably caused by the outer table structure inserted by the VerticalPanel. In support of this view, I found that adding an enclosing table to my saved file, caused similar symptoms.

Clearly I had to find a way of laying out the application without using a table for the purpose.

Modified Application Structure

When I noted that HTMLPanel can have widgets embedded, it occurred to me that I could use that to build my user interface, using simple HTML methods to produce an acceptable layout. The basic technique is well described in the HTMLPanel example in the Pyjamas Book <>.\\ I used HTMLPanel.createUniqueId to create an id for each of my ListBox widgets. The widgets were created and populated by a call to the database.

The user interface is represented by an HTML string containing set of <span> tags using those id's and the rest of the page (in my case HTML for a set of tables) is then appended. The whole HTML string s is used as the argument to HTMLPanel.setHTML(s) and then the widgets are added by calling HTMLPanel.add(widget_ref, unique_id).

The only important thing not mentioned in the book is that, when you need to regenerate the page after changing one of the ListBox selections, you first have to have to call HTMLPanel.remove(widget_ref) on all your widgets then reload the panel via setHTML and then add all the widgets again. The widgets and their contents are preserved in this process.

The process seems cumbersome in this description but the code is not significantly more complex than that in the original application. The main point is that the page breaks now correctly print in all the browsers named above. To avoid the user interface appearing in the printout, all the <span> tags have a class which contains the style display:none for @media:print.