Creating native Windows 8 apps using web technologies

A while back we assisted the Canadian Abilities Foundation on one of the conferences they participated in, where they wanted to conduct surveys with the conference goers using a tablet (iPad, Android pad, or Windows tablets). Not being able to find an out-of-box solution that supports all the question types and branding requirements, we decided to implement a custom Windows 8 app.

This blog post is intended to be a brief walk-through of the creation of this app to give you a better understanding of how native windows 8 apps are made.  With some recent changes to Windows 8 as well as the info in this post, it should be pretty  easy now for web developers to create native Windows 8 apps using HTML5, CSS3, and JavaScript. We will also show the usage of IndexedDB that stores data locally on devices or systems. It is assumed that you have basic web development knowledge, but leave a comment if you’re having trouble and I’ll see what I can do to help you.

The requirements for the app we built were quite simple, it needed:

  • A form to hold the questions of the survey
  • The ability to save form data locally on the device
  • A screen that displays all the survey results
  • The capability to export the results to Excel

Diving right into the technical details we first create a Navigation App in Visual Studio 2012. The Navigation App is used as opposed to a Blank App because it supplies the navigator.js by default and handles going from one screen to the next.

survey-1

There are certain conventions that Microsoft enforces you to follow when developing a Windows 8 app (duh!). If you are new to Windows 8 development, it might be a good idea to go through a few tutorials, though not necessary for what’s demonstrated here.

So here we’ve added a few files to the project and setup the structure.

survey-2

default.html

The default.html file can be seen as the shell container of the app where it loads all the JavaScripts, CSS files, and different components (represented by other HTML files). The <body> simply includes the header and the survey form so that it will display on the app when it is first loaded.

survey-3

form.html

This file defines the custom survey form in HTML. One thing worth noting is that the App Bar is defined here specifically for this page in that it will be different from the other screen. Here the App Bar contains 3 buttons – Save, Clear, and View All.

survey-4

viewall.html

This file uses a WinJS.UI.ListView to show all the survey records being saved. The ListView essentially allows you to define an HTML template for each data record and lists all the data records.

survey.js

This file handles the interactions of the entire app. A JavaScript Closure object named survey is defined to encapsulate all the logics and expose the necessary methods for the various components of the app to call upon. For example, the Submit button in the survey form (form.js) will call the public method submitSurveyForm to process and save the form data.

survey-5

IndexedDB allows you to store data inside a user’s browser. It is also natively supported by Windows 8 apps, so that’s what we will use here to store the survey data. This eliminates any the Internet connection dependency. The database is initialized when form.html is first loaded – survey.initialize(). The initialization defines all the columns, each representing one field in the survey form.

survey-6

When saving a record to the database, we just need to pass a JavaScript object where its object properties match the columns of the database.

survey-7

We are not going into all the details of IndexedDB implementation here. The Mozilla Developer Network site provides a pretty good reference on properly using IndexedDB: https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB 

Lastly, using the Windows JS library functions we can save a tab-delimited CSV file to the Documents folder of the system.

survey-8

This survey app, although simple, served it’s purpose perfectly. Being able to run a native app on tablet for surveys greatly enhanced the user experience and allowed for greater collection from the people at Abilities. In terms of time spent putting the app together, total time start to finish was around one full day. Windows 8’s native support of HTML5 really makes it easy for web developers to start building native apps on the Windows platform. This blog post only provides a quick overview of what was built into the app; the source code of the app can be downloaded here for the interested.

All questions and comments are welcome and feel free to comment or email me directly if you’d like more info at: Bryan.xu@ideanotion.net. Whether you like it or think it’s stupid, drop me a tweet: @_bryanxu.

Happy coding!

Bryan Xu

By Bryan Xu

Posted in JavaScript, Technical

Leave a Reply