Rhodes And Phone Gap

13,545 views

Published on

Introductory talk about Rhodes and Phone Gap at London Android User Group

Published in: Technology, Education
1 Comment
8 Likes
Statistics
Notes
  • Effective presentation with usage of perfect images for description. You've shared information clearly and concisely. It's one of my favorites. Seek your permission to embed it to my site at www.sprintringtones.org/ .

    Anita Gomez .
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,545
On SlideShare
0
From Embeds
0
Number of Embeds
1,399
Actions
Shares
0
Downloads
225
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Rhodes And Phone Gap

  1. 1. Rhodes and PhoneGap Makoto Inoue London Android User Group - July new bamboo
  2. 2. 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
  3. 3. 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
  4. 4. Topics • Basic concept • Rhodes • PhoneGap • More Info new bamboo
  5. 5. Basic Concept new bamboo
  6. 6. Why cross platform development ? new bamboo
  7. 7. http://rubyonmobile.wordpress.com/2009/04/10/questions-to-rhodes-developers/ new bamboo
  8. 8. Write once, Run anywhere new bamboo
  9. 9. Sounds familiar .......??? new bamboo
  10. 10. It’s framework that matters new bamboo
  11. 11. Rhodes & Phone Gap • HTML/CSS/Javascript for UI • With Local device capabilities new bamboo
  12. 12. Rhodes new bamboo
  13. 13. 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
  14. 14. Architecture http://rhomobile.com/products new bamboo
  15. 15. Sample Code http://github.com/makoto/rhodes-twitter/tree/master http://github.com/makoto/rhosync-twitter-adapter/tree/master new bamboo
  16. 16. Model(Rhosync) new bamboo
  17. 17. 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
  18. 18. 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
  19. 19. Controller&ORM(Rhodes) new bamboo
  20. 20. PhoneGap new bamboo
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Source - phonegap.js Notification.prototype.beep = function(count, volume) { Device.beep(count); } new bamboo
  26. 26. Sample - index.html new bamboo
  27. 27. More about Java & JS bridge at “Hello, Android” Chapter 7.3 new bamboo
  28. 28. More Info new bamboo
  29. 29. Before you jump in... new bamboo
  30. 30. Be aware of.... • GPL (Some Javascript libraries) • Dual License (Rhodes) • Some app getting rejected (PhoneGap) • Browser & Device compatibility issues new bamboo
  31. 31. Jump in new bamboo
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. Questions? new bamboo

×