Introduction to Apache Cordova (Phonegap)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Introduction to Apache Cordova (Phonegap)

  • 13,482 views
Uploaded on

Introduction to Apache Cordova (Phonegap).

Introduction to Apache Cordova (Phonegap).

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Really nice. thankyou for putting this up.
    Are you sure you want to
    Your message goes here
  • excelente !
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
13,482
On Slideshare
11,830
From Embeds
1,652
Number of Embeds
28

Actions

Shares
Downloads
374
Comments
2
Likes
11

Embeds 1,652

http://ejlp.blogspot.com 1,558
http://alllinux.tistory.com 14
http://ejlp.blogspot.nl 8
http://ejlp.blogspot.sg 8
http://ejlp.blogspot.in 7
http://ejlp.blogspot.de 7
http://ejlp.blogspot.ru 7
http://ejlp.blogspot.fr 5
http://ejlp.blogspot.com.br 4
http://ejlp.blogspot.ca 4
http://ejlp.blogspot.com.tr 4
http://ejlp.blogspot.com.es 3
http://ejlp.blogspot.it 3
http://ejlp.blogspot.co.uk 3
http://cloud.feedly.com 2
http://feeds.feedburner.com 2
http://ejlp.blogspot.tw 2
http://ejlp.blogspot.jp 1
http://ejlp.blogspot.dk 1
http://ejlp.blogspot.sk 1
http://ejlp.blogspot.com.ar 1
http://ejlp.blogspot.no 1
http://ejlp.blogspot.ie 1
http://www.ejlp.blogspot.de 1
http://ejlp.blogspot.be 1
https://twitter.com 1
http://ejlp.blogspot.co.il 1
http://ejlp.blogspot.mx 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 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

Transcript

  • 1. Introduction to ejlp12@gmail.com
  • 2. Apache CordovaApache Cordova is a platform for building natively installedmobile applications using HTML, CSS and JavaScript
  • 3. HistoryApache Cordova was originally called Phonegap build by NitobiOpen-source & free software from the beginning (MIT License), ApacheLicense nowNitobi then aquired by Adobe and donated the PhoneGap codebase to theApache 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. Cordova Architecture
  • 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 APIProvides 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-indocs.phonegap.com Cordova JavaScript API Cordova Application and Native API Cordova Native Library
  • 7. Supported PlatformsAccelerometer 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 connectionsNotification Access to vibration, beep and alerts.Storage Updated list: Persistent data store in WebStorage. http://wiki.apache.org/cordova/PlatformSupport
  • 8. Development using CordovaTools 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 StartedGuides:• 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.htmlUse 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 Native Plug-inWhat if a native feature isn’t available in Core APIs?PhoneGap is extensible with a “native plugin” model that enables youto 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.xmlPhoneGap.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 methodpublic 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. ResourcesApache Cordova Websitehttp://cordova.apache.org/Apache Cordova Documentationhttp://docs.phonegap.com/en/2.2.0/index.htmlPhoneGap 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 Bloghttp://www.tricedesigns.com/category/cordova/