• Share
  • Email
  • Embed
  • Like
  • Private Content
PhoneGap JavaScript API vs Native Components
 

PhoneGap JavaScript API vs Native Components

on

  • 7,989 views

PhoneGap JavaScript API vs Native Components

PhoneGap JavaScript API vs Native Components

Statistics

Views

Total Views
7,989
Views on SlideShare
7,989
Embed Views
0

Actions

Likes
9
Downloads
125
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    PhoneGap JavaScript API vs Native Components PhoneGap JavaScript API vs Native Components Presentation Transcript

    • PhoneGap JavaScript API Vs Native Components (Plugins)
    • 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.
    • 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 APIb) Access contacts from the PhoneGap JavaScript APIc) Invoke a call2. PhoneGap’s JavaScript API makes those common phone functions available to JavaScript to run in the Browser (Native WebView).
    • 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.
    • 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.
    • PhoneGap JavaScript API Vs Native Components (Plugins)Thus, overall PhoneGap Architecturebecomes:
    • 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.
    • 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.
    • 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
    • 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:
    • PhoneGap JavaScript API Vs Native Components (Plugins)Step 2: Implement the Plugin Class: “CopyToSdCard”Code can be found here:http://d.pr/n/CPyK
    • PhoneGap JavaScript API Vs Native Components (Plugins)Step 3: Implement Plugin JavaScript1. Create a file called copyToSdCard.js2. 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
    • PhoneGap JavaScript API Vs Native Components (Plugins)Installing Plugins for AndroidOn 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"/>
    • 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>
    • PhoneGap JavaScript API Vs Native Components (Plugins)Step 6: Add following javascript code to html file:Code: http://d.pr/n/6xIgFinally, 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).
    • At TechAhead, we have experience of creating cross platform mobile apps forour clients. If you have any requirement for cross platform mobile applicationdevelopment, contact us on info@techaheadcorp.com for FREE 30 minutes noobligation consultation with our mobile apps experts($200 Value). 5/11/2012