The majority
of my development projects over the years have fallen into one of three camps:
web, database, or backend processes. I haven’t had many forays into Windows application
development, but Windows 8 changes the
landscape, as Windows application development now is accomplished with web
standards (HTML5, CSS, and JavaScript). You still must learn how to
use these technologies within the context of Windows 8, but the Web App Template simplifies moving an
existing web application to the Windows platform.

A bridge to
Windows Store app development

The Web App
Template takes an existing HTML5 application and pairs it with configuration
data with the result ready for the Windows Store. Before diving into the details, let’s take a quick look at what is
needed and how you get it.

  • Windows 8.1 is the base operating system either
    on your development machine or virtual machine. The template utilizes the new web control
    added in Windows 8.1 that basically provides a wrapper for web applications to
    run.
  • Visual Studio 2013 (Windows Store Express, Pro, or Ultimate) is used for
    development.
  • Windows Phone SDK is
    needed if you use the Windows Phone 8 template.
  • You need a Windows Store developer license. Once the Web App Template is installed, dialog boxes will walk you
    through the process of obtaining a license. A key value from the license is
    entered in Visual Studio to allow Windows Store application development. It
    sounds like a lot of trouble, but it was painless when I retrieved a temporary
    key. I’m not sure how difficult it will be once the temporary key expires.

With the
development environment set up, the Web App Template is installed as a Visual
Studio template. Simply click the download link on the project’s CodePlex
site. With it installed, a new Visual Studio project is now available. Figure A
shows the Web-App-Template project type under the JavaScript heading.

Figure A

 

 

The Web-App-Template project type is now available.

Figure B

 

 

A
new project created with the Web-App-Template.

Figure B
shows a new project created with the template. It contains the following
directories and files.

  • config: This directory contains configuration
    files used by the application. The most notable is json.config, where
    application-specific data is entered.
  • css: This directory contains style sheets. You
    can edit or add other files to customize application presentation. The default.css is not used–it is only included as a standard part of
    HTML5 applications (it’s the same with default.html in the root directory).
  • images: This directory includes the images used
    by the application. This includes logos, tiles, splash screen, and so forth. You
    can overwrite what is included to brand your application. Also, a tool is available for generating
    images that are the correct size, resolution, etc.
  • js: The directory for standard JavaScript used
    by the application. The template includes default.js as a starting point. It
    includes an instance of the WinJS.Application
    object
    with events and placeholders for your code.
  • template: This directory includes the core functionality
    of the Web App Template.
  • Developer key: The Windows Store developer key file
    is included in the project (pfx file extension).
  • Package.appxmanifest: A standard manifest
    file
    for Windows Store applications.

The template
in action

A key component of applications created with the Web App Template is
the confg.json file. As its name suggests, it utilizes json.
It drives application behavior. Figures C and D provide a closer look at a
portion of the file. Figure C shows the top portion of the configuration file
where the home URL is defined– notice it has been changed to the TechRepublic.com site. Figure D shows
another portion of the file where buttons on the top menu are defined. Figure E
shows how these appear on a Windows Surface Pro
device–users can choose items via touch screen or by using a mouse. The details
of config.json are much more complicated than what has been covered–this online reference has
everything needed to dig deeper.

Figure C

 

 

The
top portion of config.json were the home page address is specified.

Figure D

 

 

The
section of config.json where navigation elements are defined.

Figure E

 

 

The top navigation menu portion of the application displayed in Windows 8.1.

Windows
Store development within reach

I was
pleasantly surprised by how easy it was to build a legitimate Windows Store
application using the template and an existing web application. With Windows
development now based on web standards, it lowers the barrier and opens up
possibilities for a large number of developers with the necessary experience.
These developers can concentrate on learning the details of Windows development without
worrying about the language. In addition, this template makes it easy to
package an existing web application in a Windows Store wrapper.

On the other
hand, what is the advantage of building a true Windows Store application over a
standard web application? After all, Windows 8 users can still take advantage
of a standard web application. I guess the same can be said for other platforms
like iOS and Android,
but it remains to be seen how widespread the usage of Windows 8 will be. If market share rises dramatically, grab the Web App
Template to quickly make your web application Windows Store compatible.