spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column94


Print Templates, Part V: Re-pagination

Data Center Architect
The Computer Merchant, Ltd
US-MA-chelsea

Justtechjobs.com Post A Job | Post A Resume
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs


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


http://www.internet.com

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint


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

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