0
Cross Platform Mobile App
Development
With Jakir Hossain
Some Cross Platform Mobile App
Development Tools
• RhoMobile
• Appcelerator
• WidgetPad
• PhoneGap
• MoSync
• Sencha
• Web...
• Web approach using hybrid model (Combines native
development with web technology.)
• HTML 5, CSS 3, JavaScript running o...
•Two ways of creating
• ‘Drop-in libraires’
• Comand Line Interface
New PhoneGap Project
• Create an android project
• File -> New -> Android Project
• In the root directory of the project, create two new direct...
• Make a few adjustments to the project's main Java file
• Change the class's extend from Activity to DroidGap
• Replace t...
Hello World PhoneGap
• Lets make our "Hello World, PhoneGap!" application
• Till now we have an empty PhoneGap project
• All we need to do is t...
Hello World PhoneGap – Example
 Hello World, PhoneGap!
• Open the index.html and copy the following
<!Doctype html>
<html...
LIVE DEMO
Hello World PhoneGap
• Creating a Project:
$cordova create hello com.example.hello “HelloWorld”
• Add Platform:
$cordova platform add android
•...
• http://tech.jakir.me/1395
PhoneGap Comanline Interface Setup
• Jqwidgets
• Kendo UI
• jQuery Mobile
• webix
User Interface for HTML5 App
• WebGL (OpenGL ES 2.0 for the Web)
http://www.chromeexperiments.com/webgl/
• Quintus
http://html5quintus.com/
• ImpactJS
...
Need to know JavaScript
Questions?
Upcoming SlideShare
Loading in...5
×

Cross Platform Mobile App Development

1,202

Published on

1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
1,202
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Cross Platform Mobile App Development "

  1. 1. Cross Platform Mobile App Development With Jakir Hossain
  2. 2. Some Cross Platform Mobile App Development Tools • RhoMobile • Appcelerator • WidgetPad • PhoneGap • MoSync • Sencha • Webapp-net • MotherApp • Marmalade • Volantis mobility server
  3. 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. 4. •Two ways of creating • ‘Drop-in libraires’ • Comand Line Interface New PhoneGap Project
  5. 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. 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 android.app.Activity New PhoneGap Project (cont.)
  7. 7. Hello World PhoneGap
  8. 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. 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. 10. LIVE DEMO Hello World PhoneGap
  11. 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. 12. • http://tech.jakir.me/1395 PhoneGap Comanline Interface Setup
  13. 13. • Jqwidgets • Kendo UI • jQuery Mobile • webix User Interface for HTML5 App
  14. 14. • WebGL (OpenGL ES 2.0 for the Web) http://www.chromeexperiments.com/webgl/ • Quintus http://html5quintus.com/ • ImpactJS http://impactjs.com/ • LimeJS http://www.limejs.com/ • melonJS http://melonjs.org/ • cocoonjs Want to develop Games?
  15. 15. Need to know JavaScript
  16. 16. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×