Print Templates, Part V: Re-pagination: Graphic User Interface - Doc JavaScript

Print Templates, Part V: Re-pagination

Graphic User Interface

Print preview a document with template7.html in the Microsoft Print Template Display Tool. The top portion of the page is the Graphic User Interface (GUI). There are four buttons (Page Setup..., Print..., Zoom In, and Zoom Out) and one entry field for the zoom factor. Here is how we define them in the HTML section:

<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>

The Page Setup... button calls DoPageSetup(). It just pops up the Page Setup dialog box, and the user can fill in options or change existing selections. Upon clicking OK, the new settings go into effect and impact the look of the document. Here is the function:

function DoPageSetup() {
    printer.showPageSetupDialog();
    InitClasses();
  }

The InitClasses() function updates the various style objects of the page, so user entries affect the look of the document as soon as the form is OKed.

The Print... button calls the DoPrintFromPreview() function. It pops up the Print dialog box, prompting the user for changes and updates to the print settings, and then prints the document via the PrintPrep() function. Here is the DoPrintFromPreview() function:

function DoPrintFromPreview() {
  if (printer.showPrintDialog()) {PrintPrep();}
}

The Zoom In button calls the Zoomer() function with the "in" argument. It zooms in the document by 1%. Similarly, the Zoom Out button zooms out by 1%. The text entry field in the center of the GUI prompts the user for a zoom factor. The onkeyup event handler calls Zoomer() with the 'amount' keyword. Zoomer() acts upon the change in the text field, rejecting all but the Return key.

Go ahead and play around with the GUI for a while. Enter zoom factors. Notice that only when the Return key is pressed does the zoom factor affect the page preview.

Next: How to change the zoom factor

Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: October 8, 2001
Revised: October 8, 2001

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