In a series of blogs you will learn about how to use PhoneGap with the new cutting edge Microsoft platforms – Windows 8 and Windows Phone 8. We will talk how to start and how to use PhoneGap with popular web client frameworks like jQuery Mobile and Infragistics Ignite UI.
What is PhoneGap?
There are many topics about PhoneGap in iOS and Anrdoid applications and only few related to Windows 8 and Windows Phone 8. Hope that it will be interesting for developers to know why and how to use this framework with Microsoft platforms.
PhoneGap for Windows 8 Store Applications.
PhoneGap and Windows 8 development are more similar than you realize
What you can take as an advantage when you create PhoneGap applications for Windows 8
- 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.
In this article we will talk about different ways to create Windows 8 Store applications with PhoneGap and will make a simple comparison between Windows 8 Applications with PhoneGap and those that use only WinJS
How to Create PhoneGap applications for Windows 8
There are three different ways to start with Windows 8 and PhoneGap
- To start with PhoneGap startup project included in the distribution
- To build a PhoneGap Windows 8 template and use it in Visual Studio 2012
What you need to start:
- Windows 8
- Visual Studio 2012 Professional or better, or Visual Studio 2012 Express for Windows 8
Create a PhoneGap Windows 8 application
- Download latest PhoneGap 2.x – http://phonegap.com/download or PhoneGap project from the Github : https://github.com/phonegap/phonegap/tree/master/lib/windows8
- Change default.html to index.html(optional).
Microsoft continues to use default.html as the default page for use in websites, whereas most “open web” developers use index.html. (Plus it’s likely that in the other platform variants of your project you are using index.html as the name of your default page.) To fix this, in Solution Explorer rename the default.html file to index.html. Then double-click the package.appxmanifest file and change the Start page value to index.html.
- Add reference to cordova-2.x.js file from default.html/index.html page
- Adding a ’deviceready’ handler… (optional)
You can read more details here.
If you want to change default.html to index.html you need also change the name of the start page in the package.appxmanifest file.
It is a good practice to add a ‘deviceready’ handler to be possible let your application to know when PhoGap libraries are fully loaded.
The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function.
Start with PhoneGap startup project included in the distribution
The official PhoneGap distribution and most of Apache Cordova source branches in the GtiHub have for each supported platform a template folder where is located a startup project. For some reasons most of distributions don’t include a ready for use Visual Studio project template but you could start your applications from a copy of this project.
Open the /lib/windows8/template folder from your distribution.
Check the settings in your package.appxmanifest and you can continue with the development of applications with PhoneGap.
Create a PhoneGap Windows 8 template
It is more convenient if you have Visual Studio project template for Windows Store PhoneGap applications. As it was mentioned before for each supported platform there is a template folder where is located a startup project, but for Windows 8 there is not a ready for use project template. You could create a Visual Studio 2012 project template from this startup project. For Windows 8 it is located in /lib/windows8/template folder from your distribution.
Most of Cordova implementations provide CordovaBuilder project that could generate a Visual Studio 2012 project templates. Unfortunately CordovaBuilder project for Windows 8 is not updated from several months. It works correct for some implementations like this https://github.com/01org/cordova-win8 but raise exceptions in the newest versions of PhoneGap because of project structure changes. More details how to build a Visual Studio Windows Store project template with CordovaBuilder you could find here. If you are using the latest version you need to update a CordovaBuilder.cs file.
Another approach is to create your template manually.
Custom project templates require the following items
A metadata (.vstemplate) file that Visual Studio uses to define how to display the project in the IDE and, if you have specified the appropriate properties, to customize how the project is created in the IDE.
A project file.
Code files such as Web forms, class files, and resource files.
In Cordova distribution you need add only a metadata file named MyTemplate.vstemplate and add a correct template settings.
A sample metadata (.vstemplate) file.
More details about Visual Studio project templates you could find here.
When you are ready just zip the all content of your /lib/windows8/template folder .
Then open a new instance of Visual Studio 2012 and select File->New->Project you will see your project template.
When you select Template-Cordova2 item from the list you will have a Windows 8 with PhoneGap startup project.
PhoneGap vs. WinJS
The main difference between PhoneGap and WinJS is in the API. When you need to access some device resources you need to use different APIs . For example for geolocation in Cordova you need to use navigator.geolocation.getCurrentPosition(…) function. In WinJS library you need to create an instance of Geolocator: var geolocator = Windows.Devices.Geolocation.Geolocator(); and then to call geolocator.getGeopositionAsync().
A showLocation function using PhoneGap
The same showLocation function using WinJS
Create a Windows Store PhoneGap application
You need to turn on Location capabilities
Geolocation application screen.
Here is the code of the default.html file.
Source code of the default.js file is shown below.
Source code of the Windows 8 PhoneGap geolocation application is available here.
Windows 8 sample application – geolocation with WinJS is available here.
You could download Visual Studio 2012 Windows Store PhoneGap template from this link.
Follow news from Infragistics for more information about new Infragistics events.