Sonjaya Tandon

HOW-TO: Get Rails and the Yahoo User Interface (YUI) to talk — Part 1

July 8th, 2006

In the course of working on our project, we have spent the last few weeks working with both the Yahoo User Intefact library (YUI) and Ruby on Rails. Both frameworks are useful tools, but neither was written with the other in mind and integrating the two has been … well let’s just say a fun challenge . At this point in time, what I present is by no means a “best practice” — it is simply a way to do the least to get the two working. But as there is little out there on integrating these two, I thought it would be useful to write up what we have learned so far and (hopefully) get some comments, feedback, and ideas on what the “best practices” should be. As we learn more on our project, I will post additional articles in this series.

Today, we will start with a simple example that integrates the popup YUI dialogs with a Rails back end. When all is said and done, we will have a simple application that has two options: “Add Something” and “Edit Something”:

When you “Add Something” a simple empty dialog will appear that posts to /example/dialog:

When you “Edit Something” a dialog will appear populated with data that posts to /example/dialog :

Download the YUI

Before you start I recommend bookmarking Dustin Diaz’s blog. He works at Yahoo and has a ton of great articles and podcasts related to the YUI and javascript.

Start with getting yourself familiar with the Yahoo User Interface Site. That is where you can dowload the library and see lots of useful examples on the framework.

Download and extract the yui. The directory structure should look something like what you see here. Note how the javascript files are in yui/build/[module] and the assets for that module are in yui/build/[module]/assets.

This will be the first thing we deal with because this directory structure does not work with javascript_include_tag and stylesheet_link_tag template helpers.

Create a Rails Project

Fire up your Ruby on Rails development environment (I use the RadRails plugin w/eclipse — if you don’t have that set up yet, check out the how-to section, there are tutorials for installing eclipse and adding the RadRails plugin).

Create a new Rails project called “YuiSample”. Add a new controller called “example”. As the figure to the left shows, you will be editing three files.

The YUI javascript that builds and opens the dialog will be in applayout.rhtml.

The dialog div definition will be defined in dialog.rhtml.

The rails code that processes the dialog will be in example_controller.rb.

Move YUI files into your project

To support javascript_include_tag, all javascript files need to be under public/javascript. I created a yui sub-directory there (public/javascript/yui) and moved the yui javascript I needed into that directory.

You can find connection.js in your yui download directory under yui/build/connection.
Container.js and container_core.js are in yui/build/container.
Dom.js is in yui/build/dom. Dragdrop.js is in yui/build/dragdrop.
Event.js is in yui/build/event.
Yahoo.js is in yui/build/yahoo.

To support stylesheet_link_tag, all stylesheets need to be under public/stylesheets. I create a yui sub-directory (public/stylesheets/yui) and moved the one stylesheet I needed there.

You can find container.css in yui/build/container/assets. One thing I am style puzzled about though is that I didn’t move the images over, but things seemed to still work fine. Clearly I am missing a step regarding images in my procedure. If you figure out that missing step please post a comment so I can get the procedure updated.

Write the dialog builder code

Now that we have all the files we need in our project, the first thing we will do is write the code that builds and invokes the dialogs.
First, lets do this simple job of creating a vanilla stylesheet for the application.

appstylesheet:

/* Global styles */

/* START:notice */
#notice {
  border: 1px solid red;
  padding: 1em;
  margin-bottom: 2em;
  margin-right: 10px;
  background-color: #6c90a9;
  font: bold 9pt Verdana, Arial, sans-serif;
}
/* END:notice */

#main {
  margin-left: 10px;
  padding-top: 4ex;
  clear:both;
}

Now lets create the application layout. This is also fairly boilerplate with a few minor exceptions. First, we include the javascript files and stylesheets we will use. Then we write three javascript routines:

initDialog: This routine uses the yui to build the dialog. It is invoked during the page load.
addThing: This routine is called when we want to use the dialog to add an object. It blanks out the form fields and then shows the dialog.
editThing: This routine is called when we want to edit and enitity. It sets the forms fields to the value of the object is editing and then shows the dialog. NOTE: both this routine and addThing are placeholders that you would modify to match to the actual object you are editing.

