Print Templates, Part V: Re-pagination: General Flow - Doc JavaScript

Print Templates, Part V: Re-pagination

General Flow

You can call print templates only from C++. Luckily enough, Microsoft prepared a versatile application to which you can specify your own print template and your own page to view and print. To use this application, you need to have it installed. Please save it to one of your hard drives, and then click it twice. This is what the application looks like. The template we explain in this column is template7.html. Download it to your drive from column94.zip or copy and paste it from Page 7. Once it is on your hard drive, enter its full path name in the Template Source field (no need to hit Return at the end). Click the Print Preview button to see the effect of the template.

The print template template7.html's algorithm is similar to other templates previously presented in this series. The additional capability is on-line pagination that must accommodate a user-entered zoom factor.

The HTML portion of the page is more complex than previous templates. It includes four main elements: two XML behaviors, templatePrinter and headerFooter, a DIV (ui) for the graphic user interface (GUI), and a DIV for the pages to be created on the fly, pagecontainer. Here is the HTML section:

<BODY ONLOAD="Init()" ONRESIZE="ResizeApp()" SCROLL="no">
    <IE:TEMPLATEPRINTER ID="printer"/>
    <IE:HEADERFOOTER ID="headfoot"/>
    <DIV ID="ui">
        <BR>
        <INPUT TYPE="BUTTON" VALUE="Page Setup..."
          onmouseup="DoPageSetup()">
        <INPUT TYPE="BUTTON" VALUE="Zoom In"
          onmouseup="Zoomer('in')">
        <INPUT ID="zoomnumber" TYPE="TEXT" VALUE="50" SIZE="3"
          MAXLENGTH="4" onkeyup="Zoomer('amount')">%
        <INPUT TYPE="BUTTON" VALUE="Zoom Out"
          onmouseup="Zoomer('out')">
        <INPUT TYPE="BUTTON" VALUE="Print..."
          onmouseup="DoPrintFromPreview()">
    </DIV>
    <DIV ID="pagecontainer">
        <DIV ID="zoomcontainer">
        <!-- Dynamically created pages go here. -->
        </DIV>
    </DIV>
</BODY>

This print template is very similar to template6.html from Column 93 (Print Templates, Part IV: User Settings), except for the additional support for changing the zoom factor on line. This new capability requires two changes. First, we need to provide the user with a set of buttons and entry fields to get the new zoom factor. Secondly, we need to change the pagination to accommodate the new zooming. When the new zoom factor requires more pages, then they are simply added. If the new zoom factor requires less pages than the current pagination, we move the excess pages to an invisible portion of the document. The function onRectComplete() handles the overflow case when a new page might need to be created. The function onRectCompleteSimple() handles the non-overflow case, when a page is overflowed but there is already a page to accommodate the excess content. The function ShowFilledPagesAndHideExcessPages() shows the filled pages and sets the excess pages to an absolute location outside the window's boundaries, effectively hiding them from the user. It is more efficient to hide pages in this way, instead of making them invisible with a style property setting.

Next: How to write the GUI

URL: https://www.webreference.com/js/column94/2.html

Print Templates, Part V: Re-pagination: General Flow - Doc JavaScript

Print Templates, Part V: Re-pagination

General Flow

Find a programming school near you