RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


iPhone Web Development with Ruby on Rails : Page 3

Leverage the tremendous buzz surrounding the iPhone by customizing your web site with CSS and Ruby on Rails.

iPhone Orientation in Ruby on Rails
Now that the client is aware of which way the phone is used, you'll want to be able to send that information to your server. To do so, you'll need to use a little JavaScript wizardry in addition to some Ruby rendering tricks. Normally, if you wanted to create an event timer like the previous example, you would use the periodically_update_remote function. In practice, you might not want to communicate your orientation to the server every 200 milliseconds. Remember, the Internet is a series of tubes, it's not a truck—you can't just dump stuff on it.

Since Ruby is built around the Model-View-Controller method of programming, you'll have to update both the View code and the Controller code to properly communicate changes to your Ruby server. Start with the View code and update your JavaScript timer to resemble the following code and save it as _"foriphoneonly.rhtml". The underscore tags the file as a partial, which means that it's a piece of browser-readable code that isn't a View, but can be rendered by any View which accesses it with the render :partial command.

currentWidth = 0;
window.setInterval( 'updateLayout()', 200 );
function updateLayout() {
 if (window.innerWidth != currentWidth) {
  currentWidth = window.innerWidth;
	<%= remote_function :controller => 'ifone_controller',
						:update => 'orientation_div',
		 				:url => {:action => :check_position }, 	
						:with => 'String(window.innerWidth)'
If you use the user agent detecting code described earlier in one of your Views, this event timer will only be rendered when needed, allowing you to focus on your content without cluttering up the View.

What's been replaced here is the reliance on the browser to parse CSS and figure out which View to render. Instead, when the JavaScript event timer detects a change in the screen width, it calls the check_position function in your Controller. Now, add a bit of logic to it to parse the string returned by the client:

def check_position
  windowwidth = request.raw_post.chop.to_i
  if windowwidth > 330
   render_text "I seem to be landscape #{windowwidth}"  
   render_text "I seem to be portrait #{windowwidth}"
In the above example, request.raw_post is the object that contains the raw data sent back from the page to the server. It has two problems: it's sent as a string and it has an extra character on the end. You can easily append methods to the end of an object to convert and manipulate data in Ruby. Here, you use "chop" to lop off the extra character and to_i to convert the value to an integer.

Armed with a valid integer to represent the current width of the screen, it becomes trivial to perform more complicated server-side logic without filling the tubes.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date