Abstract: Windows 8 apps can be designed and coded using HTML/CSS/JS just like PhoneGap apps can. And with very little effort you can use your skill and existing resources to crank out a sleek, modern looking Windows 8 style app in no time.
PhoneGap and Windows 8 development – more similar than you realize
- You can update the look of your applications with very little effort by using the intrinsic styles for the basic HTML elements like <h1> and <button>, as well as the advanced Windows 8 controls like the app bar, date picker, flip view, and more.
- Your code that interacts with the PhoneGap API (to handle things like file access, sensors and application lifecycle events) can be updated to use the WinJS library to accomplish the same things you were doing in PhoneGap.
This blog post series is going to address the third bullet above – figuring out how to do things in Windows 8 app development that you know how to do in PhoneGap. We’ll start with a simple example and then dive in deeper over subsequent weeks.
A simple PhoneGap example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>Cordova WP7</title> <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
The DOCTYPE element
Since we’re not running in a browser of the user’s choice, but instead in a specific execution environment, we can use the standard HTML5 doctype which is simply “HTML”. This is identical in Windows 8.
The meta tag controlling the “viewport”
Because in PhoneGap, the hosting container is essentially a web browser, this tag tells it behave less like a web browser. That is, don’t allow the user to pan and pinch to zoom as if it were a web page. We don’t need this for Windows 8 apps because there is no scrolling, panning or zooming like in a web page since it’s an app.
The stylesheet reference
One of the great aspects of designing a web page is the flexibility and power of CSS. Since an app has a design as well, CSS can be used to design the app’s interface in the same way. The “master.css” here is from the template for building Windows Phone apps with PhoneGap. When you design a PhoneGap application, you’re going to want to give it a different look and feel on each platform. And swapping out CSS files when you’re building the final app for each platform is one way to do that. The CSS and overall design you use should be tailored to the platform.
The script reference to “cordova”
In Windows 8 we have something similar in the form of WinJS. So it’s just a matter of learning what’s in the WinJS API like you did when you first learned PhoneGap.
The app code
The rest of the source is the code and markup for your app. There is a table in which to display the location information once we retrieve it, and an asynchronous call into the PhoneGap’s geolocation API to get the result.
The Windows 8 equivalent
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>SimpleLocation</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script> 1: 2: <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"> 1: </script> 2: 3: <!-- SimpleLocation references --> 4: <link href="/css/default.css" rel="stylesheet" /> 5: <script src="/js/default.js"> </script> </head> <body> <p>Content goes here</p> </body> </html>
Looks a lot like PhoneGap, huh? There’s the same DOCTYPE, some CSS and JS references to intrinsic resources and some to project-specific styles and code. So let’s bring in pieces from the PhoneGap sample above and make the necessary changes to get it running on Windows 8!
The HTML is virtually unchanged, other than swapping the PhoneGap app-specific “master.css” for the built in Windows 8 one called “ui-dark”. And yes, there is a “ui-light” if you want your app to have a light colored background. The code is only a little different because we’re using the .then syntax from the WinJS Promise object to accomplish things asynchronously. The success parameter became coordinate instead of coords (but note the properties are the same name!).
A Windows 8 developer has good reason to be excited. With over 650 million licenses of Windows 7 out there, exciting new hardware coming from manufacturers, a developer friendly store with a great revenue sharing approach, and tons of resources (online and local), frankly, PhoneGap developers who aren’t targeting Windows 8 are just missing the boat.
Don't forget that we have a great program to get you from idea to Windows 8 app with our 30 to Launch program as part of Generation App. Sign up today!