As we decide to develop a PhoneGap Android App the first thing that strikes is - How can I get started with it?
The PhoneGap website talks about the code solutions but it doesn't tell us anything about setting up the project. So, what are the steps to follow to setup the project we downloaded from PhoneGap website? First of all we need to have the basic platforms installed on our machine such as Eclipse for Android and Xcode for iOS. You can download Eclipse from: http://www.eclipse.org/downloads/
While installing Eclipse you will be prompted for jre/bin/javaw file is not found. To resolve this issue you need to download the JRE (Java Runtime Environment) from http://www.oracle.com/technetwork/java/javase/downloads/index.html Make sure you download the version that supports your operating system and the eclipse application 32 or 64 bit. Install JRE with all default settings, do not change installation path or anything while installation.
Once you are done with JRE installation goto C:\Program Files\Java --> copy the jre7 folder (jre7 version may vary depending on the version you install) and paste it in your eclipse application folder and then rename it to 'jre'. Now your Eclipse should have no issues in installation.
Configuring PhoneGap in Eclipse for Android:
Adobe has posted a very good guide here - Getting started with PhoneGap in Eclipse for Android Just follow the steps and you should be ready with your app.
The second thing that pops up as you start coding is - how to get click events in PhoneGap? Here is a simple example on navigating pages in PhoneGap - http://stackoverflow.com/questions/12280351/how-navigate-one-page-to-another-page-in-android-phonegap
But, for navigating pages in PhoneGap I would suggest you go through the basic a href="abc.html" way, it is much simpler and works well.
For back button function in PhoneGap; use this simple code with cordova js -
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
//navigator.notification.alert("PhoneGap is working");
document.addEventListener("backbutton" , onBackKeyDown, false);
}
function onBackKeyDown(){
navigator.app.backHistory();
}
Adding jquery effects and choosing the best js for PhoneGap:
http://zeptojs.com/ is considered the lightweight and best suited js file for PhoneGap with necessary effect, actions, and methods.
Using animations with Zepto JS:
zepto-page-transitions works best with zepto js for page transition effects https://github.com/dgileadi/zepto-page-transitions or you can choose to write your own CSS for animations.
More References:
ANDREW TRICE has posted an amazing workflow for Developing PhoneGap Applications
Just in case if you wish to go through a simple example of Android App with PhoneGap, please refer Combining your web skills with PhoneGap to build mobile apps
Curious about knowing more of PhoneGap?
Check this URL: https://build.phonegap.com/
And search on youtube for adobe phonegap build - they have some nice videos.
The PhoneGap website talks about the code solutions but it doesn't tell us anything about setting up the project. So, what are the steps to follow to setup the project we downloaded from PhoneGap website? First of all we need to have the basic platforms installed on our machine such as Eclipse for Android and Xcode for iOS. You can download Eclipse from: http://www.eclipse.org/downloads/
While installing Eclipse you will be prompted for jre/bin/javaw file is not found. To resolve this issue you need to download the JRE (Java Runtime Environment) from http://www.oracle.com/technetwork/java/javase/downloads/index.html Make sure you download the version that supports your operating system and the eclipse application 32 or 64 bit. Install JRE with all default settings, do not change installation path or anything while installation.
Once you are done with JRE installation goto C:\Program Files\Java --> copy the jre7 folder (jre7 version may vary depending on the version you install) and paste it in your eclipse application folder and then rename it to 'jre'. Now your Eclipse should have no issues in installation.
Configuring PhoneGap in Eclipse for Android:
Adobe has posted a very good guide here - Getting started with PhoneGap in Eclipse for Android Just follow the steps and you should be ready with your app.
The second thing that pops up as you start coding is - how to get click events in PhoneGap? Here is a simple example on navigating pages in PhoneGap - http://stackoverflow.com/questions/12280351/how-navigate-one-page-to-another-page-in-android-phonegap
But, for navigating pages in PhoneGap I would suggest you go through the basic a href="abc.html" way, it is much simpler and works well.
For back button function in PhoneGap; use this simple code with cordova js -
function onLoad(){
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady(){
//navigator.notification.alert("PhoneGap is working");
document.addEventListener("backbutton" , onBackKeyDown, false);
}
function onBackKeyDown(){
navigator.app.backHistory();
}
Adding jquery effects and choosing the best js for PhoneGap:
http://zeptojs.com/ is considered the lightweight and best suited js file for PhoneGap with necessary effect, actions, and methods.
Using animations with Zepto JS:
zepto-page-transitions works best with zepto js for page transition effects https://github.com/dgileadi/zepto-page-transitions or you can choose to write your own CSS for animations.
More References:
ANDREW TRICE has posted an amazing workflow for Developing PhoneGap Applications
Just in case if you wish to go through a simple example of Android App with PhoneGap, please refer Combining your web skills with PhoneGap to build mobile apps
Curious about knowing more of PhoneGap?
Check this URL: https://build.phonegap.com/
And search on youtube for adobe phonegap build - they have some nice videos.
