This section demonstrates how easy it is to build a Windows App. The demonstration shown
here will use Visual Studio 2012 Express edition for Windows to build an App. This example
builds a simple app that shows a list of the files inside of the Documents library on the
computer and enables the user to select a file
The first step in building a Windows app is to choose a programming language and an
appropriate template. We’ll use JavaScript with the Blank App template for this example. This
is shown in Figure 6-5.
Once a template is chosen, Visual Studio opens the code for the chosen template. In this
case, the code is shown in Figure 6-6.
Visual Studio takes care of all of the behind-the-scenes setup and configuration for the
app based on the chosen template. This means that you could compile and run the project
as-is and it would display. In the case of the Blank App template, a blank screen with a simple
“Content goes here” note is displayed
Creating an app using one of the templates requires using the helper functions (created
automatically by the template), and then customizing and adding to them to produce the
app. In this example, we’ll add a single function to access some built-in functions that create a
File Picker.
With that code in place, the next area of customization needed is within the HTML file. The
Blank App template includes a default HTML file. The file, aptly titled default.html, contains
basic HTML and also the links to include CSS and JavaScript for the app. This file is shown
when the app is loaded, though this can be changed to start with any file that is appropriate
for your app.
For the example here, we’ll customize default.html for our needs. Specifically, we’ll add
some HTML, JavaScript, and also some CSS to the file. Like the JavaScript example, in a
real-world scenario where you’re building a more complex app, it’s likely that the CSS would
be in a separate file and that the JavaScript would be as well.
The bottom portion of default.html is shown in Figure 6-8, with the new items highlighted
(the code above this in default.html is not changed).
With default.html saved, the app can be run, typically by pressing F5. The app’s splash screen
is shown and then the app is loaded. The output of the initial screen is shown in Figure 6-9.
Clicking or tapping the “Get Files List” button reveals the File Picker screen, shown in
Figure 6-10.
The File Picker screen is built and its interface is set up primarily by the built-in functions
available as part of the Windows app library. This provides a consistent interface for the
user when choosing files on the Windows 8 platform. Once a file has been chosen it receives
a checkmark (like the one shown in Figure 6-10). Clicking or tapping Open then hands
processing to your app, where you can perform the appropriate action for the file. In this case,
we merely output the name of the file back to the original screen, as shown in Figure 6-11.
This demonstration shows how easy it is to create a Windows app. In just a few lines of
JavaScript, HTML, and CSS, an app was created to choose files from the Documents library
of a computer.
Once an app is created, it needs to be distributed. App distribution is accomplished either
by making the app available in the Windows Store or by loading it for internal-use only
through a process called sideloading . Both of these distribution methods are the focus of the
next two sections.
