Rhodes And Phone Gap

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/master http://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

Source - DroidGap.java 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"); } new bamboo

Source - PhoneGap.java 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(); } new bamboo

Source - phonegap.js Notification.prototype.beep = function(count, volume) { Device.beep(count); } 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? new bamboo

http://d.hatena.ne.jp	1051
http://community.developer.motorola.com	149
http://www.slideshare.net	82
http://feeds2.feedburner.com	5
http://webcache.googleusercontent.com	3
http://203.208.39.132	1
http://74.125.153.132	1
http://mtrl.lithium.com	1
http://www.apurva.com	1

Rhodes And Phone Gap

by inouemak

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 1,294

Statistics