applayout.rhtml:

<html>
<head>
  <title>YUI Tester: <%= controller.action_name %></title>
  <%= javascript_include_tag "yui/yahoo",
                             "yui/dom",
                             "yui/event",
                             "yui/connection",
                             "yui/dragdrop",
                             "yui/container"%>
    <%= stylesheet_link_tag  'yui/container'%>

    <%= stylesheet_link_tag 'appstylesheet'%>

	    <script language="javascript">

		YAHOO.namespace('example.container');

		function initDialog() {
			var handleCancel = function() {
				this.cancel();
			}
			var handleSubmit = function() {
				this.submit();
  			    window.location.reload( false );
			}

			YAHOO.example.container.myDialog = new YAHOO.widget.Dialog("myDialog", { modal:true, visible:false, width:"500px", fixedcenter:true, constraintoviewport:true, draggable:true });
			var listeners = new YAHOO.util.KeyListener(document, { keys : 27 }, {fn:handleCancel,scope:YAHOO.example.container.myDialog,correctScope:true} );
			YAHOO.example.container.myDialog.cfg.queueProperty("keylisteners", listeners);
			YAHOO.example.container.myDialog.cfg.queueProperty("buttons", [{ text:"Save", handler:handleSubmit, isDefault:true },{ text:"Cancel", handler:handleCancel } ]);
			YAHOO.example.container.myDialog.render();

		}

		function editThing(thing_id, thing_name) {
		   document.myDialogForm.id.value = thing_id;
		   document.myDialogForm.thing_name.value = thing_name;
 		   YAHOO.example.container.myDialog.show();
		}

		function addThing() {
		   document.myDialogForm.id.value = "";
		   document.myDialogForm.thing_name.value = "";
 		   YAHOO.example.container.myDialog.show();
		}

		YAHOO.util.Event.addListener(window, "load", initDialog);

	</script>
</head>
<body>
    <div id="main">
        <% if flash[:notice] -%>
            <div id="notice"><%= flash[:notice] %></div>
        <% end -%>
        <%= @content_for_layout %>
    </div>
</body>
</html>

Also take note of the “window.location.reload( false );” call in handleSubmit. This is not a line you really want in there. However, I put it in as a workaround to a bug I was encountering. Sometimes, when I submit the dialog, even though the controller gets called and the view template would be generated, the browser would not refresh. Again, this is likely do to the fact that I am missing something in this how-to — if you figure out what it is, please comment so I can update this as that reload makes me nautious every time I see it

Write the dialog

This one is pretty simple. First create a couple of links to simulate adding and editing an object. Next, create a div tag for the dialog. The “hd” and “bd” styles are critical to the functioning of the builder routines. You can find the styles in container.css. Note also that you don’t define the save and cancel buttons. Rather, those are added in with when you call the initDialog routine.

dialog.rhtml:

Hello, World <br />
Add Something
Edit Something
<div id="myDialog">
    <div class="hd">Look, ma, a dialog</div>
    <div class="bd">
        <form name="myDialogForm" method="POST" action="/example/dialog">
            <input type="hidden" name="id"/>
            <label for="thing_name">Thing Name:</label><input id="thing_name" name="thing_name" size="40" type="text" />
        </form>
    </div>
</div>

Write the dialog processing logic

And finally, we have the simplest yet — it’s Rails after all . Here, just accept the post of the dialog and update the flash notice with the “thing_name” posted. That way the browser will update the notice section with the name you entered in the dialog.

example_controller.rb

class ExampleController < ApplicationController
  layout "applayout"
  require 'pp'
  def dialog
    if request.post?
      pp params
      flash[:notice] = params[:thing_name]
    end
  end
end

Next Steps

