PhoneGap JavaScript API vs Native Components

1. PhoneGap JavaScript API
Vs
Native Components
(Plugins)

2. Introduction
 PhoneGap is an open source implementation of open standards. That means
developers and companies can use PhoneGap for mobile applications that
are free, commercial, open source, or any combination of these.
 Building applications for each device–iPhone, Android, Windows Mobile and
more- requires different frameworks and languages. PhoneGap bridges Web
Applications and Mobile Devices using Standards-based Web technologies.

3. PhoneGap JavaScript API Vs Native Components (Plugins)
PhoneGap has two Components :
1. The PhoneGap Core Libraries are designed to handle common tasks
supported by most devices-
a) Access geolocation from the PhoneGap JavaScript API
b) Access contacts from the PhoneGap JavaScript API
c) Invoke a call2. PhoneGap’s JavaScript API makes those common phone
functions available to JavaScript to run in the Browser (Native WebView).

4. PhoneGap JavaScript API Vs Native Components (Plugins)
Along with its Cross-platform Advantage PhoneGap comes with following
Limitations:
i) Writing Javascript to do heavyweight data processing will typically be
much slower than writing native code for the device and serving the
results to a front-end.
ii) If we want to do some background processing (e.g. background services
in Android), Javascript cannot achieve it.
iii) Similarly, if we plan to implement a very Complex Business Functionality,
a preference would be given to the native language.
For such complex tasks, it is best to delegate the responsibility to Native
Components.

5. PhoneGap JavaScript API Vs Native Components (Plugins)
Extend PhoneGap Framework – Create Native Components (Plugins)
The solution to the Limitations is to:1. Create a Custom Native Component
(Plugin): This Native Component(Plugin) would be built for each platform
you plan to support.2. Create a Custom Javascript API: All these Native
Components (Plugins) needs to adhere to the Custom JavaScript API, which
exposes their functionality to the JavaScript running in the Browser.

6. PhoneGap JavaScript API Vs Native Components (Plugins)
Thus, overall PhoneGap Architecture
becomes:

7. PhoneGap JavaScript API Vs Native Components (Plugins)
They are Not Cross Platform:
Suppose you are developing a PhoneGap Plugin for two platforms: iOS and
Android, you need-
1. One JavaScript file for Android, along with a Java file(Native Component)
for Android.
2. A different JavaScript file for iOS, along with pair of .h and .m files (Native
Components) for iOS.Both JavaScript files can (and should) have the same
interface for the developer who consumes it, but the implementations of
each interface would be different.

8. PhoneGap JavaScript API Vs Native Components (Plugins)
Developing Android PhoneGap Plugin:
Regardless of which platform you begin developing with, following two methods play the key
Role:
1. PluginResult.execute() is your core Native function: The JavaScript that you will write in
your JS plugin will need to call Phonegap.exec (successCallback, failCallback, pluginName,
action, [args]). That’s a JavaScript function, found in phonegap-version.x.x.js (or cordova-
1.7.0rc1.jar or higher) that expects a function named “execute” on the Native Plugin side.
2. Phonegap.exec() is your core JS function: The Native Plugin need to define one call to
Phonegap.exec() on the JS side.
“CopyImagesPlugin”: This plugin lets you copy any number of image resources form assets
to the Device SD-Card.

9. PhoneGap JavaScript API Vs Native Components (Plugins)
Step 1: Create a new PhoneGap Project (along with all PhoneGap
dependencies) using New Project Wizard in Eclipse. If You have not installed
PhoneGap Development Addin to eclipse, then you can do it in following
manner:
Open Eclipse -> Click on ‘Help’ on MenuBar-> ‘Install New Software’ ->
click on ‘Add’ button at new Window-> and copy following url to Location field:
https://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-
phonegap/tags/r1.2/download

10. PhoneGap JavaScript API Vs Native Components (Plugins)
Give any name to Name Field. E.g. ‘Phonegap Addin Tool’
Click on ‘ok’ button this will start downloading al required Softwares.
Click ‘Next’ and finish the installation Wazard.
It will ask to Restart Eclipse and eclipce toolbar now includes PhoneGap icon as
shown in below image:

11. PhoneGap JavaScript API Vs Native Components (Plugins)
Step 2: Implement the Plugin Class: “CopyToSdCard”
Code can be found here:
http://d.pr/n/CPyK

12. PhoneGap JavaScript API Vs Native Components (Plugins)
Step 3: Implement Plugin JavaScript
1. Create a file called copyToSdCard.js
2. In it create a class named CopyToSdCard.
3. Create a member function named copyFiles ().
4. In copyFiles () function call PhoneGap.exec(<>, <>,<>,<>,<>);
5. Finally register both CopyToSdCard class as an JavaScript Plugin and register Java Class as the native Plugin
(invoked from Javascript)
Below is the complete Source code for copyToSdCard.js file:
Here: http://d.pr/n/cCGT

13. PhoneGap JavaScript API Vs Native Components (Plugins)
Installing Plugins for Android
On Android, the plugin Java source code needs to be included in your PhoneGap
Android project either in source form or as a JAR library.In addition, the
JavaScript for the plugin needs to be added to the ./assets/www/* folder of your
PhoneGap Android project and linked in your HTML source code.Finally an
additional element needs to be added to the ./res/xml/plugins.xml file. The
plugins.xml file describes what plugins are allowed to be called from
JavaScript.Step 4: Register plugin to res/xml/plugin.xml file:
<plugin name="CopyImagesPlugin" value="com.phonegap.plugins.test.
CopyToSdCard"/>

14. PhoneGap JavaScript API Vs Native Components (Plugins)
Step 4: Register plugin to res/xml/plugin.xml file:
<plugin name="CopyImagesPlugin" value="com.phonegap.plugins.test.
CopyToSdCard"/>
Step 5: Add following javascript reference to your html file:
<script type="text/javascript" charset="utf-8" src="copyToSdCard.js"></script>

15. PhoneGap JavaScript API Vs Native Components (Plugins)
Step 6: Add following javascript code to html file:
Code: http://d.pr/n/6xIg
Finally, call the above javascript method saveToSdFromAssets () from your Html file
say on a button click as below:
<a href="javascript:void(0)" onclick="saveToSdFromAssets();" data-role="button"
data-theme="a" value='Save to SD Card' width='50%' >Save to SD Card</a>
Similarly, The same plugin can be developed for iOS and other mobile Platforms in
respective Native Language (in case of android its Java).

16. At TechAhead, we have experience of creating cross platform mobile apps for
our clients. If you have any requirement for cross platform mobile application
development, contact us on info@techaheadcorp.com for FREE 30 minutes no
obligation consultation with our mobile apps experts($200 Value).
5/11/2012