Print Templates, Part VI: Interactive Margin Settings: - Doc JavaScript

Print Templates, Part VI: Interactive Margin Settings

In this column we conclude our series on print templates. Print templates first appeared in Internet Explorer 5.5, and were later improved in Internet Explorer 6. In column 89, Print Templates, Part I, we showed you how to assemble a print template with two out of the four elements of print templates: LayoutRect and DeviceRect. In Column 91 (Print Templates, Part II: TemplatePrinter) we added the TemplatePrinter element. In Column 92 (Print Templates, Part III: HeaderFooter), we covered the fourth and last element of print templates, HeaderFooter. In Column 93, (Print Templates, Part IV: User Settings) we taught you how to reflect the user settings in the document layout. In Column 94 (Print Templates, Part V: Re-pagination), we explained how to re-paginate a document following a change in its zoom factor. In this column, we'll explain how to change the page margins interactively. This column is an extension of Column 94. There, we explained how to re-paginate a page due to a change in its zoom factor. Here, we introduce another way to trigger re-pagination: changing the page margins. When the user makes the page margin wider, there will be a need to lay out the document across more pages. The interactive nature of this column is achieved by four markers, each assigned to handle one of the four margin lines: top, bottom, right, and left. The user can change a margin simply by dragging the relevant marker along a horizontal or vertical line. We'll show you how to define the three event handlers for the mousedown, mousemove, and mouseup events. This column also combines several capabilities we have presented before, such as dynamic page assembling, printing with and without preview, adding headers and footers, updating the total number of pages in all pages, page formatting according to user settings, re-pagination due to a change in the zoom factor, etc.

The only way to call TemplatePrinter and HeaderFooter is through C++ code. Luckily, someone in Microsoft wrote an application to which you can feed your own print templates and the documents you want to print. This application comes with sample print templates that our columns are based on. In this column we introduce a GUI to change the page margins in template8.html.

In this column you will learn:

• How to write the print template template8.html
• How to initialize the print template
• How to write the mousedown event handler
• How to write the mousemove event handler
• How to write the mouseup event handler
• How to show and hide the margin dashed lines

You can see the full code listing of template8 on Page 8. Load it from the enclosed zipped file.

Next: How to write the print template