new bamboo

Rhodes and PhoneGap

Makoto Inoue London Android User Group - July

new bamboo

Me

• http://twitter.com/makoto_inoue

• http://github.com/makoto

• http://rubyonmobile.wordpress.com

• http://inouemak.wordpress.com/

• http://d.hatena.ne.jp/makotoi/ (日本語)

new bamboo

Me• Ruby On Rails > 3 years

• New Bamboo > 1 year

• Java == 0 month

• Rhodes experience > 7 months

• PhoneGap experience < 1 month

• This slide > 3 months

new bamboo

Topics

• Basic concept

• Rhodes

• PhoneGap

• More Info

new bamboo

Basic Concept

new bamboo

Why cross platform development ?

new bamboo

http://rubyonmobile.wordpress.com/2009/04/10/questions-to-rhodes-developers/

new bamboo

Write once, Run anywhere

new bamboo

Sounds familiar .......???

new bamboo

It’s framework that matters

new bamboo

Rhodes & Phone Gap

•HTML/CSS/Javascript for UI

•With Local device capabilities

new bamboo

Rhodes

new bamboo

How does Rhodes work?•MVC => Model on Web(RhoSync as Rails

app) and VC on Device (Rhodes)

•Ruby(XRuby for Android) for business logic and data access

•Generates HTML via Erb (Embedded Ruby)

•ORM => Key&value pair(Rhom)

new bamboo

Architecture

http://rhomobile.com/products

new bamboo

Sample Code

http://github.com/makoto/rhodes-twitter/tree/masterhttp://github.com/makoto/rhosync-twitter-adapter/tree/master

new bamboo

Model(Rhosync)

new bamboo

Model(Rhosync)

class PublicTimeline < SourceAdapter include RestAPIHelpers def initialize(source, credential = nil) super end

def query log "#{self.class} query" log @source.url.inspect

uri = URI.parse(@source.url) res = Net::HTTP.start(uri.host, uri.port) {|http| http.get("/statuses/public_timeline.xml") } xml_data = XmlSimple.xml_in(res.body); @result = xml_data["status"] end

new bamboo

View<ul id="PublicTimeLines" title="PublicTimeLines"><%@PublicTimeLines.each do |x|%>

<li class ="row"> <div class ="photo"> <img src=<%= escape x.user_profile_image_url %> alt=<%= escape x.user_screen_name %> /> </div> <div class ="status"> <div class ="text"> <%= escape x.text %> </div> <div class ="user"> <%= escape x.user_name %> <%= parse_time x.created_at %> via <%= escape x.source %> </div> </div></li><%end%></ul>

new bamboo

Controller&ORM(Rhodes)

new bamboo

PhoneGap

new bamboo

How does PhoneGap work(for Android)?

• Very thin layer on top of skeleton project

• appView.setJavaScriptEnabled

• appView. addJavascriptInterface(gap, "Device");

• appView.loadUrl(this.uri)

new bamboo

Source - DroidGap.java

public class DroidGap extends Activity { private static final String LOG_TAG = "DroidGap"; private WebView appView; private String uri; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); appView = (WebView) findViewById(R.id.appView); appView.setWebChromeClient(new GapClient(this)); appView.getSettings().setJavaScriptEnabled(true); appView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); bindBrowser(appView);

new bamboo

private void bindBrowser(WebView appView) { // The PhoneGap class handles the Notification and Android Specific crap PhoneGap gap = new PhoneGap(this, appView); GeoBroker geo = new GeoBroker(appView, this); AccelListener accel = new AccelListener(this, appView); // This creates the new javascript interfaces for PhoneGap appView.addJavascriptInterface(gap, "Device"); appView.addJavascriptInterface(geo, "Geo"); appView.addJavascriptInterface(accel, "Accel"); }

Source - DroidGap.java

new bamboo

public class PhoneGap{ private static final String LOG_TAG = "PhoneGap"; /* * UUID, version and availability */

.... public void beep(long pattern) { RingtoneManager beeper = new RingtoneManager(mCtx); Uri ringtone = beeper.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION); Ringtone notification = beeper.getRingtone(mCtx, ringtone); notification.play(); }

Source - PhoneGap.java

new bamboo

Notification.prototype.beep = function(count, volume){ Device.beep(count);}

Source - phonegap.js

new bamboo

Sample - index.html

new bamboo

More about Java & JS bridge at “Hello, Android” Chapter 7.3

new bamboo

More Info

new bamboo

Before you jump in...

new bamboo

Be aware of....• GPL (Some Javascript libraries)

• Dual License (Rhodes)

• Some app getting rejected (PhoneGap)

• Browser & Device compatibility issues

new bamboo

Jump in

new bamboo

More Info(Rhodes)

• Screencast http://www.youtube.com/rhomobile

• Rhomobile web site http://rhomobile.com

• Google group http://groups.google.com/group/rhomobile

• My blog http://rubyonmobile.wordpress.org

• Apps on Market http://rhomobile.com/customers

new bamboo

More Info(PhoneGap)

• web site http://phonegap.com/

• Google group http://groups.google.com/group/phonegap

• Screencast http://tinyurl.com/nl3bvx

• Apps on market http://phonegap.com/projects

new bamboo

Flickr images• http://www.flickr.com/photos/tizianoj/355266615/

• http://www.flickr.com/photos/mloughran/2680464737/

• http://www.flickr.com/photos/hartsock/2037729243/

• http://www.flickr.com/photos/roundamerica/3063799062/

• http://www.flickr.com/photos/rehvonwald/217658854/

• http://www.flickr.com/photos/renata_motta/2845282904/

new bamboo

Questions?