Developer

Windows Store app development is a snap with this template

Discover how easy it is to move an existing web application to the Windows platform by using the Web App Template.

 

Windows_8.1_store.png
 

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

 

WAT_FigA_021814.jpg
 

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

Figure B

 

WAT_FigB_021814.jpg
 

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

 

WAT_FigC_021814.jpg
 

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

Figure D

 

WAT_FigD_021814.jpg
 

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

Figure E

 

WAT_FigE_021814.jpg
 

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.

 

 

About Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

Editor's Picks

Free Newsletters, In your Inbox