This document discusses Rhodes and PhoneGap, which are frameworks for building cross-platform mobile apps using HTML, CSS, and JavaScript. Rhodes uses Ruby on the backend and generates HTML/CSS/JS for the frontend. It has an MVC architecture with the model on a web server and the view/controller on the device. PhoneGap is a thin layer that allows HTML/JS apps to access native device capabilities like contacts and geolocation through JavaScript bridges. It works by loading an HTML file into a native Android app container. Both frameworks allow writing code once that can run on multiple mobile platforms.

1. Rhodes and PhoneGap
Makoto Inoue
London Android User Group - July
new bamboo

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. 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. Topics
• Basic concept
• Rhodes
• PhoneGap
• More Info
new bamboo

5. Basic Concept
new bamboo

6. Why cross platform
development ?
new bamboo

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

8. Write once, Run anywhere
new bamboo

9. Sounds familiar .......???
new bamboo

10. It’s framework that matters
new bamboo

11. Rhodes & Phone Gap
• HTML/CSS/Javascript for UI
• With Local device capabilities
new bamboo

12. Rhodes
new bamboo

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. Architecture
http://rhomobile.com/products
new bamboo

15. Sample
Code
http://github.com/makoto/rhodes-twitter/tree/master
http://github.com/makoto/rhosync-twitter-adapter/tree/master
new bamboo

16. Model(Rhosync)
new bamboo

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. 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. Controller&ORM(Rhodes)
new bamboo

20. PhoneGap
new bamboo

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

26. Sample - index.html
new bamboo

27. More about Java & JS bridge
at “Hello, Android” Chapter 7.3
new bamboo

28. More Info
new bamboo

29. Before you jump in...
new bamboo

30. Be aware of....
• GPL (Some Javascript libraries)
• Dual License (Rhodes)
• Some app getting rejected (PhoneGap)
• Browser & Device compatibility issues
new bamboo

31. Jump in
new bamboo

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. 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. 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. Questions?
new bamboo