Rhodes and PhoneGap


            Makoto Inoue
   London Android User Group - July



                                    ...
Me

• http://twitter.com/makoto_inoue
• http://github.com/makoto
• http://rubyonmobile.wordpress.com
• http://inouemak.wor...
Me
• Ruby On Rails > 3 years
• New Bamboo > 1 year
• Java == 0 month
• Rhodes experience > 7 months
• PhoneGap experience ...
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/

                                            ...
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


                                   ne...
Rhodes



         new bamboo
How does Rhodes work?
• MVC => Model on Web(RhoSync as Rails
  app) and VC on Device (Rhodes)

• Ruby(XRuby for Android) f...
Architecture




http://rhomobile.com/products


                                new bamboo
Sample
                       Code

     http://github.com/makoto/rhodes-twitter/tree/master
http://github.com/makoto/rhos...
Model(Rhosync)




                 new bamboo
Model(Rhosync)
class PublicTimeline < SourceAdapter

  include RestAPIHelpers

  def initialize(source, credential = nil)
...
View
<ul id="PublicTimeLines" title="PublicTimeLines">
<%@PublicTimeLines.each do |x|%>

<li class ="row">
  <div class ="...
Controller&ORM(Rhodes)




                     new bamboo
PhoneGap



           new bamboo
How does PhoneGap
  work(for Android)?

• Very thin layer on top of skeleton project
  •   appView.setJavaScriptEnabled

 ...
Source - DroidGap.java

public class DroidGap extends Activity {

 private static final String LOG_TAG = "DroidGap";
 priv...
Source - DroidGap.java



private void bindBrowser(WebView appView)
{
  // The PhoneGap class handles the Notification and...
Source - PhoneGap.java

public class PhoneGap{

 private static final String LOG_TAG = "PhoneGap";
 /*
  * UUID, version a...
Source - phonegap.js




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




             ...
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)

...
Jump in




          new bamboo
More Info(Rhodes)

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

•   Rhomobile web site http://rhomobile.com

•   Googl...
More Info(PhoneGap)

•   web site http://phonegap.com/

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

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

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

...
Questions?




             new bamboo
Upcoming SlideShare
Loading in...5
×

Rhodes And Phone Gap

12,743

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
12,743
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
203
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×