After completing the Installation of Phonegap as described in my previous blog, I'll describe the two ways in which we can build PhoneGap projects. There two ways are as follows:
- PhoneGap build (build.phonegap.com)
- Local build (Eclipse Juno)
- PhoneGap build
You can build projects by simply uploading your zip file containing all your HTML files, CSS, images, JS and config.xml. Config.xml contains all the information related to project such as project ownership, plugins used, version etc. We define plugins in config.xml file in the format described by PhoneGap. When we build online, it recognizes the plugins and automatically adds them to our project.
Steps:
- Sign in with your github or adobe account.
- Click "Update Code" and browse to your zip file including all your required files.
- Click "Upload".
Sit back and wait! Witihin few minutes your file would be ready to download.
Detected Plugins:
2. Local Build (Using Eclipse
Steps for local build are as follows:
1. Download the Cordova 3.0.0 http://archive.apache.org/dist/cordova/.
2. Open cordova folder and extract cordova-android.zip.
3. Open cordova-android folder. Hold Shift key and right click on bin folder.
4. Choose "open command window here".
Now you can create your phonegap project using following sample command (excluding quotes):
"create C:\Users\IDE\workspace\MyPhonegap com.myphonegap.el MyFirstPhonegap"
Now, you can easily import this new project into Eclipse.
Sample config.xml file for PhoneGap build:
<?xml version="1.0" encoding="UTF-8"?><!-- config.xml reference: https://build.phonegap.com/docs/config-xml --><widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.hello-world"
version = "1.0.0"><name>Localite</name><description>
Phonegap App</description><author href="http://www.phonegap.com" email="admin@phonegap.com">
PhoneGap Team</author><!--
Enable individual API permissions here.
The "device" permission is required for the 'deviceready' event.
--> <feature name="http://api.phonegap.com/1.0/device" /><feature name="http://api.phonegap.com/1.0/battery"/><feature name="http://api.phonegap.com/1.0/camera"/><feature name="http://api.phonegap.com/1.0/contacts"/><feature name="http://api.phonegap.com/1.0/file"/><feature name="http://api.phonegap.com/1.0/geolocation"/><feature name="http://api.phonegap.com/1.0/media"/><feature name="http://api.phonegap.com/1.0/network"/><feature name="http://api.phonegap.com/1.0/notification"/><!--
If you do not want any permissions to be added to your app, add the
following tag to your config.xml; you will still have the INTERNET
permission on your app, which PhoneGap requires.
--><preference name="permissions" value="none"/><!-- Customize your app and platform with the preference element. --><preference name="phonegap-version" value="3.0.0" /><!-- all: current version of PhoneGap --><preference name="orientation" value="default" /><!-- all: default means both landscape and portrait are enabled --><preference name="target-device" value="universal" /><!-- all: possible values handset, tablet, or universal --><preference name="fullscreen" value="false" /><!-- all: hides the status bar at the top of the screen --><preference name="webviewbounce" value="true" /><!-- ios: control whether the screen 'bounces' when scrolled beyond the top --><preference name="prerendered-icon" value="true" /><!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen --><preference name="stay-in-webview" value="false" /><!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in --><preference name="ios-statusbarstyle" value="black-opaque" /><!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar --><preference name="detect-data-types" value="true" /><!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system --><preference name="exit-on-suspend" value="false" /><!-- ios: if set to true, app will terminate when home button is pressed --><preference name="show-splash-screen-spinner" value="true" /><!-- ios: if set to false, the spinner won't appear on the splash screen during app loading --><preference name="auto-hide-splash-screen" value="true" /><!-- ios: if set to false, the splash screen must be hidden using a JavaScript API --><preference name="disable-cursor" value="false" /><!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app --><preference name="android-minSdkVersion" value="7" /><!-- android: MIN SDK version supported on the target device. MAX version is blank by default. --><preference name="android-installLocation" value="auto" /><!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. --><!-- Plugins can also be added here. --><gap:plugin name="com.phonegap.plugins.barcodescanner" /><gap:plugin name="com.phonegap.plugins.pushplugin" /> <gap:plugin name="org.apache.cordova.file-transfer" /><gap:plugin name="org.apache.cordova.device" /><gap:plugin name="org.apache.cordova.camera" /><gap:plugin name="org.apache.cordova.file" /><!--<gap:plugin name="Example" />
A list of available plugins are available at https://build.phonegap.com/docs/plugins
--><!-- Define app icon for each platform. --><icon src="icon.png" /><icon src="res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:density="ldpi" /><icon src="res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:density="mdpi" /><icon src="res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:density="hdpi" /><icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:density="xhdpi" /><icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" /><icon src="res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/><icon src="res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57" /><icon src="res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72" /><icon src="res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114" /><icon src="res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144" /><icon src="res/icon/webos/icon-64.png" gap:platform="webos" /><icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" /><icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone" gap:role="background" /><!-- Define app splash screen for each platform. --><gap:splash src="res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:density="ldpi" /><gap:splash src="res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:density="mdpi" /><gap:splash src="res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:density="hdpi" /><gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" /><gap:splash src="res/screen/blackberry/screen-225.png" gap:platform="blackberry" /><gap:splash src="res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480" /><gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960" /><gap:splash src="res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024" /><gap:splash src="res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768" /><gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" /><!--
Define access to external domains.<access /> - a blank access tag denies access to all external resources.<access origin="*" /> - a wildcard access tag allows access to all external resource.
Otherwise, you can specify specific domains:
--><access origin="*"/><!-- allow local pages --><!--<access origin="http://phonegap.com" /> - allow any secure requests to http://phonegap.com/<access origin="http://phonegap.com" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/<access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.
--></widget>