6 Replies Latest reply on Jul 24, 2010 3:06 AM by Craig Bensemann

    Printable versions of pages

    Craig Bensemann Novice

      I have a number of online forms that users of my system can fill in as part of their daily work. The problem I have is that some companies using my system would prefer to print these out as paper based forms for other employees to fill in and then have someone manually copy these into the online system (I know thats double handling and outdated but thats what they require).

      So I have my xhtml which renders the online form with checkboxes, rich text editors, trees for selection etc etc and I would like a way to print this out as either a pdf or let the browser render it and then have them print it from the browser. Some components (such as trees) wont be rendered as a tree in the paper based form and will need to be changed to a list. I don't want to manually keep two copies of all the forms one for online display and one such as a jasper report or similar for pdf generation as this will become hard to maintain.

      Am I able to create a custom renderer or something which will take the xhtml from the online version and parse it converting any components needed into print friendly versions and then either render the page to the browser or create a pdf of it?

      Any suggestions or pointers would be great.


        • 2. Re: Printable versions of pages
          Craig Bensemann Novice

          Thanks Nicklas,

          I had found Flying Saucer and it looked promising until I realised the bit about displaying some parts of the page differently whether they are being printed or displayed on screen. For example file upload boxes are useless on paper forms so they shouldn't be rendered at all. Rich:tree would probably best be displayed as a list rather than a tree and I guess picklists would be similar. I dont think this is possible using Flying Saucer alone is it??

          Any ideas how I can achieve this?

          • 3. Re: Printable versions of pages
            Serkan Eskici Novice

            Just use a different css for print and import it with media = print in you html document.


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

            This stylesheet is called when someone tries to print your page.

            If you want to disable some parts of the page to be printed, just use display: none on those elements.

            And use pt instead of px or em for font-size when printing !

            If you need more info, google for css & printing, for example this url.

            • 4. Re: Printable versions of pages
              Craig Bensemann Novice

              Thanks for your reply.

              CSS would solve part of the problem. It would let me format the document to fit the correct page size and to hide parts of a form that aren't needed in the print version (such as a file upload component) but CSS will not let me transform the parts of the page. For example a rich:tree or rich:modal panel are interactive components that do things on the screen to allow the user to make selections. printing these out as they appear on screen would not be very helpful to the user filling in the paper form. A person filling in a paper form would need to be presented with a list of options (in the case of a select menu or a rich:tree) and probably have the modal panel printed inline along with the rest of the components on the paper page.

              I'm not sure if this next paragraph actually makes my problem clearer or just confuses the issue so if it doesn't make sense you can safely ignore it :)

              To complicate matters slightly I have created a collection of custom (dynamic) fields so that the user can configure exactly what fields appear on their form (and these will be different for different companies using my system). This is extremely powerful as it lets the companies taylor our system to suit their needs but means that the forms are not simply static xhtml but rather contains a bunch of includes for inserting fields into the template based on the users configuration.

              I don't think this is a trivial problem as its not just a matter of printing off a screen shot or generating a pdf of it but actually generating a usable paper form based on what the user can fill in online.

              I started looking into the ReplacedElementFactory in flying saucer and it may do what I want but I'm not sure if its the best way to go??

              All thoughts and suggestions welcomed.


              • 5. Re: Printable versions of pages
                Serkan Eskici Novice

                AFAIK, if you have a dynamic page and press the Print button, then you'll get what you see on your screen.

                For printing dropdown boxes with css what you can do is the following:

                //your default richfaces dropdown box
                <rich:dropdown or whatever it's called ../>
                <ul class="dropdownForPrint">
                  <ui:repeat value="#{yourItems}" var="item">

                In your default css file:

                .dropdownForPrint { display: none }

                In your print css file:

                .dropdownForPrint { 
                  display: block 

                So in other words you'll have to make alternatives or print friendly versions of those components in plain html and only use them in the print.css.

                Alternatively, there is another JSF library called PrimeFaces which has a Printer component that can print a specified JSF component on your page.

                See it here.

                • 6. Re: Printable versions of pages
                  Craig Bensemann Novice

                  Thanks. I'll have another look into this when I get a bit more time.