• Stacked bar chart
• Combination chart
• Line time series chart
• Pie chart

Before we jump in, HighCharts will work fine in Android OS 3+ and iPhone/iPad.
It won’t work in Android 2.x versions (as per my knowledge and also see http://www.highcharts.com/documentation/compatibility)

You can find the source code of the demo at https://github.com/spritle/rhodes_highcharts_demo

How to use:
1) You need to include the JavaScript file (highchart.js) in the head section of the web page.
2) In the Script tag in the Head tag of the web page or in a separate .js file, add the JavaScript code to initialize the chart. Note that the id of the div where you want to place the chart is given in the renderTo option below:

var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'bar'
					},
					title: {
						text: 'Stacked bar chart',
						margin: 18
					},
					xAxis: {
						categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
					},
					subtitle: {
						text: '<a href="http://www.spritle.com/"> HighCharts in Rhomobile - Demo 1 <br/> by Spritle Software </a>',
						style: {
							color: '#FF00FF',
							fontWeight: 'bold'
						}
					},
					yAxis: {
						min: 0,
						title: {
							text: 'Total fruit consumption'
						}
					},
					legend: {
						backgroundColor: '#FFFFFF',
						reversed: true
					},
					tooltip: {
						formatter: function() {
							return ''+
								 this.series.name +': '+ this.y +'';
						}
					},
					plotOptions: {
						series: {
							stacking: 'normal'
						}
					},
				        series: [{
						name: 'John',
						data: [3, 1, 2, 3, 2]
					}, {
						name: 'Jane',
						data: [2, 2, 3, 2, 1]
					}, {
						name: 'Joe',
						data: [2, 3, 1, 2, 3]
					}]
				});

			});

 //note the "id" is very important
 <div id="container" style="height: 80%;margin: 0 auto"></div>

Thanks and please share your comments.
Sample screenshots from Android simulator:
            

Sample screenshots from iPhone simulator:
            

Sample screenshots from iPad simulator:
      

All you need to do is:
Configure Apache page names as show below

config.stat = 1
config.stat_apache = 1
config.stat_apache_logfile = awstatslog_typo3.log
config.stat_apache_pagenames = [request_uri]

Please place this in template setup.

Hope you liked it.

The sample app contains the source code that would have

• Vertical iScroll
• Horizontal iScroll
• Carousel iScroll
• iScroll inside a fixed-height Div

You can find the source code at https://github.com/spritle/rhodes_iscroll_sample

I believe the important piece of code is at https://github.com/spritle/rhodes_iscroll_sample/blob/master/app/Iscroll/custom_iscroll.erb

var myScroll;

function loaded() {
  // specify the id of the div that contains the content
  myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });

}
// set touchmove to false
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);

Here is some sample screenshots from Android:
     

Here is some sample screenshots from iPhone simulator:
        

Please add your comment if you got some questions or suggestions.

Here the steps to develop facebook app using rails, First we need to create an app in Facebook developer site as shown in the image

App will be created with unique App ID and Application Secret. You will use these values in rails app. Now on another side, we will create an sample rails app using scaffold as

rails new blog
cd blog
rails generate scaffold Post name:string title:string content:text

Now let us make some changes to integrate facebook with this rails app. Create yaml file in config/facebook.yml with the following contents

development: &defaults
  client_id: YOUR_APP_ID
  client_secret: YOUR_APP_SECRET
  scope: user_about_me,user_activities,user_birthday,user_education_history,
         user_events,user_groups,user_hometown,user_interests,user_likes
  canvas_url: http://apps.facebook.com/UserBookmarks/
test:
  <<: *defaults
production:
  <<: *defaults

Once these changes are done, run you rails app and find your system ip address. Let’s assume your rails app is running in http://192.168.1.103:3000/, use this url to integrate with facebook app. Going back to Facebook app in Developers page, enable Website and App on Facebook and give your rails app running url as shown below

Save the changes and search your App(ex: UserBookmarks) in Facebook, your facebook app running using rails will be loaded inside the canvas page as shown below

Now in the above image, you will be seeing facebook logout, share and send request links. I used Facebook Javascript sdk to communicate with facebook api. In order to use that in your app, you need to edit your erb file. I have changed my application.html.erb file as follows

First you have to load all.js based on the locale as

<script src="http://connect.facebook.net/en_US/all.js"></script>

Then, load the SDK synchronously which may be useful for debugging with your app_id as

