Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Server Technologies - Ruby on Rails

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Script.aculo.us

Visual Effects: Rails includes the Script.aculo.us JavaScript library, which allows you to easily create vi-sual effects similar to those in Adobe Flash and Microsoft Silverlight.

Script.aculo.us

 

Visual Effects

Rails includes the Script.aculo.us JavaScript library, which allows you to easily create vi-sual effects similar to those in Adobe Flash and Microsoft Silverlight. The library provides many pre-defined effects, as well as the ability to create your own effects from the pre-defined ones. The following example demonstrates many of the effects provided by this library. Figure 24.46 demonstrates the Fade effect. When the user clicks the link above the


image, the effect named in the link will be applied to the image. Once you start the application with Mongrel, open http://localhost:3000/scriptaculous_demo/ in your web browser.

 

To create this application, first type rails scriptaculous_demo in the Ruby console. Next, create the controller by executing ruby script/generate controller ScriptaculousDemo In app/controllers/scriptaculous_demo_controller.rb (Fig. 24.47), add the index method. This method sets to 0 the currentEffect instance variable, which keeps track of which effect the application is currently playing. Next, add the PlayEffect method (lines 4–6), which will be called when the user clicks to show the next effect.

 

Now, create application.rhtml (Fig. 24.48) in  app/view/layouts. This acts as the default layout. Content from render :partial commands replaces line 13.

 

Next, create index.rhtml (Fig. 24.49) in pp/views/scriptaculous_demo. This is the application’s default view. The "link" div (lines 3–8) contains a link_to_remote (lines 4–7) that initially is labeled 'Shrink', calls playEffect with a effect_index parameter of 0, updates itself and plays an effect on the before event. The effect is created using the visual_effect method (lines 6–7). The parameters of this method call are the effect name, the name of the element the effect should apply to, the duration and the loca-

 

 

1    <!-- Fig. 24.47: app/views/scriptaculous_demo/index.rhtml -->

 

2    <!-- Default view for Script.aculo.us demo. -->

 

3    <div id = "link">

 

4          <%= link_to_remote 'Shrink', :url => {:action => 'playEffect',

 

5                 :effect_index => 0}, :update => "link",

 

6                 :before => visual_effect(

 

7                       :Shrink, 'image', :duration => 1.0, :queue => 'end') %>

 

8    </div>

9

10   <div id = "image" style = "width: 244px; height: 320px;">

 

11         <%= image_tag "jhtp7medium.jpg" %>

 

12   </div>

 

Fig. 24.47 | Default view for Script.aculo.us demo.

 

 

1    # Fig. 24.48: app/controllers/scriptaculous_demo_controller.rb

 

2    # Script.aculo.us Demo controller

 

3    class ScriptaculousDemoController < ApplicationController

 

4        def index

 

5               @currentEffect = 0

 

6        end

 

7        def playEffect

 

8               @currentEffect = params[ :effect_index ]

 

9               render :partial => "link"

 

10       end # method playEffect

 

11   end # class ScriptaculousDemoController


 

Fig. 24.48 | Script.aculo.us Demo controller.

1    <?xml version = "1.0" encoding = "utf-8"?>

 

2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

3          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4              

5    <!-- Fig. 24.49: app/views/layouts/application.rhtml -->

 

6    <!-- Default layout of Script.aculo.us demo. -->

 

7    <html xmlns = "http://www.w3.org/1999/xhtml">

 

8          <head>

 

9                 <title>Script.aculo.us Effects Demo</title>

 

10                <%= javascript_include_tag :defaults %>

 

11         </head>

 

12         <body>

 

13                <%= yield %>

 

14         </body>

 

15   </html>

 

Fig. 24.49 | Default layout of Script.aculo.us demo.

 

tion in the queue. The queue is set to end so that any new effects will be played after all the others are complete. The image in line 11 must be in the public/images directory.

 

The playEffect method (lines 7–10, Fig. 24.47) sets the currentEffect instance variable to the effect_index parameter, then renders the link view in the link div. In app/views/scriptaculous_demo/_link.rhtml  (Fig. 24.50), the  application  demon strates several Script.aculo.us effects by using nested if statements to check the current-Effect, apply it, then increment currentEffect after each effect with the effect_index parameter. The link text corresponds to the name of the effect the link activates.

 

 

1    <!-- Fig. 24.50: app/views/scriptaculous_demo/_link.rhtml -->

 

2    <!-- link partial view for Script.aculo.us demo -->

 

3    <!-- Grow effect -->

 

4    <% if @currentEffect == '0' %>

 

5          <%= link_to_remote 'Grow', :url => { :action => 'playEffect',

 

6          :effect_index => 1 }, :update => "link",

 

