Your SlideShare is downloading. ×
  • Like
Cross Platform Mobile App Development
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Cross Platform Mobile App Development



  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Cross Platform Mobile App Development With Jakir Hossain
  • 2. Some Cross Platform Mobile App Development Tools • RhoMobile • Appcelerator • WidgetPad • PhoneGap • MoSync • Sencha • Webapp-net • MotherApp • Marmalade • Volantis mobility server
  • 3. • Web approach using hybrid model (Combines native development with web technology.) • HTML 5, CSS 3, JavaScript running on a mobile browser embedded in a native app wrapper. • Device capabilities accessed through device- independent JavaScript API. • Simple ‘drop-in libraires’ concept makes it easier to develop. PhoneGap
  • 4. •Two ways of creating • ‘Drop-in libraires’ • Comand Line Interface New PhoneGap Project
  • 5. • Create an android project • File -> New -> Android Project • In the root directory of the project, create two new directories • /libs and /assets/www • Copy phonegap.js from your PhoneGap download earlier to /assets/www • Create an index.html file in /assets/www • Copy cordova.jar from your PhoneGap download to /libs • Copy xml folder from your PhoneGap download to /res PhoneGap Project – Drop-in Library
  • 6. • Make a few adjustments to the project's main Java file • Change the class's extend from Activity to DroidGap • Replace the setContentView() line with super.loadUrl(Config.getStartUrl()); • Add import com.phonegap.* • Remove import New PhoneGap Project (cont.)
  • 7. Hello World PhoneGap
  • 8. • Lets make our "Hello World, PhoneGap!" application • Till now we have an empty PhoneGap project • All we need to do is to edit the index.html file • Created by us • Located in /assets/www • This is the Entry point of our Application Hello World PhoneGap
  • 9. Hello World PhoneGap – Example  Hello World, PhoneGap! • Open the index.html and copy the following <!Doctype html> <html> <head> <title> First PhoneGap Application </title> <head> <body> <h1>Hello PhoneGap</h1> </body> </html>  Go to Build -> Run as Android Application  The emulator should start  And the app run!
  • 10. LIVE DEMO Hello World PhoneGap
  • 11. • Creating a Project: $cordova create hello com.example.hello “HelloWorld” • Add Platform: $cordova platform add android • Build / Run $cordova build PhoneGap Comanline Interface
  • 12. • PhoneGap Comanline Interface Setup
  • 13. • Jqwidgets • Kendo UI • jQuery Mobile • webix User Interface for HTML5 App
  • 14. • WebGL (OpenGL ES 2.0 for the Web) • Quintus • ImpactJS • LimeJS • melonJS • cocoonjs Want to develop Games?
  • 15. Need to know JavaScript
  • 16. Questions?