<script language="javascript" type="text/javascript">
    FB.init({
         appId: YOUR_APP_ID,
         xfbml: true,
        cookie: true,
        oauth: true
       });

</script>

Then, create a div with id as fb-root and create facebook login button as

<div id="fb-root">
<fb:login-button autologoutlink="true" onlogin="OnRequestPermission();" scope="user_about_me,user_activities,user_birthday,user_online_presence">
</fb:login-button>
<div >

The above will create the Facebook login button and wil change to logout button once it is connected. While logging, it will request you for permission as below

You can use other api like app_request and sharing the info in post. You can send app request to your friends as shown

<%= link_to 'Send Request to your friends', '#', :id => :app_request %>

<script language="javascript" type="text/javascript">

 $('#app_request').click(function () {
    FB.ui({
      method: 'apprequests',
      message: 'Hi This is my test app developed in RoR and integrated in FB',
      data: 'Stores important links of user'
    });
return false;
  });

</script>

Similarly the sample code to post your feed in facebook is as below

<%= link_to 'Share your experience', '#', :id => :post_comments %>

$('#post_comments').click(function () {

        // calling the API ...
        var obj = {
          method: 'feed',
          link: 'http://apps.facebook.com/265171790218414/',
          picture: 'http://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/256x256/User1.png',
          name: 'User Bookmark App',
          caption: 'Using RoR and FaceBook',
          description: 'Integrated RoR app in Facebook through canvas'
        };
        FB.ui(obj);
       return false;
      });

Now when we click send request link in your app, you can see all your friends as shown

As well as Share your experience link will render a popup as

I have deployed this app in Heroku and replace the Url in FaceBook app as

Also specify the app domain in Facebook app as

I hope this blog will be useful for developing a facebook app using rails. The sample source code can be found at https://github.com/Dhepthi/User-History. Please feel free to improve and send me a pull request.

• Step 1 :
  Enable push by adding it in build.yml file under capablities.

  	capablities:
  	  - push
  

• Step 2:
  Add the registered emailid c2dm_registered@gmail.com under the android section in build.yml file

  	android
  	  - push
  	     - email : c2dm_registered@gmail.com
  

• Step 3:
  Find the registeration id or device id (device id registered to receive push Notification for this particular app)

      System.get('device_id') # => A12A13123wiu13-erughyiug3
  

  Which returns a long string, this is the registration id which we will be using to send a push notification to the actual mobile device (Warning “it wont work with Emulators).

• Step 4:
  Handle what should be done when we receive a Push Notification
  Set a handler at app/application.rb

      System.get_push_notification "/app/Push/receive_push", "params to be passed"
  

• Step 5:
  Implement the action receive_push.
  So whenever the Device App receive’s a Notification the “receive_push” method will be called.
  

The platform I have chosen is Android devices.

Note : You should be registered with Google C2DM with your gmail id in the URL(http://code.google.com/android/c2dm/signup.html) by which you can Send and Receive Push Notifications.
You will be receving an email from the Google team after registration.
Push works with Android 2.2 or greater versions.

That’s it. Everything is set so far and now the device is ready to receive Push Notifications.

Now the important part is to send the push notification messages from our server side using ruby code.
I used sepeedy_c2dm ruby client for the same.
Please see the sample code implementation below

Lets run it all together.
When you execute this Ruby code, the device should call the “receive_push” method.

Hurdles I faced while trying Push.
1) Device mismatchID
When there is a mismatch in the email id registred with C2DM in the server side and the mobile(client) side, the server will throw error saying devicemismathcid.
2) If you forget to add push under the capablities, the System.get(“device_id”) will return an empty string or nil value.
3) If the api (google android version 2.2+) is not properly installed, it may thrown an error.

Thanks to Rhomobile team for making my life easier with the Push Notifications from the Rhoconnect perspective.

The sample app “Barcode for Motorola devices” looks interesting and we started trying that out.

The other recent feature is WebKit browser for Motorola devices. We planning to try that as well using Windows Mobile Emulator.

Rhomobile team also released the rhoelements gem (gem install rhoelements — pre). We just skimmed through the source to understand it further. We will try to write a blog about it as well.

Here is the release notes for Rhodes 3.3.1 from Rhomobile team.

• Integration with RhoElements v2 to suppport Motorola devices
• Add Ruby Encoding constants
• MapView improvements on all platforms
• Android: support SDK 4.0 and NDK r7
• iPad2: fix camera issue
• Contacts: add filter parameters for iPhone and Android
• Support update RhoBundle on iPhone and Windows Mobile
• Blackberry: support multiple simulators with one JDE
• Blackberry: support JQueryMobile on Blackberry 6 and later with full browser mode

