Accessing devices and sensors - Build Windows 8 Apps with HTML5 and JavaScript - page 305

FIGURE 12-11 Preview of the page being printed.
Printing context-specific content
Printing in Windows 8 is purposefully contextual; users expect to be able to print just what's relevant
in the current state of an application at any time. This means that in a print-oriented application you
will want to keep screen and print content separated, giving you an easy way to switch from one to
the other.
Splitting content in subdocuments
In default.html, you already surrounded the main content of the page with an outermost DIV .
The purpose of this outermost DIV is to let you split any HTML document into two or more
subdocuments: one for regular display and all the others for context-specific print purposes.
For this exercise, suppose you have two print templates to take care of. Add a couple of buttons to
print the two templates.
<button id="buttonPrint1">Print template #1</button>
<button id="buttonPrint2">Print template #2</button>
You define handlers for these buttons in the printerApp.init method in the printerApp.js file.
printerApp.init = function () {
document.getElementById("buttonPrint1")
.addEventListener("click", printerApp.print1, false);
document.getElementById("buttonPrint2")
.addEventListener("click", printerApp.print2, false);
...
}