As you can see, the interfacing we have here is pretty basic and not leveraging much of Rails. I wanted to start with something simple just so we could get a sense of the working parts. The next step is to start creating some view helper templates and figuring out best practice ways to leverage existing templates such as the various form tags. Again, please comment on your ideas or what’s worked for you.

Finally, this is a series, I will have articles on additional yui types like the treebrowser — and our evolving Rails integration as we start the work on helper modules.

Entry Filed under: How-to, Ruby, YUI

Trackbacks

Shoob

23 Comments Add your own

1. HowToWorkWithTheYUI in Ru&hellip | July 8th, 2006 at 4:11 pm

[…] HOW-TO: Integrate a YUI dialog with Rails […]
2. Sonjaya Tandon » HO&hellip | July 16th, 2006 at 7:08 pm

[…] In this episode of “Getting the Yahoo Interface Library to play with Rails” we will focus on trees. If you haven’t gone through it already, I suggest you at least give the first article in the series a glance. That article will give you a quick overview of how to dowload the YUI and configure a Rails project to make use of it. In this article, we will build a simple tree and, in the process, build a helper class that you can use in your projects to simplify the view code. Another useful reference is Yahoo’s reference page for the tree API. […]
3. RoR Wiki �� Wiki - HowT&hellip | July 20th, 2006 at 1:53 am

[…] HOW-TO: YUI �� Rails �� […]
4. Yahoo! User Interface - C&hellip | July 24th, 2006 at 12:49 am

[…] Sonjaya Tandon …tales of a software curmudgeon ou comment faire du vrai web 2.0, RoR + YUI … Cette liste n’est définitivement pas fermée, je l’éditerai au fil de mes recherches/trouvailles […]
5. RailsでYahoo! User Inter&hellip | August 4th, 2006 at 5:26 pm

[…] 参考： HOW-TO: Get Rails and the Yahoo User Interface (YUI) to talk — Part 1 […]
6. はてなブックマー�&hellip | August 16th, 2006 at 3:52 am

[…] HOW-TO: Get Rails and the Yahoo User Interface (YUI) to talk — Part 1 […]
7. HowToWorkWithTheYUI (Vers&hellip | August 20th, 2006 at 9:38 am

[…] HOW-TO: Integrate a YUI dialog with Rails […]
8. | November 5th, 2006 at 4:54 pm

HOW-TO: Get Rails and the Yahoo User Interface (YUI) to talk…

Sonjaya Tandon walks us through a simple example that integrates the popup YUI dialogs with a Rails back end….
9. Pablotron: YUI and YUI-Ex&hellip | December 13th, 2006 at 8:30 am

[…] Even though Rails is really partial to Prototype and Script.alculo.us, I decided to spent some time playing with some of the competitors. I like the simplicity of moo.fx, but my personal favorite at the moment is Yahoo User Interface library (YUI). It’s BSD-licensed, documented out the wazoo, and it’s being actively developed and supported by Yahoo. Toss in Jack Slocum’s yui-ext, and you have an awesome dynamic grid widget, layout manager, asynchronous animation primitives, and a great JavaScript-only dialog widget that’ll impress anyone (check out the slick per-block commenting in the Django Book, for a rough idea of what you can do with yui-ext). Not too shabby. With a little effort, even Rails can be beaten into YUI submission). […]
10. 한RSS&hellip | December 28th, 2006 at 4:40 pm

[…] Even though Rails is really partial to Prototype and Script.alculo.us, I decided to spent some time playing with some of the competitors. I like the simplicity of moo.fx, but my personal favorite at the moment is Yahoo User Interface library (YUI). It’s BSD-licensed, documented out the wazoo, and it’s being actively developed and supported by Yahoo. Toss in Jack Slocum’s yui-ext, and you have an awesome dynamic grid widget, layout manager, asynchronous animation primitives, and a great JavaScript-only dialog widget that’ll impress anyone (check out the slick per-block commenting in the Django Book, for a rough idea of what you can do with yui-ext). Not too shabby. With a little effort, even Rails can be beaten into YUI submission). […]
11. Digg / Technology / Upcom&hellip | January 15th, 2007 at 3:45 pm

