DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
What's in store for DevOps in 2023? Hear from the experts in our "DZone 2023 Preview: DevOps Edition" on Fri, Jan 27!
Save your seat
  1. DZone
  2. Coding
  3. Languages
  4. Windows 8 Apps For the PhoneGap Developer

Windows 8 Apps For the PhoneGap Developer

Glen Gordon user avatar by
Glen Gordon
·
Aug. 08, 12 · Interview
Like (0)
Save
Tweet
Share
12.67K Views

Join the DZone community and get the full member experience.

Join For Free

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

PhoneGap is an interesting animal. While it’s most salient aspect is the cross platform nature of the applications you can build with it, it’s also interesting in that you use HTML and JavaScript to create the apps. Since this relies on the underlying mobile browser technology on each platform, there are (from time to time) a few little quirks. But overall, it really does provide a nice layer of abstraction. You can bring your web skills into play, and all you have to do is learn a few specifics of creating and publishing an app on a particular platform, design the UI with HTML and CSS, code it up with standard JavaScript, learn a few new APIs that PhoneGap offers, and you’re all set. In fact, to some teams, the cross platform nature is secondary. They embarked on PhoneGap development because it allowed their teams to reuse their web development skills, their favorite libraries, design tools, and more.

What does this mean in the context of Windows 8 development? Well, one of the approaches for building the new Windows 8 applications is actually to use HTML/CSS/CS. If you haven’t yet, I suggest you read about creating a Windows 8 Metro style apps with JavaScript. Here’s the upshot for PhoneGap developers:

  • Your skills, assets, and probably a lot of your existing pure HTML/CSS and JavaScript code will just work in a Windows 8 application.
  • 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.
  • Scenarios where you had to write PhoneGap plugins can be addressed by either finding the functionality in the expansive WinJS library, or by incorporating native code in a Windows 8 JavaScript app.

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

Here is a very simple PhoneGap application that uses the PhoneGap geolocation API to get information on the device’s position. No matter what platform this PhoneGap code is executed on, this will work. That’s because the call to getCurrentPosition in line 28 calls into the underlying platform’s API. But to your code, It’s exposed as a JavaScript function.

<!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 HTML of a PhoneGap application is a little different from the HTML you’d write for a browser application. Let’s take a look at the differences and their equivalents in Windows 8 JavaScript apps.

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.

Windows 8 JavaScript apps use CSS to design the UI just like a browser or PhoneGap app. In moving this code to Windows 8, we won’t need this line as there’s a default Windows 8 style for every control. You’d only need to specify styles if you want to customize the look. Later in this article I’ll show that in action.

The script reference to “cordova”

When your code is running in PhoneGap, all the standard JavaScript APIs are available to use. By bringing in this script file, you can then use the PhoneGap APIs to do more “appy” stuff like working with the file system, responding to application lifecycle events, and more.

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

Now that we have reviewed the anatomy of a basic PhoneGap application page, let’s look at the equivalent in Windows 8. When you set up a machine (physical or virtual) with the Windows 8 Release Preview and Visual Studio 2012 Release Candidate, you’ll be able to create Windows 8 apps with JavaScript and HTML. For an overview on how that works, check out this this introduction.

When you create a new Windows 8 JavaScript project, you’ll get the following basic HTML:

<!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!

<!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">

 1: </script>

 2:  

 3:         <script type="text/javascript">

 4:  

 5:             var getLocation = function () {

 6:  

 7:                 // Success callback

 8:  

 9:                 var success = function (p) {

 10:  

 11:                     document.getElementById('latitude').innerHTML = p.coordinate.latitude;

 12:                     document.getElementById('longitude').innerHTML = p.coordinate.longitude;

 13:                     document.getElementById('tdAlt').innerHTML = p.coordinate.altitude;

 14:                     document.getElementById('tdAcc').innerHTML = p.coordinate.accuracy;

 15:                     document.getElementById('tdAltAcc').innerHTML = p.coordinate.altitudeAccuracy;

 16:                     document.getElementById('tdHeading').innerHTML = p.coordinate.heading;

 17:                     document.getElementById('tdSpeed').innerHTML = p.coordinate.speed;

 18:  

 19:                     setLocationStatus("Done");

 20:                 };

 21:  

 22:                 // Fail callback

 23:  

 24:                 var fail = function (e) {

 25:  

 26:                     //setLocationStatus("Error: " + e.code);

 27:                     setLocationStatus("Error: " + e.message);

 28:                 };

 29:  

 30:  

 31:  

 32:                 // Get location

 33:  

 34:                 //navigator.geolocation.getCurrentPosition(success, fail, { enableHighAccuracy: true }); //, {timeout: 10000});

 35:            

 36:                 var geolocator = Windows.Devices.Geolocation.Geolocator();

 37:                 geolocator.desiredAccuracy = Windows.Devices.Geolocation.PositionAccuracy.high; //or default

 38:                 geolocator.getGeopositionAsync().then(success, fail);

 39:  

 40:  

 41:                 setLocationStatus("Retrieving location...");

 42:  

 43:  

 44:  

 45:             };

 46:  

 47:             /**

 48:  

 49:  * Set location status

 50:  

 51:  */

 52:  

 53:             var setLocationStatus = function (status) {

 54:  

 55:                 document.getElementById('location_status').innerHTML = status;

 56:  

 57:             };

 58:  

 59:       

</script>

</head>
<body>
       <h1>Location</h1>

    <div id="info">

        <b>Status:</b> <span id="location_status">Stopped</span>

        <table>
            <tr><td><b>Latitude:</b></td><td id="latitude"> </td></tr>
            <tr><td><b>Longitude:</b></td><td id="longitude"> </td></tr>
            <tr><td><b>Altitude:</b></td><td id="tdAlt"> </td></tr>
            <tr><td><b>Accuracy:</b></td><td id="tdAcc"> </td></tr>
            <tr><td><b>Altitude Accuracy:</b></td><td id="tdAltAcc"> </td></tr>
            <tr><td><b>Heading:</b></td><td id="tdHeading"> </td></tr>
            <tr><td><b>Speed:</b></td><td id="tdSpeed"> </td></tr>
        </table>

    </div>

    <h2>Action</h2>

    <button onclick="getLocation();">Get Location</button>
</body>
</html>

 

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!).

Below, I have some screen shots of the PhoneGap app running in the Windows Phone emulator, and the Windows 8 JavaScript app.

SimpleLocationStopped  screenshot_07062012_151729

SimpleLocationDonescreenshot_07062012_151858

Conclusion

When you started using PhoneGap you had to design for a different rendering environment (an app) instead of a browser. And you had to learn a new set of APIs. But you still used your HTML/CSS/JS skills from creating browser applications. And so it is with Windows 8 HTML/JS development. In future articles I’ll cover a lot more aspects of Windows 8 JavaScript apps from a PhoneGap developers perspective.

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!

mobile app dev JavaScript HTML Design

Published at DZone with permission of Glen Gordon. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How To Use Terraform to Provision an AWS EC2 Instance
  • New MacBook Air Beats M1 Max for Java Development
  • How ChatGPT Is Revolutionizing the World of Natural Language Processing
  • Essential Mobile App Security Tips for Coders in 2023: Make Your App Unhackable

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: