HTML and CSS Reference
In-Depth Information
its public API, apply the correct calls, and get the behavior you expect. In the 1990s, working with
hardware was often a difficult and challenging task. Thankfully, we now live and code in a different
century! As an example, in the next exercise, you'll build a Windows Store application that takes
instant pictures of the user.
Capturing the webcam stream
As usual, you start by creating a new Windows 8 project using the Blank App template. Next, you
create a new Pages folder and add common files such as header.html and footer.html, as you've seen
repeatedly in the preceding chapters. Edit the default.html and default.css files appropriately for this
application, as described earlier in this topic. (This work is required only to ensure that all applications
have a consistent look and feel.)
Setting up the project
More importantly, open up the default.js file and add the following bootstrapping code:
app.onready = function (args) {
instantPhotoApp.init();
};
You should know by now that the init function will be invoked when the application is fully loaded
and ready to respond to the user's commands. However, you must create the init function. As you've
done quite a few times already in past exercises, add a new JavaScript file to the project under the Js
folder and name it instantPhotoApp.js .
The name of the JavaScript file is actually unimportant, in the sense that whatever name you use
can work. However, it's probably not a good idea to name a project file after your favorite pet. The
convention used in this topic is to name the main JavaScript ile of the application after the name of
the project, plus an App suffix.
Here's the initial content of the JavaScript instantPhotoApp.js file.
var instantPhotoApp = instantPhotoApp || {};
instantPhotoApp.init = function () {
// To be done
}
At this point you should have a working but empty application. You'll add some significant markup
to arrange the user interface.
In default.html , add the following chunk of HTML code:
<h1>Instant Photo (CH12)</h1>
<div class="center">
<img id="imgPhoto" src="/images/nophoto.png" />
Search WWH ::




Custom Search