Emil VargaSoftware Engineer

@ IBM

http://phonegap.com

Develop in HTML5/CSS3 + JavaScript

Deploy to multiple platforms

● Free and Open Source● Large community● Plugins and tools● JavaScript frameworks

xui

Native application(Java, C++, C#..)

WebView (browser)

plug-ins

Here be JavaScript and HTML

Glued with PhoneGap

Extra stuff (Barcode scanner, Speech recognizer, Soft keyboard etc.)

Technical details ahead

● Eclipse Classic 3.4 – 3.7.x (current) http://www.eclipse.org/downloads/

● Download Android SDK, extract zip/tar, run ./android, select all, install http://developer.android.com/sdk/index.html

● Install Eclipse plugin (Help->Install New Software..)https://dl-ssl.google.com/android/eclipse/

http://phonegap.com/start#android

● Download PhoneGap 1.4.1 (currently)

● Eclipse -> New -> Android Project ● Select your build target (e.g. Android 2.2)● Add your package name● Un-check creating SampleActivity.java

● Copy content of the phonegap sample project<extracted folder>/lib/android/example to the new Android Project (everything except project.properties)● Configure Build path -> Add JARs -> libs/phonegap-1.4.1.jar● Edit AndroidManifest.xml

– remove line android:xLargeScreens =”true”

– Change <uses-sdk android:minSdkVersion=”5” /> to your build target (e.g. 8)

//on application start wait for phonegap to fully loaddocument.addEventListener(“deviceReady”, function(){

//pop up a confirmation dialog

navigator.notification.confirm(“Do you want to exit?”,

//function called on any button pressed (Yes or No)

function(button){

//user pressed 'Yes'

if (button==1){

//exit application

navigator.app.exitApp();

} },”Confirm”, “Yes,No”);

},true);

Thanks to the PhoneGap teamAnd Brian LeRoux

Extra

● Pluginshttps://github.com/purplecabbage/phonegap-plugins

● Cool Tools● Lawnchair – simple NoSQL JSON

http://westcoastlogic.com/lawnchair/● ApplicationCraft – zero install developer envoronment

http://www.applicationcraft.com/● Ripple – in-browser device emulator

http://ripple.tinyhippos.com/● PhoneGap build

https://build.phonegap.com/

DIY plugins

//myPlugin.js

function MyPlugin() {};

MyPlugin.prototype.myAction = function(params, winCallback, failCallback){

PhoneGap.exec(winCallback, failCallback, “MyPlugin”, “myAction”, [params]);

}

PhoneGap.addConstructor(function(){

PhoneGap.addPlugin(“myPlugin”, new MyPlugin());

});

DIY plugins

import com.phonegap.api.Plugin;

import com.phonegap.api.PluginResult;

import org.json.JSONArray;

import org.json.JSONObject;

public class MyPlugin extends Plugin{

public PluginResult execute(String action, JSONArray args, String callbackId){

if (action.equals(“myAction”)){

JSONObject obj = args.getJSONObject(args);

...

return new PluginResult(PluginResult.Status.OK);

}

else return new PluginResult(PluginResult.Status.INVALID_ACTION);

}

}