Wolter Kaper - AJAX en Javascript via Rails Deel 1 en 2

Wolter Kaper - Webtoepassing: Client - Server Server: WEBrick / Mongrell Client: Browser (IE / Firefox /...) URL + params HTML-doc Ruby & RailsJavascript

Wolter Kaper - 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

Wolter Kaper - 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

Wolter Kaper - 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

Wolter Kaper - 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

Wolter Kaper - AJAX voorbeeldje Gebruiker kijkt naar volle pagina Een enkel paginadeel wijzigen  parameters meegeven in verzoek Gebruiker klikt => een link, dus “GET”

Wolter Kaper - 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

Wolter Kaper - AJAX voorbeeldje: layout......

Wolter Kaper - AJAX voorbeeldje: index view Van alles... Koers van jouw aandeel ?? ”koers-div”, :url=>{:action=>”show”, :id=>93} ) %>...en nog wat...

Wolter Kaper - 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

Wolter Kaper - 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

Wolter Kaper - remote_form_for - voorbeeldje Uw aandeel invoeren {:action=>create} :update=>”bericht” ) do |f| %> Naam: Waarde: Nog geen bericht...

Wolter Kaper - AJAX en Javascript via Rails Deel 2: met RJS

Wolter Kaper - :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

Wolter Kaper - RJS voorbeeldje - controller class AandeelsController <... def index... #toon index view... end def = Aandeel.find_by_name(“Philips”) respond_to do |wants| wants.js #toon show.js.rjs view end

Wolter Kaper - RJS voorbeeldje – index view Aandelen Aantal gevonden: {:action=>”show”, :id=>93} ) %>...en nog wat...

Wolter Kaper - RJS voorbeeldje – show.js.rjs view page.replace_html “results_message”, “Geen aandelen gevonden” page.replace_html “results”, “” else page.replace_html “results_message”, “Gevonden: aandelen” page.replace_html ’) end

Wolter Kaper - Overzicht RJS commando’s page.replace_html page.insert_html page.remove(*html-ids) page.hide(*html-ids) page.show(*html-ids)

Wolter Kaper - 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)

Wolter Kaper - Sleepbare lijst Zie voorbeeldje “draggable”

Wolter Kaper - Sleepbare lijst items hebben een volgorde volgorde is te wijzigen...door te slepen toepassing: to-do lijsten per dag

Wolter Kaper - Sleepbare items : db-tabel tabel "taaks" (taken) nodig: kolom "position", type :integer

Wolter Kaper - Sleepbare items: view "> Debug area 'order', :url => {:action=>'order'}

Wolter Kaper - 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

Voorbeeldjes De drie voorbeeldjes van vandaag: Op “drive k:” onder “ajaxvoorbeeldjes” Wolter Kaper -