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 android.app.Activity
New PhoneGap Project (cont.)
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!