7                 :before => ( visual_effect(

 

8                       :Grow, 'image', :duration => 1.0, :queue => 'end' ) ) %>

9              

10   <!-- Fade effect -->

 

11   <% elsif @currentEffect == '1' %>

 

12         <%= link_to_remote 'Fade', :url => { :action => 'playEffect',

 

13                :effect_index => 2 }, :update => "link",

 

14                :before => ( visual_effect(

 

15                      :Fade, 'image', :duration => 1.0, :queue => 'end' ) ) %>

16          

17   <!-- Appear effect -->

 

18   <% elsif @currentEffect == '2' %>

 

19         <%= link_to_remote 'Appear', :url => {:action => 'playEffect',

 

20                :effect_index => 3 }, :update => "link",

 

21                :before => ( visual_effect(

22                :Appear, 'image', :duration => 1.0, :queue => 'end' ) ) %>

24  <!-- BlindUp effect -->

 

25  <% elsif @currentEffect == '3' %>

 

26         <%= link_to_remote 'BlindUp', :url => { :action => 'playEffect',

 

27               :effect_index => 4 }, :update => "link",

 

28               :before => ( visual_effect(

 

29                      :BlindUp, 'image', :duration => 1.0, :queue => 'end' ) ) %>

30          

31  <!-- BlindDown effect -->

 

32  <% elsif @currentEffect == '4' %>

 

33         <%= link_to_remote 'BlindDown', :url => { :action => 'playEffect',

 

34               :effect_index => 5 }, :update => "link",

 

35               :before => ( visual_effect(

 

36                       :BlindDown, 'image', :duration => 1.0, :queue => 'end' ) ) %>

37          

38  <!-- Puff effect -->

 

39  <% elsif @currentEffect == '5' %>

 

40         <%= link_to_remote 'Puff', :url => { :action => 'playEffect',

 

41               :effect_index => 6 }, :update => "link",

 

42               :before => ( visual_effect(

 

43                      :Puff, 'image', :duration => 1.0, :queue => 'end' ) ) %>

44          

45  <!-- SwitchOff effect -->

 

46  <% elsif @currentEffect == '6' %>

 

47         <%= link_to_remote 'SwitchOff', :url => { :action => 'playEffect',

 

48               :effect_index => 7 }, :update => "link",

 

49               :before => ( visual_effect(

 

50                       :SwitchOff, 'image', :duration => 1.0, :queue => 'end' ) ) %>

51          

52  <!-- SlideUp effect -->

 

53  <% elsif @currentEffect == '7' %>

 

54         <%= link_to_remote 'SlideUp', :url => { :action => 'playEffect',

 

55               :effect_index => 8 }, :update => "link",

 

56               :before => ( visual_effect(

 

57                      :SlideUp, 'image', :duration => 1.0, :queue => 'end' ) ) %>

58          

59  <!-- SlideDown effect -->

 

60  <% elsif @currentEffect == '8' %>

 

61         <%= link_to_remote 'SlideDown', :url => { :action => 'playEffect',

 

62               :effect_index => 9 }, :update => "link",

 

63               :before => ( visual_effect(

 

64                       :SlideDown, 'image', :duration => 1.0, :queue => 'end' ) ) %>

65          

66  <!-- Shake effect -->

 

67  <% elsif @currentEffect == '9' %>

 

68         <%= link_to_remote 'Shake', :url => { :action => 'playEffect',

 

69               :effect_index => 10 }, :update => "link",

 

70               :before => ( visual_effect(

 

71                      :Shake, 'image', :duration => 1.0, :queue => 'end' ) ) %>

72          

73  <!-- Pulsate effect -->

 

74  <% elsif @currentEffect == '10' %>

 

<%= link_to_remote 'Pulsate', :url => { :action => 'playEffect',

76               :effect_index => 11 }, :update => "link",

 

77               :before => ( visual_effect(

 

78                      :Pulsate, 'image', :duration => 1.0, :queue => 'end' ) ) %>

79          

80   <!-- Squish effect -->

 

81   <% elsif @currentEffect == '11' %>

 

82        <%= link_to_remote 'Squish', :url => { :action => 'playEffect',

 

83               :effect_index => 12 }, :update => "link",

 

84               :before => ( visual_effect(

 

85                      :Squish, 'image', :duration => 1.0, :queue => 'end' ) ) %>

86          

87   <!-- Grow effect -->

 

88   <% elsif @currentEffect == '12' %>

 

89        <%= link_to_remote 'Grow', :url => { :action => 'playEffect',

 

90               :effect_index => 13 }, :update => "link",

 

