20-1-2010Wolter Kaper - AJAX en Javascript via Rails Deel 1 en 2.

Presentatie over: "20-1-2010Wolter Kaper - AJAX en Javascript via Rails Deel 1 en 2."— Transcript van de presentatie:

1 20-1-2010Wolter Kaper - w.h.kaper@uva.nl1 AJAX en Javascript via Rails Deel 1 en 2

2 20-1-2010Wolter Kaper - w.h.kaper@uva.nl2 Webtoepassing: Client - Server Server: WEBrick / Mongrell Client: Browser (IE / Firefox /...) URL + params HTML-doc Ruby & RailsJavascript

3 20-1-2010Wolter Kaper - w.h.kaper@uva.nl3 Capaciteiten van de cliënt beter gebruiken View updaten zonder pagina-reload  sneller, minder bytes  geen flits  scroll positie behouden Meer interactie op kleinere schaal  gebruiker doet iets en ziet direct effect Gebruiksvriendelijke effecten  disable / enable invoerelementen  autocomplete  drag & drop  momentane validatie

4 20-1-2010Wolter Kaper - w.h.kaper@uva.nl4 Javascript Geef de cliënt een pagina  die behalve tekst ook logica bevat Gebruiker interacteert  met software op de pagina, niet met server  diverse vriendelijke effecten: disable / enable invoerelementen autocomplete drag & drop momentane validatie

5 20-1-2010Wolter Kaper - w.h.kaper@uva.nl5 AJAX: Asynchronous Javascript & XML Geef de gebruiker een pagina  die javascript bevat Javascript  server scripts  javascript roept server script  antwoord komt terug  antwoord vertonen: ergens op pagina Gebruiksvriendelijke effecten  autocomplete  momentane validatie  reservekopie terwijl u typt  in place editing  aantal hits preview

6 20-1-2010Wolter Kaper - w.h.kaper@uva.nl6 AJAX & Javascript in Rails Prototype & Sriptaculous  meegeleverd, simpele include Ajax / Javascript View Helpers  1 javascript call / 1 antwoord op de pagina RJS templates  rails / javascript vertaling  meerdere effecten op meerdere plekken

7 20-1-2010Wolter Kaper - w.h.kaper@uva.nl7 AJAX voorbeeldje Gebruiker kijkt naar volle pagina Een enkel paginadeel wijzigen  parameters meegeven in verzoek Gebruiker klikt => een link, dus “GET”

8 20-1-2010Wolter Kaper - w.h.kaper@uva.nl8 AJAX voorbeeldje: controller class AandeelsController <... def index... (vertoon index view)... end def show aandeel = Aandeel.find(params[:id]) respond_to do |wants| wants.js { render :text => aandeel.koers } end

9 20-1-2010Wolter Kaper - w.h.kaper@uva.nl9 AJAX voorbeeldje: layout......

10 20-1-2010Wolter Kaper - w.h.kaper@uva.nl10 AJAX voorbeeldje: index view Van alles... Koers van jouw aandeel ?? ”koers-div”, :url=>{:action=>”show”, :id=>93} ) %>...en nog wat...

11 20-1-2010Wolter Kaper - w.h.kaper@uva.nl11 AJAX view helper: link_to_remote link_to_remote( “linktekst”, :url=> {:controller=>..., :action=>..., :id=>...}, :update=>”myhtml-id”, :position=> ”top”/”bottom”/”before”/”after” :failure=> “alert(‘http error:’+request.status)” ) top / bottom: kinderen van “myhtml” element before / after: broertjes van “myhtml” element

12 20-1-2010Wolter Kaper - w.h.kaper@uva.nl12 Voornaamste AJAX view helpers Prototype Helper Module link_to_remote periodically_call_remote :frequency => 5 (seconden) observe_field(“veldnaam”...) :frequency => 5 remote_form_for lijkt op form_for formulier wordt via javascript gesubmit antwoord.... :update=>”myhtml-id” observe_form

13 20-1-2010Wolter Kaper - w.h.kaper@uva.nl13 remote_form_for - voorbeeldje Uw aandeel invoeren {:action=>create} :update=>”bericht” ) do |f| %> Naam: Waarde: Nog geen bericht...

14 20-1-2010Wolter Kaper - w.h.kaper@uva.nl14 AJAX en Javascript via Rails Deel 2: met RJS

15 20-1-2010Wolter Kaper - w.h.kaper@uva.nl15 :update of RJS template? RJS-template  rails commando’s die javascript genereren Alle ajax-helpers  die :update accepteren  accepteren ook RJS :update=> enkele plek updaten RJS  meer plekken updaten  speciale effecten: element verbergen / tonen highlight form.reset redirect

16 20-1-2010Wolter Kaper - w.h.kaper@uva.nl16 RJS voorbeeldje - controller class AandeelsController <... def index... #toon index view... end def show @aandelen = Aandeel.find_by_name(“Philips”) respond_to do |wants| wants.js #toon show.js.rjs view end

17 20-1-2010Wolter Kaper - w.h.kaper@uva.nl17 RJS voorbeeldje – index view Aandelen Aantal gevonden: {:action=>”show”, :id=>93} ) %>...en nog wat...

18 20-1-2010Wolter Kaper - w.h.kaper@uva.nl18 RJS voorbeeldje – show.js.rjs view if @aandelen.empty? page.replace_html “results_message”, “Geen aandelen gevonden” page.replace_html “results”, “” else page.replace_html “results_message”, “Gevonden: #{@aandelen.size} aandelen” page.replace_html “results”, @aandelen.map(&:to_s).join(‘ ’) end

19 20-1-2010Wolter Kaper - w.h.kaper@uva.nl19 Overzicht RJS commando’s page.replace_html page.insert_html page.remove(*html-ids) page.hide(*html-ids) page.show(*html-ids)

20 20-1-2010Wolter Kaper - w.h.kaper@uva.nl20 Overzicht RJS commando’s (vervolg) page << ‘mijn zelfgeschreven javascript’ page.alert(bericht) page.delay(seconds) {... } page.visual_effect(name, html-id) page.redirect_to(url)

21 20-1-2010Wolter Kaper - w.h.kaper@uva.nl21 Sleepbare lijst Zie voorbeeldje “draggable”

22 20-1-2010Wolter Kaper - w.h.kaper@uva.nl22 Sleepbare lijst items hebben een volgorde volgorde is te wijzigen...door te slepen toepassing: to-do lijsten per dag

23 20-1-2010Wolter Kaper - w.h.kaper@uva.nl23 Sleepbare items : db-tabel tabel "taaks" (taken) nodig: kolom "position", type :integer

24 20-1-2010Wolter Kaper - w.h.kaper@uva.nl24 Sleepbare items: view "> Debug area 'order', :url => {:action=>'order'}

25 20-1-2010Wolter Kaper - w.h.kaper@uva.nl25 Sleepbare items: controller class TaaksController < ApplicationController def index #...zet het view neer… #volgorde in de database vastleggen def order order = params[:lijst] order.each_with_index do |id, position| taak = Taak.find(id) taak.update_attribute(:position, position) end render :text=> "Order is now: "+order.join(", ") end

26 Voorbeeldjes De drie voorbeeldjes van vandaag: Op “drive k:” http://student.science.uva.nl/~kaper/ onder “ajaxvoorbeeldjes” 20-1-2010Wolter Kaper - w.h.kaper@uva.nl26