inicio mail me! sindicaci;ón


db.networx

working with Rails 2.0, Ruby on Rails, Flex, Flash and …


Using Dojo in Rails plus Modal Dialog example

April 22, 2008 at 11:55

In the last few month I worked a lot with Dojo. At first I hated it, but now I like it very much, it’s very good to handle, takes care of the many cross browsing issues and can be easily extended to improve the user experience. Additionally it is completely accessible by screen readers or similar programs. Furthermore when you are finished developing with Dojo you can compile yourself your custom dojo file, where only the needed parts of the Dojo Toolkit are integrated and to eliminate the Ajax Calls perfomed by Dojo in the Background.

To get started:

  1. Download Dojo from the official Website
  2. Unzip and put the Folders “dijit, dojo, dojox and util” directly under the “public/javascripts” folder in one of your Rails Projects.

We are ready to integrate dojo now. Open your layout file, where you have the basic structure of your page and add dojo to the head section. Your head section should look like this:

Dojo Integration

Line 9-12 and 15 are Styles that Dojo needs. In Line 13 Dojo is integrated. “parseOnLoad” checks whether there are any Dojo Tags on the site, if true it will load all necessary files. “baseScriptUri” is important to tell dojo where all the dojo files can be found.
Your site is Dojo enabled now. Let’s add a small example to one of your pages. Go to a form Page and open it, let’s add a Dialog window that is displayed to help a person, who doesn’t know what to insert into the input fields. We need the Dialog that is being displayed, add it at the bottom of the page:

Code (html)
  1. <div dojoType="dijit.Dialog" id="dialog1" title="First Dialog">
  2.   <p>Tip You can put everything you like in that field!</p>
  3. </div>

Next let’s build a Rails Link, to link to this dialog, place it behind one of your TextFields:

Code (ruby)
  1. <%= link_to "Dialog", "#", :onclick => "dijit.byId(’dialog1′).show();" %>

When somebody clicks the link, dojo (dijit) will search for the id of the dialog box (dialog1), and then open it. But before we can do that we need to tell dojo that we want to use a dialog box, by adding “dojo.require()” at the top of the page, dojo loads the data we specify:

Code (js)
  1. <script>
  2.   dojo.require("dijit.Dialog");
  3.   dojo.require("dojo.parser");
  4. </script>

Line 2 Dojo will load all necessary files needed to show a Dialog Box, line 3 the parser scans the page for dojo tags and will prepare the dialog box we added at the bottom of the page.
Now you can try it, navigate to the view you just added the dojo dialog to and click on the link, you will see a nice dialog box.

Dojo Dialog Box

Some ressources that might interest you:

  1. The Dojo Toolkit Documentation
  2. The Dojo Campus Site full of examples!

If you have any questions just drop a comment here.

7 Comments »

  Arun.m wrote @ July 21st, 2008 at 07:09

Weldon

  Rachael wrote @ October 28th, 2008 at 18:44

Hello,

Please bear with me, as I’m a Ruby/Rails newbie and I was trying to work with this tutorial, but I was not able to get it to work; I followed the instructions, however, when I click on the ‘Dialog’ link, nothing happens… Maybe the ‘dojo.require…’ is in the wrong place, I’m not sure… Here’s my code:

@import “/javascripts/dijit/themes/soria/soria.css”;
@import “/javascripts/dojo/resources/dojo.css”;

“parseOnLoad: true, baseScriptUri:’/javascripts/dojo/’” %>

dojo.require(”dijit.Dialog”);
dojo.require(”dojo.parser”);

RJS Template Test

“dijit.byId(’dialog1′).show();” %>

Tip You can put everything you like in that field!

Thanks, in advance, for any assistance you might provide.

Kind regards,
Rachael

  Rachael wrote @ October 28th, 2008 at 18:46

Hello again, looks like my code got cut off… here it is again:

@import “/javascripts/dijit/themes/soria/soria.css”;
@import “/javascripts/dojo/resources/dojo.css”;

“parseOnLoad: true, baseScriptUri:’/javascripts/dojo/’” %>

dojo.require(”dijit.Dialog”);
dojo.require(”dojo.parser”);

RJS Template Test

“dijit.byId(’dialog1′).show();” %>

Tip You can put everything you like in that field!

  dboek wrote @ October 29th, 2008 at 22:54

Try to run the example in Firefox and use Firebug. Firebug will give some hints what might be wrong with the javascript code. Maybe dojo isn’t correctly loaded. dojo.parser checks the complete Site, will find the Dialog Box and load and render the necessary Javascript Code.

  Rachael wrote @ October 30th, 2008 at 18:38

Hello Dboek,

Got it working. Thanks for your help!

Regards,

  Eric wrote @ December 19th, 2008 at 09:32

I had a problem getting it to run at first. Turns out the problem was a cut and paste error with this line…

“dijit.byId(dialog1).show();” %>

Those backward single quotes should be regular straight apostrophes. IOW, use the thing on the quote key (”) and not the tilde key (~).

  Mave Fernandes wrote @ June 11th, 2011 at 09:09

Does anyone know how to use dojo and flex in the same application?,,is it possible?

Your comment

HTML-Tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>