91               :before => ( visual_effect(

 

92                      :Grow, 'image', :duration => 1.0, :queue => 'end' ) ) %>

93          

94   <!-- Fold effect -->

 

95   <% elsif @currentEffect == '13' %>

 

96        <%= link_to_remote 'Fold', :url => { :action => 'playEffect',

 

97               :effect_index => 14 }, :update => "link",

 

98               :before => ( visual_effect(

 

99                      :Fold, 'image', :duration => 1.0, :queue => 'end' ) ) %>

100

101  <!-- Grow effect -->

102     <% elsif @currentEffect == '14' %>

 

103     <%= link_to_remote 'Grow', :url => { :action => 'playEffect',

 

104            :effect_index => 15 }, :update => "link",

 

105            :before => ( visual_effect(

 

106                   :Grow, 'image', :duration => 1.0, :queue => 'end' ) ) %>

107      

108     <!-- DropOut effect -->

109     <% elsif @currentEffect == '15' %>

 

110     <%= link_to_remote 'DropOut', :url => { :action => 'playEffect',

 

111            :effect_index => 16 }, :update => "link",

 

112            :before => ( visual_effect(

 

113                   :DropOut, 'image', :duration => 1.0, :queue => 'end' ) ) %>

114      

115     <!-- Grow effect -->

116     <% elsif @currentEffect == '16' %>

 

117     <%= link_to_remote 'Grow', :url => { :action => 'playEffect',

 

118            :effect_index => 17 }, :update => "link",

 

119            :before => ( visual_effect(

 

120                   :Grow, 'image', :duration => 1.0, :queue => 'end' ) ) %>

121      

122     <!-- Shrink effect -->

123     <% elsif @currentEffect == '17' %>

 

124     <%= link_to_remote 'Shrink', :url => { :action => 'playEffect',

 

125            :effect_index => 0 }, :update => "link",

 

126            :before => ( visual_effect(

 

127                   :Shrink, 'image', :duration => 1.0, :queue => 'end' ) ) %>

128     <% end %>


 

Fig. 24.50 | link partial view for Script.aculo.us demo.

 

 

Other Script.aculo.us Features

 

The Script.aculo.us library also brings other features to Rails. It provides drag-and-drop capability through the draggable_element and drop_receiving_element methods. A live example of this can be found at demo.script.aculo.us/shop.

 

Script.aculo.us also provides the sortable_element method which allows you to describe a list that allows the user to drag and drop list items to reorder them. A live example of this can be found at demo.script.aculo.us/ajax/sortable_elements. Another intereresting capability is the text_field_with_auto_complete method, which enables server-side auto completion of a text field. A live example of this can be found at demo.script.aculo.us/ajax/autocompleter.

 

Flickr Photo Viewer with Effects

 

The Script.aculo.us library’s effects are useful for adding a desktop-like feel to a web page. In the following example (Fig. 24.51), the user can search for photos with specific tags and can specify the number of images for each search to return. The application uses the Script.aculo.us sliding effect to show when the thumbnails for the specified tags have fin-ished loading from Flickr. The application also uses the grow effect when the user clicks an image to display the full-size version of the image.

 

After creating the FlickrPhotoViewer application, you must install the Flickr library for Ruby. This library can be installed by executing gem install flickr in the Ruby con-sole. More information about this library is available at redgreenblu.com/flickr/. Once


installed, you must configure the library to use your own Flickr API key. You can sign up for a free API key at  www.flickr.com/services/api/misc.api_keys.html. Once you receive your API key, you must replace the key in flickr.rb with your own. If you are using Instant Rails, flickr.rb will be located in the Instant Rails directory, in the folder If you are running Mac OS X, or otherwise have installed Ruby system-wide, this file will be harder to find. If you cannot locate it with a normal search in Mac OS X, open Terminal and use find / -name flickr.rb to locate it. The API key to replace should be located at line 57, in the initialize method. Finally, you must tell the application to include the Flickr library by adding require 'flickr' to the end of config/environment.rb. Create the controller with ruby script/generate controller flickr. In app/views/flickr/index.rhtml (Fig. 24.52), we create the application’s main view. Be sure to copy the flickrPhotoViewer.css file from this chapter’s folder into the public/ stylesheets/ directory. Lines 15–31 contain a form_remote_tag element that imple-ments the application’s photo tag search functionality. Line 17 creates a BlindDown visual_effect for the thumbs div (line 32) when the search action is complete. Lines 18–19 create the corresponding BlindUp visual_effect for the loading div (lines 28–29). Lines 20–21 hide the loading div on failure and success events, respectively. The fullsizeImage div (line 33) will be populated later with an img element.

 

1    <?xml version = "1.0" encoding = "utf-8"?>

 

2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

