1 Dr Alexiei Dingli Web Science Stream Web 2.0

2 We’ll implement a voting mechanism Using AJAX Web 2.0

3 ruby script/generate model Vote story_id:integer Creating the vote model

4 class CreateVotes < ActiveRecord::Migration def self.up create_table :votes do |t| t.integer :story_id t.timestamps end def self.down drop_table :votes end The vote migration

5 rake db:migrate Apply the migration

6 In the case of votes –A story might have many votes –Has_many is the relationship to use App/models/story.rb –has_many :votes More on relationships

7 ruby script/console s = Story.find(:first) s.votes s.votes.create s.votes.size Let’s test it...

8 App/models/vote.rb Add –belongs_to :story Use the reload! command in the console –Try v = Vote.find(:first) v.story Finalising the relationship

9 Stories_controller.rb def = Story.find(:first, :order => 'RANDOM()') end def = Story.new end def = Story.find(params[:id]) end Showing our stories

10 App/views/stories/show.html.erb Displaying the stories!

11 Start a server –ruby script/server Goto – Let’s see what we have so far...

12 Change the index.html to A random link: Better randomization

13 Generate –ruby script/generate controller Votes create Arrange the routes –Routes.rb map.resources :stories, :has_many => :votes Create the routes –rake routes Let’s create the votes

14 Nested routes of the form... /stories/:story_id/votes /stories/1/votes Looking at the rake routes

15 Asynchronous JavaScript and XML –Make web browser communicate with a server without reloading the page –Also called remote scripting –More dynamic and responsive experience just like in a desktop application –Uses XMLHttpRequest, XHTML, CSS and DOM –Supported by most browsers –Used in Web 2.0 applications (Digg, Flickr, etc) Ajax

16 Rails –ships with Ajax support –encourages its use –is bundled with the Prototype JavaScript library –And also script.aculo.us which takes care of visual elements Rails + Ajax

17 Core Effects: Effect.Highlight, Effect.Morph, Effect.Move, Effect.Opacity, Effect.Scale, Effect.Parallel, Effect Queues Combination Effects: Effect.Appear, Effect.BlindDown, Effect.BlindUp, Effect.DropOut, Effect.Fade, Effect.Fold,Effect.Grow, Effect.Puff, Effect.Pulsate, Effect.Shake, Effect.Shrink, Effect.SlideDown, Effect.SlideUp, Effect.Squish, Effect.SwitchOff, Effect.ScrollTo Effect helpers: Effect.Transitions, Effect.Methods, Effect.tagifyText, Effect.multiple, Effect.toggle Behaviours: Draggable, Droppables, Sortable, Form.Element.DelayedObserver Controls: Ajax.InPlaceEditor, Ajax.InPlaceCollectionEditor, Ajax.Autocompleter, Autocompleter.Local, Slider Miscellaneous: Builder, Sound, Unit Testing Some features of script.aculo.us

18 Just underneath the tag of application.html.erb add – This will automatically include –Prototype.js –Effects.js –Dragdrop.js –Controls.js –Application.js Adding the JavaScript libraries

19 Score: do %> Modifying the stories/show.html.erb

20 #vote_score { float: right; color: #9c9; } #vote_form { margin: 10px 0; } #vote_form input { padding: 3px 5px; border: 3px solid #393; background-color: #cfc; text-decoration: none; color: #393; } #vote_form input:hover { background-color: #aea; } Adding some styles

21 Start a server –ruby script/server Goto – Let’s see what we have so far...

22 class VotesController < ApplicationController def = end end Adding votes

23 Used to modify parts of an existing page Send JavaScript commands Make a view called create.rjs and add the following: –page.replace_html 'vote_score', "Score: –page[:vote_score].visual_effect :highlight RJS Templates

24

25 class VotesController < ApplicationController def = respond_to do |format| format.html { } format.js end end What if the browser does not supports Ajax?

26 Deal with parts of the page constantly reused Eg a voting history What’s a partial?

27 Score: No votes yet! 'votes/vote', :collection %> do %> Let’s add a voting history! stories./show.html.erb

28 No votes yet! 'votes/vote', :collection %> Let’s add a voting history! stories./show.html.erb

29 Views/votes/_vote.html.erb Notes: short => "%d %b %H:%M" Create a partial

30 Create.js page.replace_html 'vote_score', "Score: page[:vote_score].visual_effect :highlight page[:vote_history].replace_html :partial => 'vote', :collection Updating the history during a vote

31 Start a server –ruby script/server Goto – Let’s see what we have so far...

32 Questions?