Downloaded 1,391 times
![Apache Cordova Native Plug-in What if a native feature isn’t available in Core APIs? PhoneGap is extensible with a “native plugin” model that enables you to write your own native logic to access via JavaScript. You develop your JavaScript class to mirror the API of the native class Invoke the native function using PhoneGap.exec() Plug-in class mappings: Android: res/xml/plugins.xml iOS: www/Cordova.plist BlackBerry: www/plugins.xml PhoneGap.exec(function(winParam){}, function(error){}, ”service”, ”action", [params]);](https://image.slidesharecdn.com/apachecordovav1-130101235715-phpapp02/75/Introduction-to-Apache-Cordova-Phonegap-11-2048.jpg)
![Plugin Example (HTML + JS Code) <!DOCTYPE html> <html> <head> <title>Cordova Plugin Test</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8"> var EchoPlugin = { callNativeFunction: function (success, fail, resultType) { return Cordova.exec( success, fail, “sample.cordova.plugin.Echo", "echo", [resultType]); } }; function callNativePlugin( returnSuccess ) { HelloPlugin.callNativeFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); } function nativePluginResultHandler (result) { alert("SUCCESS: rn"+result ); } function nativePluginErrorHandler (error) { alert("ERROR: rn"+error ); } </script> </head> <body> <body onload="onBodyLoad()"> <h1>Cordova Plugin Test</h1> <button onclick="callNativePlugin('success');">Click to invoke the Native Plugin!</button> </body>](https://image.slidesharecdn.com/apachecordovav1-130101235715-phpapp02/75/Introduction-to-Apache-Cordova-Phonegap-13-2048.jpg)
![Resources Apache Cordova Website http://cordova.apache.org/ Apache Cordova Documentation http://docs.phonegap.com/en/2.2.0/index.html PhoneGap Day 2011 – IBM, PhoneGap and the Enterprise by Bryce Curtis [Aug 10, 2011] http://www.slideshare.net/drbac/phonegap-day-ibm-phonegap-and-the-enterprise (video) Andrew Trice’s Blog http://www.tricedesigns.com/category/cordova/](https://image.slidesharecdn.com/apachecordovav1-130101235715-phpapp02/75/Introduction-to-Apache-Cordova-Phonegap-14-2048.jpg)
Uploaded byejlp12
Introduction to Apache Cordova (Phonegap)
Apache Cordova allows developers to use standard web technologies like HTML, CSS, and JavaScript to build applications that can be deployed across various mobile platforms. It provides an API that enables access to device capabilities and features. Developers can also create custom plugins to access native functionality that is not included in the core Cordova API.
In this document
Powered by AI
Introduction to the presentation and speaker's contact information.
Apache Cordova is a platform for building mobile apps using web technologies, previously known as Phonegap. It is open-source and supported by the Apache Foundation.
The architecture involves a web view that presents the UI using HTML, CSS, and JavaScript, designed to fit the device's dimensions.
Provides APIs to access native device features like Camera, Geolocation, and Media, utilizing JavaScript for interaction.
Lists the tools needed for development including editors, SDKs, emulators, and guides for various platforms.
Examples of JavaScript and Android code demonstrating how to interact with Cordova’s native APIs and create plugins.
Demonstrates HTML and JS code for invoking native plugins through Cordova, and lists resources for further learning.
Introduction to Apache Cordova (Phonegap)
- 1. Introduction to ejlp12@gmail.com
- 2. Apache Cordova Apache Cordovais a platform for building natively installed mobile applications using HTML, CSS and JavaScript
- 3. History Apache Cordova wasoriginally called Phonegap build by Nitobi Open-source & free software from the beginning (MIT License), Apache License now Nitobi then aquired by Adobe and donated the PhoneGap codebase to the Apache Software Foundation (ASF) PhoneGap is still a product of Adobe. It is a distribution of Apache Cordova. Think of Apache Cordova as the engine that powers PhoneGap.
- 4.
- 5. Apache Cordova Application’sUser Interface The user interface for Apache Cordova applications is created using HTML, CSS, and JavaScript. The UI layer is a web browser view that takes up 100% of the device width and 100% of the device height. The web view used by application is the same web view used by the native operating system iOS: Objective-C UIWebView class Android: android.webkit.WebView WP7: WebBrowser WP8: WebBrowser control (Internet Explorer 10) BlackBerry: WebWorks framework
- 6. Apache Cordova API Providesan application programming interface (API) enables you to access native operating system functionality using JavaScript. APIs for Accelerometer, Camera, Compass, Media, FileSystem, etc Extendable using native plug-in docs.phonegap.com Cordova JavaScript API Cordova Application and Native API Cordova Native Library
- 7. Supported Platforms Accelerometer Monitor the motion sensor on the device. Camera Take pictures with the device camera allow the user to select images from their photo library on the device. Capture Capture video and still images from the camera, and audio from the microphone. Compass Give users of your app some direction. Contacts Search and Create contacts in the user’s address book. File Low level read and write access to the file system. Upload and download files from a web server. GeoLocation Make your app location aware. Media Play and record audio files. Network Monitor the device connections Notification Access to vibration, beep and alerts. Storage Updated list: Persistent data store in WebStorage. http://wiki.apache.org/cordova/PlatformSupport
- 8. Development using Cordova Toolsfor development Any HTML & JS editor Platform SDK e.g. Android SDT, Android SDK, BB SDK, Xcode, Visual Studio Mobile. Platform Emulator (usually provide along with SDK) JS/HTML GUI Mobile framework e.g. JQuery, Sencha Touch, dojo Mobile Browser e.g. Firefox with Bugzilla extension, Chrome Browser
- 9. Getting Started Guides: • Getting Started with Android • Getting Started with Blackberry • Getting Started with iOS • Getting Started with Symbian • Getting Started with WebOS • Getting Started with Windows Phone • Getting Started with Windows 8 • Getting Started with Bada • Getting Started with Tizen http://docs.phonegap.com/en/2.2.0/guide_getting-started_index.md.html Use platform SDK to develop application for each target platform … Xcode Android SDK BB Java Eclipse Plug-in Visual Studio, Windows Eclipse ADT Plug-in Ripple Phone Dev Tools
- 10. Code Example <!DOCTYPE html> <html> <head> <title>Device Properties Example</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready function onDeviceReady() { navigator.geolocation.getCurrentPosition(onSuccess, onError); } // onSuccess Geolocation function onSuccess(position) { var element = document.getElementById('geolocation'); element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + 'Altitude: ' + position.coords.altitude + '<br />' + 'Accuracy: ' + position.coords.accuracy + '<br />' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' + } // onError Callback receives a PositionError object function onError(error) { alert('code: ' + error.code + 'n' + message: ' + error.message + 'n'); } </script> </head> <body> <p id="geolocation">Finding geolocation...</p> </body> </html>
- 11. Apache Cordova NativePlug-in What if a native feature isn’t available in Core APIs? PhoneGap is extensible with a “native plugin” model that enables you to write your own native logic to access via JavaScript. You develop your JavaScript class to mirror the API of the native class Invoke the native function using PhoneGap.exec() Plug-in class mappings: Android: res/xml/plugins.xml iOS: www/Cordova.plist BlackBerry: www/plugins.xml PhoneGap.exec(function(winParam){}, function(error){}, ”service”, ”action", [params]);
- 12. Plugin Example (AndroidNative Code) package sample.cordova.plugin; import org.apache.cordova.api.CordovaPlugin; import org.apache.cordova.api.PluginResult; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; /** * This class echoes a string called from JavaScript. Extend the Cordova Implement execute */ Plugin class method public class Echo extends CordovaPlugin { @Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { Define and handle if (action.equals("echo")) { action String message = args.getString(0); if (message != null && message.length() > 0) { callbackContext.success(message); } else { callbackContext.error("Expected one non-empty string argument."); } return true; } return false; } }
- 13. Plugin Example (HTML+ JS Code) <!DOCTYPE html> <html> <head> <title>Cordova Plugin Test</title> <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script> <script type="text/javascript" charset="utf-8"> var EchoPlugin = { callNativeFunction: function (success, fail, resultType) { return Cordova.exec( success, fail, “sample.cordova.plugin.Echo", "echo", [resultType]); } }; function callNativePlugin( returnSuccess ) { HelloPlugin.callNativeFunction( nativePluginResultHandler, nativePluginErrorHandler, returnSuccess ); } function nativePluginResultHandler (result) { alert("SUCCESS: rn"+result ); } function nativePluginErrorHandler (error) { alert("ERROR: rn"+error ); } </script> </head> <body> <body onload="onBodyLoad()"> <h1>Cordova Plugin Test</h1> <button onclick="callNativePlugin('success');">Click to invoke the Native Plugin!</button> </body>
- 14. Resources Apache Cordova Website http://cordova.apache.org/ ApacheCordova Documentation http://docs.phonegap.com/en/2.2.0/index.html PhoneGap Day 2011 – IBM, PhoneGap and the Enterprise by Bryce Curtis [Aug 10, 2011] http://www.slideshare.net/drbac/phonegap-day-ibm-phonegap-and-the-enterprise (video) Andrew Trice’s Blog http://www.tricedesigns.com/category/cordova/
Editor's Notes
- #6 Think of this as a “headless” web browser. It renders HTML content, without the “chrome” or window decoration of a regular web browser. You build your application to take advantage of this space, and you build navigational/interactive/content elements and application chrome into your HTML and CSS based user interface.-- https://github.com/mrlacey/phonegap-wp7/blob/master/framework/PhoneGap/NativeExecution.cs
- #7 In addition to the “out of the box” functionality, you can also leverage PhoneGap’s JavaScript-to-native communication mechanism to write “native plugins”. PhoneGap native plugins enable you to write your own custom native classes and corresponding JavaScript interfaces for use within your PhoneGap applications.You build your application logic using JavaScript, and the PhoneGap API handles communication with the native operating system.If you need to access native functionality that isn’t already exposed, then you can easily create a native plugin to provide access to that native functionality.PhoneGap native plugins shouldn’t be thought of as “plugins” like Flash Player inside of a browser, rather you are “plugging in” additional functionality that extends the core PhoneGap framework.
- #10 SDK for Windows Phone 7.0, 7.5 and 8.0 - https://dev.windowsphone.com/en-us/downloadsdkThe Windows Phone Software Development Kit (SDK) 8.0 provides you with the tools that you need to develop apps and games for Windows Phone 8 and Windows Phone 7.5.Visual StudioWindows Phone 8 EmulatorWindows Phone Application AnalysisSimulation DashboardStore Test Kit.The Windows Phone Software Development Kit (SDK) 7.1 provides you with all of the tools that you need to develop applications and games for both Windows Phone 7.0 and Windows Phone 7.5 devices.Microsoft Visual Studio 2010 Express for Windows PhoneWindows Phone EmulatorWindows Phone SDK 7.1 AssembliesSilverlight 4 SDK and DRTWindows Phone SDK 7.1 Extensions for XNA Game Studio 4.0Microsoft Expression Blend SDK for Windows Phone 7Microsoft Expression Blend SDK for Windows Phone OS 7.1WCF Data Services Client for Window PhoneMicrosoft Advertising SDK for Windows PhoneWindows Mobile 6, 6.5 - http://msdn.microsoft.com/en-us/windowsmobile/defaultStudio 2005 or 2008The Windows Mobile 6 SDK Refresh adds documentation, sample code, header and library files, emulator images and tools to Visual Studio that let you build applications for Windows Mobile 6.The Windows Mobile 6.5.3 DTK provides documentation, sample code, header and library files, emulator images and tools you can use with Visual Studio to build applications for Windows Mobile 6.5 and 6.5.3.
- #12 function(winParam) {} - Success function callback. Assuming your exec call completes successfully, this function will be invoked (optionally with any parameters you pass back to it)function(error) {} - Error function callback. If the operation does not complete successfully, this function will be invoked (optionally with an error parameter)"service" - The service name to call into on the native side. This will be mapped to a native class. More on this in the native guides below"action" - The action name to call into. This is picked up by the native class receiving the exec call, and, depending on the platform, essentially maps to a class's method. [/* arguments */] - Arguments to get passed into the native environment