Ajax on Rails
Autor: Scott Raymond
Tłumaczenie: Adrian Elczewski
ISBN: 978-83-246-1048-8
Tytuł oryginału: Ajax on Rails
Format: B5, stron: 336
Zobacz, jak wykorzystać potencjał technologii Ajax i Rails
w tworzeniu zaawansowanych aplikacji internetowych!
" Jak używać platformy Rails do budowy dynamicznych aplikacji internetowych?
" Jak szybko tworzyć witryny ajaksowe, wykorzystując wydajne biblioteki?
" Jak zwiększyć komfort pracy użytkowników Twoich aplikacji internetowych?
Ajax to olbrzymie możliwoSci w zakresie tworzenia dynamicznych i interaktywnych
aplikacji internetowych, działających niemal tak szybko, jak tradycyjne programy.
Jednak lepsza jakoSć witryn wymaga zwykle pisania bardziej skomplikowanego kodu
i, co za tym idzie, większych nakładów pracy i czasu. Tak też było do niedawna
w przypadku Ajaksa, ale obecnie, gdy wzrosła popularnoSć tej technologii, a ona sama
dojrzała, programiSci mogą korzystać z wielu bibliotek i platform, dzięki którym
tworzenie efektownych aplikacji internetowych stało się niezwykle proste.
Ajax on Rails to podręcznik dla programistów, którzy chcą szybko i łatwo budować
wydajne aplikacje internetowe na bazie dwóch popularnych mechanizmów technologii
Ajax oraz platformy Rails. Czytając go, dowiesz się, w jaki sposób Ajax umożliwia
kreowanie funkcjonalnych i wygodnych w obsłudze witryn, a także nauczysz się
błyskawicznie stosować tę technologię w oparciu o biblioteki Prototype i scipt.aculo.us
oraz kompletną platformę do tworzenia aplikacji internetowych, czyli Rails. Poznasz też
sposoby sprawnego diagnozowania aplikacji ajaksowych oraz zapewnisz im
bezpieczeństwo i wydajnoSć, aby udostępniać swym klientom produkty najwyższej klasy.
" Przegląd mechanizmów technologii Ajax
" Działanie platformy Rails
" Ajaksowe przesyłanie danych za pomocą biblioteki Prototype
" Dodawanie efektów do witryn przy użyciu biblioteki scipt.aculo.us
Wydawnictwo Helion
" Generowanie kodu JavaScript za pomocą szablonów RJS
ul. KoSciuszki 1c
" Zwiększanie użytecznoSci aplikacji
44-100 Gliwice
" Diagnozowanie aplikacji na platformie Rails
tel. 032 230 98 63
" Zapewnianie bezpieczeństwa programu
e-mail: helion@helion.pl
" Zwiększanie wydajnoSci aplikacji
Spis tre ci
Przedmowa .....................................................................................................................7
1. Wprowadzenie ..............................................................................................................11
Dla kogo jest ta ksi ka 11
Czym jest Ajax? 12
Czym jest Rails 18
!Twój Ajax w moim Rails" 21
Nabieranie pr dko ci 21
Podsumowanie 27
2. Pierwsze kroki ..............................................................................................................29
Staromodny sposób 29
Prototype oraz inne biblioteki JavaScript 33
Rails pojawia si na horyzoncie 35
Podsumowanie 40
3. Wprowadzenie do Prototype ....................................................................................... 41
Ustawianie sceny 41
cza w Ajaksie 44
Formularze 48
Formularze w Ajaksie 51
Przyciski 52
Obserwatory formularza 54
Podsumowanie 55
4. Wprowadzenie do script.aculo.us ...............................................................................57
Efekty wizualne 57
Przeci gnij i upu 62
Podsumowanie 70
3
5. RJS .................................................................................................................................. 71
Instrukcje zamiast danych 71
Umieszczenie R w skrócie RJS 72
Przyk ady z ycia wzi te 85
Podsumowanie 87
6. U yteczno Ajaksa ......................................................................................................89
Zasady u yteczno ci 90
Kontekst Internetu 94
U yteczno w Internecie 97
Programowanie uwzgl dniaj ce ró ne przegl darki 103
Podsumowanie 107
7. Testowanie i usuwanie b dów ................................................................................. 109
Usuwanie b dów 110
Testowanie 122
Podsumowanie 134
8. Bezpiecze stwo .......................................................................................................... 135
Zdrowy sceptycyzm: nie ufa danym wej ciowym u ytkownika 135
Hashowanie hase 144
Uciszanie logów 145
Polityka tej samej domeny 146
U ywanie i nadu ywanie metod HTTP 148
Szyfrowanie i certyfikaty bezpiecze stwa 151
Lista mailingowa o bezpiecze stwie w Rails 152
Podsumowanie 152
9. Wydajno ................................................................................................................... 153
rodowiska projektowe i produkcyjne 153
Przechowywanie sesji 154
Buforowanie wyj cia 155
Pakowanie zasobów 160
Post powanie z d ugo dzia aj cymi zadaniami 162
Podsumowanie 164
10. Informator o Prototype .............................................................................................. 165
Wsparcie Ajaksa 166
Manipulacja DOM 172
Wbudowane rozszerzenia 185
4 Spis tre ci
11. Informator o script.aculo.us ....................................................................................... 199
Efekty wizualne 199
Przeci gnij i upu 209
Kontrolki 218
Rozszerzenia klasy element 226
Konstruktor DOM 228
Testowanie jednostkowe JavaScript 229
Metody narz dziowe 232
Przyk ad A Quiz ...........................................................................................................233
Przyk ad B Galeria zdj ............................................................................................ 249
Przyk ad C Aplikacja wspó pracy w grupie ...............................................................267
Skorowidz ................................................................................................................... 315
Spis tre ci 5
ROZDZIA 2.
Pierwsze kroki
O, Ajaksie! Znowu Ci przyzywam.
!Sofokles
W!tym!rozdziale!g ównym!zamys em!jest!zrobienie!rundki,!ma ymi!kroczkami,!po!naprawd
prostych!przyk adach!wykorzystania!technologii!Ajax.!Rails!dostarcza!wiele!mo liwo ci!two-
rzenia!z o onych!interakcji!w!technologii!Ajax!z!u yciem!bardzo!ma ej!ilo ci!kodu.!Ale! eby
zrozumie ,! co! si ! dzieje! "pod! mask #,! ka dy! powinien! by ! obeznany! z! najni szym! pozio-
mem! dzia ania! technologii! Ajax! (np.! obiektem! XMLHttpRequest).! Po! przyswojeniu! tre ci! tej
ksi ki!tworzenie!obiektu!XMLHttpRequest!za!pomoc !biblioteki!Prototype!lub!bez!jej!u ycia
nie!b dzie!stanowi o!problemu.!Czytelnik!b dzie!potrafi !z!pomoc !Rails!utworzy !proste!inte-
rakcje!w!technologii!Ajax!bez!pisania!jakiegokolwiek!kodu!w!JavaScripcie.!Z!tym!za o eniem
zdob dziemy!wiedz !na!temat!dzia ania!pomocników!Rails!oraz!dowiemy!si ,!jak!wielu!k o-
potów!one!oszcz dzaj .
Dla!czytelników,!którzy!mieli!okazj !zapozna !si !z!Rails!i!znaj !podstawy!Ajaksa,!ten!roz-
dzia !b dzie!okazj !do!od wie enia!wiedzy,!warto!przynajmniej!przyjrze !si !przyk adom.
Staromodny sposób
eby!rozpocz ,!wykonajmy!najprostsz !rzecz!do!zrobienia!z!u yciem!technologii!Ajax:!klik-
nijmy! cze!i!zaprezentujmy!odpowied !z!serwera! !u ywaj c!bezpo rednio!XMLHttpRequest,
bez!pomocy!Prototype!czy!pomocników!Rails!dla!JavaScript.
U ywanie!XMLHttpRequest!jest!cz sto!opisywane!jako!co !wyj tkowo!trudnego.! atwo!zauwa-
y ,! e!po!zdobyciu!odrobiny!do wiadczenia!i!poznaniu!kilku!nowych!koncepcji!nie!jest!to!a
tak!zawi e,!jak!mo na!by!by o!si !spodziewa !na!podstawie!powszechnej!opinii.
Rozpoczynanie projektu
Osoby,!które!nie!stworzy y!przyk adu!szkieletu!Rails!w!poprzednim!rozdziale,!powinny!zrobi
to!teraz,!wpisuj c!w!wierszu!polece !systemowych:
rails ajaxonrails
cd ajaxonrails
script/server
29
Za!pomoc !przegl darki!nale y!otworzy !stron !http://localhost:3000/! !powinien!si !pojawi !ekran
powitalny!Rails!(dla!celów!przysz ego!projektowania!warto!pami ta ,! e!script/server
uruchamia!na!porcie!3000!serwer!HTTP).!Teraz!utwórzmy!nowy!kontroler,!który!nazwiemy
Chapter2Controller,! z! akcj ! myaction.! (Po! uruchomieniu! serwera! w! jednym! terminalu
warto!otworzy !inny).
script/generate controller chapter2 myaction
Generator!Rails!jest!u ywany!do!uzupe niania!szkieletu! !przewa nie!przez!tworzenie
nowych! kontrolerów! i! modeli.! Oczywi cie! mo na! by! w! prosty! sposób! utworzy
kontroler!plików!r cznie,!ale!u ywanie!generatora!jest!oszcz dno ci !pisania! !co
zapobiega!robieniu!b dów.
Generator!ma!tak e!inny!skutek:!za!ka dym!razem,!gdy!generuje!si !kontroler,!two-
rzony!jest!równie !wspó pracuj cy!z!nim!plik!testów!funkcjonalnych.!To!sposób!Rails
na!przypominanie,! e!testowanie!jest!wa n !cz ci !tworzenia!aplikacji.!Aby!do-
wiedzie ! si ! wi cej! o! dost pnych! generatorach! i! ich! opcjach,! nale y! uruchomi
script/generate!bez! adnych!argumentów.
Teraz!trzeba!przej !do!http://localhost:3000/chapter2/myaction.!Nale y!si !spodziewa !nowo!utwo-
rzonego!widoku!jak!na!rysunku!2.1.
Rysunek 2.1. Nowo utworzony kontroler Rails i jego widok
Prosz !zauwa y ,! e!domy lnie!pierwsza!cz !adresu!URL!determinuje!kontroler,!a!druga!akcj
!metod !w!ramach!kontrolera.!Teraz!b dziemy!edytowa !szablon!dla!tej!akcji,!do!którego!pro-
wadzi! cie ka!app/views/chapter2/myaction.rhtml.!Dodajemy!ten!fragment!HTML!na!dole!pliku.
Inline alert( )
Jak!mo na!zauwa y ,!tworzymy!akapit!z!prostym! czem! !ale!zamiast!standardowego!atrybutu
href!u ywamy!onclick,!do!którego!dostarczamy!fragment!kodu!JavaScript!do!uruchomie-
nia.!Po!od wie eniu!przegl darki!i!klikni ciu! cza!pojawi!si !to,!co!przedstawia!rysunek!2.2.
Wi cej!ni !jedna!czy!dwie!instrukcje!wstawione!do!atrybutu!onclick!mog yby!szybko!sta !si
niewygodne.! Przenie my! kod! do! osobnej! funkcji! JavaScript! poprzez! dodanie! tego,! co! znaj-
duje!si !poni ej:
Wywo anie w asnej funkcji
30 Rozdzia 2. Pierwsze kroki
Rysunek 2.2. Prosta ramka ostrzegawcza
Prosz ! spróbowa ! ponownie! od wie y ! stron ! i! zobaczy ,! co! si ! stanie.! Rezultat! powinien
by !w!zasadzie!taki!sam!jak!poprzednio.
Koniec!rozgrzewki,!teraz!zajmiemy!si !Ajaksem.!(Ale!prosz !pami ta ,! e!wci !zagl damy
"pod!mask #! !pod!koniec!tego!rozdzia u!sporo!z o ono ci!Rails!znacznie!si !upro ci).!Po
pierwsze,!musimy!zdefiniowa !now !akcj !w!kontrolerze,!app/controllers/chapter2_controller.rb.
Teraz!znajduje!si !tam!akcja!myaction,!wi c!nast pn !nazwijmy!myresponse.!Aby!to!zrobi ,
nale y! utworzy ! nowy! plik,! myresponse.rhtml! w! katalogu! app/views/chapter2.! Do! zawarto ci
pliku!wprowad my:
Powitanie z serwera.
eby! mie ! pewno ,! e! wszystko! dzia a,! prosz ! odwiedzi ! t ! akcj ! w! swojej! przegl darce
pod! adresem! http://localhost:3000/chapter2/myresponse! ! b dzie! widoczne! to,! co! przedstawia
rysunek!2.3.
Rysunek 2.3. Wynik akcji myresponse
Teraz!wró my!do!myaction.rhtml!i!dodajmy!kolejny!fragment!kodu!HTML!i!JavaScript.
Wywo anie funkcji po stronie serwera
Staromodny sposób 31
Za!pomoc !przegl darki!przejd my!z!powrotem!do!http://localhost:3000/chapter2/myaction!i!klik-
nijmy!nowe! cze.!Je li!wszystko!posz o!dobrze,!powinna!si !pojawi !wiadomo !z!serwera,
taka!jak!na!rysunku!2.4.!Ostrzegamy,! e!ten!przyk ad!nie b dzie!dzia a !we!wcze niejszych!ni
siódma!wersjach!Internet!Explorera!(ten!problem!podejmiemy!pó niej).
Rysunek 2.4. Rezultat pierwszego wywo ania w Ajaksie
Teraz!do!czego !doszli my$! eby!si !przekona ,!warto!zerkn !na!terminal,!gdzie!uruchomiony
jest!script/server.!Za!ka dym!razem,!gdy!klika!si !"zajaksowane#! cze,!rejestrowane!b -
dzie!nowe!klikni cie:
Processing Chapter2Controller#myresponse [GET]
Parameters: {"action"=>"myresponse", "controller"=>"chapter2"}
Completed in 0.00360 (278 reqs/sec) | Rendering: 0.00027 (7%) |
200 OK [http://localhost/chapter2/myresponse]
Du ym! problemem! omawianego! przyk adu! jest! to,! e! nie! dzia a! on! w! jednej! z! najbardziej
rozpowszechnionych!przegl darek,!Internet!Explorer!6.!Przyczyn !jest!obiekt!ActiveX!w!im-
plementacji!XMLHttpRequest!Microsoftu!(a!w a ciwie!dwa!takie!obiekty,!co!zale y!od!wersji!IE),
który!musi!by !tworzony!w!inny!sposób.! eby!zlikwidowa !ten!problem!i!sprawi ,!aby!nasz
przyk ad!dzia a !poprawnie!we!wszystkich!przegl darkach,!tworzymy!ma !funkcj .!Oto!wersja
przyjazna!dla!IE:
Wywo anie serwera (dzia aj ce pod IE)
Ta!wersja!jest!taka!sama!jak!wcze niejsza,!z!wyj tkiem!tego! e!zamiast!tworzy !bezpo rednio
obiekt!XMLHttpRequest,!wywo ywana!jest!funkcja!getRequestObject(),!która!wybiera!mo -
liw !opcj .!Ta!funkcja!robi!u ytek!z!deklaracji!try!w!JavaScripcie,!która!jest!wykorzystywana
32 Rozdzia 2. Pierwsze kroki
do!wy apywania!wyj tków!i!t umienia!ich.!(Ten!przyk ad!wprowadza!tak e!ide !deklarowa-
nia!funkcji!w!funkcji,!która!mo e!by !nowo ci !dla!niektórych!programistów).
Dotychczas! odrobin ! oszukiwali my,! poniewa ! wywo anie! Ajaksa! nie! jest! asynchroniczne.
Decyduje!o!tym!trzeci!parametr!w!metodzie!request.open().!Do!tej!pory!zak adali my,! e
wywo anie!nie!by o!synchroniczne.!W!zwi zku!z!tym!request.send()!by o!blokuj ce! !in-
terpreter!JavaScript!zatrzymywa !wykonywanie!w!tym!wierszu!i!nie!przechodzi !do!nast pnego,
dopóki!nie!nadesz a!odpowied !z!serwera.! eby!sprawi ,!aby!wywo anie!by o!asynchroniczne,
musimy!troch !zmieni !kod.!Prosz !doda !ten!fragment!kodu!do!myaction.rhtml:
Asynchroniczne wywo anie serwera
We! wszystkich! poprzednich! przyk adach! wywo ywali my! request.send()! i! natychmiast! po-
tem!odwo ywali my!si !do!request.responseText().!Teraz,!gdy!wysy amy!asynchroniczne
danie,!odpowied !niekoniecznie!wraca!po!zako czeniu!wywo ania.!Aby!rozwi za !ten!pro-
blem,!obiekt!XMLHttpRequest!ma!atrybut!readyState,!który!zmienia!si !w!czasie!cyklu! ycia
dania.!Ma!tak e!atrybut!onreadystatechange,!gdzie!mo na!zdefiniowa !funkcj ,!która!b -
dzie!wywo ywana!za!ka dym!razem,!gdy!status!readyState!b dzie!si !zmienia .!W!tym!przy-
k adzie! definiujemy! funkcj ,! która! sprawdza,! czy! readyState! jest! równy! 4! (co! oznacza,! e
danie!si !zako czy o;!kody!readyState!opisane!s !w!pe ni!w!rozdziale!3.),!a!je li!tak,!wy-
wietla!okienko!z!komunikatem.!Opanowanie!asynchronicznych!zdarze !mo e!wymaga !troch
czasu,!ale!jest!zasadnicz !cz ci !r cznego!programowania!w!Ajaksie.
Prototype oraz inne biblioteki JavaScript
Osoby,!które!dopiero!zaczynaj !swoj !przygod !z!Ajaksem,!prawdopodobnie!zacz y!zauwa a ,
e! pisanie! w! czystym! Ajaksie,! pozbawionym! wsparcia! dodatkowych! bibliotek! albo! metod
pomocniczych,!nie!jest!powszechne.!W!ogóle!pomys !pisania!wi cej!ni !tuzina!wierszy!kodu
w!celu!stworzenia!najprostszego!mo liwego!zadania!jest!odpychaj cy.
Dziesi tki!bibliotek!JavaScript!wychodz !z!siebie,! eby!sprawi ,!by!Ajax!by ! atwiejszy!w!obs u-
dze.!Jedn !z!najbardziej!popularnych!jest!Prototype,!która!stanowi!cz !Rails.!B dziemy!oma-
wia !Prototype!gruntownie!w!rozdziale!10.,!ale!teraz!przyjrzyjmy!si !pewnym!przyk adom.
Zanim! zaczniemy! co ! innego,! przeróbmy! ponownie! ostatni! przyk ad,! tym! razem! u ywaj c
Prototype.!Oto!nowy!fragment!do!dodania:
Wywo anie funkcji z Prototype
Prototype oraz inne biblioteki JavaScript 33
Prosz !zwróci !uwag !na!pierwszy!wiersz,!gdzie!w czamy! adowanie! ród a!pliku!prototype.js,
by!móc!z!niego!korzysta !na!naszej!stronie.!Przy!pierwszym!tworzeniu!szkieletu!aplikacji!Rails
kopia!Prototype!by a!umieszczona!w!katalogu!public/javascripts.!Wewn trz!funkcji!prototype-
Alert()!pierwszy!wiersz!tworzy!now !instancj !Ajax.Request,!jednej!z!klas!Prototype.!Pierwszy
wywo ywany!argument!jest!adresem!URL,!drugi! !jest!obiektem!JavaScript! !kolekcj !par
kluczy!%!warto ci,!które!zachowuj !si !podobnie!do!map!albo!tablic!asocjacyjnych!w!innych
j zykach! programowania.! W! tym! przypadku! jedyn ! warto ci ! jest! onSuccess! okre laj ca
funkcj !wywo ywan !jako!funkcja!zwrotna.
Prosz !zwróci !uwag ,!i !w!tym!przyk adzie!nie!ma! adnego!kodu!specyficznego!dla!obs ugi
wersji! XMLHttpRequest! dla! przegl darki! IE! i! adnej! obs ugi! kodów! readyState.! Prototype
obs uguje!te!szczegó y,!udost pniaj c!programi cie!du o!czystsze!API.
Dotychczas!wszystkie!nasze!przyk ady!tworzy y!okno!komunikatu!alert()! !które,!w!rze-
czywistych!aplikacjach,!prawdopodobnie!nie!jest!najcz ciej!u ywane.!Znacznie!cz ciej!do-
dawana!jest!nowa!zawarto !strony!albo!modyfikowana!dotychczasowa.!Oto!nowy!fragment
do!dodania:
Uaktualnij element
Prosz !zauwa y !ró nice!mi dzy!powy szym!a!wcze niejszym!przyk adem:!dodany!zosta !nowy
pusty!element!akapitu!z!atrybutem!id="response",!który!b dzie!przechowywa !odpowied
otrzyman !z!serwera.!Funkcja!onSuccess!zosta a!zmieniona,!zamiast!wywo ania!alert()!funkcja
ta!umieszcza!tekst!odpowiedzi!w!elemencie!response!(u ywaj c!metody!update()!z!biblio-
teki!Prototype,!która!ustawia!w a ciwo !elementu!innerHTML).!Symbol!dolara!jest!faktycznie
nazw ! funkcji! definiowanej! przez! Prototype,! która! pobiera! ci g! znaków! i! zwraca! element
HTML!na!podstawie!tego!ID.!Poniewa !aktualizacja!elementów!HTML!b dzie!bardzo!cz sto
wykonywanym!zadaniem,!Prototype!u atwia!to!poprzez!Ajax.Updater.!Prosz !to!sprawdzi :
Modernizuj za pomoc Ajax.Updater
Funkcja!$()!w!Prototype!b dzie!u ywana!bardzo!cz sto,!z!bliska!wygl da!niezwy-
kle!warto ciowo.!Na!pierwszy!rzut!oka!jest!prostym!opakowaniem!dla!standardowej
metody!DOM!document.getElementById!z!nazw !du o!prostsz !do!zapami ta-
nia!i!sprawiaj cym!wra enie!sk adni!JavaScript.!Ale!to!wi cej!ni !tylko!opakowanie.
34 Rozdzia 2. Pierwsze kroki
Przede!wszystkim!mo e!przyj !dowoln !liczb !argumentów,!wi c!mo na!otrzyma
kilka!elementów!jednocze nie.!Ponadto!ka dy!zwracany!element!jest!automatycznie
rozszerzany!o!pot ny!zestaw!metod!omówionych!w!rozdziale!10.
Prawdopodobnie! najbardziej! istotne! jest,! e! je li! przeka e! si ! do! metody! $()! ci g
znaków,!zwróci!ona!element!DOM!z!tym!w a nie!ID.!Ale!je li!przeka e!si !obiekt!ja-
kiegokolwiek!innego!typu! !powiedzmy!element!DOM! !w!prosty!sposób!zwróci
ten!obiekt!bez!zmian.!Wynikiem!jest!to,! e!mo na!u ywa !$()!z!warto ciami,!nawet
je li!nie!jest!si !pewnym,!czy!warto ci!te!s !ci giem!znaków!czy!elementem!DOM,!co
sprawia,! e!API!JavaScript!jest!mniej!podatne!na!b dy.
Prosz !zwróci !uwag ,! e!ten!przyk ad!nie!ma!w!sobie!funkcji!onSuccess,!tutaj!Ajax.Updater
pobiera!tylko!dwa!argumenty:!ID!elementu!HTML,!który!ma!by !zaktualizowany,!i!URL! -
dania.!Ajax.Updater!wywo uje!URL!i!automatycznie!tworzy!funkcj !onComplete!s u c !do
zaktualizowania!okre lonego!elementu!DOM!za!pomoc !warto ci!response.Text.!Tak!jak
w!przypadku!Ajax.Request,!ostatni!argument!jest!zestawem!opcji.!Jedna!z!nich!jest!nazwana
insertion.!Pozwala!na!pój cie!du o!dalej!ni !prosta!zamiana!zawarto ci!elementu,!zamiast
tego!umo liwia!wstawienie!zawarto ci!w!rozmaitych!punktach.!Istniej !cztery!typy!wstawia-
nia:!Before,!Top,!Bottom!oraz!After.!Na!przyk ad:
Dodaj do elementu
Kiedy!kliknie!si ! cze!za!pierwszym!razem,!odpowied !z!serwera!b dzie!dodana!do!tej!stro-
ny!tak!jak!poprzednio.!Przy!pó niejszych!klikni ciach,!zamiast!zast pi !wcze niejsz !zawar-
to ,!kolejne!odpowiedzi!b d !do czane!do!poprzednich.
Prosz !zauwa y ,! e!zdo ali my!zredukowa !do !z o one!zachowanie!do!postaci!funkcji!z!za-
ledwie!jedn !instrukcj .!Aby!zatoczy !pe ne!ko o,!mo emy!zredukowa !kod!do!postaci!poje-
dynczego!atrybutu!onclick:
Dodaj do elementu
Jak!b dzie!mo na!si !wkrótce!przekona ,!jest!to!dok adnie!ten!sam!kod,!który!generuj !pomoc-
niki!JavaScript!w!Rails.
Rails pojawia si na horyzoncie
Rails!dostarcza!dogodn !integracj !z!Prototype!w!formie!metod!pomocników,!które!generuj
wywo ania!funkcji!udost pnianych!przez!Prototype.!Odkryjemy,!jak!tworzy !Ajaksa!bez!pi-
sania!jakiegokolwiek!kodu!w!JavaScripcie,!u ywaj c!metody!pomocnika!link_to_remote().
Po!pierwsze,!musimy!cofn !si !odrobin !i!dowiedzie !si ,!jak!Rails!obs uguje!widoki.
Rails pojawia si na horyzoncie 35
Podstawy ERb
Osoby,!które!kiedykolwiek!korzysta y!z!PHP,!ColdFusion,!ASP,!JSP!albo!czego !podobnego,
uznaj ,! e!jest!to!znajoma!koncepcja.!Wbudowany!Ruby!(Erb,!ang.!Embedded Ruby)!pozwala
na! czenie! fragmentów! Ruby! z! HTML-em.! ERb! definiuje! zestaw! specjalnych! znaczników,
które!s !interpretowane!jako!Ruby;!wszystko!inne!jest!traktowane!jako!czysty!HTML!i!zwra-
cane!w!nienaruszonej!postaci.!Oto!te!specjalne!znaczniki:
<%= %>
Najcz ciej u ywany, zawiera wyra enie Ruby którego wynik zwracany jest w miejscu znacznika.
<%= -%>
Dzia a tak jak powy szy, ale usuwa znaki nowego wiersza znajduj ce si za tym znacznikiem, co pozwala na
czystsze zorganizowanie plików szablonów bez zb dnych pustych miejsc w wynikowych dokumentach HTML.
<% %>
Przechowuje fragment kodu Ruby, ale nie zwraca niczego.
<% -%>
Dzia a tak jak powy szy, ale usuwa znaki nowego wiersza znajduj ce si za tym znacznikiem.
<%# %>
To jest komentarz Ruby, który jest ignorowany i niczego nie zwraca.
Teraz!spójrzmy!na!przyk ad.
Czy! pami tasz! dyskusj ! o! MVC! z! rozdzia u! 1.?! Tutaj! MVC! zaczyna! odgrywa ! swoj ! rol .
Zwykle!kontroler!b dzie!otrzymywa ! danie!wy wietlenia!strony!i!przygotowywa !dane!po-
trzebne!dla!widoku.!W!Rails!dane!te!s !umieszczane!w!zmiennych instancji (które!s !rozpoznawane
dzi ki!brzydkiemu!znakowi!@,!od!którego!si !zaczynaj !ich!nazwy).!Prosz !sobie!zatem!wy-
obrazi ,! e!mamy!tak !akcj !kontrolera:
def myaction
@foo = "Witaj, wiecie!"
end
Akcja!definiuje!zmienn !nazwan !@foo!i!przypisuje!jej! a cuch!znaków!Witaj, wiecie!.!Nasz
szablon!móg by!wi c!zawiera !co !takiego:
<%= @foo %>
I,!gdy!szablon!jest!wywo ywany,!<%= @foo %>!b dzie!zast pione!przez!Witaj, wiecie!.!Ca -
kiem!oczywista!sprawa.!W!praktyce!przewa nie!chce!si !wykorzysta !zmienn !w!strukturze
HTML,!np.:
<%= @foo %>
Poniewa !znacznik!<% %>!nie!produkuje! adnego!wyj cia,!najcz stsze!jego!u ycie!zwi zane!jest
ze!strukturami!kontrolnymi,!takimi!jak!instrukcja!if!i!iteracje!each.!W!odró nieniu!od!innych
systemów!szablonowych!nie!istnieje!sk adnia!specyficzna!dla!ERb!dla!tych!konstrukcji;!ERb
u ywa!zwyczajnych!wyra e !j zyka!Ruby.!Kilka!przyk adów:
<% if @page_title %>
<%= @page_title %>
<% end %>
<% unless @names.empty? %>
<% @names.each do |name| %>- <%= name %>
<% end %>
<% end %>
Prosz !spojrze !na!drugi!wiersz.!Zaczyna!si !od!wyra enia!warunkowego!unless! !odpo-
wiednika!Ruby!dla!if not.!Prosz !zwróci !te !uwag !na!@names.empty?.!Wszystkie!tablice
Ruby!korzystaj !z!metody!nazwanej!empty?! !zazwyczaj!nazwy!metod!Ruby!zwracaj cych
prawd ! lub! fa sz! ko cz ! si ! znakiem! zapytania.! Ostatni ! spraw ! wart ! podkre lenia! jest
czwarty!wiersz.!Wywo anie!metody!each!dla!@names!iteruje!przez!ka dy!element!tablicy,!zatem
kod!ten!przejdzie!ca !tablic !@names!i!zwróci!list !elementów!w!HTML!dla!ka dego!imienia.
36 Rozdzia 2. Pierwsze kroki
Uk ad graficzny
Uk ad!graficzny!tworz !specjalne!szablony,!które!przechowuj !powszechnie!u ywane!znacz-
niki!dla!wielokrotnie!wykorzystywanych!widoków.!W!innych!systemach!szablonowych!jest!to
cz sto!osi gane!poprzez!tworzenie!plików!z!szablonami!nag ówka!i!stopki,!które!s !w czane
do!szablonu!strony.!Rails!dzia a!odwrotnie! !nag ówki!i!stopki!s !zdefiniowane!w!jednym
pliku!wystroju!graficznego,!a!stamt d!do czana!jest!tre !strony.!Pliki!uk adu!graficznego!s
przechowywane!w!app/views/layouts!i!domy lnie!Rails!najpierw!poszuka!tego,!którego!nazwa
jest!taka!sama!jak!aktualnego!kontrolera,!np.!chapter2.rhtml.!Je li!Rails!takiego!pliku!uk adu
graficznego!nie!znajdzie,!poszuka!pliku!nazwanego!application.rhtml.!Zawarto !pliku!wystroju
graficznego!mo e!wygl da !nast puj co:
Moja Aplikacja Rails <%= javascript_include_tag "prototype" %>
<%= yield %>
Najwa niejsz !cz ci ,!o!której!nale y!wspomnie ,!jest!<%= yield %>.!Jej!zadaniem!jest!do -
czenie!kodu!z!szablonu!widoku.!Innymi!s owy,!spowoduje!wstawienie!kodu!szablonu!widoku
do!pliku!uk adu!graficznego.!Prosz !nie!zapomina !o!do czeniu!tego!wywo ania!w!pliku!uk adu
graficznego,!bo!w!przeciwnym!razie!strony!mog !si !wydawa !puste.
Cz ci
Cz ci!s !podszablonami!zaprojektowanymi!dla!fragmentów!z o onych!ze!znaczników,!które
wykorzystywane!s !ponownie! !albo!np.!chce!si !je!trzyma !w!osobnym!pliku,! eby!pliki
szablonów!pozosta y!przejrzyste.!Cz ci!s ! atwe!do!zidentyfikowania,!poniewa !ich!nazwy
zawsze!zaczynaj !si !od!znaku!podkre lenia.!Na!przyk ad,!mo na!stworzy !plik!app/views/
chapter2/_person.rhtml!zawieraj cy:
<%= person.name %>
Z!g ównego!szablonu!mo na!by!by o!za czy !tak !cz :
<%= render :partial => "person" %>
Jest!troch !magii!wplecionej!w!przekazywanie!zmiennych!do!cz ci.!Poniewa !ta! cz ! jest
nazwana!"person#,!g ówny!szablon!b dzie!szuka !zmiennej instancji @person!i!przekazywa !j
do!cz ci!jako!zmienn !lokaln !person.!Co!je li!przyk adowa!zmienna!nie!pasowa aby!do!na-
zwy!cz ci?!Wtedy!trzeba!j !przekaza !jawnie!jak!tu:
<%= render :partial => "person", :locals => { :person => @adrian } %>
Wszystkie!pary!klucz!%!warto !w!tablicy!asocjacyjnej!:locals!b d !dost pne!jako!zmienne
lokalne!cz ci.
Do !cz stym!zastosowaniem!cz ci!jest!przegl danie!tablicy!obiektów!i!generowanie!cz ci
dla!ka dego!obiektu.!Metoda!render!sprawia,! e!jest!to!proste!dzi ki!opcji!:collection.!Na
przyk ad:
<%= render :partial => "person", :collection => @people %>
Rails pojawia si na horyzoncie 37
W!tym!przyk adzie!g ówny!szablon!zawiera!tablic !@people,!która!b dzie!przegl dana,!a!ka dy
element!tablicy! !zmienna!lokalna!person! !zostanie!przekazany!do!cz ci.
Domy lnie!szablony!cz ci!powinny!znajdowa !si !w!tym!samym!katalogu!co!szablon!g ówny.
Aby!wykorzysta !cz ci!z!poziomu!innych!kontrolerów,!wystarczy!doda !nazw !katalogu!jako
przedrostek.!Na!przyk ad:
<%= render :partial => "chapter1/person" %>
Pomimo! e!g ównym!szablonem!jest!chapter2/index.rhtml,!cz !b dzie!generowana!na!podstawie
pliku!chapter1/_person.rhtml.
Pomocniki
Pomocniki! s ! prostymi! metodami! Ruby! dost pnymi! w! szablonach,! dostarczaj cymi! innego
sposobu!na!to,!by!szablon!pozosta !czysty!i!czytelny.!Dla!ka dego!kontrolera!tworzony!jest
jeden!plik!pomocnika,!zatem!Chapter2Controller!b dzie!powi zany!z!plikiem!app/helpers/
chapter2_helper.rb.!Je li!chce!si !mie !pomocnika!dost pnego!dla!wszystkich!kontrolerów,!na-
le y!zdefiniowa !go!w!application_helper.rb.
Rails!dostarcza!szereg!wbudowanych!pomocników,!które!s !powszechnie!u ywane! !w a ci-
wie!ju !widzieli my!kilka!z!nich.!W!cz ci!"Uk ad!graficzny#!powy ej!czwarty!wiersz!jest!wy-
wo aniem!pomocnika:
<%= javascript_include_tag "prototype" %>
javascript_include_tag()!jest!metod !Ruby!zdefiniowan !przez!Rails,!która!pobiera!jako!ar-
gument! a cuch!znaków!(albo!tablic ! a cuchów!znaków)!i!zwraca!fragment!HTML,!jak!np.:
Innym!u ytecznym!pomocnikiem!jest!h,!który!zamienia!HTML!na!czysty!tekst.!Na!przyk ad,
<%= h @foo %>!zapobiegnie!zwróceniu!znaków!specjalnych!HTML!w!wyj ciu,!zamieniaj c!je!na
encje,!co!jest!wa nym!posuni ciem!ze!wzgl dów!bezpiecze stwa!przy!wy wietlaniu!danych
wprowadzonych! przez! u ytkownika.! Implikacj ! t ! b dziemy! rozwa a ! dok adniej! w! roz-
dziale!8.
By !mo e!najcz ciej!u ywanym!pomocnikiem!jest!link_to,!który!w!prosty!sposób!generuje
cze.!Na!przyk ad:
<%= link_to "Kliknij tutaj", :url => "/chapter2/myresponse" %>
Ten!pomocnik!zwraca:!
Kliknij tutaj.
Jest!to!ca kiem!trywialny!przyk ad,!ale!interesuj c !spraw !jest!to,! e!zamiast!przekazywania
zwyk ego!adresu!URL!jako!parametru!mo na!przekaza !nazw !kontrolera,!nazw !akcji!i!inne
parametry! ! a! URL! zostanie! odpowiednio! skonstruowany.! Wspania e! tutaj! jest! to,! e! gdy
zmienia! si ! cie ki! aplikacji,! cza! automatycznie! zostan ! zmienione! tak,! aby! pasowa y! do
zmienionych! cie ek.
<%= link_to "Kliknij tutaj", :action => "myresponse" %>
Wyj cie!tej!wersji!jest!takie!samo!jak!powy ej.!Prosz !zauwa y ,! e!nie!okre lali my!nazwy!kon-
trolera! !zosta a!ona!pomini ta.!Rails!domy la!si ,! e!chcemy!u y !tego!samego!kontrolera,
w!którym!w a nie!si !"znajdujemy#.
38 Rozdzia 2. Pierwsze kroki
Czytaj dalej...
Wyszukiwarka
Podobne podstrony:
informatyka ajax wzorce projektowe michael mahemoff ebookinformatyka wordpress 3 instalacja i zarzadzanie lukasz wojcik ebookinformatyka laptopy dla seniorow bartosz danowski ebookinformatyka marketing wirusowy w internecie piotr r michalak ebookinformatyka wordpress praktyczne projekty witold wrotek ebookinformatyka jquery kod doskonaly pawel mikolajewski ebookinformatyka jquery poradnik programisty wlodzimierz gajda ebookinformatyka asembler leksykon kieszonkowy dawid farbaniec ebookRuby on Rails cwiczeniabiznes i ekonomia wyznania mowcy spraw by ludzie cie sluchali scott berkun ebookinformatyka 3ds max leksykon wojciech pazdur ebookinformatyka ruby leksykon kieszonkowy michael fitzgerald ebookinformatyka elektronika leksykon kieszonkowy witold wrotek ebookAjax on Javawięcej podobnych podstron