HTML and CSS Reference
In-Depth Information
task from the application's user interface by, for example, clicking a button. When this happens, the
charms show up programmatically; the user can then select a printer and print.
Setting up the sample application
Before you focus on specific printing tasks, you need to set up the sample application. Create another
Windows Store project from the Blank App template and add the Pages folder with header.html and
footer.html files. Define the usual CSS styles in default.css . Finally, in default.js , add a handler for the
application's onready event which will initialize the application.
app.onready = function () {
printerApp.init();
}
You also add a new JavaScript file named, say, printerApp.js, and initialize the global application
object, as shown below.
var printerApp = printerApp || {};
As far as the user interface is concerned, you don't need to do much for this application. You
just add a couple of buttons that print different content. Insert the following markup right after the
opening tag of the BODY element:
<div id="main">
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/header.html'}"></div>
<h1>Print-n-Go (CH12)</h1>
<button id="buttonPrint1">Print template #1</button>
<button id="buttonPrint2">Print template #2</button>
<div data-win-control="WinJS.UI.HtmlControl"
data-win-options="{uri:'/pages/footer.html'}"></div>
</div>
This markup contains an extra feature that you haven't seen in previous exercises. The entire
document tree that makes up the user interface is wrapped in a DIV element—the main element.
This surrounding DIV element doesn't change the way the user interface looks, but it does make it
very easy to hide the entire UI with a single line of code. At this point, if you launch the application
you should see something like the image in Figure 12-9.
Search WWH ::




Custom Search