3          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4              

5    <!-- Fig. 24.52: app/view/flickr/index.rhtml -->

 

6    <!-- Main view for Flickr Photo Viewer. -->

 

7    <html xmlns = "http://www.w3.org/1999/xhtml">

 

8          <head>

 

9                 <title>Flickr Photo Viewer</title>

 

10                <%= javascript_include_tag :defaults %>

 

11                <%= stylesheet_link_tag 'flickrPhotoViewer' %>

 

12         </head>

 

13         <body>

 

14                <!-- Form to search for tags -->

 

15                <%= form_remote_tag :url => { :action => 'search' },

 

16                      :update => 'thumbs',

 

17                      :complete => visual_effect( :BlindDown, 'thumbs' ),

 

18                      :before => { visual_effect( :BlindUp, 'thumbs' ),

19                            %( Element.show( 'loading' ) ) },

 

20                      :failure => %( Element.hide( 'loading' ) ),

21                      :success => %( Element.hide( 'loading' ) ) %>

22        <div id = "search">

23        Tags:

24        <%= text_field_tag "tags" %>

25        #:

26        <%= text_field_tag "numImages", "8", :size => "3" %>

27        <%= submit_tag "Search" %>

28        <div id = "loading"

29        style = "display: none">Loading...</div>

30        </div>

31                <%= end_form_tag %>

 

32                <div id = "thumbs"></div>

 

33                <div id = "fullsizeImage"></div>

 

34         </body>

 

35   </html>

 

Fig. 24.52 | Main view for Flickr Photo Viewer.

 

The controller located at app/controllers/flickr_controller.rb (Fig. 24.53) handles the search action called by the form in line 15 of Fig. 24.52 and the fullsize-Image action called by the link_to_remote in lines 3–9 of Fig. 24.54. In the search method, line 6 creates the flickr object using the Flickr class we installed previously. Lines 7–9 use the flickr object to populate thumbs with photos, supplying as arguments the tags and numImages values from the corresponding text_field_tags in lines 24 and 26 of Fig. 24.52. TheullsizeImage method (lines 13–15) takes the imageURL param-eter’s value and uses it to set the currentURL variable.

 

The thumbs view (Fig. 24.54) defines each thumbnail as a link_to_remote with an image_tag as the link’s contents. The source of the image is retrieved from the thumbs col-lection that was passed by line 8 of Fig. 24.53. The first index, 0, specifies the image size to be the smallest provided by Flickr. In lines 5–6 of Fig. 24.54, we specify that the url should

 

1    # Fig. 24.53: app/controllers/flickr_controller.rb

 

2    # Controller for Flickr Photo Viewer.

 

3    class FlickrController < ApplicationController

 

4          # handle the search request

 

5          def search

 

6                 flickr = Flickr.new

 

7                 render :partial => "thumbs",

 

8                       :collection => flickr.photos( :tags => params[ :tags ],

 

9                       :per_page => params[ :numImages ] )

 

10         end # method search

11

12         # handle the thumbnail click, sets the currentURL variable

 

13         def fullsizeImage

 

14                @currentURL = params[ :imageURL ]

 

15         end # method fullsizeImage

 

16   end # class FlickrController

 

Fig. 24.53 | Controller for Flickr Photo Viewer.

 

1    <!-- Fig. 24.54: app/views/flickr/_thumbs.rhtml -->

 

2    <!-- thumbs view of Flickr Photo Viewer. -->

 

3    <%= link_to_remote image_tag( thumbs.sizes[ 0 ][ 'source' ],

 

4                 :class => "image" ),

 

5          :url => { :action => 'fullsizeImage',

 

6                 :imageURL => thumbs.sizes[ 3 ][ 'source' ] },

 

7          :update => "fullsizeImage",

 

8          :success => visual_effect( :grow, 'fullsizeImage',

 

9                 :queue => 'last' ) %>


 

Fig. 24.54 | thumbs view of Flickr photo viewer.

 

activate the fullsizeImage action and pass an imageURL parameter. This parameter is set to the source of the image’s large version. Lines 8–9 apply the grow visual_effect to fullsizeImage.

The fullsizeImage view (Fig. 24.55) fills the fullsizeImage div in line 33 of Fig. 24.52 with an image_tag. The source of this image is set to the currentURL variable. Try the program out with different tag searches and numbers of images.

 

1    <!-- Fig. 24.55: app/views/flickr/fullsizeImage.rhtml -->

 

2    <!-- fullsizeImage view of Flickr Photo Viewer. -->

 

3    <%= image_tag( @currentURL, :class => "image" ) %>

 

Fig. 24.55 | fullsizeImage view of Flickr Photo Viewer.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.