Creating a Print Optimized Portal in WLP 9.2

Thursday, February 15, 2007

Creating a print optimized version of your WebLogic Portal in 9.2 is easy with the use of cascading style sheets and ensures your users get the best results when printing.

A common business requirement for portals is that they have an optimized version for printing. Typically a print optimized version means that when a user goes to print the portal it should print without superfluous elements like the header, footer, left navigation, etc. Additionally some formatting elements may change to better suit the printed page.

In most standard websites this is typically done by using Cascading Style Sheets (CSS). As most of you know, CSS controls how various elements look on the screen in terms of their color, font, etc. CSS has the notion of a media type that determines which CSS is used for which media. Common media types include screen and print and a full list is available here http://www.w3.org/TR/REC-CSS2/media.html.

Browsers will automatically take advantage of the media type when specified. Thus when printing a page that has print CSS files specified, the browser will automatically incorporate those styles when printing. This gives the developer a lot of control over how the content is rendered for printing purposes and eliminates having to hit the server again to retrieve a page formatted for printing.

Also, keep in mind that CSS can also be used to determine if elements are displayed or hidden as well and it is this capability that we can leverage to create a print version of our portal. Using the display style in CSS you can easily turn off the header, footer, left navigation and other elements that you do not want to appear in the printed page.

Fortunately for us WLP is heavily based on CSS and we can use the same mechanism within a portal. The file skin.xml controls what CSS files are used as part of the CSS and skin.xml fully supports the media attribute in WLP 9.2. By creating an additional print.css stylesheet we can easily turn off the display of headers and footers when the page is printed. Alternatively, for more complex requirements you could also have a parallel set of stylesheets specifically tuned for the print media type.

As an example, here is a reduced screenshot of a sample web site I have as part of a dev2dev codeshare project I am working on.

To remove the header and footer when printed, I created a stylesheet called print.css which contains the following css:

.bea-portal-body-header, .bea-portal-body-footer {
	display: none;
}

Next I added my new stylesheet to the skin.xml that resides in the skin directory of my look and feel. The skin.xml file is a new feature that provides the developer with fine grained control over the skin definition, it replaces the skin.properties file that was used in 8.1. Adding our new stylesheet to the list of dependencies is trivial and the new line appears as follows:

<ns:link href="css/print.css" 
               rel="stylesheet" 
               type="text/css" 
               media="print"/>

Now that we have this new stylesheet in place, if we open Firefox and do a print preview we can see that the header and footer have now disappeared when printing.

Posted by Gerald Nunn at 4:02 PM | Categories: | | | Permalink