2. Apache Cordova
Apache Cordova is a platform for building natively installed
mobile applications using HTML, CSS and JavaScript
3. History
Apache Cordova was originally 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.
5. Apache Cordova Application’s User 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
Provides an 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
Tools for 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
11. 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]);
12. Plugin Example (Android Native 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;
}
}
14. 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/
Editor's Notes
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
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.
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.
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