Embedding a Google Wave into Ruby on Rails
If you're anything like me, sometime between May 28th, 2009 and now you spent an hour and 20 minutes of your life with your jaw resting firmly on the floor as you watched the creators of Google Wave give a live demo at the Google I/O conference. I think Google Wave has the potential to become a revolutionary technology and I wanted to start playing around with it right away by embedding a Wave directly onto a page in a Rails app. I found a few different Ruby libraries aimed at creating robots that live inside of a Google Wave conversation, but none that allowed me to use Ruby to embed a Google Wave into my app, so I decided to roll my own.
Without further ado, I introduce a new Rails plugin rave_embed. (I loved the name of Jason Rush's Google Wave robot library "rave", so I borrowed it. Hope you don't mind, Jason).
What is rave_embed?
rave_embed is a Ruby on Rails plugin that allows you to use Ruby to embed a Google Wave onto any page in your app. It allows you to configure your Google Wave settings using a simple Ruby method and it will generate the properly formatted Google Wave Embed API javascript automatically.
rave_embed is federation agnostic, meaning it's been designed to work with any Wave provider. But since Google is currently the ONLY Wave provider, we provide sensible default settings that will work with Google.
The bottom line is: with just a couple lines of code, you can add some of the most robust, feature rich communication and collaboration tools ever invented to your app.
What is Google Wave?
[From the Google Wave API website:] Google Wave is a product that helps users communicate and collaborate on the web. A "wave" is equal parts conversation and document, where users can almost instantly communicate and work together with richly formatted text, photos, videos, maps, and more. Google Wave is also a platform with a rich set of open APIs that allow developers to embed waves in other web services and to build extensions that work inside waves.
To sign up for a Google Wave account, go to http://wave.google.com/
If you want to dig deeper into the Google Wave API, go to http://code.google.com/apis/wave/
Dependencies
Currently, this plugin relies on the jQuery javascript framework. Only one line in the entire plugin requires it, so if someone requests it, a dependency-free version of this plugin may be on the way. UPDATE: the plugin no longer requires jQuery. It uses standard javascript.
Installation
- First, install jQuery. Copy the javascript files from the jQuery website (http://docs.jquery.com/Downloading_jQuery) into your public/javascripts/ folder. UPDATE: This step is no longer required.
- From your app root directory, type:
script/plugin install git://github.com/wink/rave_embed.git
- In your layout template, add this line to the
<head>section:<%= RaveEmbed::JsInclude.new.to_html %>
Hello World!
The simplest way to embed an existing Wave into a view:
<%= RaveEmbed::WavePanel.new('my_wave_id').to_html %>
Be sure to replace 'my_wave_id' with the actual id of the Wave you want to embed.
Display Options
rave_embed works with Google Wave by default, but can be configured to work with any Wave provider (a.k.a. federation). rave_embed also allows you to customize the look and feel of the Wave to match your page. The plugin supports the following options:
- :function_name
- This is the name of the javascript function that draws the Wave on the page.
- Default: 'wavePanelInit'
- :dom_id
- This is id of the empty div container to be replaced with the Wave panel.
- Default: 'waveframe'
- :root_url
- This is the Wave server instance url. It currently points to the Google Wave servers, but could be configured to point to any Wave provider (e.g. corporate intranets).
- Default: 'https://wave.google.com/wave/'
- :bg_color
- Customize the background color with a hex code string. (e.g. '#333333', '#999', 'green')
- Default: nil (uses whatever Google chooses as it's default)
- :color
- Customize the text color with a hex code string. (e.g. '#333333', '#999', 'green')
- Default: nil (uses whatever Google chooses as it's default)
- :font
- Customize the text font with a font string. (e.g. 'Arial')
- Default: nil (uses whatever Google chooses as it's default)
- :font_size
- Customize the text font with a font size integer (in points). (e.g. 10, 12, 20)
- Default: nil (uses whatever Google chooses as it's default)
- :height
- Define the height of the container div by adding a 'height' value as an inline css style. (e.g. '800px', '75%')
- Default: nil
- :width
- Define the width of the container div by adding a 'width' value as an inline css style. (e.g. '800px', '75%')
- Default: nil
Fully configured example
Add this to a helper:
module WavePanelHelper def wave_panel(wave_id) wave_panel = RaveEmbed::WavePanel.new(wave_id, :function_name => 'wavePanelStart', :dom_id => 'wave_container', :root_url => 'https://wave.mycompany.com/', :bg_color => 'green', :color => '#FFFFFF', :font => 'Arial', :font_size => 12, :height => '600px', :width => '80%' ) wave_panel.to_html end end
And in your view:
<%= wave_panel('my_wave_id') %>
Feedback appreciated
For feedback, feature suggestions, bugs or slander, contact me at winkelspecht at gmail dot com.
13 comments
Also, I've updated the default root url to use Google's production wave servers instead of the sandbox.
I've updated this post to reflect these changes. Thanks for the feedback!
Leave a comment...
