cross platform mobile app development
TRANSCRIPT
Cross Platform Mobile App Development
With Jakir Hossain
Some Cross Platform Mobile App Development Tools
• RhoMobile• Appcelerator• WidgetPad• PhoneGap• MoSync
• Sencha• Webapp-net• MotherApp• Marmalade• Volantis mobility
server
• 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
•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 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
• 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.)
Hello World PhoneGap
• 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
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!
LIVE DEMO
Hello World PhoneGap
• Creating a Project:$cordova create hello com.example.hello “HelloWorld”
• Add Platform:$cordova platform add android
• Build / Run$cordova build
PhoneGap Comanline Interface
• 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/
• ImpactJShttp://impactjs.com/
• LimeJShttp://www.limejs.com/
• melonJShttp://melonjs.org/
• cocoonjs
Want to develop Games?
Need to know JavaScript
Questions?