Many WEB developers use jQuery and jQuery Mobile in their applications. Probably most of these developers would like to carry these applications on any popular mobile platforms such as Windows Phone, Android, iOS. In fact it is very easy and quick if you considerate some rules.
In previous blogs “Using PhoneGap in Windows Store Applications” and “Using PhoneGap in Windows Phone 8 Applications” we discussed how to start with PhoneGap and Windows Store / Windows Phone 8 applications.
In this blog we will continue the topic of PhoneGap / Apache Cordova considering real life examples and in particular how to convert your mobile WEB apps in hybrid* web applications.
In this article you will learn how to create a hybrid PhoneGap application for Windows Phone 8 based on jQuery Mobile Twitter WEB application. It is a simple WEB application that uses twitter API to search for tweets containing a specific string.
Twitter search WEB application
The source code of the twitter WEB app is available below.
Before to start with PhoneGap / Cordova
If you have no experience with PhoneGap in general or/and with Cordova for Windows Phone 8 you could read the article “Using PhoneGap in Windows Phone 8 Applications”.
Some important thing that you need to know
- Your web application is encapsulated in a custom web view (named CordovaView in this case)
This is a custom view that can load a specified html file
- Where is your html file?
If you are using a standalone Cordova WP8 template you could take a look at the CordovaView source code:
[your WP8 PhoneGap project path]\cordovalib\CordovaView.xaml.cs
There is set a default html file under www folder: www/index.html
If you have a different default html file: for example my-default.html you need to set it to StartpageUri property.
You need to add jQuery, jQuery Mobile and Cordova css and scripts. In this example we just will “wrap” our WEB application without usage of specific Cordova API, but often you will need to use it.
PhoneGap WP8 template includes also “index.js” file where you could attach your code to “deviceready” event. This event is fired when the whole Cordova script is loaded.
The index.js file source
- Using jQuery Mobile and PhoneGap together
What is the correct way to use jQuery Mobile and PhoneGap together?
Both frameworks need to load before they can be used. There are several approaches to do this.
- You can use deferred feature of JQuery.
- Another approach is to add your code that handle both Cordova and jQuery Mobile after your html as in our sample application
Demo application contains only two pages – “search page” and “preferences page”. In the same file is included a jQuery function used to search for tweets via the twitter API.
Twitter search function:
The whole index.html page
Build and deploy your Windows Phone 8 application. It looks like a native WP app (if it is styled), but it is just a wrapped via Cordova mobile WEB application.
The app behavior also looks like a native app behavior.
You can use PhoneGap to package this application for different platforms.
This version of the application doesn’t use any of the PhoneGap native APIs (GPS, camera, accelerometer, notification, etc).
Demo source is available here.
You can find version of the same application built using plain jQuery & jQuery Mobile here.
Expect next blogs where you will learn more about Windows Store PhoneGap applications and Cordova extensions for Windows Phone.
Follow news from Infragistics for more information about new Infragistics events.