[…] digg it http://sonjayatandon.com/07-2006/how-to-get-rails-and-the-yahoo-user-interf […]
12. Digg / News / Upcoming&hellip | January 15th, 2007 at 3:53 pm

[…] digg it http://sonjayatandon.com/07-2006/how-to-get-rails-and-the-yahoo-user-interf […]
13. Yahoo! User Interface Lib&hellip | January 15th, 2007 at 6:16 pm

[…] http://developer.yahoo.com/yui/ http://sonjayatandon.com/07-2006/how-to-get-rails-and-the-yahoo-user-interface-yui-to-talk-part-1/ […]
14. Oddly Zen&hellip | January 18th, 2007 at 3:25 am

Sonjaya Tandon » HOW-TO: Get Rails and the Yahoo User Interface (YUI) to talk — Part 1
15. weelink | January 30th, 2007 at 2:39 pm

One thing I am style puzzled about though is that I didn’t move the images over, but things seemed to still work fine.

You didn’t miss anything. The urls in the stylesheet don’t link to the local files but to remote ones:

.panel .close.nonsecure { background-image:url(http://us.i1.yimg.com/us.yimg.com/i/nt/ic/ut/alt3/close12_1.gif); }
.panel .close.secure { background-image:url(https://a248.e.akamai.net/sec.yimg.com/i/nt/ic/ut/alt3/close12_1.gif); }
16. Scott's Place&hellip | April 26th, 2007 at 12:19 am

Sonjaya Tandon - HOW-TO: Get Rails and the Yahoo User Interface (YUI) to talk 14 Part 1
17. benr75&hellip | May 2nd, 2007 at 2:45 am

del.icio.us/exar75 Sonjaya Tandon » HOW-TO: Get Rails and the Yahoo User Interface (YUI) to talk — Part 1 . Macenstein » Macenstein Archive » Put a RAID 0 in your MacBook, PowerBook, or MacBook Pro
18. attilio.dona | June 11th, 2007 at 1:28 am

Sonjaya,

the call “window.location.reload( false );” in handleSubmit is wrong and apparently seem to work correctly.

The problem arises because the Dialog widget for defaults invoke the Connection Manager in async mode (using xmlHttpRequest). In your example instead you have to use a simple POST in your dialog (or alternativlely you have to register the callback for the response).

To do this use the option postmethod:”form” in the constructor:

YAHOO.example.container.myDialog = new YAHOO.widget.Dialog(”myDialog”, { modal:true, visible:false, width:”500px”, fixedcenter:true, constraintoviewport:true, draggable:true, postmethod:”form” });

In my setup the missing image throws an exception in the web server log:
the image close12_1.gif must be copied under stylesheets/yui.

regards,
Attilio
19. links for 2007-07-04 -- A&hellip | July 4th, 2007 at 4:31 pm

[…] talk â�� Part 1 How to integrate yui and rails. (tags: yui rails programming ruby javascript) Last Modified : July 5th, 2007 Filed under : Del.icio.us Navigate : Previous post / Share: […]
20. Discover From Your Favori&hellip | September 2nd, 2007 at 9:27 am

[…] […]
21. zerosum dirt(nap) - YUI D&hellip | December 15th, 2007 at 6:28 pm

[…] Let’s start with something simple. Oh yeah, I should mention that Sonjaya Tandon covered this same sorta stuff and what I’m doing is based on what I found there, but I’m going to do it a little bit differently, and demonstrate how you can leverage RJS. Here we go: […]
22. StumbleUpon - Your page i&hellip | January 16th, 2008 at 8:43 pm

[…] Your page is on StumbleUpon […]
23. cpatil | January 19th, 2008 at 3:16 pm

Hi, I have coded up a library to allow Rails RJS to work with YUI. The library allows seamless usage of link_to_remote and remote_form_for helpers as well as rjs inline rendering with YUI libraries.
More information here . And a small demo as well.