The basic steps involve on the controller side involves:

1. Initialize the http object with soap service url

         http = Net::HTTP.new('www.w3schools.com', 80)
         path = '/webservices/tempconvert.asmx' 

2. Create the SOAP Request envelope

   data = <<-EOF
   <?xml version="1.0" encoding="UTF-8"?>
   <SOAP-ENV:Envelope
   xmlns:xsd="http://www.w3.org/2001/XMLSchema"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/"
   SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"
   xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/">
   <SOAP-ENV:Body>
     <CelsiusToFahrenheit xmlns="http://tempuri.org/">
           <Celsius>#{celsius}</Celsius>
     </CelsiusToFahrenheit>
   </SOAP-ENV:Body>
   </SOAP-ENV:Envelope>
   EOF
   

3. Set Headers if required

   headers = {
           'Content-Type' => 'text/xml',
           'Host' => 'spritle.com'
         }
   

4. Make the http request and then process the result data

   resp, data = http.post(path, data, headers)
   puts data
   

5. Sample SOAP Response

   <?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><soap:Body><CelsiusToFahrenheitResponse xmlns="http://tempuri.org/"><CelsiusToFahrenheitResult>89.6</CelsiusToFahrenheitResult></CelsiusToFahrenheitResponse></soap:Body></soap:Envelope>
   

If you want you can also the process the SOAP Response string using XML parsers like rhoxml.
Example:

xmldoc = REXML::Document.new(data)
xmldoc.elements.each("soap:Envelope/soap:Body/CelsiusToFahrenheitResponse/CelsiusToFahrenheitResult") { |e| puts e.text
}

If you want to see how we can use savon as rhodes-ruby-extensions, please leave us a comment so that we can share our code on Github.

Is you have installed mysql server already and have a failed mysql gem, then remove the mysql server first [ see]

Do this to install mysql system tables:

mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp

Install mysql gem:

sudo env ARCHFLAGS="-arch x86_64" gem install mysql -- --with-mysql-dir=/usr/local/Cellar/mysql --with-mysql-lib=/usr/local/Cellar/mysql/5.5.15/lib/ --with-mysql-include=/usr/local/mysql/5.5.15/include  --with-mysql-config=/usr/local/Cellar/mysql/5.5.15/bin/mysql_config

To find out what your machine is. use uname -a

The scenario: Application – Managing Contents
(list of actions available are index,show,new,create,edit,update and destroy)
The application has three roles Admin,Publisher and member

Admin – has access to all the actions.
Publisher – has access to everything except destroy action.
member – can only access index page and show page.

There are so many plugins available outside for implementing this Authorization. I decided to do it on my own since this is a simple authorization application, but if you want to go for complex scenarios I suggest you check this link

Ok enough talk, let’s digg inside the code.

This application is completely about Authorization, I provided a simple authentication but, for providing proper authentication the plugins I suggest are auth_logic or restful_authentication(plugins) or you can write your own authentication code. Anyway let’s go with the code.

In this application I created login_controller for authentication, it’s a simple form with one textfield which will expect you to enter the user type(member,publisher or admin).

To access any action first of all the user must be a registered user that is member, Admin can access every action of the application and Publisher can do everything except deleting the content.

Let me show the code for authentication

So I created a scaffold for content application.

So once you successfully logged in the the role will be saved in a session.

So the code is self explanatory, you can move this to application controller if you want to applay this authorization than to more than one controller.

admin?.publisher? are can be used a helpers in the views to hide the links for users that are not supposed to show

for example:

<% if publisher? || admin? %>
    <td><%= link_to 'Edit', edit_content_path(content) %></td>
    <% end %>
    <% if admin?
    <td><%= link_to 'Destroy', content, :confirm => 'Are you sure?', :method => :delete %></td>
    <% end %>

So this is the simple authorization I provide for the system, if your system is complex there are plugins available for authorization you can check this blog post for that

  # If true, authentication through token does not store user in session and needs
  # to be supplied on each request. Useful if you are using the token as API token.
  config.stateless_token = true

Now, have a RESTFul method that would look like

  def get_authentication_token
    user = User.find_by_email(params[:user][:email])
    password = params[:user][:password]
    if user && user.encrypted_password == BCrypt::Engine.hash_secret(password, user.encrypted_password)
      status = true
      ## do something with user object
    else
      render_json(false, "Invalid login or password.", 401)
    end
  end