Handling Cookies and DHTML Effects with Ruby on Rails - 15.15 Adding DHTML Effects with script.aculo.us
(Page 4 of 4 )
Problem
You want to add fancy effects such as fades to your application, without writing any JavaScript.
Solution
Every Rails application comes bundled with some JavaScript libraries that allow you to create Ajax and DHTML effects. You don't even have to write JavaScript to enable DHTML in your Rails web site.
First edit your main layout template (see Recipe 15.3) to call javascript_include_tag within your <HEAD> tag:
<!-- app/views/layouts/application.rhtml -->
<html>
<head>
<title>My Web App</title>
<%= javascript_include_tag "prototype", "effects" %>
</head>
<body>
<%= @content_for_layout %>
</body>
</html>
Now within your views you can call the visual_effect method to accomplish the DHTML tricks found in the script.aculo.us library.
Here's an example of the "highlight" effect:
<p id="important">Here is some important text, it will be highlighted
when the page loads.</p>
<script type="text/javascript">
<%= visual_effect(:highlight, "important", :duration => 1.5) %>
</script>
Here's an example of the "fade" effect:
<p id="deleted">Here is some old text, it will fade away when the page
loads.</p>
<script type="text/javascript">
<%= visual_effect(:fade, "deleted", :duration => 1.0) %>
</script>
Discussion
The sample code snippets above are triggered when the page loads, because they're enclosed in <SCRIPT> tags. In a real application, you'll probably display text effects in response to user actions: deleted items might fade away, or the selection of one item might highlight related items. Here's an image that gets squished when you click the link below it:
<img id="to-squish" src="bug.jpg">
<%=link_to_function("Squish the bug!", visual_effect(:squish, "to-squish"))%>
The JavaScript code generated by the visual_effect method looks a lot like the arguments you passed into the method. For instance, this piece of a Rails view:
<script type="text/javascript">
<%= visual_effect(:fade, 'deleted-text', :duration => 1.0) %>
</script>
Generates this JavaScript:
<script type="text/javascript">
new Effect.Fade("deleted-text", {duration:1.0});
</script>
This similarity means that documentation for the script.aculo.us library is almost directly applicable to visual_effect. It also means that if you feel more comfortable writing straight JavaScript, your code will still be fairly understandable to someone who knows visual_effect.
The following table lists many of the effects available in Rails 1.0.
| JavaScript initialization | Rails initialization |
| new Effect.Highlight | visual_effect(:highlight) |
| new Effect.Appear | visual_effect(:appear) |
| new Effect.Fade | visual_effect(:fade) |
| new Effect.Puff | visual_effect(:puff) |
| new Effect.BlindDown | visual_effect(:blind_down) |
| new Effect.BlindUp | visual_effect(:blind_up) |
| new Effect.SwitchOff | visual_effect(:switch_off) |
| new Effect.SlideDown | visual_effect(:slide_down) |
| new Effect.SlideUp | visual_effect(:slide_up) |
| new Effect.DropOut | visual_effect(:drop_out) |
| new Effect.Shake | visual_effect(:shake) |
| new Effect.Pulsate | visual_effect(:pulsate) |
| JavaScript initialization | Rails initialization |
| new Effect.Squish | visual_effect(:squish) |
| new Effect.Fold | visual_effect(:fold) |
| new Effect.Grow | visual_effect(:grow) |
| new Effect.Shrink | visual_effect(:shrink) |
| new Effect.ScrollTo | visual_effect(:scroll_to) |
See Also
- The script.aculo.us demo (http://wiki.script.aculo.us/scriptaculous/show/ CombinationEffectsDemo)
- Recipe 15.3, "Creating a Layout for Your Header and Footer," has more on layout templates
- Recipe 15.17, "Creating an Ajax Form"
Please check back next week for the continuation of this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from chapter 15 of the Ruby Cookbook, written by Lucas Carlson and Leonard Richardson (O'Reilly, 2006; ISBN: 0596523696). Check it out today at your favorite bookstore. Buy this book now.
|
|
