Spis treści

Przedmowa .................................................................................................................... 7 1. Przygotowania do wdrażania Ajaksa ......................................................................... 15 Technologie ajaksowe Początkowe porządkowanie Przekształcanie tabel na układ strony oparty na CSS Ciąg dalszy zmian — element po elemencie Radzenie sobie ze specyfiką przeglądarek Zrozumienie potrzeb użytkowników Projektowanie szkieletu witryny Stopniowe usprawnianie a remont generalny

17 20 25 29 30 33 36 39

2. Elementy Ajaksa .......................................................................................................... 41 Aplikacje sieciowe Przygotowywanie obiektu do użytku Przygotowywanie i wysyłanie żądania Przetwarzanie ajaksowych odpowiedzi Punkty końcowe, zabezpieczenia języka JavaScript i widgety Bezpieczeństwo Pierwszy rzut oka na wydajność Ostatnie słowo o asynchroniczności i synchroniczności

41 48 50 56 71 74 75 76

3. Narzędzia i pojęcia związane z Ajaksem ................................................................... 79 Prototype script.aculo.us Rico Dojo Inne biblioteki

80 87 90 92 99

3

4. Efekty interaktywne .................................................................................................. 103 Obsługa zdarzeń zgodna z Ajaksem Informacje w trybie JIT Podgląd na stronie Zanikanie kolorów w wyniku sukcesu lub niepowodzenia

104 110 121 126

5. Przestrzeń — ostateczna granica ............................................................................. 135 Przestrzeń w poziomie — accordion Strony z zakładkami Nakładanie

136 159 170

6. Dane dynamiczne .......................................................................................................177 Edycja w miejscu Edycja w miejscu — wydajność, bezpieczeństwo i dostępność Wyróżnianie zmian Jeszcze raz o dostępności aktualizacji na stronie Walidacja na żywo Wydajność i dwuetapowe zatwierdzanie Efekty bibliotek zewnętrznych służące do obsługi danych

178 188 191 202 205 208 211

7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych ............................. 215 Wyzwanie — stronicowana zawartość Zapamiętywanie miejsc Trwałość w starym i nowym stylu — ramię w ramię Nowy wygląd strony Analiza końcowa

216 235 242 249 252

8. Dodawanie zaawansowanych efektów wizualnych ...............................................253 Zaawansowane sztuczki z CSS Skalowalna grafika wektorowa Krótki przegląd języka SVG Mikser — SVG i Ajax Przyszłość grafiki

254 264 269 273 280

9. Witryny typu mashup ................................................................................................ 281 Wyświetlanie map za pomocą Google’a Druga usługa — Flickr Dodawanie usług Technorati do witryny mashup Modyfikowanie witryny mashup Nowa wersja klientów Podsumowanie informacji o witrynach mashup

4

|

Spis treści

282 288 299 307 316 325

10. Skalowanie, infrastruktura i tworzenie witryn od podstaw ................................... 327 Platformy — ścisłe czy luźne powiązanie Usługi sieciowe — zasoby i bezpieczeństwo Biblioteki Ajaksa — własne czy zewnętrzne? Projektowanie aplikacji ajaksowych od podstaw Rekomendowane platformy A więc naprzód z Ajaksem

328 329 331 332 337 342

Skorowidz ..................................................................................................................343

Spis treści

|

5

6

|

Spis treści

Przedmowa

Ajax — po części rewolucja, po części ewolucja, a zdaniem niektórych tylko slogan reklamowy. Ajax to ogólne pojęcie, które obejmuje szereg technologii: • języki oparte na znacznikach, takie jak HTML, XHTML, XML i SVG; • język JavaScript; • języki CSS i XSLT; • w końcu — choć nie są najmniej istotne — obiekty przeglądarek, włączając w to obiekt

canvas oraz obiekt, który stanowi istotę Ajaksa: XMLHttpRequest.

Choć wzrost zainteresowania Ajaksem miał miejsce stosunkowo niedawno, większość związanych z nim technologii jest dostępna od około 10 lat. Z czego wynika ich obecna popularność? Ajax to coś więcej niż zbiór technologii. Jego zastosowanie wiąże się z rozwojem stron i aplikacji internetowych w nowym kierunku. Programiści planowali to już wcześniej, jednak nigdy nie mieli narzędzi umożliwiających tworzenie takich aplikacji. Obecnie specyfikacje, które 10 lat temu były zupełną nowością, osiągają dojrzałość, a co ważniejsze, są dobrze obsługiwane w przeglądarkach internetowych. Wciąż pojawiają się także nowe specyfikacje, a producenci narzędzi współpracują ze sobą w większym stopniu niż kilka lat wcześniej. Wiele lat temu, kiedy projektanci stron zaczęli po raz pierwszy nieśmiało wspominać o dodawaniu interaktywności do stron internetowych, programiści byli ograniczeni przez działanie przeglądarek, które obsługiwały zupełnie odmienne modele, a czasami nawet inne języki skryptowe. Stosowanie kaskadowych arkuszy stylów (ang. Cascading Style Sheets — CSS) jako uniwersalnej techniki dodawania warstwy prezentacji strony było utrudnione z powodu różnej interpretacji stylów przez poszczególne przeglądarki, nie wspominając już o stosowaniu własnych rozszerzeń. Obecnie obsługa arkuszy CSS jest powszechna, a choć wciąż występują pewne „specyficzne” efekty w niektórych systemach, większość przeglądarek obsługuje niemal wszystkie specyfikacje, a więcej możliwości jest otwartych, niż zamkniętych. W przypadku skryptów prace organizacji standaryzacyjnej ECMA doprowadziły do powstania języka ECMAScript. Jest to wersja języka JavaScript powszechnie przyjęta przez producentów i obsługiwana we wszystkich najważniejszych narzędziach — zarówno internetowych, jak i innych. Języki oparte na znacznikach stały się dużo bardziej złożone i następuje odejście od chaotycznego HTML do bardziej zdyscyplinowanego XHTML. Powstają także nowe aplikacje języka XML, na przykład skalowalna grafika wektorowa (ang. Scalable Vector Graphics — SVG), która 7

umożliwia dodawanie interaktywnej grafiki niezależnej od wtyczek czy obiektów zewnętrznych. Wiąże się z tym wprowadzenie obiektów canvas, które są niezależne od stosowanego języka znaczników. Ich rozwój odbywa się w ramach prac nad językiem HTML5. Ten język to etap pośredni pomiędzy starszymi wersjami HTML a bardziej rygorystycznym językiem XHTML. Wciąż jednak nie zrezygnowano ze starych, niestandardowych obiektów, jednak nie są one implementowane wyłącznie w kilku przeglądarkach, raczej stają się one powszechnie dostępne. Jednym z takich obiektów jest XMLHttpRequest, który umożliwia wywoływanie usług sieciowych bezpośrednio z poziomu stron, a następnie dynamiczne przetwarzanie wyników bez konieczności ponownego ładowania strony. Co to oznacza dla programistów i użytkowników? Możliwość przeczytania artykułu, kliknięcia go i modyfikowania w jednym miejscu — na tej samej stronie. Można także usuwać wiersze z tabeli, a operacja usuwania odbędzie się natychmiast. To samo dotyczy aktualizacji danych. Można też kategoryzować zdjęcia bez konieczności ponownego wczytywania strony i fotografii. Można też rozwinąć zdjęcie, po prostu klikając jego miniaturę. Również stosowanie formularzy znacznie się zmieniło. Można dokonać wyboru na jednej liście, a spowoduje to automatyczne zapełnienie innej listy. Można sortować dane w tabeli, używając przeciągania, zwężać pola, aby zrobić więcej miejsca, a także klikać zakładki w celu wyświetlenia fragmentów dużych formularzy lub innych informacji, a wszystko to bez odświeżania strony. Oczywiście znaczenie pojęcia „strona” zmieniło się, a nowe podejście ma dobre i złe cechy. Trudno jest określić, jak oszacować koszt reklamy za „wyświetlenie strony”, jeśli można wczytać setki stron bez żadnej operacji odświeżania. Silniki wyszukujące mają problemy z obsługą dynamicznie generowanych odnośników, podobnie zresztą jak programy odczytujące tekst z ekranu. W sytuacji kiedy obsługa skryptów jest wyłączona lub w ogóle jej nie ma, Ajax nie będzie działał, ponieważ zależy od języka JavaScript. W tym miejscu na scenę wchodzi stopniowe usprawnianie (ang. progressive enhancement). Termin ten, ukuty przez Stevena Champeona, określa podejście, zgodnie z którym efekty Ajaksa należy dodawać jako usprawnienia istniejących technologii sieciowych, a nie jako zastępnik. Inaczej mówiąc, wciąż należy tworzyć bardziej tradycyjne aplikacje sieciowe, które wykorzystują przesyłanie formularzy w celu aktualizacji tabel, ale następnie można usprawniać je, dodając na przykład możliwość aktualizacji tabeli po zmianie zawartości pola bez konieczności przesyłania formularza. Jeśli obsługa skryptów jest wyłączona, stronę z zakładkami można wyświetlać jako szereg pionowych sekcji. Dane wciąż będą dostępne, jednak uporządkowane w inny sposób. W pokazie slajdów można wyświetlać obrazy, kiedy zażąda tego albo aplikacja w języku PHP znajdująca się na komputerze z systemem Unix, albo wywołanie języka JavaScript z przeglądarki Firefox, Safari czy Internet Explorer. Dzięki zastosowaniu stopniowego usprawniania nie jest istotne, czy skrypty są włączone, czy nie, ponieważ funkcjonalność jest dostępna zawsze, tylko w odmienny sposób. Jednocześnie liczne udogodnienia, które Ajax pozwala dodać do aplikacji sieciowych, wciąż można udostępniać około 80 procentom osób, które używają odpowiednich przeglądarek z włączoną obsługą skryptów. Co jest z tego najlepsze dla Ciebie? Jesteś już w połowie drogi. 8

|

Przedmowa

Odbiorcy Jednym z głównych założeń co do Czytelników książki dotyczącej dodawania Ajaksa jest to, że są oni projektantami stron, którzy chcą przenieść tradycyjne aplikacje sieciowe na wyższy poziom, dodając efekty Ajaksa. Możliwe, że używasz już formularzy sieciowych, stron generowanych po stronie serwera i statycznej zawartości, a przynajmniej wiesz, jak działają tradycyjne aplikacje sieciowe. Masz szczęście — „część biznesowa” aplikacji jest już gotowa. Teraz pora przenieść stronę na następny poziom. Najpierw jednak warto zapoznać się z dokładniejszymi założeniami co do osób, które są odbiorcami tej książki. Została ona napisana dla programistów, którzy: • mają pewne doświadczenie z opartymi na znacznikach językami tworzenia stron interne-

towych, takimi jak HTML czy XHTML; • mają podstawową wiedzę na temat XML i zdają sobie sprawę, że dokumenty w tym języ-

ku muszą być zarówno prawidłowe, jak i poprawnie skonstruowane;

• znają relacyjne bazy danych i używali ich albo w środowisku produkcyjnym, albo po pro-

stu z ciekawości; • stosowali język CSS i potrafią odczytać większość arkuszy CSS; • używali języka JavaScript i znają go dość dobrze, a także wiedzą, jak działają obiektowe

mechanizmy tego języka; • są bardziej zainteresowani usprawnianiem istniejących aplikacji niż tworzeniem tak zwa-

nych bogatych aplikacji internetowych (ang. Rich Internet Applications — RIA). Nie zakładam, że jesteś ekspertem w jednej z wymienionych wcześniej technologii, a jedynie że masz pewne doświadczenie w korzystaniu z nich i z drobną pomocą (albo w postaci materiałów z internetu, albo innej książki, specyficznej dla danej technologii) potrafisz zrozumieć działanie każdej aplikacji. Ostatni element na liście wymagań jest najważniejszy. Ta książka nie obejmuje zagadnień niezbędnych do utworzenia zastępnika programu PowerPoint w postaci strony internetowej lub tworzenia gier sieciowych albo innych rozwiązań opartych całkowicie na skryptach. Ta książka dotyczy wyłącznie rozbudowy istniejących aplikacji przez dodawanie do nich efektów Ajaksa. Nie opisuje ona zastępowania istniejących aplikacji ani tworzenia od podstaw w pełni ajaksowych rozwiązań. Wydawnictwo Helion ma w ofercie inne ciekawe książki, bardziej odpowiednie dla osób zainteresowanych pracą nad następnym arkuszem kalkulacyjnym opartym na przeglądarce WWW. Ta książka ma jedynie pomóc w tworzeniu bardziej żywych, zajmujących, interesujących i w dużo większym stopniu interaktywnych stron internetowych.

Zawartość książki Tej książki nie trzeba czytać od początku do końca. Każdy jej rozdział jest tak niezależny, jak to możliwe. Mimo to występują pewne odwołania do wcześniejszych rozdziałów, zwłaszcza jeśli chodzi o stosowanie biblioteki Adding Ajax, której rozwój jest opisany w książce. Cały materiał jest dostępny w kodzie źródłowym, który można pobrać z internetu. Zalecam zapoznanie się z rozdziałami 1. i 2. przed przejściem do następnych części.

Przedmowa

|

9

Poniżej znajduje się krótki przegląd wszystkich rozdziałów. Rozdział 1. „Przygotowania do wdrażania Ajaksa” Ten rozdział zawiera przegląd technologii Ajaksa, jednak przedstawia także znaczenie przygotowania strategii modyfikowania witryny przed przystąpieniem do pisania kodu. Obejmuje wagę określenia użytkowników oraz zawiera wskazówki dotyczące tego zadania. Opisuje także znaczenie standardów oraz uzyskania przed rozpoczęciem dodawania efektów Ajaksa pewności, że strona internetowa jest prawidłowa i stabilna. Po przeczytaniu tego rozdziału będziesz mógł rozpocząć dodawanie wszystkich efektów Ajaksa opisanych w następnych rozdziałach. Rozdział 2. „Elementy Ajaksa” Ten rozdział przedstawia szczegółowy opis istoty Ajaksa — korzystanie z obiektów XMLHttpRequest. Przedstawiono tu, jak zażądać usług sieciowych przy użyciu żądań GET i POST, a także jak używać dynamicznych skryptów do pobierania danych z innych domen. Rozdział opisuje różne formaty danych: HTML, XML, a także nowszą notację JSON (ang. JavaScript Object Notation). Omówiona jest także asynchroniczna natura Ajaksa, jak również pewne zagadnienia i problemy związane z wydajnością. Rozdział 3. „Narzędzia i pojęcia związane z Ajaksem” Ten rozdział przedstawia kilka z najważniejszych bibliotek Ajaksa, między innymi: Prototype, script.aculo.us, Rico i MochiKit. Choć większość przykładów przedstawionych w tej książce nie używa bibliotek zewnętrznych, w każdym rozdziale znajduje się fragment kodu korzystający z nich, dzięki czemu możesz zaznajomić się z danym efektem, nauczyć się rozszerzać biblioteki i tworzyć własne, a także poznasz problemy związane z tworzeniem rozwiązań przy użyciu wielu bibliotek Ajaksa. Rozdział 4. „Efekty interaktywne” Ten rozdział dotyczy interaktywności, jaką zapewnia Ajax, włączając w to używanie zdarzeń i metod ich obsługi w różnych przeglądarkach, a także techniki działające w przypadku stosowania kilku bibliotek. W tym rozdziale znajdują się także informacje o tworzeniu podpowiedzi, pobieraniu danych z systemu pomocy z zewnętrznych źródeł, przygotowywaniu efektu „zanikania” w celu sygnalizowania zmian, podglądzie w trybie „na żywo” i łączeniu tej ostatniej techniki z aktualizacjami. Rozdział 5. „Przestrzeń — ostateczna granica” Ten rozdział opisuje stronę internetową jako przestrzeń i przedstawia trzy popularne podejścia do zarządzania nią. Jedno z nich polega na stosowaniu kontrolki accordion, w której przestrzeń jest zwijana w pionie. Inne to strona z zakładkami, gdzie strony są wyświetlane po kliknięciu odpowiednich zakładek. Trzecia technika to nakładanie, kiedy to strona jest zakrywana wiadomościami, zdjęciami lub innymi materiałami. Ten rozdział opisuje także, jak przygotować kompletne „efekty”, dzięki czemu można korzystać z efektów z jednej biblioteki w wielu aplikacjach i na licznych stronach. Dowiesz się także, jak można zintegrować efekty z żądaniami usług sieciowych. Rozdział 6. „Dane dynamiczne” W tym rozdziale poznasz wiele szczegółów technicznych. Dotyczy on aktualizowania danych, włączając w to dodawanie nowych informacji, usuwanie ich i wprowadzanie zmian, a wszystko to na jednej stronie. Ten rozdział dotyczy głównie usprawniania istniejących aplikacji sieciowych, dlatego aktualizowanie przy użyciu formularzy i aktualizowanie za

10

|

Przedmowa

pomocą Ajaksa działają równolegle. Przedstawiono tu także technikę „zanikania”, która poprawia styl aplikacji i zapewnia informacje zwrotne użytkownikom. Rozdział obejmuje także zagadnienia związane z wydajnością i bezpieczeństwem wynikające z dostępu do bazy danych za pomocą Ajaksa, na przykład w celu zastosowania aktualizacji „na żywo” i efektów takich jak sortowanie za pomocą przeciągania. Rozdział 7. „Historia, nawigacja i miejsca w aplikacjach jednostronicowych” W tym rozdziale opisany jest wpływ Ajaksa na działanie sieci WWW, włączając w to brak funkcjonalności przycisku Wstecz, utratę historii w przeglądarce, dynamiczne efekty znikające po odświeżeniu strony i możliwość tworzenia odnośników oraz zakładek dla ajaksowych „stron”. Ten rozdział obejmuje podejścia, które można zastosować w celu przywrócenia wielu z utraconych funkcji WWW, a także opisuje, jak rozwinąć w sobie zdolność oceny tego, ile Ajaksa można użyć, aby jednocześnie zachować najbardziej wartościowe cechy środowiska WWW. Rozdział 8. „Dodawanie zaawansowanych efektów wizualnych” Ten rozdział to czysta przyjemność. Ciężko pracowałeś, więc teraz możesz wziąć do ręki pędzel lub zestaw do malowania palcami i trochę się pobawić. W tym rozdziale opisano pewne zaawansowane efekty CSS, włączając w to przeciągane „suwaki”, stronicowanie, korzystanie z języka SVG oraz obiektu Canvas. Choć obsługa tych dwóch ostatnich technik nie jest powszechna, wciąż się poprawia, a zastosowanie ich do usprawnienia bardziej tradycyjnych sposobów prezentacji danych może okazać się ciekawe i skuteczne. Rozdział 9. „Witryny typu mashup” Ten rozdział dotyczy aplikacji typu mashup. Jednym z najciekawszych aspektów Ajaksa jest możliwość dodawania usług sieciowych — własnych i innych producentów — i łączenie danych bezpośrednio na stronach internetowych na wiele różnych sposobów. Przykłady z tego rozdziału oparte są na mapach z Google’a, danych z witryny Flickr oraz informacjach z blogów z Technorati i łączą je przy użyciu eleganckiego interfejsu w postaci strony z zakładkami. Pokazano tu, jak można zaimplementować to rozwiązanie tak, aby działało zarówno z włączoną, jak i wyłączoną obsługą skryptów. Rozdział 10. „Skalowanie, infrastruktura i tworzenie witryn od podstaw” Ten rozdział pozwala wziąć długi oddech po wielu fragmentach kodu, a także po raz drugi przyjrzeć się zagadnieniom dotyczącym wydajności, architektury i bezpieczeństwa. Poruszam tu tematy związane z prywatnością usług sieciowych i wymaganiami stawianymi przez zasoby rozproszone, a także opisuję, jak ściśle należy powiązać komponenty serwerowe z klienckimi. Ten rozdział przedstawia także tworzenie aplikacji ajaksowych od podstaw i zawiera przegląd wielu platform dostępnych w różnych językach, takich jak: Java, języki z rodziny .NET, PHP, Perl, Ruby i Python. PHP to prawdopodobnie najbardziej popularny język programowania używany do tworzenia aplikacji sieciowych, dlatego używam go we wszystkich komponentach działających po stronie serwera aplikacji ajaksowych. Wynika to z tego, że choć niektórzy Czytelnicy mogą znać język Python, inni — Ruby, jeszcze inni — języki z rodziny .NET lub Javę, najwięcej osób zna PHP, a jeśli nawet ktoś nie zna tego języka, może nauczyć się go szybciej niż innych. Ponadto wszystkie znane mi firmy świadczące usługi hostingowe zapewniają obsługę PHP.

Przedmowa

|

11

Konwencje używane w tej książce W tej książce używane są następujące konwencje typograficzne: Pogrubienie Służy do przedstawiania nowych i ważnych pojęć. Kursywa Służy do przedstawiania adresów URL, nazw i rozszerzeń plików. Czcionka o stałej szerokości

Oznacza kod w szerokim znaczeniu tego słowa. Obejmuje to polecenia, opcje, przełączniki, zmienne, atrybuty, klucze, żądania, funkcje, typy, klasy, przestrzenie nazw, metody, moduły, właściwości, parametry, wartości, obiekty, zdarzenia, metody obsługi zdarzeń, znaczniki języków XML i HTML, makra, zawartość plików oraz dane wyjściowe poleceń. Pogrubiona czcionka o stałej szerokości

Przedstawia polecenia i inny tekst, które użytkownik powinien wpisać w dosłownej postaci. Kursywa o stałej szerokości

Określa tekst, który należy zastąpić wartościami podanymi przez użytkownika lub wynikającymi z kontekstu. Ta ikona wyróżnia wskazówkę, sugestię lub ogólny komentarz.

Ta ikona oznacza ostrzeżenie lub uwagę.

W książce wymienione są witryny i strony internetowe, które pomogą Czytelnikom zlokalizować pomocne informacje dostępne w internecie. Zwykle podany jest zarówno adres (URL), jak i nazwa (tytuł lub nagłówek) strony. Niektóre adresy są dość skomplikowane, jednak prawdopodobnie strony można otworzyć łatwiej niż za ich pomocą — przy użyciu ulubionej wyszukiwarki, na podstawie nazwy strony, zwykle wpisując ją w cudzysłowach. Nazwa strony może także pomóc, jeśli znalezienie jej na podstawie adresu okaże się niemożliwe. Strona mogła zostać przeniesiona w inne miejsce, dlatego użycie nazwy może być jedynym sposobem na jej odszukanie.

Korzystanie z przykładowego kodu Ta książka ma pomóc w wykonywaniu zadań programistycznych. Mówiąc ogólnie, możesz korzystać z przykładowego kodu we własnych programach i dokumentacji. Nie musisz kontaktować się z wydawnictwem w celu uzyskania zezwolenia, chyba że powielasz duże fragmenty kodu. Na przykład napisanie programu, który używa kilku fragmentów kodu z tej książki, nie wymaga pozwolenia. Sprzedaż lub dystrybucja płyt CD-ROM z przykładami z książek wydawnictwa O’Reilly wymaga zezwolenia. Odpowiedź na pytanie przez zacytowanie książki

12

|

Przedmowa

i przytoczenie przykładowego kodu nie wymaga pozwolenia. Dołączenie dużych ilości kodu z tej książki do dokumentacji produktu wymaga zezwolenia. Mile widziane, choć niewymagane, jest podawanie pochodzenia kodu. Zwykle dane obejmują tytuł, autora, wydawcę i numer ISBN książki, na przykład: „Adding Ajax, Shelley Powers, prawa autorskie Shelley Powers 2007, 978-0-596-52936-9”. Jeśli chcesz wykorzystać kod w sposób, który wymaga zezwolenia, skontaktuj się z wydawnictwem, pisząc na adres [email protected].

Podziękowania Książki tego typu nie powstają dzięki wyobraźni i pracy samego autora; są one efektem wysiłku wielu osób, włączając w to te, które zdefiniowały omawiane zagadnienia, rozwiązywały problemy i tworzyły biblioteki. Chcę podziękować autorom wszystkich bibliotek wymienionych w tej książce za bezpłatne i chętne ich udostępnienie. Większość z tych programistów nie otrzymuje żadnych korzyści finansowych w zamian za włożoną pracę, a mimo to udostępniają dopracowane witryny, dokumentację, poprawki błędów i nowe wersje, a wszystkie te elementy można pobrać i wykorzystać w aplikacjach. Chcę także podziękować Jonowi Sullivanowi z Public Domain Photos (http://pdphoto.org/About.php) za wszystkie zdjęcia, które bezpłatnie udostępnił, włączając w to fotografię drinka „appletini” wykorzystaną w aplikacji z rozdziału 2. Dziękuję także osobom, które współpracowały ze mną przy tworzeniu tej książki, włączając w to recenzentów: Elaine Nelson, Dare’a Obasanjo, Rogera Johanssona, Jesse Skinnera, Roya Owensa, Anthony’ego Holdera III, Anne Zelenkę i Kathy Sierrę. Chcę także podziękować redaktorowi Simonowi St. Laurentowi. Jest to moja trzecia napisana samodzielnie książka wydana przez wydawnictwo O’Reilly, a ci, którzy mnie znają, niech podziwiają Simona za jego cierpliwość. Dziękuję także osobom, które pomogły mi złożyć tę książkę w jedną całość: Lucie Haskins, Rebie Libby, Laurelowi Rumie i Amy Thomson. Niniejsza książka wiele zyskała dzięki wsparciu, które otrzymałam.

Przedmowa

|

13

14

|

Przedmowa

ROZDZIAŁ 1.

Przygotowania do wdrażania Ajaksa

Ajax umożliwia dodawanie do aplikacji sieciowych natychmiastowych informacji zwrotnych i zapewnianie ich elastyczności na niedostępnym dotąd poziomie. Czasy, kiedy formularze na stronach internetowych dawały wyniki dopiero po przesłaniu ich na serwer, powoli odchodzą w przeszłość. To samo dotyczy statycznych stron internetowych z niezmiennym kodem HTML (ang. Hypertext Markup Language), który umożliwia tylko odczyt i nie reaguje na działania użytkownika. Obecnie projektanci mogą bezpośrednio na stronie udostępniać funkcjonalność, która kiedyś wymagała przesłania strony na serwer i z powrotem. Za pomocą Ajaksa komponenty strony można w razie potrzeby zwijać, rozwijać oraz wypełniać na żądanie, a prezentowanie informacji zwrotnych użytkownikom obejmuje techniki od zanikania kolorów do systemu starannie rozmieszczonych komunikatów. Do kierowania żądań do usług sieciowych można używać wszystkich elementów strony, co prowadzi do tworzenia lepiej reagujących stron i zmniejsza frustrację użytkowników. Efekt to szybciej reagująca i bardziej zwięzła aplikacja. W aplikacjach ajaksowych można także używać szeregu bibliotek przeznaczonych dla Ajaksa, usług sieciowych takich firm, jak Google, Amazon, Adobe, Microsoft czy Yahoo!, a także bibliotek niezależnych, na przykład Prototype, Dojo, Mochikit i jQuery. Często można korzystać z różnych istniejących usług sieciowych, ponieważ albo współdziałają one z Ajaksem, albo można je łatwo zmodyfikować pod tym kątem. Ajax jest wyjątkowy, ponieważ stanowi nowatorskie podejście oparte na dość dojrzałych technologiach. Nawet niektórych dość skomplikowanych efektów można używać wygodnie i bezpiecznie. Programiści mogą pracować spokojnie, wiedząc, że każdy efekt powinien działać w większości współczesnych przeglądarek, jeśli nie we wszystkich. Programowanie za pomocą Ajaksa stawia pewne wyzwania, jednak tak naprawdę jest to technologia typu „80 — 20” — 80 procent osób zainteresowanych tą technologią potrzebuje jedynie około 20 procent jej możliwości. Duża część dyskusji na temat Ajaksa dotyczy granic jego zastosowań. Z tego powodu może się wydawać, że programiści używają bardzo złożonej platformy. Może to przytłaczać, jeśli projektant dopiero zastanawia się nad tym, jak użyć Ajaksa we własnych witrynach, jednak zwykle stosowanie grupy technologii ajaksowych jest dość proste, a obsługi wymaga tylko kilka elementów. Nie trzeba spędzać długich miesięcy, czytając wszystkie książki o Ajaksie i wypróbowując każdą bibliotekę, aby dodać wydajne i ciekawe funkcje Ajaksa, jeśli — a jest to bardzo istotne

15

— programista rozpocznie od prostych efektów, a dopiero potem zacznie używać bardziej rozbudowanych. Ta książka była pisana z założeniem, że jesteś jednym z bardziej szczęśliwych programistów poznających Ajaksa, ponieważ masz już gotową aplikację sieciową lub stronę internetową i chcesz dodać do niej nowe efekty. Pozwala to stawiać programiście pewne kroki na ścieżce stopniowego usprawniania, co pozwala automatycznie stać się dobrym programistą Ajaksa. Pojęcie stopniowego usprawniania zostało po raz pierwszy użyte przez Stevena Champeona w serii artykułów w witrynie Webmonkey i w prezentacji SXSW (więcej informacji historycznych na ten temat zawiera Wikipedia — http://en.wikipedia.org/wiki/Progressive_enhancement). To podejście oznacza, że programista powinien rozpocząć od utworzenia witryny lub aplikacji, która będzie uporządkowana, zgodna ze standardami i powszechnie dostępna, a dopiero potem może dodać efekty specjalne, używając technik takich jak Ajax. Inni programiści i projektanci, na przykład Dave Shea i Jeremy Keith, rozszerzyli to podejście. Artykuł w Wikipedii dotyczący stopniowego usprawniania zawiera następujące wskazówki: • Cała podstawowa treść powinna być dostępna we wszystkich przeglądarkach. • Cała podstawowa funkcjonalność powinna być dostępna we wszystkich przeglądarkach. • Stosowane znaczniki powinny oszczędnie i semantycznie organizować treść. • Zewnętrzne arkusze CSS powinny określać rozbudowany układ. • Dyskretny zewnętrzny kod JavaScript powinien obsługiwać rozszerzone działania. • Należy uwzględniać preferencje ustawione w przeglądarce przez użytkownika końcowego.

Można także użyć wyrażenia „eleganckie ograniczanie” na określenie stopniowego usprawniania. Oznacza ono to samo: strony i aplikacje będą współdziałać ze wszystkimi przeglądarkami, myszami i klawiaturami, a także niezależnie od dostępności programu odczytującego tekst z ekranu, czy włączonych skryptów. Podpisuję się pod podejściem stopniowego usprawniania (eleganckiego ograniczania czy dyskretnych skryptów — nazwa nie ma tu znaczenia), a przykłady w tej książce są z nim zgodne. Choć wprawdzie nie można zastosować wszystkich rodzajów efektów w środowisku bez obsługi skryptów (na przykład efektów ze strony Google Maps, które wymagają Ajaksa), uważam, że nie należy ograniczać dostępu do podstawowej zawartości oraz funkcjonalności witryny tylko ze względu na chęć dodania ładnie wyglądających elementów. Kiedy programista rozpoczyna stosowanie Ajaksa i zastanawia się, których efektów użyć, powinien pamiętać, że najprostsze efekty zwykle dają największe zyski, jeśli uwzględnić czas pracy i włożony wysiłek. Większość projektantów nie próbuje odtworzyć w przeglądarkach działania programów stacjonarnych, a po prostu chce dodać lub rozszerzyć podstawową funkcjonalność istniejących stron internetowych i aplikacji sieciowych. Należą oni do szczęściarzy, ponieważ połowa zadania — udostępnienie podstawowej, nieajaksowej funkcjonalności — została już ukończona. Teraz rozpoczyna się zabawa. Nazwa Ajax została po raz pierwszy użyta przez Jesse Jamesa Garretta w artykule Ajax: A New Approach to Web Applications (http://www.adaptivepath.com/publications/ essays/archives/000385.php). Która wersja jest poprawna — Ajax czy AJAX? Czy jest to jedno słowo, czy akronim od „Asynchronous JavaScript and XML”? Garrett użył pojęcia AJAX jako wygodnej

16

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

nazwy obejmującej zestaw technologii omówionych w niniejszym rozdziale. Jednak to pojęcie wykracza poza samą technologię i wyznacza całkiem nowe spojrzenie na sieć WWW oraz przekraczanie ograniczeń związanych z tradycyjnymi stronami. Obecnie bardzo często używa się nazwy „Ajax” na określenie tego ogólnego podejścia. Dla uproszczenia w tej książce używam nazwy „Ajax”, która faktycznie stała się standardem.

Technologie ajaksowe Ajax nie opiera się na nowych technologiach, a na usprawnieniach i dojrzewaniu istniejących narzędzi oraz środowisk. Kiedy Jesse James Garrett po raz pierwszy definiował to podejście, wymienił następujące powiązane z nim technologie: • XHTML (ang. Extensible HTML) i CSS (ang. Cascading Stylesheets), które służą do określa-

nia układu strony i jej wyświetlania; • XML (ang. Extensible Markup Language) i XSLT (ang. Extensible Stylesheet Language Trans-

formations) — do wymiany danych; • DOM (ang. Document Object Model) — do zapewniania interaktywności; • Wyspecjalizowany obiekt XMLHttpRequest — do obsługi interakcji między klientem a ser-

werem; • Język JavaScript (lub JScript) — do łączenia poszczególnych elementów.

Wszystkie te technologie są dostępne w tej lub innej postaci od wielu lat. Choć największy nacisk w przypadku Ajaksa kładziony jest na żądanie usług sieciowych, to podejście wykracza poza prosty dostęp do danych znajdujących się na stronie. Dotyczy także sposobu traktowania stron internetowych i korzystania z istniejących oraz nowych technologii w celu zwiększania ich interaktywności i skracania czasu reakcji. Obejmuje to nowe spojrzenie na język JavaScript i złożone biblioteki tego języka, jak również świeże spojrzenie na techniki dynamicznego HTML z lat 90. To myślenie wykracza poza ramy strony internetowej, i to niezależnie od tego, czy programista używa tych technik do tworzenia aplikacji odpowiadającej programom stacjonarnym czy — jak w przypadku tej książki — do dodawania użyteczności, iskry i spontaniczności do istniejących stron internetowych.

Naturalny rozwój Ajax to wynik naturalnego rozwoju funkcjonalności po stronie klienta. Gdyby Garrett nie ujął tego podejścia za pomocą jednego słowa, prawdopodobnie zrobiłby to ktoś inny. Społeczność projektantów stron zmierzała już w kierunku eksplozji zainteresowania połączeniem omawianych tu technologii. U zarania internetu cała funkcjonalność aplikacji znajdowała się po stronie serwera. Netscape wprowadził skrypty uruchamiane po stronie klienta, udostępniając język JavaScript, który umożliwiał pewną interaktywność po stronie klienta, jednak same strony internetowe wciąż były statyczne. Następne przeglądarki, na przykład Internet Explorer Microsoftu, miały własną implementację skryptów, aż w końcu wysiłki skupiły się na utworzeniu minimalnej definicji standardów skryptów, co zaowocowało powstaniem języka ECMAScript.

Technologie ajaksowe

|

17

Jednak dopiero praca W3C nad specyfikacjami DOM i CSS pozwoliła na tworzenie bardziej dynamicznych stron i umożliwiła używanie skryptów do modyfikowania, przenoszenia, ukrywania, tworzenia i usuwania poszczególnych elementów stron internetowych. W tym czasie efekty dynamicznych stron internetowych określono mianem dynamicznego HTML (DHTML), a obecnie techniką, która pozwala stosować to podejście, jest Ajax. Obok usprawnień w zakresie skryptów i warstwy prezentacji trwały także prace nad utworzeniem języka znaczników, który byłby niezależny od wszelkich specyficznych języków znacznikowych i umożliwiałby rozszerzanie, a jednocześnie jego stosowanie nie byłoby zbyt skomplikowane. Efekt tych prac, XML, został przedstawiony w 1998 roku. Od tego czasu postęp miał miejsce w wielu kierunkach i nastała era wielkiego rozwoju funkcjonalności. Ta dywergencja w naturalny sposób prowadziła do braku zgodności między przeglądarkami, a niektóre z niespójności występują do dziś. Wśród obiektów specyficznych dla przeglądarek był jeden, który stał się istotą Ajaksa — obiekt ActiveX z przeglądarki Internet Explorer 5 Microsoftu, Microsoft.XMLHTTP. Choć mógł on pozostać obiektem specyficznym dla przeglądarki Internet Explorer, przyciągnął zainteresowanie innych producentów przeglądarek, a na potrzeby Mozilli utworzono odmianę tego obiektu — XMLHttpRequest. Obiekt XMLHttpRequest jest wyjątkowy, ponieważ umożliwia bezpośredni dostęp do asynchronicznych usług sieciowych z poziomu strony internetowej. Zamiast przesyłać dane na serwer za pomocą formularza, a następnie wyświetlać wyniki na odrębnej stronie, dzięki obiektom XMLHttpRequest skrypty mogą wywoływać funkcje znajdujące się na serwerze i przetwarzać zwracane przez nie wyniki bez konieczności odświeżania strony. Asynchroniczny aspekt usług sieciowych oznacza, że strona nie jest zablokowana w czasie oczekiwania na odpowiedź usługi. Garrett wspominał także o zastosowaniu języka XSLT dla danych XML w celu wyświetlania odpowiedzi na żądania skierowane do usług sieciowych. Jednak bardziej popularne podejście polega na manipulowaniu istniejącymi elementami strony i obsłudze odpowiedzi na żądania za pomocą modelu DOM, nowej notacji obiektowej, na przykład JSON (ang. JavaScript Object Notation), oraz danych XML. Podsumowując — rozwój funkcjonalności stron internetowych doprowadził od prostych, statycznych stron do pełni możliwości dostępnych obecnie za pomocą Ajaksa. Na tej drodze znajdowało się kilka przystanków: • statyczne strony internetowe, na których do obsługi prezentacji i formatowania służył ję-

zyk HTML; • interaktywna funkcjonalność zapewniana przy użyciu języka JavaScript i jego odmian, na

przykład JScript; • rozdzielenie warstwy prezentacji od znaczników za pomocą arkuszy CSS; • umożliwienie dynamicznego manipulowania elementami strony za pomocą skryptów; • rozszerzalne znaczniki dostępne w XML; • żądania kierowane do usług sieciowych i przetwarzanie danych XML na stronie.

Technologie — spojrzenie książkowe W czasie pisania tej książki w większości aplikacji ajaksowych stosowany był język JavaScript oparty na specyfikacji ECMA 262 języka ECMAScript. Jest to w mniejszym lub większym stop18

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

niu odpowiednik języka JScript Microsoftu z przeglądarek Internet Explorer 6.x i 7. Przypomina on także język JavaScript 1.5 z przeglądarek opartych na Gecko, takich jak Firefox oraz Camino, i jest obsługiwany w przeglądarkach Opera (9.x), Safari 1.2, Safari WebKit (odmiana rozwojowa przyszłych wersji Safari), Konqueror i innych współczesnych przeglądarkach graficznych. Ta odmiana języka JavaScript jest także obsługiwana w innych agentach klienckich, na przykład w urządzeniach BlackBerry i iPhone. Następna technologia, DOM, umożliwia dostęp do poszczególnych elementów strony oraz ich atrybutów. Techniki i przykłady prezentowane w tej książce są oparte na modelu BOM (ang. Browser Object Model), który zwykle traktuje się jako model DOM, poziom 0, a także na modelu DOM, poziom 1 i 2. Te modele są obsługiwane, choć z różnym powodzeniem i w odmiennym zakresie, przez wymienione wcześniej przeglądarki. Analizując Ajaksa, zwrócę uwagę na różnice występujące pod tym względem między poszczególnymi przeglądarkami. Ponieważ ta książka dotyczy głównie dodawania Ajaksa do istniejących witryn i aplikacji (po stronie klienta), postaram się ograniczyć analizę strony serwera do minimum. Jednak tam, gdzie to konieczne, do przedstawiania funkcjonalności używanej po stronie serwera posłuży język PHP. Jest to jeden z najprostszych i najczęściej używanych języków działających po stronie serwera. Wszystkie przykłady w tej książce są zgodne z językiem XHTML. Wyjątkiem są sytuacje, kiedy XHTML uniemożliwia zastosowanie efektu Ajaksa. Na przykład Google Maps nie współdziała z XHTML, a format strony to HTML 4.01 Strict. Ponadto wszystkie przykłady są uruchamiane w trybie standardowym (a nie quirks) przez dołączenie do strony nagłówka deklaracji DOCTYPE — albo HTML 4.01 Strict, albo XHTML 1.0 Strict. Tryb quirks umożliwia zachowanie zgodności wstecz ze starszymi przeglądarkami i arkuszami stylów. Na przykład Internet Explorer użyje starszego modelu „pudełkowego” do obsługi stylów CSS, jeśli programista nie poda nagłówka DOCTYPE lub ten nagłówek nie określa standardowego typu dokumentu.

Zmiana rozszerzenia strony na .xhtml i dodanie nagłówka DOCTYPE może nie wystarczyć, aby uruchomić pewne przykłady w niektórych przeglądarkach. Na przykład Internet Explorer nie obsługuje typu MIME application/xhtml+xml, a Firefox używa domyślnie typu HTML. W środowisku Apache’a można zastosować pewną sztuczkę, aby poprawnie wyświetlać dokumenty XHTML w różnych przeglądarkach. Wymaga to wprowadzenia w pliku .htaccess następujących zmian: AddType text/html .xhtml RewriteEngine on RewriteBase / RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml\s*;\s*q=0 RewriteCond %{REQUEST_URI} \.xhtml$ RewriteCond %{THE_REQUEST} HTTP/1\.1 RewriteRule .* - [T=application/xhtml+xml]

Jeśli plik .htaccess jest zastrzeżony lub nieobsługiwany na danym serwerze sieciowym, można określić typ MIME w aplikacjach, które zwracają strony. Na przykład można wprowadzić następujące zmiany w kodzie PHP:
Technologie ajaksowe

|

19

} else { header("Content-type: text/html"); } ?>

Inny sposób umożliwiający poprawne funkcjonowanie przykładów to po prostu użycie rozszerzenia .html. To rozwiązanie działa w przypadku wszystkich przykładów oprócz plików z kodem PHP oraz zagnieżdżonym kodem SVG (ang. Scalar Vector Graphics). Język SVG jest opisany w rozdziale 8. Wszystkie przykłady używają CSS 1 i 2. Aby uniknąć stosowania obejść niezbędnych ze względu na specyfikę pewnych przeglądarek, w przykładach zastosowano funkcje CSS obsługiwane przez wszystkie przeglądarki. Aby zagwarantować, że przykłady i znaczniki HTML oraz XHTML są prawidłowe, kod został sprawdzony za pomocą następujących narzędzi: • Total Validator (http://www.totalvalidator.com), • walidatora kodu XHTML i HTML w witrynie W3C (http://validator.w3.org), • usług walidacji arkuszy CSS w witrynie W3C (http://jigsaw.w3.org/css-validator), • walidatora dostępności w witrynie Cynthia Says, zgodnie ze wskazówkami ze specyfika-

cji Section 508 (http://contentquality.com). Jeśli do tworzenia stron używasz przeglądarki Firefox, z wszystkich tych usług możesz skorzystać poprzez pasek Web Developer Toolbar for Firefox lub za pomocą rozszerzenia Total Validator. Choć przykłady działają we wszystkich docelowych przeglądarkach (opisanych dalej), na potrzeby tworzenia stron zalecam i zakładam używanie Firefoksa z zainstalowanym rozszerzeniem Firebug jako głównej przeglądarki. Ta przeglądarka działa we wszystkich środowiskach docelowych i nie znalazłam innego narzędzia tak wydajnego w zakresie rozwoju i diagnozowania kodu jak Firebug. Jestem nim tak zachwycona, że uważam je za kluczowe przy tworzeniu rozwiązań opartych na Ajaksie. Przeglądarkę Firefox można pobrać pod adresem http://www.mozilla-europe.org/pl/. Rozszerzenie Firebug jest dostępne na stronie http://getfirebug.com/.

Początkowe porządkowanie Dodawanie Ajaksa do witryny to okazja do od dawna planowanego uporządkowania witryny, na które jednak ciągle brakowało czasu. Dynamiczne efekty i stosowanie przestarzałego kodu HTML nie idą w parze, szczególnie jeśli programista chce przenosić obiekty, zwijać i rozwijać kolumny lub umożliwić edycję oraz wyświetlanie pomocy w miejscu. Nat Torkington na blogu O’Reilly Radar opisał podjętą przez Marka Lucovsky’ego próbę dodania tej samej funkcjonalności Ajaksa do dwóch bardzo odmiennych witryn internetowych. Jedna z nich była uporządkowana, podczas gdy druga miała bardzo poważny „bagaż” (oryginalny tekst jest dostępny na stronie http://radar.oreilly.com/archives/2006/08/the_value_of_web_ standards.html):

20

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

W czasie konferencji OSCON Mark Lucovsky z Google’a udostępnił fragment kodu HTML, który umożliwiał dodanie do witryny internetowej OSCON-u prostej kontrolki do wyszukiwania obiektów na mapie. Dzięki temu uczestnicy konferencji mogli łatwo znaleźć pobliskie restauracje, hotele, parki, bary itd. Był to doskonały pomysł, a przy okazji elegancka demonstracja ajaksowego interfejsu API do wyszukiwania, nad którym Mark pracował. Następne wystąpienie Marka miało miejsce na konferencji Search Engine Strategies (SES), dlatego Mark chciał wykorzystać moduł „znajdź obiekty w okolicach sali konferencyjnej”. Jednak szybko natrafił na nieuporządkowany kod witryny internetowej SES. Choć dodanie kodu JavaScript do strony internetowej O’Reilly było kwestią sekund, zastosowanie go w witrynie SES okazało się prawdziwym wyzwaniem. Było to ukoronowaniem dużej ilości pracy, którą zespół projektowy w O’Reilly włożył w zmianę projektu stron pod kątem zgodności z XHTML i CSS. Jest to także potwierdzenie wartości standardów. Czasem programiści tracą szerszą perspektywą, próbując odnaleźć drogę w labiryncie podobnych do siebie przestrzeni nazw. Celem stosowania standardów jest nie tylko zagwarantowanie, że przeglądarka będzie mogła wyświetlić dane strony. Standardy umożliwiają także utworzenie za pomocą stron platformy, na której można rozwijać witrynę. Posklejana naprędce platforma prowadzi do powstawania kruchych i wrażliwych na błędy rozszerzeń.

Ajax w dużym stopniu zależy od CSS, a w jeszcze większym — od modelu DOM. W aplikacjach ajaksowych można uzyskać dostęp do poszczególnych elementów i przenosić je, tworzyć oraz usuwać na żywo. Z powodu zależności od modelu DOM nie można po prostu zagnieździć skryptu na stronie, dodać kilku atrybutów ID do elementów i oczekiwać, że efekty będą funkcjonować. Ajax naprawdę wymaga uporządkowania strony przed rozpoczęciem dodawania efektów. Zanim programista przystąpi do pracy i zacznie zmieniać kod, aby dodać efekty Ajaksa, warto, aby najpierw sprawdził stronę w kilku walidatorach dostępnych w witrynie W3C (i w innych miejscach). Pozwoli to wykryć i rozwiązać istniejące problemy. Walidacja może pomóc w określeniu, ile pracy wymagają strony, a także pozwolić przygotować plan wprowadzania zmian. Nawet jeśli programista zamierza zmienić projekt strony, odkryje, że łatwiej jest przejść z jednego projektu do innego, niż zacząć wszystko od nowa.

Walidatory kodu XHTML i HTML Przodkiem wszystkich walidatorów jest Markup Validation Service z witryny W3C. Aby go użyć, należy wpisać adres URL lub przesłać stronę internetową, a usługa wyświetli szczegółowy spis wszystkich nieprawidłowych komponentów (a także poprawnych, ale niezalecanych). Markup Validation Service obsługuje wiele typów dokumentów, na przykład XHTML 1.0 Transitional, HTML 4.01 Strict, XHTML 1.1, a nawet typy niestandardowe. Zwykle typ dokumentu jest określony w samym dokumencie. Służy do tego następująca składnia:

Można zmienić typ dokumentu w usłudze walidacyjnej, aby zobaczyć, czy strona spełnia warunki bardziej ścisłych specyfikacji. Można wybrać opcję wyświetlania kodu źródłowego z numerami wierszy (przydatne przy diagnozowaniu) lub użyć trybu pełnego, aby uzyskać bardziej szczegółowe informacje. Rysunek 1.1 przedstawia dane wyjściowe z omawianego walidatora zawierające kilka błędów.

Początkowe porządkowanie

|

21

Rysunek 1.1. Markup Validation Service z witryny W3C informuje o poprawności znaczników strony

Inny walidator to Total Validator Andy’ego Halforda. To narzędzie działa wolniej niż walidator z witryny W3C, ale w formularzu Advanced można podać adres e-mail, pod który zostaną przesłane wyniki. Przyczyną tak długiego działania walidatora Total Validator jest niezwykle rozbudowany zestaw opcji. Oprócz wykrywania błędów witryna wyszukuje także nieprawidłowe lub brakujące odnośniki i literówki (jest możliwość określenia języka i dostosowania działania programu do własnych potrzeb). Jest to wygodny sposób na dokładne sprawdzenie strony. Jedną z możliwości jest sprawdzanie dostępności witryny. Można wybrać jeden z wielu poziomów, włączając w to U.S. Section 508 i trzy poziomy W3C Web Accessibility Initiative (WAI). Inna opcja umożliwia określenie liczby sprawdzanych stron (do 20) oraz głębokości testów (zgodnie z mapą witryny). Można także pominąć określone ścieżki w obrębie witryny. To narzędzie wyświetla także zrzuty na podstawie przeglądarki, systemu operacyjnego i rozdzielczości ekranu. Jest to bardzo wygodna funkcja, jeśli programista nie ma dostępu do określonej przeglądarki w konkretnym systemie operacyjnym. Rysunek 1.2 przedstawia efekt uruchomienia omawianego walidatora dla strony głównej witryny wydawnictwa Helion. Zrzut został uzyskany przy użyciu przeglądarki Konqueror v3.4 w systemie Linux.

Walidatory kodu CSS Zwykle do przeglądania stron korzystam z Firefoksa i jest to także główna przeglądarka, której używam do testów. Wybrałam ją z powodu licznych rozszerzeń, włączając w to narzędzia do projektowania stron. Spośród nich warto wymienić wspomniane już rozszerzenie Firebug, które jest często używane w tej książce. Następne przydatne narzędzie to Web Developer Toolbar (https://addons.mozilla.org/firefox/60). 22

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

Rysunek 1.2. Stosowanie wielu opcji walidatora Total Validator umożliwia dokładne sprawdzenie strony internetowej

Pasek Web Developer udostępnia między innymi listę rozwijaną z opcjami walidacji, którą można przeprowadzić dla dowolnej obecnie wyświetlanej strony. Opcja Validate HTML bazuje na omówionym w poprzednim punkcie walidatorze Markup Validation Service z witryny W3C. Dostępna jest także opcja, która umożliwia sprawdzenie arkuszy stylów danej strony za pomocą narzędzia W3C CSS Validator. Walidator kodu CSS przyjmuje adres URL witryny lub przesłany plik. Jeśli programista chce wypróbować kod CSS przed umieszczeniem go w arkuszu stylów i nie jest pewien, czy składnia jest prawidłowa, może po prostu wpisać ten kod i nakazać jego sprawdzenie. Jest to wygodna opcja. Wypróbowałam ją dla poniższego kodu, który pochodzi z arkusza stylów jednej z moich witryn: .comment-number { text-align: right; display: inline; font-size: 48pt; opacity: .3; filter: alpha(opacity=30); z-index: 3; padding-bottom: 0px; margin-bottom: 0px; }

Wyniki walidacji przedstawia rysunek 1.3. Jak widać, walidator odrzuca niestandardowe ustawienia przezroczystości.

Początkowe porządkowanie

|

23

Rysunek 1.3. Przetestowanie bloku CSS przy użyciu walidatora W3C CSS Validator pozwala sprawdzić, czy kod jest zgodny ze standardami

Sprawdzanie dostępności Dlaczego dostępność jest tak istotna? Słyszałam opinie, że jedynie 5 procent programów odczytujących tekst strony zostaje dotkniętych przez funkcjonalność stron, których autorzy nie stosują się do wytycznych dotyczących dostępności. Jednak pomijając zagadnienia etyczne, dostępność staje się w coraz większym stopniu wymuszana przez prawo. W wielu państwach wszystkie strony rządowe muszą spełniać warunki związane z dostępnością. Staje się ona istotna także w przypadku witryn komercyjnych. Obecnie toczy się sprawa przeciw korporacji Target (duża sieć sklepów działająca w Stanach Zjednoczonych i innych państwach), która została pozwana za to, że jej sklep internetowy nie był dostępny dla osób niepełnosprawnych. Sieć przegrała sprawę, a obecnie rozpatrywana jest apelacja. Spodziewam się, że podobne sytuacje będą się powtarzać. Doskonała jednostronicowa lista najlepszych artykułów na temat dostępności i Ajaksa jest dostępna w witrynie programu Stanford Online Accessibility (http://soap.standford. edu/show.php?contentid=65).

W odróżnieniu od walidacji kodu CSS lub XHTML, sprawdzanie, czy strona spełnia wytyczne związane z dostępnością, jest w równym stopniu osobistą interpretacją, jak zautomatyzowanym testem. Wyniki sprawdzania dostępności w witrynie Cynthia Says mogą być dość obszerne, a programista powinien zapoznać się z wytycznymi, na podstawie których przeprowadzany jest ten test. Jednym z najważniejszych aspektów korzystania z tej witryny jest wybór standardów, na których opiera się test. Może to być jedna z trzech grup wytycznych W3C WAI 1.0 — priorytet 1, 2 lub 3 — albo wytyczne U.S. Section 508. Więcej informacji o wytycznych W3C WAI 1.0 można znaleźć na stronie http://www. w3.org/TR/WCAG10/, a o specyfikacji Section 508 — pod adresem http://www.access-board.gov/sec508/standards.htm (część Subpart B).

Total Validator także sprawdza dostępność i również pozwala na wybór wytycznych WAI lub Section 508. Jednak nawet po przeprowadzeniu tych testów trzeba ręcznie sprawdzić efekty 24

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

pracy pod kątem zgodności z wymogami. Elementów takich jak atrybut alt z sensownym opisem elementu image (co pomaga czytelnikom, którzy nie widzą rysunków, dowiedzieć się, co tracą) nie można sprawdzić w czasie automatycznych testów.

Przekształcanie tabel na układ strony oparty na CSS Łatwo jest wykryć problemy z układem strony, które powodują komunikaty o błędzie. Jednak niektóre zmiany na stronie, które są konieczne, aby witryna była optymalnie przygotowana do dodawania Ajaksa (a także w innych celach), nie powodują błędów w czasie walidacji ani ostrzeżeń związanych z dostępnością. Jedną z najczęściej stosowanych sztuczek przed wprowadzeniem stylów CSS było używanie tabel HTML do zarządzania zawartością strony niezależnie od rodzaju treści. Jednak tabele HTML były zaprojektowane w celu wyświetlania danych tabelarycznych, na przykład rekordów z baz danych. Dlatego wiele efektów Ajaksa trudno jest zastosować, jeśli układ jest oparty na tabelach. Jak przedstawiam to w dalszej części tego rozdziału oraz w rozdziale 6., aktualizowanie tabel dynamicznych jest trudniejsze niż modyfikowanie pojedynczych elementów div. Ponadto nie zawsze można przenieść wiersz tabeli lub przetworzyć jej komórkę jako odrębny obiekt. Tabele HTML doprowadzają do szaleństwa osoby wrażliwe na punkcie semantycznego podejścia do WWW. Jeśli programista zastosuje tabele HTML do wyświetlania wszystkich informacji na stronie internetowej, dane tabelaryczne nie będą się wyróżniać. Poniżej wymieniam kilka problemów związanych z umieszczaniem całej zawartości strony w tabelach: • Elementy tabel HTML zostały zaprojektowane z myślą o danych tabelarycznych. • Tabele HTML zwiększają złożoność użycia kodu JavaScript. • Elementy tabel HTML, takie jak wiersze i komórki, istnieją w obrębie pewnego schematu,

co sprawia, że niewygodnie jest ich używać pojedynczo.

• Elementów tabel HTML nie można łatwo zwijać, przenosić i usuwać bez wpływu na inne

elementy.

• Niektóre efekty oparte na języku JavaScript, na przykład stosowanie warstw, przezroczy-

stości i innych subtelnych mechanizmów, mogą negatywnie wpływać na stronę, jeśli programista użyje ich wraz z tabelami.

Tak więc jednym z podstawowych zadań związanych z przygotowaniem strony do zastosowania Ajaksa jest przekształcenie tabel HTML na prawidłowe elementy XHTML i zastosowanie stylów CSS. Modyfikacja strony przez użycie CSS ułatwia tworzenie efektów Ajaksa, a także zarządzanie stroną. Wbrew oczekiwaniom takie przekształcanie stron nie jest zbyt trudne. Kilka następnych punktów zawiera opis tego procesu, a także kilku innych zadań związanych z wprowadzaniem niezbędnych zmian. Tabele HTML zostały zaprojektowane do wyświetlania powiązanych danych, takich jak listy sklepów i ich lokalizacje czy wyniki badań. Używanie tabel do zarządzania ogólnym układem strony nie jest semantycznie poprawne. W książce czasem wspominam o podejściu semantycznym. Oznacza to, że elementy strony są używane w sposób zgodny z ich przeznaczeniem, a nie do formatowania. Takie postępowanie pomaga programom odczytującym zawartość ekranu i innym narzędziom dokładniej przetwarzać strony. Może to także pomóc w bardziej wydajnym przetwarzaniu danych botom internetowym, czyli zautomatyzowanym robotom internetowym.

Przekształcanie tabel na układ strony oparty na CSS

|

25

Typowy projekt strony internetowej wygląda następująco. Nagłówek i stopka mają szerokość całej strony lub jej zawartości, a ciało strony jest rozbite na dwa pionowe komponenty. Jeden z nich to pasek boczny, a drugi zawiera główną treść. Pasek może znajdować się po lewej lub po prawej stronie, a rozmiar strony można ograniczyć lub zwiększyć do szerokości okna przeglądarki. Używanie tabel HTML w takiej sytuacji jest proste. Należy utworzyć jedną tabelę z dwoma kolumnami i trzema wierszami oraz użyć atrybutu colspan do rozciągnięcia pierwszego i trzeciego wiersza na szerokość całej tabeli. Jest kilka różnych metod, których można użyć do uzyskania tego samego efektu za pomocą XHTML i CSS. Jedna z nich polega na utworzeniu trzech bloków przy użyciu elementów div, przy czym każdy z nich ma szerokość 100 procent zawierającego je kontenera, a bloki te należy umieścić jeden nad drugim, tak jak ilustruje to rysunek 1.4.

Rysunek 1.4. Strona przekształcona na układ oparty na XHTML i CSS, utworzona przy użyciu elementów div i właściwości float języka CSS

Aby utworzyć dwie kolumny w środkowym bloku, należy dodać dwa elementy div obok siebie, zamiast jeden nad drugim, oraz określić ich rozmiar tak, aby kolumna z treścią była szersza. Tę kolumnę należy wymienić jako pierwszą w znacznikach strony, aby programy odczytujące zawartość strony najpierw przetwarzały właśnie ją. Zwykle elementy div działają na poziomie bloku, co oznacza, że są rozmieszczane jeden nad drugim. Aby umieścić kolumny obok siebie, należy zastosować właściwość float języka CSS i swobodnie umieścić blok po lewej lub prawej stronie, co powoduje usunięcie danego elementu z pionowego układu strony. Jeśli pasek boczny ma się znajdować po lewej stronie, należy

26

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

ustawić wartość jego atrybutu float na left, a wartość tego atrybutu dla kolumny z treścią — na right. Listing 1.1 zawiera kod całej strony. Listing 1.1. Przekształcona strona XHTML z dwoma kolumnami

Aby usunąć właściwość float ze stopki, aby była ona widoczna pod paskiem bocznym i blokiem z treścią, a nie obok nich, należy ustawić właściwość clear języka CSS na both. Patrząc na stronę widoczną na rysunku 1.4, warto zwrócić uwagę na to, że lewa kolumna (pasek boczny) nie rozciąga się na całą długość, jeśli jej zawartość nie jest wystarczająco długa. Jest to wada używania kodu XHTML z określaniem pozycji za pomocą języka CSS — tło kolumny rozszerza się jedynie wraz z jej treścią.

Przekształcanie tabel na układ strony oparty na CSS

|

27

Jednym z rozwiązań tego problemu jest ustawienie tego samego koloru tła dla wszystkich kontenerów. Powoduje to ukrycie różnic w długości kolumn. Inne podejście, które zresztą preferuję, polega na utworzeniu rysunku o tej samej szerokości i kolorze, co pasek boczny, a następnie użyciu go jako obrazu tła kontenera zawierającego dany pasek. Aby użyć tej metody, należy ustawić atrybuty repeat tła tak, aby rysunek nie powtarzał się w poziomie lub pionie, oraz umieścić go w miejscu, w którym rozpoczyna się pasek boczny. Można także ustawić kolor tła kontenera z paskiem na kolor kolumny z treścią. Spowoduje to wypełnienie obszaru, którego nie obejmuje rysunek tła. Po tej modyfikacji obie kolumny będą wyglądały tak, jakby miały tę samą długość. Zmodyfikowany styl wygląda tak: #wrapper { background-image: url(ajaxbackground.jpg); background-postion: top left; background-repeat: repeat-y; background-color: #f00; width: 800px; margin: 0 auto; }

Rysunek 1.5 przedstawia wygląd strony po zastosowaniu zmodyfikowanego stylu kontenera.

Rysunek 1.5. Zmiana ustawień stylu kontenera powoduje, że długość obu kolumn wydaje się taka sama

To tylko jedno podejście. Możliwych jest wiele rozwiązań opartych na CSS. Technika opisana wcześniej to układ stały (ang. fixed). W przypadku układu płynnego (ang. fluid) rozmiar kolumn jest zmienny i dopasowuje się do wielkości strony, a w układzie elastycznym (ang. elastic) rozmiar kolumn dostosowuje się do strony, nie przekracza jednak określonej maksymal-

28

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

nej szerokości. Aby znaleźć więcej informacji o układach opartych na CSS, wystarczy wpisać w przeglądarce wyrażenie „układ CSS” (ang. CSS layout). Przekształcenie układu witryny z opartego na tabelach HTML na oparty na stylach CSS może być trudne, ponieważ tabele są bardzo wygodne i łatwe w użyciu, a język CSS może być bardziej skomplikowany. Ponadto strona przejdzie walidację jako dokument XHTML, nawet jeśli programista użyje tabel HTML. Jednak niektóre elementy strony zostaną uznane za nieprawidłowe i będą wymagały wprowadzenia zmian. Następny punkt przedstawia najczęściej spotykane elementy tego typu.

Ciąg dalszy zmian — element po elemencie Przekształcanie stron tak, aby były oparte na XHTML i CSS, to jedna duża zmiana, jednak jest też wiele mniejszych, łatwiejszych poprawek, które należy wprowadzić, zanim strona przejdzie walidację jako dokument XHTML. Te zmiany powodują, że elementy będą dostępne dla skryptów, które są przedstawione w tej książce. Jest wiele narzędzi, które mogą pomóc w porządkowaniu stron internetowych i przekształcaniu ich z HTML na XHTML. Popularnym programem tego typu jest HTML Tidy, dostępny na stronie http://tidy.sourceforge.net/.

W czasach pierwszych przeglądarek jednym z pierwszych elementów, które projektanci chcieli kontrolować, była czcionka. Gdyby cała strona była czarno-biała, a rodzina i rozmiar czcionki zależały jedynie od typu elementu, witryny byłyby zbyt jednorodne i bardzo nieciekawe (choć praca projektanta byłaby łatwa, a sama witryna — w pełni dostępna). Aby umożliwić dostosowanie stron, wraz z rozwojem języka HTML wprowadzono nowe elementy, włączając w to jeden z cieszących się najgorszą sławą — blink. Ten element powodował, że obiekty (tekst, rysunki itd.) migotały. Stał się powszechnie znienawidzony i jest sztandarowym argumentem za rozdzieleniem znaczników strony od warstwy prezentacji. Na szczęście projektanci tylko przez krótki czas interesowali się elementem blink, a następnym powszechnie stosowanym elementem (i tak jest do dziś) stał się font. Element font umożliwia projektantom określenie rodziny, rozmiaru i koloru czcionki: Jakiś tekst

Element font pozwala wyróżnić tekst, ma jednak pewną wadę: jeśli programista chce zmienić czcionkę zawartości strony, musi wyszukać przypadki użycia danego elementu na wszystkich stronach i ręcznie zmienić jego ustawienia. Może to spowodować, że zarządzanie stroną stanie się niezwykle żmudne. Wraz z nadejściem CSS pojawił się nacisk na rezygnację z elementu font — i w mniejszym lub większym stopniu zniknął on z większości stron. Jeśli zaprojektowałeś witryny lub aplikacje zawierające ten element, warto, abyś go usunął i zamiast niego użył arkuszy stylów. Poniższy fragment obejmuje ustawienia CSS dla czcionki określonego elementu: #test { font-family: arial; font-size: 4em; color: #0000ff }

Ciąg dalszy zmian — element po elemencie

|

29

Są też inne elementy określające pozycję lub styl, które zostały uznane za przestarzałe lub powodują konflikt z Ajaksem. Należy je usunąć. Są to między innymi: center

Ten element pozwala wyśrodkować obiekt. Aby uzyskać ten efekt, należy użyć stylów CSS. menu

Ten element służy do tworzenia list elementów menu. Ten efekt można uzyskać za pomocą list nieuporządkowanych (ul).

strike

Ten element tworzy przekreślony tekst (należy użyć stylów CSS lub elementu del). dir

Ten element służy do tworzenia list katalogów i należy go zastąpić elementem ul. applet

Ten element był używany do dołączania apletów języka Java, jednak obecnie należy stosować w zamian element object. Najlepszy sposób na sprawdzenie, czy strona zawiera przestarzałe elementy, to podanie w atrybucie DOCTYPE specyfikacji, z którą dokument ma być zgodny, a następnie wysłanie strony do walidatora. Jeśli kod zawiera nieobsługiwane elementy, walidator poinformuje o tym. Następny aspekt języka HTML niezgodny z XHTML to brak domykania znaczników w przypadku elementów, które tego nie wymagają. Na przykład element img nie ma znacznika zamykającego, ponieważ wszystkie informacje o obrazie znajdują się w obrębie znacznika. W XHTML ten znacznik należy zamknąć, umieszczając ukośnik bezpośrednio przed zamykającym nawiasem ostrym:

Przy dodawaniu Ajaksa niezwykle ważne jest, aby elementy strony internetowej były prawidłowo zamknięte. W przeciwnym razie mogą pojawić się nieoczekiwane skutki uboczne przy dodawaniu dynamicznych efektów. Do często niezamykanych elementów należą akapity (p) i elementy listy (li). Zamykanie ich może wydawać się kłopotliwe, jednak pozwala zapobiec większym problemom w przyszłości. Co się stanie, kiedy programista wyeliminuje oczywiste problemy? Czy strona we wszystkich przeglądarkach będzie wyglądać i działać tak samo? O tym możemy tylko pomarzyć.

Radzenie sobie ze specyfiką przeglądarek Może się wydawać, że każdy element HTML ma wbudowane ustawienia stylu. Nagłówki to elementy blokowe o czcionce większej niż tekst akapitu, zwiększające się od nagłówków typu h6 do h1. Każdy element listy HTML ma domyślną wartość dopełnienia. Akapity to elementy blokowe o określonym marginesie, dopełnieniu, czcionce i odstępach między wierszami. Na pierwszy rzut oka te wartości domyślne są dość podobne w poszczególnych przeglądarkach, jednak nawet małe odstępstwo może mieć znaczący wpływ na projekt strony i efekty Ajaksa. Przeglądarki udostępniają własne wewnętrzne arkusze stylów, które określają przedstawione wartości, a choć obowiązują pewne ograniczenia dotyczące stylu (na przykład aka-

30

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

pity muszą być elementami blokowymi), inne ustawienia zależą od interpretacji wytycznych W3C przez producentów przeglądarek. Z powodu tych różnic wielkość odstępów między literami, ich rozmiar i inne właściwości są odmienne w poszczególnych przeglądarkach. Różne mogą być także kolory odnośników, ikony list i względne rozmiary nagłówków — i to czasem znacząco. Może to prowadzić do wielu problemów z projektem strony i nieoczekiwanych efektów ubocznych przy dodawaniu Ajaksa.

Kontrolowanie strony i dodawanie Ajaksa Wiele efektów Ajaksa, na przykład pomoc JIT (ang. just-in-time, czyli „na czas”; są to informacje na stronie ukryte dopóty, dopóki nie są potrzebne), rozmieszczanie, zanikanie kolorów czy zwijanie elementów, może działać poprawnie w różnych przeglądarkach tylko wtedy, jeśli programista wyeliminuje specyficzne działanie poszczególnych przeglądarek. Na przykład Safari używa innej wysokości linii niż Firefox. Nie będzie to miało wpływu na strony zawierające duże ilości tekstu, jednak może prowadzić do poważnych problemów w przypadku aplikacji ajaksowych, które wyświetlają informacje systemu pomocy w małych polach. Jeśli tekst w niektórych przeglądarkach okaże się zbyt duży, a w innych zbyt mały, system pomocy może wyglądać amatorsko lub będzie mało czytelny. Jedną z najgorszych przeglądarek, jeśli chodzi o nieprawidłową obsługę CSS, był Internet Explorer, a niektóre sztuczki pozwalające omijać błędy otrzymały nawet własne nazwy, na przykład: Peekaboo Bug, Border Chaos, Guillotine Bug. Te nazwy mogą bawić, jednak obsługa związanych z nimi błędów jest naprawdę kłopotliwa. Microsoft starał się usunąć większość problemów ze stylami CSS w przeglądarce Internet Explorer 7. Więcej informacji na ten temat zawiera strona http://blogs.msdn.com/ ie/archive/2006/08/22/712830.aspx. Niestety, ta przeglądarka też nie jest doskonała i czasem działa specyficznie.

Internet Explorer to niejedyna przeglądarka, która ma pewne „specyficzne” działania — żadna z nich nie jest doskonała. Każda przeglądarka ma własną „osobowość”. Niestety, na rynku przeglądarek niekoniecznie jest to korzystne. Ale może gdyby zapewnienie zgodności było proste, nie byłoby tak ciekawe? Jeśli w poszczególnych przeglądarkach rozmiary czcionek, marginesów i dopełnienia są różne, nawet w małym stopniu, elementy służące jako kontenery na dynamiczny tekst, na przykład elementy listy czy pola, mogą być zbyt małe, aby pomieścić informacje, co doprowadzi do zawijania lub obcinania tekstu. Można w dużym stopniu wyeliminować te problemy, używając XHTML i kompletnych arkuszy stylów CSS.

Przejmowanie kontroli Jedną z technik do obsługi różnic między arkuszami stylów różnych przeglądarek jest utworzenie niestandardowego arkusza, który będzie zawierał optymalne ustawienia dla wybranej przeglądarki. Następnie należy wprowadzić niezbędne poprawki, aby strona wyglądała tak samo w drugiej przeglądarce (starając się nie zepsuć wyglądu dokumentu w pierwszej), potem zająć się trzecią przeglądarką i tak dalej. Może to być ciężkie zadanie, zwłaszcza w przypadku witryny, na której użyto złożonych stylów i stosunkowo skomplikowanych technik Ajaksa. Radzenie sobie ze specyfiką przeglądarek

|

31

Inne rozwiązanie polega na usunięciu wszystkich ustawień stylu z arkusza i dodanie jedynie tych, które są niezbędne. Może to być bardzo duża zmiana, jednak zapewnia całkowitą kontrolę nad układem strony, co gwarantuje, że efekty Ajaksa będą działały zgodnie z oczekiwaniami. Jeśli programista chce zmienić styl wszystkich elementów, może zastosować ustawienia globalne — wystarczy w tym celu użyć gwiazdki (*). Poniższy kod ustawia atrybuty margin i padding na 0, a także ustawia czcionkę (font-family) wszystkich elementów na Arial: * { padding: 0; margin: 0; font-family: Arial }

To proste ustawienia stylów, jednak zastosowanie ich może dać bardzo widoczne efekty. Oczywiście, usunięcie lub dostosowanie ustawień dla wszystkich elementów oznacza, że trzeba przyjrzeć się każdemu elementowi i określić jego styl, co może być żmudne. Lepsze rozwiązanie polega na dostosowaniu ustawień tylko tych elementów, których obsługa najbardziej różni się między przeglądarkami. W przypadku pozostałych można zastosować ustawienia domyślne. Następnie należy umieścić ustawienia domyślne w arkuszu stylów dołączanym do wszystkich stron przed dodaniem drugiego arkusza, zawierającego ustawienia specyficzne dla danej strony. Jedną z ogólnych zmian, którą warto rozważyć, jest usunięcie podkreślenia z wszystkich odnośników. To podkreślenie może zepsuć wygląd strony i rozpraszać uwagę, zwłaszcza jeśli na stronie znajduje się grupa podkreślonych elementów. W przypadku niektórych czcionek podkreślenia mogą także powodować obcinanie dolnych części liter, co utrudnia odczyt słów. Poniższe ustawienie usuwa podkreślenie z wszystkich odnośników: a { text-decoration: none }

Później można dodać podkreślenie (także za pomocą CSS) do odnośników w obrębie określonego elementu, na przykład takiego, który zawiera dużo tekstu i niewiele odnośników. Jednym z problemów związanych z takim podejściem jest to, że odnośniki hipertekstowe nie wyróżniają się na stronie. Na własnych stronach używam czcionki, która nie jest wrażliwa na podkreślenia i zachowuje je w blokach z treścią. W paskach bocznych i menu sam kontekst wystarcza, aby użytkownik wiedział, że tekst działa jako odnośnik. Ponieważ czcionka może być mniejsza, a wiele elementów można umieścić jeden pod drugim, usuwam podkreślenie, aby tworzyć bardziej przejrzyste i czytelne strony. Następne istotne zadanie porządkujące polega na ustawieniu takiego samego rozmiaru, dopełnienia i marginesu wszystkich nagłówków. Można w tym celu posłużyć się następującą składnią: h1, h2, h3, h4, h5, h6 { font-size: 1em; padding: 0; margin: 0 }

W rzeczywistości nagłówki to elementy semantyczne, które udostępniają dla botów silników wyszukiwarek i programów odczytujących tekst z ekranu informacje o schemacie strony: h1 nagłówek poziomu pierwszego h2 nagłówek poziomu drugiego h3 nagłówek poziomu trzeciego h3 nagłówek poziomu trzeciego h2 nagłówek poziomu drugiego

Wielu programistów przyzwyczaiło się do używania nagłówków ze względu na pogrubienie i wielkość czcionki, co jest zupełnie niezgodne z ich przeznaczeniem. Usuwając te cechy, programista zmusza się do prawidłowego stosowania nagłówków i do używania stylów czcio-

32

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

nek w odpowiednich miejscach w celu uzyskania efektów wizualnych. Jeśli na stronie ma się znaleźć nagłówek graficzny, jego treść należy umieścić w elemencie h1. Jeśli nagłówek ma być niewidoczny, należy go ukryć, jednak nie usuwając go, ponieważ będzie potrzebny do zoptymalizowania działania silnika wyszukiwarki. Dobrym kompromisem jest użycie rysunku w elemencie h1 i podanie jego tekstu jako wartości atrybutu alt. Po usunięciu najbardziej oczywistych błędów należy kontynuować tworzenie własnego domyślnego arkusza stylów, usuwając lub normalizując wszelkie elementy, których wyświetlanie w różnych przeglądarkach sprawia problemy. Na stronie http://tantek.com/log/2004/09.html#d06t2354 znajduje się ciekawy artykuł Tanteka Çelika, dotyczący tworzenia domyślnych szablonowych arkuszy stylów. Rozszerzenie autorstwa Erica Meyera jest dostępne pod adresem http://meyerweb.com/ ´eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss.

Następny etap w procesie dodawania Ajaksa, po dokonaniu walidacji i uporządkowaniu istniejących witryn i aplikacji, polega na ustaleniu planu wprowadzania zmian. Powinien on obejmować używane platformy oraz obsługiwane docelowe przeglądarki i inne agenty klienckie. W tym celu trzeba dobrze zrozumieć użytkowników — czytelników strony internetowej i osoby korzystające z aplikacji sieciowej.

Zrozumienie potrzeb użytkowników Liczba funkcji Ajaksa umieszczanych w witrynie zależy nie tylko od tego, ile programista chce ich dodać i iloma chce zarządzać. Nawet najlepsza technologia nie będzie przydatna, jeśli nie daje konkretnych korzyści lub, co gorsza, uniemożliwia użytkownikom korzystanie z witryny. Jednak uwzględniając opinie użytkowników, można dodać nieco skryptów i kilka usług sieciowych działających bezpośrednio na stronie, aby poprawić użyteczność witryny.

Poznawanie klientów Pierwszy etap w dodawaniu Ajaksa polega na zdobyciu wszystkich informacji o osobach odwiedzających witrynę, aby można było zaplanować zmiany pod ich kątem. Najlepszym towarzyszem w tych poszukiwaniach są logi witryny. Poniższy wpis pochodzi z jednej z moich witryn i jest dość typowy: 5x.x2.x8.xx0 - - [31/Aug/2006:03:09:27 +0000] "GET /wp-content/themes/bbgun/bbgung. png HTTP/1.1" 200 90338 "http://burningbird.net/wp-content/themes/bbgun/style.css" "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.6) Gecko/20060728 Firefox/ 1.5.0.6"

Ten wpis zawiera datę, pobierane zasoby oraz łańcuch znaków zawierający informacje o systemie operacyjnym i przeglądarce klienta. W tym przypadku przeglądarka to Firefox 1.5.0.6, a system operacyjny to Windows. Inny wpis to: x0.xx3.1xx.xx4 - - [31/Aug/2006:03:14:48 +0000] "GET /wp-content/themes/words/ eyesafe.png HTTP/1.1" 404 9058 "http://burningbird.net" "Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-0; en-US; rv:1.8.1b1) Gecko/20060707 Firefox/2.0b1"

Ten klient używa pierwszej wersji beta przeglądarki Firefox 2.0 i systemu operacyjnego Mac OS X.

Zrozumienie potrzeb użytkowników

|

33

Uzyskane informacje pomagają określić, jakie agenty użytkowników (przeglądarki i urządzenia przenośne) warto obsługiwać, a także umożliwia zniwelowanie różnic w zakresie obrazu, rozdzielczości, obsługi czcionek i narzędzi występujących między poszczególnymi systemami operacyjnymi. Logi można przeglądać bezpośrednio lub za pomocą jednego z licznych narzędzi, takich jak AWStats czy Webalizer, które pomagają w ich analizie. Te i inne narzędzia można znaleźć, wpisując w ulubionej wyszukiwarce wyrażenie „logfile analyzer”. Inne zasoby, których można użyć do analizy narzędzi służących do odwiedzania stron, to witryny ze statystykami dotyczącymi przeglądarek, na przykład W3 Schools (http://www.w3schools. com/browsers/browsers_stats.asp) czy The Counter (http://www.thecounter.com/stats). Aby określić, ilu użytkowników ma włączoną obsługę języka JavaScript, można dodać sekcję NOSCRIPT wczytującą niepowtarzalny rysunek, który nie ma wpływu na działanie strony, a na-

stępnie sprawdzić logi i zobaczyć, jak często rysunek ten był pobierany. W wyniku niedawnych zaawansowanych, opartych na wykorzystaniu skryptów ataków na Google i inne witryny coraz więcej osób wyłącza skrypty w ramach zwiększania bezpieczeństwa. Inni użytkownicy mogą używać narzędzi takich jak NoScript (http://noscript.net). Jest to rozszerzenie przeglądarki Firefox, które umożliwia wyłączenie obsługi języka JavaScript dla poszczególnych witryn. Projektując zawartość strony, należy oczekiwać, że użytkownicy wyłączą skrypty, a jeśli aplikacja nie jest całkowicie oparta na skryptach, nie należy wyświetlać zaleceń dotyczących włączenia obsługi skryptów w celu uzyskania większej funkcjonalności. Takie komunikaty w świecie Ajaksa stały się odpowiednikiem elementu blink.

Polityka otwartych drzwi Kiedyś zapytałam użytkowników jednej z moich witryn, jakie konkretnie zastosowania Ajaksa chcieliby na niej zobaczyć. Jedną z opcji było menu rozwijane, wyświetlające się albo po umieszczeniu kursora myszy na elemencie menu najwyższego poziomu, albo po kliknięciu tego elementu. Jest to dość powszechnie spotykane zastosowanie DHTML, często rozszerzane w Ajaksie. Co ciekawe, menu rozwijane nie okazało się szczególnie ciekawe dla użytkowników. Bardziej interesowała ich kontrola nad interakcją z witryną niż sterowanie poruszaniem się między stronami. Gdyby struktura witryny była bardziej złożona, menu mogłoby się okazać bardziej pożądane. Jednak różnica między tym, co uważałam za istotne, a rzeczywistymi oczekiwaniami użytkowników demonstruje, że nie można samodzielnie stwierdzić, co jest ważne dla klientów. Przed rozpoczęciem dodawania Ajaksa do witryny warto włączyć w ten proces użytkowników. Zapytać ich, czego chcą, lub przetestować nową technologię w określonych miejscach i poprosić o opinie. Trzeba liczyć się z koniecznością zmiany zarówno założeń, jak i planu wdrażania. Co powinnam zrobić, gdyby użytkownicy oczekiwali dodania rozwijanego menu DHTML? Gdyby struktura witryny miała więcej niż dwa poziomy, zgodziłabym się na to, jednak nie wystarczy dodać menu i na tym zakończyć pracy. Dynamicznie generowane menu powoduje, że witryna jest niedostępna dla osób z wyłączoną obsługą języka JavaScript, mających problemy z używaniem myszy czy korzystających z przeglądarki odczytującej tekst.

34

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

Nawet jeśli okaże się, że 95 procent użytkowników ma włączoną obsługę języka JavaScript, używa myszy oraz przeglądarek typu Firefox, brak dostępności strony stanowi dodatkowe utrudnienie dla osób, którym życie stawia już wystarczająco wiele wyzwań. Warto wziąć pod uwagę także to, że najbardziej popularne rozszerzenie przeglądarki Firefox domyślnie wyłącza obsługę skryptów na wszystkich witrynach (NoScript). Nie należy także czynić założeń co do liczby osób używających języka JavaScript. Wreszcie boty silników wyszukiwarek internetowych, takich jak Google czy Yahoo!, nie potrafią śledzić odnośników generowanych przez skrypty, dlatego nie dotrą do materiałów dostępnych wyłącznie poprzez takie menu. Niektóre funkcje wymagają języka JavaScript lub użycia myszy. Mogę one dotyczyć internetowych edytorów tekstu, arkuszy kalkulacyjnych czy gier, jednak nigdy nie powinny obejmować kluczowej funkcjonalności, na przykład możliwości poruszania się po głównej zawartości stron czy dokumentacji aplikacji. Przy określaniu najlepszego sposobu spełnienia wymagań użytkowników warto stosować się do następujących zaleceń: • Należy zrezygnować z niespodzianek. Warto zapytać się użytkowników, czego oczekują,

przed rozpoczęciem wprowadzania zmian. • Warto zastanowić się nad testami beta obejmującymi fragment witryny, które pozwolą

uzyskać informacje zwrotne przed rozciągnięciem zmian na pozostałe strony. • Spełniając wymagania, należy uwzględnić niezbędne nakłady pracy. Im więcej elementów

zmienia się, tym więcej może się zepsuć, a żaden użytkownik nie lubi niedziałających stron.

• Należy uwzględniać oczekiwania użytkowników. Jeśli wprowadzone zmiany nie działa-

ją, należy przygotować się na rezygnację z nich i wypróbowanie czegoś nowego.

Plan Teraz, kiedy programista zna już środowisko i oczekiwania użytkowników, pora przygotować plan dodawania Ajaksa do witryny. Różnica między dodawaniem Ajaksa do małych i dużych witryn dotyczy liczby godzin, które trzeba na to poświęcić, a nie podejmowanych operacji. To, który obiekt zostanie zmieniony jako pierwszy, zależy od przyczyn dodawania Ajaksa. Na przykład rozbudowana aplikacja do obsługi klientów, która zawiera wiele stron z formularzami, doskonale nadaje się do zastosowania Ajaksa. Jest to odrębna aplikacja, w której dodanie Ajaksa może dać duże korzyści, jeśli chodzi o zadowolenie klienta, jakość odpowiedzi i wykorzystanie zasobów. Ajax pozwala także poprawić ogólną wydajność aplikacji, co w jeszcze większym stopniu przyczynia się do powstania sytuacji wygrana-wygrana. Inne obszary docelowe to strony, na których użytkownicy mogą aktualizować lub modyfikować informacje. Dodanie Ajaksa w celu umożliwienia wprowadzania zmian w miejscu może w bardzo dużym stopniu poprawić komfort pracy użytkownika przy jednoczesnym zachowaniu pełnej dostępności do strony. Udostępnienie systemu pomocy w trybie JIT oraz informacji zwrotnych to także doskonałe przykłady zastosowania Ajaksa. Trzeba tylko upewnić się, że takie same informacje będą dostępne w przypadku braku obsługi skryptów lub jeśli klient używa przeglądarki odczytującej zawartość stron. Dodawanie elementów graficznych nie powinno zajmować wysokiej pozycji na liście priorytetów, jednak jest to dozwolone zastosowanie Ajaksa. Takie zmiany mogą wzbudzić zachwyt użytkowników przy minimalnych zakłóceniach podstawowej funkcjonalności witryny. Zrozumienie potrzeb użytkowników

|

35

Ajaksa należy dodawać stopniowo, archiwizując witrynę przed dodaniem choćby jednego wiersza kodu. Jeśli konieczne jest wprowadzenie zmian globalnych, na przykład nowego menu ajaksowego, które ma działać na wszystkich stronach witryny, warto umieścić nowy kod w pliku i dołączyć go do wszystkich stron. Może to być plik nagłówkowy dołączany do każdej strony przy użyciu mechanizmów działających po stronie serwera. Należy minimalizować ilość kodu dodawaną do każdej strony, umieszczając go w bibliotekach i dołączając do poszczególnych stron jedynie niezbędne z nich. Można też zastanowić się nad użyciem jednej z bezpłatnych bibliotek Ajaksa. Niektóre z nich są opisane w rozdziale 3. i używane w przykładach w tej książce. Tworząc plan, należy zastanowić się nad następującymi zagadnieniami: • Powtarzam się, ale jest to bardzo istotne — należy utworzyć kopię witryny przed rozpo-

częciem pracy i po udostępnieniu każdego dodatku. • Należy określić punkt wyjścia. Dobrym kandydatem są izolowane aplikacje. • Trzeba przeanalizować obszary, w których witryna lub aplikacja jest już interaktywna,

oraz określić, jak można zastosować Ajaksa w celu usprawnienia działania. • Należy udostępniać rozbudowaną pomoc JIT oraz dużo informacji zwrotnych, zapewnia-

jąc alternatywne rozwiązania dla klientów z wyłączoną obsługą skryptów. • Dzięki efektom graficznym zwiększającym istniejącą funkcjonalność lub towarzyszącym

jej strony są ciekawsze i bardziej efektowne, zwykle minimalnym kosztem. • Należy przyjrzeć się okazjom do wyodrębnienia fragmentów kodu, które można wielo-

krotnie wykorzystać, na przykład funkcji menu czy pomocy elektronicznej. • Warto używać istniejących bibliotek.

Projektowanie szkieletu witryny Najważniejszą decyzją stojącą przed programistą jest określenie, czy dodawać Ajaksa do istniejących stron czy rozpocząć pracę od początku. Ta książka opiera się na założeniu, że projektant chce dodać Ajaksa do istniejących stron i aplikacji — nie usuwa witryny i nie zaczyna wszystkiego od nowa. Mówiąc inaczej, programista modyfikuje funkcjonalność używaną po stronie klienta, podczas gdy komponent witryny działający po stronie serwera pozostaje w mniejszym lub większym stopniu niezmieniony. Następny etap w procesie decyzyjnym to określenie zakresu zmian. Jeśli programista modyfikuje formularz statycznej strony internetowej tak, aby za pomocą skryptów i obiektu XMLHttpRequest umożliwić edycję w miejscu, zastosowanie nowych technologii jest specyficzne i ma mały wpływ na całą aplikację. Jednak dodanie systemu pomocy obejmującego całą witrynę, nowego dynamicznego menu czy funkcji wyszukiwania w miejscu ma wpływ na wszystkie strony, dlatego warto rozważyć pewne dodatkowe zmiany w architekturze, na przykład umieszczenie nagłówka i wszystkich skryptów w odrębnych plikach, które będzie można dołączyć do każdej strony. To podejście pozwala upewnić się, że dołączone zostaną wszystkie potrzebne biblioteki języka JavaScript, a także umożliwia wyizolowanie elementów takich jak metody obsługi zdarzeń.

36

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

Wiele nowych systemów zarządzania treścią jest opartych na podejściu modułowym, które umożliwia maksymalne wielokrotne wykorzystanie pasków bocznych, nagłówków i stopek. Jeśli witryna nie działa według systemu modularnego, a zarządzanie stronami odbywa się ręcznie, warto dodać wdrożenie modułów do listy zadań związanych z przyszłymi projektami. Niezależnie od tego, czy strony działają w systemie modułowym, czy nie, cały niestandardowy kod JavaScript należy umieścić w odrębnych plikach dołączanych do odpowiednich stron. Zmiana kodu w skrypcie zostanie automatycznie uwzględniona na wszystkich używających go stronach.

Wychodzenie naprzeciw użytkownikom Wspomniałam o znaczeniu wykrywania środowisk użytkowników, włączając w to przeglądarki i systemy operacyjne, a także sprawdzanie, czy obsługa języka JavaScript jest włączona, czy nie. Trzeba także przeanalizować plan pod kątem dostępności, uwzględniając kryteria służące do oceny każdej strony po użyciu na niej Ajaksa. Pomoże to zagwarantować spełnienie wymagań. Przeczytałam kiedyś, że trzeba spełniać potrzeby jedynie od 90 do 95 procent użytkowników danej strony internetowej. Może to być prawdą w przypadku osób używających starszych przeglądarek, takich jak Internet Explorer 5.5 dla komputerów Mac, jednak nie dotyczy użytkowników, którzy muszą pokonywać w życiu wystarczająco wiele przeszkód, aby nie musieć stawać przed jeszcze jedną, w postaci niedostępności danej witryny. Są to osoby: • niewidome, które mogą używać przeglądarek odczytujących tekst; • fizycznie niezdolne do używania myszy; • nierozróżniające kolorów; • z upośledzeniem słuchu, które nie mogą słuchać audycji podcast ani instrukcji dźwiękowych; • z zaburzeniami uwagi lub upośledzeniem zdolności uczenia się i rozumienia, które nie

potrafią zrozumieć szybko wyświetlanego tekstu ani błyskawicznych komunikatów; • zmęczone, pracujące pod presją czasu, rozproszone lub zestresowane.

Inaczej mówiąc — wszyscy. Użytkownicy mogą mieć problemy z korzystaniem z czcionki tak małej, że jej przeczytanie wymaga szkła powiększającego. Dodanie edycji w miejscu lub funkcji dynamicznego wyszukiwania nie przyda się na wiele, jeśli trzeba zmniejszyć nowe elementy tak, że będą nieczytelne. Ponadto mało rzeczy irytuje bardziej niż konieczność przesuwania kursora myszy jak magicznej różdżki po całej stronie, aby znaleźć elementy służące do poruszania się po stronie lub umożliwiające dostęp do istotnych informacji.

Bezpieczeństwo Użytkownicy witryny są zależni od projektantów także w zakresie możliwości korzystania z użytecznego i bezpiecznego środowiska. Część architektury witryny obejmuje dołączenie procedur testowych, które po wprowadzeniu każdej zmiany pozwalają sprawdzić, czy strona jest wciąż dostępna we wszystkich docelowych przeglądarkach i środowiskach. Plan usprawniania witryny powinien również obejmować procedury, które na różne sposoby sprawdzają funkcjonalność zmian.

Projektowanie szkieletu witryny

|

37

Należy także przeprowadzić testy, aby upewnić się, czy aplikacja nie zajmuje na komputerze użytkownika więcej miejsca, niż powinna. Większość aplikacji opartych na języku JavaScript z pewnych przyczyn używa pamięci po stronie klienta, a zwykle wystarczają do tego pliki cookie. Jednak niektóre biblioteki Ajaksa udostępniają mechanizmy do przechowywania na komputerze klienta dodatkowych danych za pomocą technologii Flash lub innego zewnętrznego magazynu. Tworząc plan, należy określić, ile danych aplikacja ma przechowywać po stronie klienta w porównaniu z danymi po stronie serwera. Przechowywanie informacji po stronie klienta nieodłącznie prowadzi do zagrożenia bezpieczeństwa w każdej aplikacji sieciowej, niezależnie od zastosowania w niej Ajaksa. W planie trzeba także uwzględnić zagadnienia związane z bezpieczeństwem. W książce wskazuję wrażliwe obszary przy okazji opisu różnych efektów Ajaksa. Im więcej dynamicznych elementów zawierają strony, tym ważniejsze jest śledzenie witryn z informacjami o bezpieczeństwie oraz testowanie stron po udostępnieniu nowych wersji przeglądarek. Ponieważ jest to ogólna książka o dodawaniu Ajaksa, nie mogę szczegółowo opisać zagadnień związanych z bezpieczeństwem. W zamian zachęcam do lektury książki Christophera Wellsa, Securing Ajax Applications1 (O’Reilly), która szczegółowo przedstawia Ajaksa i kwestie bezpieczeństwa.

Ścisłe i luźne powiązanie W ramach tworzenia szkieletu do dodawania Ajaksa projektanci stron muszą często decydować, jak ściśle powiązane mają być elementy aplikacji działające po stronie klienta i serwera. W aplikacjach ściśle powiązanych duża część kodu działającego po stronie klienta jest generowana przez serwer lub zależna od niego. Mówiąc inaczej: nie ma sposobu na rozdzielenie tych elementów, ponieważ cała aplikacja przestałaby działać. Z kolei w aplikacjach luźno powiązanych usługa sieciowa może zostać wywołana przez aplikację ajaksową, ale także przez inną usługę. Ponadto kod po stronie klienta komunikuje się jedynie z interfejsem API (ang. Application Programming Interface), dlatego nie jest istotne, w jaki sposób programista utworzył daną usługę sieciową ani jakiego języka do tego użył. Wybór luźnego powiązania oznacza, że programista tworzy aplikację serwerową, która ma udostępniać usługi sieciowe wywoływane przez inne aplikacje działające po stronie serwera, a także aplikacje ajaksowe. To rozwiązanie jest najbardziej uporządkowane, ponieważ nie opiera się na założeniach dotyczących możliwości klienta. Zmiana po stronie klienta nie wpływa na kod po stronie serwera, a modyfikacje po stronie serwera nie wpływają na działanie klienta. Jeśli jednak programista zastosuje ścisłe powiązanie (na przykład użyje biblioteki języka Java, takiej jak Google Web Toolkit — GTW), wtedy samo narzędzie określa, co można zrobić ze stroną, a nawet jakie informacje można wygenerować. Zwykle dodając Ajaksa do istniejących stron, należy użyć luźnego powiązania. Rozpoczynając pracę od początku, można zastosować ścisłe powiązanie, choć należy zachować ostrożność przed zbyt ścisłym powiązaniem kodu działającego po stronie serwera i klienta.

1

Wydanie polskie: Ajax. Bezpieczne aplikacje internetowe, Helion, w przygotowaniu — przyp. tłum.

38

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

Stopniowe usprawnianie a remont generalny Jak już wspomniałam, zakładam, że jesteś jednym ze szczęśliwych użytkowników Ajaksa, ponieważ masz już witrynę lub aplikację z całą podstawową funkcjonalnością i chcesz ją rozbudować oraz usprawnić, dodając Ajaksa. Może to wymagać pewnych wcześniejszych przygotowań, jednak operacje sprawiające, że strony lepiej nadają się do wdrożenia Ajaksa, powodują także ulepszenie samej witryny.

Obsługiwane przeglądarki Pisząc książkę, zawsze trudno jest określić, jakie przeglądarki i inne agenty użytkownika uwzględnić. Sprawdziłam logi na licznych własnych witrynach, aby sprawdzić, z jakich narzędzi korzystają użytkownicy. Okazało się, że jest ich całe mnóstwo: od Firefoksa 2.x po przeglądarkę Internet Explorer 3.x. Użytkownicy odwiedzają strony za pomocą palmtopów, telefonów komórkowych i innych urządzeń przenośnych, a nawet odbiorników WebTV. Większość przykładów z tej książki nie wygląda dobrze na małym ekranie iPhone’a i podobnych urządzeń niezależnie od tego, czy na danej stronie zastosowano Ajaksa, czy nie. W przypadku urządzeń przenośnych udostępniam strony za pomocą odrębnego arkusza stylów, który generuje zawartość tak, aby była czytelna w małych urządzeniach. Można także użyć tej techniki do określenia, czy całkowicie wyłączyć efekty ajaksowe w takich urządzeniach. Sama zdecydowałam się z nich zrezygnować. W przypadku przeglądarek do testowania przykładów posłużyły wszystkie poniższe programy: • Internet Explorer 6.x w systemie Windows 2000, • Internet Explorer 7 w systemie Windows XP, • Firefox 2.x w systemach Windows i Mac, • Camino 1.0 w systemie Mac, • Safari 2.0.4, • WebKit 420+, • Opera 9.x i nowsze w systemach Windows oraz Mac, • OmniWeb 5.x, • Konqueror.

Po długim namyśle zrezygnowałam z przeglądarki Internet Explorer 5.5 i jej starszych wersji. Microsoft zaprzestał ich obsługi i mają one luki w systemie zabezpieczeń, nie wspominając o brakach w implementacji standardowych technologii internetowych. We wszystkich środowiskach, w których działała przeglądarka Internet Explorer 5.5 i jej starsze wersje, można użyć alternatywnych programów. Dotyczy to systemu Mac, a także starszych wersji systemu Windows. Nie trzeba wspominać, że kod źródłowy nie zapewnia działania Ajaksa także w przeglądarkach takich jak Netscape 4.x. Zastosowane podejście polega na emulacji efektu, jeśli obsługa skryptów została wyłączona, a klient przyjmuje strony internetowe bez Ajaksa. Zapewnia to dostęp do stron bez konieczności kłopotliwego zajmowania się niezliczonymi drobiazgami. Nie utożsamiam dostępności z masochizmem — w którymś miejscu trzeba ustalić granicę.

Stopniowe usprawnianie a remont generalny

|

39

Podsumowując zagadnienia opisane w tym rozdziale, można wyróżnić następujące etapy upraszczania strony i przygotowywania jej do dodania Ajaksa:

1. Walidacja istniejących stron pod kątem docelowych specyfikacji XHTML i CSS oraz wprowadzenie niezbędnych poprawek.

2. Przekształcenie starego układu opartego na tabelach HTML na układ oparty na CSS

i XHTML, usunięcie niezalecanych i przestarzałych elementów HTML oraz przekształcenie kodu HTML na XHTML.

3. Zdefiniowanie planu dodawania efektów Ajaksa. Należy w nim uwzględnić, które części

witryny wymagają napisania od nowa, gdzie potrzebne są zmiany oraz jakie efekty zostaną dodane.

4. Analiza użytkowników. Należy określić, które strony odwiedzają i z jakich narzędzi korzystają.

5. Zaangażowanie użytkowników, włączając w to testowanie prototypów. 6. Utworzenie szkieletu umożliwiającego wprowadzenie zmian. Należy zminimalizować

ilość kodu, maksymalizując możliwość jego wielokrotnego wykorzystania. Jest to dobry moment na zastanowienie się nad zastosowaniem systemu zarządzania treścią, jeśli jeszcze się go nie używa.

Po utworzeniu planu, zdefiniowaniu szkieletu, na podstawie którego można dodać elementy Ajaksa do witryny, przekształceniu stron na prawidłowe dokumenty XHTML i CSS oraz ograniczeniu różnic związanych z działaniem CSS w różnych przeglądarkach można przystąpić do dodawania Ajaksa.

40

|

Rozdział 1. Przygotowania do wdrażania Ajaksa

ROZDZIAŁ 2.

Elementy Ajaksa

Tym, co odróżnia Ajaksa od języka JavaScript, jest możliwość wysyłania żądań danych zewnętrznych z poziomu strony oraz możliwość zwracania wyników bez odświeżania stron. Żądanie może dotyczyć tak prostej operacji, jak wczytanie nowego rysunku lub arkusza stylów, lub tak złożonej, jak pobranie całego dokumentu XML ze zmianami wielu elementów strony. Dane zwracane przez usługi sieciowe można zintegrować ze stroną za pomocą dynamicznych skryptów, tworząc blok skryptowy składający się z wywoływanej zwrotnie funkcji oraz zwracanych danych. Jednak zwykle żądania kieruje się do usług sieciowych za pomocą kluczowego obiektu XMLHttpRequest. Pomysł obiektu, który mógłby służyć do zarządzania żądaniami kierowanymi do usług sieciowych za pomocą skryptów z poziomu strony, powstał kilka lat temu wraz z przeglądarką Internet Explorer 5.0. Na początku był to obiekt ActiveX, a Microsoft kontynuował jego rozwój w przeglądarkach Internet Explorer 6.x. Jednak obecnie Microsoft, podobnie jak inni producenci przeglądarek, zapewnia obsługę obiektu XMLHttpRequest. XMLHttpRequest to jeden z prostszych w obsłudze obiektów dostępnych w przeglądarkach.

Należy utworzyć żądanie do usługi sieciowej, przesłać je, a w celu przetworzenia zwróconych wyników uruchamiana jest wywoływana zwrotnie funkcja. Zamiast rozpraszać całą aktywność na wiele stron, co ma miejsce w przypadku tradycyjnych aplikacji sieciowych, można zrobić wszystko w obrębie jednej strony, bez odświeżania jej. W biznesie informatycznym stosowanych jest wiele akronimów. W większości miejsc w tej książce używam nazwy „XMLHttpRequest”, choć czasem, podobnie jak inni programiści, stosuję nazwę „XHR”, aby oszczędzać czas i klawiaturę.

Aplikacje sieciowe Na potrzeby tego rozdziału utworzyłam prostą aplikację, Drinki. Użytkownik może w niej wybrać nazwę drinka, a aplikacja wyświetli jego skład. Choć jest to bardzo prosty przykład, pozwala przedstawić komunikację między serwerem a klientem w aplikacjach sieciowych bez pogrążania się w analizie dodatkowej funkcjonalności. Za funkcjonalność po stronie serwera odpowiada kod w języku PHP, a w przypadku tego uproszczonego przykładu przepisy są przechowywane na stronie PHP. Po stronie klienta

41

znajduje się formularz z listą nazw drinków i przyciskiem do ich przesyłania. Kiedy użytkownik kliknie ten przycisk, formularz zostanie przesłany na serwer, a ten zwróci odpowiedni przepis i wyświetli go na stronie. Przed analizą funkcjonalności Ajaksa warto zobaczyć, jak można utworzyć tę aplikację bez stosowania języka JavaScript. W przypadku prostych aplikacji nierzadko kod klienta i serwera znajduje się w jednym pliku. Funkcje działające po stronie serwera generują wtedy odpowiednie elementy używane po stronie klienta. Jedyny żmudny element tworzenia omawianej aplikacji polega na upewnieniu się, że wybrany drink pojawi się na liście jako zaznaczony. W przeciwnym razie wyświetlona zostanie nazwa pierwszego drinka, co spowoduje niedopasowanie z wyświetlonym przepisem. Listing 2.1 przedstawia kompletną aplikację, w której jedna strona zawiera komponenty zarówno klienta, jak i serwera. Listing 2.1. Kompletna jednostronicowa aplikacja Drinki Gorąca herbata

Zagotuj wodę. " . "Zalej liście herbaty. Parz pięć minut. " . "Po odcedzeniu można podawać.

"; break; case "APPLETINI" : $result = "

Appletini

Wymieszaj w szklance z lodem 30 ml wódki " . "i 15 ml Sour Apple Schnapps lub innego sznapsa jabłkowego. " . "Przelej do kieliszka do martini. " . "Udekoruj plasterkiem jabłka lub rodzynkami.

"; break; case "NONCHAMP" : $result = "

Szampan bezalkoholowy

Wymieszaj 960 ml wody sodowej " . "i 360 ml zmrożonego koncentratu " . "z białych winogron.

"; break; case "SWMPMARGARITA" : $result = "

Swamp Margarita

" . "

Wymieszaj 45 ml dobrej tequili, 22 ml Cointreau, " . "22 ml Grand Marnier, 15 ml soku cytrynowego i 60 ml sour mix. " . "Schładzaj przez godzinę. Wrzuć na dno wysokiej szklanki kilka " . "zielonych oliwek i wlej kilka kropel oliwy z oliwek. " . "Wlej margeritę na oliwki i odczekaj dziesięć minut. " . "Odcedź i podawaj z oliwkami na wykałaczkach nadziewanymi " . "pieprzem angielskim.

"; break; case "LEMON" : $result = "

Kropla cytryny

Wymieszaj 30 ml wódki cytrynowej " . "z 30 ml soku cytrynowego i jedną łyżką cukru. Wymieszaj z lodem, " . "odcedź i podawaj.

"; break; default : $result = "Brak przepisu";

42

|

Rozdział 2. Elementy Ajaksa

break; } } ?>

Drinki

Ponieważ w atrybucie action formularza nie ma określonego elementu docelowego, po stronie serwera ta sama strona zostanie użyta do przetworzenia przesłanego formularza, a wybrany drink zostanie przesłany jako część żądania GET. Nazwa drinka (name) służy do znalezienia odpowiedniego przepisu, który zostaje przypisany do zmiennej. W dalszej części strony, w drugim bloku PHP, przepis jest wyświetlany na stronie tuż pod formularzem. Aplikacje sieciowe

|

43

Wartość drinka (value) jest porównywana z wartością każdej opcji select, a po dopasowaniu tych elementów drink zostaje zaznaczony. Ważne jest, aby odświeżyć zarówno formularz, jak i wyniki, bo w przeciwnym razie mogą nie pasować do siebie. Jedyny plik zewnętrzny tej aplikacji zawiera kod CSS przedstawiony na listingu 2.2. Ten sam plik CSS jest używany we wszystkich przykładach z drinkami, a jego dodatkowe elementy są opisane w dalszej części rozdziału. Listing 2.2. Kod CSS używany we wszystkich wersjach aplikacji Drinki przedstawionych w tym rozdziale html { background: #fff url(drink.jpg) no-repeat fixed top left; color: #000; } body { font-family: Verdana, Arial, sans-serif; } form { color: #000; padding: 20px; text-align: left; } h1 { margin-left: 380px; } label { display: block; margin-bottom: 10px; } #drinkblock { margin-left: 380px; width: 500px; }

Kod, znaczniki i ustawienia stylów przedstawione na listingach 2.1 i 2.2 składają się na całkowicie poprawną aplikację, jednak jeśli funkcjonalność ma być dostępna także w innych aplikacjach, trzeba ją powielić. Lepszym rozwiązaniem jest umieszczenie funkcji działających po stronie serwera w odrębnej aplikacji sieciowej i użycie instrukcji include języka PHP w innym kodzie uruchamianym po stronie serwera w celu dołączania odpowiednich funkcji wtedy, kiedy są potrzebne: require_once("./recipe.php");

Upraszcza to także klienta, ponieważ funkcje używane po stronie serwera można ograniczyć do minimum. Listing 2.3 demonstruje stosowanie języka PHP do przetwarzania żądań formularza. Listing 2.3. Kod PHP przetwarzający żądania aplikacji Drinki
44

|

Rozdział 2. Elementy Ajaksa

if (empty($drink)) { $drink = 'TEA'; } else { // Usuwanie odstępów z początku i końca łańcucha $search = trim($drink); switch($search) { case "TEA" : $result = "

Gorąca herbata

Zagotuj wodę. " . "Zalej liście herbaty. Parz pięć minut. " . "Po odcedzeniu można podawać.

"; break; case "APPLETINI" : $result = "

Appletini

Wymieszaj w szklance z lodem 30 ml wódki " . "i 15 ml Sour Apple Schnapps lub innego sznapsa jabłkowego. " . "Przelej do kieliszka do martini. " . "Udekoruj plasterkiem jabłka lub rodzynkami.

"; break; case "NONCHAMP" : $result = "

Szampan bezalkoholowy

Wymieszaj 900 ml wody sodowej " . "i 300 ml zmrożonego koncentratu z " . "białych winogron.

"; break; case "SWMPMARGARITA" : $result = "

Swamp Margarita

" . "

Wymieszaj 45 ml dobrej tequili, 20 ml Cointreau, " . "20 ml Grand Marnier, 15 ml soku cytrynowego i 60 ml sour mix. " . "Schładzaj przez godzinę. Wrzuć na dno wysokiej szklanki kilka " . "zielonych oliwek i wlej kilka kropel oliwy z oliwek. " . "Wlej margeritę na oliwki i odczekaj dziesięć minut. " . "Odcedź i podawaj z oliwkami na wykałaczkach nadziewanymi " . "pieprzem angielskim.

"; break; case "LEMON" : $result = "

Kropla cytryny

Wymieszaj 30 ml wódki cytrynowej " . "z 30 ml soku cytrynowego i jedną łyżką cukru. Wymieszaj z lodem, " . "odcedź i podawaj.

"; break; default : $result = "Brak przepisu"; break; } } ?>

Także to rozwiązanie jest proste i funkcjonalne. Rysunek 2.1 przedstawia aplikację po przetworzeniu żądania i zwrócenia przepisu danego drinka. To rozwiązanie powinno działać w prawie każdej przeglądarce i każdym środowisku. Nie należy zapominać o tej właściwości aplikacji, dodając funkcjonalność Ajaksa. Pewną wadą tej aplikacji jest to, że elementy formularzy muszą mieć takie same nazwy. Należy zauważyć, że elementy formularzy trzeba aktualizować tak, aby pasowały do przepisów, dzięki czemu zawartość formularza pasuje do wyświetlanych informacji. W przypadku niektórych formularzy może to wymagać dużo pracy. Obejście tej niedogodności polega na wyświetlaniu przepisów drinków na odrębnej stronie wynikowej. Nazwę pliku tej strony należy podać w atrybucie action formularza. Formularz utworzony w ten sposób jest dużo prostszy, ponieważ nie trzeba przejmować się synchronizacją wybranej nazwy:

Aplikacje sieciowe

|

45

Rysunek 2.1. Prosta odpowiedź aplikacji potwierdzająca, że skrypt PHP działa zgodnie z oczekiwaniami

Wybierz drink: Gorąca herbata Appletini Szampan bezalkoholowy Swamp Margarita Kropla cytryny

Strona, która przetwarza dane formularza, jest sformatowana tak, aby wyglądała tak samo jak wyjściowa strona kliencka, co pozwala zachować ciągłość między nimi. Jedyna funkcjonalność strony wynikowej to dołączanie aplikacji działającej po stronie serwera (recipe.php) i wyświetlanie pobranego przepisu: 46

|

Rozdział 2. Elementy Ajaksa

Drinki

Zastosowanie techniki opartej na użyciu odrębnej strony wynikowej powoduje, że jeśli użytkownik aplikacji chce znaleźć nowy przepis, musi wrócić do wyjściowej strony z formularzem i zacząć cały proces od początku. Zamiast konieczności przesyłania formularza — albo do tej samej, ponownie wczytywanej strony, albo do odrębnej — podejście ajaksowe umożliwia wywołanie aplikacji sieciowej w celu pobrania danych i przetworzenia tych wyników bezpośrednio na stronie początkowej. Nie wymaga to ponownego wczytywania strony ani aktualizowania strony z formularzem w celu zsynchronizowania danych. Właśnie to podejście będzie tematem pozostałej części tego rozdziału.

Struktura obiektów XMLHttpRequest W3C, organizacja odpowiedzialna za większość specyfikacji obowiązujących w aplikacjach sieciowych, pracuje obecnie nad definicją standardu obiektu XMLHttpRequest. Najnowsza wersja robocza (w czasie pisania tej książki) pochodzi z września 2006 roku i można się z nią zapoznać na stronie http://www.w3.org/TR/XMLHttpRequest. Jednak większość wersji obiektu XMLHttpRequest wywodzi się z jego popularnych wersji — tej z przeglądarki Internet Explorer i tych późniejszych, czyli z przeglądarek opartych na Gecko, między innymi Firefoksa. Mogą występować różnice w stosowaniu tego obiektu w różnych aplikacjach, jednak w tej książce skoncentruję się na najważniejszych i najczęściej używanych funkcjach. Obiekt XMLHttpRequest jest dość prosty. We wszystkich docelowych przeglądarkach opisywanych w tej książce dostępne są następujące metody: open

Składnia to open(metoda,url[,async,nazwaużytkownika,hasło]). Ta metoda otwiera połączenie z danym adresem URL, używając określonej metody (na przykład GET lub POST). Opcjonalne parametry to async — wartość logiczna określająca żądanie jako asynchroniczne (true) lub synchroniczne (false), a także nazwaużytkownika i hasło, jeśli wymaga ich przetwarzanie danych po stronie serwera. Jeśli programista nie poda parametru async, domyślnie żądania są asynchroniczne. setRequestHeader Składnia to setRequestHeader(klucz,wartość). Ta metoda dodaje parę klucz-wartość

do nagłówka żądania.

Aplikacje sieciowe

|

47

send

Składnia to send(treść). Ta metoda służy do wysyłania żądań zawierających dane. Jeśli żądanie odbywa się za pomocą metod HTTP, takich jak POST, w których parametry nie są dołączane do adresu URL, za pomocą tej metody przekazywane są wszystkie potrzebne parametry. W przeciwnym razie treść ma wartość null. getAllResponseHeaders Składnia to getAllResponseHeaders(). Ta metoda zwraca wszystkie nagłówki odpowie-

dzi HTTP jako łańcuch znaków. Te informacje obejmują między innymi limit czasu podtrzymywania połączenia, typ zawartości odpowiedzi, dane o serwerze i datę. getResponseHeader Składnia to getResponseHeader(klucz). Ta metoda zwraca wybrany nagłówek odpowiedzi HTTP określony przez klucz. abort

Składnia to abort(). Ta metoda zatrzymuje wykonywanie bieżącego żądania. Obiekty XMLHttpRequest mają także kilka właściwości: onreadystatechange

Ta właściwość przechowuje funkcję wywoływaną w wyniku zmiany stanu żądania.

readyState

Ta właściwość przyjmuje pięć wartości: 0 oznacza brak inicjacji, 1 to otwarte żądanie, 2 — przesłane, 3 oznacza otrzymanie odpowiedzi, a 4 — zakończenie wczytywania odpowiedzi. Zwykle ważny jest stan 4. responseText

Ta właściwość określa, że odpowiedź ma być przesłana jako tekstowy łańcuch znaków. responseXML

Tej właściwości należy używać do nadania odpowiedzi formatu XML. status

Ta właściwość dotyczy stanu serwera, na przykład 404, 500 czy 200. Ta ostatnia wartość oznacza udane przesłanie żądania.

statusText

Ta właściwość określa tekst komunikatu powiązany ze stanem. Pozostała część rozdziału to dokładny opis i szczegółowa demonstracja zastosowania powyższych właściwości oraz metod. Najpierw jednak trzeba dowiedzieć się, jak utworzyć obiekt XMLHttpRequest.

Przygotowywanie obiektu do użytku Jedną z pierwszych decyzji, które trzeba podjąć, tworząc obiekt XMLHttpRequest, jest określenie, czy aplikacja ma obsługiwać przeglądarki Internet Explorer 6.x. W Internet Explorer 7 i nowszych wersjach innych przeglądarek (takich, jak: Opera, Firefox, Safari, Netscape) obiekt do obsługi żądań kierowanych do serwera to po prostu XMLHttpRequest, a we wszystkich tych przeglądarkach działa on podobnie. Jednak przeglądarki Internet Explorer 6.x wciąż obsługują starszy obiekt ActiveX Microsoftu. Ponieważ starsze systemy operacyjne Windows, na przykład Windows 2000, nie współpracują z nowszą przeglądarką Internet Explorer 7, trzeba zdecydować, 48

|

Rozdział 2. Elementy Ajaksa

czy aplikacja ma być dostępna także dla osób używających systemu Windows 2000 (oraz tych użytkowników systemu Windows XP, którzy nie zaktualizowali używanej przeglądarki). W tym momencie warto wrócić do logów i sprawdzić, ile osób odwiedza witrynę za pomocą przeglądarek Internet Explorer 6.x. Jeśli jest ich chociaż 5 procent, zwykle warto dodać obsługę tych starszych przeglądarek. Na szczęście dodatkowy kod nie zajmuje zbyt wiele miejsca. Następne zagadnienie związane z korzystaniem z obiektów ActiveX to określenie, jakiego identyfikatora obiektu użyć w wywołaniu funkcji tworzącej potrzebny obiekt. Niestety, Microsoft nie zachował spójności w nazwach tego obiektu w różnych systemach operacyjnych, a ponadto występują różne odmiany tych obiektów, na przykład MSXML2.XMLHttp, MSXML2.XMLHttp.3.0 i MSXML2.XMLHttp.4.0. Większość bibliotek Ajaksa obejmuje dwa identyfikatory: starszy — Microsoft.XMLHttp, oraz bardziej popularny z nowszych — MSXML2.XMLHttp. Ponieważ większość przeglądarek służących do odwiedzania witryny ma dostęp do będącego obecnie standardem obiektu XMLHttpRequest, najbardziej wydajne rozwiązanie to sprawdzanie jego dostępności w pierwszej kolejności. Jeśli ten test nie powiedzie się, należy sprawdzić dwa obiekty specyficzne dla Microsoftu. Ponieważ w książce obiekty XHR są używane bardzo często, umieszczenie ich obsługi w funkcji nadającej się do wielokrotnego wykorzystania upraszcza dołączanie go do biblioteki. Listing 2.4 przedstawia kod typowej funkcji tworzącej obiekt XMLHttpRequest. Listing 2.4. Typowa funkcja tworząca obiekt XMLHttpRequest function getXmlHttpRequest() { var xmlHttpObj; if (window.XMLHttpRequest) { xmlHttpObj = new XMLHttpRequest(); } else { try { xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlHttpObj = false; } } } return xmlHttpObj; }

Zaczynając od góry — jeśli obiekt window zawiera metodę XMLHttpRequest, należy jej użyć do utworzenia obiektu XMLHttpRequest. W przeciwnym razie trzeba utworzyć obiekt ActiveX w bloku try-catch, co umożliwia elegancką obsługę błędów (w tym przypadku jest to przypisanie do obiektu wartości false). Przedstawiona funkcja zwraca utworzony obiekt. Ten obiekt jest używany w wielu miejscach tej książki, dlatego warto rozpocząć tworzenie globalnej biblioteki języka JavaScript stosowanej we wszystkich przykładach i dodać do niej tę funkcję jako pierwszy element. W ten sposób można napisać kod funkcji raz i zapomnieć o niej. Przygotowywanie obiektu do użytku

|

49

Dla uproszczenia biblioteka nosi nazwę addingajax.js (na podstawie oryginalnego tytułu tej książki). Ponieważ przykłady w tej książce używają także innych bibliotek, funkcje i obiekty z tej biblioteki mają przedrostek „aa” (na przykład aaGetXmlHttpRequest zamiast samego getXmlHttpRequest), co pozwala odróżnić je od funkcji bibliotecznych mających taką samą nazwę. Na początku będzie to mała biblioteka, jednak z czasem zacznie się rozrastać. W ramach krótkiego przypomnienia: cały przykładowy kod, włączając w to ostateczną wersję biblioteki addingajax.js, można pobrać ze strony internetowej niniejszej książki (http://helion.pl/AJAXIM.htm).

Przypomnij sobie kod JavaScript z listingu 2.4. Sposób obsługi zwróconego obiektu zależy od tego, jak program ma go używać. Zwykle obiekt XMLHttpRequest jest przypisywany do zmiennej globalnej, dzięki czemu poszczególne funkcje mogą z niego korzystać w różnych miejscach. Jak wkrótce zobaczysz, obiekt XMLHttpRequest powinien być dostępny przynajmniej w funkcji callback. Jest to jeden z niewielu przypadków, kiedy stosowanie zmiennych globalnych w języku JavaScript jest przyjętą (choć z oporami) praktyką. W wielu bibliotekach ten obiekt jest używany w ramach innych, bardziej złożonych obiektów. Inny aspekt braku zgodności między przeglądarkami polega na tym, że niektóre starsze przeglądarki oparte na Mozilli mogą niepoprawnie obsługiwać żądania, jeśli wynik nie zostanie zwrócony z prawidłowym nagłówkiem XML MIME text/xml. Przeglądarki zgodne z Mozillą mają dodatkową metodę, overrideMimeType (wywoływaną z parametrem text/xml), do rozwiązywania takich problemów. Jednak ta metoda jest niedostępna w obiektach XMLHttpRequest niektórych przeglądarek, na przykład w Internet Explorer 7.

Obiekt XMLHttpRequest został utworzony. Co można z nim teraz zrobić?

Przygotowywanie i wysyłanie żądania Przygotowywanie i wysyłanie żądań do usług sieciowych to prawdopodobnie jeden z najłatwiejszych aspektów Ajaksa. Wystarczy podjąć kilka decyzji co do parametrów, wywołać kilka funkcji — i gotowe. W czasie przygotowywania żądania pierwszą decyzją jest wybór jednej z metod HTTP używanych wraz z żądaniem. Przy dodawaniu Ajaksa do witryny często trzeba używać istniejących usług sieciowych i utworzyć zgodny z nimi interfejs klienta w języku JavaScript. Jednak jeśli programista ponadto modyfikuje interfejs usług sieciowych, warto poświęcić nieco czasu na przegląd metod HTTP używanych do wymiany danych między klientem a usługami. Pozwoli to zmaksymalizować wydajność i bezpieczeństwo aplikacji.

Żądania GET i POST HTTP i inne żądania zgodne z REST Zakładam, że tworzyłeś już aplikacje sieciowe i znasz żądania GET oraz POST HTTP. Obiekt XMLHttpRequest obsługuje obie te metody oraz wiele innych. Stosowanie wielu z nich nie ma większego sensu w aplikacjach ajaksowych, jednak cztery metody nadają się tu szczególnie dobrze:

50

|

Rozdział 2. Elementy Ajaksa

GET

Służy do pobierania informacji z serwera internetowego. Parametry są dołączane do adresu URL, a sam adres jest udostępniany w żądaniu.

POST

Służy do przesyłania informacji na serwer internetowy. Dane są przekazywane na serwer za pomocą funkcji send.

DELETE

Służy do przesyłania żądania usunięcia określonego obiektu. Dane są przekazywane na serwer za pomocą funkcji send.

PUT

Służy do przesyłania aktualizacji na serwer internetowy. Dane są przekazywane na serwer za pomocą funkcji send.

Dwie pierwsze metody, GET i POST, są powszechnie używane w aplikacjach sieciowych, jednak dwie następne mogą być dla programisty czymś nowym. Wszystkie cztery wymienione metody HTTP obsługiwane przez usługi sieciowe są określane jako zgodne z aplikacjami REST. Aplikacje tego typu są oparte na podejściu REST (ang. Representational State Transfer), którego stosowanie jest zalecane przy udostępnianiu usług sieciowych. Potrzeba stosowania czterech odrębnych metod nie wynika tylko z semantyki. Żądania GET nie powinny prowadzić do skutków ubocznych — mają służyć jedynie do pobierania danych. Firma Google udostępniła kiedyś funkcję Google Web Accelerator w wersji beta. To narzędzie miało poprawiać wydajność aplikacji, automatycznie przetwarzając wszystkie żądania GET na stronie i zapisując dane w pamięci podręcznej. Niestety, niektóre żądania GET na odwiedzanych stronach służyły do usuwania lub aktualizowania danych. Dostęp do takich stron za pomocą przeglądarki z tym narzędziem powodował spustoszenie. Choć wykorzystanie żądań GET przez Google było, delikatnie mówiąc, pochopne, można wykorzystać tę historię jako wartościową lekcję: metody GET należy używać wyłącznie do pobierania danych, a do tworzenia, aktualizowania i usuwania ich — metod: POST, PUT i DELETE. • Metoda GET służy do pobierania danych. • Metoda POST tworzy nowe obiekty. • Metody PUT należy używać do aktualizowania danych. • Metoda DELETE pozwala usuwać obiekty.

Jednak nie wszyscy stosują się do tych reguł. Żądań POST można używać także do pobierania informacji, aby lepiej zabezpieczyć parametry, a także do zarządzania tymi żądaniami do usług sieciowych, w których występuje wiele parametrów lub rozmiar poszczególnych parametrów jest dość duży. GET i POST są powszechnie obsługiwane przez przeglądarki. Niestety, nie jest to prawdą w przypadku metod PUT i DELETE. Ten brak obsługi oznacza, że choć metody te mogą być bardzo

użyteczne, nie nadają się do stosowania w aplikacjach ajaksowych (przynajmniej w czasie pisania tej książki), dlatego nie są używane w przykładach w tej książce. Po wyborze metody GET lub POST kolejnym zadaniem (opisuje je następny punkt) jest określenie, jak przekazywać parametry w każdym żądaniu HTTP. W zależności od rodzaju zastosowanej metody parametry można przekazać jako część adresu URL lub poprzez jedną z metod obiektu XMLHttpRequest. Przygotowywanie i wysyłanie żądania

|

51

Parametry Do żądanych usług sieciowych można przekazać więcej niż jeden parametr. Każdy parametr ma format klucz=wartość, a poszczególne pary są oddzielone od innych symbolem ampersanda (&). Jeśli używaną metodą HTTP jest POST, parametry należy przekazać za pomocą metody send obiektu: xmlhttp.send(parametry);

W przypadku żądań POST przed ich przesłaniem trzeba także określić rodzaj zawartości w nagłówku żądania. Poniższy kod ustawia tę wartość na kodowanie formularza: xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

Jeśli programista użyje metody GET HTTP, musi dołączyć parametry na końcu adresu URL z żądaniem do usługi sieciowej, oddzielając je od samego adresu znakiem zapytania (?): http://serwerinternetowy.pl/pewnaap.php?param=wartość¶m2=wartość2

Jeśli parametry zawierają znaki specjalne protokołu HTTP, na przykład odstępy lub ampersandy, albo znaki języka HTML, takie jak nawiasy ostre, trzeba je przekształcić za pomocą sekwencji ucieczki. W tym celu można użyć wbudowanej funkcji encodeURIComponent języka JavaScript: var paramvalue = encodeURIComponent(wartość);

Ponieważ aplikacja Drinki wykonuje proste zapytanie i nie trzeba ukrywać parametru, można użyć metody GET do przesłania nazwy drinka dołączonej do adresu URL usługi sieciowej. Kod JavaScript tworzący obiekt XHR i adres URL żądania wygląda tak: if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; var drink = encodeURIComponent(document.getElementById('drink').value); var qry = 'drink=' + drink; var url = 'drink.php?' + qry;

Wysyłanie żądania Aby wysłać żądanie HTTP, trzeba najpierw otworzyć obiekt XHR. Pierwszy parametr metody open określa metodę żądania HTTP. Po niej następuje adres URL, a następnie wartość true, która oznacza żądanie asynchroniczne: if (!xmlhttp) xml = aaGetXmlHttpRequest(); if (!xmlhttp) return; var drink = encodeURIComponent(document.getElementById('drink').value); var qry = 'drink=' + drink; var url = 'drink.php?' + qry; xmlhttp.open('GET', url, true);

Niezależnie od natury żądania zawsze przychodzi odpowiedź, nawet jeśli jest to tylko komunikat o błędzie. Jednak ponieważ żądanie jest asynchroniczne, przeglądarka nie oczekuje na odpowiedź. Aby obsługiwać odpowiedzi w środowisku asynchronicznym, trzeba określić wywoływaną zwrotnie funkcję, wywoływaną po zakończeniu obsługi żądania XHR. Wywoływana zwrotnie funkcja to dowolna metoda lub funkcja wywoływana w przyszłości w wyniku wystąpienia pewnego zdarzenia, na przykład po zakończeniu obsługi żądania skierowanego za pomocą Ajaksa do usługi sieciowej.

52

|

Rozdział 2. Elementy Ajaksa

W następnym wierszu wywoływana zwrotnie funkcja printRecipe jest przypisywana do metody obsługi zdarzenia onreadystatechange. Oznacza to, że funkcja ta zostanie wywołana przy każdej zmianie stanu obiektu żądania. Odpowiedzi są opisane bardziej szczegółowo w następnym punkcie. W dalszej części kodu wywoływana jest metoda send obiektu żądania z parametrem null (ponieważ jest to żądanie GET), a parametry są dołączane do adresu URL. Całe żądanie znajduje się w jednej funkcji — getRecipe: function getRecipe() { if (!xmlhttp) xml = aaGetXmlHttpRequest(); if (!xmlhttp) return; var drink = encodeURIComponent(document.getElementById('drink').value); var qry = 'drink=' + drink; var url = 'drink.php?' + qry; xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = printRecipe; xmlhttp.send(null); }

Gdyby żądanie było zgłaszane za pomocą metody POST, a nie GET, zmian w aplikacji klienckiej wymagałaby jedynie funkcja getRecipe. Zamiast dołączać parametry do adresu URL, należy je wtedy przekazać w wywołaniu metody send. Ponadto konieczne byłoby zakodowanie żądania przed jego przesłaniem, co ilustruje pogrubiony kod w poniższym fragmencie: function getRecipe() { if (!xmlhttp) xml = aaGetXmlHttpRequest(); if (!xmlhttp) return; var drink = encodeURIComponent(document.getElementById('drink').value); var qry = 'drink=' + drink; var url = 'drink.php'; xmlhttp.open('POST', url, true); xmlhttp.onreadystatechange = printRecipe; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(qry); }

Aplikacja potrzebuje zdarzenia, które uruchomi funkcję getRecipe. W nowej wersji aplikacji Drinki można dodać takie zdarzenie na kilka sposobów. Pierwszy z nich polega na połączeniu funkcji z metodą obsługi zdarzenia onchange elementu select, które jest aktywowane w momencie wybrania elementu z listy. Problem z takim rozwiązaniem polega na tym, że w przypadku pierwszej pozycji na liście użytkownik musi najpierw wybrać inny element, dzięki czemu możliwe będzie późniejsze wybranie pierwszego elementu i wywołanie zmiany. Następne podejście polega na przechwyceniu zdarzenia kliknięcia przycisku submit i użyciu żądań Ajaksa, zamiast zezwolenia na dalsze przesyłanie formularza. Może to jednak być nieintuicyjne dla użytkowników aplikacji, ponieważ przycisk submit służy do przesyłania formularza, a zgodnie z jedną z zasad tworzenia dobrych projektów ajaksowych należy minimalizować odstępstwa od standardowego działania stron. W artykule internetowym „Ajax Accessibility Overview” Becky Gibson z firmy IBM napisała: „(…) kiedy użytkownicy jawnie żądają aktualizacji, wybierając odnośnik lub przycisk, mogą być zaskoczeni, jeśli cała strona nie zostanie odświeżona”. Oczywiście, na tej zmianie opiera się Ajax. Jednak naruszając przyjęte działanie, należy robić to bez zaskakiwania użytkowników (więcej na ten temat w rozdziale 7.).

Przygotowywanie i wysyłanie żądania

|

53

Nawet uwzględniając „naruszanie” działania stron internetowych, lepszym z dwóch opisanych rozwiązań jest przechwycenie operacji przesyłania formularza, ponieważ gwarantuje, że użytkownicy będą mieli dostęp do wszystkich opcji z listy wyboru. Jednak nie można po prostu ingerować w przesyłanie formularza — trzeba anulować zdarzenie submission, a ponadto zagwarantować, że domyślna obsługa formularza nie będzie działać. W aplikacji znajduje się bezpośrednie przypisanie funkcji getRecipe do metody obsługi zdarzenia onsubmission. Następnie program anuluje zdarzenie, używając funkcji preventDefault w takich przeglądarkach, jak: Firefox, Opera, Safari, i zwracając false w przypadku przeglądarki Internet Explorer. W rozdziale 4. biblioteka addingajax.js jest wzbogacana o kilka funkcji pomocnych przy zarządzaniu zdarzeniami. Na razie Internet Explorer wymaga odmiennej obsługi zdarzeń, ponieważ nie udostępnia funkcji preventDefault.

Listing 2.5 przedstawia kod JavaScript specyficzny dla omawianej aplikacji. Listing 2.5. Kod JavaScript używający Ajaksa do pobrania przepisu drinka var xmlhttp; function getRecipe(evnt) { if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; var drink = encodeURIComponent(document.getElementById('drink').value); var qry = "drink=" + drink; var url = 'drink.php?' + qry; xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = printRecipe; xmlhttp.send(null); if (evnt && evnt.preventDefault()) evnt.preventDefault(); return false; } function printRecipe() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { alert(xmlhttp.getAllResponseHeaders()); alert(xmlhttp.responseText); } } window.onload=function() { document.getElementById('myform').onsubmit=getRecipe; };

W wywoływanej zwrotnie funkcji printRecipe, która zarządza żądaniem Ajaksa, sprawdzane są dwie właściwości obiektu XMLHttpRequest. Pierwszy test dotyczy tego, czy właściwość readyState ma wartość 4. Jak już wspomniałam, żądanie przyjmuje różny stan do czasu zwrócenia odpowiedzi, o czym informuje wartość 4. Ponadto w przypadku poprawnej odpowiedzi właściwość status ma wartość 200. Po udanym obsłużeniu żądania Ajaksa obie te wartości powinny być ustawione. W prawidłowo obsłużonym żądaniu Ajaksa właściwość readyState obiektu XMLHttpRequest ma wartość 4, a właściwość status — 200.

54

|

Rozdział 2. Elementy Ajaksa

W obecnej wersji wywoływana zwrotnie funkcja wyświetla tekst odpowiedzi (responseText) obiektu XMLHttpRequest, a także nagłówki odpowiedzi (getAllResponseHeaders). Następny punkt pokazuje, jak wykonać operacje na pobranym tekście. Nowa kliencka strona aplikacji przypomina poprzednią, ale zawiera dwa dodatkowe bloki dołączające skrypty języka JavaScript:

Nawet jeśli obsługa języka JavaScript jest wyłączona, wyjściowa aplikacja wciąż udostępnia oryginalną funkcjonalność opartą na formularzu. Przed bliższym przyjrzeniem się odpowiedziom warto zastanowić się nad jeszcze jednym zagadnieniem. W rozdziale 1. wspomniałam o obsłudze starszych wersji przeglądarki Internet Explorer przez domyślne zastosowanie funkcjonalności dla przeglądarek z wyłączoną obsługą skryptów. Wiele lat temu, zarządzając funkcjonalnością w różnych przeglądarkach, programiści przetwarzali właściwości appName i appVersion obiektu navigator, aby wykryć rodzaj przeglądarki i jej wersję. Zrezygnowano z tego rozwiązania na rzecz wykrywania obiektów, jak ilustruje to listing 2.4 w przypadku obiektu XMLHttpRequest. Jednak przy sprawdzaniu specyficznej przeglądarki, w tym przypadku — starszych wersji przeglądarki Internet Explorer, sprawdzanie właściwości obiektu navigator to wydajna technika. W bibliotece addingajax.js znajduje się funkcja aaScreenIE, która zwraca wartość false, jeśli przeglądarka to nie Internet Explorer lub jeśli jest to wersja 6.x albo nowsza tej przeglądarki. W przeciwnym razie zwracana wartość to true: // Ochrona przed starszymi wersjami przeglądarki Internet Explorer function aaScreenIE() { if (navigator.appName == 'Microsoft Internet Explorer') { msie=navigator.appVersion.split("MSIE") version=parseFloat(msie[1]); if (version >= 6) return false; } else return false; return true; }

Następnie należy zmodyfikować metodę obsługi zdarzenia window.onload, aby w przypadku użycia przeglądarki Internet Explorer w wersji starszej niż 6 aplikacja nie dodawała metod obsługi zdarzenia: // Interwencja w przesyłanie formularza window.onload=function() { if (aaScreenIE()) return; document.getElementById('myform').onsubmit=getRecipe; alert(navigator.appName + " " + navigator.appVersion); };

Dzięki temu filtrowi nie trzeba martwić się o to, że użytkownicy korzystający ze starszych, niezgodnych wersji przeglądarki Internet Explorer będą otwierać aplikacje ajaksowe, które prawdopodobnie nie będą w nich działać. W zamian osoby używające starszych przeglądarek będą mogły korzystać z tradycyjnej funkcjonalności opartej na formularzach. Pora zająć się odpowiedziami w Ajaksie.

Przygotowywanie i wysyłanie żądania

|

55

Przetwarzanie ajaksowych odpowiedzi Aby przetworzyć ajaksową odpowiedź i wyświetlić przepis, trzeba wprowadzić dwie zmiany w istniejącej aplikacji. Pierwsza z nich polega na umieszczeniu odpowiedzi na żądanie bezpośrednio na stronie, a druga — na modyfikacji układu strony, aby zapewnić miejsce na wyniki. W ostatnim przykładzie w poprzednim punkcie funkcja getRecipe zgłasza żądanie do tej samej aplikacji sieciowej drink.php, która była używana we wcześniejszej, tradycyjnej wersji, a istniejąca wersja aplikacji działającej po stronie serwera ma raczej tworzyć stronę internetową, niż zwracać dane. To działanie stanie się widoczne przy przeglądaniu zwróconych danych, zapisanych we właściwości responseText obiektu XHR. Zwracane jest zarówno formatowanie strony, jak i dane, podczas gdy w aplikacji ajaksowej potrzebne są tylko dane. Dlatego trzeba zmodyfikować program działający po stronie serwera, przekształcając go z aplikacji sieciowej na usługę sieciową, która będzie obsługiwać interakcję między komputerami przez internet. Mówiąc dokładniej, usługa sieciowa ma zwracać dane przy użyciu określonego protokołu (w tym przypadku będzie to REST), zamiast stosować prostsze rozwiązanie w postaci ustawiania zmiennych aplikacji. Ponieważ ta sama funkcjonalność ma być dostępna także w przypadku aplikacji bez obsługi skryptów, niezależnie od wybranego podejścia program musi działać zarówno wtedy, kiedy zostanie użyty jako tradycyjna aplikacja sieciowa, jak i wtedy, gdy zostanie użyty jako usługa. Na potrzeby omawianego przykładu wystarczą proste zmiany; wystarczy dodać instrukcję echo $result na końcu aplikacji recipe.php, aby wyświetlić wyniki. Po tej drobnej zmianie

aplikacja będzie działać niezależnie od tego, czy zostanie zagnieżdżona w bloku kodu PHP na stronie internetowej, czy zostanie wywołana jako usługa REST. Żądanie Ajaksa w funkcji getRecipe należy zmodyfikować tak, aby wywoływało usługę recipe.php: // Pobieranie przepisu za pomocą Ajaksa function getRecipe(evnt) { if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; var drink = encodeURIComponent(document.getElementById('drink').value); var qry = "drink=" + drink; var url = 'recipe.php?' + qry; xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = printRecipe; xmlhttp.send(null); if (evnt && evnt.preventDefault()) evnt.preventDefault(); return false; }

Po uruchomieniu aplikacji ze zmodyfikowaną wersją funkcji getRecipe przetworzony tekst odpowiedzi będzie wyświetlał fragment kodu HTML, a nie całą stronę internetową. Jest to minimalna odpowiedź potrzebna w aplikacjach ajaksowych — dane sformatowane w taki sposób, że aplikacja potrafi je obsłużyć. Formatowanie zwracanych danych zależy od tego, co programista chce z nimi zrobić za pomocą kodu JavaScript. Ważne jest także, jakie inne aplikacje mają korzystać z danej usługi. W przypadku istniejących aplikacji sama usługa określa używany format. Jeśli ta usługa zwraca dane w określonym formacie, program kliencki musi się do tego dostosować. Przykładowy program zwraca już fragmenty kodu HTML. Pora dołączyć ten kod do dokumentu. 56

|

Rozdział 2. Elementy Ajaksa

Odpowiedzi szybko i łatwo — fragmenty kodu HTML i właściwość innerHTML Jednym z najprostszych sposobów na dołączenie tekstu odpowiedzi ajaksowych do strony jest dodanie fragmentu kodu HTML przy użyciu niestandardowej, ale powszechnie obsługiwanej właściwości innerHTML. Jeśli dane zwrócone przez usługę sieciową mają oparty na tekście format kodu HTML, można je dołączyć bezpośrednio do dokumentu, wprowadzając drobne zmiany lub w ogóle z nich rezygnując. Jak ilustrują to przykłady z poprzedniego punktu, odpowiedź ma już format HTML. Aby zakończyć zadanie, wystarczy zintegrować odpowiedź ze stroną. Prowadzi to do drugiego kluczowego zagadnienia w aplikacjach ajaksowych: jak dodawać nowe dane do stron. Przy zagnieżdżaniu odpowiedzi na stronie jednym z rozwiązań jest ręczne dodanie do strony pustego elementu, który służy jako miejsce na zwrócone dane. Jednak lepszym sposobem jest utworzenie takiego elementu dynamicznie. Dzięki temu, jeśli obsługa skryptów jest wyłączona, taki element nie ma wpływu na stronę. Co ważniejsze, jeśli element jest tworzony dynamicznie, nie trzeba modyfikować wszystkich poszczególnych stron, które używają danego elementu. Po dodaniu obiektu przeznaczonego na nowy przepis można albo uzyskać do niego dostęp i ponownie go użyć, albo uzyskać dostęp do niego, usunąć go, a następnie utworzyć od nowa przy każdym uruchomieniu aplikacji. To drugie rozwiązanie jest atrakcyjne, ponieważ nie trzeba przejmować się opróżnianiem elementu przed dodaniem nowych danych. W obecnej wersji aplikacji dane wyjściowe są dodawane do elementu div o identyfikatorze recipe. Ten nowy element jest dodawany do strony internetowej pod blokiem zawierającym formularz z listą wyboru. Aby prawidłowo wyświetlać dane, można rozbudować dynamiczny aspekt aplikacji, nie tworząc odrębnych ustawień stylu dla nowego elementu. Wymaga to po prostu dostosowania za każdym razem stylu elementu za pomocą właściwości style: elem.style.backgroundColor="#fff";

Jednak jeśli ustawienia stylu nie zmieniają się wielokrotnie (wtedy próba utworzenia nowych klas CSS dla każdej zmiany może się okazać kosztowna), lepszą techniką jest przypisanie zdefiniowanej reguły arkusza stylów do właściwości className elementu: obj.className = 'pewnaklasa';

Jeśli właściwość className nie istnieje, można utworzyć nową regułę arkusza stylów i zastosować ją dla nowego elementu. Niestety, występują znaczące różnice między przeglądarkami związane ze stosowaniem tej techniki, a jej obsługa jest w nich bardzo różna. W zamian można utworzyć klasę ręcznie i dodać ją do ogólnego arkusza stylów aplikacji. Warto zapoznać się z doskonałą serią How to create autorstwa Marka „Tarquina” Wiltona-Jonesa, a zwłaszcza z samouczkiem dotyczącym dynamicznych arkuszy stylów. Znajdują się tam szczegółowe informacje dotyczące dynamicznego tworzenia i dodawania reguł arkuszy stylów. Materiały te są dostępne na stronie http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets. Ponieważ arkusz stylów jest używany przez wiele stron, można dodać odpowiednią regułę bezpośrednio do pliku drink.css:

Przetwarzanie ajaksowych odpowiedzi

|

57

#recipe { margin-left: 400px; margin-top: 30px; background-color: #E6F990; width: 350px; padding: 10px; }

Kliencka strona internetowa zawiera odnośnik do nowego pliku JavaScript — getdrink2.js. Ten plik ze skryptami zawiera kopię kodu JavaScript przedstawionego na listingu 2.5, jednak w tym przypadku funkcja getRecipe wywołuje nowo utworzoną usługę sieciową — recipe.php. Funkcja printRecipe obecnie przetwarza tekst odpowiedzi, zagnieżdżając zwrócony fragment HTML na stronie, co przedstawia listing 2.6. Listing 2.6. Dołączanie na stronie fragmentu kodu HTML z przepisem var xmlhttp; // Pobieranie przepisu za pomocą Ajaksa function getRecipe(evnt) { if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; var drink = encodeURIComponent(document.getElementById('drink').value); var qry = "drink=" + drink; var url = 'recipe.php?' + qry; xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = printRecipe; xmlhttp.send(null); if (evnt && evnt.preventDefault()) evnt.preventDefault(); return false; } // Dodawanie przepisu do strony function printRecipe() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var body = document.getElementsByTagName('body'); // Usuwanie, jeśli istnieje if (document.getElementById('recipe')) { body[0].removeChild(document.getElementById('recipe')); } var recipe = document.createElement('div'); recipe.id = 'recipe'; recipe.className = 'recipe'; recipe.innerHTML = xmlhttp.responseText; body[0].appendChild(recipe); } } // Ingerencja w przesyłanie formularza window.onload=function() { if (aaScreenIE()) return; document.getElementById('myform').onsubmit=getRecipe; };

Funkcja uzyskuje dostęp do elementu div z przepisem, dołącza do niego pobrany tekst przepisu za pomocą właściwości innerHTML i formatuje przy użyciu nazwy klasy — recipe. Rysunek 2.2 przedstawia stronę po wybraniu jednego z przepisów.

58

|

Rozdział 2. Elementy Ajaksa

Rysunek 2.2. Aplikacja Drinki wyświetlająca przepis pobrany za pomocą żądania Ajaksa i dołączony przy użyciu właściwości innerHTML

Przy użyciu kodu HTML zwróconego jako fragment tekstu przez usługę sieciową można zmodyfikować dowolny element HTML, do którego istnieje dostęp przy użyciu skryptów. Dlatego żądania Ajaksa z wynikami w postaci fragmentów kodu HTML oraz właściwość innerHTML są tak popularne w przypadku aplikacji, które kierują zapytania w celu pobrania danych i używają ich bezpośrednio na stronie. Jest to szybkie i łatwe podejście do Ajaksa, jednak z przedstawioną techniką wiąże się pewne ryzyko: trzeba mieć bardzo duże zaufanie do usługi sieciowej, aby bezpośrednio dodawać kod HTML bez wiedzy o tym, co zawiera. Nawet jeśli programista używa własnych usług, może popełnić błąd, który doprowadzi do tego, że strona będzie nieczytelna. Jeśli aplikacja zostanie odpowiednio zaatakowana, napastnik będzie mógł umieścić na stronie skrypt, który spowoduje problemy po stronie użytkowników. Stosując omówione podejście, należy pamiętać o następujących zagadnieniach: • Zagnieżdżanie fragmentów kodu XHTML za pomocą właściwości innerHTML wymaga

dużego zaufania do używanych usług sieciowych. • Zagnieżdżane fragmenty mogą być nieprawidłowo sformatowane i powodować, że stro-

na będzie nieczytelna. • Napastnicy mogą przechwycić żądanie i umieścić na stronie znaczniki niebezpieczne dla

użytkowników aplikacji. Jest też inne podejście do korzystania z XHTML, jednak najpierw dowiesz się, jak przetwarzać dokumenty XML zamiast fragmentów kodu HTML. Przetwarzanie ajaksowych odpowiedzi

|

59

Używanie bardziej tradycyjnego kodu XML W czasie tworzenia Ajaksa uważano, że wszystkie odpowiedzi powinny być sformatowane jako dobrze zdefiniowany kod XML, a do przekształcania danych należy używać kodu XSLT. Jeśli potrzebny jest dostęp do poszczególnych komponentów odpowiedzi, można przetworzyć kod XML za pomocą funkcji wbudowanych w silnik języka JavaScript. Oczywiście, nic nie jest tak proste, jak wygląda na pierwszy rzut oka, a używanie formatu XML wiąże się z pewnymi wyzwaniami, z których wcale nie najmniejszym jest duża ilość kodu potrzebna do jego wydajnej obsługi. Aby zademonstrować używanie odpowiedzi sformatowanych jako XML, zmieniłam program PHP z listingu 2.3, wysyłając nazwę drinka, jego składniki i instrukcję przygotowania jako odrębne elementy kodu XML. Ponadto nagłówek XML jest ustawiony na typ MIME text/xml. Sformatowanie danych w taki sposób wpływa na dwie rzeczy: po pierwsze, kod XML jest wczytywany i przetwarzany jako dokument XML i można go pobrać za pomocą właściwości responseXML, a nie responseText; po drugie, dostęp do każdego elementu danych można uzyskać za pomocą metod do obsługi modelu DOM. Listing 2.7 przedstawia kod nowej usługi sieciowej. Jest on zapisany w pliku recipe2.php. Listing 2.7. Usługa sieciowa zwracająca przepisy na drinki. Odpowiedź jest sformatowana jako dobrze zdefiniowane dane XML Brak nazwy drinka"; } else { // Usuwanie odstępów z początku i końca szukanej nazwy $search = trim($drink); switch($search) { case "TEA" : $result = "" . "liście herbaty" . "Zagotuj wodę. Zalej nią liście herbaty. " . "Parz pięć minut. Po odcedzeniu można podawać."; break; case "APPLETINI" : $result = "" . "30 ml wódki" . "15 ml Sour Apple Pucker lub innego sznapsa " . "jabłkowego" . "Wymieszaj sznapsa z wódką w szklance z lodem. " . "Przelej do kieliszka do martini. " . "Udekoruj plasterkiem jabłka lub rodzynkami."; break; case "NONCHAMP" : $result = "" . "960 ml wody sodowej" . "360 zmrożonego koncentratu z białych " . "winogron" . "Wymieszaj wodę sodową" . " z sokiem z białych winogron."; break; case "SWMPMARGARITA" :

60

|

Rozdział 2. Elementy Ajaksa

$result = "" . "45 ml dobrej tequili" . "22 ml Cointreau" . "22 ml Grand Marnier" . "15 ml soku cytrynowego" . "60 ml sour mix" . "kilka zielonych oliwek" . "Wymieszaj wszystkie składniki. Schładzaj przez " . "godzinę. Wrzuć na dno wysokiej szklanki kilka zielonych oliwek. " . "Wlej margeritę na oliwki. Po dziesięciu minutach można podawać." . ""; break; case "LEMON" : $result = "" . "30 ml wódki cytrynowej" . "30 ml soku cytrynowego" . "łyżeczka cukru" . "Wymieszaj z lodem, " . "odcedź i podawaj."; break; default : $result = ""; break; } $result = '' . "" . $result . ""; header("Content-Type: text/xml; charset=utf-8"); echo $result; } ?>

Ponieważ XML to kapryśny format, warto najpierw przetestować samą usługę sieciową, uruchamiając aplikację i ręcznie podając nazwę drinka: http://pewnaap.pl/recipe2.php?drink=LEMON

Jeśli dane XML zwrócone przez serwer są dobrze zdefiniowane i aplikacja działa bez problemów, obiekt responseXML powinien zawierać wynik. Na listingu 2.7 kod XML jest zapisany na stałe w aplikacji PHP. Jednak w aplikacjach produkcyjnych do udostępniania danych w formacie XML należy używać bibliotek XML. Z tego samego powodu po stronie klienta lepiej jest generować treść za pomocą modelu DOM, a nie metody document.write, i używać funkcji do obsługi danych XML w celu sprawdzania, czy kod XML jest prawidłowo zbudowany, wszystkie elementy są poprawnie zakończone i nie występują nieoczekiwane efekty uboczne z powodu „złego” kodu XML. PHP5 udostępnia funkcjonalność do obsługi DOM XML podobną do tej dostępnej w języku JavaScript. Poniższy fragment to przykład utworzenia przepisu na gorącą herbatę za pomocą modelu DOM: // Tworzenie nowego dokumentu XML $dom = new DOMDocument('1.0', 'utf-8'); // Główny element $recipe = $dom->createElement('recipe'); $dom->appendChild($recipe);

Przetwarzanie ajaksowych odpowiedzi

|

61

// Tworzenie nagłówka z nazwą $title = $dom->createElement('title'); $title->appendChild($dom->createTextNode("Gorąca herbata"); $recipe->appendChild($title);

Po stronie usługi sieciowej sformatowanie odpowiedzi jako kodu XML jest łatwe. Przetwarzanie takich danych po stronie ajaksowego klienta jest nieco bardziej skomplikowane. Funkcję printRecipe trzeba napisać od nowa i jak wkrótce zobaczysz, wymaga to dużej ilości kodu. Ponieważ istnieje dostęp do poszczególnych obiektów, składniki są wymieniane jako elementy ul, nazwa jest wyświetlana jako nagłówek, a instrukcje są wyświetlane jako akapit (listing 2.8). Wszystkie elementy są zagnieżdżone w jednym bloku recipe. Listing 2.8. Klient Ajaksa używający danych w formacie XML // Dodaje przepis do strony function printRecipe() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var body = document.getElementsByTagName('body'); // Usuwa przepis, jeśli istnieje if (document.getElementById('recipe')) { body[0].removeChild(document.getElementById('recipe')); } var recipe = document.createElement('div'); recipe.id = 'recipe'; recipe.className='recipe'; // Dodaje nagłówek var title = xmlhttp.responseXML.getElementsByTagName('title')[0].firstChild. nodeValue; var titleNode = document.createElement('h3'); titleNode.appendChild(document.createTextNode(title)); recipe.appendChild(titleNode); // Dodaje składniki var ul = document.createElement("ul"); var ingredients = xmlhttp.responseXML.getElementsByTagName('ingredient'); for (var i = 0; i < ingredients.length; i++) { var x = document.createElement('li'); x.appendChild(document.createTextNode(ingredients[i].firstChild.nodeValue)); ul.appendChild(x); } recipe.appendChild(ul); // Dodaje instrukcję var instr = xmlhttp.responseXML.getElementsByTagName('instruction')[0].firstChild. nodeValue; var instrNode = document.createElement('p'); instrNode.appendChild(document.createTextNode(instr)); recipe.appendChild(instrNode); // Dołącza do ciała body[0].appendChild(recipe); } }

Warto dokładniej przyjrzeć się kodowi funkcji printRecipe. Funkcja getElementsByTagName modelu DOM służy do uzyskania dostępu do elementów powiązanych z każdym obiektem — nazwy, składników i instrukcji. Składników może być kilka, dlatego kod używa ich jako tablicy i przetwarza w odpowiedni sposób. 62

|

Rozdział 2. Elementy Ajaksa

W przypadku każdego obiektu kod uzyskuje dostęp do tekstu węzła podrzędnego powiązanego z danym elementem i używa tego tekstu do zapełnienia węzła textNode modelu DOM. Następnie funkcja dołącza ten węzeł do nowego elementu niezależnie od tego, czy jest to nazwa, element listy czy akapit z instrukcjami. Element jest następnie dołączany do obiektu recipe w głównym dokumencie. A oto kolejne etapy:

1. Pobieranie elementów na podstawie nazwy znacznika (nazwy elementu): titleObj = xmlhttp.responseXML.getElementsByTagName('title');

2. Po uzyskaniu dostępu do kolekcji (funkcja getElementsByTagName zwraca listę nodeList,

która jest przetwarzana jako tablica) należy uzyskać dostęp do każdego węzła (lub pierwszego w przypadku pojedynczego elementu), znaleźć pierwszy węzeł podrzędny danego węzła i pobrać jego wartość: title = titleObj[0].firstChild.nodeValue;

3. Tworzenie nowego elementu h3 do przechowywania zawartości: titleText = document.createElement('h3');

4. Tworzenie węzła textNode do przechowywania wartości tekstowej z danych XML: tileText = document.createTextNode(title);

5. Dołączanie węzła textNode do nowo utworzonego węzła: titleNode.appendChild(titleText);

6. Dołączanie tego węzła do elementu, który ma go zawierać: recipe.appendChild(titleNode);

Po przetworzeniu danych obejmujących nazwę, składniki i instrukcje strona powinna wyglądać tak jak na rysunku 2.3.

Rysunek 2.3. Aplikacja „Pobierz drinki” oparta na danych w formacie XML Przetwarzanie ajaksowych odpowiedzi

|

63

Listing 2.8 zawiera znacznie więcej kodu niż rozwiązanie używające właściwości innerHTML, ale wyniki są bardziej eleganckie, ponieważ można sformatować poszczególne elementy w przeglądarce, a nie po stronie serwera. Można jednak użyć jeszcze innej techniki. Pozwala ona uprościć dostęp do danych, umożliwiając przy tym formatowanie poszczególnych elementów. To podejście używa notacji skryptowej zwanej JSON.

Upraszczanie przetwarzania za pomocą formatu JSON JSON (ang. JavaScript Object Notation) to sposób przekazywania odpowiedzi z danymi za pomocą opartej na tekście notacji obiektowej języka JavaScript. Dostęp do takich danych w tradycyjnych aplikacjach ajaksowych odbywa się przez użycie funkcji eval do „utworzenia” obiektu zdefiniowanego w odpowiedzi. Format JSON ma postać par klucz-wartość: object { klucz : wartość }

Może też przyjmować postać tablicy: array [wartość, wartość, ..., wartość]

Można też zastosować obie formy jednocześnie: object { klucz: [{ klucz : wartość}, {klucz : wartość}] }

Tworzenie obiektów odbywa się podobnie jak w poniższym kodzie. W instrukcji eval używana jest tu właściwość responseText: eval("theObj = (" + xmlhttp.responseText ")");

Jeśli zwrócone dane obejmują nazwę obiektu, można użyć następującej składni: eval(xmlhttp.responseText);

Funkcja eval tworzy obiekt, do którego można uzyskać dostęp w taki sam sposób jak do zwykłych obiektów i tablic języka JavaScript. Nie trzeba używać metod modelu DOM do obsługi danych XML, co miało miejsce w poprzednim punkcie. Krótkie przypomnienie: funkcja eval interpretuje tekst jako kod języka JavaScript i wykonuje instrukcje zawarte w tekście tak, jakby był to zwykły kod JavaScript.

Oczywiście, jeśli bezpośrednie zagnieżdżanie na stronie kodu HTML w takiej postaci, w jakiej się go otrzymało, wydaje się ryzykowne, tym bardziej dotyczy to używania funkcji eval na nieznanych danych. Jeśli programista zna lub kontroluje źródło danych, takie rozwiązanie powinno być dość bezpieczne. W przeciwnym razie (lub jeśli programista chce zapewnić większe bezpieczeństwo) można użyć parsera danych JSON, na przykład parseJSON dostępnego w witrynie poświęconej temu formatowi (http://www.json.org/js.html): var obj = xmlhttp.responseText.parseJSON();

Aby skrypty w przykładach w tym rozdziale były prostsze, funkcja eval jest wywoływana bezpośrednio na danych. Zastosowanie formatu JSON wymaga wprowadzenia zmian zarówno w usłudze sieciowej, jak i w kliencie ajaksowym. Skoncentrujmy się najpierw na usłudze. Listing 2.9 zawiera usługę sieciową w języku PHP, recipe3.php, zmodyfikowaną w porównaniu do listingów 2.3 i 2.7. Ta wersja zwraca oparte na tekście dane w formacie JSON. 64

|

Rozdział 2. Elementy Ajaksa

Listing 2.9. Usługa sieciowa zwracająca dane w formacie JSON Brak nazwy drinka"; } else { // Usuwanie odstępów z początku i końca szukanej nazwy $search = trim($drink); switch($search) { case "TEA" : $result = "{ 'title' : 'Gorąca herbata'," . " 'ingredients' : [ { 'ingredient' : 'liście herbaty' }," . " {'ingredient' : 'woda'}]," . " 'instruction' : 'Zagotuj wodę. Zalej nią liście herbaty." . " Parz pięć minut. Po odcedzeniu można podawać.'}"; break; case "APPLETINI" : $result = "{ 'title' : 'Appletini', " . " 'ingredients' : [ { 'ingredient' : '30 ml wódki' }, " . " { 'ingredient' : '15 ml Sour Apple Pucker lub innego sznapsa'}]," . " 'instruction' : 'Wymieszaj sznapsa z wódką w szklance z lodem. " . "Przelej do kieliszka do martini. Udekoruj plasterkiem " . "jabłka lub rodzynkami.'}"; break; case "NONCHAMP" : $result = "{ 'title' : 'Szampan bezalkoholowy', " . " 'ingredients' : [ { 'ingredient' : '960 ml wody sodowej' }, " . " { 'ingredient' : '360 ml zmrożonego koncentratu z białych" . " winogron'}]," . " 'instruction' : 'Wymieszaj wodę sodową z koncentratem z białych" . " winogron.'}"; break; case "SWMPMARGARITA" : $result = "{ 'title' : 'Swamp Margaria', " . " 'ingredients' : [ { 'ingredient' : '45 ml dobrej tequili'}, " . " { 'ingredient' : '22 ml Cointreau'}, " . " { 'ingredient' : '22 ml Grand Marnier'}, " . " { 'ingredient' : '15 ml soku cytrynowego'}, " . " { 'ingredient' : '60 ml sour mix<'}, " . " { 'ingredient' : 'kilka zielonych oliwek'}]," . " 'instruction' : 'Wymieszaj wszystkie składniki. Schładzaj przez " . "godzinę. Wrzuć na dno wysokiej szklanki kilka zielonych oliwek. " . "Wlej margeritę na oliwki. Po dziesięciu minutach należy odcedzić " . "i można podawać.'}"; break; case "LEMON" : $result = "{ 'title' : 'Kropla cytryny', " . " 'ingredients' : [ { 'ingredient' : '30 ml wódki cytrynowej'}, " . " { 'ingredient' : '30 ml soku cytrynowego'}, " . " { 'ingredient' : 'łyżeczka cukru'}]," . " 'instruction' : 'Wymieszaj z lodem, " . "odcedź i podawaj.'}"; break; default : $result = "{ 'title','Brak przepisu'}"; break; } echo $result; } ?>

Przetwarzanie ajaksowych odpowiedzi

|

65

Struktura każdego przepisu na listingu 2.9 to obiekt ograniczony przez nawiasy klamrowe. Taki obiekt zawiera nazwę i instrukcje jako pary właściwość-wartość, a składniki są zapisane jako tablica obiektów. Podobnie jak w przypadku XML większość języków używanych do tworzenia usług sieciowych ma biblioteki także do obsługi formatu JSON. Na przykład w języku PHP jest to php-json, która obecnie wchodzi w skład języka PHP 5.2.0.

Listing 2.10 przedstawia zmodyfikowaną wersję funkcji printRecipe. Warto zauważyć, że jedyna różnica między kodem tego przykładu a listingiem 2.8 polega na sposobie pobierania danych. Tworzenie nowych elementów odbywa się identycznie. Listing 2.10. Klient aplikacji Drinki używający danych w formacie JSON // Dodaje przepis do strony function printRecipe() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var body = document.getElementsByTagName('body'); // Usuwa przepis, jeśli istnieje if (document.getElementById('recipe')) { body[0].removeChild(document.getElementById('recipe')); } var recipe = document.createElement('div'); recipe.id = 'recipe'; recipe.className='recipe'; var recipeObj = eval("(" + xmlhttp.responseText + ")"); // Dodaje nagłówek var title = recipeObj['title']; var titleNode = document.createElement('h3'); titleNode.appendChild(document.createTextNode(title)); recipe.appendChild(titleNode); // Dodaje składniki var ul = document.createElement('ul'); var ingredients = recipeObj.ingredients; for (var i = 0; i < ingredients.length; i++) { var x = document.createElement('li'); x.appendChild(document.createTextNode(ingredients[i].ingredient)); recipe.appendChild(x); } recipe.appendChild(ul); // Dodaje instrukcję var instr = recipeObj.instruction; var instrNode = document.createElement('p'); instrNode.className='instruction'; instrNode.appendChild(document.createTextNode(instr)); recipe.appendChild(instrNode); body[0].appendChild(recipe); } }

Efekt zastosowania w aplikacji danych w formacie JSON jest taki sam jak w przypadku formatu XML, jednak dostęp do takich danych jest zwykle łatwiejszy, a ich obsługa w języku

66

|

Rozdział 2. Elementy Ajaksa

JavaScript — wygodniejsza. Jest to jeden z powodów, dla których w wielu platformach zarządzanie wymianą danych między serwerem a klientem odbywa się przy użyciu formatu JSON. Przetwarzanie obiektów JSON jest także bardziej wydajne niż stosowanie wielu parserów XML wbudowanych w przeglądarki, choć jeśli dane nie są szczególnie długie lub złożone, różnice nie będą zauważalne. JSON to także popularny format używany do obchodzenia zabezpieczeń języka JavaScript. To zagadnienie omówione jest w dalszej części rozdziału. Choć format JSON został stworzony doraźnie, następują próby standaryzacji jego składni. Na przykład wszystkie łańcuchy znaków w danych JSON muszą używać cudzysłowów, a nie apostrofów. Ponadto wszystkie słowa kluczowe muszą znajdować się w cudzysłowach. Więcej informacji na ten temat zawiera artykuł Keep your JSON valid Simona Willisona (http://simonwillison.net/2006/Oct/11/json) i JSON is not just Object Notation Jesse Skinnera (http://www.thefutureoftheweb.com/blog/2006/8/json-is-not-just-object-notation). Jesse był także recenzentem technicznym tej książki.

JSON i XML są dużo łatwiejsze w użytku, jeśli programista chce w odmienny sposób obsługiwać zwracane elementy, choć korzystanie z właściwości innerHTML i fragmentów kodu HTML może być szybsze. Jednak istotna różnica między trzema omówionymi wcześniej formatami polega na tym, że usługa zwracająca dane dla aplikacji udostępnia je także aplikacjom bez obsługi skryptów. Strona przetwarzająca formularz przesłany w przypadku braku obsługi skryptów może używać zarówno danych XML, jak i JSON — dostępne są biblioteki języka PHP, które wykonują większość operacji za programistę. Lepszym rozwiązaniem jest albo udostępnianie danych w różnych formatach (HTML, XML lub JSON) i umożliwienie klientowi wyboru (na przykład za pomocą parametru typu format=JSON), albo zastosowanie danych XHTML, po upewnieniu się, że mają format XML umożliwiający bezpośrednie umieszczenie ich na stronie lub przekazanie do parsera kodu XML.

Fragmenty kodu (X)HTML Nie ma powodu, dla którego aplikacje ajaksowe nie mogą przetwarzać kodu XHTML za pomocą technik do obsługi danych XML. Wystarczy nieco uporządkować i przygotować dane. Jedna zmiana w stosunku do poprzedniego przykładu, używającego fragmentów kodu HTML, polega na zastosowaniu bardziej sformalizowanego formatu, włączając w to utworzenie składników jako listy nieuporządkowanej, nazwy jako nagłówka i instrukcji jako akapitów. Mówiąc inaczej, format będzie pasował do danych wyjściowych. Następna zmiana polega na umieszczeniu danych w obrębie pojedynczego elementu. Posłuży do tego element div o nazwie recipe. Listing 2.11 przedstawia zmodyfikowaną wersję programu — recipe4.php. Listing 2.11. Dane w formacie XHTML Brak nazwy drinka"; } else { // Usuwanie odstępów z początku i końca szukanej nazwy

Przetwarzanie ajaksowych odpowiedzi

|

67

$search = trim($drink); switch($search) { case "TEA" : $result = "

Gorąca herbata

" . "

• liście herbaty
• woda

" . "

Zagotuj wodę. Zalej nią liście herbaty. " . "Parz pięć minut. Po odcedzeniu można podawać.

"; break; case "APPLETINI" : $result = "

Appletini

" . "

• 30 ml wódki
" . "
• 15 ml Sour Apple Pucker lub innego sznapsa

" . "

Wymieszaj sznapsa z wódką w szklance z lodem. Przelej do ". "kieliszka do martini. " . "Udekoruj plasterkiem jabłka lub rodzynkami.

"; break; case "NONCHAMP" : $result = "

Szampan bezalkoholowy

" . "

• 960 ml wody sodowej
" . "
• 360 zmrożonego koncentratu z białych winogron

" . "

Wymieszaj wodę sodową" . " z koncentratem z białych winogron.

"; break; case "SWMPMARGARITA" : $result = "

Swamp Margarita

" . "

• 45 ml dobrej tequili
" . "
• 22 ml Cointreau
" . "
• 22 ml Grand Marnier
" . "
• 15 ml soku cytrynowego
" . "
• 60 ml sour mix
" . "
• kilka zielonych oliwek

" . "

Wymieszaj wszystkie składniki. Schładzaj przez godzinę. " . "Wrzuć na dno wysokiej szklanki kilka zielonych oliwek. " . "Wlej margeritę na oliwki. Po dziesięciu minutach należy odcedzić " . "i można podawać.

"; break; case "LEMON" : $result = "

Kropla cytryny

" . "

• 30 ml wódki cytrynowej
" . "
• 30 ml soku cytrynowego
" . "
• łyżeczka cukru

" . "

Wymieszaj z lodem, " . "odcedź i podawaj.

"; break; default : $result = "

Brak przepisu

"; break; } $result = ""; echo $result; } ?>

Stronę używaną w przypadku braku obsługi skryptów trzeba nieco zmodyfikować, aby móc umieścić wyniki działania aplikacji PHP bezpośrednio w ciele strony, jak ilustruje to listing 2.12. Listing 2.12. Strona do przesyłania formularza w przypadku braku obsługi skryptów

68

|

Rozdział 2. Elementy Ajaksa

Drinki

Kliencka strona internetowa pozostaje prawie taka sama. Jedyne zmiany to przesyłanie formularza do strony drink2.php i używanie zagnieżdżonego skryptu o nazwie getdrink5.js. Nowy kod JavaScript jest bardzo podobny do tego z listingu 2.8, jednak zamiast korzystać z uniwersalnego dokumentu XML, używa standardowych danych XHTML. Aby obiekt XMLHttpRequest przetwarzał dokumenty w formacie XML, w usłudze sieciowej trzeba użyć nagłówka XML. Jednak ta usługa jest zagnieżdżona w innym dokumencie, dlatego nagłówek jest już wysyłany wcześniej i nie można zwrócić jego drugiej wersji. Potrzebny jest sposób na przetwarzanie kodu XML bez zależności od obiektu XMLHttpRequest. Aby obejść problem związany z nagłówkiem, w klienckim kodzie JavaScript można utworzyć egzemplarz parsera XML i wczytać łańcuch znaków w formacie XHTML zwrócony do tego nowego parsera jako zwykły tekst. Używam do tego techniki działającej w różnych przeglądarkach, utworzonej na podstawie artykułu z witryny W3 Schools (http://www.w3schools.com/dom/ dom_parser.asp). To rozwiązanie używa obiektu DOMParser w przypadku przeglądarek zgodnych z W3C (Safari, przeglądarki oparte na Gecko, Opera itd.), a obiektu ActiveXObject — w przeglądarkach Internet Explorer: // Kod dla przeglądarki Internet Explorer if (window.ActiveXObject) { var doc=new ActiveXObject("Microsoft.XMLDOM"); doc.async="false"; doc.loadXML(recipeObj); } // Kod dla Mozilli, Firefoksa, Opery itd. else { var parser=new DOMParser(); var doc=parser.parseFromString(recipeObj,"text/xml"); } xDoc = doc.documentElement;

Do przetwarzania danych w nowo utworzonym dokumencie XML można użyć metod modelu DOM w taki sam sposób jak do przetwarzania kodu XML dostępnego w obiekcie responseXML. Listing 2.13 zawiera nową wersję funkcji printRecipe języka JavaScript, która używa właśnie tej techniki. Listing 2.13. Używanie parsera danych XML do obsługi fragmentów kodu XHTML // Dodaje przepis do strony function printRecipe() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

Przetwarzanie ajaksowych odpowiedzi

|

69

if (window.ActiveXObject) { var doc=new ActiveXObject("Microsoft.XMLDOM"); doc.async="false"; doc.loadXML(xmlhttp.responseText); } else { var parser=new DOMParser(); var doc=parser.parseFromString(xmlhttp.responseText,"text/xml"); } var xDoc = doc.documentElement; var body = document.getElementsByTagName('body'); // Usuwa przepis, jeśli istnieje if (document.getElementById('recipe')) { body[0].removeChild(document.getElementById('recipe')); } var recipe = document.createElement('div'); recipe.id = 'recipe'; recipe.className='recipe'; // Dodaje nagłówek var title = xDoc.getElementsByTagName('h3')[0].firstChild.nodeValue; var titleNode = document.createElement('h3'); titleNode.appendChild(document.createTextNode(title)); recipe.appendChild(titleNode); // Dodaje składniki var ul = document.createElement("ul"); var ingredients = xDoc.getElementsByTagName('li'); for (var i = 0; i < ingredients.length; i++) { var x = document.createElement('li'); x.appendChild(document.createTextNode(ingredients[i].firstChild.nodeValue)); ul.appendChild(x); } recipe.appendChild(ul); // Dodaje instrukcję var instr = xDoc.getElementsByTagName('p')[0].firstChild.nodeValue; var instrNode = document.createElement('p'); instrNode.appendChild(document.createTextNode(instr)); recipe.appendChild(instrNode); // Dołącza do ciała body[0].appendChild(recipe); } } // Interwencja w przesyłanie formularza window.onload=function() { if (aaScreenIE()) return; document.getElementById('myform').onsubmit=getRecipe; };

Strona wynikowa będzie wyglądała tak samo niezależnie od tego, czy do pobrania przepisu na drinki posłużyła technika oparta na Ajaksie czy rozwiązanie bez obsługi skryptów. Jak widać, w zakresie przetwarzania żądań Ajaksa możliwych jest wiele rozwiązań. Ich wspólnym elementem jest to, że są ograniczone przez zabezpieczenia języka JavaScript. Wszystkie usługi sieciowe muszą działać w tej samej domenie, która zwraca strony klienckie. Następny punkt opisuje, jak można „obejść” to zabezpieczenie, co jest niezbędne w przypadku tworzenia lub używania widgetów w aplikacji.

70

|

Rozdział 2. Elementy Ajaksa

Punkty końcowe, zabezpieczenia języka JavaScript i widgety Stosowanie obiektów XMLHttpRequest ma jeden istotny limit: ograniczenie do jednej domeny. Żądania zgłaszane za pomocą tego obiektu można kierować tylko do tej samej domeny, z której pochodzi dana strona. Jest to kluczowy element strefy bezpieczeństwa języka JavaScript (można pracować jedynie w obrębie własnej „strefy bezpieczeństwa”, unikając w ten sposób zamieszania, które mogłoby powstać, gdyby kod miał dostęp do dowolnej lokalizacji). Jedną z przyczyn stosowania tego ograniczenia jest chęć zagwarantowania, że strona internetowa zgłaszająca żądanie XHR nie zostanie użyta przez szkodliwą witrynę w celu uzyskania dostępu do zasobów firmowego intranetu znajdujących się za zaporą sieciową. Pewne techniki umożliwiają obejście tego ograniczenia, jednak wraz z pojawianiem się nowych wersji przeglądarek jest ich coraz mniej. W przypadku aplikacji sieciowych ograniczenia związane z dostępem pomiędzy domenami zwykle nie stanowią problemu. W końcu większość usług sieciowych jest używana z tej samej domeny. Ponadto jeśli dane pochodzą z innej domeny, można utworzyć do pomocy pośrednika — aplikację działającą po stronie serwera, która uzyskuje dostęp do danych i przekazuje je klientowi. Jednak w pewnym przypadku nie można polegać na tym, że serwer będzie zarządzał dostępem do danych zewnętrznych za programistę — dzieje się tak przy korzystaniu z widgetów. Widgety są używane od dawna w aplikacjach stacjonarnych i innych środowiskach, są jednak stosunkowo nowe w programowaniu internetowym. Widgety to małe obiekty, zwykle umieszczane na pasku bocznym, które działają jak uproszczone aplikacje lub zapewniają dostęp do danych, na przykład pobierają informacje o pogodzie z witryn meteorologicznych lub dane o znacznikach z witryny del.icio.us. W rozdziale 3. przedstawiony jest widget z witryny weather.com. Do utworzenia go posłużyła jedna z bibliotek Ajaksa — Rico. Czasem pliki z kodem JavaScript udostępniającym funkcjonalność są w całości przechowywane na serwerze zdalnym, co oznacza, że nie będą występować problemy z dostępem między domenami, ponieważ zarówno kod JavaScript, jak i dane znajdują się na tym samym serwerze. W ten sposób działa Google Maps. Jednak czasem widgety wymagają, aby kod JavaScript był lokalny, ale dane i usługi sieciowe — zdalne. Co programista powinien wtedy zrobić?

Punkty końcowe JSON i dynamiczne tworzenie skryptów W opisanej sytuacji objawia się wartość JSON. Jest to coś więcej niż format czy struktura — to rodzaj bramy. Można utworzyć obiekt skryptowy w jednym dokumencie i domenie, przypisać do jego atrybutu src dane zwrócone z wywołania JSON skierowanego do punktu końcowego w innej domenie, a dane zostaną dołączone do strony klienckiej jako obiekty. Wszystkie usługi sieciowe to „punkty końcowe”, udostępniające usługi, których mogą używać aplikacje ajaksowe i inne. W tej książce nazwa „punkt końcowy” oznacza usługi, które umożliwiają stosowanie wywołań zwrotnych, co demonstruje niniejszy punkt.

Punkty końcowe, zabezpieczenia języka JavaScript i widgety

|

71

Aby opisane rozwiązanie działało, usługa zdalna musi udostępniać funkcjonalność umożliwiającą przekazanie w wywołaniu usługi nazwy wywoływanej zwrotnie funkcji. W żądaniach GET służy do tego parametr callback. Poniższy skrypt demonstruje to podejście i wywołuje punkt końcowy z danymi JSON z witryny del.icio.us, przekazując nazwę wywoływanej zwrotnie funkcji: var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'http://badges.del.icio.us/feeds/json/url/blogbadge?hash=b543788c882e78ef73bc012fbe4c4 eb1?callback=myFunction'; document.getElementsByTagName('head')[0].appendChild(script); function myFunction(data){ var obj = eval(data); alert(obj[0].hash); }

To żądanie spowoduje zwrócenie tekstu w formacie JSON i przekazanie tej struktury danych do funkcji wywoływanej zwrotnie podanej jako parametr callback: myFunction([...dane])

Ponieważ wywołanie jest używane jako atrybut src nowego elementu script, technika ta działa niemal tak samo jak wczytanie pliku z kodem JavaScript za pomocą istniejącego obiektu. Utworzenie elementu script, dodanie go do dokumentu i ustawienie właściwości src na zwrócone dane przekazywane do funkcji to odpowiednik uruchomienia skryptu na stronie. Jedyna różnica polega na tym, że dane używane jako argumenty w wywołaniu funkcji pochodzą ze zdalnego serwera, a nie z kodu. Poniższy fragment obejmuje kod z listingu 2.12, ale do utworzenia obiektu JavaScript używany jest blok z dynamicznym skryptem i wywoływana zwrotnie funkcja, a nie funkcja eval. Strona internetowa nie zmienia się, a jedynie wywołuje inny plik z kodem JavaScript. Po otrzymaniu żądania są z niego pobierane oba parametry — nazwa drinka i wywoływanej zwrotnie funkcji — a następnie do funkcji tej przekazywany jest obiekt JSON: echo $callback . '(' . $result . ')';

Po stronie klienta trzeba odpowiednio zmodyfikować funkcje getRecipe i printRecipe, co ilustruje listing 2.14. Funkcja printRecipe wygląda niemal tak samo jak wcześniej, jednak nie trzeba w niej tworzyć obiektu ani sprawdzać, czy żądanie zostało przetworzone, a jego status to 200. Wyniki zwrócone przez punkt końcowy są dodawane do dokumentu ze stroną internetową podobnie jak nowy plik ze skryptami. Listing 2.14. Skrypt używany przez kod z listingu 2.12, zmodyfikowany tak, aby używał wywoływanej zwrotnie funkcji JSON // Pobiera przepis za pomocą Ajaksa function getRecipe() { var drink = escape(document.forms[0].elements[0].value); var qry = "drink=" + drink; var url = 'http://burningbird.net/addingajax/examples/recipe3json.php?' + qry; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url + '&callback=printRecipe'; document.getElementsByTagName('head')[0].appendChild(script); }

72

|

Rozdział 2. Elementy Ajaksa

// Dodaje przepis do strony function printRecipe() { var body = document.getElementsByTagName('body'); // Usuwa przepis, jeśli istnieje if (document.getElementById('recipe')) { body[0].removeChild(document.getElementById('recipe')); } var recipe = document.createElement('div'); recipe.id = 'recipe'; recipe.className='recipe'; // Dodaje nagłówek var title = recipeObj['title']; var titleNode = document.createElement('h3'); titleNode.appendChild(document.createTextNode(title)); recipe.appendChild(titleNode); // Dodaje składniki var ul = document.createElement('ul'); var ingredients = recipeObj.ingredients; for (var i = 0; i < ingredients.length; i++) { var x = document.createElement('li'); x.appendChild(document.createTextNode(ingredients[i].ingredient)); ul.appendChild(x); } recipe.appendChild(ul);

}

// Dodaje instrukcję var instr = recipeObj.instruction; var instrNode = document.createElement('p'); instrNode.appendChild(document.createTextNode(instr)); recipe.appendChild(instrNode); body[0].appendChild(recipe);

}

Domena używana tu dla dynamicznego skryptu i jako punkt końcowy JSON to burningbird.net, podczas gdy oryginalna strona została pobrana z witryny Addingajax.com. Większość widgetów używających skryptów lokalnych do wywoływania zdalnych usług sieciowych działa w taki sposób i używa danych w formacie JSON. W dalszej części rozdziału poznasz wpływ dostępu do usług sieciowych z innych domen na bezpieczeństwo.

Czy trzeba stosować dane w formacie JSON? Nie. Jedyny kluczowy element tej techniki polega na tym, że usługa sieciowa dołącza wywoływaną zwrotnie funkcję do odpowiedzi, a także przekazuje tę odpowiedź jako argument do funkcji. Oznacza to, że dane mogą mieć inny format, na przykład XML.

Dynamiczne skrypty i XML Często utożsamia się przedstawione wcześniej podejście ze stosowaniem danych w formacie JSON. Nie jest to jednak konieczne. Można użyć danych w dowolnym formacie, który umożliwia przekazanie ich jako argumentu funkcji. Jedyne wymaganie polega na tym, że serwer musi przetworzyć parametr callback, a aplikacja ajaksowa musi zarządzać zwróconymi danymi. Punkty końcowe, zabezpieczenia języka JavaScript i widgety

|

73

Jeśli występuje zgodność między aplikacją a usługą sieciową, można nawet użyć większej liczby parametrów, choć należy tego unikać choćby w celu zachowania prostoty. Aby zademonstrować, że omówiona technika nie wymusza stosowania formatu JSON, zmodyfikowałam program PHP tworzący dane w formacie XML tak, aby przetwarzał także żądanie wywoływanej zwrotnie funkcji. Jedyna zmiana polega na tym, że program pobiera parametr callback ze zmiennej $_GET, a następnie przetwarza wywołanie zwrotne (jeśli jest dostępne) przed zwróceniem wyniku: $callback = $_GET['callback']; ... $result = "" . $result . "" if ($callback){ $result = $callback . '("' . $result . '")'; echo $result; } else { header("Content-Type: text/xml; charset=utf-8"); echo $result; }

Aplikacja udostępnia nagłówek odpowiedzi tylko przy braku wywołania zwrotnego. Nagłówek XML nie jest potrzebny, jeśli odpowiedź aplikacji służy do utworzenia wywołania funkcji z parametrem. Taką odpowiedź należy traktować jako zwykły tekst, a dane inne niż elementy XML są zbędne. Wysłanie nagłówka XML spowoduje wtedy, że aplikacja nie będzie działać. W odróżnieniu od danych JSON, które są już obiektem języka JavaScript, jeśli zostaną wczytane jako parametr, dokument XML trzeba zaimportować do aplikacji, aby można było uzyskać dostęp do niego za pomocą wbudowanego parsera XML przeglądarki: function printRecipe(recipeObj){ // Wczytywanie danych XML. // Kod dla przeglądarki Internet Explorer if (window.ActiveXObject) { var doc=new ActiveXObject("Microsoft.XMLDOM"); doc.async="false"; doc.loadXML(recipeObj); } // Kod dla Mozilli, Firefoksa, Opery itd. else { var parser=new DOMParser(); var doc=parser.parseFromString(recipeObj,"text/xml"); } xDoc = doc.documentElement; ...

Po wczytaniu za pomocą parsera DOM danych XML do dokumentu można manipulować nimi w taki sam sposób jak na listingach 2.8 i 2.13. Można użyć dowolnego formatu, jeśli dane w nim można albo zwrócić do obiektu XMLHttpRequest, albo przekazać jako argument funkcji w przypadku dynamicznych skryptów.

Bezpieczeństwo Podejrzewam, że wielu Czytelników jest przerażonych liczbą przedstawionych możliwości narażenia stron internetowych na najgorsze zagrożenia. 74

|

Rozdział 2. Elementy Ajaksa

W szczególności obejście zabezpieczających ograniczeń przeglądarki przez zastosowanie dynamicznych skryptów wywołujących zewnętrzne usługi, których nie można kontrolować, oznacza, że aplikacji grozi naruszenie bezpieczeństwa. Takie naruszenie zostało wykryte w 2006 roku w popularnej aplikacji Gmail firmy Google. Jedna z usług powiązanych z tą aplikacją zwracała listę kontaktów danego użytkownika. Ta funkcjonalność była udostępniana poprzez usługę sieciową w formacie JSON, a dopóki użytkownik był zalogowany, wywołanie tej usługi zwracało listę kontaktów tej osoby. Jednak wywołania tego typu można było zgłaszać z dowolnej lokalizacji, a usługa sieciowa nie sprawdzała, czy pochodzą z „bezpiecznej” domeny. Dlatego witryna internetowa mogła łatwo wywołać tę usługę JSON, a następnie przesłać listę kontaktów za pomocą wywołania Ajaksa do innej usługi, a nawet do żądania XHR na danej witrynie, co narażało osoby z listy kontaktów na spam. W przypadku poufnych danych tworzenie punktów końcowych w postaci usług JSON, a nawet XML, nie ma sensu, podobnie jak nie warto wywoływać usług z punktów końcowych znajdujących się na niezaufanych witrynach. Należy jednak pamiętać o zagadnieniach związanych z bezpieczeństwem, ponieważ usługi tego typu są przydatne przy stosowaniu widgetów. Jeśli zapoznasz się z ograniczeniami związanymi z bezpieczeństwem w Ajaksie, przedstawionymi na wiki Open Web Security Project (OWASP) na stronie www.owasp.org/index.php/ OWASP_AJAX_Security_Guidelines, możesz dojść do wniosku, że żadne zastosowanie Ajaksa nie jest bezpieczne, i jest to prawda — nie ma możliwości bezpiecznego używania Ajaksa. Są tylko zabezpieczenia, które można zastosować. Jak już wspomniałam, Douglas Crockford udostępnia na stronie http://www.json.org/js.html parser JSON, który można zastosować w aplikacji zamiast funkcji eval. Ten parser gwarantuje, że nieprzetwarzany obiekt nie zawiera ukrytych skryptów, które mogłyby wyrządzić szkody. W przypadku stosowania dynamicznych skryptów przetwarzanie danych XML przy użyciu parsera DOMParser jest bezpieczniejszym rozwiązaniem. Żadna z tych technik nie gwarantuje pełnego bezpieczeństwa, chyba że programista kontroluje punkt końcowy lub usługę sieciową albo ma duże zaufanie do używanej usługi zewnętrznej. Teraz, kiedy wiesz już, jak naruszyć bezpieczeństwo przeglądarki, pora zająć się dwoma następnymi kluczowymi zagadnieniami związanymi z tworzeniem aplikacji sieciowych: wydajnością i dostępnością. Rozdział 10. dotyczy skalowania i tworzenia witryn od podstaw, a także opisuje ogólnie problemy z bezpieczeństwem w Ajaksie.

Pierwszy rzut oka na wydajność Na kartach tej książki, szczególnie w dalszych rozdziałach, omawiane są pewne zagadnienia związane z wydajnością i usprawnienia dotyczące aplikacji ajaksowych. W tym miejscu chcę jednak po raz pierwszy poruszyć ten temat, omawiając ograniczenie do dwóch otwartych połączeń HTTP, które większość przeglądarek nakłada na strony pochodzące z określonej domeny. Kiedy użytkownik otwiera stronę internetową lub pobiera dane z internetu, w dowolnym momencie otwarte mogą być tylko dwa połączenia z jedną domeną. Oznacza to, że jeśli przeglądarka pobiera rysunki, pliki JavaScript i inne elementy zagnieżdżone na stronie, operacje Pierwszy rzut oka na wydajność

|

75

pobierania ich są umieszczane w kolejce na podstawie liczby połączeń. Ten problem staje się bardziej istotny, kiedy skrypt używa wywołań Ajaksa, które mogą zostać wstrzymane w oczekiwaniu na zwolnienie połączeń zajętych na czas przetwarzania innych wywołań lub w wyniku pobierania danych. Jeden ze sposobów na poprawę wydajności polega na umieszczeniu części mniej istotnych danych, na przykład rysunków, w innej domenie, co zwalnia połączenia z bieżącej domeny na potrzeby wywołań Ajaksa. Ta inna domena może znajdować się na tym samym serwerze, ponieważ ograniczenie związane z połączeniami wbudowane w przeglądarki opiera się na nazwach domen, a nie ich adresach IP. Można więc utworzyć poddomeny z nazwami CNAME, takie jak rysunki.nazwawitryny.pl czy js.nazwawitryny.pl, co umożliwia przeglądarce utworzenie więcej niż dwóch równoległych połączeń i zwiększa szybkość obsługi żądań strony oraz Ajaksa. Używanie kilku poddomen w celu zwiększenia liczby równoległych żądań HTTP może irytować użytkowników modemów telefonicznych, którzy korzystają z łączy o ograniczonej przepustowości. Jednak wraz z rosnącą powszechnością łączy szerokopasmowych staje się to mniej istotne. Trzeba wziąć pod uwagę możliwości klientów i na tej podstawie zaplanować rozwiązanie.

Następne usprawnienie związane z wydajnością polega na kompresji kodu JavaScript, dzięki czemu rozmiary plików są mniejsze. Jednak może to zaciemniać ten kod, przez co będzie on nieczytelny i trudny do powtórnego wykorzystania, jeśli dla programisty te zagadnienia mają znaczenie. Można łatwo znaleźć i wypróbować kilka narzędzi do kompresji kodu JavaScript, wpisując w wyszukiwarce wyrażenie „javascript compression”. Zamiast używać małych plików JavaScript, z których każdy trzeba wczytywać oddzielnie, można zastanowić się nad umieszczeniem w pojedynczym pliku kodu, który będzie najczęściej używany wspólnie. Jednak należy uwzględnić przy tym koszty pobierania kodu, który w danej aplikacji może być niepotrzebny. Lepiej jest używać mniejszych plików, niż pobierać zbędny kod.

Ostatnie słowo o asynchroniczności i synchroniczności Choć „A” w nazwie „Ajax” pochodzi od „asynchroniczności”, obiektów XMLHttpRequest nie trzeba używać asynchronicznie. Żądania synchroniczne to takie, w których przeglądarka jest zablokowana w czasie oczekiwania na odpowiedź. Tak działa poniższy kod: var state = document.forms[0].elements[0].value; var url = 'ajax.php?state=' + state; xmlhttp.open('GET', url, false); xmlhttp.send(null); alert(xmlhttp.getAllResponseHeaders());

W tym kodzie łańcuch znaków reprezentujący stan jest pobierany z pola formularza i służy do utworzenia żądania GET HTTP kierowanego do usługi sieciowej ajax.php. Trzeci parametr metody open to false, co oznacza, że żądanie będzie synchroniczne. To żądanie jest wysyłane bez parametrów (wartość null), a bezpośrednio po wywołaniu metody send kod otwiera okno komunikatu i wyświetla w nim nagłówki odpowiedzi. Jeśli usługa działa szybko, odpowiedź jest niemal natychmiastowa. Jednak jeśli usługa jest powolna, do czasu zakończenia obsługi żądania na stronie nie może zajść żadna inna opera-

76

|

Rozdział 2. Elementy Ajaksa

cja. Efekt jest nieco odmienny przy pierwszym otwarciu strony internetowej, kiedy to zwykle nie można podjąć żadnych działań do czasu zakończenia jej wczytywania. Większość aplikacji ajaksowych używa obiektów XMLHttpRequest asynchronicznie. Przesyłane jest wtedy żądanie asynchroniczne, a przeglądarka wciąż przetwarza kod po jego zgłoszeniu, zamiast czekać na odpowiedź serwera. Aby móc przetworzyć odpowiedź po jej otrzymaniu, należy przypisać odpowiednią funkcję do właściwości onreadystatechange obiektu XMLHttpRequest. Ta funkcja powinna sprawdzać stan gotowości i status żądania, a jeśli stan to 4, oznacza to, że żądanie zostało przetworzone. Asynchroniczna wersja wcześniejszego kodu wygląda tak: // Pobieranie przepisu za pomocą Ajaksa function getRecipe(evnt) { if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; var drink = encodeURIComponent(document.getElementById('drink').value); var qry = "drink=" + drink; var url = 'recipe.php?' + qry; xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = printRecipe; xmlhttp.send(null); if (evnt && evnt.preventDefault) evnt.preventDefault(); return false; }

Zaletą żądań asynchronicznych jest to, że programy odczytujące tekst stron internetowych mogą kontynuować interakcję ze stroną i przeglądarką w czasie przetwarzania żądania. Nawet jeśli programista chce zapobiec podejmowaniu przez takie programy innych działań do czasu zakończenia obsługi żądania, warto, aby uruchamiał żądania asynchronicznie. Jeśli żądanie jest synchroniczne, a usługa zostaje opóźniona lub działa zbyt długo, strona wygląda na „zamrożoną”, co daje wrażenie, że aplikacja jest zepsuta. Aby lepiej zrozumieć, jakie wrażenia powoduje opóźnienie w obsłudze żądań asynchronicznych i synchronicznych, można dodać funkcję sleep do dowolnej wersji aplikacji PHP zwracającej przepisy, którą wywołują żądania Ajaksa (obiekt XMLHttpRequest): // Opóźnienie sleep(10); // Usuwanie odstępów z początku i końca nazwy szukanego drinka $search = trim($drink);

Obecne ustawienia powodują 10 sekund opóźnienia, jednak można ustawić je na dowolną wartość. Zalecam jednak wypróbowanie najpierw 10 sekund. Zaręczam, że efekt zostanie osiągnięty. Po otwarciu strony i wybraniu drinka można zauważyć, że strona zostaje „zamrożona”, a pole wyboru wciąż jest otwarte. Wszystkie operacje, włączając w to ponowne wyświetlenie strony, oczekują teraz na zakończenie obsługi żądania. Inaczej mówiąc, strona działa tak, jakby była „zepsuta”. Po przywróceniu asynchronicznego działania w funkcji odpowiedź nadejdzie z zauważalnym opóźnieniem, dlatego warto rozważyć dodanie pola komunikatu lub jakiegoś innego wskaźnika informującego, że aplikacja działa. W tym rozwiązaniu strona przynajmniej nie jest „zamrożona”, co jest najgorszym wrażeniem, jakie może sprawiać witryna.

Ostatnie słowo o asynchroniczności i synchroniczności

|

77

Niezależnie od zastosowanego podejścia, jeśli obsługa żądania do usługi trwa dłużej niż limit czasu (zależy to od ustawień — zwykle jest to ponad 30 sekund), wystąpi błąd. W różnych przykładach przedstawione są proste techniki dodawania do aplikacji wskaźnika „w toku…”.

78

|

Rozdział 2. Elementy Ajaksa

ROZDZIAŁ 3.

Narzędzia i pojęcia związane z Ajaksem

Od czasu powstania język JavaScript przeszedł metamorfozę. W nowszych wersjach języka JavaScript obok bardziej złożonych i bogatszych bibliotek dostępne są elementy, dzięki którym programistom może się wydawać, że używają zupełnie nowego języka — pełnego nieznanych i dziwnych operatorów oraz funkcji. Popularność Ajaksa spowodowała zainteresowanie bardziej formalnymi podejściami do programowania w języku JavaScript, co doprowadziło do powstania nowych pomysłów oraz powiązanej z nimi terminologii i składni. Pozytywny efekt tych zmian to bardziej stabilne i bogatsze aplikacje. Wady to konieczność nauki żargonu społeczności programistów stosujących Ajaksa, a także spędzenia znacznej ilości czasu na zapoznawaniu się z bibliotekami, zanim będzie można je dołączać do własnych aplikacji. Ten rozdział opisuje niektóre z popularnych bibliotek Ajaksa jako wprowadzenie do nich, a także w celu przedstawienia niektórych z często spotykanych zagadnień i pojęć dotyczących Ajaksa. Ponadto w rozdziale tym opisano standardowe pułapki związane z używaniem bibliotek, z których wiele jest zaprojektowanych bardziej w celu tworzenia nowych wersji aplikacji stacjonarnych, niż dodawania Ajaksa do istniejących witryn i aplikacji internetowych. Większość bibliotek Ajaksa udostępnia podstawową funkcjonalność, na przykład metody, które umożliwiają dostęp do dowolnego obiektu strony internetowej bez konieczności korzystania z metod modelu DOM. Większość bibliotek umożliwia także komunikowanie się z usługami sieciowymi. Największa różnica między różnymi rodzajami bibliotek polega na tym, że jedne zawierają funkcje do wykonywania konkretnych zadań, a inne stanowią platformy zapewniające infrastrukturę, której można użyć do tworzenia innych bibliotek. Biblioteki można tworzyć w warstwach, budując jedną na podstawie innej, lub łączyć ze sobą, co stawia przed programistą specyficzne wyzwania. Na przykład, jeśli dwie biblioteki mają odmienne funkcje do obsługi zdarzenia onload okna, trzeba je odpowiednio skonfigurować, bo w przeciwnym razie jedna biblioteka przesłoni drugą, a procedura inicjująca może nie zostać wykonana prawidłowo. Diagnozowanie takich konfliktów między bibliotekami może być niezwykle trudne, ponieważ jeśli programista nie zna kodu którejś z bibliotek, nie będzie wiedział, w jaki sposób przeszkadzają one sobie nawzajem. Społeczność programistów aplikacji działających po stronie serwera także ma wpływ na Ajaksa, albo projektując nowe technologie klienckie współdziałające z usługami, językiem lub infrastrukturą, albo dołączając istniejące technologie do używanego zestawu narzędzi. Wiele takich narzędzi jest opisanych w ostatnim rozdziale tej książki. Obejmuje to rzut oka na platformę Ruby on Rails (RoR), która jest ściśle zintegrowana z przodkiem wszystkich bibliotek ajaksowych — Prototype. 79

Prototype Prawdopodobnie najlepiej znaną z bibliotek Ajaksa i jedną z najczęściej używanych jest Prototype. Jest to dość mała i niezależna biblioteka. Można ją szybko wczytać i stanowi ona podstawę, na której zbudowane są inne biblioteki, włączając w to opisane dalej Rico i script.aculo.us. Prototype to mniej platforma, a bardziej korektor języków skryptowych, ponieważ udostępnia zestaw obiektów, które zmniejszają złożoność dostępu do elementów stron internetowych i ułatwiają używanie ich w różnych przeglądarkach. To narzędzie zostało utworzone i wciąż jest zarządzane przez Sama Stephensona, a najnowszą wersję (w czasie pisania tej książki była to Prototype 1.5) można pobrać ze strony http://prototypejs.org. W tej witrynie znajduje się także dokumentacja interfejsu API tej biblioteki oraz artykuły i samouczki dotyczące korzystania z niej. Dodawanie biblioteki Prototype do projektów jest proste. Można dołączyć ją do aplikacji, używając następującej składni:

Jedną z cech biblioteki Prototype jest obecność w niej kilku funkcji i operacji przypominających te z języka Ruby. Język ten jest łatwy w użyciu, ale nieco niezrozumiały, a zastosowanie opartych na nim funkcji biblioteki Prototype w kodzie JavaScript może prowadzić do pomyłek, szczególnie jeśli programista nie zna wyjątkowych komponentów biblioteki Prototype. Kluczowymi komponentami są funkcje znane jako dolar i dolar F. Funkcja dolar, $(), zwraca referencję do elementu, którego nazwa zostanie przekazana do tej funkcji: var elem = $('pewien_element');

Do identyfikacji elementów służy atrybut id:

Jest to odpowiednik użycia poniższego wywołania metody DOM: var elem = document.getElementById('pewien_element');

Oprócz zwracania elementów funkcja $() dołącza kilka właściwości specyficznych dla biblioteki Prototype. Funkcja $F() zwraca wartość pola formularza na podstawie jego identyfikatora: var value = $F('pole_formularza'); ...

Powyższy kod działa tak samo jak: var value = document.getElementById('pole_formularza').value;

Biblioteka Prototype nie zawiera nowej funkcjonalności, a raczej udostępnia potrzebne funkcje w wygodny sposób. Korzystanie z funkcji document.getElementById jest proste, ale jeszcze łatwiejsze jest wywoływanie $(), zwłaszcza biorąc pod uwagę dodatkową funkcjonalność. Następny kluczowy element biblioteki Prototype to obiekt Enumerable, który służy do obsługi iteracji w języku JavaScript. W tym języku funkcje do przechodzenia po kolekcjach danych,

80

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

takich jak tablice, zawsze były nieco prymitywne, przynajmniej w porównaniu z innymi językami. Jest to także obszar ciągłych zmian w nowych wersjach języka JavaScript. Na przykład w JavaScript 1.6 dodano funkcje forEach i filter, a w JavaScript 1.7 — możliwość iteracji. Jednak dopóki te zmiany nie będą powszechnie obsługiwane we wszystkich przeglądarkach, do emulowania większości tej funkcjonalności można używać obiektu Enumerable biblioteki Prototype. Prototype udostępnia także obiekty do zarządzania obiektami XMLHttpRequest. Używanie tych obiektów zarządzających nie jest skomplikowane, a pozwalają one uprościć kod odpowiedzialny za tworzenie żądań kierowanych do usług sieciowych. Podstawowy obiekt do obsługi Ajaksa nosi, całkiem słusznie, nazwę Ajax, jednak większość operacji dostępna jest poprzez obiekt Ajax.Request. Poniżej przedstawiony jest przykład zastosowania tego obiektu do utworzenia żądania: var myAjax = new Ajax.Request( url, { method: 'get', parameters: qry, onComplete: printRecipe });

Pierwszy parametr to adres URL, pod który kierowane jest żądanie do usługi sieciowej, a drugi przyjmuje obiekt zawierający nazwę metody żądania HTTP, parametry żądania oraz nazwę funkcji wywoływanej po zakończeniu przetwarzania żądania. Odpowiedź obiektu XMLHttpRequest jest opakowana przez bibliotekę Prototype — nie można przechwycić poszczególnych stanów żądania. W zamian programista powinien obsługiwać zdarzenia: onComplete, onLoading, onLoaded i onInteractive, jeśli chce przetworzyć dane po przejściu żądania w każdy kolejny stan. Jednak w przypadku większości aplikacji istotne będzie wyłącznie zdarzenie onComplete lub onSuccess, które zachodzą tylko po udanym przetworzeniu żądania. Biblioteka Prototype umożliwia także emulowanie metod DELETE i PUT HTTP przy użyciu alternatywnego podejścia opartego na metodzie POST opisanej w rozdziale 2. Ta biblioteka umożliwia również automatyczne przetwarzanie zwracanych danych. Jeśli dane mają format HTML, można użyć metody Ajax.Updater do przetworzenia odpowiedzi i wstawienia danych do odpowiedniego elementu. Jeśli dane są oznaczone jako JSON, Prototype potrafi przetworzyć je automatycznie i przekazać jako obiekt do wywoływanej zwrotnie funkcji. Ważnym warunkiem jest to, aby dane były „oznaczone jako JSON”, co wymaga użycia nagłówka X-JSON. Jest on obsługiwany przez platformę Ruby on Rails, która w praktyce jest środowiskiem serwerowym biblioteki Prototype. Niestety, użycie niestandardowego nagłówka może się zakończyć niepowodzeniem, zwłaszcza z powodu rozmiaru zwracanych danych. Zamiast używać niestandardowych nagłówków, w przykładach w tym rozdziale i całej książce dane JSON są zwracane w obiekcie odpowiedzi, a następnie albo używane bezpośrednio w funkcji eval, albo przekazywane do mechanizmu przetwarzającego dane JSON, który można pobrać z witryny json.org. Najlepszy sposób na podsumowanie analizy Ajaksa i obiektów wyliczeniowych, a także funkcji dolar, to przedstawienie przykładu. Listing 3.1 pokazuje, jak używać biblioteki Prototype w celu utworzenia usługi sieciowej za pomocą obiektu Ajax. Tu usługa sieciowa przypomina tę przedstawioną na listingu 2.9 w rozdziale 2., jednak zamiast przesyłać jeden drink na podstawie nazwy, zwraca wszystkie przepisy w formacie JSON.

Prototype

|

81

Listing 3.1. Aplikacja PHP zwracająca listę przepisów na drinki w formacie JSON

Kiedy usługa zwróci odpowiedź na żądanie, dane w formacie JSON zostaną przetworzone w funkcji eval, co spowoduje utworzenie obiektu języka JavaScript zawierającego grupę obiektów reprezentujących drinki. Każdy obiekt drink można zidentyfikować za pomocą nazwy drinka. Wszystkie te obiekty zawierają następny obiekt, makings, który obejmuje nazwę, składniki i instrukcje. W części klienckiej aplikacji ajaksowej, którą przedstawia listing 3.2, po wybraniu drinka z listy rozwijanej tworzony jest obiekt Ajax.Request biblioteki Prototype, który przyjmuje adres URL usługi sieciowej. Do żądania przekazywane są także inne informacje, włączając w to nazwę funkcji, którą należy wykonać po udanym przetworzeniu żądania. Jeśli potrzebne są parametry, należy je przypisać do właściwości parameters tego obiektu. Wywoływana zwrotnie funkcja używa tekstu odpowiedzi w funkcji eval, aby utworzyć obiekt recipeObj, zawierający przepisy na wszystkie drinki, a w celu przetworzenia wyników wywoływana jest funkcja printRecipe. W funkcji printRecipe używana jest funkcja $F() w celu pobrania nazwy drinka, a funkcja $() służy do pobrania elementu zawierającego wyświetlany przepis. 82

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

Dalszy kod to najciekawszy fragment aplikacji. Do pobrania drinka wybranego z listy służy metoda find obiektu Enumerable biblioteki Prototype, do której przekazywana jest funkcja anonimowa odpowiedzialna za porównywanie — w tym przypadku porównuje ona nazwy drinków. Jeśli funkcja dopasuje nazwy, zwróci konkretny obiekt drink zawierający wszystkie informacje o danym drinku. Obiekt drink zawiera właściwość makings, która obejmuje właściwości: title, ingredients i instruction drinka. Do właściwości title i instruction można uzyskać dostęp bezpośrednio, jednak w przypadku właściwości ingredients, która jest tablicą pojedynczych składników, trzeba użyć dwóch innych funkcji obiektu Enumerable: collect, a następnie join. Wszystkie dane są złączane w łańcuch znaków, który służy do zaktualizowania istniejącej zawartości obiektu recipe. Kod JavaScript omawianej aplikacji przedstawiony jest na listingu 3.2. Listing 3.2. Używanie obiektu Enumerable biblioteki Prototype do wyszukiwania danych w obiektach reprezentujących drinki var recipeObj; Event.observe(window,'load',function() { Event.observe('myform','submit',getRecipe); }); function getRecipe(evnt) { Event.stop(evnt); if (recipeObj) { printRecipe(); return; } var url = 'query1.php'; var myAjax = new Ajax.Request( url, { method:'get', onSuccess: function(transport){ eval("recipeObj = {" + transport.responseText + "}"); printRecipe(); }, onFailure: function(){ alert('Wystąpił błąd...') } }); } function printRecipe() { // Pobieranie nazwy drinka i obiektu na przepis var drinkName = $F('drink'); // Wyszukiwanie nazwy drinka var drinkObj = recipeObj.drinks.find(function(drink) { if (drink.drink == drinkName) { return drink; } }); if (!drinkObj) return; var recipe = document.createElement('div'); Element.extend(recipe); recipe.id = 'recipe';

Prototype

|

83

recipe.addClassName('recipe'); var str = "

" + drinkObj.makings.title + "

"; var ingredients = drinkObj.makings.ingredients.collect(function(ingredient) { return ingredient.ingredient; }); str += ingredients.join('
'); str += "

" + drinkObj.makings.instruction; if ($('recipe')) $('recipe').remove('recipe'); var recipe = document.createElement('div'); Element.extend(recipe); recipe.id = 'recipe'; recipe.addClassName('recipe'); recipe = recipe.update(str); document.body.appendChild(recipe); }

W funkcji getRecipe, jeśli obiekt recipeObj został już utworzony, wywoływana jest funkcja printRecipe. W przeciwnym razie kod zgłasza żądanie ajaksowe i tworzy potrzebny obiekt w funkcji processRecipe. Zapobiega to wielokrotnym wywołaniom serwera internetowego. Jeśli przy pierwszym żądaniu nie wystąpi opóźnienie po stronie serwera, przepis zostanie wyświetlony niemal natychmiast po wybraniu nazwy drinka. Sama strona internetowa wygląda prawie identycznie jak ta przedstawiona na listingu 2.10 w rozdziale 2., jednak używa biblioteki Prototype. Kod JavaScript specyficzny dla aplikacji znajduje się w pliku getalldrinks.js. Używa go przykładowy plik ch03-02.xhtml. „Rubyfikacja języka JavaScript”, którą umożliwia biblioteka Prototype, nie musi być wystarczającym powodem jej używania, jednak obiekt Enumerable udostępnia ciekawą funkcjonalność. Jak działa ten obiekt? W końcu w kodzie nie powstaje żaden wyspecjalizowany obiekt. Z tego, co wiadomo, używane są proste obiekty języka JavaScript. Enumerable i wiele innych obiektów biblioteki Prototype działa poprzez właściwość prototype

języka JavaScript (stąd prawdopodobnie wzięła się nazwa omawianej biblioteki). Jeśli nie korzystałeś jeszcze z tej właściwości, w następnym punkcie znajdziesz przegląd jej podstawowych funkcji. W Ajaksie właściwość prototype jest stosunkowo często używana do rozszerzania obiektów — często, ale nie bez zastrzeżeń. Jeśli znasz już tę właściwość, możesz pominąć następny punkt.

Właściwość prototype języka JavaScript JavaScript nie udostępnia tradycyjnej struktury klas, w której można rozszerzać klasy, dziedzicząc po innych i dodając nową funkcjonalność. W zamian język udostępnia właściwość prototype do rozbudowy istniejących obiektów i ich egzemplarzy. prototype to kolekcja właściwości i metod zdefiniowanych w czasie wykonywania programu i dostępnych w każdym obiekcie niezależnie od tego, czy został on utworzony przed czy po wprowadzeniu zmian w tej kolekcji.

Jak działa prototype w języku JavaScript? Kiedy program uzyska dostęp do właściwości obiektu, silnik skryptowy przeglądarki najpierw sprawdza, czy dana właściwość jest dostępna wśród macierzystych właściwości, a następnie przeszukuje właściwości dostępne w prototype. Jeśli danej właściwości nie ma w prototype, sprawdzane są właściwości z poziomu obiektu.

84

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

W poniższym kodzie prototype służy do rozbudowy obiektu Number; w tym przypadku polega to na dodaniu nowej właściwości (percentage) oraz nowej metody (adjustValue): Number.prototype.percentage=0.15; // 15 procent Number.prototype.adjustValue = function() { return this * this.percentage; }

Używając nowych właściwości, można uzyskać dostęp do nich w taki sam sposób jak do właściwości macierzystych: var someValue = 3.0; alert(someValue.adjustValue());

W aplikacji komunikat wyświetli wartość obliczoną przez pomnożenie wyjściowej liczby 3,0 przez wartość odpowiadającą procentom — 0,15. Biblioteka Prototype korzysta z tej funkcji właściwości prototype do dodawania rozszerzeń do pewnych obiektów wbudowanych, takich jak: String, Array czy Function. Przykładem jest rozszerzona metoda stripTags, która usuwa z łańcuchów znaków wszystkie znaczniki: var str = "

To jest akapit

"; var newStr = str.stripTags(); // Wynik to "To jest akapit"

Właściwość prototype języka JavaScript daje wielkie możliwości i tworzy podstawę dużej części biblioteki Prototype, jednak korzystanie z niej jest ryzykowne.

Tablice asocjacyjne i zagrożenia związane z Prototype Wszystkie obiekty języka JavaScript można traktować jak tablice asocjacyjne (nazywane także skrótami, strukturami skrótów czy tablicami haszującymi). Oznacza to, że dostęp do właściwości obiektu można uzyskać za pomocą notacji z kropką: someObject.objProperty

Można także uzyskać dostęp do właściwości za pomocą notacji tablicowej, używając nazwy właściwości jako indeksu: someObject["objProperty"]

Odwzorowywanie kluczy i wartości w parach to nieodłączny element tablic asocjacyjnych. Ponieważ obiekty języka JavaScript można traktować jak takie tablice, można też użyć struktury for...in tego języka do przejścia po właściwościach danego obiektu: for (props in obj) {...}

Można też użyć dowolnego obiektu języka JavaScript do utworzenia nowej tablicy asocjacyjnej, włączając w to obiekty: Array, RegExp, Object, String i tak dalej. Poniższy kod używa obiektu Array, który wydaje się do tego najbardziej odpowiedni: var newArray = new Array(); newArray['1'] = 'jeden'; newArray['3'] = 'trzy';

Wydaje się to wystarczająco proste, jednak może spowodować zażarte dyskusje pomiędzy użytkownikami języka JavaScript, szczególnie tymi, którzy korzystają z biblioteki Prototype. Niektórzy z nich twierdzą, że w języku JavaScript nie ma tablic asocjacyjnych, a przedstawiona technika to sposób dodawania właściwości w czasie wykonywania programu. Niezależnie

Prototype

|

85

od semantyki te struktury działają tak jak tablice asocjacyjne (dostęp do elementów tablicy odbywa się za pomocą kluczy, a nie liczb), dlatego na potrzeby wszystkich zastosowań są to tablice asocjacyjne. Inni uważają, że tablice asocjacyjne w języku JavaScript są nieprawidłowe lub szkodliwe. Ich zdaniem stosowanie obiektu Array do tworzenia tablic asocjacyjnych jest nienaturalne, ponieważ jego tradycyjne metody, które zwykle zwracają informacje o tablicach (na przykład o ich długości), nie będą działać. Z tego powodu jedynie używanie obiektów Array na potrzeby tradycyjnych tablic liczbowych zapewnia oczekiwane działanie. Jest to szczególnie istotne w przypadku biblioteki Prototype, ponieważ rozbudowuje ona podstawowy obiekt Array, używając właściwości prototype. Jeśli programista utworzy tablicę asocjacyjną na podstawie obiektu Array, który sam został rozbudowany za pomocą biblioteki takiej jak Prototype, użycie pętli for...in może prowadzić do nieoczekiwanych wyników, a najbardziej prawdopodobnym skutkiem jest nieprawidłowe działanie aplikacji. Znawcy Ajaksa zalecają tworzyć tablice asocjacyjne za pomocą obiektu Object zamiast Array. Wersja 1.4 biblioteki Prototype rozbudowuje za pomocą właściwości prototype także obiekt Object języka JavaScript, ale z powodu powszechnego zapotrzebowania Stephenson zrezygnował z tego w wersji 1.5. Jednak biblioteka wciąż rozbudowuje obiekty String, Array i inne, o czym należy pamiętać, używając funkcjonalności tablic asocjacyjnych w celu uzyskania dostępu do właściwości obiektów w aplikacjach. Programista musi zwrócić szczególną uwagę na możliwość rozbudowy obiektów za pomocą właściwości prototype, jeśli używa więcej niż jednej biblioteki, ponieważ każda z nich może tworzyć własne rozszerzenia podstawowych obiektów języka JavaScript. Konflikty między przeglądarkami mogą powodować drobne problemy, które trudno jest zdiagnozować.

Biblioteki zewnętrzne — zagrożenia i korzyści Zastrzeżenia związane z biblioteką Prototype w rzeczywistości dotyczą wszystkich bibliotek zewnętrznych. Do najczęściej spotykanych wad należą: • duży rozmiar biblioteki; • powodowanie w aplikacji trudnych do zdiagnozowania problemów; • powodowanie ukrytych niestandardowych zmian, które mogą prowadzić do nieoczekiwa-

nego działania;

• konflikty z bibliotekami utworzonymi przez programistę, a także z innymi bibliotekami

zewnętrznymi. Można się przekonać, ile wywołań biblioteka dodaje do aplikacji, używając rozszerzenia Firebug do przejścia przez typowe żądanie Ajaksa. Kiedy użyłam tego podejścia w przypadku biblioteki Prototype, naliczyłam około 50 różnych instrukcji wykonanych oprócz wywołań standardowo używanych w żądaniach Ajaksa. Prototype to bardzo mała, zwięzła biblioteka. Jej rozmiar to poniżej 150 kilobajtów. Jednak inne biblioteki, na przykład Dojo (opisuje ją dalszy punkt — „Dojo”), są dużo większe i mogą spowalniać wczytywanie stron.

86

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

Dla mnie najbardziej frustrującym aspektem korzystania z bibliotek zewnętrznych jest sytuacja, w której jakaś operacja nie powiodła się, a dokładne określenie problemu jest bardzo trudne, nawet za pomocą krokowego wykonania kodu przy użyciu rozszerzenia Firebug. Należy jednak uwzględnić także korzyści stosowania danej biblioteki. Prototype udostępnia dużą liczbę operacji rozwiązujących brak zgodności między przeglądarkami, dzięki czemu nie trzeba zmagać się z wszystkimi specyficznymi podejściami i problemami, które odmienne działanie poszczególnych bibliotek dodaje do procesu projektowania stron. W szczególności bardzo wygodna jest obsługa różnic przy dostępie do stylów elementów stron, podobnie jak zarządzanie zdarzeniami i innymi rozszerzeniami modelu DOM. Podsumowując — nie zalecam używania Prototype ani innych bibliotek w przypadku małych aplikacji lub wyłącznie w celu obsługi żądań Ajaksa. Jednak przy tworzeniu bardzo rozbudowanych aplikacji w dużym stopniu opartych na Ajaksie, który używany jest w całej witrynie i musi działać stabilnie w przypadku wszystkich przeglądarek, zachęcam do korzystania z Prototype i prawdopodobnie jednej innej biblioteki, na przykład jQuery, Dojo czy MochiKit. W większości przykładów w tej książce kod JavaScript jest tworzony od podstaw, aby przedstawić pewną funkcjonalność, jednak w wielu punktach pokazane jest zastosowanie wybranych bibliotek lub znajduje się opis implementacji danej funkcji za pomocą jednej z dostępnych bibliotek. Pomoże Ci to poznać przynajmniej kilka popularnych i stabilnych bibliotek Ajaksa. Dowiesz się także, jak uzyskać tę samą funkcjonalność za pomocą standardowych funkcji języka JavaScript, dzięki czemu będziesz mógł samodzielnie określić, kiedy warto użyć danej biblioteki, a kiedy nie. Jeśli w tym rozdziale zbytnio krytykuję Prototype lub inną biblioteką, wynika to z tego, że chcę mieć pewność, iż rozumiesz potencjalne problemy związane ze stosowaniem bibliotek zewnętrznych. Mimo to uważam, że wszystkie biblioteki opisane w tym rozdziale to niezwykle przydatne narzędzia i jestem pełna uznania dla ich autorów nie tylko za udostępnienie ich, ale także za to, że zrobili to bezpłatnie.

script.aculo.us Biblioteka script.aculo.us jest oparta na Prototype; wzbogaca jej funkcjonalność o funkcje wyższego poziomu i udostępnia platformę, która umożliwia tworzenie bardziej zaawansowanych efektów Ajaksa. Jej nazwa to zmodyfikowana wersja nazwy witryny do zawierania kontaktów towarzyskich, del.icio.us, choć oba narzędzia nie mają ze sobą nic wspólnego. Tę bibliotekę można pobrać z witryny http://script.aculo.us. Przykłady przedstawione w tym rozdziale są oparte na wersji 1.7.0. Aby użyć biblioteki script.aculo.us, trzeba dołączyć pliki z kodem JavaScript zarówno biblioteki Prototype, jak i samej script.aculo.us. Nie trzeba jednak pobierać Prototype, ponieważ znajduje się ona w pakiecie z biblioteką script.aculo.us:

Biblioteka script.aculo.us zawiera różne efekty, z których każdy znajduje się w odrębnym pliku. Jeśli programista chce użyć tylko jednego efektu script.aculo.us, może określić to w ramach adresu URL pliku ze skryptami w atrybucie src elementu script:

script.aculo.us

|

87

Powyższy znacznik script wczytuje główną bibliotekę script.aculo.us, która jest przede wszystkim programem ładującym. Adres URL w tym znaczniku powoduje, że ten program wczytuje także plik effects.js. Program ładujący pobiera adres URL skryptu, przetwarza wczytywaną bibliotekę (lub biblioteki), a następnie wywołuje funkcję używającą instrukcji document.writeln w celu „dodania” potrzebnych bibliotek. Jeśli programista nie poda żadnej biblioteki, program ładujący script.aculo.us pobierze wszystkie biblioteki. Dodawanie kodu JavaScript za pomocą instrukcji document.write lub używanie modelu DOM do wstawiania nowych elementów script to znany wzorzec Ajaksa, JavaScript na żądanie, opisany przez Michaela Mahemoffa w książce Ajax Design Patterns1 (O’Reilly).

W czasie pisania tej książki można było dołączyć następujące biblioteki: • builder, • effects, • dragdrop, • controls, • slider.

Między tymi bibliotekami występują zależności, które szczegółowo opisuje dokumentacja script.aculo.us. Używanie instrukcji document.writeln i document.write do dodawania znaczników script w celu dołączenia bibliotek JavaScript to wygodny sposób na dynamiczne „ładowanie” bibliotek wtedy, kiedy są potrzebne. Niestety, to rozwiązanie nie działa, jeśli dokumenty są przesyłane jako XHTML, ponieważ dynamiczne dodawanie zbyt skomplikowanych znaczników do prawidłowych dokumentów XHTML jest niedozwolone. Biblioteka script.aculo.us nie działa w prawidłowo sformatowanych dokumentach XHTML.

Efekty script.aculo.us Po wczytaniu biblioteki script.aculo.us można używać zestawu ciekawych efektów: przeciągania, automatycznego uzupełniania, suwaków, kontrolek i sortowania list. Dostępnych jest także wiele efektów wizualnych, które w script.aculo.us nazywane są „efektami łączonymi”. Można ich używać poprzez obiekt o oczywistej nazwie — Effect. Tabela 3.1 zawiera listę efektów dostępnych poprzez ten obiekt. Listing 3.3 oparty jest na kodzie, który został przedstawiony na listingu 3.2. W tym przypadku użyto efektu Shake biblioteki script.aculo.us przy aktualizacji elementu recipe w celu podkreślenia, że jego zawartość zmieniła się. Odbywa się to za pomocą bardzo odpowiedniego, przynajmniej moim zdaniem, efektu. Ponieważ kod strony jest dość długi, na tym listingu przedstawiona jest jedynie zmodyfikowana funkcja. Należy jednak pamiętać, że stronę trzeba zwrócić jako dokument HTML, a nie XHTML, ponieważ najnowsza wersja biblioteki script.aculo.us nie współdziała z formatem XHTML. 1

Wydanie polskie: Ajax. Wzorce projektowe, Helion 2007 — przyp. tłum.

88

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

Tabela 3.1. Efekty wizualne biblioteki script.aculo.us Nazwa efektu

Działanie efektu

Effect.Appear

Wyświetla ukryty element.

Effect.Fade

Stopniowo ukrywa element, powodując zanikanie koloru.

Effect.BlindDown

Przewija element w dół, przenosząc go z góry na dół.

Effect.BlindUp

Przewija element w górę, przenosząc go z dołu do góry.

Effect.SwitchOff

Rozświetla rysunek przed ukryciem go.

Effect.SlideDown

Przenosi element z góry na dół. Zawartość elementu przesuwa się w dół wraz z kontenerem.

Effect.SlideUp

Przenosi element z dołu do góry. Zawartość elementu przesuwa się w górę wraz z kontenerem.

Effect.DropOut

Emuluje spadanie elementu przed ukryciem go.

Effect.Shake

Gwałtownie „wstrząsa” elementem.

Effect.Pulsate

Szybkie zanikanie i pojawianie się elementu, dające efekt pulsowania.

Effect.Squish

Ukrywanie elementu przez zmniejszanie elementu w górę i w lewo do czasu jego zniknięcia.

Effect.Fold

Przewijanie elementu w górę (BlindUp), a następnie poziomo w kierunku środka.

Effect.Grow

Powiększanie elementu, rozpoczynając od punktu.

Effect.Shrink

Zmniejszanie elementu w dół i prawo do czasu jego zniknięcia.

Effect.Highlight

Wyróżnia element, zwykle nadając mu na krótko żółty kolor. Wielu programistów stosujących Ajaksa nazywa ten efekt zanikaniem (ang. fade).

Listing 3.3. Testowanie biblioteki script.aculo.us function printRecipe() { // Pobieranie nazwy drinka i obiektu przeznaczonego na przepis var drinkName = $F('drink'); // Wyszukiwanie nazwy drinka var drinkObj = recipeObj.drinks.find(function(drink) { if (drink.drink == drinkName) { return drink; } }); if (!drinkObj) return; var str = "

" + drinkObj.makings.title + "

"; var ingredients = drinkObj.makings.ingredients.collect(function(ingredient) { return ingredient.ingredient; }); str += ingredients.join('
'); str += "

" + drinkObj.makings.instruction; if ($('recipe')) $('recipe').remove('recipe'); var recipe = document.createElement('div'); Element.extend(recipe); recipe.id = 'recipe'; recipe.addClassName('recipe'); recipe = recipe.update(str); document.body.appendChild(recipe); new Effect.Shake(recipe); }

script.aculo.us

|

89

To rozwiązanie wczytuje wszystkie biblioteki script.aculo.us, co pozwala zobaczyć, jak duże opóźnienie biblioteka skryptów może spowodować przy wczytywaniu stron. Nawet w przypadku łączy szerokopasmowych jest to zauważalna różnica. W tym przykładzie blok recipe drży po wyświetlenie pobranego przepisu. Efekt nie zwiększa w znaczący sposób funkcjonalności aplikacji — jest to dodatek wizualny, podobnie jak wiele efektów używanych w Ajaksie. Jeśli dany efekt nie zmniejsza komfortu pracy użytkownika w wyniku dłuższego czasu wczytywania i podobnych zjawisk, może udostępniać ciekawe informacje zwrotne. W rozdziale 4., a następnie w rozdziale 6., pokazuję, jak użyć zanikania i podobnych efektów do udostępniania informacji zwrotnych użytkownikom strony. Takie techniki są szczególnie przydatne do wyróżniania udanych operacji aktualizacji i usunięcia danych za pomocą Ajaksa. Należy zwrócić uwagę na słowo new przed zastosowanym efektem biblioteki script. aculo.us. Tworzenie obiektu to część efektu, która jednak może nie być zupełnie oczywista i intuicyjna. Stosunkowo często programiści zapominają użyć słowa new.

Rico Rico to następna biblioteka Ajaksa zbudowana na podstawie Prototype. Rico, podobnie jak script.aculo.us, obejmuje zestaw efektów, włączając w to efekt zanikania, a także udostępnia funkcje upraszczające wywoływanie usług Ajaksa, podobnie jak wszystkie platformy do obsługi tej technologii. Rico można pobrać z witryny http://openrico.org. Rico ma także elegancki efekt zaokrąglania narożników, który można dodać do elementów strony, jednak zdaniem niektórych programistów związane z tym koszty są zbyt duże. Uważam, że zaokrąglone narożniki zaczną tracić popularność — przynajmniej dopóty, dopóki nie będą dostępne w większości przeglądarek poprzez style CSS. Rico udostępnia ciekawą kontrolkę LiveGrid, która łączy się ze źródłem danych za pomocą żądania Ajaksa i zwraca nowe dane wraz z przewijaniem tabeli z danymi przez użytkownika. Ten efekt jest nazywany stronicowaniem w Ajaksie lub przewijaniem na żywo.

Stronicowanie w Ajaksie Pojęcie „stronicowanie w Ajaksie” obejmuje różne techniki. Jeśli ten efekt zostanie zaimplementowany poprawnie, będzie doskonałym sposobem na pobieranie zewnętrznych danych bez wiedzy użytkownika. Google używa tego podejścia do pobierania pozornie nieskończonej mapy z usług sieciowych Google Maps. Jednak nieprawidłowe zastosowanie tego efektu może prowadzić do wielkich problemów. Ostatnio firma Yahoo! zmodyfikowała witrynę internetową Yahoo! TV, aby dołączyć kilka efektów Ajaksa, włączając w to stronicowanie. Wydajność i stopień „zablokowania” witryny, wynikające głównie ze stronicowania, spowodowały liczne protesty ze strony użytkowników. Stronicowanie wydłużyło łączny czas wczytywania danych, a przy wdrażaniu efektu nie zastosowano żadnej odmiany pamięci podręcznej, co mogłoby prowadzić do efektu „płynnego przewijania”.

90

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

Rico udostępnia opakowaną funkcjonalność poprzez kontrolkę LiveGrid, która obsługuje stronicowanie, współpracując z aktualną bazą danych w celu pobierania danych w razie potrzeby. Autorzy biblioteki Rico udostępniają na stronie http://openrico.org/rico/demos.page demonstrację wyszukiwania danych w Yahoo! za pomocą kontrolki LiveGrid.

Widget biblioteki Rico z prognozą pogody Rico, podobnie jak script.aculo.us, udostępnia programy demonstrujące jej funkcjonalność, jednak ma stosunkowo mało formalnej dokumentacji. Typowe podejście przy nauce korzystania z tych bibliotek polega na znalezieniu przykładu i analizie jego kodu źródłowego. Jednym z moich ulubionych przykładów jest widget Weather Watch (http://openrico.org/demos/ weather_demo), przedstawiony na rysunku 3.1.

Rysunek 3.1. Demonstracja widgeta Weather Watch biblioteki Rico to dobry przykład zastosowania ajaksowych kontrolek accordion

Ten program demonstracyjny używa trzech kontrolek typu accordion — zwijanych paneli — do ukrywania i wyświetlania różnych informacji o pogodzie. Każda z tych kontrolek używa efektu zaokrąglonych krawędzi biblioteki Rico, co nadaje rozwiązaniu ajaksowy wygląd. Accordion to w rzeczywistości połączenie efektów; działa albo wyświetlając element natychmiast i zwiększając jego rozmiar od zera do pełnej wysokości, albo zwiększając widoczny obszar za pomocą przycinania obszarów w CSS. Ponadto kontrolki te są wyświetlane w warstwach, dlatego jeśli widoczna jest większa część jednej z nich, pozostałe muszą zmienić pozycję, aby zrobić miejsce na element o nowej wielkości. W rozdziale 5. opisane jest tworzenie efektu accordion.

Rico

|

91

Aplikacja Rico Weather Watch wywołuje funkcję usługi sieciowej, która jest uruchamiana lokalnie względem biblioteki Rico, a następnie zgłasza wywołanie usługi sieciowej z witryny weather.com, aby pobrać informacje o pogodzie. Zwrócone dane są wyświetlane w różnych kategoriach. Żądania do usługi sieciowej z witryny weather.com nie można zgłosić bezpośrednio ze strony klienckiej z uwagi na strefę bezpieczeństwa i zabezpieczenia języka JavaScript.

Strefa bezpieczeństwa i zabezpieczenia języka JavaScript W rozdziale 2. opisałam, w jaki sposób model strefy bezpieczeństwa języka JavaScript ogranicza przeglądarki — mogą one używać jedynie zasobów znajdujących się w tej samej domenie, z której został pobrany sam skrypt. Inaczej mówiąc, wywołania Ajaksa można kierować jedynie do tej samej domeny serwera internetowego, która zwróciła wyjściową stronę. Dlatego jeśli dana strona internetowa pochodzi z domeny przykładowadomena.pl, żądanie usługi sieciowej także trzeba skierować do tej domeny. Opisałam także sposób obejścia tego ograniczenia poprzez zmianę ustawień zabezpieczeń, cyfrowe podpisanie skryptu lub użycie dynamicznie wczytywanych skryptów oraz funkcji wywoływanej zwrotnie; ten ostatni sposób jako jedyny działa we wszystkich przeglądarkach. Następnym rozwiązaniem, z którego korzysta Rico i widget Weather, nie łamie modelu zabezpieczeń języka JavaScript, ale umożliwia dostęp do usług sieciowych z różnych domen. Ta technika polega na zastosowaniu pośrednika. Pośrednik w Ajaksie to aplikacja działająca na serwerze internetowym (w domenie lokalnej), która wywołuje zdalne usługi na rzecz skryptu działającego po stronie klienta, a następnie przekazuje wyniki do klienta. Rozdział 9. przedstawia działanie pośrednika bardziej szczegółowo. Teraz wróćmy do bibliotek Ajaksa. Pośrednik ajaksowy to aplikacja sieciowa (działająca w domenie lokalnej), która udostępnia skrypt, wywołując zdalną usługę sieciową (ograniczenie związane z domenami nie obowiązuje w przypadku dostępu typu serwer-serwer). Następnie pośrednik przekazuje wyniki z powrotem do klienta. Dzięki aplikacji pośredniczącej kliencki program ajaksowy może wtedy zażądać usługi sieciowej z domeny lokalnej, zachowując dostęp do licznych usług sieciowych.

Dojo Dojo to projekt o otwartym dostępie do kodu źródłowego, zarządzany przez Dojo Foundation. W odróżnieniu od innych bibliotek, które są rozwijane przez pojedynczych programistów lub małe grupy, projekt Dojo aktywnie zachęca do dodawania elementów z różnych źródeł do udostępnianej biblioteki Ajaksa. Podstawowy zestaw Dojo Toolkit jest dość duży i udostępnia stosunkowo złożoną platformę z „wtyczkami”, co umożliwia tworzenie widgetów w stylu Dojo — zewnętrznych rozszerzeń, których stosowanie nie ma wpływu na kod. Ten zestaw można pobrać z witryny http://dojotoolkit.org. Dostępna wersja tej biblioteki udostępnia zarówno czytelny dla człowieka kod źródłowy, jak i kod źródłowy w języku JavaScript, z którego usunięto wszystkie zbędne odstępy (zmniejsza to rozmiar biblioteki i powoduje, że staje się mało czytelna).

92

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

Dostępnych jest kilka narzędzi i witryn obsługujących kompresowanie kodu języka JavaScript. Na początek można wpisać wyrażenie „JavaScript compression” w ulubionej wyszukiwarce.

Dojo ma rozbudowaną dokumentację dostępną pod adresem http://manual.dojotoolkit.org/index. html. Opis techniki tworzenia widgetów za pomocą Dojo wykracza poza zakres tej książki. Podobnie jak inne biblioteki Ajaksa Dojo początkowo miała skromną dokumentację. Biorąc pod uwagę złożoność tej biblioteki, powodowało to spore utrudnienia w jej używaniu. Na szczęście utworzono wiki (witrynę, której treść może modyfikować grupa osób) z dokumentacją poświęconą temu projektowi, choć podobnie jak w przypadku wszystkich witryn typu wiki niektóre zagadnienia są opisane pobieżnie. Innym miejscem zawierającym dokumentację jest strona http://dojotoolkit.org/docs. Dojo udostępnia własną funkcjonalność do obsługi różnych przeglądarek i języka JavaScript, a w odróżnieniu od Prototype obejmuje także platformę do tworzenia rozszerzeń i uruchamiania środowiska Dojo. Według dokumentacji dostępnej w witrynie Dojo biblioteka ta składa się z szeregu modułów. Poniżej przedstawione są wybrane z nich. dojo

Narzędzie do ładowania bibliotek Dojo, które wczytuje używane moduły.

dojo.lang

Narzędzia związane z językiem JavaScript.

dojo.string

Narzędzia do obsługi łańcuchów znaków w języku JavaScript.

dojo.dom

Procedury do manipulowania modelem DOM.

dojo.style

Procedury do manipulowania stylami CSS.

dojo.html

Specyfikacje HTML.

Dictionary

Obiekt reprezentujący słownik (tablicę asocjacyjną).

dojo.animation.Animation

Obsługa animacji.

dojo.crypto

Procedury szyfrujące.

Ta lista ciągnie się i ciągnie. Jak widać, Dojo nie jest małą biblioteką. Na szczęście nie trzeba wczytywać wszystkich elementów Dojo, aby uzyskać dostęp do podzbioru jej funkcji. Wypróbowałam Dojo na jednej z moich witryn, ponieważ chciałam przetestować jeden z efektów — menu typu fisheye. Użytkownicy systemu operacyjnego OS X komputerów Apple prawdopodobnie znają podobny efekt. Pojawia się on po umieszczeniu kursora myszy nad paskiem Dock — elementy są rozszerzane w sposób imitujący powiększenie widziane „rybim okiem”. Rysunek 3.2 przedstawia przykładową witrynę utworzoną za pomocą Dojo.

Dojo

|

93

Rysunek 3.2. Przykład menu typu fisheye, które rozszerza się po umieszczeniu nad nim kursora myszy

Dołączyłam moduł ładujący biblioteki Dojo, a także moduł fisheye, używając funkcji require biblioteki Dojo: ... dojo.require("dojo.widget.FisheyeList");

Skrypt ładujący dojo.js korzysta z innych modułów, których potrzebuje do działania, niezależnie od modułów używanych przez programistę. W tym skrypcie znajdują się także definicje funkcji dołączających biblioteki, choć ich analiza to dobra lekcja pisania nieczytelnego kodu. Dojo udostępnia funkcjonalność obejmującą wszystkie wyobrażalne zadania, a prawdopodobnie także te, o których programista nigdy nie pomyśli. Obejmuje to Ajaksa, szyfrowanie, rozbudowaną obsługę pamięci po stronie klienta, wykraczającą poza zastosowanie plików cookie, większość efektów wizualnych i tak dalej. Do obsługi wszystkich tych funkcji potrzebna jest skomplikowana infrastruktura, a kod źródłowy jest niezwykle trudny do odczytania i zrozumienia. Nawet uwzględniając możliwość minimalizacji ilości wczytywanego kodu, Dojo jest powolną biblioteką. Ma także pewne efekty uboczne, jeśli chodzi o współdziałanie z innymi bibliotekami. Jednak, w odróżnieniu od Prototype, efekty uboczne biblioteki Dojo wynikają raczej ze standardowego, niż niestandardowego działania języka JavaScript i są związane z metodami obsługi zdarzeń. Programiści z Dojo Foundation ciężko pracują nad optymalizacją biblioteki Dojo w celu zmniejszenia jej wielkości, a także „odchudzenia” jej podstawowych elementów. Może się okazać, że do czasu wydania tej książki Dojo stała się dużo bardziej atrakcyjna i udostępnia szybszy i bardziej zwięzły kod.

Łańcuchy funkcji obsługi zdarzeń Przed udostępnieniem przez W3C modelu DOM, poziom 2, zdarzenia były obsługiwane przez przypisanie metody ich obsługi do obiektu, na przykład w następujący sposób: window.onload=functionToRun;

94

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

Ta składnia wciąż jest obsługiwana, jednak przypisanie nowej funkcji powoduje zastąpienie funkcji przypisanych do procedury obsługi zdarzenia onload wcześniej, włączając w to funkcje przypisane przez Dojo. Oznacza to, że funkcje konfiguracyjne Dojo nie będą działać. Zamiast zastępować funkcje obsługi zdarzeń, w modelu DOM, poziom 2, można zastosować nowy sposób przypisywania takich funkcji, co prowadzi do powstawania ich łańcuchów. Poniższy kod przypisuje funkcję functionToRun do zdarzenia load: window.addEventListener("load",functionToRun,false);

Niestety, Microsoft nie obsługuje tej nowej techniki i udostępnia własny sposób dodawania procedur obsługi zdarzenia: window.attachEvent("onload",functionToRun);

Poniższy kod rozwiązuje problemy z różnicami pomiędzy przeglądarkami: if (window.addEventListener) { window.addEventListener("load",finish,false); } else if (window.attachEvent) { window.attachEvent("onload", finish); }

Zdarzenia i procedury ich obsługi są opisane bardziej szczegółowo w rozdziale 4., jednak powyższe rozważania pokazują, że korzystając z zewnętrznych bibliotek Ajaksa, trzeba zaplanować przypisywanie funkcji obsługi zdarzeń w przedstawiony sposób. W większości przypadków przykłady przedstawione w tej książce używają tej techniki lub pewnej jej odmiany.

Deklaratywny HTML Inny dawny problem z kodem HTML, który niestety ponownie ujawnił się przy nowszych zastosowaniach Ajaksa, to stosowanie niestandardowych lub przestarzałych atrybutów elementów. Jest wiele starszych atrybutów, które nie są już obsługiwane, na przykład align w przypadku tabel i rysunków HTML, bgcolor dla wszystkich elementów tabel, border dla rysunków, tabel i ciała dokumentu i tak dalej. Obecnie jednak w bibliotekach Ajaksa pojawia się całe mnóstwo niestandardowych atrybutów. Z czego to wynika? Autorzy bibliotek próbują tworzyć efekty, które nie wymagają korzystania z kodu JavaScript przez użytkowników. Przedstawię to na przykładzie. Wcześniej wspomniałam o efekcie fisheye biblioteki Dojo. Utworzenie takiego efektu nie jest proste. Nie tylko trzeba śledzić ruchy kursora myszy, ale także zmieniać rozmiar obiektów z uwzględnieniem innych oraz poruszeń myszy. Nie jest to efekt, którego tworzeniem byłabym zainteresowana. Na szczęście, dzięki Dojo, nie muszę. Aby zastosować funkcjonalność widgeta fisheye biblioteki Dojo, należy utworzyć grupę elementów div: element zewnętrzny, element sterujący oraz kilka elementów wewnętrznych, po jednym dla każdego elementu menu. Każdy element otrzymuje nazwę specyficznej klasy biblioteki Dojo, a także atrybuty elementu udostępniające informacje o nagłówku menu, plikach źródłowych z ikonami, minimalnym i maksymalnym rozmiarze rysunku i tak dalej. Listing 3.4 przedstawia elementy menu strony. Listing 3.4. Używanie widgeta fisheye biblioteki Dojo

To podejście, znane jako deklaratywny HTML, to ciekawe rozwiązanie. Polega na dodawaniu niezbędnych informacji jako atrybutów elementów, dzięki czemu program odczytujący stronę internetową nie musi przetwarzać kodu. Jednak stosowanie niestandardowych atrybutów ma dwie główne wady: taka strona nie przejdzie walidacji i nie będzie spełniać wymogów dostępności. Dojo, podobnie jak wiele innych nowych bibliotek Ajaksa, używa niestandardowych atrybutów dla standardowych obiektów HTML i XHTML, co powoduje, że strona nie przejdzie walidacji w trybie Strict HTML lub XHTML. Ponadto menu jest zarządzane za pomocą kodu JavaScript, dlatego użytkownicy, którzy wyłączą obsługę tego języka, nie będą mogli korzystać z menu. To podejście jest także zależne od myszy, przez co osoby używające samej klawiatury nie będą mogły skorzystać z takiego menu. W dalszej części książki opisuję, jak tworzyć menu, które zarówno przejdzie walidację, jak i będzie dostępne. Na razie skoncentrujmy się na walidacji. Zmiany potrzebne w kodzie są nieco skomplikowane, ale wykonalne. Trzeba usunąć atrybuty elementów ze znaczników i dodać je za pomocą modelu DOM.

Użycie kodu JavaScript do rozwiązania problemu niestandardowych atrybutów Na listingu 3.4 znajduje się sześć elementów menu. Aby zmodyfikować aplikację tak, żeby przeszła walidację, trzeba usunąć niestandardowe atrybuty kontrolnego elementu div oraz sześciu elementów div reprezentujących pozycje menu:

W kodzie JavaScript aplikacja używa obiektu document w celu uzyskania dostępu do każdego elementu, a następnie wywołuje metodę setAttribute, aby ustawić niestandardowe atrybuty. Poniższy kod ponownie ustawia atrybuty obiektu elementu sterującego: var cont = document.getElementById("controller"); cont.setAttribute("itemWidth","60"); cont.setAttribute("itemHeight","100"); cont.setAttribute("itemMaxWidth","200"); cont.setAttribute("itemMaxHeight","300"); cont.setAttribute("orientation","horizontal"); cont.setAttribute("effectUnits","2"); cont.setAttribute("itemPadding","10"); cont.setAttribute("attachEdge","top"); cont.setAttribute("itemPadding","bottom"); cont.setAttribute("enableCrappySvgSupport","false");

Ustawienia tych atrybutów są takie same jak wcześniej w znacznikach. Zmieniły się jedynie rozmiary rysunków, tak aby pasowały do obrazów używanych przeze mnie. W przypadku każdej opcji menu kod uzyskuje dostęp do elementu i dodaje atrybuty za pomocą metody setAttribute. Poniższy fragment ustawia atrybuty pierwszego elementu menu. Do modyfikacji wszystkich pozostałych pozycji służy prawie identyczny kod (zmieniają się jedynie rysunki i nagłówki): var menu1 = document.getElementById("menu1"); menu1.setAttribute("onClick","load_page('http://learningjavascript.info')"); menu1.setAttribute("iconsrc","/dotty/dotty.gif"); menu1.setAttribute("caption","Wprowadzenie do JavaScript");

Ponieważ biblioteka Dojo wymaga, aby elementy miały przypisane wartości atrybutów przed rozpoczęciem korzystania z jej funkcjonalności, a dane są przetwarzane bezpośrednio po wczytaniu strony, funkcję zawierającą kod ustawiający atrybuty trzeba wywołać bezpośrednio po utworzeniu elementów div na stronie. Jednym z rozwiązań jest umieszczenie bloku script z wywołaniem tej funkcji bezpośrednio po kodzie tworzącym ustawiane elementy div:

Warto zwrócić uwagę na sekcję CDATA wokół wywołania funkcji. Jest ona konieczna, aby strona przeszła walidację jako dokument XHTML. Po ustawieniu atrybutów przez programistę menu fisheye biblioteki Dojo będzie wyglądało przejrzyście bez konieczności stosowania atrybutów niestandardowych. Jednak wciąż brakuje jednego elementu — wymaganych atrybutów. W znacznikach nie ma atrybutu alt, który jest niezbędny, aby strona przeszła walidację. Inaczej niż w przypadku ustawiania atrybutów wyjściowych, atrybut alt trzeba dodać po wykonaniu operacji przez Dojo i utworzeniu menu. Dojo przechwytuje zdarzenie window.onload, Dojo

|

97

którego także trzeba użyć. Jednak trzeba to zrobić w odpowiedni sposób, aby nie „zepsuć” ani nie zastąpić funkcji obsługi tego zdarzenia używanej przez bibliotekę Dojo. W tym celu można użyć modelu DOM i dołączyć funkcję obsługi do zdarzenia onload, łącząc ją w łańcuch z funkcją obsługi z biblioteki Dojo. Służy do tego poniższy kod: function addWindowOnLoad(func) { // Sprawdzanie używanego modelu obiektowego if (window.addEventListener) { window.addEventListener("load",func,false); } else if (window.attachEvent) { window.attachEvent("onload", func); } } addWindowOnLoad(finish);

Metoda finish uzyskuje dostęp do każdego rysunku na stronie, sprawdza nazwę klasy, a jeśli odpowiada ona nazwie klasy z biblioteki Dojo, pobiera wartość atrybutu src rysunku i ustawia na jego podstawie odpowiedni atrybut alt: function finish() { for(var i = 0; i < document.images.length; i++) { var crntimg = document.images[i]; if (crntimg.className == "dojoHtmlFisheyeListItemImage") { switch(crntimg.src) { case "http://scriptteaser.com/dotty/dotty.gif" : crntimg.alt="Wprowadzenie do JavaScript"; break; case "http://scriptteaser.com/dotty/doomed.gif" : crntimg.alt="Trzy P oraz małe R"; break; case "http://scriptteaser.com/dotty/falling.gif" : crntimg.alt="Usługi sieciowe"; break; case "http://scriptteaser.com/dotty/impatience.gif" : crntimg.alt="Rozmaitości"; break; case "http://scriptteaser.com/dotty/mad.gif" : crntimg.alt="Szalona informatyczka na wolności"; break; case "http://scriptteaser.com/dotty/home.png" : crntimg.alt="Strona główna"; break; } } } }

Teraz strona przejdzie walidację jako dokument XHTML. Choć przedstawiona technika wymaga więcej kodu, jest lepsza niż uznanie formatu XHTML lub prawidłowych znaczników jako „nieprzydatnych” czy nieistotnych. Firmy, agencje rządowe i inne organizacje uznają obecnie, że strony internetowe muszą być zarówno prawidłowe, jak i muszą spełniać wymogi dostępności. Niektóre przeglądarki i inne narzędzia mogą w dziwny sposób interpretować nieprawidłowe, a przez to nieznane atrybuty. Ponieważ coraz więcej bibliotek Ajaksa używa niestandardowych atrybutów elementów do zarządzania efektami, warto pamiętać o tym podejściu, korzystając z takich rozwiązań.

98

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

Inne biblioteki Dostępnych jest coraz więcej bibliotek Ajaksa — od prostych do skomplikowanych. Pokrótce opiszę niektóre z nich, aby pokazać bogactwo przydatnych funkcji, z których można korzystać. Poręczna lista wielu bibliotek Ajaksa znajduje się na blogu eDevil — http://edevil. wordpress.com/2005/11/14/javascript-libraries-roundup.

jQuery Jedną z bibliotek, które szybko zyskują popularność, jest jQuery (http://jquery.com). Jest mała, szybka i zapewnia raczej działanie podstawowych metod do obsługi modelu DOM w różnych przeglądarkach, a nie efekty wyższego poziomu. Biblioteka Interface (http://interface.eyecon.ro) udostępnia efekty wyższego poziomu oparte na jQuery, podobnie jak biblioteka script.aculo.us zapewnia zaawansowane efekty na podstawie Prototype.

Jednak w odróżnieniu od innych bibliotek jQuery ma tylko jeden obiekt — jQuery. Niestety, jQuery używa sztuczki ze znakiem dolara, $(), aby korzystać z tego obiektu. Jeśli programista chce stosować jQuery wraz z innymi bibliotekami, zwłaszcza z Prototype, powinien wywołać funkcję jQuery.noConflict() na samym początku każdego bloku script, aby zapewnić normalne działanie innych bibliotek. Następnie należy używać obiektu jQuery za pomocą pełnej nazwy, aby uzyskać dostęp do całej funkcjonalności. jQuery udostępnia wysoki poziom obsługi łańcuchów, co umożliwia tworzenie łańcuchów wywołań funkcji jedno po drugim. Taka funkcjonalność wymaga, aby metody biblioteki zwracały referencje do obiektu this, którego może następnie użyć kolejna metoda w łańcuchu. Dzięki tym łańcuchom tworzenie efektów za pomocą jQuery jest bardzo proste. Poniższy kod sprawia, że po kliknięciu przycisku przez użytkownika aplikacja znajdzie czwarty akapit i przesunie go w dół: $("input.buttonBslidedown").click(function(){ $("div.contentToChange").find("p. fourthparagraph:hidden").slideDown("slow"); });

Dodawanie nowych elementów także jest niezwykle proste dzięki metodzie add, która przyjmuje jako dane wejściowe kod HTML. Znalezienie wszystkich elementów danej klasy także jest łatwe — służy do tego instrukcja children: $("div").children(".className");

Zainteresowanie jQuery rośnie tak szybko, że przed zakończeniem procesu redakcji niniejszej książki tę bibliotekę zaczęto wymieniać w jednym rzędzie z Prototype czy Dojo. Gorąco zachęcam do przetestowania tej biblioteki jako jednej z pierwszych przy rozpoczynaniu pracy z bibliotekami Ajaksa. Zalecam także zapoznanie się z bibliotekami base2 i base2.DOM autorstwa Deana Edwardsa (http://dean.edwards.name/weblog/ 2007/03/yet-another/). Te nowe, niezwykle zwięzłe biblioteki „standaryzacyjne” zostały udostępnione już po napisaniu wyjściowej wersji tej książki.

Inne biblioteki

|

99

Tej biblioteki można używać nie tylko do wyszukiwania na stronie elementów modelu DOM, ale także łańcuchów znaków.

MochiKit MochiKit to następna biblioteka Ajaksa typu „wszystko w jednym”, ma jednak niezwykle istotną cechę charakterystyczną: doskonałą dokumentację. Zarówno sama biblioteka, jak i dokumentacja znajdują się na stronie http://www.mochikit.com. MochiKit zawiera narzędzie do obsługi wyrażeń regularnych, które jest przydatne przy sprawdzaniu poprawności danych z formularzy. Nigdy nie byłam zbyt dobra w tworzeniu wyrażeń regularnych i chętnie korzystam z każdej dostępnej pomocy w tym zakresie. MochiKit ma także ciekawy zestaw ajaksowych tabel z danymi, które można synchronizować i sortować. Dostępny jest także oryginalny moduł do obsługi kolorów modułów. Jedną z najlepszych funkcji MochiKit jest wygodny panel logów, choć takie przeglądarki, jak Internet Explorer i Firefox, udostępniają logi, obsługę błędów i mechanizmy diagnostyczne, które działają niezależnie od zestawu narzędzi tej biblioteki.

Yahoo! UI Nie ma nic lepszego dla programistów niż współzawodnictwo o odbiorców i zainteresowanie twórców wyszukiwarek. Google udostępnia Google Web Toolkit (GWT) — oparte na języku Java środowisko do obsługi Ajaksa i strony serwera. Z kolei firma Yahoo!, nie chcąc pozostać w tyle, utworzyła Yahoo! UI (YUI). YUI różni się od GWT tym, że jest w większym stopniu biblioteką, niż platformą. Nie nakłada także ograniczeń co do języka programowania używanego po stronie serwera, podczas gdy GWT umożliwia stosowanie wyłącznie Javy. Ponieważ GWT to w rzeczywistości środowisko języka Java, które przy okazji pozwala tworzyć aplikacje ajaksowe, nie omawiam go w tej książce.

Biblioteka YUI jest używana we wszystkich aplikacjach sieciowych Yahoo! i jak można się domyślać, przechodzi wiele testów. Duży pobierany pakiet składa się z kilku folderów kodu JavaScript i HTML, a także rysunków. Ma szereg gotowych efektów wysokiego poziomu, takich jak: kalendarz, rejestrator (do zapisywania komunikatów), menu, suwak. Udostępnia także dużo podstawowych funkcji, na przykład animacje oraz efekt o nazwie easing — efekt odbicia w momencie zakończenia zmiany rozmiaru w poziomie lub przesuwania elementów, co dodaje „elegancji” danemu efektowi. W następnych rozdziałach znajduje się więcej informacji o YUI. Tymczasem możesz pobrać tę bibliotekę ze strony http://developers.yahoo.com/yui i samodzielnie wypróbować programy demonstracyjne. Warto zauważyć, że ten zestaw narzędzi ma także rozbudowaną dokumentację.

mooTools i moo.fx Biblioteki mooTools i moo.fx są mniejsze niż większość bibliotek Ajaksa. Są przeznaczone raczej do wzbogacania o nowe efekty, a nie są rozbudowaną, gotową infrastrukturą Ajaksa. Biblioteka mooTools składa się z kilku odrębnych plików (Moo.js, Function.js, Array.js, String.js 100

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

i tak dalej), z których każdy udostępnia własne rozszerzenia i klasy języka JavaScript. Efekty oparte na tych bibliotekach to tak zwane wtyczki, a choć są one zależne od różnych plików, wszystkie wymagają podstawowej klasy mooTools — Moo.js. Wszystkie klasy można pobrać z głównej witryny, http://mootools.net. Podobnie jak w przypadku wielu innych bibliotek Ajaksa, dokumentacja mooTools jest dość uboga i składa się bardziej z dokumentów dotyczących programu, niż samouczków i porad typu „jak to zrobić”. Na szczęście tę lukę wypełniły inne osoby i na stronie http://clientside.cnet. com/examples/mootools-primer można znaleźć dobry samouczek dotyczący mooTools. Biblioteka moo.fx to wtyczka dla mooTools, którą autorzy określają jako „superprostą, ultramałą, megadrobną bibliotekę efektów języka JavaScript”. Dwie odrębne implementacje interfejsu pozwalają korzystać z moo.fx wraz z mooTools lub Prototype. Ponieważ dostępne są dwie wersje, należy dobrze sprawdzić, czy zainstalowana jest odpowiednia biblioteka. Obie odmiany można pobrać ze strony http://moofx.mad4milk.net.

Sarissa Sarissa to działająca w różnych przeglądarkach biblioteka języka ECMAScript, która opakowuje wbudowane interfejsy API do obsługi danych XML, umożliwiając wczytywanie i serializację dokumentów. Ta biblioteka upraszcza także wywoływanie usług za pomocą Ajaksa, jednak jej wartość polega na serializacji danych XML oraz obsłudze języka XPath obok zarządzania transformacjami za pomocą XSLT. Nie jestem pewna, czy nie jest to żart, ale aplikacje ajaksowe używające bibliotek z API do obsługi danych XML (takich jak Sarissa) zaczyna się określać mianem aplikacji AJAX (duże litery), w odróżnieniu od aplikacji ajaksowych, które nie sięgają do „korzeni” tej technologii. Jak już wspomniałam w rozdziale 1., początkowo nazwa „Ajax” była akronimem, a technologia ta miała używać XML i XSLT do przetwarzania danych zwracanych przez usługi sieciowe. Jednak w dużej części projektów ajaksowych używany jest model DOM i, coraz częściej, format JSON, prawdopodobnie dlatego, że są one prostsze od XSLT, jeśli programista nie zna jeszcze tych technologii. Biblioteka Sarissa umożliwia uproszczenie stosowania XSLT (oraz przetwarzania z użyciem języków XPath i XML), powodując zwiększenie udziału AJAX-a w Ajaksie. Biblioteka Sarissa i jej dokumentacja są dostępne pod adresem http://dev.abiss.gr/sarissa.

WZ_jsGraphics i qForms WZ_jsGraphics to ciekawa i dopracowana biblioteka. Udostępnia funkcje umożliwiające rysowanie figur geometrycznych, takich jak linie, okręgi, kwadraty. Można ją pobrać ze strony http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm. qForms to interfejs API do obsługi formularzy utworzony przez PengoWorks.com. Można go pobrać ze strony http://pengoworks.com/index.cfm?action=get:qforms. Jest to przydatna, wyspecjalizowana biblioteka, która koncentruje się na formularzach — prosta i przejrzysta.

Inne Dostępnych jest tyle bibliotek Ajaksa, że to wyliczanie można by ciągnąć przez wiele stron. Niektóre z tych bibliotek są opisane przy okazji przykładów w następnych rozdziałach, choć Inne biblioteki

|

101

większość operacji jest przedstawiona za pomocą niestandardowego kodu JavaScript, dzięki czemu można przyjrzeć się aplikacji bez analizy dużych ilości dodatkowych materiałów. Oczywiście, wyrażenie „nie kupuj kota w worku” dotyczy wszystkich bibliotek. Mimo elegancji Ajaksa należy pamiętać, że technologia ta daje duże możliwości, a jej nieprawidłowe zastosowanie może zatrzymać działanie witryny lub komputera użytkownika. Zdarzyło mi się kiedyś przypadkowo użyć wartości false zamiast true, co spowodowało całkowitą blokadę systemu wszystkich odwiedzających, którzy korzystali z przeglądarki Opera na komputerach Max OS X. Jednak zwykle najgorsze, co może się stać, to po prostu niefunkcjonowanie efektów. Może wtedy być konieczne wprowadzenie zmian w kodzie, aby biblioteki współdziałały z nim lub z sobą nawzajem. A teraz pora rozpocząć stosowanie Ajaksa.

102

|

Rozdział 3. Narzędzia i pojęcia związane z Ajaksem

ROZDZIAŁ 4.

Efekty interaktywne

Wszystkie efekty Ajaksa są interaktywne. Cały sens stosowania tej technologii polega na usprawnieniu reakcji strony. Jednak niektóre efekty są bardziej interaktywne od innych — szczególnie te polegające na udostępnianiu natychmiastowych informacji na podstawie pewnego zdarzenia. Osoby, które używały witryn Netflix lub Blockbuster Online, znają okna wyświetlające informacje o filmach, wyskakujące po umieszczeniu kursora myszy nad odnośnikiem. Jest to typowy interaktywny efekt Ajaksa, w którym aplikacja interpretuje zamiary użytkownika. W tym przypadku można dowiedzieć się czegoś więcej o filmie i na przykład dodać go do listy. Jeśli użytkownik dodaje komentarz w witrynie i może podejrzeć wyniki swej pracy w trakcie pisania lub przed ostatecznym przesłaniem danych, jest to następny efekt interaktywny. Umożliwia on sprawdzenie tekstu, poprawienie literówek lub znaków zapisanych w złej kolejności oraz zmianę składni. Taka funkcjonalność nie jest niezbędna do działania aplikacji. Jest ona raczej wynikiem domyślania się, jakie funkcje mogą przydać się użytkownikom. W tym przypadku jest to sprawdzanie tekstu. Aplikacje internetowe, które udostępniają informacje zwrotne po wykonaniu pewnych operacji przez użytkownika, na przykład wyróżniając dane na czerwono przy ich usuwaniu lub na żółto po aktualizacji, także zawierają efekty interaktywne. Żaden z nich nie jest niezbędny, ale upewniają użytkownika co do tego, że operacja została wykonana. Każdy z tych efektów stanowi sygnał, że aplikacja uwzględnia zamiary i działania użytkownika. Jest to odmienna sytuacja od kliknięcia przycisku i przesłania formularza lub przeciągnięcia produktu do koszyka zakupów, które są oczekiwane i kluczowe, a użytkownik zwróci na nie uwagę tylko wtedy, jeśli się nie powiodą. Efekty Ajaksa omówione w tym rozdziale to sposób informowania użytkownika przez aplikację sieciową: „słyszę cię; widzę, co robisz; chyba wiem, czego oczekujesz”. Żaden z tych efektów nie jest niezbędny, jednak w doskonałym zestawie narzędzi, jakim jest Ajax, mogą to być efekty najprostsze w implementacji i mające największy pozytywny wpływ na użytkowników korzystających z danych aplikacji. Te efekty są dość zróżnicowane: dymki z podpowiedziami, system pomocy JIT, zanikanie kolorów czy podgląd na żywo. Jednak wszystkie te elementy mają jedną cechę wspólną: stanowią reakcję na zdarzenia. Z powodu tej zależności od zdarzeń zacznę rozdział od przeglądu funkcji ich obsługi, a zwłaszcza obsługi zdarzeń w środowiskach Ajaksa, w których wiele bibliotek może współdziałać w jednej aplikacji.

103

Obsługa zdarzeń zgodna z Ajaksem Procedury obsługi zdarzeń były częścią języka JavaScript od jego powstania. Większość ma format onclick czy onload, czyli zaczyna się od słowa kluczowego on, po którym następuje nazwa zdarzenia. Zwykle funkcje obsługi zdarzeń są podawane w obiekcie, z którym są powiązane:

Użycie wewnątrzwierszowych funkcji obsługi zdarzeń to wciąż prawidłowe podejście do przechwytywania zdarzeń, jednak ma dwa ograniczenia: jedno związane z ich utrzymywaniem, drugie — z ich łączeniem.

Utrzymywanie funkcji obsługi zdarzeń Jeśli funkcje obsługi zdarzeń zostaną dodane bezpośrednio do elementów strony, a następnie niezbędne będzie wprowadzenie zmian w nazwie lub parametrach funkcji, programista będzie musiał znaleźć każde wystąpienie tekstu funkcji obsługi i zmodyfikować go. To podejście do dodawania funkcji obsługi zdarzeń jest niewydajne, a w przypadku współczesnych, bardziej złożonych i dynamicznie generowanych stron internetowych nie da się go stosować. Wyjątkiem jest tu treść generowana dynamicznie, jeśli kod tworzący zawartość strony znajduje się w jednym pliku. Choć wygenerowane dane mogą zajmować wiele stron, poprawki wystarczy wprowadzić w jednym miejscu.

Zamiast dodawać funkcje obsługi zdarzeń do obiektów, lepiej jest przypisać taką funkcję w bloku ze skryptami — albo w odrębnym pliku JavaScript, albo jako blok kodu w sekcji nagłówkowej dokumentu. Jest to tak zwana obsługa zdarzeń modelu DOM, poziom 0:

Także to rozwiązanie można stosować, jednak po przypisaniu funkcji do obsługi zdarzenia powstaje nowy problem. W powyższym przykładzie przypisanie funkcji somefunction do obsługi zdarzenia onclick obiektu document spowoduje zastąpienie funkcji przypisanych przed uruchomieniem tego skryptu. Jeśli programista dołącza zewnętrzne biblioteki Ajaksa lub łączy wiele takich bibliotek w jednej aplikacji, nie może założyć, że jest „właścicielem” danej obsługi zdarzenia. Jego kod musi współdziałać z kodem innych programistów, chyba że całe rozwiązanie składa się tylko i wyłącznie z kodu jego autora.

Łączenie funkcji obsługi zdarzeń Inne, zalecane podejście to obsługa zdarzeń modelu DOM, poziom 2. Ta technika polega na „łączeniu” funkcji obsługi zdarzeń tak, aby w momencie wystąpienia zdarzenia uruchamiane były wszystkie powiązane z nim funkcje. Przykład dodawania funkcji obsługi do zdarzenia click obiektu document wygląda tak: document.addEventListener("click",eventHandlerFunction,false);

104

|

Rozdział 4. Efekty interaktywne

W metodzie addEventListener pierwszy parametr to zdarzenie (click), a drugi to funkcja jego obsługi. Trzeci parametr jest opcjonalny i określa, czy przetwarzanie zdarzenia w zbiorze zagnieżdżonych obiektów ma się rozpocząć od zewnętrznego obiektu i przebiegać w kierunku wewnętrznego (true), czy od wewnętrznego do zewnętrznego (false). Pierwsze rozwiązanie to tak zwany etap przechwytywania, a drugie (domyślne) emuluje przetwarzanie ze starszego modelu DOM, poziom 0, obsługując zdarzenia na etapie ich generowania. Aby zademonstrować oba te podejścia, na listingu 4.1 przedstawiono stronę z dwoma elementami div, jeden wewnątrz drugiego. Uniwersalna funkcja obsługi zdarzeń, manageEvent, dołącza funkcje obsługi do obiektów, przyjmując jako parametry trzy elementy: obiekt docelowy, zdarzenie oraz funkcję obsługi zdarzenia. Jako pierwsze przechwytywane jest zdarzenie obiektu window w celu przypisania funkcji obsługi zdarzenia click do dwóch elementów div po ich wczytaniu. Funkcja obsługi zdarzenia load obiektu window przypisuje do obsługi zdarzenia click obu elementów div tę samą funkcję — clickHandler. Listing 4.1. Funkcja obsługi zdarzeń poprawnie współdziałająca z innymi

Kliknięcie wewnętrznego elementu div na tej przykładowej stronie powoduje wyświetlenie ramki ostrzegawczej wyświetlającej słowo „inner”, po czym następuje wyświetlenie następnej takiej ramki, tym razem ze słowem „outer”. Po ustawieniu trzeciego parametru funkcji Obsługa zdarzeń zgodna z Ajaksem

|

105

manageEvent na true (włączenie trybu przechwytywania obsługi zdarzeń) kliknięcie elementów div spowoduje wyświetlenie najpierw ramki ostrzegawczej ze słowem „outer”, a dopie-

ro potem ze słowem „inner”. Przechwycenie zdarzenia w złym trybie może mieć bardzo negatywny wpływ na aplikację. Ponieważ większość funkcji obsługi zdarzeń jest zaprojektowana pod kątem trybu generowania, jeśli programista nie ma określonego powodu, aby stosować tryb przechwytywania, powinien zwykle ustawić trzeci parametr na false. Stosowanie metody addEventListener to doskonałe rozwiązanie, z jednym wyjątkiem: przeglądarki Internet Explorer (6.x i 7) nie obsługują jej. Te przeglądarki udostępniają inną funkcję — attachEvent: document.attachEvent("onclick",eventHandlerFunction);

Metody attachEvent i addEventListener różnią się w dwóch elementach. Po pierwsze, w metodzie attachEvent należy podać jako pierwszy parametr nazwę obsługi zdarzenia, a nie samego zdarzenia (onclick, a nie click). Po drugie, metoda attachEvent nie ma trzeciego parametru, ponieważ zawsze działa w trybie generowania. Aby zagwarantować, że obsługa zdarzeń będzie działać w Internet Explorer 6.x i 7, a także w innych przeglądarkach, trzeba użyć obu metod obsługi: modelu DOM W3C, poziom 2, oraz techniki Microsoftu. Oznacza to, że należy sprawdzić, czy określona właściwość jest dostępna, i użyć odpowiedniego kodu. Wersja funkcji manageEvent zmodyfikowana tak, aby działała w przeglądarce Internet Explorer oraz innych, wygląda tak: function manageEvent(eventObj, event, eventHandler) { if (eventObj.addEventListener) { eventObj.addEventListener(event, eventHandler, false); } else if (eventObj.attachEvent) { event = "on" + event; eventObj.attachEvent(event, eventHandler); } }

Funkcja sprawdza obiekt eventObj, aby określić, czy ma on właściwość addEventListener. Jeśli tak, funkcja używa go do dodania funkcji obsługi zdarzeń. W przeciwnym razie sprawdza metodę attachEvent, a jeśli ją znajdzie — używa jej. Jeśli używana przeglądarka nie obsługuje ani metody addEventListener, ani attachEvent, można zastosować starszy sposób obsługi zdarzeń z modelu DOM, poziom 0 — właściwość onclick. Obecnie nie jest to konieczne, ponieważ przeglądarki, które nie mają jednej z zaawansowanych technik obsługi zdarzeń, w mniejszym lub większym stopniu wyszły z użycia. Do kończenia odbioru zdarzeń służą uzupełniające metody — removeEventListener i detachEvent: function stopManagingEvent(eventObj,event,eventHandler) { if (eventObj.removeEventListener) { eventObj.removeEventListener(event,eventHandler,false); } else if (eventObj.detachEvent) { event = "on" + event; eventObj.detachEvent(event,eventHandler); } }

W sytuacji kiedy programista chce anulować zdarzenie, trzeba przerwać przekazywanie zdarzenia w przeglądarkach opartych na Mozilli i wstrzymać generowanie w przeglądarkach 106

|

Rozdział 4. Efekty interaktywne

Internet Explorer. Ponadto należy zatrzymać domyślną obsługę zdarzeń, do czego służy metoda preventDefault w przeglądarkach zgodnych z Mozillą i W3C oraz ustawienie wartości returnValue na false w przeglądarkach Internet Explorer. Poniższa metoda cancelEvent wykonuje te operacje: function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { event.returnValue = false; event.cancelBubble = true; } }

Funkcje do zarządzania zdarzeniami są potrzebne tak często, że warto dodać je do używanych bibliotek. Ja dodałam je do biblioteki Ajaksa dołączonej do tej książki jako metody: aaManageEvent, aaStopEvent i aaCancelEvent, poprzedzając nazwy przedrostkiem „aa”, aby nie powodowały konfliktów z innymi używanymi bibliotekami. Jeśli programista używa w aplikacjach ajaksowych bibliotek zewnętrznych, w większości z nich znajdzie mechanizmy do obsługi zdarzeń. Następny punkt zawiera krótkie wprowadzenie do systemu obsługi zdarzeń jednej z takich bibliotek — Event System biblioteki Dojo.

System obsługi zdarzeń w Dojo i obiekty docelowe Większość bibliotek Ajaksa udostępnia mechanizm obsługi zdarzeń. Na przykład biblioteka Dojo posiada Dojo Event System, który znacznie upraszcza obsługę zdarzeń, a oprócz tego umożliwia zastosowanie niestandardowych sztuczek. W Dojo w celu zapewnienia funkcjonalności przedstawionej w poprzednim punkcie — czyli dołączenia odbiornika zdarzeń w celu przechwytywania zdarzenia load obiektu window i kliknięcia elementów div — wystarczy użyć metody connect obiektu dojo.event: dojo.event.connect(obj,"onclick",eventHandler);

Przypomina to funkcję przedstawioną na listingu 4.1, jednak możliwości systemu obsługi zdarzeń biblioteki Dojo znacznie wykraczają poza prostą funkcję manageEvent. Dojo między innymi zarządza różnicami pomiędzy przeglądarkami w zakresie przekazywania obiektu event do funkcji. Choć listing 4.1 tego nie demonstruje, zwykle jeśli programista chce uzyskać dostęp do obiektu event w funkcji obsługi zdarzenia w sposób, który będzie działał w różnych przeglądarkach, musi użyć w pierwszym wierszu tej funkcji kodu podobnego do poniższego: function eventHandler(evnt) { var event = evnt || window.event; ... }

Można też użyć następującego rozwiązania: function eventHandler(evnt) { var event = evnt ? evnt : window.evnt; ... }

Jeśli obiekt event przekazany do metody evnt istnieje, zostanie przypisany do zmiennej event. W przeciwnym razie można pobrać obiekt event z obiektu window. Jest to następna technika Obsługa zdarzeń zgodna z Ajaksem

|

107

zapewniająca zgodność z przeglądarkami Internet Explorer 6.x i 7, które nie przekazują automatycznie obiektu event do funkcji obsługi zdarzeń. W systemie obsługi zdarzeń Dojo to biblioteka obsługuje takie zadania, dlatego można założyć, że do funkcji obsługi zdarzeń zawsze zostanie przekazany parametr w postaci obiektu event. Listing 4.2 to zmodyfikowana wersja kodu listingu 4.1, używająca Dojo i obiektu event. Listing 4.2. Obsługa zdarzeń w bibliotece Dojo

W tym przykładzie dostęp do identyfikatora obiektu odbywa się za pomocą obiektu event, a nie poprzez kontekst obiektu reprezentowany przez słowo kluczowe this. Zaletą tego podejścia jest to, że stosowanie obiektu event działa w różnych przeglądarkach. Jeśli programi108

|

Rozdział 4. Efekty interaktywne

sta użyje instrukcji this.id w przeglądarkach takich jak Internet Explorer 7, otrzyma wartość undefined, a nie identyfikator obiektu, którego dotyczyło zdarzenie. Jeśli program ma przestać oczekiwać na zdarzenie, należy użyć instrukcji dojo.event.disconnect z tymi samymi parametrami co w przypadku metody connect.

Oczywiście, dołączanie Dojo jedynie do prostej obsługi zdarzeń przypomina korzystanie z miecza do otwierania konserwy rybnej — jest to znaczna przesada. Jednak przedstawione przykłady demonstrują, że używając zewnętrznych bibliotek Ajaksa, warto sprawdzić, czy nie udostępniają obsługi zdarzeń, a jeśli tak, można użyć tych mechanizmów zamiast własnej biblioteki. Głównym powodem takiego postępowania jest zapewnienie maksymalnej zgodności w zakresie obsługi zdarzeń między biblioteką zewnętrzną a kodem aplikacji. Jest jeszcze jeden powód, dla którego wybrałam Dojo w celu przedstawienia obsługi zdarzeń za pomocą bibliotek. Dojo wykracza poza zarządzanie różnicami między przeglądarkami — dodatkowo umożliwia rozbudowę systemu obsługi zdarzeń tak, aby można było dołączyć funkcje obsługi zdarzeń invocation do samych funkcji. Funkcje obsługi zdarzeń invocation są wywoływane w momencie przetwarzania funkcji, z którymi są powiązane. Udostępnienie tego rozszerzenia wynika z tego, że Dojo, w odróżnieniu od wielu innych bibliotek Ajaksa, ma infrastrukturę opartą na wtyczkach, a wszystkie one współdziałają z tą biblioteką. Inne biblioteki stanowią platformy, na których można tworzyć aplikacje. Jeśli nowa wtyczka biblioteki Dojo zawiera funkcję, którą trzeba wywołać przy każdym uruchomieniu innej metody tej biblioteki, należy subskrybować tę metodę. Strona internetowa przedstawiona na listingu 4.3 składa się z tych samych dwóch elementów div co strona na listingach 4.1 i 4.2. Jednak na listingu 4.3 wystąpienie zdarzenia click w bloku

wewnętrznym powoduje zmianę jego koloru. Kiedy to się stanie, zmienić ma się także kolor bloku zewnętrznego. Kod aplikacji tworzy dwa nowe obiekty, change1 i change2, które modyfikują odpowiednio wewnętrzny i zewnętrzny blok. Aplikacja używa systemu obsługi zdarzeń biblioteki Dojo do zarejestrowania metody pierwszego obiektu, change1, jako „wydawcy zdarzenia”, przypisując do niego nazwę tematu — "/example". Następnie kod używa metody dojo.event.topic.subscribe, aby dodać subskrybenta nowego wydawcy, dzięki czemu po uruchomieniu pierwszej metody, change1, uruchomiona zostanie także druga — change2. Listing 4.3. Stosowanie techniki wydawca-subskrybent za pomocą Dojo Event System

Po otwarciu przykładowej strony i kliknięciu wewnętrznego bloku jego kolor zmieni się z niebieskiego na czerwony, czego można oczekiwać z powodu działania funkcji obsługi zdarzeń przypisanej bezpośrednio do zdarzenia click bloku. Kolor bloku zewnętrznego także się zmienia — z żółtego na purpurowy — za sprawą techniki wydawca-subskrybent, dodanej za pomocą systemu obsługi zdarzeń biblioteki Dojo. Jest to prosty przykład zastosowania bardzo ciekawej funkcji, przeznaczonej do wzbogacania biblioteki Dojo o niestandardowe kontrolki. Jest to ciekawa infrastruktura, o której trzeba pamiętać, używając biblioteki Dojo. Ponadto należy pamiętać o niej przy tworzeniu własnych bibliotek, jeśli potrzebna jest tego typu architektura z obsługą wtyczek. Teraz wróćmy do interaktywnych efektów Ajaksa.

Informacje w trybie JIT Strony są interaktywne, jeśli reagują na działania użytkownika. Ta interakcja może polegać na kliknięciu przycisku lub odnośnika, przeciągnięciu elementu div czy wypełnieniu formularza. Zwykle kontekst strony udostępnia użytkownikom wystarczającą ilość informacji, aby potrafili określić, co należy zrobić, jednak nie zawsze tak jest. Na przykład łatwo zrozumieć 110

|

Rozdział 4. Efekty interaktywne

przeznaczenie pola formularza z etykietą „Nazwisko”, jednak inne etykiety, na przykład „Podaj powierzaną ilość”, mogą być mniej oczywiste. Wyświetlanie szczegółowych informacji na stronie może powodować bałagan, a zmuszanie użytkowników do otwierania następnej strony nie jest dobre. Otwieranie nowych okien może pomóc, jednak powoduje oddzielenie operacji od obiektu. W takich sytuacjach przydatny jest system pomocy JIT (ang. just-in-time, czyli „na czas”). Pomoc JIT zwykle obejmuje wyświetlanie pól z tekstem opisującym dany element lub zawierającym dodatkowe instrukcje. Takie pole można otworzyć przy aktywnym elemencie lub w standardowym miejscu strony, niezależnie od tego, który obiekt jest aktywny. Pomoc jest wyświetlana na podstawie działań użytkownika, takich jak umieszczenie kursora myszy nad polem formularza.

Pomoc w formularzach Etykiety elementów formularza mogą być oczywiste, na przykład „Imię” czy „Wiek”, jednak od czasu do czasu można natrafić na tekst podobny do „Post Slug” (z Wordpress — aplikacji do obsługi blogów), który powoduje, że użytkownicy drapią się po głowie i muszą zajrzeć do dokumentacji. Zamiast odsyłać użytkowników na odrębne strony, lepiej jest dodać informacje do samego formularza. Niestety, może brakować na nim miejsca. Strona do edycji wiadomości w aplikacji Wordpress to dobry przykład użycia zbyt wielu elementów i zbyt małej ilości miejsca. Najprostszy rodzaj pomocy w przypadku formularzy polega na przechwytywaniu zdarzeń zmiany aktywności każdego elementu i wyświetlaniu bloku z opisowym tekstem dotyczącym aktywnego obiektu. Zamiast zgadywać, przy którym elemencie użytkownik może wymagać pomocy, programista zakłada wtedy, że będzie ona potrzebna przy wszystkich obiektach, i udostępnia informacje dla każdego z nich. Te informacje można wstępnie wczytywać na stronę lub pobierać za pomocą wywołań Ajaksa kierowanych do usług sieciowych. Listing 4.4 przedstawia prostą aplikację z formularzem z pomocą JIT. Ponieważ aplikacja jest bardzo mała, skrypt, arkusz stylów i elementy strony internetowej znajdują się w jednym pliku. Kod strony dołącza funkcję obsługi zdarzenia onfocus do każdego elementu formularza, włączając w to przycisk do wysyłania go. Kiedy zajdzie zdarzenie focus dla danego elementu formularza, jego nazwa zostanie przesłana za pomocą obiektu XMLHttpRequest jako część zapytania do usługi sieciowej. Ta usługa zwraca definicję elementu, która jest następnie wyświetlana za pomocą właściwości innerHTML jako odrębny element strony — element div o identyfikatorze help. Listing 4.4. Formularz z systemem pomocy JIT opartym na zdarzeniu onfocus

Dane osobowe

Imię:

Nazwisko:

112

|

Rozdział 4. Efekty interaktywne

Jest to bardzo proste podejście do dynamicznego udostępniania pomocy. W przypadku tylko dwóch pól, z których żadne tak naprawdę nie wymaga dodatkowych wyjaśnień, zwykle nie warto stosować takiego rozwiązania, jednak uproszczenie przykładu pozwala jasno zaprezentować omawianą technikę. Komponent działający po stronie serwera tej aplikacji ajaksowej jest równie prosty: Podaj imię

"; break; case "lastname" : $result = "

Podaj nazwisko

"; break; default : $result = ""; break; } echo $result; } ?>

Jednak jeśli aplikacja obejmuje kilka formularzy rozproszonych na kilku stronach, udostępnienie tego samego systemu pomocy dla wszystkich stron umożliwia wprowadzanie zmian w informacjach w jednym miejscu, a nie w kilku różnych plikach. To podejście staje się wtedy dużo bardziej praktyczne. Ponadto jeśli aplikacja umieszcza szukane informacje w pamięci podręcznej przy ich pierwszym pobieraniu, zmniejsza się także liczba połączeń z serwerem: function printHelp() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById('help').innerHTML=xmlhttp.responseText; helpObj[helpItem] = xmlhttp.responseText; } }

Po zastosowaniu pamięci podręcznej aplikacja będzie sprawdzać dostępność informacji o danym elemencie w tablicy asocjacyjnej znajdującej się w tej pamięci. Inne usprawnienie polega na zastosowaniu pomocy „na żądanie” zamiast wyświetlania jej po każdym aktywowaniu pola przez użytkownika. Jednym z rozwiązań jest tu przechwytywanie zdarzenia click etykiet zamiast zdarzenia focus pól i wyświetlanie pomocy po kliknięciu danej etykiety: function setUp() { var items = document.getElementsByTagName('label'); for (var i = 0; i < items.length; i++) { aaManageEvent(items[i],"click",showHelp); } }

Aby to rozwiązanie działało, w etykietach należy określić identyfikatory, a nie pola formularza:

Imię:


Informacje w trybie JIT

|

113


Nazwisko:

Problem z używaniem etykiet polega na tym, że użytkownik zwykle nie wie, iż można je kliknąć. Jednym z rozwiązań tego problemu jest dodanie do etykiety efektu w momencie umieszczenia nad nią kursora myszy. Kursor powinien zmieniać się wtedy w znak zapytania. W tym celu należy dodać odpowiednie ustawienia do arkusza stylów CSS, zmieniając kursor myszy na wskaźnik systemu pomocy (zwykle jest to znak zapytania) po umieszczeniu wskaźnika nad etykietą: label { cursor: help; }

Oczywiście, użytkownik nadal musi umieścić kursor myszy nad etykietą, aby pojawił się odpowiedni wskaźnik. Ponadto trzeba korzystać z myszy, aby zauważyć, że najechanie na etykietę powoduje zmianę kursora, a obsługa skryptów musi być włączona. Bardziej dyskretne i intuicyjne rozwiązanie polega na otoczeniu etykiet odnośnikiem, ustawieniu atrybutu target na nazwę nowego okna i wyświetlaniu pomocy w wyniku zajścia zdarzenia mouseover, a nie click. Jeśli obsługa skryptów jest włączona, zdarzenie mouseover spowoduje wyświetlenie pomocy. Jeśli skrypty są wyłączone, kliknięcie odnośnika spowoduje otwarcie odrębnego okna z informacjami. Ta zmiana powoduje, że pomoc JIT będzie współdziałać z klawiaturą i będzie bardziej dostępna dla programów odczytujących tekst z ekranu. Rozwiązanie oparte na odnośniku powoduje dwa problemy. Jeden z nich polega na tym, że specyfikacja XHTML 1.0 Strict nie obejmuje atrybutu target. Drugi wiąże się z koniecznością informowania użytkowników używających programów odczytujących tekst z ekranu i innych narzędzi pomocniczych o tym, że kliknięcie odnośnika powoduje otwarcie nowego okna. Można uniknąć obu tych problemów, otwierając informacje systemu pomocy w obrębie tej samej strony, jednak nie jest to dobre rozwiązanie w przypadku wyświetlania pomocy na formularzach, zwłaszcza jeśli dany formularz jest już częściowo wypełniony. Popularne podejście do tego problemu polega na dołączeniu do odnośników atrybutu w postaci pary klucz-wartość rel="external", co prowadzi do otwierania takich odnośników w nowym oknie. Do tworzenia nowych okien w wyniku kliknięcia danego odnośnika służy tu kod JavaScript. Jednak jedną z głównych przyczyn wyświetlania pomocy w nowym oknie jest wyłączenie obsługi skryptów. Niektóre osoby i tak chcą kliknąć odnośnik, ponieważ używają programów odczytujących tekst ze strony, które nie mają dostępu do pomocy generowanej dynamicznie. Także w tym przypadku należy uważać, aby nie zastąpić częściowo wypełnionego formularza. W przypadku takich osób należy albo zrezygnować z walidacji strony jako dokumentu XHTML 1.0 Strict (kuszące rozwiązanie), albo utworzyć kod JavaScript, który przechwytuje operację kliknięcia i otwiera nowe okno. Nie mogę powiedzieć, które rozwiązanie uważam za najlepsze, ponieważ jedynie autor programu może określić, co jest ważne dla danej aplikacji i jej klientów. Na razie rozwinęłam plik addingajax.js, aby dodać procedurę przechwytującą odnośnik na podstawie atrybutu rel="external", co przynajmniej daje pewne możliwości. Listing 4.5 przedstawia nowe elementy tej biblioteki, włączając w to funkcję obsługi zdarzenia onload, która służy do przetwarzania odnośników.

114

|

Rozdział 4. Efekty interaktywne

Listing 4.5. Nowe elementy biblioteki, które obsługują zgodną z XHTML wersję atrybutu target elementów anchor function externalLinks() { var anchors = document.getElementsByTagName("a"); for (var i=0; i
Trzecia możliwość rozwiązania problemu ze specyfikacją XHTML Strict i atrybutem target polega na rozszerzeniu XHTML przez utworzenie niestandardowego dokumentu DTD. Rozważania na ten temat zawiera artykuł Extending XHTML: Target and Strict na blogu Wayne’a Burketta (http://dionidium.com/2004/05/xhtml-tests).

Choć statyczna zawartość strony przejdzie teraz walidację, to podejście powoduje dynamiczne dodawanie nieprawidłowych znaczników. Drugi sposób na napisanie tej funkcji, który całkowicie rozwiązuje problem walidacji, polega na zastosowaniu poniższego kodu w każdym znaczniku anchor: aaManageEvent(anchor,'click',function() { window.open(this.href); aaCancelEvent(event); });

Ten kod powoduje otwarcie nowego okna bez statycznego ani dynamicznego dodawania nieprawidłowych znaczników. To podejście wymaga dostępu do obiektu event w celu obsługi wywołania metody cancelEvent. Usprawniając aplikację, można dodać pewne ozdobniki do systemu pomocy, aby był bardziej elegancki. W tym przypadku ustawienia zmieniają kolor tła oraz dodają ramkę. Nowy arkusz stylu znajduje się w odrębnym pliku — jit.css: #help { background-color: #FFFF8F; border: 1px solid #82887e; left: 300px; padding: 10px; position: absolute; top: 20px; visibility: hidden; } form { margin: 50px; width: 500px; } input { margin: 10px; } label { cursor: help;

Informacje w trybie JIT

|

115

} a { text-decoration: none; }

Także kod JavaScript nowego rozwiązania znajduje się w odrębnym pliku — jit.js. Ten nowy skrypt, przedstawiony na listingu 4.6, dodaje obsługę pamięci podręcznej i zarządzanie zdarzeniami etykiet. Kod JavaScript wyświetlający pomoc jest rozbity na odrębne funkcje i wywoływany z poziomu funkcji przetwarzającej żądanie XMLHttpRequest, a także w funkcji showHelp — jeśli pomoc dotycząca danego elementu znajduje się w pamięci podręcznej. Listing 4.6. Pomoc JIT dla formularza, utworzona za pomocą Ajaksa var xmlhttp; var helpItem; var helpObj = new Object(); aaManageEvent(window,"load", function() { var items = document.getElementsByTagName('label'); for (var i = 0; i < items.length; i++) { aaManageEvent(items[i],"mouseover",showHelp); aaManageEvent(items[i],"mouseout",hideHelp); } }); // Pobieranie informacji z systemu pomocy function showHelp(evnt) { evnt = (evnt) ? evnt : window.event; // Tworzenie obiektu XMLHttpRequest, jeśli nie jest gotowy if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; helpItem = (evnt.currentTarget) ? evnt.currentTarget.id : evnt.srcElement.id; var qry = "item=" + helpItem; // Jeśli element znajduje się w pamięci podręcznej, // należy wyświetlić go i zwrócić sterowanie if (helpObj[helpItem]) { printHelp(); return; } // Wywoływanie systemu pomocy var url = 'help.php?' + qry; xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = getHelp; xmlhttp.send(null); } // Ukrywa pole z pomocą function hideHelp() { document.getElementById('help').style.visibility="hidden"; } // Wyświetla pole z pomocą function getHelp() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { helpObj[helpItem] = xmlhttp.responseText; printHelp(); } }

116

|

Rozdział 4. Efekty interaktywne

function printHelp() { var help = document.getElementById('help'); help.innerHTML = helpObj[helpItem]; help.style.visibility="visible"; }

Na stronie internetowej dołączane są pliki CSS i JavaScript, etykiety formularza są umieszczone wewnątrz odnośników hipertekstowych, a z adresem URL każdego z nich powiązany jest odpowiedni element systemu pomocy. Tę stronę przedstawia listing 4.7. Odnośniki mają atrybut rel="external", a także bezpośrednio określone nagłówki z jasnymi informacjami o tym, że kliknięcie odnośnika powoduje otwarcie drugiego okna. Listing 4.7. Strona z pomocą JIT — prawidłowa, dostępna i aktywna

Dane osobowe

Imię:

Nazwisko:

Rysunek 4.1 przedstawia tę stronę z wyświetloną pomocą dla jednego elementu. Jest to dużo kodu, jak na prosty efekt, jednak zastosowane techniki umożliwiają przekształcenie rozwiązania w bibliotekę funkcji języka JavaScript do udostępniania pomocy JIT nie tylko dla formularzy. Pomoc JIT to niemal odpowiednik innego efektu, znanego jako podpowiedzi. Wystarczy rozszerzyć funkcjonalność na inne obiekty i określić pozycję wyświetlanego tekstu tak, aby pojawiał się on w miejscu wystąpienia zdarzenia.

Informacje w trybie JIT

|

117

Rysunek 4.1. Formularz z pomocą JIT

Podpowiedzi Jak wspomniałam na początku tego rozdziału, użytkownicy witryny Netflix czy Blockbuster Online prawdopodobnie widzieli, jak po umieszczeniu kursora myszy nad odnośnikiem lub rysunkiem powiązanym z filmem pojawiają się informacje o nim, a także odnośnik umożliwiający dodanie danego filmu do listy. Jest to jedno z najlepszych zastosowań podpowiedzi, jakie widziałam. Bardziej szczegółowe informacje o danym obiekcie wyświetlane są szybko, bez zmuszania odwiedzających do otwarcia następnej strony. Jest to szczególnie przydatne, jeśli użytkownik witryny przegląda wiele elementów. Podpowiedzi można używać wszędzie: w sklepach internetowych, wyświetlając bardziej szczegółowe informacje o wierszach danych pobranych z bazy, do wyświetlania danych o aparacie użytym do wykonania zdjęcia i tak dalej — w każdej sytuacji, w której programista chce udostępniać informacje o obiekcie w kontekście otwartego okna. Jedyna zmiana, jaka jest potrzebna w celu przekształcenia aplikacji JIT z poprzedniego punktu na program z podpowiedziami, to udostępnienie tła w postaci dymku z tekstem i określenie pozycji podpowiedzi tak, aby była wyświetlana w pobliżu wystąpienia zdarzenia mouseover. Brzmi to prosto, jednak wymaga dodania jeszcze większej ilości kodu. Poniższy fragment strony internetowej jest bardzo podobny do kodu z listingu 4.7, jednak zawiera dwa nowe elementy strony: nagłówek h1 i niezależny odnośnik. Zostały one dodane w celu pokazania, że podpowiedzi mogą dotyczyć dowolnego obiektu na stronie, a nie wyłącznie elementów formularza:

Test podpowiedzi

Dane osobowe

Imię:


118

|

Rozdział 4. Efekty interaktywne

lastname" rel="external"> Nazwisko:

Podpowiedź dla odnośnika hipertekstowego

W arkuszu stylów określany jest dymek stanowiący tło podpowiedzi: #help { background-image: url(back.png); background-repeat: no-repeat; height: 200px; padding: 10px 0px 0px 10px; position: absolute; visibility: hidden; width: 150px; }

Najbardziej istotna zmiana w nowej wersji aplikacji to kod JavaScript. W przypadku każdego elementu powiązanego z podpowiedzią przechwytywane jest zdarzenie mouseover w celu wyświetlenia wskazówki. Następnie trzeba przechwycić zdarzenie mouseout, aby ukryć podpowiedź. Po wystąpieniu zdarzenia mouseover kod sprawdza pozycję kursora myszy, aby element z pomocą umieścić w zbliżonym miejscu. Pozycja jest modyfikowana z uwzględnieniem rozmiaru dymka, aby umieścić jego ostrą część tak blisko kursora, jak to możliwe. Jedynym wyjątkiem jest pierwszy element od góry. Ponieważ znajduje się on blisko górnej krawędzi strony, trzeba dopasować pozycję podpowiedzi w pionie, aby jej górna część nie znalazła się ponad stroną. Listing 4.8 przedstawia nowy plik JavaScript. Listing 4.8. Wyświetlanie podpowiedzi dla formularza i innych elementów var var var var

xmlhttp; // Globalny obiekt XMLHttpRequest helpItem; // Bieżący element pomocy helpObj = new Object(); // Elementy pomocy z pamięci podręcznej posX; var posY;

// Przygotowanie zdarzeń związanych z podpowiedziami function addTooltip(ttObj) { aaManageEvent(ttObj,"mouseover",showHelp); aaManageEvent(ttObj,"mouseout",hideHelp); } // Dołączenie zdarzeń podpowiedzi do obiektów aaManageEvent(window,"load",function() { var items = document.getElementsByTagName('label'); for (var i = 0; i < items.length; i++) { addTooltip(items[i]); } addTooltip(document.getElementById('title')); addTooltip(document.getElementById('link')); }); // Pobieranie informacji z serwera function showHelp(evnt) {

Informacje w trybie JIT

|

119

evnt = (evnt) ? evnt : window.event; // Określanie pozycji posX = evnt.clientX; posY = evnt.clientY; // Tworzenie obiektu XMLHttpRequest, jeśli nie jest gotowy if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; helpItem = (evnt.currentTarget) ? evnt.currentTarget.id : evnt.srcElement.id; var qry = "item=" + helpItem; // Jeśli element znajduje się w pamięci podręcznej, // należy wyświetlić go i zwrócić sterowanie if (helpObj[helpItem]) { printHelp(); return; } // Wywołanie systemu pomocy var url = 'help.php?' + qry; xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = getHelp; xmlhttp.send(null); } // Ukrycie dymku z informacjami function hideHelp() { // Można zasugerować zmianę nazwy klasy zamiast bezpośredniego manipulowania stylem document.getElementById('help').style.visibility="hidden"; } // Wyświetlanie pomocy function getHelp() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { helpObj[helpItem] = xmlhttp.responseText; printHelp(); } } // Określenie pozycji podpowiedzi function printHelp() { var help = document.getElementById('help'); help.innerHTML = helpObj[helpItem]; y = posY - 130; if (y < 0) y = 10; help.style.top = y + "px"; help.style.left = (posX + 10) + "px"; help.style.visibility="visible"; }

Rysunek 4.2 przedstawia podpowiedzi w akcji. Także tym razem do utworzenia prostego efektu niezbędna jest duża ilość kodu, jednak można go łatwo zmodyfikować i wykorzystać w odrębnej bibliotece. Wystarczy umożliwić utworzenie podpowiedzi, przekazując lokalizację i treść, a obiekt tooltip wykona wszystkie potrzebne operacje. Można rozbudować funkcjonalność tak, aby wystarczało przekazanie samego elementu, a obiekt tooltip obsłuży zdarzenie, choć wtedy prawdopodobnie konieczne będzie także przekazanie treści, chyba że programista poda ją jako elementy strony i nie będzie pobierał jej z usługi sieciowej.

120

|

Rozdział 4. Efekty interaktywne

Rysunek 4.2. Podpowiedzi w akcji — udostępniają użytkownikom dodatkowe informacje Jeszcze prostsze podejście to użycie istniejącej biblioteki do wyświetlania podpowiedzi. Jedną z takich bibliotek jest Tooltip.js, oparta na Prototype i script.aculo.us. Najnowszą wersję tej biblioteki można pobrać ze strony http://tooltip.crtx.org.

W przypadku efektów takich jak te z witryn Netflix czy Blockbuster trzeba użyć rysunku o przezroczystym tle. Jedyna możliwość to przezroczysty plik GIF lub PNG, choć ten drugi format nie działa zbyt dobrze w przeglądarkach Internet Explorer (nawet w wersji 7, w której pojawiają się dziwne efekty związane z kolorami). Trzeba zastosować warstwy dla efektu, udostępniając rysunek dla nagłówka i stopki, a także odrębny rysunek dla ciała, który będzie można powielać w pionie, co umożliwi zmianę jego rozmiaru w zależności od długości treści. Następną ważną rzeczą, o której należy pamiętać, udostępniając omawiany mechanizm, jest to, że podpowiedzi nie działają przy wyłączonej obsłudze skryptów. Jednym ze sposobów na obejście tego problemu jest udostępnianie odnośników hipertekstowych wokół odpowiednich elementów, pozwalających otworzyć nową stronę, i stosowanie znaczników anchor dla poszczególnych informacji w systemie pomocy.

Podgląd na stronie Czasem najprostsza technologia może dać najlepsze efekty. Spośród wszystkich zmian, które wprowadziłam na moich witrynach, użytkownicy najbardziej polubili tę, która była jednocześnie najłatwiejsza w implementacji: podgląd na żywo. Podgląd na żywo odzwierciedla informacje podawane przez użytkownika w trakcie ich wpisywania. Pozwala użytkownikom zobaczyć, jak tekst będzie wyglądał w kontekście, w którym zostanie opublikowany, a nie w małych okienkach w niewielkich formularzach. Jest to możliwe jeszcze przed przesłaniem nowego lub zmodyfikowanego materiału. Stosunkowo łatwa jest także implementacja alternatywnego rozwiązania, działającego przy wyłączonej obsłudze

Podgląd na stronie

|

121

skryptów i zapewniającego zgodność z wymogami dostępności. Wystarczy udostępnić stronę z podglądem, którą użytkownik może sprawdzić przed ostatecznym przesłaniem danych. Można nawet użyć obu technik: podglądu na żywo i przycisku Podgląd. W jakich sytuacjach podgląd na żywo jest najbardziej użyteczny? Wszędzie tam, gdzie użytkownicy mogą zamieszczać komentarze. Obejmuje to wiadomości e-mail wysyłane do działu obsługi klienta, komentarze na blogach, recenzje produktów — we wszystkich przypadkach, kiedy użytkownik wpisuje więcej niż kilka słów. Podgląd na żywo składa się z wykrywania aktywności w polu formularza, przechwytywania wciśniętych klawiszy i wyświetlania ich w innym elemencie strony. Sposób wyświetlania zależy od tego, jak aktywny ma być podgląd. Można wyświetlać litery bezpośrednio po ich wpisaniu, co daje prawdziwe wrażenie działania „na żywo”. Można też udostępnić przycisk Podgląd, jednak zamiast otwierać nową stronę, można wyświetlać komentarz bezpośrednio na stronie wyjściowej. To podejście nie wymaga przechwytywania zdarzenia keypress, a dostęp do danych z pola z komentarzem jest potrzebny tylko po użyciu przycisku Podgląd. Obie wymienione techniki mają wady i zalety, które omawiam, analizując każde z tych podejść.

Podgląd na żywo Stosunkowo łatwo jest dodać podgląd na żywo, odzwierciedlający wpisywany tekst. Należy rozpocząć od przechwycenia zdarzenia keyup w elemencie textarea lub input formularza, a następnie pobrać cały tekst i wyświetlić go w odpowiednim elemencie div, używając właściwości innerHTML. W kodzie trzeba dostosować tekst, zastępując znak końca wiersza znacznikiem br. Dzięki temu tekst będzie w mniejszym lub większym stopniu zgodny z wpisanymi danymi. Listing 4.9 przedstawia kompletną aplikację używającą podglądu na żywo. Ponieważ ten przykład jest bardzo krótki, arkusz stylów i skrypty znajdują się bezpośrednio na stronie internetowej. Tekst podglądu nie wymaga modyfikacji innych niż przekształcenie znaku końca wiersza na znacznik br. Jeśli tekst podglądu wymaga innych zmian, na przykład usunięcia znaczników HTML, aby pokazać, jak komentarz będzie wyglądał po opublikowaniu, trzeba odpowiednio zmodyfikować skrypt. Należy jednak pamiętać, aby wyświetlany podgląd był prosty, ponieważ funkcja zapewniająca podgląd danych wejściowych na żywo jest wywoływana za każdym razem, kiedy w elemencie form zajdzie zdarzenie keyup. Listing 4.9. Prosty podgląd na żywo

Informacje wpisane w polu textarea zostaną odzwierciedlone w elemencie preview. Formularz ma także przyciski Podgląd i Zapisz, które prowadzą do strony preview.php. Na tej stronie użytkownik może zapisać komentarz lub kliknąć przycisk Wstecz, aby powrócić do formularza i wprowadzić poprawki. Żadna z tych operacji nie wymaga skryptów. Z dalszej części rozdziału dowiesz się, jak przesłać formularz i wyświetlić nowy komentarz bez konieczności otwierania nowej strony. Podgląd na żywo wiąże się z jednym istotnym problemem. Co się stanie, jeśli strona zostanie zwrócona jako dokument o typie MIME XHTML? Implementacja właściwości innerHTML jest odmienna w różnych przeglądarkach, choć większość z nich obsługuje pewną wersję tej właściwości. Jednak wyświetlanie podglądu na żywo przez dodanie znacznika XHTML odbywa się zupełnie inaczej w różnych przeglądarkach. W przeglądarkach Firefox 2.x i nowszych niepełny znacznik spowoduje zgłoszenie dziesiątków błędów, zanim aplikacja zdąży go uzupełnić. Wszystkie te błędy informują o tym, że tekst nie jest prawidłowym kodem XML. Z kolei w Operze niepełne znaczniki są traktowane jako sekwencja sterująca do czasu zamknięcia znacznika, a następnie — jako kod XHTML.

Podgląd na stronie

|

123

Obejście tego ograniczenia polega na zastosowaniu sekwencji ucieczki dla symboli HTML: <, > i &. W tym celu należy zastąpić generowanie łańcucha modText następującym kodem: modText = commentText.replace(/&/g, '&').replace(/>/g, >'>').replace(/");

Powoduje to wyłączenie odnośników i innych elementów kodu HTML. Jeśli programista nie ma zaufania do źródła danych, może usunąć cały kod HTML.

Różnice w działaniu między różnymi przeglądarkami są wystarczająco istotne, aby stosować podgląd na żywo wyłącznie na stronach HTML, przynajmniej do czasu pojawienia się nowego standardu, HTML 5.0, który powinien jasno określać zarządzanie fragmentami dokumentów. Do tego czasu, jeśli programista chce zastosować podgląd na żywo dla stron w formacie XHTML, zalecam stosowanie „ajaksowej” wersji podglądu komentarzy. W internecie dostępnych jest wiele zastosowań podglądu na żywo, jednak po raz pierwszy zetknęłam się z tą techniką poprzez wtyczkę witryny Wordpress utworzoną przez Chrisa Davisa (http://www.chrisjdavis.org).

Podgląd za pomocą Ajaksa Ajaksowa wersja podglądu na żywo nie wyświetla tekstu bezpośrednio po jego wpisaniu. Pobiera cały tekst po kliknięciu przycisku Podgląd, ale zamiast wyświetlać go na odrębnej stronie z podglądem, używa do tego specjalnego obszaru. Zaletą tej metody jest to, że aplikacja w małym stopniu obciąża procesor, ponieważ nie musi przechwytywać wszystkich zdarzeń keyup. Jest także dużo bardziej zgodna z XHTML, ponieważ dane wejściowe można sformatować pod kątem XHTML przed ich wyświetleniem. Podgląd na żywo działa tak, jak wskazuje na to nazwa — na żywo. Nie można zastosować innego formatowania niż usunięcie znaczników. Strona demonstrująca podgląd za pomocą Ajaksa jest prawie taka sama jak strona z listingu 4.9. Wyjątkiem jest kilka elementów skryptu oraz dołączenie identyfikatora do przycisku Podgląd. Listing 4.10 przedstawia kod tej strony z wyróżnionymi modyfikacjami. Listing 4.10. Podgląd komentarzy za pomocą Ajaksa

Komentarz

Komentarz:

Obecnie zdarzeniem, które powoduje wyświetlenie podglądu, jest kliknięcie przycisku Podgląd. Aby zapobiec domyślnemu działaniu tego przycisku (przesłaniu formularza), funkcja obsługi tego zdarzenia kończy je. W przypadku ajaksowego podglądu zagnieżdżenie elementów XHTML w komentarzu nie spowoduje błędu wynikającego z tego, że tekst jest niekompletny, jak dzieje się to w przeglądarkach Firefox 2.x (przynajmniej w czasie pisania tej książki). Jednak użycie „nieprawidłowego” kodu XHTML w przeglądarce, która sprawdza zawartość za pomocą właściwości innerHTML, spowoduje błędy języka JavaScript w czasie przypisywania tekstu do elementu innerHTML. Zgłoszenia błędów nie są złe, jednak błędy JavaScript są niekorzystne.

Podgląd na stronie

|

125

Lepsze rozwiązanie polega na umieszczeniu kodu używającego właściwości innerHTML w bloku try...catch, aby udostępniać komunikaty o błędach przeznaczone dla użytkowników, a nie dla programistów: modText = commentText.split(/\n/).joint("
"); var previewElem = document.getElementById("preview"); try { previewElem.innerHTML = modText; } catch(err) { previewElem.innerHTML = "

Wystąpił błąd. Sprawdź, czy w komentarzu nie występują błędy (X)HTML.

"; }

Opera po prostu poprawi (lub przyjmie) nieprawidłowy znacznik, podobnie jak Safari, Internet Explorer czy OmniWeb, jednak Firefox i WebKit uruchomią obsługę błędów. Niestety, nie ma łatwego sposobu na przechwycenie tego błędu. Wymaga to próby utworzenia dokumentu XML i sprawdzenia, co się stanie. Jest to dość ekstremalne rozwiązanie, a jego koszty przekraczają użyteczność omawianego efektu. Lepsza technika polega na unikaniu wszelkich błędów przez usunięcie znaczników i udostępnienie przycisków, co umożliwia formatowanie odnośników hipertekstowych i podobnych elementów. Także w tym przypadku, jeśli programista nie chce ryzykować używania XHTML w komentarzach, może zastosować sekwencje ucieczki w kodzie HTML lub całkowicie usunąć znaczniki.

Następny ciekawy efekt, którego można użyć do obsługi komentarzy i podobnych elementów, zwłaszcza jeśli wszystkie one znajdują się na jednej stronie, to zastosowanie Ajaksa do aktualizacji magazynu danych, a następnie „odświeżenia” listy bez konieczności odświeżania strony. Po dodaniu efektu zanikania kolorów można uzyskać nieco elegancji bez konieczności dodawania dużej ilości kodu.

Zanikanie kolorów w wyniku sukcesu lub niepowodzenia Jednym z popularnych efektów Ajaksa jest zmiana lub zanikanie kolorów w celu zasygnalizowania udanej (lub nie) aktualizacji. Zwykle efekt ten jest powiązany z aktualizacją danych, ale można go użyć do obsługi dowolnej aktywności, jeśli program ma sygnalizować użytkownikom wydarzenia, na które należy zwrócić uwagę. Zanikanie polega na zmianie koloru tła elementu lub grupy obiektów od ciemniejszego do jaśniejszego i zwykle z powrotem. Efekt może obejmować różne odcienie jednego koloru; może to być nagłe wyświetlenie czerwonego tła w celu zasygnalizowania usunięcia danych lub zanikającego żółtego jako wyróżnienia informacji. Można także użyć różnych kolorów, na przykład przejścia od niebieskiego do żółtego w celu poinformowania o udanym zakończeniu zadania. Niezależnie od dokładnego działania efektu zanikanie zawsze wymaga zegarów do obsługi niezbędnej animacji. Przed zapoznaniem się z kodem potrzebnym do zaimplementowania efektu zanikania warto przypomnieć sobie działanie zegarów i animacji.

126

|

Rozdział 4. Efekty interaktywne

Jeśli uważasz, że wystarczająco dobrze rozumiesz działanie zegarów i animacji, możesz przejść do następnego punktu.

Zegary i animacje JavaScript udostępnia kilka sposobów kontrolowania animacji. Jednym z nich jest metoda setTimeout. Można ją wywołać raz, a następnie trzeba ją wyzerować, jeśli zegar ma obsługiwać kilka zdarzeń. Inna technika to metoda setInterval, która jest uruchamiana w określonych odstępach czasu do momentu jej zatrzymania. Jednak w przypadku metody setTimeout można użyć różnych parametrów funkcji zegara przy każdej iteracji i dlatego jest ona najbardziej popularnym narzędziem do tworzenia takich animacji, jak zanikanie kolorów. Metoda setTimeout przyjmuje dwa parametry: funkcję lub wyrażenie jako pierwszy i liczbę milisekund między kolejnymi wywołaniami funkcji lub wyrażenia jako drugi. Ten drugi parametr jest stosunkowo prosty, jednak pierwszy przeszedł znaczącą ewolucję w różnych wersjach języka JavaScript — od prostych zastosowań w pierwszych aplikacjach DHTML po bardziej skomplikowane w przypadku użycia w Ajaksie. Listing 4.11 przedstawia sposób używania metody setTimeout w starszych wersjach języka JavaScript. Funkcja zegara rozpoczyna odliczanie od 10 i kończy je, kiedy licznik dojdzie do zera. W każdej iteracji funkcja pobiera element item i używa jego właściwości innerHTML w celu odtworzenia danego fragmentu strony. W wywołaniu metody setTimeout funkcja zegara i wartość licznika są podawane jako pierwszy parametr, a czas do następnego wykonania — jako drugi. Proste. Listing 4.11. Nieskomplikowana funkcja zegara

10

To podejście jest proste, jednak używanie metod obiektu zamiast odrębnych funkcji powoduje, że zegar nie może przekazać wraz z metodą kontekstu obiektu jako parametru metody setTimeout. Wraz z rosnącą popularnością Ajaksa, a zwłaszcza z powodu rozwoju bibliotek takich jak Prototype, działanie funkcji setTimeout znacznie się zmieniło. Te zmiany są na tyle duże, że trudno jest dokładnie zrozumieć, jakie operacje zachodzą w kodzie. Następny punkt przedstawia zastosowanie metody setTimeout w bibliotece Prototype, a także pokazuje, jak użyć tej funkcji niezależnie od biblioteki. Pozwala to zademonstrować wpływ Ajaksa na zegary i funkcje obsługi zdarzenia timer.

Zegary ajaksowe Biblioteka Prototype zawiera metodę bind, która jest dołączona do obiektu Function poprzez właściwość prototype języka JavaScript. Krótkie przypomnienie: właściwość prototype umożliwia dołączanie nowych metod lub właściwości do podstawowej wersji obiektu w taki sposób, aby wszystkie egzemplarze tego obiektu „dziedziczyły” to rozszerzenie. Metoda bind biblioteki Prototype zwraca funkcję, która wywołuje metodę apply obiektu Function, przekazując do niej łańcuch argumentów funkcji zewnętrznej. Oryginalny kod metody bind wygląda tak: Function.prototype.bind = function() { var __method = this, args = $A(arguments), object = args.shift(); return function() { return __method.apply(object, args.concat($A(arguments))); } }

Metoda apply języka JavaScript pozwala użyć metody jednego obiektu w kontekście metody innego obiektu. Przyjmuje kontekst obiektu zewnętrznego reprezentowany jako obiekt (pierwszy parametr na liście argumentów) i przekazuje go jako pierwszy parametr. Drugi parametr to lista argumentów otrzymana za pomocą metody $A biblioteki Prototype, która zwraca tablicę obiektów, które można iterować. Ta tablica jest niezbędna przy modyfikowaniu parametrów obiektów wbudowanych, a Prototype wykonuje takie zmiany na przykład w przypadku obiektów Function czy Array. Jak metoda bind używa metody setTimeout? Zapisuje stan obiektu po każdym wywołaniu setTimeout, włączając w to wartości właściwości obiektu. Ponieważ ten stan jest zapisany, programiści używający Ajaksa nie muszą przejmować się przekazywaniem parametrów funkcji wraz z zegarem lub za pomocą zmiennej globalnej.

128

|

Rozdział 4. Efekty interaktywne

Ten mechanizm będzie potrzebny w aplikacjach przedstawionych w dalszej części książki, dlatego warto przekształcić go w funkcję i dodać do biblioteki addingajax.js. To podejście jest inne niż to zastosowane w bibliotece Prototype, ponieważ w książce potrzebne są inne zastosowania, jednak mechanizm jest podobny: funkcja wiąże kontekst obiektu z metodą wywoływaną jako funkcja obsługi zdarzeń: function aaBindEventListener(obj, method) { return function(event) { method.call(obj, event || window.event)}; }

Listing 4.12 to zmodyfikowana wersja kodu z listingu 4.11, wykorzystująca obiekty i nową funkcję aaBindEventListener. Zamiast przekazywać funkcję bezpośrednio w wywołaniu metody setTimeout, ten kod wywołuje metodę aaBindEventListener, która zwraca potrzebną funkcję. Takie rozwiązanie pozwala zachować stan obiektu, włączając w to wartość licznika, która jest obecnie właściwością obiektu. Listing 4.12. Bliższe spojrzenie na zegary ajaksowe

10

Zanikanie kolorów w wyniku sukcesu lub niepowodzenia

|

129

Powód ustawienia metody countDown obiektu Counter na null wynika z wycieku pamięci w przeglądarce Internet Explorer 6.x przy używaniu rekurencji lub techniki domknięć funkcji (wywoływania funkcji wewnątrz funkcji). Ten problem został rozwiązany w przeglądarce Internet Explorer 7, jednak programiści używający Ajaksa muszą uwzględniać działanie przeglądarki Internet Explorer 6.x dopóty, dopóki użytkownicy nie przestaną z niej korzystać. Zastosowanie instrukcji Function.call do zarządzania zegarami to ciekawa technika, choć początkowo może być nieco trudna do zrozumienia. Jest to lepsze rozwiązanie niż ustawianie zmiennych globalnych w różnych miejscach, ponieważ znacznie ułatwia zarządzanie wartościami pomiędzy kolejnymi wywołaniami zegara. Następny punkt opisuje zastosowanie zegarów do tworzenia chwilowych powiadomień wykorzystujących efekt zanikania.

Tworzenie chwilowych powiadomień Nie jestem pewna, dlaczego żółty stał się kolorem stosowanym w technice zanikania. Kiedy się nad tym zastanowić, nie wiadomo nawet, dlaczego efekt ten nazywany jest zanikaniem — może dlatego, że kolor zanika po rozbłyśnięciu. Efekt żółtego zanikania został po raz pierwszy użyty w witrynie 37signals (http://www.37signals.com/svn/archives/000558.php) i możliwe, że zarówno kolor, jak i nazwa techniki to po prostu wynik przyzwyczajenia. Jednak żółty to dobry wybór, ponieważ niezdolność rozróżniania kolorów w przypadku żółtego i niebieskiego koloru jest rzadsza niż w przypadku czerwonego i zielonego (ten problem dotyka około 8 procent osób, choć dokładne wyniki nie są znane). Jednak nawet w przypadku osób całkowicie niewrażliwych na kolory zanikanie jest zauważalne jako błysk związany ze zmianą nasycenia, a nie koloru. Technika zanikania opiera się na zegarach, a polega na przejściu przez zestaw odcieni (od jaskrawego do stonowanego danej barwy) i zmianie koloru tła elementu w każdej iteracji. Obecnie używanych jest wiele odmian tego efektu, włączając w to te, które przechodzą od jednego koloru do innego i nie są ograniczone do żółtej barwy. Technika zanikania prawdopodobnie nie jest najbardziej zaawansowanym efektem Ajaksa, jednak jej implementacja nie jest prosta, jeśli programista nie używa stałej tablicy z wartościami kolorów. W przypadku bardziej uniwersalnego zanikania w każdej iteracji obejmującej blednięcie koloru aplikacja pobiera kolor tła, przetwarza dwuznakowy łańcuch z heksadecymalną wartością czerwieni, błękitu i zieleni, przekształca ten łańcuch na wartość liczbową, modyfikuje tę wartość na potrzeby najbliższej zmiany, a następnie przekształca ją ponownie na łańcuch. Mając wartość początkową i końcową, aplikacja musi obliczyć zmianę odcieni między poszczególnymi krokami, zachować te wartości i użyć ich do dostosowania koloru. Nie ma metody, która pozwalałaby na utworzenie dyskretnej i dostępnej wersji zanikania, ponieważ efekt ten to wskazówka wizualna. Jednak zanikanie to bardziej dodatek niż konieczność — o wystąpieniu zdarzenia powinny informować inne efekty na stronie. Niestety, takie drugorzędne wskazówki zwykle nie są uwzględniane przez programy odczytujące tekst z ekranu. Rozdział 7. opisuje niektóre techniki zarządzania efektami wizualnymi i dynamicznymi pod kątem takich programów.

130

|

Rozdział 4. Efekty interaktywne

Ostatnia aplikacja w tym rozdziale łączy w sobie przedstawione wcześniej przykłady. Strona zawiera formularz z przeznaczonym na komentarz polem textarea oraz dwoma przyciskami. Jeden z nich służy do wyświetlania podglądu, a drugi — zapisywania danych. Jeśli obsługa skryptów jest włączona, w momencie zapisywania komentarza program nie wysyła danych za pomocą tradycyjnego przesyłania formularza, ale wywołuje metodę Ajaksa. W tym przykładzie wywoływany program nie wykonuje żadnych operacji na danych, a jedynie wyświetla komentarz, kiedy użytkownik kliknie przycisk Zapisz, a obsługa skryptów jest włączona. Jeśli skrypty nie są obsługiwane lub jeśli użytkownik kliknie przycisk Podgląd, aplikacja wyświetli komentarz w przeglądarce:

Ten przykład jest uproszczony. W innych aplikacjach warto zastosować sekwencje ucieczki dla danych, aby upewnić się przed aktualizacją bazy, że zapisywane informacje są bezpieczne. W przeciwnym razie programista naraża się na atak polegający na „wstrzyknięciu” szkodliwego kodu SQL. Używany arkusz stylów nie jest zbyt skomplikowany, jednak dodaje nieco elegancji i kolorów, co urozmaica stronę: #list { border: 1px solid #ccc; margin: 20px; padding: 10px; width: 600px; } .comment { margin: 10px 0; width: 400px; } form, #preview { border: 1px solid #cc0; margin: 20px; padding: 10px; width: 600px; }

Zaskakujące, jak krótka jest strona internetowa po usunięciu z niej arkusza stylów i kodu JavaScript:

Bieżące komentarze:

Komentarze

Komentarz:

Listing 4.13 przedstawia zawartość pliku JavaScript comments.js. Ponieważ dane są aktualizowane, wywołanie Ajaksa używa metody POST, a nie GET. Po zapisaniu komentarza jest on umieszczany na liście komentarzy, a o jego dodaniu informuje efekt żółtego zanikania. Ten przykład używa tradycyjnego, żółtego koloru, rozpoczynając od wartości #ffff00, a kończąc na białym tle — #ffffff. Ponadto skrypt używa techniki wiązania z biblioteki Adding Ajax do zarządzania zdarzeniami zegarów. Listing 4.13. Połączenie podglądu komentarzy, metody send Ajaksa i żółtego zanikania // Zmienne globalne var commentCount = 0; var xmlhttp; function yellowColor(val) { var r="ff"; var g="ff"; var b=val.toString(16); var newval = "#"+r+g+b; return newval; } aaManageEvent(window,"load", function() { aaManageEvent(document.getElementById('save'),"click",saveComment); }); function saveComment(evnt) { // Anuluje zdarzenie evnt = evnt ? evnt : window.event; aaCancelEvent(evnt); // Tworzenie obiektu XHR if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; // Pobieranie komentarza var commentText = document.getElementById("comment").value; modText = commentText.split(/\n/).join("
"); var param = "comment=" + modText;

132

|

Rozdział 4. Efekty interaktywne

var url = 'addcomment.php?' + param; xmlhttp.open('POST', url, true);

}

// Wysyłanie komentarza xmlhttp.onreadystatechange = addComment; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(null); return false;

// Dodawanie komentarza do listy z wyróżnieniem za pomocą koloru function addComment() { if(xmlhttp.readyState == 4 && xmlhttp.status==200) { var modText=xmlhttp.responseText; var newDiv = document.createElement("div"); commentCount++; newDiv.setAttribute("id","div"+commentCount); newDiv.setAttribute("class","comment"); newDiv.innerHTML = modText; // Dodawanie obiektu do strony document.getElementById("list").appendChild(newDiv); // Uruchomienie licznika do zmiany kolorów var ctrObj = new Counter("div"+commentCount,0,255); ctrObj.countDown(); }

}

function Counter(id,start,finish) { this.count = this.start = start; this.finish = finish; this.id = id; this.countDown = function() { this.count+=25; if (this.count >= this.finish) { document.getElementById(this.id).style.background="transparent"; this.countDown=null; return; } document.getElementById(this.id).style.backgroundColor=yellowColor(this.count); setTimeout(aaBindEventListener(this,this.countDown),100); } } aaManageEvent(window,"load",function() { aaManageEvent(document.getElementById('comment'),"keyup",echoPreview)}); function echoPreview(evnt) { var commentText = document.getElementById("comment").value; modText = commentText.split(/\n/).join("
"); var previewElem = document.getElementById("preview"); previewElem.innerHTML = modText; }

Zaczynając od początku kodu: kiedy użytkownik zapisze komentarz, przesyłanie formularza zostaje wstrzymane, ponieważ to Ajax odpowiada za aktualizację. Aplikacja pobiera komentarz i przetwarza go w prosty sposób przed przesłaniem za pomocą obiektu XMLHttpRequest i metody POST. Kiedy żądanie Ajaksa zostanie prawidłowo przetworzone, aplikacja tworzy nowy element div przeznaczony na komentarz, który następnie dodaje do istniejącej listy komentarzy. Po dołączeniu elementu uruchamiany jest efekt zanikania w celu wyróżnienia dodanego komentarza. Zanikanie kolorów w wyniku sukcesu lub niepowodzenia

|

133

Rysunek 4.3 przedstawia efekt uruchomienia ostatniego przykładu. Niestety, nie potrafię się wystarczająco sprawnie posługiwać programami do wykonywania zrzutów ekranu, aby uchwycić efekt żółtego zanikania, ale omawiany przykład jest dostępny w kodzie źródłowym dołączonym do książki.

Rysunek 4.3. Podgląd, efekt zanikania i Ajax w jednym

Oczywiście, jest to uproszczone spojrzenie na współdziałanie komentarzy i aktualizacji na żywo. Jednak to rozwiązanie można łatwo zintegrować z istniejącą aplikacją, wywołując funkcje służące do obsługi komentarzy po stronie serwera. Funkcje te powinny także gwarantować, że tekst komentarza nie powoduje zagrożenia. Później komentarz można pobrać albo z takiej funkcji, albo z bazy danych, a następnie wyświetlić w odpowiednim polu. Cała operacja powinna zająć ułamek sekundy i z punktu widzenia użytkownika powinna wyglądać na natychmiastową. Co najlepsze, nie wymaga to odświeżania strony, co rozprasza uwagę. A co, jeśli obsługa skryptów jest wyłączona? Nie ma problemu — kod do standardowego zarządzania komentarzami wciąż jest częścią strony. Ta aplikacja to w pewnym sensie Ajax w kapsułce — połączenie interakcji z użytkownikiem, żądań Ajaksa, obiektów, zegarów i efektów wizualnych. Możesz sobie pogratulować — jesteś już programistą Ajaksa. Jednak nie zalecam rezygnacji z lektury pozostałej części książki.

134

|

Rozdział 4. Efekty interaktywne

ROZDZIAŁ 5.

Przestrzeń — ostateczna granica

Zarządzanie przestrzenią współczesnych stron internetowych obejmuje cztery aspekty: obszar zajmowany przez każdy element, rozmieszczenie elementów w poziomym i pionowym układzie strony, ich pozycje w warstwach strony oraz to, czy poszczególne elementy są w danej chwili widoczne. Przed pojawieniem się stylów CSS i języka JavaScript przestrzeń stron internetowych była statyczna. Można było użyć elastycznego kontenera, na przykład tabel HTML dostosowujących się do rozmiaru okna przeglądarki, jednak nie było żadnych innych możliwości. Jeśli programista używał formularza z dużą liczbą pól, mógł albo umieścić je wszystkie na jednej długiej stronie, albo rozbić formularz na wiele stron i aktualizować dane we fragmentach. Jeśli użytkownik aplikacji zrobił błąd, nie wiedział o tym do czasu przesłania formularza na serwer. Wtedy aplikacja zwykle kierowała użytkownika do nowej strony tylko po to, aby wyświetlić komunikat o błędzie. Obecnie, dzięki pewnym technologiom Ajaksa, elementy można rozmieszczać w przestrzeni i układać w warstwach, określając ich pozycję bezwzględnie. Każdy element ma cechy takie, jak: szerokość, wysokość, dopełnienie i margines, które można modyfikować. Elementy mają także obszar przycięcia (ang. clipping), który określa, jaka część obiektu jest widoczna, a ile zostanie „przycięte” (taki fragment jest niewidoczny i nie ma wpływu na układ strony wokół siebie). Jeśli atrybut display elementu ma wartość block, a nie inline, przed i po danym obiekcie dołączane są oznaczenia nowego wiersza, co powoduje, że dalsze elementy zostaną przesunięte w dół strony. Element można także całkowicie usunąć z układu strony, ustawiając atrybut display na none. Podsumowując, dzięki stylom CSS i językowi JavaScript można: • zmieniać wysokość i szerokość elementów; • zmieniać obramowanie, dopełnienie i margines elementów; • modyfikować obszar przycięcia; • układać elementy w warstwach; • przenosić i ukrywać elementy; • zmieniać sposób wyświetlania elementów, na przykład przekształcać je na wewnątrzwier-

szowe lub blokowe, a nawet usuwać z widoku.

135

Manipulowanie poszczególnymi cechami elementów jest wygodne, a połączenie takich zmian pozwala tworzyć efekty wyższego poziomu, od których zależy wiele aplikacji Ajaksa. Te efekty obejmują: • kontrolkę accordion, którą można rozwijać i zwijać na podstawie działań użytkownika; • strony z zakładkami, które w danym momencie wyświetlają pojedynczą stronę lub panel; • nakładanie (ang. overlay), które polega na umieszczaniu elementu nad resztą zawartości

strony;

• stronicowanie, które łączy przenoszenie zawartości i przycinanie jej do rozmiaru „strony”; • latające elementy (ang. fly-ins), które pojawiają się zza pewnego obszaru, na przykład kra-

wędzi strony;

• przeciąganie, które umożliwia użytkownikom aplikacji przenoszenie elementów.

W tym rozdziale przedstawione są trzy takie efekty (accordion, strony z zakładkami i nakładanie), które manipulują zarówno przestrzenią strony, jak i wyświetlaniem elementów. Poznasz także wpływ tych efektów na dostępność oraz techniki, które pozwalają go zmniejszyć. Przy okazji zobaczysz, jak umieścić efekty wysokiego poziomu w nadających się do wielokrotnego wykorzystania bibliotekach, których można użyć dla więcej niż jednej strony i aplikacji. Stosowanie innych efektów Ajaksa oszczędzających miejsce, na przykład przycinania, przeciągania czy stronicowania, jest opisane w dalszych rozdziałach.

Przestrzeń w poziomie — accordion Jednym z moich ulubionych efektów ajaksowych związanych z przestrzenią jest kontrolka accordion. Cenię ją zarówno za wygląd, jak i działanie. Efekt ten polega na tym, że kilka bloków z treścią, zwykle nazywanych panelami, jest ułożonych jeden nad drugim i ukrywanych za pomocą jednej z trzech technik: • atrybut display każdego bloku ma wartość none; • elementy są całkowicie przycięte w pionie; • wysokość każdego elementu jest ustawiona na zero.

Przy pierwszym wyświetleniu kontrolki accordion zwykle widoczny jest nagłówek (lub etykieta) każdego panelu wraz z ikoną informującą, że użytkownik musi kliknąć daną nazwę, aby rozwinąć (lub zwinąć) dany panel. W kodzie poszczególne etykiety i panele to dwa oddzielne, ale powiązane ze sobą elementy, które mogą, ale nie muszą znajdować się we wspólnym kontenerze. Wszystkie panele i etykiety mogą być połączone i zawarte w ogólnym kontenerze. Accordion umożliwia wydajne wykorzystanie przestrzeni, zwłaszcza kiedy programista użyje go do obsługi długiego, wieloczęściowego formularza. Ponadto łatwo utworzyć alternatywę dla tego efektu, jeśli użytkownik wyłączy obsługę języka JavaScript — przy wyłączonych skryptach wszystkie panele są rozwinięte po wczytaniu strony. Rysunek 5.1 przedstawia typową kontrolkę accordion z rozwiniętym pierwszym i trzecim panelem, podczas gdy drugi jest zwinięty. W dalszej części niniejszego punktu opisuję, jak utworzyć tę aplikację. 136

|

Rozdział 5. Przestrzeń — ostateczna granica

Rysunek 5.1. Efekt accordion obejmujący trzy bloki

Tworzenie efektu Najprostszym sposobem rozwijania paneli jest zastosowanie właściwości display stylów CSS. Ustawienie atrybutu display na block powoduje wyświetlenie panelu i przy okazji przenosi pozostałą część zawartości strony w dół, aby zrobić miejsce na rozwijany obiekt. Ustawienie tego atrybutu na none usuwa blok z widoku, a elementy znajdujące się poniżej są przenoszone w górę, aby zapełnić puste miejsce. Accordion może mieć wskaźniki na pasku tytułu każdego bloku, określające działanie kontrolki po kliknięciu danego nagłówka. Najczęściej jest to znak plus (+), oznaczający, że można rozwinąć ukryte dane, oraz znak minus (–), informujący, że treść można ukryć. W niektórych kontrolkach accordion nie ma wskaźnika wizualnego. Programista zakłada wtedy, że użytkownicy potrafią „intuicyjnie” wykryć, iż mogą bezpośrednio kliknąć etykiety kontrolki accordion, aby kontrolować efekt. Jeśli kontekst nie udostępnia wystarczających informacji, lepiej jest użyć bezpośredniego wskaźnika informującego o ukrytej zawartości.

Accordion to grupa bloków z panelami, umieszczonych jeden na drugim. Każdy panel jest powiązany z paskiem tytułu. Styl CSS bloków z panelami jest ustawiony na display:block (jest to domyślne ustawienie elementów div), dlatego jeśli obsługa skryptów jest wyłączona, po wczytaniu strony bloki będą wyświetlane jako całkowicie rozwinięte. Listing 5.1 przedstawia stronę internetową składającą się z trzech poziomych bloków, które stanowią fragmenty formularza. Każdy wskaźnik rozwijania i ukrywania kontrolki accordion

Przestrzeń w poziomie — accordion

|

137

znajduje się w odnośniku hipertekstowym, a do uchwytu zdarzenia onclick każdego odnośnika przypisana jest funkcja, do której aplikacja przekazuje jako parametr id danego bloku. W dalszej części rozdziału, kiedy kod kontrolki accordion zostanie umieszczony w bibliotece, co ułatwia jego powtórne wykorzystanie, uchwyty zdarzeń onclick zostaną usunięte, dzięki czemu elementy strony nie będą zawierały skryptów. Jednak na razie ich obecność nie wpływa na dostępność ani poprawność, a jedynie umożliwia ponowne użycie kodu. Listing 5.1. Strona internetowa z trzema blokami kontrolki accordion

+

-

Imię i nazwisko:

Imię i nazwisko

Imię:
Nazwisko:

+

-

Adres

Adres

Ulica i numer:
Miejscowość:
Województwo:


138

|

Rozdział 5. Przestrzeń — ostateczna granica

+

-

Opcje

Opcje

Opcja 1 Opcja 2Opcja 3Opcja 4

id="opt1" id="opt2" id="opt3" id="opt4"

/> />

Inne dane lub informacje.

Ponieważ aplikacja działa wyłącznie na podstawie skryptów, kusi, aby usunąć odnośniki z zakładek kontrolki accordion i dołączyć metody obsługi zdarzenia onclick bezpośrednio do elementów div. Jednak takie postępowanie może uniemożliwić obsługę kontrolki accordion za pomocą klawiatury. Dodatkowy atrybut elementu, który pomaga w zwiększaniu dostępności, to accesskey lub, w nowszym XHTML 2.0, access. Oba te atrybuty wiążą klawisz klawiatury bezpośrednio z danym elementem. Dzięki temu użytkownik klawiatury może przejść bezpośrednio do tego elementu, używając skrótu Alt+klawisz w systemie Windows lub Ctrl+klawisz w systemie Mac. Niestety, te skróty mogą powodować konflikt ze skrótami przeglądarki, użytkownika, a nawet narzędzi pomocniczych.

Aplikacja modyfikuje właściwość display stylów CSS panelu, ustawiając ją albo na block, albo na none. Zależy to od tego, czy blok ma zostać rozwinięty czy ukryty. Pozostała część arkusza stylów CSS używanego dla strony z listingu 5.1 jest przedstawiona poniżej. Warto zwrócić uwagę na specyficzny dla CSS2 selektor (type="checkbox"), który służy do odróżnienia pól tekstowych od pól wyboru. Choć ten selektor działa w większości docelowych przeglądarek, Internet Explorer ignoruje go, a pola wyboru są wyświetlane w domyślnym trybie blokowym. .name { margin: 0; padding: 0; } .label { background-color: #003; border-bottom: 1px solid #fff;

Przestrzeń w poziomie — accordion

|

139

border-right: 1px solid #fff; color: #fff; margin: 0 20px; padding: 10px; text-align: center; width: 400px; } .label a { color: #fff; text-decoration: none; } .elements { background-color: #CCD9FF; margin: 0 20px; padding: 0px; width: 420px; overflow: hidden; } .control { display: none; float: right; } legend { display: none; } input { display: block; margin-bottom: 5px; } input[type="checkbox"] { display: inline; }

W wyjściowych ustawieniach arkusza stylów elementy wskaźników rozwijania i zwijania są ukryte, a wszystkie bloki są widoczne. Wynika to z tego, że jeśli użytkownik odwiedzający stronę wyłączył obsługę skryptów lub używa narzędzi, które nie obsługują języka JavaScript, wskaźniki zostaną ukryte, a wszystkie elementy formularza będą domyślnie widoczne. Kod JavaScript służący do obsługi kontrolki accordion (accordion1.js) jest dość prosty. Ponieważ aplikacja używa funkcji obsługi zdarzenia onclick wewnątrzwierszowo, wystarczy zmienić atrybut display wskaźnika i bloku: aaManageEvent(window,"load", function() { document.getElementById('one').style.display='none'; document.getElementById('two').style.display='none'; document.getElementById('three').style.display='none'; document.getElementById('oneplus').style.display='block'; document.getElementById('twoplus').style.display='block'; document.getElementById('threeplus').style.display='block'; }); // Rozwijanie bloku kontrolki accordion function expand(newItem) { document.getElementById(newItem).style.display='block'; document.getElementById(newItem + 'plus').style.display='none';

140

|

Rozdział 5. Przestrzeń — ostateczna granica

document.getElementById(newItem + 'negative').style.display='block'; } // Zwijanie bloku kontrolki accordion function collapse(newItem) { document.getElementById(newItem).style.display='none'; document.getElementById(newItem + 'plus').style.display='block'; document.getElementById(newItem + 'negative').style.display='none'; }

Funkcja obsługi zdarzenia load obiektu window to funkcja anonimowa, która zwija wszystkie bloki (ustawia atrybut display na none) i wyświetla wskaźniki informujące o możliwości rozwinięcia. Dwie dodatkowe funkcje, expand i collapse, odpowiednio rozwijają i zwijają blok, którego identyfikator otrzymają. Ponadto funkcja expand ukrywa wskaźnik rozwijania i wyświetla wskaźnik zwijania, a funkcja collapse wykonuje odwrotne operacje. Wypróbuj aplikację samodzielnie, a prawdopodobnie zrozumiesz, dlaczego technika ta jest tak popularna — na tyle, że jest kilka sposobów implementacji tego efektu, a niektóre z nich obejmują animację opartą na właściwości height stylów CSS, co ilustruje następny podpunkt.

Accordion z efektem przejścia Listing 5.1 przedstawia kontrolkę accordion bez efektu przejścia pomiędzy wyświetleniem a ukryciem bloku. Następna technika dodaje przejście pomiędzy stanem „ukryty” a „w pełni widoczny”. Jednak nie można użyć tu ustawienia display: none stylów CSS, ponieważ określa ono tylko, czy element jest widoczny, czy nie, bez stanów pośrednich. Aby utworzyć płynne przejście, trzeba użyć innej właściwości CSS, na przykład wysokości lub przycięcia, a nawet połączenia przycięcia i przesuwania, zwiększając widoczny obszar wraz z „przenoszeniem” go na odpowiednie miejsce. W przypadku kontrolki accordion najprostszym rozwiązaniem jest zastosowanie atrybutu height stylów. Aby utworzyć efekt accordion przy użyciu atrybutu height, aplikacja powinna określać wysokość każdego panelu, a następnie odpowiednio zmniejszać ją lub zwiększać dla każdego bloku. Inne rozwiązanie polega na sprawdzaniu wysokości elementów tuż przed ich ustawieniem na zero w czasie pierwszego wczytywania strony. Ja preferuję to drugie podejście, ponieważ przy jego zastosowaniu kontrolki accordion mogą być tak długie, jak wymaga tego ich zawartość, bez narażania się na ograniczenia związane z wysokością. Jednak pobieranie wysokości elementów może sprawiać problemy.

Pobieranie wysokości i szerokości elementów Sprawdzanie wysokości elementu po ustawieniu jego wyjściowej wielkości za pomocą wewnątrzwierszowego atrybutu stylu jest proste — wystarczy uzyskać dostęp do właściwości style.height elementu. Można to zrobić bezpośrednio albo za pomocą metody zalecanej przez W3C — getProperty: var height = elem.style.height; var height = elem.style.getProperty('height');

Ponieważ jednak w omawianej aplikacji unikam stylów wewnątrzwierszowych, należy zastosować inne rozwiązanie: uzyskać dostęp do obliczanej wysokości elementu poprzez obliczaną właściwość stylu.

Przestrzeń w poziomie — accordion

|

141

Jedną z technik określania obliczanej wartości stylu w sposób działający w różnych przeglądarkach można znaleźć w bibliotece Prototype Ajaksa. Metoda getStyle obiektu Element z tej biblioteki to dość złożona funkcja, która musi uwzględniać różnice między przeglądarkami w zakresie obsługi stylów. Obsługi wymagają elementy pływające i różne wartości zwracane, na przykład auto, nie wspominając o tym, co się stanie w niektórych przeglądarkach po zmianie układu z fixed na relative lub absolute albo w przypadku zastosowania prawdopodobnie najbardziej kłopotliwego ustawienia stylów, opacity: Element.Methods = { ... getStyle: function(element, style) { element = $(element); if (['float','cssFloat'].include(style)) style = (typeof element.style.styleFloat != 'undefined' ? 'styleFloat' : 'cssFloat'); style = style.camelize(); var value = element.style[style]; if (!value) { if (document.defaultView && document.defaultView.getComputedStyle) { var css = document.defaultView.getComputedStyle(element, null); value = css ? css[style] : null; } else if (element.currentStyle) { value = element.currentStyle[style]; } } if((value == 'auto') && ['widht','height'].include(style) && (element. getStyle('display') != 'none')) value = element['offset'+style.capitalize()] + 'px'; if (window.opera && ['left', 'top', 'right', 'bottom'].include(style)) if (Element.getStyle(element, 'position') == 'static') value = 'auto'; if(style == 'opacity') { if(value) return parseFloat(value); if(value = (element.getStyle('filter') || '').match(/alpha\(opacity=(.*)\)/)) if(value[1] return parseFloat(value[1]) / 100; return 1.0; } return value == 'auto' ? null : value; }, ... };

W tym przypadku nie jest potrzebny aż tak skomplikowany kod. Aby określić wysokość elementu, można użyć albo właściwości clientHeight, albo offsetHeight. Niestety, wadą tych właściwości jest to, że żadna z nich nie jest standardowym ele-

mentem W3C ani nie jest zgodna z technicznymi zaleceniami (obie pochodzą z przeglądarki Internet Explorer). Ponadto obie właściwości mogą zwracać różne wartości w zależności od przeglądarki, ustawień CSS danego elementu i tego, czy przeglądarka działa w trybie standardowym czy w trybie quirks.

Wartość właściwości clientHeight elementu to jego wysokość pomniejszona o margines i obramowanie, które znajdują się poza elementem. Wartość offsetHeight powinna zawierać wysokość elementu, włączając w to margines i obramowanie. Niestety, jednym z problemów (który wkrótce zobaczysz) przy dostępie do elementów za pomocą funkcji takich jak getElementsByTagName, a nie poprzez identyfikatory poszczególnych elementów, jest to, że właściwość clientHeight zwraca zero. Jednak właściwość offsetHeight wciąż działa prawidłowo, zwracając pełną wysokość danego elementu. Uwzględniając to, że potrzebna jest całkowita 142

|

Rozdział 5. Przestrzeń — ostateczna granica

wysokość elementów, można dojść do wniosku, że warto użyć tej ostatniej właściwości. Ponieważ jest ona obsługiwana w przeglądarkach docelowych używanych w tej książce, to właśnie ona zostanie wykorzystana w aplikacji. Większość osób do upraszczania żądań Ajaksa zaleca używanie bibliotek takich jak Prototype. Moim zdaniem to sposób obsługi metod modelu DOM i efektów w różnych przeglądarkach usprawiedliwia stosowanie tych bibliotek. Ajaksowe metody kierowania żądań do usług są dość proste w porównaniu z zarządzaniem modelem DOM.

Kończenie przejścia Elementy strony w wersji z kontrolką accordion z przejściem nie zmieniają się. Nowy jest tylko dołączany plik z kodem JavaScript, accordion2.js:

Arkusz stylów także nie wymaga modyfikacji. Jedyny komponent aplikacji, który wymaga istotnych zmian, to kod JavaScript przedstawiony na listingu 5.2. Funkcja obsługi zdarzenia load obiektu window wywołuje inną funkcję, setHeight, aby pobrać obliczaną wysokość każdego bloku i przypisać ją, według nazwy bloku, do tablicy asocjacyjnej. Ta ostatnia funkcja ustawia następnie wyjściową wysokość każdego elementu na zero. Listing 5.2. Kod JavaScript do zarządzania efektem accordion z przejściem // Globalna tablica heightObjs na obliczoną wysokość var heightObjs = new Array(); // Pobieranie obliczonej wysokości i ustawianie jej na zero function setHeight(objName) { var obj = document.getElementById(objName); var height = aaGetStyle(obj,'height'); heightObjs[objName] = Math.round(parseFloat(height.substr(0,height.length-2))); obj.style.height="0"; } // Przygotowywanie paneli aaManageEvent(window,"load", function() { setHeight('one'); setHeight('two'); setHeight('three'); document.getElementById('oneplus').style.display='block'; document.getElementById('twoplus').style.display='block'; document.getElementById('threeplus').style.display='block'; }); // Animowane rozwijanie elementu function expand(newItem) { document.getElementById(newItem + 'plus').style.display='none'; document.getElementById(newItem + 'negative').style.display='block'; var currentItem = document.getElementById(newItem); // Określanie przyrostu przez dzielenie obliczonej // wysokości przez liczbę powtórzeń pętli - 20 var incr = heightObjs[newItem] / 20; for (var i=0; i < 20; i++) { var val = (i+1) * incr;

Przestrzeń w poziomie — accordion

|

143

var func = "adjustItem("+val+",'"+newItem+"')"; setTimeout(func,(i+1)*30); } } // Animowane ukrywanie elementu function collapse(newItem) { document.getElementById(newItem + 'plus').style.display='block'; document.getElementById(newItem + 'negative').style.display='none'; var currentItem = document.getElementById(newItem); // Określanie pomniejszenia przez dzielenie obliczonej // wysokości przez liczbę powtórzeń pętli - 20 var decr = heightObjs[newItem] / 20; for (var i=0; i<20; i++) { var val = heightObjs[newItem]-(decr*(i+1)); var func = "adjustItem("+val+",'"+newItem+"')"; setTimeout(func,(i+1)*30); } } // Dostosowywanie poszczególnych elementów function adjustItem(val, newItem) { document.getElementById(newItem).style.height=val + "px"; }

Funkcje rozwijające i zwijające elementy nadal rozwijają i zwijają panele, jednak obecnie każda z nich używa pętli do zwiększania lub zmniejszania wysokości, sterując wielkością widocznego fragmentu. Rozmiar zmiany jest określany przez podzielenie całkowitej wysokości elementu przez liczbę powtórzeń pętli — w tym przypadku jest to 20. Za zmianę wysokości odpowiada odrębna funkcja, adjustHeight. Stopniowe zmiany wysokości są obsługiwane za pomocą zegarów języka JavaScript, co daje efekt animacji. Ponieważ w tym przypadku nie trzeba zachowywać kontekstu obiektu w funkcjach obsługi zdarzeń, co było konieczne w animacjach opisanych w rozdziale 4., aplikacja nie musi używać wyspecjalizowanej funkcji aaBindEventListener z biblioteki addingajax.js. Wystarczy użyć wygenerowanego łańcucha znaków, który zawiera nazwę funkcji i obliczone parametry. Wysokość można określić przez pobranie wartości wysokości (usuwając jednostki — px). Następnie wartość tę należy przekazać do funkcji parseFloat, która gwarantuje, że wysokość zostanie zinterpretowana jako liczba. Na zakończenie wartość jest zaokrąglana do najbliższej liczby całkowitej. Po dodaniu tego kodu kliknięcie wskaźnika rozwijania lub zwijania spowoduje animowane otwarcie lub zamknięcie panelu, co dodaje nieco elegancji, choć niekoniecznie zwiększa ogólną wydajność efektu. Po przyjrzeniu się „domowej” wersji efektu accordion warto zobaczyć, jak inni programiści udostępniają tę samą funkcjonalność.

Używanie gotowych kontrolek accordion Zamiast tworzyć własny kod kontrolki accordion, można użyć gotowego efektu z zewnętrznej biblioteki Ajaksa. Jedną z takich bibliotek jest Accordion, dostępna wraz z biblioteką Rico, opisaną w rozdziale 3.

144

|

Rozdział 5. Przestrzeń — ostateczna granica

Efekt accordion biblioteki Rico różni się od wersji z poprzedniego punktu, ponieważ nie udostępnia wskaźników rozwijania i zamykania. Ponadto panele w kontrolce accordion biblioteki Rico nie mogą mieć ramek ani dopełnienia. Jeśli dopełnienie jest potrzebne, trzeba użyć zagnieżdżonego elementu div lub czegoś podobnego do elementu fieldset użytego w dwóch poprzednich przykładach. Relacje między elementami muszą być także zgodne z określonym wzorcem układu strony, na której obszary z treścią znajdują się w ogólnym kontenerze. Aby utworzyć kontrolkę accordion z biblioteki Rico, trzeba dołączyć do strony internetowej biblioteki Rico i Prototype. Poniższa składnia tworzy podstawową kontrolkę accordion biblioteki Rico bez żadnych opcji: new Rico.Accordion( $('accordionDiv'));

Jako drugi parametr można przekazać pewne opcje. Poniższy fragment pochodzi z kodu biblioteki: this.options = { expandedBg hoverBg collapsedBg expandedTextColor expandedFontWeight hoverTextColor collapsedTextColor collapsedFontWeight hoverTextColor borderColor panelHeight onHideTab onShowTab onLoadShowTab }

: : : : : : : : : : : : : :

'#63699c', '#63699c', '#6b79a5', '#ffffff', 'bold', '#ffffff', '#ced7ef', 'normal', '#ffffff', '#1f669b', 200, null, null, 0

Każdą z tych domyślnych opcji można przesłonić. Najczęściej postępuje się tak z opcją panelHeight, ponieważ panele muszą być wystarczająco wysokie, aby móc pomieścić treść (przewijanie w pionie jest niewskazane). Aby jak najlepiej dopasować ustawienia do istniejących paneli, można użyć wysokości 200px, a kolor tła nagłówka należy przekazać do używanego obiektu. Choć domyślnie biblioteka Rico używa niebieskiego, w aplikacji użyty zostanie inny odcień tej barwy. Ponadto trzeba dopasować do poprzedniego przykładu wielkość i kolor czcionki: new Rico.Accordion( $('accordionDiv'), {expandedBg : '#003', collapsedBg : '#003', expandedFontWeight : 'normal', collapsedTextColor : '#fff', });

Aby dopasować rozwiązanie do nowej struktury elementów, trzeba dostosować używany arkusz stylów CSS: #accordionDiv { margin: 0 20px; width: 400px; } .name { background-color: #003; border-bottom: 1px solid #fff;

Przestrzeń w poziomie — accordion

|

145

color: #fff; padding: 10px 0px; text-align: center; width: 400px; } .elements { background-color: #CCD9FF; } input { display: block; margin-bottom: 5px; } input[type="checkbox"] { display: inline; }

Ponieważ biblioteka Prototype udostępnia obsługę zdarzeń, aplikacja nie wymaga żadnej innej biblioteki do utworzenia efektu accordion po wczytaniu strony. Listing 5.3 zawiera kompletny kod strony internetowej, włączając w to kod JavaScript tworzący kontrolkę accordion i używający obsługi zdarzeń z biblioteki Prototype. Listing 5.3. Efekt accordion przy użyciu biblioteki Rico

Imię i nazwisko:

146

|

Rozdział 5. Przestrzeń — ostateczna granica

Imię i nazwisko

Imię:
Nazwisko:

Adres

Adres

Ulica i numer:
Miejscowość:
Województwo:

Opcje

Opcje

Opcja 1 Opcja 2Opcja 3Opcja 4

type="checkbox" name="opt1" id="opt1" type="checkbox" name="opt2" id="opt2" type="checkbox" name="opt3" id="opt3" type="checkbox" name="opt4" id="opt4"

/> />

Inne dane i informacje.

Kontrolka accordion biblioteki Rico wyświetlana jest z jednym otwartym blokiem. Biblioteka obsługuje ten efekt, otwierając nowy panel w momencie zamykania innego, i nie manipuluje poszczególnymi blokami niezależnie od innych. Kliknięcie paska tytułu innego panelu powoduje zamknięcie otwartego, a następnie otwarcie nowego. Listing 5.3 dobitnie pokazuje zmniejszenie się ilości kodu, co jest korzystne. Jednak ta wygoda ma pewną cenę: trzeba zaakceptować działanie gotowego efektu, włączając w to wyjściowy otwarty panel, a także jednoczesne otwieranie i zamykanie. Gotowy efekt nie umożliwia także określania wysokości poszczególnych paneli. Jeśli programista chce używać własnego efektu accordion, a jednocześnie zachować wygodę związaną z korzystaniem z gotowej biblioteki, może zastanowić się nad umieszczeniem w bibliotece własnego kodu. Opisuje to następny punkt.

Przestrzeń w poziomie — accordion

|

147

Inna istotna różnica pomiędzy przedstawionymi aplikacjami polega na tym, że efekt oparty na bibliotekach Prototype i Rico nie będzie działał dla stron w formacie XHTML. Dlatego nagłówek DOCTYPE strony to HTML 4.01 Strict, a strona jest przesyłana jako dokument HTML.

Umieszczanie kodu efektu accordion w bibliotece Efekt accordion jest popularny nie tylko z powodu wydajnego zarządzania przestrzenią i prostoty. Jest także łatwy do przekształcenia w kod nadający się do wielokrotnego wykorzystania. Najpierw jednak warto przyjrzeć się utworzonym aplikacjom i poszukać obszarów, które można usprawnić. Jedną z pierwszych zmian w kodzie jest wskaźnik rozwijania i ukrywania. Zamiast znaku plus lub minus można użyć ikony trójkąta wskazującego w dół po rozwinięciu panelu i w prawo po jego ukryciu. W większym stopniu przypomina to funkcjonalność znaną z aplikacji stacjonarnych. Skoro zwykle nagłówki w kontrolkach accordion mają ciemny kolor, białe trójkąty z przezroczystym tłem to najlepszy wybór. Rysunki są w formacie GIF, ponieważ przeglądarki Internet Explorer 6.x nie obsługują przezroczystości obrazów w formacie PNG. Zmienić trzeba także strukturę efektu. Grupowanie zastosowane w Rico jest dużo lepsze niż próba połączenia elementów na podstawie nazw identyfikatorów. Potrzebne fragmenty kontrolki accordion to ogólny kontener i panele składające się z etykiety, która przyjmuje zdarzenia, oraz rozwijanej i ukrywanej treści. Podobnie jak w Rico struktura kontrolki accordion biblioteki Adding Ajax składa się z ogólnego kontenera dla każdego panelu. Taki kontener zawiera etykietę i treść, a kliknięcie etykiety powoduje rozwinięcie lub ukrycie go przy użyciu omówionej wcześniej techniki animacji. Jedną z popularnych technik wyszukiwania elementów jest programowe oznaczenie ich za pomocą atrybutu class. Pozwala to nie tylko sformatować obiekty wizualnie, ale także „oznaczyć”, które elementy strony są używane w danym efekcie. Można pójść o krok dalej i dodać klasy CSS dla etykiet kontrolki accordion. Te etykiety różnią się od siebie tylko tym, czy dany panel jest rozwinięty czy ukryty. Każdy pasek jest niemal taki sam, a odmienny jest wyłącznie rysunek tła, za co odpowiada wyróżniony kod: #accordionDiv { margin: 0 20px; width: 400px; } .nameExpanded, .nameCollapsed { background-position: center right; background-repeat: no-repeat; background-color: #003; border-bottom: 1px solid #fff; color: #fff; padding: 10px 0; text-align: center; background-image: url('expanded.gif'); } .nameCollapsed { background-image: url('collapsed.gif'); cursor: pointer;

148

|

Rozdział 5. Przestrzeń — ostateczna granica

} .nameExpanded { background-image: url('expanded.gif'); cursor: pointer; } .elements { background-color: #CCD9FF; overflow: hidden; } input { display: block; margin-bottom: 5px; } input[type="checkbox"] { display: inline; }

Strona internetowa jest podobna do tej użytej w przykładzie zastosowania biblioteki Rico, jednak tym razem ma nagłówek DOCTYPE XHTML i można ją przesłać jako dokument w tym formacie. Przykład korzystający z biblioteki Rico nie jest zależny od stosowania klas, co ma miejsce w przypadku biblioteki Adding Ajax:

Imię i nazwisko:

Imię i nazwisko

Imię:
Nazwisko:

Adres

Przestrzeń w poziomie — accordion

|

149

Adres

Ulica i numer:
Miejscowość:
Województwo:

Opcje

Opcje

Opcja 1 Opcja 2Opcja 3Opcja 4

type="checkbox" name="opt1" id="opt1" type="checkbox" name="opt2" id="opt2" type="checkbox" name="opt3" id="opt3" type="checkbox" name="opt4" id="opt4"

/> />

Inne dane i informacje.

Po pierwszym wczytaniu strony domyślną klasą etykiet paneli jest nameCollapsed, a wszystkie bloki są ukryte. Listing 5.4 zawiera kod JavaScript zarządzający bibliotecznym efektem accordion. Przykład oparty na bibliotece Rico nie zależał od atrybutu class, natomiast zależy od niego kod efektu accordion biblioteki Adding Ajax. Listing 5.4. Kod JavaScript z elementami kontrolki accordion o specyficznych klasach // Przygotowanie elementów kontrolki accordion aaManageEvent(window,"load", function() { var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { // Konfigurowanie kliknięcia paska tytułu if (divs[i].className == 'nameCollapsed') { aaManageEvent(divs[i],'click',Accordion.expandOrCollapse); // Przypisanie wysokości jako właściwości niestandardowej // i zwinięcie elementu } else if (divs[i].className == 'elements') { // IE 6.x obsługuje elementy zwrócone przez funkcję getElementsByTagName // w inny sposób, dlatego clientHeight nie działa; w zamian // użyto funkcji offsetHeight

150

|

Rozdział 5. Przestrzeń — ostateczna granica

var height = divs[i].offsetHeight; divs[i].height = height; if (divs[i].id == "") divs[i].id = "div" + i; divs[i].style.height = "0"; } } }); // Zarządzanie kontrolką accordion var Accordion = { // Dostosowanie wysokości adjustItem : function(val, newItem) { aaElem(newItem).style.height=val + "px"; }, // Sprawdzanie, czy panel należy rozwinąć czy ukryć expandOrCollapse : function (evnt) { evnt = evnt ? evnt : window.event; var target = evnt.target ? evnt.target : evnt.srcElement; if (target.className == 'nameCollapsed') Accordion.expand(target); else Accordion.collapse(target); }, // Rozwijanie panelu expand : function(target) { target.className = 'nameExpanded'; // Zmiana sygnału var children = target.parentNode.childNodes; var panel; for (var i = 0; i < children.length; i++) { if (children[i].className == 'elements') { panel = children[i]; break; } } var height = panel.height; // Obliczanie przyrostu przez podzielenie wysokości przez // liczbę iteracji pętli - 20 var incr = height / 20; for (var i=0; i < 20; i++) { var val = (i+1) * incr; var func = "Accordion.adjustItem("+val+",'"+ panel.id +"')"; setTimeout(func,(i+1)*30); } }, // Zwijanie panelu collapse : function (target) { target.className = 'nameCollapsed'; // Wyszukiwanie panelu var children = target.parentNode.childNodes; var panel; for (var i = 0; i < children.length; i++) { if (children[i].className == 'elements') { panel = children[i]; break; } } var height = panel.height;

Przestrzeń w poziomie — accordion

|

151

// Obliczanie pomniejszenia przez podzielenie wysokości przez // liczbę iteracji pętli - 20 var decr = height / 20; for (var i=0; i < 20; i++) { var val = height-(decr*(i+1));; var func = "Accordion.adjustItem("+val+",'"+ panel.id +"')"; setTimeout(func,(i+1)*30); } } };

Analizując kod od początku: do każdego elementu o klasie nameCollapsed przypisywana jest funkcja obsługi zdarzenia click w postaci metody expandOrCollapse obiektu Accordion. Ponadto po wczytaniu obliczana jest właściwość height elementu na podstawie jego bieżącej wysokości, a następnie aplikacja ustawia tę wysokość na zero w celu ukrycia panelu. Uzyskana wartość jest przypisywana do niestandardowej właściwości height. Zwykle w Ajaksie właściwość height jest albo częścią specyfikacji klasy obiektu, albo jest dołączana za pomocą właściwości prototype. Jednak całkowicie poprawne jest przypisywanie niestandardowych właściwości bezpośrednio do poszczególnych obiektów za pomocą kodu JavaScript. Jedyne ryzyko polega na tym, że jeden egzemplarz obiektu może mieć tę właściwość, a inne — nie. W tej aplikacji jest to niemożliwe. Przypisywanie niestandardowych właściwości bezpośrednio do egzemplarza może wydłużać czas przetwarzania. Silniki przetwarzające skrypty najpierw szukają właściwości w oryginalnej definicji obiektu, następnie w kolekcji prototype obiektu, a dopiero na końcu w egzemplarzu obiektu.

W obiekcie Accordion metoda expandOrCollapse pobiera element target zdarzenia click, a jeśli klasa tego elementu to nameCollapsed, wywołuje metodę expand. W przeciwnym razie wywoływana jest metoda collapse. Te metody zmieniają klasę etykiety, dzięki czemu widoczna w tle „strzałka” odzwierciedla stan panelu. Kod uzyskuje dostęp do etykiety kontrolki accordion i przechodzi po elementach podrzędnych do czasu wykrycia obiektu klasy elements. Jest to panel, który zostaje następnie stopniowo rozwinięty lub zwinięty. Rozwijanie panelu w pionie odbywa się do momentu wyświetlenia całej treści. Dzięki nowej bibliotece do obsługi kontrolki accordion elementy o odpowiednich klasach udostępniają wygląd i działanie tej kontrolki po wczytaniu strony. Nie wymaga to pracy autora strony internetowej, który musi jedynie użyć odpowiednich klas dla danych elementów — programista nie musi modyfikować kodu JavaScript. Podsumowując kolejne etapy:

1. Obiekt Accordion zawiera wszystkie potrzebne funkcje. 2. Po wczytaniu strony do wszystkich elementów div o klasie nameCollapsed przypisywana jest funkcja obsługi zdarzenia onclick, która kontroluje działanie kontrolki.

3. Wszystkie panele są w pełni rozwinięte w czasie wczytywania strony, dzięki czemu informacje są dostępne w przypadku, kiedy użytkownik wyłączył obsługę skryptów, a ponadto umożliwia to określenie wysokości każdego panelu.

4. Po określeniu wysokości każdego panelu uzyskana wartość jest przypisywana do obiektu reprezentującego dany element.

152

|

Rozdział 5. Przestrzeń — ostateczna granica

5. Następnie aplikacja zwija wszystkie panele. 6. Po kliknięciu etykiety panelu zmienia się jego klasa, a wygląd etykiety odzwierciedla stan panelu.

7. Aplikacja przechodzi po wszystkich elementach div kontenera nadrzędnego klikniętej etykiety, dopóki nie znajdzie obiektu klasy elements. Jest to bieżący panel.

8. Po znalezieniu panelu aplikacja rozwija go lub ukrywa w zależności od sytuacji. Używanie nazw klas jako części efektu wiąże się z pewnym zagrożeniem: jeśli nowy programista, który nie zna zależności skryptu od specyficznych klas, rozpocznie pracę z kodem, może przypadkowo zmodyfikować nazwy klas i zepsuć efekt. Przy stosowaniu złożonych efektów Ajaksa dobra komunikacja między projektantem a programistą strony internetowej jest kluczowa. W podtrzymywaniu komunikacji wraz z upływem czasu ważna staje się także dokumentacja.

Można połączyć dwa odrębne pliki JavaScript, addingajax.js i accordion.js, jednak zwykle podstawowe pliki JavaScript powinny być tak małe jak to możliwe, a efekty wyższego poziomu warto udostępniać osobno. Plik addingajax.js zawiera mechanizm obsługi zdarzeń i funkcje Ajaksa — oba te elementy będą potrzebne dużo częściej niż efekt accordion. Skoro już jesteśmy przy odrębnych bibliotekach — co się stanie, jeśli programista połączy niestandardowe operacje z bibliotekami zewnętrznymi? Do tego miejsca panele kontrolki accordion miały zawartość statyczną; co ma zrobić programista, jeśli chce generować taką zawartość dynamicznie i wciąż używać zewnętrznej biblioteki Ajaksa, na przykład Rico?

Rozszerzanie i żądania — łączenie kontrolek accordion z wywołaniami Ajaksa Kontrolki accordion mogą być doskonałym narzędziem do udostępniania danych na żądanie. Zamiast wyświetlać kilka wierszy danych wraz z nawigacyjnymi odnośnikami do następnej i poprzedniej strony, można rozbić dane na podstawie istotnych parametrów i umieścić je w odrębnych sekcjach kontrolki accordion. Aby zapobiec wydłużaniu czasu wczytywania strony, można także pobierać dane na żądanie po pierwszym otwarciu danego panelu. Jest kilka technik umożliwiających utworzenie tego złożonego efektu, jednak każda z nich ma pewne ograniczenia. Jeśli programista chce dodać obsługę zdarzeń do „gotowego” efektu, takiego jak accordion, użycie istniejącej biblioteki może się okazać niemożliwe. Dlaczego? Ponieważ autorzy wielu bibliotek nie udostępniają kodu przechwytywanych zdarzeń ani używanych obiektów, który można by wstawić do własnego kodu i scalić z nim. W przypadku kontrolki accordion biblioteki Rico można wprowadzić pewne zmiany w czasie tworzenia obiektu. Na przykład możliwe jest dostosowanie kolorów i innych właściwości wizualnych. Jednak w dokumentacji nie ma nic o tym, które zdarzenia należy przechwycić, aby zgłosić żądanie Ajaksa, ani jak Rico zarządza obiektami w celu dodania wyników do obiektu panelu. Jedyny sposób, aby się tego dowiedzieć, polega na dogłębnej analizie kodu lub odrębnej implementacji efektów — wywołań Ajaksa na żądanie i rozwijania kontrolki accordion — i sprawdzeniu, jak samodzielnie utworzone, niestandardowe efekty współdziałają z gotowymi efektami z biblioteki Rico. Przestrzeń w poziomie — accordion

|

153

Aplikacja przedstawiona w tym punkcie używa takiego mieszanego podejścia. Funkcjonalność obejmująca pobieranie danych z serwera w momencie rozwijania bloku oparta jest na lokalnym kodzie, podczas gdy rozwijaniem paneli zarządza biblioteka Rico. Przykład zastosowania kilku bibliotek łączy aplikację Drinki z poprzednich rozdziałów z opartą na Rico aplikacją przedstawioną we wcześniejszej części tego rozdziału. Ponieważ Rico zależy od biblioteki Prototype, przykładowa aplikacja używa bezpośrednio także tej biblioteki. Po wprowadzeniu zmian kliknięcie etykiety panelu spowoduje wczytanie odpowiedniego przepisu na drinka. Jeśli przepis nie został już wcześniej pobrany, aplikacja skieruje żądanie na serwer, a następnie wyświetli zwrócony przepis na panelu. Jeśli przepis jest już dostępny, wystarczy rozwinąć panel. Inna zmiana w aplikacji polega na zarządzaniu funkcjami dającymi dostęp do przepisów na drinki. Zamiast używać globalnych funkcji i zmiennych, można wykorzystać funkcjonalność biblioteki Prototype, używając jej do pomocy w zarządzaniu obiektem Drink. W szczególności w aplikacji tej używane są dwa mechanizmy biblioteki Prototype: metoda Class.create, która wywołuje metodę initialize obiektu po jego utworzeniu, oraz metoda bindAsEventListener, wiążąca kontekst z każdą metodą. W rozdziale 4. utworzyłam niestandardową metodę do wiązania kontekstu obiektu z metodą setTimeout, aby zagwarantować dostępność danego obiektu w każdym zdarzeniu zegara. W tym punkcie użyję metody bindAsEventListener biblioteki Prototype, ponieważ udostępnia ona podobne działanie w przypadku różnych metod obiektu Drink. Listing 5.5 przedstawia kod strony internetowej. Warto zauważyć, że panele nie mają zawartości innej niż „w toku…”, która jest wyświetlana do czasu pobrania przepisu. Listing 5.5. Strona internetowa aplikacji łączącej różne biblioteki, kontrolkę accordion i Ajaksa

Gorąca herbata:

w toku...

Margarita

w toku...

Kropla cytryny

w toku...

Szampan bezalkoholowy

w toku...

Przestrzeń w poziomie — accordion

|

155

Inne dane lub informacje.

Warto zwrócić uwagę na odnośniki do wszystkich plików ze skryptami bibliotek: Prototype, Rico, Adding Ajax i nowego pliku specyficznego dla aplikacji — accordionrico.js. To wiele bibliotek. Kod JavaScript aplikacji znajduje się na listingu 5.6. Ten kod obejmuje mechanizm obsługi zdarzeń biblioteki Prototype oparty na obiekcie Event i funkcji powiązanej ze zdarzeniem, kontrolce accordion z biblioteki Rico, obiekcie Ajax z biblioteki Adding Ajax oraz nowym, specyficznym dla aplikacji obiekcie Drink. Dla każdego panelu kontrolki accordion przeznaczonego na przepis na drinka aplikacja tworzy nowy obiekt Drink, zapisuje informacje specyficzne dla danego drinka i tworzy odbiornik zdarzeń po kliknięciu elementu etykiety z biblioteki Rico. W momencie kliknięcia danego elementu nazwa drinka jest używana w wywołaniu Ajaksa w celu pobrania odpowiedniego przepisu, który następnie służy do zastąpienia treści panelu. Listing 5.6. Połączenie wywołań Ajaksa i efektu accordion var xmlhttp; // Użycie obsługi zdarzeń z biblioteki Prototype Event.observe(window,"load", function() { new Rico.Accordion( $('accordionDiv'), {panelHeight: 200} ); setUp(); }); // Konfigurowanie sposobu wyświetlania strony function setUp() { var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { if (divs[i].className == 'name') { var drink = new Drink(divs[i]); if (drink.drink.id == 'tea') drink.getRecipe(); } } } // Obiekt Class biblioteki Prototype służy do // utworzenia obiektu Drink Drink = Class.create(); // Metody obiektu Drink są dodawane za pomocą // właściwości prototype Drink.prototype = { // Inicjowanie jest wywoływane automatycznie przy tworzeniu // obiektu za pomocą instrukcji Class.create biblioteki Prototype initialize: function(drink) { this.drink = drink; this._attachBehaviors(); this.state = 'notloaded'; }, _attachBehaviors: function() { Event.observe(this.drink,"click",this.getRecipe.bindAsEventListener(this)); },

156

|

Rozdział 5. Przestrzeń — ostateczna granica

getRecipe : function() { if (this.state=='loaded') return; if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); var drink = this.drink.id; var qry = "drink=" + drink; var url = 'recipe5.php?' + qry; xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = this.printRecipe.bindAsEventListener(this); xmlhttp.send(null); }, printRecipe : function () { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { // Ustawienie stanu this.state = 'loaded'; // Dostęp do elementu recipe i wyczyszczenie go var recipe = document.getElementById(this.drink.id + "-area"); recipe.innerHTML = ""; // Dodawanie nagłówka var title = xmlhttp.responseXML.getElementsByTagName('title')[0].firstChild. nodeValue; var titleNode = document.createElement('div'); titleNode.className='title'; titleNode.appendChild(document.createTextNode(title)); recipe.appendChild(titleNode); // Dodawanie składników var ingredients = xmlhttp.responseXML.getElementsByTagName('ingredient'); for (var i = 0; i < ingredients.length; i++) { var x = document.createElement('div'); x.className = 'ingredient'; x.appendChild(document.createTextNode(ingredients[i].firstChild.nodeValue)); recipe.appendChild(x); } // Dodawanie instrukcji var instr = xmlhttp.responseXML.getElementsByTagName('instruction')[0]. firstChild.nodeValue; var instrNode = document.createElement('div'); instrNode.className='instruction'; instrNode.appendChild(document.createTextNode(instr)); recipe.appendChild(instrNode); } }};

Metoda Class.create służy do tworzenia klasy Drink. Obiekt Drink ma cztery metody: initialize, _attachBehaviors, getRecipe i printRecipe. Aby zagwarantować, że wszystkie metody mają dostęp do kontekstu obiektu nadrzędnego, dla każdej z nich wywoływana jest metoda bindAsEventListener z parametrem this reprezentującym ten obiekt. W kodzie biblioteki Prototype istotny wiersz to: return __method.call(obiekt, zdarzenie || window.event);

Metoda call języka JavaScript umożliwia współdzielenie obiektów między wieloma metodami; w tym przypadku używany jest kontekst obiektu (dostępny w metodzie poprzez słowo kluczowe this). Pozwala to na dostęp każdej metody obiektu Drink do wszystkich pozostałych, a także do właściwości drink i state. Pierwsza z tych właściwości to nazwa drinka powiązana z obiektem, a druga to wskaźnik informujący o tym, czy przepis został już wczytany. Przestrzeń w poziomie — accordion

|

157

Po wczytaniu strony poszczególne obiekty reprezentujące drinki są tworzone na podstawie tego, czy klasa elementu to name, czy nie. Ponieważ każdy nazwany element ma identyfikator w postaci nazwy drinka, można pobrać tę nazwę i użyć jej w żądaniu kierowanym do usługi sieciowej. Samo żądanie jest zgłaszane w metodzie getRecipe. Po utworzeniu obiektu Drink reprezentującego pierwszego drinka, herbatę, przepis na niego jest natychmiast wczytywany, ponieważ wyświetlający go panel kontrolki accordion jest już widoczny. Rysunek 5.2 przedstawia aplikację z wyświetlonym jednym z paneli z drinkiem.

Rysunek 5.2. Mieszanka łącząca efekt accordion i aplikację wyświetlającą przepisy na drinki

Choć ten przykład jest prosty, jego zastosowanie łatwo można rozszerzyć i wyświetlać na przykład listę osób lub firm i ich adresów, przykładowy kod w witrynie z samouczkiem, lokalizacje sklepów czy informacje o produkcji. To już prawie wszystko na temat kontrolki accordion, umieszczania kodu w bibliotekach i korzystania z różnych bibliotek. Pora wypróbować inne ciekawe sposoby zarządzania przestrzenią stron, włączając w to bardzo popularne strony z zakładkami. Najpierw jednak uwaga dotycząca braków przykładu przedstawionego w tym punkcie: wczytywanie zawartości strony na żądanie nigdy nie będzie w pełni dostępną techniką. Kontrolka accordion może być dostępna, ponieważ możliwe jest otwarcie wszystkich paneli w momencie wczytywania strony. Jednak dane nie są wtedy jeszcze dostępne, a w przypadku

158

|

Rozdział 5. Przestrzeń — ostateczna granica

wyłączonej obsługi skryptów jedyny sposób na pobranie zawartości polega na użyciu aplikacji działającej po stronie serwera lub udostępnieniu odnośników do stron, na których otwarte są poszczególne panele z danymi pobranymi z serwera. To ostatnie rozwiązanie przedstawia rozdział 9.

Strony z zakładkami W czasie pisania tej książki firma Yahoo! udostępniła nową wersję witryny internetowej popularnego serwisu Yahoo! TV. Zmiana projektu nie spotkała się z ciepłym przyjęciem ze strony stałych użytkowników. Jednym z najczęstszych zarzutów dotyczących nowej witryny było to, że używa ona ajaksowego stronicowania, które pokrótce opiszę w dalszej części rozdziału. Ponadto zastosowanie stron z zakładkami przy wyświetlaniu pełnego programu telewizyjnego spotkało się z powszechną krytyką, ponieważ ten efekt Ajaksa działał wolno i był niepotrzebny. Na przykład po kliknięciu danej daty w celu wyświetlenia programu na ten dzień wskaźnik zakładki powoli przechodził do odpowiedniego dnia, a aplikacja wyświetlała listę programów. Nie jest to typowe działanie stron z zakładkami; moim zdaniem niestandardowe zastosowanie animacji zrodziło przynajmniej część krytyki. Strony z zakładkami działają w bardzo określony sposób: dane lub zawartość należy rozbić między różne „strony”, z których każda jest wyświetlana po kliknięciu powiązanej z nią zakładki. Zawartość danej strony może być różna; mogą to być fragmenty długiego formularza, różne rodzaje zawartości portali, program telewizyjny na poszczególne dni, a nawet uporządkowane dane — a etykieta każdej strony powinna odzwierciedlać jej zawartość. Wspólnym elementem wszystkich takich rozwiązań jest wzorzec: kliknięcie zakładki — wyświetlenie strony. W porównaniu z kontrolką accordion ten efekt jest nawet łatwiejszy w implementacji.

Proste spojrzenie na zawartość z zakładkami „Strony z zakładkami” to nieco myląca nazwa, ponieważ takie kontrolki nie muszą mieć rozmiaru strony. Może to być małe okno umieszczone w rogu strony lub, w większej skali, cała strona z zakładkami, przy czym każda podstrona dotyczy innego zagadnienia lub tematu podrzędnego. Zawartość stron z zakładkami może być statyczna lub dynamiczna. Jeśli jest dynamiczna, może ją generować serwer lub żądanie Ajaksa zgłaszane w wyniku wybrania danej zakładki. Zakładki mogą zawierać elementy graficzne, style CSS lub połączenie obu tych technik. Potrzebny jest sposób na określenie, która zakładka powiązana jest z otwartym panelem. W tym celu można na przykład usunąć dolną krawędź zakładki po jej kliknięciu, dzięki czemu zakładka będzie stanowić całość z zawartością strony. W przeciwnym razie użytkownicy mogą nie wiedzieć, która zakładka jest otwarta. W celu zademonstrowania tej techniki wykorzystam formularz użyty we wcześniejszej części rozdziału, jednak zamiast umieszczać jego części jedna nad drugą, rozbiję formularz na strony z zakładkami. Zawartość strony jest stosunkowo prosta. Każda podstrona ma etykietę na zakładce określoną przez klasę name, a do identyfikacji zawartości strony służy klasa elements: Strony z zakładkami

|

159

Imię i nazwisko:

Imię:


Nazwisko:

Obiekty na stronie z zakładkami są umieszczone w innym elemencie div — klasy content. Służy to jedynie do nadania stylów i nie ma wpływu na działanie kodu. Ponadto wszystkie strony z zakładkami znajdują się w elemencie „kontenerowym”, ponownie ze względu na style. Zauważyłeś podobieństwa między znacznikami stron z zakładkami i kontrolki accordion? Tak naprawdę są to tylko wybrane sposoby zarządzania zawartością strony. Po poznaniu jednej techniki dość łatwo jest wypróbować inne.

Ponadto poszczególne strony z zakładkami znajdują się wewnątrz elementu div klasy tab. Zamiast używać identyfikatorów do uzyskiwania dostępu do poszczególnych elementów, co miało miejsce w poprzednich przykładach, tu struktura elementów posłuży do utworzenia powiązania między klikniętą zakładką a wyświetlaną stroną. W ten sposób tworzą efekty autorzy wielu bibliotek Ajaksa, ponieważ ułatwia to konfigurację przykładów (nie trzeba martwić się o zastosowanie nieprawidłowych identyfikatorów). Łatwiej jest także dynamicznie wygenerować kod w aplikacji po stronie serwera. Na etapie projektowania widoczne są wszystkie strony, co ułatwia sprawdzenie układu. W tym momencie warto powstrzymać się od dodawania jakiejkolwiek zawartości lub czegokolwiek więcej niż prostego akapitu do czasu zakończenia tworzenia układu i mechanizmów działania. Rysunek 5.3 przedstawia stronę na takim etapie. Jeden element zakładki jest wyróżniony za pomocą narzędzia Inspect rozszerzenia Firebug. Po wczytaniu strony kod JavaScript aplikacji sprawdza wszystkie elementy div klasy tab. Po ich znalezieniu uzyskuje dostęp do elementów podrzędnych poszczególnych węzłów. Pierwszy element podrzędny to sama zakładka, a drugi to powiązana z nią strona. Aplikacja wiąże funkcję obsługi zdarzenia click zakładki ze stroną wyświetlaną w momencie kliknięcia tej zakładki. Można utworzyć ogólny obiekt do przechowywania tablic zakładek i stron oraz bieżącej strony. W czasie wczytywania aplikacji każda para zakładka-panel otrzymuje „indeks” obowiązujący w aplikacji. Ten indeks służy do pobierania każdego elementu do tablicy asocjacyjnej i umieszczania go na odpowiedniej pozycji, co gwarantuje, że na przykład zakładka na pozycji 3 w tablicy zakładek będzie powiązana ze stroną 3 z tablicy stron: function setUp() { var divs = document.getElementsByTagName('div'); var tabCount = 0; for (var i = 0; i < divs.length; i++) { if (divs[i].className == 'name') { tabs.addTab(divs[i]); } else if (divs[i].className == 'content') {

160

|

Rozdział 5. Przestrzeń — ostateczna granica

Rysunek 5.3. Strona z zakładkami w trakcie tworzenia. Jeden element jest wyróżniony za pomocą rozszerzenia Firebug tabs.addPanel(divs[i]); } } tabs.showPanel(0); }

Po dodaniu pary zakładka-panel aplikacja przypisuje do uchwytu zdarzenia click metodę showPanel, która przyjmuje indeks klikniętej zakładki. Kliknięcie zakładki wywołuje kilka zdarzeń: • Kolor tła klikniętej zakładki zmienia się na odcień informujący o tym, że jest aktywna. • Kolor tła poprzednio wybranej zakładki zmienia się na nieaktywny. • Bieżący panel zostaje ukryty. • Aplikacja wyświetla panel powiązany z aktywną zakładką.

Listing 5.7 przedstawia zawartość strony internetowej powiązanej z arkuszem stylów, kodem JavaScript specyficznym dla aplikacji i biblioteką addingajax.js. Listing 5.7. Prosta aplikacja ze stroną z zakładkami

Strony z zakładkami

|

161

Imię i nazwisko:

Adres:

Wybór:

Imię i nazwisko

Imię:
Nazwisko:

Adres

Ulica i numer:
Miejscowość:
Województwo:

Opcje

Opcja 1 Opcja 2 Opcja 3 Opcja 4

162

|

Rozdział 5. Przestrzeń — ostateczna granica

id="opt1" checked="checked" /> id="opt2"

/>

id="opt3"

/>

id="opt4" checked="checked" />

Kod JavaScript do zarządzania stronami z zakładkami nie jest zbyt skomplikowany. Przedstawia go listing 5.8. Po wczytaniu strony kod uzyskuje dostęp do wszystkich zakładek i paneli poprzez nazwy ich klas, a następnie dodaje elementy do odpowiednich tablic: panel i tab. Ponieważ kolejność zakładek i paneli jest taka sama, to choć fizycznie są one rozdzielone na stronie, ich uporządkowanie przy dostępie za pomocą modelu DOM będzie identyczne. Kliknięcie zakładki o określonym indeksie w tablicy tab spowoduje przesłanie tego indeksu do odpowiedniej funkcji, która wyświetli panel o tym indeksie. Listing 5.8. Kod JavaScript strony z zakładkami aaManageEvent(window,"load",setUp); function Tabs () { current=0; tab = new Array(); panels = new Array(); this.addTab = function (tabItem) { var index = tab.length; tab[tab.length] = tabItem; aaManageEvent(tabItem,"click",function() { tabs.showPanel(index);}); }; this.addPanel = function (panel) { panels[panels.length] = panel; }; this.showPanel = function (index) { panels[current].style.display="none"; tab[current].style.backgroundColor="#fff"; tab[index].style.backgroundColor="#ffc"; panels[index].style.display="block"; current = index; }; } tabs = new Tabs(); function setUp() { var divs = document.getElementsByTagName('div'); var tabCount = 0; for (var i = 0; i < divs.length; i++) { if (divs[i].className == 'name') { tabs.addTab(divs[i]); } else if (divs[i].className == 'content') { tabs.addPanel(divs[i]); } } tabs.showPanel(0); }

Arkusz stylów powoduje ułożenie paneli w warstwach jeden na drugim, a po pierwszym wczytaniu strony wszystkie panele są niewidoczne. Kolor tła zakładek zmienia się, aby odzwierciedlić, która z nich jest aktywna: .container { margin: 30px; padding: 10px; } .name

Strony z zakładkami

|

163

{ border: 1px solid #000; display: inline; margin: 0; padding: 10px; text-align: center; } .elements { background-color: #ffc; border: 1px solid #000; height: 200px; margin-top: 10px; width: 400px; } fieldset { border: none; margin: 1px; } legend { display: none; } .content { display: none; margin: 10px; } .tab { display: inline; margin: 0; padding: 0; } .footer { clear: both; } input { display: block; margin-bottom: 5px; } input[type="checkbox"] { display: inline; }

Rysunek 5.4 przedstawia nowy efekt — stronę z zakładkami. Aby zapewnić integrację rozwiązania z serwerem, funkcja obsługi zdarzenia click może także pobierać dane potrzebne do tworzenia zawartości paneli w sposób bardzo zbliżony do techniki z hybrydowego przykładu wykorzystania kontrolki accordion z poprzedniego punktu (listing 5.7). W rozdziale 9. strona z zakładkami służy do sterowania aplikacją typu mashup. Rozdział ten demonstruje także, jak połączyć efekty wizualne i żądania Ajaksa. Aby dodać więcej zakładek do aplikacji, wystarczy dołączyć nowe grupy elementów do strony; kod nie wymaga zmian i można go umieścić w bibliotece w jego obecnej postaci oraz dołączyć do drugiej biblioteki efektów, tabs.js, omówionej w następnym punkcie.

164

|

Rozdział 5. Przestrzeń — ostateczna granica

Rysunek 5.4. Zawartość strony z zakładkami utworzonej za pomocą języka JavaScript

Umieszczanie kodu w bibliotekach po raz wtóry — tworzenie uniwersalnych zakładek Podobnie jak w przypadku kontrolki accordion fragment aplikacji odpowiadający za zakładki jest wystarczająco uniwersalny, aby móc umieścić go w odrębnej bibliotece języka JavaScript. Samego kodu, przedstawionego na listingu 5.9, można użyć w jego obecnej formie w dowolnej aplikacji. Jedyne wymaganie polega na tym, że struktura strony musi odpowiadać tej z listingu 5.7. Wraz z biblioteką należy zachować style CSS i umieścić je w nowym pliku CSS, jednak chwilowo pozostawię rozwiązanie bez zmian w tym zakresie. W skrypcie nie trzeba także zapisywać bezpośrednio kolorów tła. W zamian można po utworzeniu obiektu Tabs przekazać kolory tła aktywnych i nieaktywnych elementów, a następnie zapisać je jako zmienne prywatne. Listing 5.9 przedstawia całą bibliotekę tabs.js. Listing 5.9. Kompletny kod biblioteki tabs.js function Tabs (active,inactive) { current=0; tab = new Array(); panels = new Array(); activeColor = active; inactiveColor = inactive; this.addTab = function (tabItem) { var index = tab.length; tab[index] = tabItem; aaManageEvent(tabItem,"click",function() { tabs.showPanel(index);}); }; this.addPanel = function (panel) { panels[panels.length] = panel; }; this.showPanel = function (index) { panels[current].style.display='none'; tab[current].style.backgroundColor=inactiveColor; tab[index].style.backgroundColor=activeColor; panels[index].style.display='block'; current = index; }; }

Strony z zakładkami

|

165

function setUpTabs() { var divs = document.getElementsByTagName('div'); var tabCount = 0; for (var i = 0; i < divs.length; i++) { if (divs[i].className == 'name') { tabs.addTab(divs[i]); } else if (divs[i].className == 'content') { tabs.addPanel(divs[i]); } } tabs.showPanel(0); }

W języku JavaScript prywatne zmienne składowe to właściwości dostępne jedynie dla metod danego obiektu, a nie dla zewnętrznego kodu. Obecność lub brak słowa kluczowego this określa, czy zmienna jest publiczna czy prywatna.

Aby użyć biblioteki Tabs, należy dodać element script wskazujący tę nową bibliotekę, przygotować odpowiednie znaczniki na stronie, używając wcześniej przedstawionej struktury, a następnie utworzyć obiekt Tabs: var tabs = new Tabs("#ccf","#fff");

I to już wszystko. Można dostosować kolory, określić styl czcionki, zmienić rozmiar zawartości bloków i tak dalej, a także utworzyć dowolną liczbę zakładek. Aby używać biblioteki Tabs poprzez bibliotekę Prototype, można zmodyfikować kod i użyć instrukcji Class.create, aby utworzyć obiekt, oraz wykorzystać funkcję bindAsEventListener w celu zagwarantowania, że kontekst obiektu zostanie przekazany do każdego zdarzenia. W celu zastosowania tego efektu można też użyć gotowej biblioteki, takiej jak Yahoo! UI, zamiast tworzyć własną.

Używanie mechanizmu TabView biblioteki YUI Nie przedstawiłam jeszcze działania biblioteki Yahoo! UI, a mechanizm TabView wydaje się dobrym wprowadzeniem jako jeden z wielu efektów wyższego poziomu. Na stronie http://developer.yahoo.com/yui można pobrać biblioteki YUI, zobaczyć przykłady i zapoznać się z dokumentacją.

Podobnie jak inne biblioteki TabView YUI używa elementów listy (li) dla zakładek i zwykle elementów div do przechowywania treści. Jedną z zalet takiego rozwiązania jest to, że nie trzeba pobierać wszystkich elementów div strony, aby wykryć zakładki:

• Imię i nazwisko:
• Adres:
• Wybór:

W dalszej części kodu znajduje się element div z poszczególnymi panelami, a każdemu z nich odpowiada odrębny element div. Ważne jest, aby zachować zgodność paneli z zakładkami, ponieważ to rozwiązanie nie używa identyfikatorów. Elementy są fizycznie oddzielone od siebie i nie mają wspólnego unikalnego elementu nadrzędnego. 166

|

Rozdział 5. Przestrzeń — ostateczna granica

Specjalne klasy wyróżniają kontener ogólny (yui-navset), listę do nawigacji (yui-nav) i elementy (yui-content). Ponadto element kontenera ogólnego ma identyfikator. W czasie tworzenia strony z zakładkami ten identyfikator jest przekazywany do wywołania funkcji w celu utworzenia efektu: var myTabs = new YAHOO.widget.TabView("tabview");

Listing 5.10 przedstawia całą stronę. Jak widać, także w tym przypadku zastosowanie gotowego efektu wyższego poziomu pozwala znacznie zmniejszyć ilość kodu. Biblioteka YUI ma także stosunkowo dobrą dokumentację, włączając w to opis tego, gdzie dodać funkcjonalność w celu zintegrowania efektu z żądaniami kierowanymi do usług sieciowych i innymi operacjami. Listing 5.10. Strona z zakładkami oparta na TabView YUI

• Imię i nazwisko:
• Adres:
• Wybór:

Imię:


Nazwisko:

Ulica i numer:




Strony z zakładkami

|

167

for="city">Miejscowość:
type="text" id="city" name="city" />

for="state">Województwo:
type="text" id="state" name="state" />



type="checkbox" id="opt1" name="opt1" checked="checked" /> for="opt1">XXXXXXX XXXXXX
type="checkbox" id="opt2" name="opt2" /> for="opt2">XX XXXXXXXXXX X X XXXXXXX XXX
type="checkbox" id="opt3" name="opt3" /> for="opt3">X X XXXXXXXX XXXXXXXXXXX XXXX
type="checkbox" id="opt4" name="opt4" checked="checked" /> for="opt4">X XXXXXXXXXXXXX

Jedyne, co nie odpowiada mi w widgecie TabView YUI, to jego nie najlepszy wygląd w wyjściowej postaci. Rysunek 5.5 przedstawia stronę używającą omawianego widgeta YUI.

Rysunek 5.5. Strona z zakładkami utworzona za pomocą widgeta YUI TabView

Oczywiście, wszystkie elementy można zmodyfikować za pomocą stylów CSS, ponieważ do oznaczenia każdego komponentu stron z zakładkami służą klasy. Zwykle operacje z bibliotek nazywam efektami, jednak inni autorzy często określają je mianem widgetów, wzorując się na Apple i innych firmach nazywających w ten sposób fragmenty kodu i elementy wizualne, których można użyć jako „wtyczek” we własnym środowisku. Jednak nazwy „widget” można także używać na określenie kompletnych obiektów dołączanych do strony internetowej bez wprowadzania w nich zmian. Takie widgety często pobierają dane z zewnętrznych źródeł. W praktyce nazwa „widget” stała się niemal uniwersalna w terminologii ajaksowej.

168

|

Rozdział 5. Przestrzeń — ostateczna granica

Z tego powodu nie lubię używać pojęcia „widget” — ma zbyt wiele znaczeń i nie chcę powodować nieporozumień związanych z jego używaniem. Kiedy piszę „efekt ajaksowy”, nazwa jest niepowtarzalna dla tego konkretnego środowiska. Jednak każdy może używać pojęć, które mu odpowiadają. Warto jedynie pamiętać, że wielu programistów Ajaksa, gdy pisze o „widgetach”, ma na myśli odpowiednik „efektów ajaksowych” z tej książki.

Strony z zakładkami a dostępność Na listingu 5.10 strona z zakładkami YUI zawiera odnośniki hipertekstowe wokół nazw zakładek, a każdy z tych odnośników obejmuje fragment adresu URL, na przykład #tab1. Dzięki tym odnośnikom zakładki są dostępne dla operacji wykonywanych za pomocą klawiatury. Użycie takiego fragmentu służy jedynie do zapewnienia jasnej odpowiedzi po kliknięciu odnośnika; strona nie zmienia się, ponieważ nie ma na niej fragmentu o określonej nazwie. Jednak w przypadku wyłączenia obsługi języka JavaScript należy zapewnić elegancką degradację działania stron z zakładkami, stosując następujące rozwiązania:

1. Początkowo można ukryć odnośniki na zakładkach i wyświetlić je po wczytaniu strony. Jeśli obsługa skryptów jest wyłączona, te odnośniki, z częściowymi adresami URL, nigdy nie zostaną wczytane.

2. Można użyć elementu NOSCRIPT w obrębie każdej zakładki, aby udostępnić odrębny odnośnik do całkowicie innej strony, na przykład http://pewnadomena.pl/stronaformularza2.htm. Kliknięcie takiego odnośnika spowoduje wyświetlenie „strony” z zakładkami dosłownie jako odrębnej strony. Inne podejście polega na dodaniu odnośnika do treści i następnie użyciu kodu JavaScript w celu usunięcia tego odnośnika po wczytaniu strony. Jest to zalecane rozwiązanie ze względu na stopniowe usprawnianie, jednak wymaga dłuższych skryptów.

3. W tym przykładzie używane są trzy strony. Pierwsza z nich zawiera część formularza dotyczącą imienia i nazwiska, druga wyświetla komponent na dane adresowe, a trzecia strona wyświetla opcje. Każdy komponent formularza można zapisać w tymczasowym magazynie danych na serwerze, kiedy użytkownik przejdzie do innej strony. Jeśli użytkownik nie poda wszystkich danych w określonym czasie, można usunąć całą treść po upłynięciu limitu.

4. Prostsze rozwiązanie — a prostota to zaleta i należy do niej dążyć — polega na wyświetlaniu całej zawartości formularza po otwarciu aplikacji i używaniu skryptów do całkowitej zmiany układu strony. Strony wyświetlane dla każdego odnośnika w rozwiązaniu alternatywnym nie muszą być statyczne, jeśli używany system zarządzania treścią korzysta z pewnej odmiany przekierowywania na podstawie adresów URL. Niezależnie od tego, czy nowe strony są generowane czy statyczne, czy cały formularz jest wyświetlany na jednej stronie, przedstawione podejście zapewnia osobom z wyłączoną obsługą skryptów dostęp do wszystkich komponentów formularza.

Strony z zakładkami

|

169

Nakładanie Efekty oparte na nakładaniu wczytują nową zawartość nad stroną w wyniku pewnych zdarzeń. Ja używam pojęcia „nakładanie” (ang. overlay), podobnie jak inni autorzy, ponieważ nowa zawartość jest całkowicie oderwana od układu strony i umieszczana nad nim przez określanie pozycji za pomocą współrzędnych bezwzględnych. Warstwy mogą być rozciągnięte tak, aby zakrywały całą stroną, a mogą też pojawiać się jako małe pola, które można albo wstawić na stronę, albo przenosić. Tak, takie okna są nazywane także oknami wyskakującymi i wielu użytkowników ich nie lubi. Jednak opisany mechanizm może służyć do czegoś więcej niż tylko tworzenia okien wyskakujących (a nawet tradycyjne okna tego typu mogą być przydatne, jeśli programista użyje ich raczej do pomagania użytkownikom, niż do zakrywania zawartości stron). Warstwy otwierane w górnej części strony mogą zawierać ostrzeżenie, formularz do wypełnienia, wyniki zapytania, a nawet, jak pokazuje to ten punkt, powiększoną wersję rysunku, którego miniaturę użytkownik wybrał. W mojej witrynie internetowej używam biblioteki do obsługi obrazów do otwierania większego rysunku w wyniku kliknięcia jego miniatury. Najpierw na stronę nakładany jest półprzezroczysty element, dzięki czemu zawartość strony nie odciąga uwagi od obrazu. Po początkowym wczytaniu strony funkcja konfiguracyjna w języku JavaScript pobiera zawartość strony i umieszcza ją, niezależnie od treści, w elemencie div. Ta funkcja dodaje także drugi element div, zawierający element img. Ten drugi element znajduje się poza pierwszym: function setUp() { // Dodaje kontener strony i kontener rysunku var oldBody = document.body.innerHTML; document.body.innerHTML = "

" + oldBody + "

" + "

" + "

"; var elem = elementClass = null; for (i = 0; i < document.images.length; i++) { elem = document.images[i]; elementClass = elem.getAttribute("class"); elementClass = elementClass ? elementClass : elem.getAttribute("className"); if (elementClass == 'thumb') { elem.onclick=expandPic; } } // Dodaje funkcję obsługi zdarzeń dla rysunku document.getElementById('mtwPicture').onclick=restore; }

Trzeba jeszcze udostępnić wskazówkę informującą o możliwości rozwinięcia obrazu. W tym celu należy wyświetlić w tle rysunek „lupy” za pomocą stylów CSS i dodać dopełnienie do elementu img, aby ta „lupa” była widoczna. Służącą do tego klasę, .thumb, trzeba przypisać do każdej miniatury:

170

|

Rozdział 5. Przestrzeń — ostateczna granica

.thumb { background-image: url(magnify.gif); background-position: right bottom; background-repeat: no-repeat; border: 1px solid #000; margin: 0; padding-bottom: 25px; }

Lubię to rozwiązanie, ponieważ nie trzeba używać skryptów w celu określenia, że rysunek można rozwinąć — za całą obsługę odpowiadają nazwy klas. Rysunek 5.6 przedstawia stronę z kilkoma miniaturami z jednej z moich stron internetowych. Każda miniatura ma klasę .thumb.

Rysunek 5.6. Strona wyjściowa z kilkoma miniaturami, z których każda ma klasę .thumb

Kiedy użytkownik klika miniaturę, aplikacja zmienia poziom przezroczystości nakładki, która staje się półprzezroczysta. Powoduje to zakrycie, choć nie całkowite, zawartości strony. Aplikacja ustawia atrybut src elementu img na wczytywany obraz i dostosowuje wymiary tego elementu do rozmiaru owego obrazu. Ponadto obliczana jest aktualna wartość przewinięcia strony, dzięki czemu nowy obraz jest wyświetlany w odpowiednim miejscu; użytkownik nie musi przewijać strony, aby zobaczyć rozwinięte zdjęcie lub wrócić do jego wyjściowej pozycji: // Określanie pozycji zdjęcia var pos = 0; if (window.pageYOffset) { pos = window.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { pos = document.documentElement.scrollTop } else if (document.body) { pos = document.body.scrollTop; }

Nakładanie

|

171

Kiedy użytkownik kliknie rozwinięte zdjęcie, aplikacja ukryje je, zmodyfikuje nakładkę tak, aby była całkowicie przezroczysta, a strona wróci do normalnego trybu. W górnej części rozwiniętego zdjęcia znajduje się ikona, która umożliwia zamknięcie zdjęcia. Jest ona wyświetlana za pomocą tej samej techniki co lupa w przypadku miniatur: w stylach CSS obrazek tła jest ustawiany na ikonę zamykania, a dopełnienie w górnej części sprawia, że ikona jest widoczna. Plik JavaScript zarządzający nakładaniem zdjęcia jest przedstawiony na listingu 5.11. W zakresie zarządzania zdarzeniami zależy od biblioteki addingajax.js. Warto zauważyć, że aplikacja używa animowanego rysunku GIF określonego na początku pliku. Ta animacja jest wczytywana do elementu img przy jego pierwszym wyświetleniu, kiedy pobierany jest inny rysunek. Udostępnia to działającą animację w sposób, który ponownie nie wymaga kodu JavaScript. Zamiast tego rysunku można użyć dowolnej animacji (lub zrezygnować z niej). Listing 5.11. Plik img.js obsługujący nakładanie rozwiniętego zdjęcia na stronę // Wartości globalne - można je zmienić var workingImage = "cogs04.gif"; aaManageEvent(window,'load',setUp); // Funkcja do obsługi przezroczystości w różnych przeglądarkach function setOpacity(obj,val) { obj.style.opacity = val; obj.style.MozOpacity=val; obj.style.KhtmlOpacity=val; val*=100; obj.style.filter = "alpha(opacity="+val+")"; } // // Pobiera kod przycisku. Wciśnięcie 'x' powoduje ukrycie większego rysunku // function getKey(evnt){ evnt = (evnt) ? evnt : ((window.event) ? window.event : ""); var keycode = (evnt.which) ? evnt.which : evnt.keyCode; var key = String.fromCharCode(keycode).toLowerCase(); if(key == 'x'){ restore(); } } // Dodaje 'nakładkę' do zawartości strony. // Wyszukuje wszystkie rysunki klasy 'thumb', // dodaje do każdego z nich funkcję obsługi zdarzenia click, // dodaje taką funkcję do elementu z rozwiniętym rysunkiem // dołączonym w trakcie konfigurowania strony function setUp() { // Dodaje kontener strony i kontener rysunku var oldBody = document.body.innerHTML; document.body.innerHTML = "

" + oldBody + "

" + "

" + "

"; var elem = elementClass = null; for (i = 0; i < document.images.length; i++) { elem = document.images[i]; elementClass = elem.getAttribute("class"); elementClass = elementClass ? elementClass : elem.getAttribute("className"); if (elementClass == 'thumb') { elem.onclick=expandPic; }

172

|

Rozdział 5. Przestrzeń — ostateczna granica

} // Dodaje funkcję obsługi zdarzeń dla rysunku document.getElementById('mtwPicture').onclick=restore; } // Rozwija zdjęcie. // Dodaje funkcję obsługi zdarzenia keypress w celu zarządzania zdarzeniami klawiatury, // zmienia przezroczystość 'nakładki', aby częściowo zakryć zawartość strony, // określa pozycję klikniętej miniatury i // i ustawia ramy rozwijanego rysunku w tym miejscu, // a następnie ustawia nowy rysunek function expandPic(evnt) { aaManageEvent(document,'keypress',getKey); evnt = (evnt) ? evnt : ((window.event) ? window.event : ""); // Określanie pozycji zdjęcia var pos = 0; if (window.pageYOffset) { pos = window.pageYOffset; } else if (document.documentElement && document.documentElement.scrollTop) { pos = document.documentElement.scrollTop } else if (document.body) { pos = document.body.scrollTop; } var evntTarget = (evnt.target) ? evnt.target : evnt.srcElement; // Określanie źródła rysunku var oParent = evntTarget.parentNode; document.images['mtwPictureimage'].src=oParent; // Zaciemnianie tła i wyświetlanie rozwiniętego rysunku var obj = document.getElementById('mtwPicture'); obj.style.top = pos + "px"; var cover = document.getElementById('mtwCover'); setOpacity(cover,.1); obj.style.visibility='visible'; // Zakończenie zdarzenia return false; } // Przywraca stan. // Wstrzymuje oczekiwanie na zdarzenie keypress w aplikacji, // powoduje, że nakładka staje się całkowicie przezroczysta, // przywraca ramy obrazu z powrotem na rysunek 'roboczy', // ukrywa element z ramami obrazu function restore() { aaStopEvent(document,'keypress',getKey); // Przywracanie przezroczystości var cover = document.getElementById('mtwCover'); setOpacity(cover,1.0); cover.style.backgroundColor="transparent"; var obj = document.getElementById('mtwPicture'); // Odkrywanie obrazu i czyszczenie elementu img obj.style.visibility='hidden'; document.images['mtwPictureimage'].src=workingImage; }

Nakładanie

|

173

Aby umożliwić korzystanie z klawiatury, wokół miniatury umieszcza się odnośnik hipertekstowy do większego obrazu. Można także zwiększyć dostępność za pomocą klawiatury i sprawić, by kliknięcie przycisku „x” po rozwinięciu zdjęcia powodowało jego ukrycie i przywrócenie normalnego działania strony: // // Pobiera kod przycisku. Wciśnięcie 'x' powoduje ukrycie większego rysunku // function getKey(evnt){ evnt = (evnt) ? evnt : ((window.event) ? window.event : ""); var keycode = (evnt.which) ? evnt.which : evnt.keyCode; var key = String.fromCharCode(keycode).toLowerCase(); if(key == 'x'){ restore(); } } // Oczekiwanie na zdarzenie keypress // function listenKey() { if (document.addEventListener) { document.addEventListener("keypress",getKey,false); } else if (document.attachEvent) { document.attachEvent("onkeypress",getKey); } else { document.onkeypress = getKey; } } // Zaprzestanie oczekiwania na zdarzenie keypress // function stopListenKey() { if (document.removeEventListener) { document.removeEventListener("keypress",getKey,false); } else if (document.detachEvent) { document.detachEvent("onkeypress",getKey); } else { document.onkeypress = ""; } }

Warto także zauważyć, że procedury, które rozwijają rysunek i przywracają zwykły stan, są przypisywane bezpośrednio do właściwości onclick: document.getElementById('mtwPicture').onclick=restore;

Aplikacja nie używa mechanizmu obsługi zdarzeń łączonych, ponieważ inne aplikacje nie powinny wykonywać własnych operacji po kliknięciu rysunku przez użytkownika. Rozwijanie obrazu działa najlepiej jako samodzielny efekt. Efekty Ajaksa nie muszą współdziałać z innymi. Jeśli tylko programista wie, jak funkcjonuje dany efekt, nie musi zapewniać jego współdziałania z innym kodem. Aby dołączyć mechanizm rozwijania zdjęć, wystarczy umieścić na stronie poniższy kod:

174

|

Rozdział 5. Przestrzeń — ostateczna granica

W celu umożliwienia rozwijania rysunku wystarczy nadać mu klasę .thumb:

Jest to bardzo dyskretny efekt i wymaga niewiele pracy od osoby dodającej go do aplikacji. Ponadto rozwiązanie oparte na tej technice przejdzie walidację kodu XHTML i CSS, a także jest całkowicie dostępne — właśnie w taki sposób powinny działać aplikacje ajaksowe. Ten rozdział nie zawiera wielu informacji o technikach, które uważa się za „ajaksowe” — tylko jeden z przykładów zgłaszał żądania kierowane do usługi sieciowej. Jednak takie żądania to tylko fragment większego obrazu. Pozostała część to przetwarzanie żądania, które obejmuje przygotowanie miejsca na wyniki oraz zarządzanie dużą ilością danych w ograniczonej przestrzeni.

Nakładanie

|

175

176

|

Rozdział 5. Przestrzeń — ostateczna granica

ROZDZIAŁ 6.

Dane dynamiczne

Ajax miał znaczący wpływ na tradycyjne techniki służące do pobierania i aktualizowania danych w sieci. Można to zauważyć już przy pierwszej próbie edycji danych na stronie internetowej „w miejscu” lub usunięcia wiersza danych bez konieczności odświeżania strony. Zastosowanie dynamicznych zapytań i aktualizacji danych za pomocą Ajaksa może mieć największy pozytywny wpływ na aplikacje. Spośród różnych kategorii efektów Ajaksa związanych z dynamicznymi danymi można wymienić: • edycję w miejscu; • nieustanne odzwierciedlanie nowych lub świeżo zaktualizowanych danych; • automatyczne uzupełnianie pól tekstowych; • listy wyboru specyficzne dla kontekstu; • natychmiastowe pozbywanie się usuniętych danych.

Efekty związane z modyfikowaniem danych, na przykład edycja w miejscu czy natychmiastowe usuwanie, są łatwe w obsłudze także przy wyłączonych skryptach. Wystarczy udostępnić odnośniki do formularzy, które umożliwiają wprowadzenie zmian w bardziej tradycyjny sposób. Te odnośniki można umieścić w elementach NOSCRIPT, jednak lepsze rozwiązanie polega na udostępnieniu alternatyw dla skryptów jako opcji, którą może wybrać każdy użytkownik niezależnie od tego, czy używa skryptów, czy nie. Udostępnianie więcej niż jednej techniki modyfikowania danych jest traktowane jako obsługa klienta, dlatego w tym przypadku Ajax i dostępność idą ręka w rękę. Ajaksa można używać nie tylko do aktualizowania danych, ale także do usprawniania zapytań o dane oraz wyświetlania informacji. Służące do tego techniki to na przykład automatyczne uzupełnianie szukanych wyrażeń lub sortowanie danych przez przeciąganie. Efektów wizualnych można użyć do wyróżnienia określonych aspektów danych, choć trzeba zachować ostrożność i upewnić się, że ważne informacje nie zależą wyłącznie od takich efektów. Choć nie ma ograniczenia, jeśli chodzi o operacje, jakie można wykonać za pomocą Ajaksa i bazy danych, trzeba wziąć pod uwagę pewne zagadnienia związane z wydajnością każdej aplikacji bazodanowej. Dotyczy to zwłaszcza liczby połączeń pomiędzy danym klientem a serwerem, a także między aplikacją a bazą danych. Poznając różne efekty Ajaksa przedstawione w tym rozdziale, zapoznasz się z niektórymi z tych zagadnień oraz zobaczysz sztuczki, których

177

można użyć w celu zagwarantowania, że aplikacja nie zostanie zablokowana. W tym celu można na przykład użyć wielu domen lub pamięci podręcznej. Czytając kolejne punkty, poznasz także zagadnienia dotyczące bezpieczeństwa. Najbardziej wrażliwy punkt witryny internetowej to dostęp do bazy danych poprzez publiczne strony internetowe. Jest tak niezależnie od tego, czy dostęp ten odbywa się poprzez tradycyjne formularze czy za pomocą wywołań Ajaksa. Jednak w większości przypadków wystarczy nieco zdrowego rozsądku oraz kilka technik zabezpieczania bazy danych.

Edycja w miejscu Moja ulubiona technika dynamicznego aktualizowania danych za pomocą Ajaksa to edycja w miejscu. Ta technika umożliwia użytkownikom o uprawnieniach do wprowadzania zmian edycję „na żywo” pól strony, które udostępniają tę funkcję, bez konieczności przechodzenia do odrębnej strony internetowej czy formularza. Pierwszy raz zobaczyłam tę technikę na witrynie Flickr — witrynie do umieszczania zdjęć, http://flickr.com — i wciąż uważam, że jest to jedno z lepszych zastosowań tego efektu. Aby zmienić tytuł zdjęcia, należy go kliknąć, a natychmiast zmieni się on w pole tekstowe wraz z dostępnymi poniżej przyciskami Save i Cancel. Tak samo działa modyfikowanie opisu i dodawanie znaczników. Użytkownik jest informowany o możliwości edycji w miejscu, kiedy umieści kursor myszy nad obszarem z opisem. Aplikacja wyświetla wtedy tekst z informacją, że kliknięcie tego obszaru pozwala zmienić lub dodać opis. Umieszczenie kursora myszy nad tytułem powoduje zmianę koloru tła. W przypadku znaczników stale widoczna jest etykieta Add a tag. Tym, co sprawia, że całe rozwiązanie jest dostępne, są odnośniki do bardziej tradycyjnych formularzy internetowych. Dzięki obecności obu technik — edycji w miejscu i tradycyjnych formularzy — użytkownicy z włączoną obsługą skryptów mogą wybrać, w jaki sposób modyfikować dane. Możliwe, że wolą użyć edycji w miejscu do poprawienia tytułu, ale formularzy sieciowych do wprowadzania zmian w kilku polach. To jest właśnie klucz do naprawdę udanej edycji w miejscu — udostępnienie odnośnika umożliwiającego tradycyjne wprowadzanie zmian i dyskretna obsługa edycji w miejscu.

Dodawanie pól umożliwiających edycję Przekształcenie pola tak, aby można było je modyfikować, nie jest zbyt trudne, zwłaszcza dzięki możliwości ułożenia kontekstu w warstwy i ukrywania oraz wyświetlania poszczególnych warstw na podstawie zdarzeń związanych z myszą lub innych operacji. Wolę używać atrybutu display stylów CSS zamiast visibility, dzięki czemu zawartość w pionowym układzie strony przesuwa się w dół lub w górę w zależności od tego, czy pola formularza umożliwiające wprowadzanie stron są wyświetlane, czy nie. Kluczowe w tego typu efektach Ajaksa jest upewnienie się, że jedynie użytkownicy z odpowiednimi uprawnieniami mogą modyfikować dane. Jeśli edycja w miejscu działa na chronionej stronie, nie stanowi to problemu. Zwykle jednak taka edycja jest możliwa na stronach, do których dostęp mają zarówno użytkownicy z uprawnieniami do wprowadzania zmian, jak

178

|

Rozdział 6. Dane dynamiczne

i osoby z uprawnieniami tylko do odczytu. Pliki cookie pozwalają upewnić się, że tylko odpowiedni użytkownicy mogą modyfikować dane. W większości aplikacji sieciowych, które mają komponent administracyjny, za pomocą plików cookie zapisywane są informacje uwierzytelniające oraz stan użytkownika. Przechowywanie informacji o kliencie ułatwia dostęp do funkcji edycji — użytkownik aplikacji nie musi wtedy logować się za każdym razem, kiedy chce wprowadzić zmiany. Te same pliki cookie pozwalają też określić, czy dane pole można modyfikować bezpośrednio na stronie. Po umożliwieniu edycji odpowiednich pól i wprowadzeniu zmian przez użytkownika następny krok w procesie dodawania edycji w miejscu za pomocą Ajaksa polega na przetworzeniu zmian przy użyciu ajaksowego żądania skierowanego do usługi sieciowej i przywróceniu stanu strony sprzed modyfikacji. Zwykle oznacza to, że zmian wymaga także komponent aplikacji działający po stronie serwera, aby możliwe było zgłaszanie żądań wprowadzenia zmian obok tradycyjnego przetwarzania formularza. Do zademonstrowania tej techniki, a także innych efektów w tym rozdziale, posłuży prawdziwa baza danych z rzeczywistymi danymi. Jest to baza danych do zarządzania moim blogiem, który oparty jest na systemie blogów WordPress. Najpierw oczywiście należy wykonać kopię bazy danych, aby można było bezpiecznie testować wprowadzanie zmian. W czasie samodzielnego wypróbowywania tych przykładów można użyć dowolnej dostępnej bazy danych, koniecznie tworząc wcześniej jej kopię, aby przypadkowo nie uszkodzić używanych informacji. Aby przedstawione przykłady pasowały do dowolnych danych, wystarczy zmienić kod zaplecza aplikacji. W plikach z kodem źródłowym nie ma przykładowej bazy danych, jednak jeśli masz dostęp do serwera z obsługą języka PHP, możesz łatwo zainstalować aplikację WordPress. Po jej zainstalowaniu można szybko utworzyć przykładowe wpisy na blogu, aby wypróbować przykłady przedstawione w tym i w następnych rozdziałach. Aplikację WordPress można pobrać ze strony http://wordpress.org.

Aby edycja w miejscu działała prawidłowo, musi istnieć dobra współpraca między serwerem a klientem. Część serwerowa aplikacji sprawdza, czy użytkownik ma uprawnienia do edycji pól. Te informacje pozwalają włączyć po stronie klienta odpowiednią obsługę zdarzeń. Po stronie klienta, kiedy nadejdą informacje potwierdzające możliwość wprowadzania zmian przez danego użytkownika, najłatwiejszy sposób na dodanie edycji w miejscu polega na dodaniu do wszystkich elementów, które można modyfikować, obsługi zdarzenia wyzwalającego proces edycji. Czasem może to być zdarzenie mouseover zmieniające tło elementu, jednak częściej jest to kliknięcie obiektu, co powoduje otwarcie interfejsu umożliwiającego wprowadzanie zmian. Obsługa edycji w miejscu wymaga sporej ilości kodu i nie można tego zmienić. Większość tego kodu można umieścić w bibliotece — a nawet należy tak postąpić, aby umożliwić jego powtórne wykorzystanie — jednak na napisanie kodu tego efektu należy poświęcić nieco czasu. Jednak moim zdaniem warto to zrobić. Najpierw, przed przejściem bezpośrednio do kodu, warto ponownie przyjrzeć się rozwijanej bibliotece Ajaksa addingajax.js. W poprzednich rozdziałach do tej biblioteki dodano funkcje tworzące obiekt XMLHttpRequest oraz zarządzające obsługą zdarzeń. Teraz dodana zostanie

Edycja w miejscu

|

179

funkcja aaElem, która upraszcza dostęp do określonego elementu dokumentu na podstawie identyfikatora: function aaElem(identifier) { return document.getElementById(identifier); }

W omawianych aplikacjach ta funkcja nie jest potrzebna — nie trzeba dodawać w nich niestandardowych właściwości ani metod (choć można tak postąpić przy dalszym ich rozwijaniu). Jednak po pewnym czasie, o czym przekonasz się przy następnym przykładzie, ciągłe pisanie instrukcji document.getElementById(id) może okazać się męczące. Na razie funkcja aaElem służy do uproszczenia kodu.

Analiza kodu klienckiego W omawianym przykładzie aplikacja wczytuje tytuł (title) i zawartość (content) danego wpisu. Identyfikator wpisu jest pobierany za pomocą standardowego formularza, a aplikacja wyświetla na stronie jego tytuł i treść. Oba te elementy można edytować w miejscu, jeśli użytkownik, który otworzył stronę, jest zarejestrowany jako właściciel danego blogu, a po stronie klienta zapisano plik cookie z nazwą i hasłem tej osoby. Rysunek 6.1 przedstawia stronę z nowo wczytanym wpisem. Wygląda ona tak samo niezależnie od tego, czy użytkownik może edytować dane, czy nie.

Rysunek 6.1. Strona z danymi przed aktywowaniem edycji w miejscu

Takie strony internetowe to połączenie kodu działającego po stronie serwera i HTML (lub, jak w tym przypadku, XHTML), co jest powszechnie spotykane w wielu aplikacjach sieciowych. Kod działający po stronie serwera, tu w języku PHP, zapełnia stronę zawartością. W większości aplikacji opartych na szkieletach aplikacji integracja między serwerem i klientem zachodzi albo poprzez szablonowe znaczniki, albo za pomocą kodu. W przykładzie przedstawionym na listingu 6.1 jest to kod. Zapytanie do bazy danych jest przetwarzane przed obsługą znaczników strony, a kod PHP zagnieżdżony w tych znacznikach wyświetla pobrane dane.

180

|

Rozdział 6. Dane dynamiczne

Listing 6.1. Strona internetowa z kodem PHP działającym po stronie serwera i znacznikami PHP

Numer wpisu:

Tytuł:

Zapisz Anuluj

0) { while($row = mysql_fetch_row($rows)) { ?>

Edycja w miejscu

|

181

Zapisz Anuluj

Jedyny dodatkowy kod PHP potrzebny na stronie to referencja do innego pliku PHP aplikacji, perms.php, który jest obszerniej omówiony w następnym punkcie. Na razie wystarczy wiedzieć, że plik ten sprawdza, czy dana osoba jest właścicielem danych, a jeśli tak, ustawia zmienną canedit języka JavaScript na true. Wiele aplikacji opartych na platformie, na przykład WordPress, ma wbudowaną zmienną określającą, czy użytkownik jest właścicielem danych i czy może je modyfikować, dlatego programista nie musi pisać potrzebnego do tego kodu. Także w tym przypadku warto dołączyć funkcje edycji w miejscu do istniejącej funkcjonalności platformy.

Na stronie internetowej przedstawionej na listingu 6.1 elementy formularza umożliwiające edycję w miejscu są dołączane bezpośrednio pod wyświetlanym tekstem tytułu lub zawartością. Arkusz stylów, data.css, sprawia, że elementy do obsługi edycji nie są początkowo wyświetlane: #title { display: none; margin-bottom: 20px; width: 400px; } #wrapper { background-color: #fff; margin: 20px; padding: 10px; width: 600px; } #printtitle { font-family: Georgia, Verdana; margin-bottom: 20px; } #printcontent, content { line-height: 120%; } #content { display: none; } #title input, textarea { background-color: #ffffd3;

182

|

Rozdział 6. Dane dynamiczne

color: #000; } .button { background-color: #ccccff; border: 1px solid #009; padding: 5px; }

W kodzie JavaScript aplikacji ustawienie zmiennej canedit na true powoduje przypisanie funkcji obsługi zdarzeń w celu przechwytywania zdarzeń związanych z wybranymi elementami, włączając w to funkcje zmieniające kolor tła po umieszczeniu kursora myszy nad elementami zawierającymi dane do edycji i przechwytywanie zdarzenia click tych elementów. Jeśli edycja w miejscu jest włączona, każde pole będzie powiązane z przyciskami Zapisz i Anuluj, które umożliwiają użytkownikom odpowiednio zapisanie zmian lub anulowanie ich i przywrócenie stronie zwykłego wyglądu. Podsumujmy operacje:

1. Serwer ustawia zmienną canedit na true, jeśli użytkownik może modyfikować dane pola. 2. Dla każdego pola używane jest zdarzenie mouseover w celu zmiany koloru tła pola po umieszczeniu nad nim kursora myszy.

3. Do każdego pola przypisywana jest funkcja obsługi zdarzenia click. 4. Kiedy użytkownik klika dane pole, aplikacja przekształca je na obszar umożliwiający edycję, powiązany z przyciskami Zapisz i Anuluj. Kiedy użytkownik kliknie przycisk Zapisz, aplikacja zaktualizuje bazę danych i wyświetli właścicielowi komunikat o wprowadzeniu zmian. Z kolei po kliknięciu przycisku Anuluj aplikacja wróci do normalnego trybu, w którym edycja jest niemożliwa.

Listing 6.2 przedstawia plik data1.js z kodem JavaScript specyficznym dla aplikacji. Listing 6.2. Edycja w miejscu dwóch pól: tytułu i zawartości var xmlhttp; // Konfigurowanie żądania aktualizacji danych function sendChange(params) { if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); var url = 'process.php'; xmlhttp.open('POST', url, true); xmlhttp.onreadystatechange = processResponse; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(params); } // Przetwarzanie odpowiedzi function processResponse() { if(xmlhttp.readyState == 4 && xmlhttp.status==200) { var resp=xmlhttp.responseText; var txt = document.createTextNode(resp); aaElem("message").appendChild(txt); } } // Dodawanie obsługi zdarzenia click do odpowiednich elementów div aaManageEvent(window,'load', function () { if (canedit) { aaManageEvent(aaElem('printtitle'),'click',setTitleEdit);

Edycja w miejscu

|

183

aaManageEvent(aaElem('printcontent'),'click',setContentEdit); aaManageEvent(aaElem('printtitle'),'mouseover',setHover); aaManageEvent(aaElem('printcontent'),'mouseover',setHover); aaManageEvent(aaElem('printtitle'),'mouseout',setHoverOff); aaManageEvent(aaElem('printcontent'),'mouseout',setHoverOff); aaManageEvent(aaElem('savetitle'),'click',saveTitle); aaManageEvent(aaElem('canceltitle'),'click',cancelTitle); aaManageEvent(aaElem('savecontent'),'click',saveContent); aaManageEvent(aaElem('cancelcontent'),'click',cancelContent); } }); // Konfigurowanie edycji tytułu w miejscu function setTitleEdit() { // Ustawienie tekstu var obj = aaElem("printtitle"); var txt = obj.firstChild.nodeValue; aaElem("titleinput").value = txt; // Zmiana sposobu wyświetlania obj.style.display="none"; aaElem("title").style.display="block"; } // Konfigurowanie edycji treści w miejscu function setContentEdit() { // Ustawienie tekstu var obj = aaElem("printcontent"); var txt = obj.innerHTML; aaElem("contenttext").value=txt; // Zmiana sposobu wyświetlania obj.style.display="none"; aaElem("content").style.display="block"; } function setHover(evnt) { evnt = evnt ? evnt : window.event; var eventTarget = evnt.target ? evnt.target : evnt.srcElement; eventTarget.style.backgroundColor="#ccffff"; } function setHoverOff(evnt) { evnt = evnt ? evnt : window.event; var eventTarget = evnt.target ? evnt.target : evnt.srcElement; eventTarget.style.backgroundColor="#ffffff"; } // Anulowanie edycji tytułu w miejscu function cancelTitle() { aaElem("title").style.display="none"; aaElem("printtitle").style.display="block"; } // Zapisanie nowego tytułu function saveTitle() { var post = aaElem('post').value; var title = aaElem('titleinput').value;

184

|

Rozdział 6. Dane dynamiczne

var params = "post=" + post + "&title=" + encodeURI(title) + "&changetype=title"; sendChange(params); aaElem("printtitle").firstChild.nodeValue=title; aaElem("printtitle").style.display="block"; aaElem("title").style.display="none"; } // Anulowanie edycji treści w miejscu function cancelContent() { aaElem("content").style.display="none"; aaElem("printcontent").style.display="block"; } // Zapisanie nowej treści function saveContent() { var post = aaElem('post').value; var content = aaElem('contenttext').value; var params = "post=" + post + "&content=" + encodeURI(content) + "&changetype=content"; sendChange(params); aaElem("content").style.display="none"; aaElem("printcontent").style.display="block"; aaElem("printcontent").innerHTML=aaElem("contenttext").value; }

Pewną drobną modyfikacją mogłoby być zastosowanie klas CSS zamiast bezpośredniego ustawiania właściwości style, jednak jest to raczej kwestia stylu niż konieczność. Mam nadzieję, że ten kod pokazał, iż nie ma nic trudnego w obsłudze edycji w miejscu. Jest to jedynie nieco żmudne i obejmuje wiele małych fragmentów funkcjonalności. Funkcja sendChange zarządza wywołaniami Ajaksa, które aktualizują tytuł lub treść. Parametry są przesyłane bezpośrednio do tej funkcji przez proces, który zarządza edycją zarówno tytułu, jak i treści. Ponieważ dane są aktualizowane, aplikacja wysyła żądanie metodą POST. Kod uruchamiany po obsłużeniu żądania wyświetla albo komunikat o aktualizacji, albo o błędzie, jeśli taki wystąpi. W przypadku edycji w miejscu aplikacja uzyskuje dostęp do wyświetlanego obszaru i przypisuje modyfikowanym elementom formularza odpowiedni tekst. Tytuł to po prostu łańcuch znaków, a do przesyłania tej wartości służy model DOM, jednak w przypadku obszaru z treścią trzeba użyć właściwości innerHTML. Jest to pewne uproszczenie w kodzie, a w aplikacjach prawdziwie zgodnych z XHTML należy przejść po wszystkich węzłach childnodes obiektu i złączyć wynik, ponieważ obszar z treścią może rozciągać się na wiele węzłów, zwłaszcza jeśli w tekście znajduje się odnośnik, rysunek lub podobne elementy. Inne podejście do pobierania wyświetlanych danych polega na zapełnieniu elementów input w czasie wczytywania strony za pomocą tego samego kodu PHP, który służy do generowania strony. Jednak treść i tytuł mogą wymagać wielokrotnych zmian, a zapełniając wartości na podstawie wyświetlanego tekstu, można zagwarantować, że w procesie edycji w miejscu używana będzie najbardziej aktualna wersja. Rysunek 6.2 przedstawia stronę internetową w trakcie edycji w miejscu.

Edycja w miejscu

|

185

Rysunek 6.2. Strona udostępniająca edycję w miejscu

W przypadku anulowania edycji w miejscu wystarczy ukryć elementy formularza potrzebne przy wprowadzaniu zmian i wyświetlić tekst. Jeśli użytkownik zapisze zmiany w tytule lub treści, należy uzyskać dostęp do nowego tekstu i wywołać funkcję odpowiedzialną za aktualizację za pomocą Ajaksa. Aplikacja wyświetla komunikat o zakończeniu aktualizacji (lub wystąpieniu błędu). Choć nie jest to konieczne, warto udostępniać informacje potwierdzające wprowadzenie zmian. Efekt zanikania w kolorze żółtym może sygnalizować sukces, a w czerwonym — niepowodzenie. Żaden z tych efektów nie będzie widoczny dla użytkowników, którzy nie mają uprawnień do edycji. Choć nie jest to niezbędne do zrozumienia ajaksowego komponentu klienckiego, następny punkt zawiera opis kodu PHP odpowiedzialnego za przetwarzanie po stronie serwera. Jednak w innych aplikacjach kod sprawdzający uprawnienia do edycji i pobierający dane może działać inaczej, a operacje te można włączyć do szablonów używanych w danej witrynie. W celu przedstawienia pełnego obrazu aplikacji następny punkt zawiera kod działający na serwerze, jednak możesz opuścić ten fragment i przejść do pozostałej części rozdziału, która dotyczy wydajności, bezpieczeństwa i dostępności.

Strona serwerowa aplikacji Strona serwerowa tego rozwiązania opiera się na aplikacji WordPress, dlatego do sprawdzania uprawnień użytkownika używane są pliki cookie tej aplikacji. WordPress szyfruje katalog z witryną, aby zagwarantować, że nazwa użytkownika i hasło będą niepowtarzalne, dlatego

186

|

Rozdział 6. Dane dynamiczne

trzeba zrobić to samo w aplikacji. Hasło jest szyfrowane dwukrotnie. Przy pobieraniu hasła z bazy danych trzeba użyć funkcji szyfrującej MD5 przed porównaniem go z danymi z pliku cookie. Listing 6.3 przedstawia funkcję checkperms.php. Listing 6.3. Funkcja z pliku checkperms.php sprawdzająca uprawnienia użytkownika

Aplikacja perms.php jedynie wywołuje powyższą funkcję, a następnie informuje, czy dany użytkownik ma uprawnienia do edycji, czy nie:

Edycja w miejscu

|

187

Program PHP przetwarzający żądania jest dość prosty. Pobiera przesłane dane, aktualizuje bazę danych i zwraca informacje zwrotne, co przedstawia listing 6.4. Listing 6.4. Przetwarzanie żądań Ajaksa

Oczywiście we własnej aplikacji warto udostępnić bardziej zrozumiałe komunikaty o błędach i zapewnić ściślejszą kontrolę w zakresie bezpieczeństwa danych używanych do aktualizacji, jednak jest to niezbędne w każdej aplikacji sieciowej — ajaksowej lub nie. Ważne jest, aby pamiętać o użyciu metody POST zamiast GET do pobierania danych za pomocą używanego tu żądania ajaksowego. W przeciwnym razie aplikacja będzie wrażliwa na ataki. Wrażliwość, zabezpieczenia i dostępność omawia następny punkt.

Edycja w miejscu — wydajność, bezpieczeństwo i dostępność Za każdym razem, kiedy programista dodaje do strony możliwość edycji, ryzykuje, że ktoś nieuprawniony uzyska dostęp do aplikacji. Jednak w większości aplikacji platforma jest skonstruowana tak, aby zabezpieczać edycję w miejscu w takim samym stopniu jak inne techniki wprowadzania zmian. Jedyną rzeczą, której nie można zrobić, jest zabezpieczenie samej strony. Przynajmniej nie wtedy, kiedy programista dodaje edycję w miejscu do stron dostępnych innym użytkownikom. Kod na listingu 6.3 używa plików cookie aplikacji WordPress, a edycja w miejscu jest tu tak bezpieczna jak dowolny proces wprowadzania zmian w tej aplikacji. To dobrze. Szczególnie wrażliwy jest moment przetwarzania zmian. Używanie metody POST jest pomocne, ale można dodać następny poziom zabezpieczeń, ponownie testując uprawnienia użytkownika przed zapisaniem wprowadzonych przez niego danych. Choć tej funkcji nie ma w aplikacji, warto także upewnić się, że użytkownik nie dołączył do danych kodu SQL. Pozwala to zapobiec atakowi opartemu na wstrzyknięciu kodu SQL. 188

|

Rozdział 6. Dane dynamiczne

Zapobieganie wstrzyknięciu kodu SQL Większość wrażliwych miejsc w aplikacjach istnieje niezależnie od stosowania Ajaksa. Jednak przy zastosowaniu tej technologii zagrożenia stają się bardziej widoczne. Jednym z nich jest wstrzykiwanie kodu SQL. Wstrzyknięcie kodu SQL ma miejsce, kiedy napastnik umieści fragment kodu SQL na końcu tekstu lub zamiast niego w polu na dane wejściowe formularza. x' where ID = '1'; DROP TABLE wp_users; update wp_posts set post_title='x

Jeśli taki fragment zostanie użyty w programie PHP przedstawionym na listingu 6.3, użycie otrzymanych wartości bez ich przetwarzania doprowadzi do powstania następującej instrukcji SQL: update wp_posts set post_title = 'x' where ID = '1'; DROP TABLE wp_users; update wp_ posts set post_title = 'x' where ID = '$post'

Ponieważ kod SQL jest sklejany z łańcuchów znaków, a jedno polecenie mysql_query pozwala wykonać wiele instrukcji SQL, wystąpi problem: autor strony utraci tabelę użytkowników. Oczywiście, w takich sytuacjach użytkownik musi mieć odpowiednie uprawnienia, a uprawniony właściciel danych niekoniecznie chce wykonywać takie operacje, jednak w przeszłości zdarzały się przypadki łamania plików cookie i będzie się tak działo w przyszłości. Zamiast przetwarzać tekst przesłany do usługi sieciowej w jego oryginalnej postaci, należy przekazać go do funkcji używanej zwykle do usuwania niebezpiecznych danych, takich jak te przedstawione wcześniej. Większość podobnych funkcji, które działają w aplikacjach sieciowych lub platformach do obsługi tradycyjnego aktualizowania danych w sieci, nadaje się także do przetwarzania żądań Ajaksa.

Wydajność i dostępność Zastosowanie edycji w miejscu może poprawić ogólną wydajność w porównaniu z koniecznością wczytywania zwykłego formularza. Tradycyjne formularze zwykle wymagają dużo większej ilości informacji i zasobów, niż jest to konieczne w przypadku prostej edycji jednego pola. Na przykład proste literówki w tytułach i treści blogów łatwiej i taniej jest poprawiać bezpośrednio na wyświetlającej je stronie niż po przejściu do specjalnej strony do edycji blogu. Z kolei do wprowadzania większych zmian lub pisania tekstu od nowa, a także przy jednoczesnym wprowadzaniu zmian w tytule, treści oraz innych polach, lepiej jest użyć pełnej aplikacji. Należy pamiętać, że trzeba przetworzyć poprawki za pomocą funkcji platformy w celu obsługi danych po wprowadzeniu zmian, na przykład formatując informacje w specjalny sposób. Jeśli programista obsługuje pamięć podręczną bazy danych za pomocą własnej platformy, sprawdzanie uprawnień użytkownika odwiedzającego stronę nie powoduje dodatkowych kosztów po stronie systemu — w większości aplikacji takie sprawdzanie i tak ma miejsce. W kodzie na listingu 6.3 ta funkcjonalność wchodzi w skład aplikacji WordPress, a na wielu blogach używana jest specjalna funkcja do umieszczania odnośników typu „Edytuj wiadomość” przy wpisach, co umożliwia ich natychmiastowe otwarcie na stronie przeznaczonej do wprowadzania zmian. Jest to po prostu dodatkowy mały krok w kierunku edycji w miejscu. Edycja w miejscu — wydajność, bezpieczeństwo i dostępność

|

189

Jeśli chodzi o dostępność, odnośniki umożliwiające edycję wpisów są dostępne także w bardziej formalnych środowiskach, co oznacza, że omawiany efekt powinien być całkowicie dostępny — przynajmniej w takim stopniu co zwykłe formularze do edycji. Potrzebny kod można ukryć w elemencie NOSCRIPT, choć nie zalecam takiego podejścia. Edycja w miejscu to dodatek do bardziej formalnych technik wprowadzania zmian, które powinny być dostępne niezależnie od tego, czy obsługa skryptów jest włączona i jakiego rodzaju agent służy do uzyskania dostępu do strony.

Usprawnienia Można łatwo udostępnić edycję w miejscu na więcej niż jednej stronie, umieszczając kod w bibliotece w celu jego wielokrotnego wykorzystania. Aplikacja rozwijająca zdjęcia przedstawiona w rozdziale 5. pokazuje, jak można użyć specyficznej klasy dla wszystkich pól umożliwiających edycję, na przykład inplaceinput dla pól input czy inplacetextarea dla pól textarea. Aby udostępnić te informacje w aplikacji przetwarzającej zmiany, należy nadać polom takie same nazwy, jakie mają tabele:

...

W czasie przetwarzania elementu informacje o tabeli i polach powinny być spójne ze świeżo wygenerowanym elementem do edycji w miejscu, co gwarantuje, że aplikacji można użyć do obsługi dowolnej strony internetowej i dowolnego pola: var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { // Jeśli pole umożliwia edycję i użyto elementu input if (div.className && div.className == 'inplaceinput') { var id = divs[i].id.split("-"); var table = id[0]; var field = id[1]; ... }

Połączenie nazwy klasy, nazwy pola oraz tabeli może posłużyć do wygenerowania odpowiedniego elementu do edycji zawartości w miejscu. W tym celu należy połączyć nazwę pola i tabeli jako identyfikatory, a następnie wstawić je po wyjściowym elemencie: var divs = document.getElementsByTagName('div'); for (var i = 0; i < divs.length; i++) { // Jeśli pole umożliwia edycję i użyto elementu input if (div.className && div.className == 'inplaceinput') { var id = divs[i].id.split("-"); var table = id[0]; var field = id[1]; // Tworzenie nowego elementu input umożliwiającego edycję i zapełnianie go var newDiv = document.createElement('div'); newDiv.className="edit"; var input = document.createElement('input'); input.type = 'text'; input.id = field + '-' + table; input.value = divs[i].firstChild.nodeValue; // Dołączanie wyświetlanego tekstu, dołączanie elementu do elementu nadrzędnego i ustawianie zdarzenia newDiv.appendChild(input); divs[i].parentNode.appendChild(newDiv); aaManageEvent(divs[i],'click',setEdit); } }

190

|

Rozdział 6. Dane dynamiczne

Aplikacja znajduje potrzebny element po wczytaniu strony i tworzy odpowiednie pola do edycji w miejscu, które dołącza do dokumentu. Używając tej techniki, wystarczy dodać plik z kodem JavaScript i określić odpowiednią klasę dla elementów umożliwiających edycję, wiążąc nazwę klasy ze zmienną, która określa, czy edycja dotyczy pola input czy textarea. Następną zaletą używania biblioteki jest to, że pola i elementy formularza do obsługi edycji nie są zagnieżdżone na stronie w trakcie jej wczytywania. W przeciwnym razie, gdyby użytkownik nie był właścicielem wpisu lub nie miał włączonej obsługi skryptów i używał strony za pomocą programu odczytującego tekst, zawartość „ukrytych” pól formularza można by opisać lub odczytać równie łatwo jak zawartość „widocznych” elementów. Nie jest to korzystne. W bardzo podobny sposób działa edycja w miejscu biblioteki Dojo (edycja wewnątrzwierszowa, jak nazywają ją autorzy Dojo). Aby użyć techniki Dojo we własnej aplikacji, należy dołączyć odpowiednie pliki źródłowe tej biblioteki — dojo.js, dojo.widget i dojo.event — i użyć klasy o nazwie inlineEditBox. Różnica między opisanym wcześniej podejściem a rozwiązaniem z biblioteki Dojo polega na tym, że w Dojo intensywnie używany jest deklaratywny HTML, a do odróżniania trybów służy atrybut o nazwie mode. Jednak po zastosowaniu deklaratywnego kodu HTML strona nie przejdzie walidacji i mogą wystąpić problemy w przypadku generowania dokumentów w formacie XHTML. Ponadto Dojo używa do zarządzania operacjami zapisu i anulowania kompletnego formularza z przyciskami, podczas gdy wcześniej omówione rozwiązanie opiera się na polach input poza formularzem i klasach elementów div. Inny problem z deklaratywnym kodem HTML polega na tym, że bez przestrzeni nazw łączenie różnych bibliotek może prowadzić do konfliktów, a udostępnianie takich przestrzeni powoduje dziwne działanie niektórych przeglądarek. Zagadnienie to opisuje Dave Johnson w artykule Declarative Ajax Components and XML Namespaces na blogu pod adresem http://blogs.nitobi.com/dave/?p=131.

Wyróżnianie zmian Wyróżnianie zmian w danych (aktualizacji) to następny efekt Ajaksa, który może znacząco zwiększyć elegancję aplikacji. W rozdziale 4. zobaczyłeś to na przykładzie efektu zanikania w kolorze żółtym, który posłużył do wyróżniania nowego komentarza po jego zapisaniu. Efekt typu „zanikanie i aktualizacja strony” można także zastosować przy usuwaniu elementów. Jednak zamiast żółtego koloru warto użyć czerwonego, aby odróżnić od siebie rodzaje zmian; zresztą można użyć dowolnego koloru, jeśli tylko jest on różny od barwy powiązanej z „pozytywnymi”, „addytywnymi” modyfikacjami.

Sygnalizowanie usunięcia Większość operacji usuwania obejmuje pozbywanie się elementu z listy. Może to być pojedynczy wpis, taki jak miasto na liście miejscowości, lub grupa elementów, na przykład rekord w bazie danych. Dwa składniki ajaksowego usuwania to efekt zanikania, który sygnalizuje zmianę, oraz aktualizacja, polegająca na wyświetleniu strony po usunięciu elementu. Witryny takie, jak Netflix czy Blockbuster, umożliwiają usuwanie elementów z listy, jednak w przypadku Netflix trzeba zaznaczyć usuwany element, a następnie zaktualizować formularz.

Wyróżnianie zmian

|

191

Blockbuster udostępnia małą, reprezentującą śmieci ikonę, którą można kliknąć. Powoduje to usunięcie elementu i aktualizację strony. W aplikacjach takich jak WordPress można usunąć wpis, klikając odnośnik Delete, co powoduje usunięcie wpisu i wszystkich powiązanych z nim rekordów. Witryna Flickr także udostępnia odnośnik Delete, który w tym przypadku służy do usuwania zdjęć. Do usuwania nigdy nie należy używać żądań GET. Jeśli nie można zastosować metody DELETE, trzeba przynajmniej użyć żądania POST HTTP. Nierzadko witryny wyświetlają okno wyskakujące z pytaniem, czy użytkownik jest pewien, że chce usunąć dane. Wyświetlanie takiego pytania zależy od wagi skutków, jakie może mieć ta potencjalnie szkodliwa operacja. Usunięcie filmu z listy nie jest zbyt istotne i łatwo odwrócić skutki tej operacji, dlatego pytanie „Czy jesteś pewien?” nie jest tu konieczne. Jednak usunięcie artykułu z blogu, rekordu z danymi klienta czy elementu z zamówienia jest na tyle ważne, że warto uzyskać dodatkowe potwierdzenie od użytkownika. Aby pokazać, jak zaimplementować usuwanie w Ajaksie, wybrałam kilka wierszy ze wspomnianej wcześniej przykładowej bazy danych. Są one umieszczone w tabeli HTML, a przy każdym z nich widnieje przycisk Usuń teraz dodany za pomocą kodu JavaScript. Zamiast pisać kod efektu zanikania dla operacji aktualizacji lub usuwania, w przykładzie użyję biblioteki Fade Anything Technique (FAT) Adama Michela. Jest to wyspecjalizowana biblioteka, która umożliwia przygotowanie efektu zanikania o dowolnym kolorze, czasie trwania i płynności (liczbie klatek). Bibliotekę Fade Anything Technique (FAT) można pobrać ze strony http://www.axentric. com/posts/default/7. Ta biblioteka bezpośrednio przypisuje funkcję obsługi zdarzenia onload, co może przesłonić funkcje przypisane przez inne biblioteki. Ponieważ obsługa zdarzenia onload z tej biblioteki nie jest niezbędna w efekcie przedstawianym w tym rozdziale, można ją usunąć (znajduje się na końcu biblioteki).

Na potrzeby efektu użyję tabeli HTML, ponieważ silną stroną tych tabel jest właśnie wyświetlanie wierszy danych. Ponadto model DOM udostępnia wyspecjalizowane metody do dodawania i usuwania wierszy tabel. Listing 6.5 przedstawia kod strony klienta aplikacji, włączając w to kod PHP służący do wyświetlania wierszy tabeli i przypisywania odpowiednich klas oraz identyfikatorów. Warto zauważyć, że pierwsza kolumna na stronie zawiera identyfikator wpisu, który jest także przypisywany jako wartość do pola checkbox służącego do usuwania. Aplikacja następnie używa tej wartości do określenia identyfikatorów wszystkich wierszy tabeli oprócz pierwszego. Stosowanie identyfikatorów wpisów w taki sposób pozwala zachować fizyczne powiązanie między bazą danych, polami checkbox i wierszami. Jak wkrótce zobaczysz, ten identyfikator jest także używany przez kod obsługi przycisku Usuń teraz, a kliknięcie tego przycisku powoduje pobranie identyfikatora z pierwszej kolumny w celu usunięcia odpowiedniego rekordu z bazy danych i wiersza z tabeli HTML. Listing 6.5. Strona internetowa z tabelą zawierającą wiersze danych
192

|

Rozdział 6. Dane dynamiczne

mysql_select_db('database'); $qry = "select ID, post_date_gmt, post_title, cat_name, post_status, " . "comment_count from wp_posts, wp_post2cat, wp_categories where " . "post_id = ID and cat_ID = category_id order by ID limit 20"; $rows = mysql_query($qry); ?>

0) { while($row = mysql_fetch_row($rows)) { ?>

Wyróżnianie zmian

|

193

ID	Data	Tytuł	Kategoria	stan	Liczba komentarzy	Usuń

Także w tym przypadku w ramach platformy aplikacji należy użyć szablonowych funkcji danej platformy, a nie samodzielnie wyświetlać dane bezpośrednio za pomocą kodu PHP. Rysunek 6.3 przedstawia tabelę zapełnioną danymi przy wyłączonej obsłudze skryptów. W tym przypadku przycisk Usuń teraz jest niedostępny. Aby usunąć wiersz, użytkownik musi zaznaczyć pola wyboru służące do usuwania, a następnie kliknąć przycisk Usuń zaznaczone.

Rysunek 6.3. Aplikacja do usuwania wierszy w trybie z wyłączoną obsługą skryptów

Jeśli obsługa skryptów jest włączona, po wczytaniu strony aplikacja pobiera każdy wiersz tabeli i dołącza nową kolumnę, która składa się z elementu div ze słowami „Usuń teraz” oraz

194

|

Rozdział 6. Dane dynamiczne

identyfikatora obejmującego identyfikator wpisu. Do tych elementów div przypisywana jest funkcja obsługi zdarzenia onClick. Listing 6.6 przedstawia kompletny kod JavaScript tej aplikacji, znajdujący się w pliku data2.js. Listing 6.6. Kod JavaScript aplikacji przeznaczony do obsługi przycisku Usuń teraz var xmlhttp; var currentId; // Konfigurowanie żądania aktualizującego dane function sendChange(params) { if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); var url = 'process2.php'; xmlhttp.open('POST', url, true); xmlhttp.onreadystatechange = processResponse; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(params); } // Przetwarzanie odpowiedzi function processResponse() { if(xmlhttp.readyState == 4 && xmlhttp.status==200) { fadeRow(); } } window.onload=function() { try { var rows = document.getElementsByTagName('tr'); for (var i = 0; i < rows.length; i++) { var tds = rows[i].getElementsByTagName('td'); // Pobieranie identyfikatora z pierwszej komórki if (tds.length > 1) { var value = tds[0].firstChild.nodeValue; var div = document.createElement('div'); div.className = 'delete'; div.id = "item" + value; var txt = document.createTextNode("Usuń teraz"); div.appendChild(txt); var td = rows[i].insertCell(-1); aaManageEvent(div,'click',rowClick); td.appendChild(div); } } } catch(e) { alert(e); } }; function rowClick(evnt) { evnt = (evnt) ? evnt : window.event; var item = (evnt.currentTarget) ? evnt.currentTarget : evnt.srcElement; currentId = item.id.split("item")[1]; sendChange("id=" + currentId); } function fadeRow(){ Fat.fade_element("tr" + currentId,null,800,"#ff0000"); setTimeout('deleteRow("' + currentId + '")' , 802); }

Wyróżnianie zmian

|

195

function deleteRow(id) { var item = aaElem("item" + id); var row = item.parentNode.parentNode; var table = row.parentNode; table.deleteRow(row.rowIndex); }

Kiedy użytkownik kliknie element div z napisem „Usuń teraz”, aplikacja określi na podstawie identyfikatora tego elementu identyfikator wpisu z bazy danych i przypisze go do wartości globalnej. Żądanie usunięcia danych kierowane do bazy danych aplikacja zgłasza za pomocą metody POST, przesyłając identyfikator wpisu jako parametr. Aby rozwiązanie było bardziej zgodne z podejściem REST, można użyć żądania DELETE HTTP. Jednak ta technika jest obsługiwana bardzo rzadko zarówno po stronie klienta, jak i serwera, dlatego na razie programiści muszą ograniczyć się do stosowania metod GET i POST, które są powszechnie dostępne. Ponieważ w tym przypadku ma miejsce aktualizacja danych, należy użyć metody POST. Jedną z technik, które można zastosować, używając metod DELETE i PUT, jest wykorzystanie metody POST i dołączenie następnego parametru, _method, z wartością PUT lub DELETE, a następnie postępowanie zgodnie z wartością tego parametru po stronie serwera.

Ajaksowa funkcja zwrotna wywołuje funkcję fadeRow, która uruchamia efekt zanikania w wierszu tabeli powiązanym z usuwanymi danymi. Ta funkcja uruchamia także zegar, aby aplikacja wywołała funkcję deleteRow po zakończeniu efektu zanikania. Ta ostatnia funkcja używa modelu DOM i drzewa dokumentu w celu znalezienia nadrzędnego wiersza tabeli i tabeli nadrzędnej, a następnie wywołuje metodę deleteRow modelu DOM na tabeli, przekazując wartość rowIndex wiersza. Z fizycznym usunięciem wiersza ze strony trzeba się wstrzymać do zakończenia efektu zanikania, bo w przeciwnym razie nie tylko może wystąpić dość dziwny efekt wizualny, ale też biblioteka FAT zgłosi szereg błędów, ponieważ element z zanikającym kolorem już nie istnieje. Po stronie serwera wywołana usługa sieciowa powinna w tym przypadku usunąć wpis z blogu i wszystkie powiązane z nim wiersze tabeli, włączając w to komentarze i kategorie. Jednak kod zaplecza aplikacji należy dostosować do używanej bazy danych. Aplikacja może uruchomić efekt zanikania równolegle z ajaksowym żądaniem usługi, jednak zwykle nie warto rozpoczynać procesu zanikania lub usuwania tabeli po stronie klienta, jeśli nie wiadomo, czy proces na zapleczu z powodzeniem zakończył działanie. Jeśli istnieje podejrzenie, że w obsłudze żądania skierowanego do serwera może wystąpić znaczące opóźnienie, należy zastosować dwa efekty. Jeden powinien informować o wystąpieniu zdarzenia click i rozpoczęciu usuwania wiersza, a drugi należy uruchomić po usunięciu danych. Warto jednak pamiętać, aby nie stosować w wierszu tabeli żadnych efektów wizualnych, które powodują konflikt z efektem zanikania. Jeśli programista chce dodać efekt informujący o tym, że operacja jest „w toku”, powinien go umieścić w innym miejscu strony. Wszystkie dotychczas przedstawione techniki zanikania i modyfikacji na stronie oraz wewnątrzwierszowe działają w odpowiedzi na zdarzenia wywołane przez użytkownika. Z kolei następny punkt opisuje technikę sprawdzania wystąpienia zmian w danych i informowania o aktualizacjach.

196

|

Rozdział 6. Dane dynamiczne

Sprawdzanie i wyróżnianie aktualizacji Bloglines (http://bloglines.com), internetowy agregator źródeł RSS, umożliwia rejestrację w kilku źródłach. Po skonfigurowaniu witryny można uzyskać do niej dostęp za pomocą dowolnej maszyny, aby zobaczyć, czy dostępne są aktualizacje, a następnie uzyskać do nich dostęp poprzez źródła RSS. Witryna Bloglines używa ramek. W lewej ramce znajduje się lista subskrypcji, a w prawej — obszar do czytania artykułów. Firma udostępnia także panel do zadań administracyjnych, który umożliwia dodawanie i usuwanie źródeł, grupowanie ich i wykonywanie innych operacji. Z tej witryny korzystam już od dłuższego czasu. Niedawno w witrynie Bloglines pojawił się nowy efekt: sprawdzanie i wyróżnianie aktualizacji. Jeśli użytkownik ma otwartą w przeglądarce stronę ze źródłami, Bloglines co kilka minut wysyła ajaksowe żądanie na serwer, aby sprawdzić, czy nie zaszły zmiany. Jeśli wykryje modyfikacje, wykonuje trzy operacje:

1. Wyświetla półprzezroczysty komunikat na dole lewej ramki. Ten komunikat zawiera informację, że dostępne są nowe artykuły, a także podaje ich liczbę.

2. Modyfikuje liczbę przy źródle zawierającym nowe artykuły i zmienia czcionkę jego nazwy na pogrubioną, jeśli po otwarciu witryny Bloglines źródło to nie zawierało żadnych nowych informacji.

3. Zmodyfikowany element rozbłyska na żółto, co pozwala wyróżnić go spośród innych źródeł z nieprzeczytanymi informacjami.

Ten efekt robi duże wrażenie i nie jest zbyt skomplikowany. Kluczowe jest określenie, jak często wysyłać ajaksowe żądanie, aby nie obciążać nadmiernie serwera nowymi żądaniami. Następnie wystarczy znaleźć element na liście (w witrynie Bloglines używane są elementy ul i li), zaktualizować tekst, informując o aktualizacji (i zmienić klasę stylu, aby dodać pogrubienie), wyróżnić element, a następnie wyróżnić komunikat informujący o zmianach. Aby zademonstrować sprawdzanie zmian, wróćmy do aplikacji z komentarzami z rozdziału 4. Utworzenie nowego elementu w tej aplikacji powoduje dodanie go bezpośrednio do strony i wyróżnienie za pomocą efektu zanikania, co informuje o jego dodaniu. Aby aplikacja była bardziej interaktywna, można ją wzbogacić o sprawdzanie zmian. Oryginalna wersja aplikacji nie używa informacji pochodzących bezpośrednio z bazy danych, dlatego należy zmodyfikować ją tak, aby pobierała komentarze z bazy WordPress, nadając im specyficzny identyfikator wpisu. Można też zastosować bibliotekę addingajax.js, a także bibliotekę FAT użytą w poprzednim przykładzie. W nowej wersji aplikacji nie ma podglądu komentarzy na żywo, co pozwala się skupić na zmodyfikowanej liście z komentarzami. Listing 6.7 przedstawia nową wersję aplikacji wraz z kodem PHP służącym do pobierania i wyświetlania tekstu komentarza. Na stronie został mały fragment kodu JavaScript — identyfikator wpisu. Ustawiając go lokalnie w kodzie JavaScript, można łatwo zmienić aplikację tak, aby obsługiwała także inne wpisy. Listing 6.7. Strona internetowa z aktualizacjami komentarzy na żywo
Wyróżnianie zmian

|

197

// o wpis, jeśli podany jest jego identyfikator mysql_connect('localhost','username','password'); mysql_select_db('database'); $rows = mysql_query("select comment_ID, comment_author, comment_content from wp_comments where comment_post_ID = '$post' AND comment_approved = '1' order by comment_ID"); ?>

Bieżące komentarze:

0) { $ctr = 0; while($row = mysql_fetch_row($rows)) { ?>

198

|

Rozdział 6. Dane dynamiczne

Komentarz:

W powyższej stronie nie ma nic specjalnego. Aplikacja pobiera komentarze z bazy danych, a kod PHP zagnieżdżony na stronie przechodzi w pętli po informacjach, wyświetlając komentarze uporządkowane według identyfikatorów. W pliku getcomments.js zachodzi wiele operacji. Zawiera on funkcjonalność pozwalającą natychmiast zobaczyć komentarze, które są wyświetlane na liście. Aby zagwarantować, że żaden komentarz nie powtarza się na liście w wyniku ajaksowej aktualizacji, można użyć pewnej sztuczki modelu DOM i upewnić się, że danego komentarza nie ma jeszcze na stronie. Każdy element div z komentarzem ma niepowtarzalny identyfikator oparty na identyfikatorze danego komentarza. Jeśli element o danym identyfikatorze nie istnieje, aplikacja dołącza go do listy. Listing 6.8 zawiera kompletny plik z kodem JavaScript. Warto zwrócić szczególną uwagę na zastosowanie metody setInterval w funkcji setUp, a także na metody checkNewName i updateComment. Te metody zarządzają aktualizowaniem komentarzy na żywo, sprawdzaniem dostępności nowych komentarzy w bazie danych co 15 sekund, przechodzeniem po liście komentarzy, sprawdzaniem, czy istnieje już element strony o danej nazwie, i ignorowaniem go, jeśli dany element jest już na stronie. Jeśli określony element jeszcze nie istnieje, aplikacja dołącza nowy komentarz do listy za pomocą nowej funkcji do obsługi komentarzy, appendComment. Listing 6.8. Kod JavaScript do zarządzania komentarzami // Zmienna globalna var xmlhttp; aaManageEvent(window,"load",setUp); function setUp() { aaManageEvent(aaElem('commentform'),"submit",saveComment); setInterval(checkNewComment,15000); } function checkNewComment() { if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; xmlhttp.open('GET', 'getcomments.php?post=' + post, true); xmlhttp.onreadystatechange = updateComments; xmlhttp.send(null); } function updateComments() { if(xmlhttp.readyState == 4 && xmlhttp.status==200) { eval("var polled = " + xmlhttp.responseText); for (var i = 0; i < polled.length; i++) { var polledId = "div" + polled[i].id;

Wyróżnianie zmian

|

199

var elem = aaElem(polledId); if (!elem) { appendComment(polled[i]); } } } } // Zapisywanie nowego komentarza function saveComment(evnt) { evnt = (evnt) ? evnt : window.event; aaCancelEvent(evnt); if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); var commentText = document.getElementById("comment").value; modText = commentText.split(/\n/).join("
"); var param = "comment=" + modText; xmlhttp.open('POST', 'addComment.php', true); xmlhttp.onreadystatechange = addComment; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(param); return false; } function addComment() { if(xmlhttp.readyState == 4 && xmlhttp.status==200) { eval("var newComment = " + xmlhttp.responseText); appendComment(newComment); } } function appendComment(comment) { var newDiv = document.createElement("div"); var newName = "div"+comment.id; newDiv.setAttribute("id",newName); newDiv.setAttribute("class","comment"); newDiv.innerHTML = comment.content; aaElem("list").appendChild(newDiv); Fat.fade_element(newName,null,800,"#ffff00","#eeeeee"); }

Efekt zanikania w żółtym kolorze, sygnalizujący pojawienie się nowego komentarza, kończy się jaśniejszym odcieniem szarego niż barwa tła innych komentarzy, co pozwala dyskretnie wyróżnić nowy element. Aplikacja dołącza nowe komentarze do listy, nawet jeśli są nieaktualne, ponieważ były poprawiane i dopiero niedawno zaakceptowano je. Gwarantuje to, że użytkownik czytający komentarze nie będzie rozpraszany przez wstawianie komentarzy na listę, co mogłoby prowadzić do przesuwania istniejących komentarzy w dół w trakcie ich lektury. Ta technika staje się bardziej skomplikowana, jeśli komentarze można umieszczać w wątkach (to zagadnienie wykracza poza zakres tego rozdziału). Ważne jest, by zobaczyć, jak aplikacja działa po stronie serwera przy dostępie do zaktualizowanych komentarzy. Kod działający po stronie serwera jest przedstawiony na listingu 6.9. Listing 6.9. Usługa sieciowa w języku PHP, która używa zaktualizowanych komentarzy
200

|

Rozdział 6. Dane dynamiczne

mysql_select_db('database'); $rows = mysql_query("SELECT comment_ID,comment_author,comment_content from wp_comments where comment_post_ID = '$post' and comment_approved = '1' order by comment_ID"); if ($rows && mysql_num_rows($rows) > 0) { $str = "["; while($row = mysql_fetch_row($rows)) { if ($str != '[') $str.=","; $str.= "{ id : '$row[0]', autor : '$row[1]', treść : \"$row[2]\" }"; } $str.="]"; } echo $str; } else { echo "no post"; } ?>

Ta aplikacja używa formatu JSON i zwraca tablicę obiektów reprezentujących komentarze. Trzeba dostosować także aplikację zapisującą nowe komentarze, aby zwracała obiekty tego samego typu, ponieważ do dołączania nowych komentarzy do strony służy funkcja appendComment, która oczekuje obiektu reprezentującego komentarz. Rysunek 6.4 przedstawia aplikację w trakcie aktualizowania.

Rysunek 6.4. Aplikacja sprawdzająca aktualizacje komentarzy

Wyróżnianie zmian

|

201

Ten przykład ilustruje, ile zmiennych elementów może mieć efekt taki jak aktualizacja nowych danych na żywo. Jednak sam proces nie jest zbyt skomplikowany — wymaga jedynie dużej ilości kodu. Znaczną jego część można przekształcić na biblioteki, co umożliwia aktualizację na żywo cen produktów, liczby dostępnych elementów, liczby zarejestrowanych osób i tak dalej — niemal w każdej sytuacji, kiedy wielu użytkowników używa danego elementu, a działania poszczególnych osób mają wpływ na innych. Oczywiście, pod względem wydajności warto zminimalizować częstotliwość dostępu do bazy danych. Na przykład można umieścić najnowsze komentarze do każdego wpisu w pamięci podręcznej na 5 lub 10 sekund, a następnie dodawać do tej pamięci poszczególne ajaksowe żądania strony internetowej. Można dopasować ten czas, aby uwzględnić potrzeby użytkowników i zasoby aplikacji. Szczerze mówiąc, jeśli strona jest bardzo obciążona, nie zalecam stosowania aktualizacji na żywo, chyba że stanowi ona kluczowy element funkcjonalności aplikacji. Jednak jeśli system poradzi sobie z dodatkowym obciążeniem, aktualizacje na żywo mogą być doskonałą techniką. Jest to także dostępny efekt, co opisuje następny punkt.

Jeszcze raz o dostępności aktualizacji na stronie W przypadku sprawdzania komentarzy to, że programy odczytujące tekst strony lub powiększające obraz nie wychwycą zmian, nie stanowi większego problemu, ponieważ użytkownicy mogą odświeżyć stronę i otrzymać nowe dane. Jest to tradycyjne działanie aplikacji tego typu, dlatego dynamiczne aktualizowanie danych na stronie nie powoduje utraty funkcjonalności. Jednak w przypadku edycji na stronie przedstawionej na listingu 6.1, usuwania wierszy z listingu 6.5 czy dodawania komentarzy z listingu 6.7 aktualizowanie danych na stronie może być problemem, ponieważ programy odczytujące tekst strony prawdopodobnie nie wykryją zmian. Jedyny sposób na to, żeby użytkownik dowiedział się o powodzeniu aktualizacji, polega na odświeżeniu strony i sprawdzeniu danych — takie rozwiązanie jest nie do przyjęcia. Jednym z rozwiązań tego problemu jest udostępnianie pola komunikatu, które otwiera się i informuje o udanym usunięciu danych. Jednak psuje to efekt zanikania, ponieważ stosowanie obu tych technik powoduje pewien nadmiar. Inne podejście polega na udostępnieniu w aplikacji opcji, dzięki której użytkownik może określić, jak chce otrzymywać powiadomienia o zmianach. Jednym sposobem może być pole komunikatu z informacjami, innym — zanikanie i usuwanie wiersza w miejscu. Dokonany wybór można zapisać w pliku cookie i odpowiednio zmienić działanie programu. Co się jednak stanie, jeśli obsługa skryptów jest wyłączona? Tu znajduje zastosowanie stopniowe usprawnianie — należy utworzyć aplikację działającą bez skryptów, a następnie zmodyfikować ją.

Usuwanie na stronie po raz wtóry W czasie tworzenia „dostępnych” aplikacji ajaksowych pierwszy pomysł może wiązać się z powszechnym stosowaniem NOSCRIPT w celu udostępniania alternatywnych opcji dla skryptów, a nawet utworzeniem całkowicie odrębnych stron, wyświetlanych, jeśli użytkownik zasygnalizuje, że używa tylko klawiatury, korzysta z programu odczytującego tekst strony lub ma wyłączoną obsługę skryptów. 202

|

Rozdział 6. Dane dynamiczne

Wróćmy jednak do wcześniejszego przykładu, listingu 6.1. Są tam dostępne opcje umożliwiające edycję danych w miejscu lub kliknięcie odnośnika, który otwiera odrębną stronę z formularzem. Jeśli obsługa skryptów jest włączona, można użyć dowolnej z tych technik, a jeśli skrypty nie działają — tylko tej drugiej. Inaczej mówiąc: edycja w miejscu to dodatkowa opcja, uzupełniająca bardziej tradycyjne strony z formularzami. To samo dotyczy przykładu z przyciskiem Usuń teraz. Wcześniej, na rysunku 6.4, przedstawiona była strona z wyłączoną obsługą skryptów. Rysunek 6.5 przedstawia tę samą stronę, tym razem z działającymi skryptami. Opcje dostępne bez obsługi skryptów wciąż znajdują się na stronie. Jednak obecnie można też usunąć dane za pomocą przycisku Usuń teraz.

Rysunek 6.5. Poprzednia aplikacja, tym razem z włączonym usuwaniem na stronie

Bez obsługi skryptów można umożliwić usuwanie elementów albo za pomocą przycisku Usuń na stronie z formularzem dotyczącym danego obiektu, albo udostępniając pole wyboru przy każdym elemencie listy. W wersji widocznej na rysunku 6.4 aplikacja umożliwia usuwanie wpisów za pomocą pola wyboru. W tym przypadku użytkownik może przejść po liście, zaznaczyć pola wyboru usuwanych elementów, a następnie jednocześnie usunąć zaznaczone wpisy. Przesłanie strony powoduje uruchomienie tradycyjnej aplikacji działającej po stronie serwera, która przetwarza formularz, usuwa elementy i ponownie wyświetla stronę wraz z komunikatem informującym o liczbie usuniętych (lub zaktualizowanych, dodanych i tak dalej) wpisów.

Jeszcze raz o dostępności aktualizacji na stronie

|

203

Zastosowanie pól wyboru ułatwia dostęp za pomocą klawiatury i nie wymusza korzystania z myszy. Osoba poruszająca się po stronie za pomocą klawiatury może użyć klawisza Tab do przechodzenia do wybranych pól wyboru i zaznaczania elementów przeznaczonych do usunięcia.

Ponownie o dodawaniu w miejscu Aplikacje z dodawaniem w miejscu, takie jak witryna z komentarzami przedstawiona na listingu 6.7, są z natury dostępne. Przy każdym odświeżeniu strony wyświetlane są wszystkie bieżące komentarze. Jedyna zmiana niezbędna w celu umożliwienia dodawania komentarzy przy braku obsługi skryptów polega na ponownym ustawieniu przycisku Prześlij formularza, aby powodował przetworzenie komentarza w tradycyjny sposób. Następnie można dodać element div z napisem „Dodaj komentarz teraz”, podobny do elementów z napisem „Usuń teraz” opisanych w rozdziale 5. Te nowe elementy są przeznaczone dla użytkowników, którzy chcą korzystać z Ajaksa i mają włączoną obsługę skryptów. Prowadzi to do następnego ciekawego zagadnienia związanego z udostępnianiem Ajaksa obok bardziej tradycyjnych sposobów aktualizacji przesyłanych danych: nie warto wyświetlać opcji ajaksowych, jeśli użytkownik ma wyłączoną obsługę skryptów. Nie jest istotne, że wyświetlanie ich nie może nikomu „zrobić krzywdy” (ponieważ kliknięcie elementu div nie prowadzi do wykonania żadnych operacji), ale takie opcje mogą mylić użytkowników. Sposobem na rozwiązanie tego problemu jest dodanie do strony przycisków opcji „Użyj Ajaksa” (lub z podobnym tekstem) za pomocą skryptów. Taki przycisk nie będzie widoczny, jeśli obsługa skryptów jest wyłączona, a jeśli skrypty działają, aplikacja wyświetli go. W celu utworzenia tego efektu należy wprowadzić trzy zmiany w pliku getcomments.js. Po pierwsze, w funkcji setUp() należy usunąć funkcję obsługi zdarzeń przypisaną do przycisku Zapisz formularza: function setUp() { aaManageEvent(aaElem('commentform'),"submit",saveComment); setInterval(checkNewComment,15000); }

Ponieważ operacja dotyczy wbudowanej obsługi zdarzenia przycisku formularza, można anulować niepotrzebne zdarzenie, dzięki czemu zostanie usunięte z funkcji saveComment: // Zapisuje nowy komentarz function saveComment(evnt) { evnt = (evnt) ? evnt : window.event; aaCancelEvent(evnt); if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); var commentText = document.getElementById("comment").value; modText = commentText.split(/\n/).join("
"); var param = "comment=" + modText; xmlhttp.open('POST', 'addComment.php', true); xmlhttp.onreadystatechange = addComment; xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xmlhttp.send(param); return false; }

204 |

Rozdział 6. Dane dynamiczne

Po wczytaniu obiektu window tworzona i uruchamiana jest nowa funkcja, która tworzy nowy przycisk „Użyj Ajaksa”: aaManageEvent(window,"load",function() { var elem = document.createElement('div'); elem.id = 'saveajax'; elem.className = 'saveajax'; var txt = document.createTextNode("Zapisz komentarz teraz"); elem.appendChild(txt); aaManageEvent(elem,"click",saveComment); aaElem("save").parentNode.insertBefore(elem,aaElem("save").nextSibling); });

To wystarczy, aby strona była dostępna nawet przy wyłączonej obsłudze skryptów.

Walidacja na żywo Nic nie irytuje mnie bardziej niż rejestrowanie się w witrynie, która prosi o podanie nazwy użytkownika, a następnie wyświetla informację „Ta nazwa jest już zajęta. Wybierz inną”, zwykle z prymitywnie zmodyfikowaną wersją podanej nazwy jako sugestią. Jeszcze gorsza sytuacja ma miejsce, kiedy użytkownik musi przesłać formularz, a ten zostaje odrzucony z powodu niepoprawnej nazwy użytkownika lub innych danych. Jeśli aplikacja jest solidna, dane zostaną zachowane, jednak i tak zakłóca to proces rejestrowania się, a jeśli jego przebieg naprawdę mnie zirytuje, nawet go nie kończę. Jest to następny obszar, w którym można dyskretnie dodać Ajaksa. Przy jego użyciu można udostępnić sprawdzanie na żywo poprawności wpisanych danych bezpośrednio po przejściu użytkownika do innego pola lub kliknięciu przycisku w celu przesłania formularza, jednak jeszcze przed jego wysłaniem. To nie to samo co typowa walidacja po stronie klienta, która zwykle polega na sprawdzeniu, czy pole zostało wypełnione lub czy adres e-mail ma prawidłową składnię. Nie, Ajax służy w tym przypadku do sprawdzenia poprawności wartości względem bazy danych i zwraca informacje o błędzie udostępniane przez usługę, a wszystko to na wyjściowej stronie. Użyłam określenia „dyskretnie”, ponieważ jeśli obsługa skryptów jest wyłączona, błędy zostaną wykryte po zwykłym przesłaniu formularza. Skrypty to usprawnienie, a nie konieczność.

W aplikacji WordPress użytkownik może zarejestrować się, jeśli pozwoli na to właściciel blogu. W trakcie rejestracji użytkownik musi podać nazwę użytkownika i adres e-mail, a hasło otrzyma na podany adres. Po uzyskaniu dostępu do systemu użytkownik może zalogować się i podać imię oraz nazwisko, adres URL, używaną nazwę i tak dalej. Przedstawione rozwiązanie uwzględnia wszystkie te elementy i udostępnia formularz, który umożliwia podanie nazwy użytkownika, adresu e-mail, imienia, nazwiska i wyświetlanej nazwy. Spośród tych pól na żywo sprawdzana jest poprawność nazwy użytkownika. Listing 6.10 przedstawia stronę internetową z prostym formularzem zawierającym kilka pól, włączając w to kluczowe w tym przykładzie pole z nazwą użytkownika. Oprócz odnośników do plików ze skryptami aplikacji na stronie nie ma nic, co odróżniałoby ją od miliarda innych współczesnych stron z formularzami.

Walidacja na żywo

|

205

Listing 6.10. Prosta strona internetowa z formularzem

Rejestracja

Preferowana nazwa użytkownika: Adres e-mail: Imię: Nazwisko: Wyświetlana nazwa:

Taka strona przejdzie walidację w zakresie XHTML, CSS i dostępności. Jednak jeśli obsługa skryptów jest włączona, a użytkownik wpisze w polu na nazwę użytkownika istniejący iden-

206

|

Rozdział 6. Dane dynamiczne

tyfikator, na przykład admin, pojawi się komunikat o błędzie z informacją, że dana nazwa jest już zajęta (rysunek 6.6). Ten komunikat będzie widoczny do czasu przesłania formularza lub wpisania nowej nazwy.

Rysunek 6.6. Demonstracja walidacji na żywo pola z nazwą użytkownika

Listing 6.11 przedstawia plik validation.js, który zawiera kod do obsługi walidacji. Jego działanie jest dość proste: dołącza zdarzenie blur do pola docelowego (username), a po uruchomieniu tego zdarzenia pobiera wartość z pola i zgłasza żądanie Ajaksa, aby sprawdzić, czy dana nazwa już istnieje. Jeśli liczba pasujących nazw to 1, aplikacja wyświetla komunikat o błędzie. Listing 6.11. Kod JavaScript odpowiedzialny za walidację na żywo var xmlhttp; aaManageEvent(window,"load", function() { aaManageEvent(aaElem("username"),"blur", validate); }); function validate() { // Usuwa istniejące komunikaty var error = aaElem('errorMessage'); if (error) error.parentNode.removeChild(error); if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); if (!xmlhttp) return; var username = aaElem("username").value; xmlhttp.open('GET', 'validate.php?username=' + username, true); xmlhttp.onreadystatechange = processValidation; xmlhttp.send(null); } function processValidation() { if(xmlhttp.readyState == 4 && xmlhttp.status==200) { var response = xmlhttp.responseText; if (parseInt(response) == 1) validateError(); } }

Walidacja na żywo

|

207

function validateError() { var div = document.createElement('div') div.appendChild(document.createTextNode("Podana nazwa jest już zajęta")); div.className = "error"; div.id="errorMessage"; aaElem('myform').appendChild(div); }

Po uruchomieniu zdarzenia blur dla pola username pierwszą operacją, jaką wykonuje aplikacja, jest sprawdzenie, czy na stronie znajduje się już komunikat o błędzie. Jeśli tak, należy go usunąć. Następnie zgłaszane i przetwarzane jest żądanie ajaksowe, a aplikacja odpowiednio reaguje na nie. Walidacja na żywo działa naprawdę dobrze, zwłaszcza w przypadku pól takich jak username, które mogą wymagać wielu prób przed podaniem prawidłowej wartości. A co z problemami z wydajnością związanymi z operacjami tego typu? Następny punkt opisuje zagadnienia dotyczące wydajności i dwuetapowego zatwierdzania, a także inne tematy związane z dostępem do baz danych poprzez ajaksowy fronton.

Wydajność i dwuetapowe zatwierdzanie Zasoby, które najbardziej wymagają ochrony w aplikacjach sieciowych, są specyficzne dla operacji wejścia-wyjścia (ang. input/output — IO). Są to: zapis do pliku i połączenia z bazą danych. W obu przypadkach zwykle występują ograniczenia dotyczące liczby „wątków” (równoległych ścieżek wykonania), a jeśli programista dodaje setki nowych żądań Ajaksa, które wymagają jednej z tych operacji IO, może wystąpić blokada. Żądania Ajaksa oczekują wtedy na odpowiedź z serwera, który blokuje dane żądanie, ponieważ zasoby są niedostępne. W szczególności aktualizacja bazy danych często prowadzi do dwóch operacji: połączenia z bazą danych i zapisu do pliku. Dlatego warto ocenić każde zastosowanie Ajaksa, uwzględniając liczbę użytkowników, którzy mogą jednocześnie używać danej usługi Ajaksa, a także liczbę równoległych połączeń obsługiwanych przez system.

Prawidłowe współdziałanie Ajaksa z innymi elementami aplikacji Usuwanie na stronie, opisane we wcześniejszej części rozdziału, może zwiększyć obciążenie aplikacji sieciowych. W przypadku tradycyjnego podejścia, w którym trzeba zaznaczyć każdy usuwany element, usuwanie wszystkich danych obywa się przy użyciu jednego połączenia z bazą danych. Cała ta operacja jest obsługiwana jako jedna transakcja, która nawiązuje połączenie, rozpoczyna transakcję usuwania, usuwa wszystkie elementy, kończy transakcję, a następnie zamyka połączenie. Usuwanie za pomocą Ajaksa wymaga odrębnego połączenia dla każdej operacji. Obciążenie związane z koniecznością otwierania połączenia dla każdego żądania ajaksowego zależy od tego, jak proste i szybkie jest to żądanie, a także jak szybko aplikacja zwalnia zasoby bazy danych. Ponadto żądania usunięcia są uruchamiane wraz z innymi ajaksowymi operacjami dostępu do bazy danych, z których każda współzawodniczy o cenne połączenia, a wszystkie pozornie są mało kosztowne.

208 |

Rozdział 6. Dane dynamiczne

Walidacja na żywo to następny przypadek dostępu do bazy danych, który początkowo wydaje się niewinny, jednak po dodaniu tego efektu do każdego pola wszystkich formularzy aplikacja może wkrótce zablokować się z powodu dużej liczby połączeń z bazą danych. W czasie tworzenia aplikacji ajaksowych, które używają ograniczonych zasobów, takich jak połączenie z bazą danych, warto zastanowić się nad zyskami w łatwości użycia, jakie daje dany efekt, i kosztami potrzebnych zasobów. Ponadto zawsze, kiedy to możliwe, warto łączyć efekty, na przykład po to, aby można było użyć jednego połączenia z bazą danych do obsługi grupy efektów. W aplikacji przedstawionej na listingu 6.11 walidacja nazwy użytkownika jest uzasadniona, ponieważ znalezienie niepowtarzalnej nazwy w systemie z wieloma użytkownikami może być trudne. Jest to jeden z obszarów, w których użytkownik może się szybko zirytować koniecznością przesyłania całego formularza tylko po to, aby dowiedzieć się, że jedno pole jest nieprawidłowe (w tym przypadku wynika to z użycia zajętej nazwy użytkownika). Zastosowana technika może także poprawić wydajność aplikacji, ponieważ zamiast przetwarzać cały formularz, serwer musi jedynie odpowiedzieć na proste żądanie ajaksowe dotyczące jednego pola. Jednak w przypadku walidacji na żywo kilku pól lepszym rozwiązaniem jest udostępnienie odrębnego przycisku do sprawdzania poprawności, który uruchamia walidację na żywo dla wszystkich pól w jednym żądaniu ajaksowym, na przykład w połączeniu z dowolną inną, niezależną od żądań Ajaksa walidacją, taką jak sprawdzanie formatu adresu e-mail. Aplikacja może następnie wyświetlić wszystkie błędy naraz, pozwalając użytkownikom wprowadzić niezbędne poprawki przed przesłaniem formularza. Są to dobre przykłady usprawnienia witryny za pomocą Ajaksa przy zachowaniu jej dostępności. Ostatni problematyczny obszar obejmuje transakcje z bazą danych i takie zagadnienia, jak blokowanie wierszy oraz dwuetapowe zatwierdzanie.

Ajax, pamięć podręczna i transakcje z bazą danych Walidacja na żywo przedstawiona na listingu 6.11, uruchamiana w wyniku wyjścia użytkownika z pola z nazwą, nie prowadzi do wyświetlenia komunikatu, jeśli dana nazwa użytkownika nie jest zajęta. Co się jednak stanie, jeśli inna osoba odwiedzi witrynę w tym samym czasie i użyje takiej samej nazwy, zanim pierwszy użytkownik prześle formularz? W aplikacjach bazodanowych w czasie wprowadzania zmian w wierszu tabeli baza danych zwykle blokuje możliwość modyfikowania danego wiersza przez innych użytkowników. Zapobiega to równoległemu wprowadzaniu zmian w tych samych danych, co mogłoby prowadzić do braku zgodności w danych wyświetlanych różnym użytkownikom i niestabilnego działania aplikacji. W Ajaksie, zwłaszcza przy walidacji pól formularza, wprowadzanie przez kilku użytkowników zmian w tej samej tabeli bazy danych, a nawet w tym samym wierszu, nie powoduje blokady bazy danych zapobiegającej manipulowaniu danymi, które mogą być już nieaktualne z powodu zmian wprowadzonych przez inne osoby. Pierwszym pomysłem może być próba naśladowania blokady obowiązującej w bazach danych. Jednak nie należy tego robić! Nawet jeśli możliwe jest naginanie zasad działania internetu za pomocą Ajaksa, nie można obejść reguł bezpiecznego przebiegu transakcji bazodanowych, a nawet nie należy tego próbować.

Wydajność i dwuetapowe zatwierdzanie

| 209

Co ciekawe, na ratunek przychodzi tu dostępność aplikacji. W przykładzie z nazwą użytkownika po udanej walidacji danych wciąż trzeba przesłać resztę formularza. Dzięki umożliwieniu tradycyjnego przesyłania formularza w tym momencie dane zostaną zaktualizowane lub dodane, a jeśli naruszone zostaną jakiekolwiek zasady bazy danych, na przykład nazwa użytkownika okaże się zajęta, aplikacja zwróci komunikat i użytkownik będzie mógł rozwiązać problem tak, jakby nie zastosowano Ajaksa. Może to nieco irytować, jednak prawdopodobnie mniej niż konieczność przesyłania formularza za każdym razem, gdy nazwa nie może zostać wybrana. Bardzo prawdopodobne jest, że jeśli walidacja nazwy powiedzie się, także przesyłanie formularza zakończy się powodzeniem. Można spróbować umieścić nazwę użytkownika w pamięci podręcznej na podstawie żądań walidacji, zapobiegając w ten sposób użyciu danej nazwy przed przesłaniem formularza. Co się jednak stanie, jeśli użytkownik nigdy nie skończy wypełniać formularza lub nie prześle go? Jeśli nazwa użytkownika lub inne dane po walidacji zostały zmienione w trakcie przesyłania formularza tak, że nie są już prawidłowe, próba przesłania nie powiedzie się, a użytkownik otrzyma komunikat o przyczynie niepowodzenia. W większości przypadków, jeśli zastosowanie Ajaksa jest dyskretne, dostępne jest alternatywne rozwiązanie dla efektów ajaksowych w postaci zwykłych mechanizmów sieciowych, które obejmują standardowe operacje na bazie danych. Próba przechytrzenia i obejścia tego systemu znacznie zwiększa złożoność aplikacji, nie przynosząc żadnych prawdziwych korzyści. Jeśli emulacja blokowania na poziomie wierszy nie jest możliwa ze względu na walidację, co z mechanizmem podobnym do dwuetapowego zatwierdzania — zatwierdzaniem kompletnej aktualizacji po umożliwieniu aktualizacji poszczególnych elementów za pomocą Ajaksa? Dobry przykład takiego działania to formularz zaimplementowany jako strona z zakładkami, na której zakończenie wypełniania jednej sekcji przez użytkownika powoduje jej walidację lub zapisanie. Kusi, aby zapisać gotowe dane w produkcyjnej bazie danych w celu zachowania informacji, jednak jest to błąd. Jeśli użytkownik nigdy nie uzupełni danych, w systemie produkcyjnym znajdzie się dużo niepotrzebnych informacji, a ich wpływ na ogólną wydajność może być tylko negatywny. Jeśli wieloczęściowy formularz nie wymaga zachowania dłużej, niż trwa sesja, można sprawdzić poprawność danych za pomocą Ajaksa, ale zapisać je lokalnie, w pamięci, do czasu uzupełnienia informacji. Następnie należy przesłać formularz bez stosowania Ajaksa i zaktualizować bazę danych. Jeśli aplikacja ma zapisać formularz poza sesją, można użyć plików cookie do zapisania większości danych lub zastosować tabele pośrednie z limitem czasu, z których niekompletne dane są usuwane po upływie określonego czasu lub po wybranej dacie. Kiedy użytkownik ponownie otworzy formularz, do jego zapełnienia posłużą zapisane dane, a tymczasowy magazyn będzie można opróżnić. Kiedy użytkownik uzupełni informacje, dane będzie można przetworzyć w zwykły sposób — tak jak bez obsługi skryptów. Co z tego wynika? To, że aplikacja używa Ajaksa, a żądania są zgłaszane w obrębie strony bez konieczności jej całkowitego odświeżania, nie oznacza jeszcze, że trzeba zmieniać architekturę zaplecza, dodając różne zastępcze blokady czy ajaksowe dwuetapowe zatwierdzanie w ciekawym jasnozielonym kolorze. Modyfikowanie projektu kodu zaplecza ze względu na zmiany we frontonie od dawna jest uważane za złe podejście, a Ajax nie zmienia dobrych praktyk projektowania oprogramowania.

210

|

Rozdział 6. Dane dynamiczne

Na zakończenie rozdziału poznasz wybrane biblioteki zewnętrzne, które udostępniają w gotowej postaci niektóre z najbardziej popularnych ajaksowych efektów związanych z danymi.

Efekty bibliotek zewnętrznych służące do obsługi danych Dołączanie efektów Ajaksa do aplikacji nie jest zbyt trudne, a jeśli programista najpierw zaprojektował stronę przy użyciu tradycyjnych technologii sieciowych, a następnie dodaje skrypty i Ajaksa, rozwiązanie będzie dostępne i dyskretne. Wiele efektów Ajaksa nie wymaga nawet wiele kodu, jeśli programista użyje bibliotek zewnętrznych. W tym ostatnim punkcie poznasz niektóre z popularnych ajaksowych efektów do obsługi danych, udostępniane przez różne biblioteki Ajaksa. Dzięki temu zarówno zobaczysz te efekty, jak i poznasz więcej bibliotek, które warto włączyć do zestawu narzędzi.

Tworzenie formularzy i zarządzanie nimi Choć żądania Ajaksa sprawiły, że nie trzeba już tak często stosować tradycyjnych formularzy, do zarządzania większością transakcji wciąż służą formularze. Niestety, obsługa formularzy wymaga dużo wysiłku. API biblioteki qForms to wyspecjalizowany interfejs, który udostępnia wiele technik walidacji formularzy i ustalania ograniczeń. W odróżnieniu od wielu innych bibliotek Ajaksa qForms ma doskonałą dokumentację (http://pengoworks.com/qforms/docs). Są pewne witryny do tworzenia formularzy oparte na Ajaksie, którym warto się przyjrzeć choćby po to, aby zobaczyć, jak zastosowano w nich Ajaksa. Jedna z nich to WuFoo (http://wufoo.com). Inne to jotForm (http://www.jotform.com) i BlueForm (http://www.theblueform.com). Wszystkie te witryny wymagają rejestracji i warto sprawdzić inne warunki korzystania z nich. Żadna z tych witryn nie udostępnia oprogramowania umożliwiającego pobranie i hosting witryny we własnym środowisku programowania.

Sortowanie za pomocą przeciągania w bibliotece script.aculo.us Muszę przyznać, że jestem trochę zawiedziona sortowaniem za pomocą przeciągania. Pomijając zastosowanie tej techniki w Google Maps, w ogóle za nią nie przepadam. Wymaga zarządzania dość dużym skryptem i znacznie zwiększa koszt działania strony. Co jednak najważniejsze, nie jest zbyt dyskretna i dostępna, a przy tym nie udostępnia na tyle ważnej ani kluczowej funkcjonalności, aby usprawiedliwiała jej zastosowanie. Przeciąganie jest jednak dość popularne, jeśli za wskaźnik uznać obsługę tej funkcji w wielu bibliotekach Ajaksa. W tym punkcie zobaczysz technikę sortowania za pomocą przeciągania z biblioteki script.aculo.us oraz dowiesz się, co zrobić, aby mechanizm ten był jeśli nie dyskretny, to choć bardziej przyjazny. Tworzenie list umożliwiających sortowanie za pomocą biblioteki script.aculo.us jest niezwykle proste. Listing 6.12 przedstawia stronę wraz kodem PHP do pobierania danych — tu jest to tytuł wpisu — i wyświetlania ich na nieuporządkowanej liście. Skrypt biblioteki script.aculo.us, rozciągający się na oszałamiającą długość jednego wiersza, jest wyróżniony pogrubieniem.

Efekty bibliotek zewnętrznych służące do obsługi danych

|

211

Listing 6.12. Kolumna umożliwiająca sortowanie za pomocą biblioteki script.aculo.us

0) { while($row = mysql_fetch_row($rows)) { ?>

Kod biblioteki script.aculo.us tworzy obiekt Sortable i wiąże go z listą nieuporządkowaną firstlist. Opcje podane w kodzie określają, że elementy, które można przenosić, przyjmują także upuszczane obiekty, co wyznacza tablicę elementów podlegających sortowaniu. Aplikacja wyświetla tytuły w kolumnie. Kliknięcie dowolnego elementu i przeciągnięcie go w górę lub w dół powoduje zmianę położenia innych tytułów w trakcie przeciągania elemen-

212

|

Rozdział 6. Dane dynamiczne

tu nad nimi. Kiedy użytkownik dojdzie do miejsca, w którym chce umieścić dany tytuł, powinien zwolnić przycisk myszy. Listę można zapisać z powrotem w bazie danych, pobierając elementy w ich obecnej kolejności, a następnie porządkując wartości w bazie danych. Można też zachować kolejność po sortowaniu w plikach cookie, a następnie wyświetlić elementy listy w tym porządku po ponownym otwarciu strony. Aby sortowanie było bardziej dostępne, można powiązać z każdym elementem pole tekstowe przeznaczone na numer, który określa kolejność danego elementu, oraz dodać przycisk Aktualizuj służący do trwałego wprowadzania zmian na liście i odświeżania strony. W ten sposób działają witryny takie jak Netflix.

Aktywna walidacja platformy Adobe Firma Adobe wkroczyła w świat Ajaksa, udostępniając własną platformę, którą bardziej szczegółowo opisuje rozdział 10. Wśród efektów znajduje się ciekawy zestaw bibliotek, które umożliwiają standardową i niestandardową walidację formularzy. Nie jest to sprawdzanie poprawności z wykorzystaniem wywołań Ajaksa — zastosowana technika bardziej przypomina walidację na stronie za pomocą kodu JavaScript. Korzystając z wersji demonstracyjnej walidacji formularzy dołączonej do tej platformy (obecnie w wersji beta), należy dodać do strony przestrzeń nazw spry wraz z odpowiednią przestrzenią XHTML:

W zależności od tego, jaki rodzaj walidacji jest potrzebny, należy dodać odpowiednie biblioteki. Jest ich dość dużo, co jest korzystne, ponieważ gwarantuje, że nie trzeba pobierać dużych ilości zbędnego kodu JavaScript, jeśli potrzebny jest tylko jeden rodzaj walidacji:

Oprócz dodania zwykłych elementów formularza należy użyć skryptu dołączającego aktywną walidację do określonego pola. Poniższy kod obsługuje walidację pola z datą: var theDate = new Spry.Widget.ValidationTextField("theDate", "date", {useCharacterMasking:true, format:"mm/dd/yyyy", hint:"mm/dd/yyyy", validateOn: ["change"]});

Następny fragment sprawdza, czy użytkownik zaznaczył tylko trzy opcje w polach wyboru: var checkboxes = new Spry.Widget.ValidationCheckbox("checkboxes", {validateOn: ["change"], maxSelections:3});

Jest to ciekawe rozwiązanie, choć Adobe to niejedyny producent, który udostępnia gotowe narzędzia do walidacji formularzy. Inne biblioteki, takie jak jQuery, także obsługują taką funkcjonalność.

Efekty bibliotek zewnętrznych służące do obsługi danych

|

213

Inne biblioteki z efektami do obsługi danych API kontrolki LiveGrid z biblioteki Rico wiąże ajaksowe zapytania o dane bezpośrednio z tabelą HTML, obsługując przewijanie danych „na żywo”. Przykład zastosowania tego efektu można zobaczyć na stronie http://openrico.org/demos/livegrid, a samouczek dotyczący stosowania tego API znajduje się pod adresem http://openrico.org/docs/RicoLiveGrid.pdf. MochiKit zawiera samouczek dotyczący „sortowalnych” elementów oraz przykładową aplikację, której można użyć jako szablonu do tworzenia tabel HTML umożliwiających sortowanie kolumn w porządku rosnącym lub malejącym za pomocą jednego kliknięcia (http://mochikit. com/examples/sortable_tables/index.html). Platforma mooTools także obsługuje sortowanie. Służy do tego wtyczka opisana na stronie http://docs.mootools.net/files/Plugins/Sortables-js. Biblioteka Yahoo! UI (YUI) zawiera kilka obiektów i mechanizmów związanych z danymi, włączając w to autocomplete — skrypt, który przechwytuje działanie klawiszy w danym polu, kieruje zapytanie do źródła danych i udostępnia sugestie, a nawet automatycznie uzupełnia wartości, jeśli tylko jeden element pasuje do wpisanego tekstu. YUI udostępnia także kalendarz z kompletnym interfejsem użytkownika, który umożliwia pobieranie dat w celu użycia ich do wyszukiwania lub w polach formularza. Zastosowanie biblioteki Dojo wymaga pewnego zaangażowania, ponieważ jest to dość duża infrastruktura, jednak udostępnia liczne widgety, których można użyć w ramach tej infrastruktury, co zwiększa jej atrakcyjność. Dojo zawiera takie widgety, jak: SortableTable, FilterTable i mechanizm do pobierania dat w formularzach. Jedyna trudność polega na znalezieniu wszystkich tych elementów. Dokumentacja Dojo nie znajduje się na stronie głównej tego projektu i nie zawiera pełnej listy widgetów. Trzeba nieco poszperać, aby znaleźć wszystkie perełki, które oferuje Dojo. To, czy warto korzystać z bibliotek zewnętrznych w celu udostępnienia efektów do obsługi danych, z jednej strony zależy od tego, ile czasu zaoszczędzi programista, a z drugiej — w jakim stopniu dana biblioteka ogranicza istniejące środowisko (wiele bibliotek jest niezgodnych z XHTML) i jak dużo miejsca zajmuje. Inne rozwiązanie, zwłaszcza w przypadku bibliotek o otwartym dostępie do kodu źródłowego, polega na skopiowaniu potrzebnych funkcji i umieszczeniu ich we własnej bibliotece. Należy wtedy pamiętać o uwzględnieniu autorów kodu, a także uważać, aby nie naruszyć licencji lub praw autorskich.

214

|

Rozdział 6. Dane dynamiczne

ROZDZIAŁ 7.

Historia, nawigacja i miejsca w aplikacjach jednostronicowych

Rozwiązania ajaksowe często wykraczają poza standardowe sposoby korzystania ze stron internetowych. Zwykle użytkownik klika odnośnik do danej strony, przeglądarka otwiera nową stronę, użytkownik klika odnośnik do innej strony, która jest wczytywana przez przeglądarkę, i tak dalej. Jeśli użytkownik chce wrócić do strony wyjściowej, może użyć przycisku Wstecz i przejść przez wszystkie strony odwiedzone w trakcie bieżącej sesji. Aby utworzyć zakładkę lub odnośnik do strony, wystarczy skopiować adres URL widoczny w pasku adresu przeglądarki. W przypadku aplikacji jednostronicowych, w których cała zawartość jest zarządzana i wczytywana na żądanie za pomocą kodu JavaScript, przycisk Wstecz staje się bezużyteczny, podobnie jak pojęcie adresu URL strony. Jeśli do wczytywania i usuwania zawartości strony służy Ajax, trudno mówić o „miejscu”. Alex Bosworth napisał w maju 2005 (http://sourclabs.com/ajb/ 2005/05/ajax_mistakes.html): Przycisk Wstecz to doskonała funkcja interfejsu użytkownika standardowych witryn internetowych. Niestety, nie współdziała on zbyt dobrze z kodem JavaScript. Chęć zachowania funkcjonalności przycisku Wstecz to jedna z głównych przyczyn rezygnacji z aplikacji sieciowych opartych całkowicie na języku JavaScript.

Brak rzeczywistych stron to także spory problem w branży reklamy internetowej. Przed Ajaksem koszty reklamy obliczano na podstawie liczby osób odwiedzających witrynę. Obecnie, skoro zawartość może zostać wczytana na dowolną otwartą stronę, liczba odwiedzin nie odzwierciedla tego, co naprawdę dzieje się w witrynie. Optymalizacja silników wyszukiwarek także działa gorzej, jeśli do zarządzania treścią programista użyje Ajaksa. Jeśli bot silnika wyszukiwarki próbuje otworzyć odnośnik, jednak ten służy wyłącznie do uruchamiania aplikacji, oznacza to odstępstwo od podstawowego przeznaczenia odnośników, które powinny służyć do przechodzenia w inne miejsce. Odnośniki to także wskazówka dla programów odczytujących tekst z ekranu, informująca użytkowników o tym, że dany element można kliknąć. Także w tym przypadku można oczekiwać, że spowoduje to przejście gdzie indziej. Z drugiej strony utworzenie menu za pomocą Ajaksa, a bez odnośników, sprawia, że dla silnika Google i osób z wyłączoną obsługą skryptów dana strona to ślepy zaułek. A przecież

215

taka strona może udostępniać użytkownikom setki opcji — wystarczy użyć ajaksowego menu na pasku bocznym (lub w górnej albo dolnej części strony, w oknie wyskakującym, czy w jeszcze innym miejscu). Nawet tak podstawowa funkcjonalność internetowa jak pamięć podręczna może zostać naruszona przez zastosowanie Ajaksa do pobierania danych z serwera sieciowego. Z powodu obchodzenia protokołów związanych z pamięcią podręczną po stronie serwera lub przeglądarki stosowanie Ajaksa stawia wyzwania w zakresie obsługi takiej pamięci i zmusza programistów do polegania w mniejszym stopniu na środowisku internetu, a w większym na własnej pomysłowości. Jednocześnie Ajax może ułatwiać korzystanie z pamięci podręcznej, nie wspominając o zmniejszeniu obciążenia łączy i zagadnieniach związanych z innymi zasobami. Wszystkie te problemy są związane z podstawową funkcjonalnością internetu. Dotyczą one nawigacji, miejsc i historii. To w tych obszarach wbudowana funkcjonalność internetu i przeglądarek używana od wielu lat wymaga zmian z powodu zastosowania Ajaksa. Czy jednak po dodaniu Ajaksa do witryny te funkcje nadal będą tak istotne jak wcześniej? Jeśli tak — a warto dobrze zastanowić się nad tą kwestią, ponieważ z funkcjonalności tego typu można zrezygnować dopiero po starannym namyśle — to jak można się upewnić, że zostaną odpowiednio uwzględnione przy szaleńczym zastępowaniu poprzedniej zawartości strony?

Wyzwanie — stronicowana zawartość Przez pierwszych 10 lat istnienia internetu miarą wartości strony była liczba jej odwiedzin. Jednak zmieniło się to wraz z nowym znaczeniem pojęcia „strona”. Jeśli kliknięcie przycisku powoduje odświeżenie zawartości jednej strony bez opuszczania jej, jeden użytkownik może przejrzeć zawartość równą 100 stronom, a witryna zarejestruje tylko jedne odwiedziny. W początkowych latach rozwoju internetu łatwo było także wrócić do poprzednich stron, przechodząc od strony do strony w przeciwnym kierunku. Także w tym przypadku przycisk Wstecz jest bezpośrednio powiązany z wczytywaniem stron, a nie ze zmianą zawartości. Po wczytaniu 100 stron zawartości na jednej stronie i jednokrotnym kliknięciu przycisku Wstecz historia odwiedzin wszystkich 100 stron zostaje utracona. Nie ma możliwości powrotu na przykład do strony 23 czy 89. Nie można także utworzyć trwałego odnośnika do strony 23 czy 89, aby umieścić go jako zakładkę w przeglądarce przeglądarki lub utworzyć na innej stronie. Można tylko poinformować użytkowników, że jeśli wejdą na stronę służącą jako punkt wyjścia do wirtualnej podróży i klikną przycisk Dalej (lub inny mechanizm nawigacyjny) 23 razy, dojdą do polecanej zawartości. Niewiele osób będzie chciało to zrobić — ja na pewno nie. Jednostronicowe aplikacje naruszają działanie internetu. Dosłownie. Jeśli witryna jest oparta na zawartości wczytywanej za pomocą języka JavaScript, może się okazać, że będzie wymagać trzy razy więcej pracy przy zarządzaniu nią, udostępniając tę samą funkcjonalność, jaką można otrzymać za darmo dzięki zastosowaniu się do pojęcia dokumentu, obowiązującego w internecie i przeglądarkach. Dokument w tym przypadku to zawartość odpowiadająca stronie, do której można uzyskać dostęp za pomocą konkretnego adresu URL (ponieważ obecnie bardzo duża część zawartości jest generowana dynamicznie). Jednocześnie jednostronicowe aplikacje pomagają obejść pewne ograniczenia internetu. Konieczność stukrotnego kliknięcia i kompletnego odświeżenia strony przy wyświetlaniu poka216

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

zu lub prezentacji wraz z dodatkowymi kosztami związanymi z pobieraniem całkiem nowych stron (a koszty te mogą być znaczne, jeśli obok treści znajdują się rysunki i inne elementy) może być irytująca. Kluczem jest minimalizacja stopnia naruszania standardów i maksymalizacja użyteczności aplikacji ajaksowych — aplikacji jednostronicowych. Jakiego rodzaju zawartość można udostępniać w aplikacjach jednostronicowych? Praktycznie dowolną. W czasie pisania tej książki powstała witryna internetowa, która składa się z jednej strony internetowej, a wszystkie odnośniki wczytują dane na żądanie. Nie ma trwałych odnośników do żadnych podstron witryny ani historii poruszania się po niej. Nie muszę chyba pisać, że spotkało się to ze sporą krytyką. Aplikacje jednostronicowe zwykle składają się albo z aplikacji, na przykład klienta poczty elektronicznej czy internetowego edytora tekstu, albo z materiałów przeznaczonych do prezentacji, gdzie między stronami występuje pewne powiązanie. Pokaz slajdów to popularny przykład stronicowanej zawartości tego drugiego rodzaju; takie witryny są dostępne od początków technologii DHTML i Flash. Teraz do tworzenia podobnych aplikacji programiści coraz częściej używają Ajaksa. Architektura, na której opiera się pokaz slajdów, obejmuje statyczną ramkę zawierającą materiały zmieniające się w wyniku wystąpienia pewnego zdarzenia. Choć początkowo technika ta była związana z rysunkami i zdjęciami, pojedyncze strony mogą zawierać dowolne materiały — od punktów prezentacji po rekordy bazy danych, a także zdjęcia składające się na album. Trzy następne punkty opisują trzy zupełnie odmienne rodzaje pokazów slajdów, oparte na różnych typach zawartości: zdjęciach, tekście i pobieranych danych. W początkowych wersjach istotne będzie samo utworzenie efektu, bez przejmowania się ogólnym wpływem na operacje specyficzne dla internetu. Po zakończeniu „naruszania działania internetu” pokażę, jak można ponownie przywrócić utraconą funkcjonalność.

Tworzenie infrastruktury pokazu slajdów Infrastruktura wszystkich trzech przykładów jest taka sama. Zawiera odnośniki nawigacyjne Wstecz i Dalej, a także odnośnik Start, który pozwala wrócić na początek. Treść jest wyodrębniona z reszty strony za pomocą stylów CSS, a sama strona jest zaprojektowana od podstaw jako zgodna ze specyfikacją XHTML Strict. Szablon strony obejmuje dwa komponenty zawierające treść: element na podstawową zawartość oraz powiązany z nim obszar metadanych, który zawiera tytuł, informacje o zdjęciu i inne dane specyficzne dla wyświetlanych materiałów. Podstawowy szablon strony jest bardzo prosty. Składa się z kontenera na elementy do obsługi pokazu slajdów i kontenera na treść, który sam zawiera dwa kontenery: main i meta. Pod treścią widoczny jest obszar nawigacyjny, który zawiera odnośniki tekstowe, a nie przyciski. W przyszłości można zmodyfikować aplikację, dodając grafikę w celu zwiększenia elegancji. Na razie jednak warto całkowicie skoncentrować się na niezbędnych komponentach. Listing 7.1 przedstawia kompletną stronę internetową XHTML. Listing 7.1. Strona XHTML z prostym pokazem slajdów

Wyzwanie — stronicowana zawartość

|

217

Wstecz Start Dalej

Podstawowy arkusz stylów przedstawiony jest na listingu 7.2. Zmienia on ustawienia kilku elementów, aby usunąć style wbudowane, dzięki czemu programista ma większą kontrolę nad prezentacją. Listing 7.2. Wstępne ustawienia arkusza stylów ul { list-style-type: none; margin: 0; padding: 0px; } body { font: 12px Verdana, arial, sans-serif; } #slideshow { margin: 0 auto; width: 800px; } #content { margin: 20px; } #main { margin: 10px; } #meta { margin: 10px; } #navigation { text-align: center;

218

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

} .navlink,.displaynavlink,.hiddennavlink { background-color: #fcc; display: inline; border: 1px outset #ccc; } .navlink a { line-height: 140%; padding-left: 10px; padding-right: 10px; }

Można postąpić bardzo rygorystycznie przy tworzeniu projektu i zmienić wszystkie domyślne wartości prezentacji, włączając w to określenie jednej wielkości dla wszystkich nagłówków, usunięcie marginesów oraz dopełnienia wszystkich obiektów i tak dalej: * { padding: 0; margin: 0; border: 0 }

Jednak arkusz slideshow.css to dobry punkt wyjścia. Niezależnie od zawartości — czy będą to zdjęcia, tekst, czy dane — nawigacja po stronie odbywa się w podobny sposób. Najpierw aplikacja wyświetla pierwszą stronę, na której kliknięcie przycisku Wstecz nie prowadzi do żadnych zmian. Po przejściu do ostatniej strony przycisk Dalej nie spowoduje wyświetlenia nowego elementu. Przycisk Start zawsze powoduje powrót do początku pokazu, czyli do pierwszej strony. Ponieważ nawigacja odbywa się tak samo, kod jej obsługi można wykorzystać we wszystkich trzech aplikacjach. Można zastosować mało eleganckie podejście „na skróty”, które polega na śledzeniu bieżącej strony i zwiększaniu lub zmniejszaniu wartości licznika z jej numerem w zależności od kierunku ruchu, jednak jeśli to możliwe, warto zachować możliwość wstawiania oraz usuwania stron, a także uniknąć konieczności obsługi licznika. Inne rozwiązanie polega na użyciu zestawu obiektów, z których każdy ma dwie właściwości: wskaźnik do poprzedniej strony (jeśli taka istnieje) oraz wskaźnik do strony następnej (jeśli jest dostępna). Aby wstawić nowy element, węzeł, w określonym miejscu, a nie na końcu listy, wystarczy dostosować wskaźniki obiektów po obu stronach nowego elementu. W przypadku tablicy elementów, w której nawigacja zależy od indeksu, konieczna jest zmiana uporządkowania całej tablicy od miejsca wstawienia nowego obiektu. Dzięki dwukierunkowej liście powiązanej można dodać stronę do aplikacji, dołączając węzeł na końcu tablicy i modyfikując istotne węzły po obu stronach nowego elementu. W aplikacji do pokazów slajdów każdy obiekt reprezentujący węzeł ma cztery właściwości (obok tych służących do nawigacji). Trzy z nich to zdarzenia uruchamiane przy wczytywaniu i zamykaniu strony oraz funkcja wczytująca stronę. Funkcja unload nie jest tu potrzebna, ponieważ aplikacja wywołuje ją automatycznie przy wczytywaniu nowej strony. Czwarta właściwość to niepowtarzalny identyfikator, którego można użyć do powiązania jednostki nawigacyjnej z wyświetlaną zawartością. Tym identyfikatorem może być wartość liczbowa, która może nawet odzwierciedlać indeks tablicy, jednak nie jest używana do pobierania elementów z tablicy, a jedynie jako identyfikator. Listing 7.3 przedstawia nową bibliotekę do obsługi nawigacji, navigation.js. Obok klasy węzłów nawigacyjnych, NavigationNode, biblioteka zawiera obiekt globalny Navigation, który obsługuje ogólną nawigację między węzłami. Ten obiekt zarządza metodami nextPage i prevPage,

Wyzwanie — stronicowana zawartość

|

219

które są przypisywane jako metody obsługi zdarzeń do wyświetlanych przycisków lub odnośników służących do nawigacji po pokazie slajdów. Metoda setCurrentPage służy do przechodzenia do określonej strony (węzła), a setHome powoduje przejście do węzła początkowego, otwieranego za każdym razem, kiedy użytkownik zgłasza żądanie „wróć na początek”. Za zarządzanie tym ostatnim zdarzeniem odpowiada metoda returnHome. Nawigację obsługuje funkcja adjustNavigation, która sprawdza, czy bieżący węzeł ma węzeł poprzedni i następny, a następnie na tej podstawie ukrywa lub wyświetla odnośniki umożliwiające przejście wstecz lub dalej. Listing 7.3. Biblioteka do obsługi nawigacji po pokazie slajdów // Pojedynczy węzeł nawigacyjny function NavigationNode(identifier,prev,method) { this.identifier = identifier; this.previous = prev; this.showPage = aaBindObjMethod(this,method); this.next; } // Globalny obiekt Navigation służący do przechowywania stanu strony // i koordynowania nawigacji var Navigation = { setHome : function(node) { this.homeNode = node; }, returnHome : function(evnt) { evnt = evnt ? evnt : window.event; aaCancelEvent(evnt); Navigation.setCurrentPage(Navigation.homeNode); }, nextPage : function(evnt) { evnt = evnt ? evnt: window.event; aaCancelEvent(evnt); if (this.currentPage.next) { this.setCurrentPage(this.currentPage.next); } }, adjustNavigation : function() { var node = this.currentPage; // Dostosowywanie elementów do nawigacji if (!node.next) { aaElem('next').style.visibility="hidden"; } else { aaElem('next').style.visibility="visible"; } // Dostosowywanie elementów do nawigacji if (!node.previous) { aaElem('previous').style.visibility="hidden"; } else { aaElem('previous').style.visibility="visible"; } }, prevPage : function(evnt) { evnt = evnt ? evnt: window.event; aaCancelEvent(evnt); if(this.currentPage.previous) { this.setCurrentPage(this.currentPage.previous); } },

220

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

setCurrentPage : function(current) { this.currentPage = current; this.adjustNavigation(); current.showPage(); }, addNavigationNode : function(past,index,method) { var nav = new NavigationNode(index,past,method); if (past) past.next = nav; return nav; } };

Obiekt Navigation ma także metodę addNavigationNode, która tworzy nowy węzeł, a przyjmuje poprzedni węzeł bieżącego (jeśli taki istnieje), niepowtarzalny identyfikator, wiązany z nowym węzłem, i metodę przypisywaną do właściwości showPage tego węzła. Ponieważ przekazywana metoda ma działać w kontekście węzła nawigacyjnego, to aby zachować dostęp do identyfikatora węzła lub innych trwałych informacji, należy utworzyć nową funkcję, która będzie używać metody apply języka JavaScript w celu powiązania kontekstu obiektu z przekazaną metodą. W dużym stopniu przypomina to technikę używaną w Prototype i innych bibliotekach w ich wersjach funkcji bind lub w podobnych metodach. Ponieważ używana tu funkcja jest przydatna w wielu sytuacjach, warto dodać ją do globalnego pliku addingajax.js: function aaBindObjMethod(obj, method) { return function() { method.apply(obj, arguments); } }

Wszystkie elementy są gotowe i wystarczy utworzyć krótką aplikacje przykładową, aby upewnić się, że działają. Listing 7.4 przedstawia kompletną stronę przykładową używającą podstawowego pliku slideshow.css, nieustannie rozwijanego pliku addingajax.js oraz nowego skryptu navigation.js (te trzy elementy są wyróżnione pogrubieniem). Obok kodu dołączającego te pliki strona zawiera ustawienia stylów oraz skrypty potrzebne do uruchomienia testu, a oba te elementy są zagnieżdżone na stronie w celu ułatwienia analizy przykładu. Listing 7.4. Aplikacja testowa

Wstecz

Start

Dalej

Testowy przykład po prostu dołącza funkcję, która za każdym razem, kiedy użytkownik kliknie odnośnik Wstecz, Dalej lub Start, wyświetla identyfikator węzła w głównym obszarze z zawartością strony. Aplikacja najpierw ustawia bieżącą stronę obiektu Navigation, a także początkowy węzeł na węzeł pierwszy. Następnie uruchamia pętlę 20 razy, aby utworzyć 20 węzłów nawigacyjnych, a każdy z nich otrzymuje funkcję showPage jako metodę wyświetlania strony oraz wartość licznika pętli for jako identyfikator. W tej wersji aplikacji funkcja showPage jedynie wyświetla identyfikator po otwarciu strony powiązanej z danym węzłem. 222

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

Aplikacja używa nowej funkcji aaBindObjMethod do dołączenia kontekstu obiektu Navigation do jego metod nextPage i prevPage. W przeciwnym razie zdarzenie spowoduje zastąpienie tego kontekstu. Nie jest konieczne powiązanie konkretnego kontekstu w celu dołączenia metody obsługi zdarzenia click odnośnika Start. Rysunek 7.1 przedstawia działającą stronę testową po kilkukrotnym kliknięciu wszystkich przycisków i odnośników nawigacyjnych.

Rysunek 7.1. Strona aplikacji do testowania komponentu do obsługi pokazu slajdów

Teraz, po przygotowaniu szablonu strony i ogólnej procedury nawigacyjnej, można utworzyć pierwszy pokaz slajdów.

Tworzenie pokazu zdjęć Najbardziej typowy pokaz slajdów, album fotograficzny, jest zarazem najłatwiejszy do przygotowania — odnośniki nawigacyjne mają wyświetlać nowe zdjęcie po każdym kliknięciu. Jeśli zmienia się samo zdjęcie, aplikacja tego typu nie potrzebuje obiektów XMLHttpRequest (XHR) do pobierania nowych danych, ponieważ można wczytać nową fotografię, po prostu zmieniając atrybut src istniejącego elementu img. Jeśli jednak aplikacja ma wyświetlać także informacje powiązane ze zdjęciem, trzeba użyć obiektów XHR lub dynamicznych skryptów do pobierania danych z innego miejsca. Obejmuje to pobieranie informacji z samego pliku ze zdjęciem. Wiele formatów opartych na JPEG przechowuje dużo informacji. Są to formaty: EXIF (ang. Exchangeable Image Format), XMP (ang. Extensible Metadata Platform), IRB (ang. Information Resource Block) firmy Adobe i tak dalej. W tym przykładzie istotne są jedynie dane z plików EXIF, które obejmują informacje o tym, jak zrobiono dane zdjęcie, a dokładniej: model aparatu, wartość przysłony, czas naświetlania, datę wykonania i czułość ISO. Dostępne są biblioteki umożliwiające pobranie takich informacji ze zdjęć, jednak w tym przykładzie posłuży do tego wbudowana funkcja języka PHP (jest ona wbudowana, jeśli w czasie kompilacji PHP użyto opcji --enable-exif), pobierająca dane z plików EXIF do tablicy asocjacyjnej. Używam także pakietu Services_JSON autorstwa Michaela Migurskiego, Matta Knappa

Wyzwanie — stronicowana zawartość

|

223

i Bretta Stimmermana (pakiet zaproponowany do dołączenia do PEAR — http://pear.php.net/ pepr/pepr-proposal-show.php?id=198 — zainstalowany lokalnie na używanej przeze mnie maszynie), który służy do przekształcania utworzonej tablicy na format JSON. Ta usługa sieciowa przyjmuje także wywoływaną zwrotnie funkcję, przez co działa jako punkt końcowy dla bloków z dynamicznymi skryptami. Listing 7.5 przedstawia kompletny kod używany po stronie serwera. Listing 7.5. Usługa sieciowa do obsługi pokazu zdjęć encode($exif); if ($callback) { $output = $callback . "(" . $output . ")"; } print($output); } ?>

W tej aplikacji pojawił się nowy obiekt — Photo. Należy dodać ustawienia stylów tego nowego obiektu do specyficznego dla aplikacji arkusza stylów, photoslideshow.css, oraz wprowadzić inne drobne zmiany, a przede wszystkim ustawić wysokość obszaru z zawartością tak, aby nie zmieniał się przy wyświetlaniu zdjęć o różnych wymiarach: #slideshow { border: 3px solid #cfc; width: 650px; } #content { margin: 10px; } #main { border: 2px dashed #060; font-size: 18px; height: 500px; overflow: scroll; } #navigation { margin-bottom: 20px; } .navlink { background-color: #fcc; display: inline;

224 |

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

margin: 5px; padding: 3px; } #photo { padding: 10px; }

Po stronie klienta strona internetowa prawie w ogóle nie wymaga zmian w porównaniu ze stroną z listingu 7.4. Trzeba jedynie dołączyć specyficzny dla pokazu zdjęć arkusz stylów CSS i specyficzny dla aplikacji kod JavaScript, który znajduje się w odrębnym pliku, photoslideshow.js. Kod JavaScript z listingu 7.4 wymaga modyfikacji, aby za każdym razem, kiedy aplikacja pobiera następne zdjęcie, wyświetlał je i przetwarzał dane z plików EXIF zwracane przez usługę sieciową. Procedura konfiguracyjna tworzy tablicę z nazwami plików ze zdjęciami, a dla każdej fotografii aplikacja przygotowuje węzeł nawigacyjny. Do identyfikatorów tych węzłów przypisywane są nazwy plików z poszczególnymi zdjęciami. Jeśli w czasie wyświetlania węzła danego zdjęcia na stronie znajduje się element img, aplikacja usuwa go. Następnie pobiera nazwę pliku z identyfikatora węzła i używa go do utworzenia nowego elementu img oraz pobrania danych z pliku EXIF jako kompletnego obiektu JSON. Wywoływana zwrotnie funkcja printEXIF, używana do obsługi dynamicznych skryptów, pobiera potrzebne informacje i tworzy listę nieuporządkowaną (ul) z wszystkimi metadanymi na temat zdjęcia, a następnie wstawia ją na stronę do obszaru z metadanymi. Jedyne wymagające zmian składniki poprzednich obiektów szablonowych to przedstawione wcześniej ustawienia stylów CSS oraz kod JavaScript aplikacji, który znajduje się w pliku photoslideshow.js i jest przedstawiony na listingu 7.6. Listing 7.6. Kod pokazu zdjęć do obsługi danych z plików EXIF // Wyświetla stronę dla danego węzła function showPage() { getEXIF(this.identifier); var main = aaElem('main'); // Usuwa bieżącą zawartość var current = aaElem('photo'); if (current) main.removeChild(current); var img = document.createElement("img"); img.src=this.identifier; img.id='photo'; main.appendChild(img); } // Tworzy punkt końcowy bloku skryptów dynamicznych służący // do pobierania danych dotyczących zdjęcia z pliku EXIF function getEXIF(photo) { var url = 'get_photo.php?photo=' + photo; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url + '&callback=printEXIF'; document.getElementsByTagName('head')[0].appendChild(script); } // Tworzy element listy na podstawie tekstu i elementu UL function createListItem(text,ul) { var li = document.createElement('li');

Wyzwanie — stronicowana zawartość

|

225

var txt = document.createTextNode(text); li.appendChild(txt); ul.appendChild(li); return ul; } // Wyświetla dane z pliku EXIF function printEXIF(exifObj) { // Dostęp do elementu z metadanymi i wyczyszczenie go var meta = aaElem('meta'); var metacontent = aaElem('metacontent'); if (metacontent) meta.removeChild(metacontent); var ul = document.createElement('ul'); ul=createListItem(exifObj.Model,ul); ul=createListItem(exifObj.ISOSpeedRatings,ul); ul=createListItem(exifObj.ExposureTime,ul); ul=createListItem(exifObj.DateTimeOriginal,ul); ul=createListItem(exifObj.COMPUTED.ApertureFNumber,ul); ul.id="metacontent"; meta.appendChild(ul); } // Konfiguracja aplikacji aaManageEvent(window,'load',function() { var photos = new Array(); photos[0] = 'bollingerforestthumb.jpg'; photos[1] = 'robin1thumb.jpg'; photos[2] = 'silverthaw1thumb.jpg'; photos[3] = 'robin2thumb.jpg'; var past; var home; for (var i = 0; i < photos.length; i++) { var nav = Navigation.addNavigationNode(past,photos[i],showPage); if (!past) { home = nav; } past = nav; } // Ustawianie stron pierwszej i startowej Navigation.setHome(home); Navigation.setCurrentPage(home); // Dodawanie zdarzeń nawigacyjnych aaManageEvent(aaElem('next'),'click',aaBindObjMethod(Navigation,Navigation.nextPage)); aaManageEvent(aaElem('previous'),'click',aaBindObjMethod(Navigation,Navigation. prevPage)); aaManageEvent(aaElem('home'),'click', Navigation.returnHome); });

Wyjściowa strona internetowa prawie nie wymaga zmian. Wystarczy dołączyć nowy arkusz stylów i kod JavaScript specyficzny dla aplikacji. W tym momencie wystarczy upewnić się, że aplikacja działa w docelowych przeglądarkach. Na razie można pominąć kwestie wydajności i dostępności oraz to, że rozwiązanie to całkowicie narusza działanie komponentów internetowych w zakresie nawigacji, historii i miejsc. Na razie można się cieszyć działaniem aplikacji, którą przedstawia rysunek 7.2, a następnie przystąpić do pracy nad następnym pokazem slajdów, wyświetlającym podzielony tekst.

226

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

Rysunek 7.2. Przykładowa „strona” pokazu zdjęć

Podział tekstu Wyrażenie „pokaz slajdów” rzadko przywodzi na myśl ciągły tekst, jednak taki pokaz to nic innego jak odmiana jednostronicowej aplikacji sieciowej, a prawdopodobnie najczęściej dzielone dane w internecie to właśnie tekst. Nierzadko można natrafić na dłuższe artykuły i eseje podzielone na kilka stron, nie wspominając już o tym, że większość witryn internetowych to w rzeczywistości odrębne bloki sformatowanego tekstu, rozbite według pewnej struktury i powiązane poprzez pewien mechanizm nawigacyjny, na przykład menu. W następnym przykładzie wykorzystam własny artykuł, „Dziesięć podstawowych poleceń Uniksa”, dzieląc go na 11 odrębnych fragmentów, które obejmą wprowadzenie i poszczególne polecenia. Można umieścić ten materiał w 11 odrębnych, kompletnych fragmentach kodu HTML w 11 plikach. Potrzebna usługa sieciowa w języku PHP jest bardzo prosta i zawiera wywołanie funkcji file_get_contents, która pobiera stronę na podstawie parametru z żądania GET związanego z każdym fragmentem. Aplikacja używa tej funkcji do wczytania całego pliku do zmiennej, którą następnie wyświetla:
Wyzwanie — stronicowana zawartość

|

227

if (empty($page)) { echo "Trzeba podać numer strony."; } else { $filename = $page . '.html'; $content = file_get_contents($filename); echo $content; } ?>

Utworzenie tej wersji pokazu slajdów zajmuje około 10 minut, włączając w to czas potrzebny na podział tekstu na fragmenty, którymi można się posługiwać. Po przygotowaniu dobrej infrastruktury dla efektu ciężka praca jest już zakończona, a reszta to czysta przyjemność. Warto ponownie zmodyfikować style CSS aplikacji, aby lepiej dopasować je do nowego rodzaju danych. W tym celu trzeba umieścić pasek nawigacji w górnej części, usunąć wszelkie ograniczenia dotyczące wysokości oraz obramowania pól. Nowy kod stylów CSS należy zapisać w pliku textslideshow.css: #slideshow { margin: 0px 20px; } #content { position: absolute; top: 40px; margin: 10px; width: 650px; } #navigation { margin-top: 20px; width: 300px; } .navlink { background-color: #ccc; display: inline; margin: 5px; padding: 3px; } #page { margin: 20px; }

Teraz wystarczy zmodyfikować kod JavaScript specyficzny dla aplikacji. W tym przykładzie aplikacja przechodzi przez sekwencję liczb od 1 do 11, tworząc węzeł nawigacyjny i ustawiając jego identyfikator na nazwę pliku z fragmentem kodu HTML bez rozszerzenia. W metodzie showPage aplikacja używa tego fragmentu do uruchomienia żądania Ajaksa, co powoduje wczytanie fragmentu strony z odpowiedniego pliku przez serwer i wywołanie funkcji printPage w celu przetworzenia wyników. Funkcja printPage wczytuje z dokumentu nowy element page, a jeśli ten element nie istnieje, tworzy go. Do wczytania fragmentu kodu HTML służy właściwość innerHTML elementu page. Listing 7.7 przedstawia kod JavaScript z pliku textslideshow.js. Ten kod tworzy omawiany „pokaz tekstu”.

228

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

Listing 7.7. Tworzenie tekstowego pokazu przy użyciu fragmentów kodu HTML function showPage() { getPage(this.identifier); var main = aaElem('main'); } function getPage(page) { if (!Navigation.xmlhttp) Navigation.xmlhttp = aaGetXmlHttpRequest(); var qry = "page=" + page; var url = 'get_page.php?' + qry; Navigation.xmlhttp.open('GET', url, true); Navigation.xmlhttp.onreadystatechange = printPage; Navigation.xmlhttp.send(null); } function printPage() { if(Navigation.xmlhttp.readyState == 4 && Navigation.xmlhttp.status == 200) { var content = aaElem('page'); if (!content) { content = document.createElement('div'); content.id = 'page'; aaElem('main').appendChild(content); } content.innerHTML = Navigation.xmlhttp.responseText; } } aaManageEvent(window,'load',function() { var past; var home; var pageCount = 11; for (var i = 1; i <= pageCount; i++) { var id = 'part' + i; var nav = Navigation.addNavigationNode(past,id,showPage); if (!past) { home = nav; } past = nav; } // Ustawianie stron startowej i pierwszej Navigation.setHome(home); Navigation.setCurrentPage(home); aaManageEvent(aaElem('next'),'click',aaBindObjMethod(Navigation,Navigation.nextPage)); aaManageEvent(aaElem('previous'),'click',aaBindObjMethod(Navigation,Navigation. prevPage)); aaManageEvent(aaElem('home'),'click', Navigation.returnHome); });

Bardziej poprawne rozwiązanie polega na usunięciu znaczników z fragmentu i dalszym rozbiciu tekstu na łańcuchy znaków. Całość trzeba wtedy złożyć z powrotem za pomocą modelu DOM przed wstawieniem do dokumentu. Wymaga to około cztery razy dłuższego kodu niż w zastosowanym rozwiązaniu. Co prawda takie podejście gwarantuje, że znaczniki będą prawidłowe, jednak dużym kosztem. Inny problem polega na tym, że właściwość innerHTML prawdopodobnie nie będzie działać, jeśli strona jest zwracana lub przesyłana strumieniem jako dane XML. Wszystkie przykłady Wyzwanie — stronicowana zawartość

|

229

w tym rozdziale mają specyficzne dla XHTML rozszerzenie XHTML DOCTYPE i są zwracane jako dokumenty application/xhtml+xml. Dzięki powszechnej obecnie obsłudze właściwości innerHTML strona jest wczytywana poprawnie. Jednak przesyłanie jej strumieniem jako danych XML przy użyciu agenta to zupełnie inna sprawa. Są to pewne ustępstwa, jednak w tym przypadku zdecydowałam się je poczynić. Rysunek 7.3 przedstawia działanie tej nowej aplikacji.

Rysunek 7.3. Pokaz oparty na tekście, otwarty na stronie wieloczęściowego artykułu

Przechodzenie po stronach danych Jedną z najczęstszych operacji opartych na stronach jest przeglądanie wyników wyszukiwania. W Google lub Yahoo! użytkownicy nieustannie przeglądają strony z wynikami. Przy dostępie do historii rachunku bankowego, wyszukiwaniu informacji w sklepie internetowym, czytaniu blogu, przeglądaniu polecanych restauracji czy sprawdzaniu listy utworów muzycznych użytkownik przechodzi przez strony danych zwróconych w wyniku zgłoszenia pewnego zapytania. Takie aplikacje ze stronami dzielą dane i zwracają tylko określoną liczbę wierszy, aby skrócić czas wczytywania strony. Dostępne są przyciski Dalej i Wstecz, które umożliwiają przejście do następnych i poprzednich danych. Przy użyciu kodów odpowiedzi HTTP oraz kodu aplikacji można poruszać się po wynikach tam i z powrotem bez konieczności powtarzania wyszukiwania. Dane podzielone na strony to naturalny kandydat do wyświetlania za pomocą „stronicowanej” aplikacji do obsługi pokazu slajdów. Następna aplikacja używa tej samej tabeli wpisów z platformy WordPress, którą zastosowano w rozdziale 6., i pobiera identyfikator wpisu, jego

230

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

tytuł i identyfikator GUID (ang. globally unique identifier — globalny niepowtarzalny identyfikator). Ponieważ ta aplikacja używa bazy danych MySQL, należy użyć w zapytaniu właściwości limit, rozpoczynając pobieranie za każdym razem od innego wiersza i ograniczając liczbę zwracanych wierszy. W tym przypadku aplikacja pobiera 20 wierszy naraz, rozpoczynając od pierwszego wiersza, a następnie aktualizuje wyszukiwanie tak, aby za każdym razem rozpoczynało się 20 wierszy dalej. Nowy kod aplikacji używany po stronie serwera przedstawia listing 7.8 (oczywiście ze zmienioną nazwą użytkownika i odmiennym hasłem). Listing 7.8. Usługa sieciowa pobierająca wiersze z bazy danych 0) { $str = "["; while($row = mysql_fetch_row($rows)) { if ($str != '[') $str.=","; $str.= "{ id : '$row[0]', title : \"$row[1]\", guid : '$row[2]', comments: '$row[3]' }"; } $str.="]"; } echo $callback . '(' . $str . ')'; ?>

Usługa udostępnia dane w formacie JSON. Składają się one z wierszy obiektów, co jest logiczną strukturą w aplikacjach tego typu. Ustawienia arkusza stylów są podobne jak w innych aplikacjach, z wyjątkiem pewnych zmian w typach danych i drobnych różnic w kolorze i czcionce. Pasek nawigacyjny znajduje się po lewej stronie danych, a przyciski są rozmieszczone pionowo. Zmodyfikowany arkusz stylów znajduje się w pliku dataslideshow.css: #slideshow { border: 3px groove #ccf; width: 760px; } #content { margin: 10px; float: right; width: 640px; } #main { border: 2px dotted #fcf;

Wyzwanie — stronicowana zawartość

|

231

font-size: 14px; } #navigation { margin-top: 50px; float: left; margin-left: 5px; } .navlink { display: block; background-color: #fcf; margin: 5px; } #dataTable { margin: 15px; width: 95%; } #footer { clear: both; }

Po stronie klienta identyfikator to tym razem wyjściowa pozycja. Na początku ma on wartość 0, a przy każdej następnej iteracji — o 20 większą. Wartość przyrostu, czyli limit liczby zwracanych wierszy, jest przekazywana wraz z wywoływaną zwrotnie funkcją do skryptów dynamicznych, które komunikują się z punktem końcowym usługi. Wywoływana zwrotnie funkcja, printRows, za pomocą modelu DOM i skryptu tworzy tabelę HTML, używając funkcji pomocniczej do przygotowania grupy komórek tabeli, jednak do obsługi tytułów wykorzystuje właściwość innerHTML. Jeśli programista chce uniknąć stosowania właściwości innerHTML, musi utworzyć nowy odnośnik hipertekstowy, dołączyć do niego identyfikator GUID lub adres URL, utworzyć węzeł textNode dla tytułu i tak dalej — wymaga to dodania znaczącej ilości kodu. Implementacja tego rozwiązania to dobre ćwiczenie. Listing 7.9 zawiera kod JavaScript z pliku dataslideshow.js. Służy on do obsługi następnego typu danych wyświetlanych w pokazie slajdów. Także tym razem najwięcej czasu zajmuje napisanie kodu działającego po stronie serwera. Klient jest stosunkowo prosty. Wyjątkiem są liczne wywołania metod modelu DOM, potrzebne do obsługi tabeli. Listing 7.9. „Pokaz slajdów” sterowany bazą danych function showPage() { getRows(this.identifier); } function getRows(start) { var url = 'getposts.php?start=' + start; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url + '&limit=20&callback=printRows'; document.getElementsByTagName('head')[0].appendChild(script); } function createTableCell(value,tr) { // Tworzy element var cell = document.createElement("td");

232

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

// Tworzy węzeł tekstowy var text = document.createTextNode(value); // Dołącza węzeł tekstowy do komórki cell.appendChild(text); // Dołącza komórkę do wiersza tr.appendChild(cell); return tr; } function printRows(rowsObj) { var main = aaElem('main'); // Usuwanie dawnej zawartości var oTable = aaElem('dataTable'); if (oTable) main.removeChild(oTable); var table = document.createElement("table"); table.id = "dataTable"; var tableBody = document.createElement("tbody"); // Wiersze tabeli for(var i = 0; i < rowsObj.length; i++) { // Tworzy element var row = document.createElement("tr"); row = createTableCell(rowsObj[i].id, row); // Znacznik adresu i tytuł var cell = document.createElement("td"); cell.innerHTML = "" + rowsObj[i].title + ""; row.appendChild(cell); row = createTableCell(rowsObj[i].comments,row); tableBody.appendChild(row); } table.appendChild(tableBody); aaElem('main').appendChild(table); } // Konfigurowanie aplikacji i węzłów nawigacyjnych aaManageEvent(window,'load',function() { var past; var home; for (var i = 0; i <= 10; i++) { var nav = Navigation.addNavigationNode(past,i*20,showPage); if (!past) { home = nav; } past = nav; } // Ustawianie stron Navigation.setHome(home); Navigation.setCurrentPage(home);

Wyzwanie — stronicowana zawartość

|

233

aaManageEvent(aaElem('next'),'click',aaBindObjMethod(Navigation,Navigation.nextPage)); aaManageEvent(aaElem('previous'),'click',aaBindObjMethod(Navigation,Navigation. prevPage)); aaManageEvent(aaElem('home'),'click', Navigation.returnHome); });

Rysunek 7.4 przedstawia najnowszą wersję pokazu slajdów po kilkukrotnym kliknięciu przycisku Dalej.

Rysunek 7.4. Łączenie pokazu slajdów z zapytaniami do bazy danych

Ciekawe rzeczy można umieścić w aplikacji jednostronicowej (w tym przypadku — na slajdach). Wszystkie przedstawione aplikacje całkowicie naruszają zasady działania internetu. Nic nie umożliwia utworzenia trwałego odnośnika do „strony”, zastosowania przycisku Wstecz w celu powrotu do określonego miejsca czy użycia pamięci podręcznej przeglądarki. W historii przeglądarki można zauważyć, że użytkownik nie wyszedł poza jedną stronę, co utrudnia zliczanie wyświetleń reklam. Nawet odnośniki nawigacyjne działają tak, że zarówno boty silników wyszukiwarek, jak i programy odczytujące tekst z ekranu nie mogą z nich korzystać. Jeśli skrypty są wyłączone lub nieobsługiwane, strona zostanie wyświetlona w cudownie minimalistycznym stylu, a odwiedzający ją użytkownik będzie miał nieodparte wrażenie, że czegoś na niej brakuje. Po naruszeniu zasad funkcjonalności internetowej warto zobaczyć, czy można ją przywrócić.

234 |

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

Zapamiętywanie miejsc W ostatniej wersji pokazu slajdów, która zawiera „strony” odnośników do istniejących wpisów na blogu, kliknięcie wybranego odnośnika powoduje wczytanie danego artykułu przez przeglądarkę. Wszystko w porządku, ale przeglądarka otwiera wtedy nową stronę. Kiedy użytkownik chce ponownie wyświetlić listę, w niektórych przeglądarkach „miejsce” opuszczenia listy zostaje utracone i otwiera się pierwsza strona. Po otwarciu innej strony w wyniku wpisania nowego adresu URL, użycia paska wyszukiwarki lub wybrania odnośnika spośród ulubionych próba użycia przycisku Wstecz w celu powrotu do aplikacji z pokazem slajdów także spowoduje utratę „miejsca”. Drugi problem wiąże się z tworzeniem trwałych odnośników do konkretnych stron pokazu slajdów, na przykład do piątej strony pokazu tekstowego czy trzeciego zdjęcia. W obecnej wersji aplikacji jedyne, co można zrobić, to poinformować użytkowników o tym, że muszą otworzyć pierwszą stronę, a następnie kliknąć przycisk Dalej określoną liczbę razy. Nie jest to praktyczne rozwiązanie. Potrzebny jest sposób na zapamiętywanie miejsc.

Zapamiętywanie miejsc i fragmenty stron Zapamiętywanie i utrwalanie miejsc to dwa problemy związane z ajaksowymi pokazami slajdów i innymi aplikacjami jednostronicowymi. Obejście ich obu polega na zastosowaniu obiektu window.location oraz fragmentu strony nazywanego skrótem (ang. hash). Skrót strony to wartość umieszczana na końcu adresu URL przy dostępie do fragmentu strony w jej obrębie. Do tworzenia fragmentów stron służą znaczniki anchor, jednak można to zrobić także dynamicznie, przypisując odpowiednią wartość do właściwości hash obiektu location: window.location.hash = value;

Udostępnia to specyficzną lokalizację strony pokazu slajdów, którą można zapisać zarówno w celu umożliwienia nawigacji za pomocą przycisku Wstecz w ramach jednej sesji w przeglądarce, jak i jako trwały odnośnik do umieszczenia na innej stronie. Nie jestem pewna, kto jako pierwszy wpadł na pomysł zastosowania fragmentów stron, jednak po raz pierwszy przeczytałam o nich w dwóch artykułach: Fixing the Back Button and Enabling Bookmarking for Ajax Apps Mike’a Stenhouse’a (http://www. contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps) oraz Ajax: How to Handle Bookmarks and Back Buttons Brada Neuberga (http:// www.onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html).

Pora wrócić do obiektu Navigation. Jednym z elementów każdego węzła nawigacyjnego jest identyfikator. Służy on do wczytywania odpowiednich danych, jednak można go wykorzystać także do oznaczenia miejsca za pomocą obiektu location i jego właściwości hash. Na szczęście nie wymaga to wprowadzania żadnych zmian w obiekcie Navigation, a jedynie drobnych modyfikacji w kodzie specyficznym dla każdej aplikacji z pokazem slajdów. Nawiązując do poprzednich przykładów — listing 7.10 to nowa wersja listingu 7.9, który obsługuje pobieranie treści z bazy danych, jednak tym razem użyto skrótu strony. W kodzie trzeba wprowadzić jedynie drobne zmiany: nowy kod ma dodawać skrót do lokalizacji w czasie wyświetlania strony i pobierać specyficzną stronę pokazu slajdów przy jej pierwszym wczytywaniu. Zmiany są wyróżnione w kodzie pogrubieniem. Zapamiętywanie miejsc

|

235

Listing 7.10. Kod zmodyfikowany pod kątem dodania obsługi stron do kodu aplikacji z listingu 7.9 function showPage() { window.location.hash = this.identifier; getRows(this.identifier); } ... aaManageEvent(window,'load',function() { var past; var home; var index; var current; var hash = window.location.hash; if (hash) { index = hash.split("#")[1]; } for (var i = 0; i <= 10; i++) { var id = i*20; var nav = Navigation.addNavigationNode(past,id,showPage); if (!past) { home = nav; if (!index) current = nav; } past = nav; } Navigation.setHome(home); if (!index) { Navigation.setCurrentPage(home); } else { Navigation.setCurrentPage(current); } aaManageEvent(aaElem('next'),'click',aaBindObjMethod(Navigation,Navigation.nextPage)); aaManageEvent(aaElem('previous'),'click',aaBindObjMethod(Navigation,Navigation. prevPage)); aaManageEvent(aaElem('home'),'click', Navigation.returnHome); });

Ponieważ identyfikator strony służy do określenia, który wiersz bazy danych ma być podany w zapytaniu jako pierwszy, w tym przykładzie ma on wartość liczbową rosnącą o 20: 20, 40, 60 i tak dalej. Po wczytaniu aplikacji zachowuje ona miejsce strony, kiedy użytkownik kliknie jeden z odnośników, otworzy nową stronę, a następnie powróci do wyjściowej. Listing 7.11 to nowa wersja tekstowego pokazu slajdów z listingu 7.7. W tym przypadku obsługa stron opiera się na tekście, a nie na liczbach, choć kod do tworzenia skrótu lokalizacyjnego działa tak samo (jest tworzony za pomocą identyfikatora węzła nawigacyjnego). Listing 7.11. Kod zmodyfikowany pod kątem dodania obsługi stron do aplikacji z listingu 7.7 function showPage() { window.location.hash = this.identifier; getPage(this.identifier); var main = aaElem('main'); } ... aaManageEvent(window,'load',function() {

236

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

var past; var home; var current; var pageCount = 11; var index; var hash = window.location.hash; if (hash) { index = hash.split("#")[1]; } for (var i = 1; i <= pageCount; i++) { var id = 'part' + i; var nav = Navigation.addNavigationNode(past,id,showPage); if (!past) { home = nav; } past = nav; if (index && id == index) current = nav; } Navigation.setHome(home); if (!current) { Navigation.setCurrentPage(home); } else { Navigation.setCurrentPage(current); } aaManageEvent(aaElem('next'),'click',aaBindObjMethod(Navigation,Navigation.nextPage)); aaManageEvent(aaElem('previous'),'click',aaBindObjMethod(Navigation,Navigation. prevPage)); aaManageEvent(aaElem('home'),'click', Navigation.returnHome); });

Zmiany potrzebne w pokazie zdjęć są bardzo podobne, jednak w tym przypadku identyfikator to nazwa pliku ze zdjęciem, co ilustruje listing 7.12. Listing 7.12. Zmodyfikowana wersja listingu 7.6 umożliwiająca poprawne działanie przycisku Wstecz aaManageEvent(window,'load',function() { var photos = new Array(); photos[0] = 'bollingerforestthumb.jpg'; photos[1] = 'robin1thumb.jpg'; photos[2] = 'silverthaw1thumb.jpg'; photos[3] = 'robin2thumb.jpg'; var index; var hash = window.location.hash; if (hash) { index = hash.split("#")[1]; } var past; for (var i = 0; i < photos.length; i++) { var id = photos[i]; var nav = Navigation.addNavigationNode(past,id,showPage); if (!past) { Navigation.setHome(nav); if (!index) Navigation.setCurrentPage(nav);

Zapamiętywanie miejsc

|

237

} past = nav; if (id == index) Navigation.setCurrentPage(nav); } aaManageEvent(aaElem('next'),'click',aaBindObjMethod(Navigation,Navigation.nextPage)); aaManageEvent(aaElem('previous'),'click',aaBindObjMethod(Navigation,Navigation. prevPage)); aaManageEvent(aaElem('home'),'click', Navigation.returnHome); });

Wprowadzenie drobnych zmian w każdej aplikacji zapewnia dwie rzeczy: zachowywanie stanu w sytuacji, kiedy użytkownik opuści stronę, a następnie wróci na nią, a także tworzenie trwałych odnośników umożliwiających powrót do danej „strony”. Niestety, nowe wersje aplikacji nie zawsze i nie we wszystkich przeglądarkach działają w oczekiwany sposób. W przeglądarce Internet Explorer ustawienie skrótu nie powoduje dodania strony do historii. W przeglądarkach Firefox i Mozilla, a także w Operze, Safari i WebKit, kliknięcie przycisków Wstecz i Dalej nie spowoduje ponownego wyświetlenia zawartości strony.

Zapamiętywanie miejsc w odpowiednim momencie Firefox, Opera i Safari są najbliższe obsługi aplikacji, która umożliwia zapamiętywanie miejsc. Brak w nich jedynie możliwości odzwierciedlenia zmian w przypadku, kiedy użytkownik kliknie przyciski Wstecz i Dalej w obrębie danego pokazu slajdów. Rozwiązanie tego problemu byłoby proste, gdyby można było przechwycić kliknięcie tych przycisków, jest to jednak niemożliwe. Jedyny sposób na określenie operacji, które zaszły, to przechwytywanie adresu URL z czasu ostatniej zmiany zawartości strony i porównywanie go z danymi z paska adresu przeglądarki. Jeśli te adresy nie pasują do siebie, należy zaktualizować stronę i ponownie zachować nowy adres URL. Jedyna możliwość uruchomienia tego rozwiązania wymaga zastosowania zegarów, co jest dość proste, choć mam pewne opory przed ich użyciem. Uruchamianie zegarów i odświeżanie zawartości strony prowadzi do następnej trudności związanej z kodem aplikacji — węzły nawigacyjne są powiązane bezpośrednio ze sobą, a nie poprzez tablicę. Z tego powodu jedyny sposób na dostęp do węzła nawigacyjnego to przejście po liście powiązanej i porównanie identyfikatorów. Jeśli identyfikator strony przeznaczonej do wczytania pasuje do danego węzła, należy wczytać właśnie ten węzeł nawigacyjny. Można uniknąć konieczności przechodzenia po węzłach dzięki użyciu tablicy węzłów zamiast listy powiązanej. Lubię jednak korzystać z takich list, ponieważ odzwierciedlają naturę nawigacji dużo lepiej niż tablice węzłów. Można zastosować obie struktury — listę powiązaną do nawigacji i tablicę węzłów jako wskaźnik — jednak wydaje się, że prowadzi to do pewnego nadmiaru, zwłaszcza dlatego, że koszty wyszukiwania odpowiednich węzłów są bardzo małe. W tym przypadku aplikacja przechodzi po wszystkich węzłach do czasu znalezienia odpowiedniego. Listing 7.13 to kod przykładu używającego bazy danych przekształcony zgodnie z nowym podejściem. Zmiany zostały wyróżnione, aby móc je łatwiej zauważyć. Aplikacja uruchamia zegar co 700 milisekund, co wydaje się dobrą wartością dla efektu tego typu. Aplikacja przechwytuje bieżącą „stronę” i zapisuje ją jako wartość globalną, którą następnie porównuje z wła-

238

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

ściwością window.location.hash. Jeśli te wartości są różne, trzeba przejść po liście węzłów do czasu znalezienia potrzebnej strony, a następnie przekazać ją do metody setCurrentPage obiektu Navigation. Listing 7.13. Naśladowanie cofania przy użyciu zdarzeń zegara var currentLocation; function showPage() { window.location.hash = this.identifier; currentLocation = this.identifier; getRows(this.identifier); } function getRows(start) { var url = 'getposts.php?start=' + start; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url + '&limit=20&callback=printRows'; document.getElementsByTagName('head')[0].appendChild(script); } function createTableCell(value,tr) { // Tworzy element var cell = document.createElement("td"); // Tworzy węzeł tekstowy var text = document.createTextNode(value); // Dołącza utworzony węzeł tekstowy do komórki cell.appendChild(text); // Dołącza komórkę do wiersza tr.appendChild(cell); return tr; } function printRows(rowsObj) { var main = aaElem('main'); // Usuwanie dawnej zawartości var oTable = aaElem('dataTable'); if (oTable) main.removeChild(oTable); var table = document.createElement("table"); table.id = "dataTable"; var tableBody = document.createElement("tbody"); // Wiersze tabeli for(var i = 0; i < rowsObj.length; i++) { // Tworzy element var row = document.createElement("tr"); row = createTableCell(rowsObj[i].id, row); // Znacznik anchor i tytuł var cell = document.createElement("td"); cell.innerHTML = "" + rowsObj[i].title + ""; row.appendChild(cell);

Zapamiętywanie miejsc

|

239

row = createTableCell(rowsObj[i].comments,row); tableBody.appendChild(row); } table.appendChild(tableBody); aaElem('main').appendChild(table); } function checkLocation() { var hash = window.location.hash; if (hash) { index = hash.split("#")[1]; if (currentLocation != index) { var node = Navigation.homeNode; while (true) { if (node.identifier == index) break; node = node.next; } Navigation.setCurrentPage(node); } } setTimeout(checkLocation,700); } aaManageEvent(window,'load',function() { var past; var index; var hash = window.location.hash; if (hash) { index = hash.split("#")[1]; } for (var i = 0; i <= 10; i++) { var id = i*20; var nav = Navigation.addNavigationNode(past,id,showPage); if (!past) { Navigation.setHome(nav); if (!index) Navigation.setCurrentPage(nav); } past = nav; if (id == index) Navigation.setCurrentPage(nav); } aaManageEvent(aaElem('next'),'click',aaBindObjMethod(Navigation,Navigation.nextPage)); aaManageEvent(aaElem('previous'),'click',aaBindObjMethod(Navigation,Navigation. prevPage)); aaManageEvent(aaElem('home'),'click', Navigation.returnHome); // Ustawienie zegara, aby sprawdzał lokalizację strony setTimeout(checkLocation,200); });

W ten sposób powstał system stron zintegrowany z systemem nawigacyjnym przeglądarki… Firefox. Działa niespójnie w Operze i Safari, a całkowicie blokuje przeglądarkę WebKit. Nie rozwiązuje także problemu z przeglądarką Internet Explorer, ponieważ nie dodaje ona wpisów ze znakiem kratki z paska adresu do historii. Aby obejść to ograniczenie, trzeba zagnieź240 |

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

dzić na stronie ramkę iframe, użyć jej do wczytania zewnętrznej strony ze znakiem kratki w adresie, a następnie dostosować w celu odzwierciedlenia zmian „stron”, co pozwala zaktualizować bufor historii w przeglądarce Internet Explorer. Oczywiście, po rozwiązaniu tego problemu trzeba poradzić sobie z przeglądarką Safari… i z Operą… i z… Chwileczkę, czy to na pewno dobra droga?

Różnica między mądrym a sprytnym Niektóre z najbardziej znaczących argumentów przeciw stosowaniu Ajaksa wynikają z tego, że często można zobaczyć mnóstwo kodu dodawanego do witryny tylko w celu utworzenia ozdobnych efektów. Smutne jest to, że efekt, któremu programista poświęcił całe godziny, dni i tygodnie, prawdopodobnie nie oczaruje użytkowników w takim stopniu jak inny, wymagający tylko kilku godzin pracy. Wiele złożonych efektów Ajaksa robi wrażenie na innych programistach używających tej technologii, jednak niekoniecznie na osobach, które odwiedzają strony internetowe czy używają aplikacji sieciowej. Jest różnica między mądrością a sprytem. Mądry programista spędzi całe godziny, dni i tygodnie, aby strona internetowa lub aplikacja sieciowa działała dokładnie tak, jak sobie zaplanował. Jako programista doceniam taki wysiłek, ponieważ wszyscy możemy się dzięki temu czegoś nauczyć i wykorzystać pracę innych we własnej. Jednak sprytny programista będzie pracował nad efektem przez określony czas, a kiedy złożoność rozwiązania dojdzie do pewnego poziomu, taki autor zatrzyma się i oceni swoje wysiłki, oraz określi moment, kiedy dalsze starania nie przyniosą prawdziwych korzyści. Jeśli jedyni odbiorcy to programiści, każdy wysiłek się opłaci. Jednak jeśli są to przełożeni, klienci, czytelnicy stron internetowych czy użytkownicy aplikacji, wtedy przy tworzeniu jakiegokolwiek kodu trzeba uwzględnić łatwość zarządzania danym efektem, powodowane obciążenia łączy oraz stopień „naruszenia działania internetu”. W pewnym momencie trzeba uznać, że aplikacja jednostronicowa, taka jak te przedstawione wcześniej, narusza działanie internetu. Kiedy programista rozpoczyna dodawanie zdarzeń zegarów, ramek iframe i innych dziwnych mechanizmów tylko po to, aby efekt jakoś działał, wiadomo, że musi albo podążyć bardzo krętą ścieżką, albo uznać, że przy współczesnych przeglądarkach zdarza się naruszanie działania internetu i nic nie można na to poradzić. Nawet jeśli programista wymyśli technikę, dzięki której aplikacja nie będzie naruszać działania internetu, na przykład używając skrótu lokalizacyjnego jako techniki umożliwiającej powrót do konkretnej strony po kliknięciu odnośnika prowadzącego poza nią, takie rozwiązanie nie będzie efektywne, kiedy zastosuje się je do tworzenia trwałych odnośników do stron. Osoba, która kliknie taki odnośnik w innym miejscu, może korzystać z przeglądarki z wyłączoną obsługą skryptów. Następny problem to boty internetowe, które nie wykrywają odnośników obsługiwanych poprzez kod, przez co wiele stron nie zostanie zeskanowanych w celu uwzględnienia ich w wyszukiwarkach — nie wspominając o kłopotach ze zliczaniem odwiedzin strony. Jednocześnie wczytywanie danych na żądanie za pomocą Ajaksa i aplikacji jednostronicowych to rozwiązania, które mogą zapewnić dużo lepszą wydajność niż aplikacje wielostronicowe, a co ważniejsze, pozwalają dodać do prezentacji zaawansowane techniki i przydać jej elegancji. Potrzebny jest kompromis: zachowanie niektórych starych elementów i połączenie ich z częścią nowych. Zapamiętywanie miejsc

|

241

Trwałość w starym i nowym stylu — ramię w ramię Pokaz zdjęć prawdopodobnie należy do tych aplikacji jednostronicowych, które najlepiej oprzeć wyłącznie na Ajaksie. Nie jest to typ witryny, od której użytkownik oczekuje, że będzie współdziałać z przyciskami Wstecz i Dalej przeglądarki, a zwykle nie udostępnia także trwałych odnośników do poszczególnych zdjęć. Mimo to, jeśli ktoś otworzy pokaz zdjęć, a ma włączone rozszerzenie takie jak NoScript, pojawi się pusty ekran, a użytkownik będzie musiał włączyć skrypty tylko po to, aby zobaczyć, co traci. Niezależnie od tego, jak ciekawe są efekty zanikania czy wyświetlane na dole strony okna wyskakujące z opisem, użytkownicy będą nieco mniej oczarowani, niż gdyby autor utworzył pokaz, stosując tradycyjne, wielostronicowe podejście, a następnie dodał Ajaksa. W tym drugim przypadku nie tylko użytkownicy z wyłączoną obsługą skryptów nie zobaczą pustego ekranu po uruchomieniu pokazu, ale także możliwe jest rozwiązanie problemu z trwałością, który Ajax może wywołać w projekcie. Pierwszy pokaz slajdów, wyświetlający zdjęcia, jest w użytku już od pewnego czasu, choć do zarządzania większością galerii i pokazów slajdów służy kod uruchamiany po stronie serwera, a nie Ajax (co obecnie szybko się zmienia). Taka aplikacja, napisana w języku PHP, powinna mieć dostęp do kolekcji zdjęć (zwykle poprzez podkatalog, choć można także podać listę nazw w tablicy). Można określić, które zdjęcie trzeba wyświetlić, podając je jako parametr żądania GET HTTP, a ponadto zapisać ten parametr GET jako część adresu URL, aby zapewnić działanie odnośników odpowiadających przyciskom: Wstecz, Start i Dalej. Listing 7.14 to nowa wersja wcześniejszej aplikacji, jednak tym razem jest to aplikacja wielostronicowa zarządzana przez serwer. Wielość stron oznacza w tym przypadku wiele adresów URL, a nie samych stron w sensie fizycznym. To rozwiązanie w ogóle nie wymaga kodu JavaScript. Listing 7.14. Tradycyjny pokaz zdjęć utworzony za pomocą technologii uruchamianych po stronie serwera
242 |

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

if ($index < (count($photos) - 1)) { $next = $index + 1; } $exif = getExifData($photos[$index]); ?>

" echo "
• " echo "
• " echo "
• " echo "
• " ?>

. . . . .

$exif['Model'] . ""; $exif['ISOSpeedRatings']. ""; $exif['ExposureTime'] . ""; $exif['DateTimeOriginal'] . ""; $exif['Computed']['ApertureFNumber'] . "";

= 0) : ?>

">Wstecz

?photo=0">Start

">Dalej

Nic wymyślnego. Jeśli aplikacja wyświetla pierwsze zdjęcie w serii, ukrywa przycisk Wstecz, a wyświetlając ostatnią fotografię, chowa przycisk Dalej. Aby utworzyć zakładkę z odnośnikiem do konkretnego zdjęcia, wystarczy skopiować adres URL z paska adresu. To proste rozwiązanie i wydaje się, że nie ma szczególnych powodów, aby dodać do niego Ajaksa. Jednak jeśli programista chce nieco uatrakcyjnić sposób wyświetlania — dodać efekt zanikania i wyłaniania się między kolejnymi zdjęciami, wyświetlać półprzezroczysty panel z danymi z plików EXIF na dole strony czy dodać funkcję umożliwiającą rozwinięcie fotografii za pomocą jednego kliknięcia — musi obsługiwać stronę jako ajaksową aplikację jednostronicową za pomocą obiektów XHR. Rozwiązanie polega na zapewnieniu współdziałania technologii działających po stronie serwera i klienta, tak aby zagwarantować elegancką degradację Trwałość w starym i nowym stylu — ramię w ramię

| 243

działania aplikacji. Jednak jeśli użytkownik korzysta z odpowiedniej przeglądarki z włączoną obsługą skryptów, zobaczy pełny pokaz, ciekawe efekty wizualne i inne atrakcje. Listing 7.15 to następna wersja opisanej wcześniej aplikacji, jednak tym razem z dodaną funkcjonalnością Ajaksa. Jedyną różnicą na stronie internetowej, wyróżnioną pogrubieniem, jest dołączenie potrzebnych bibliotek Ajaksa oraz tablicy zdjęć wyświetlanych w ramach pokazu. Do utworzenia tej tablicy służą funkcje uruchamiane po stronie serwera, dzięki czemu zdjęcia i ich kolejność są takie same w serwerowej wersji bez skryptów oraz ajaksowej wersji działającej po stronie klienta. Kod pobierający dane z plików EXIF został umieszczony w funkcji dostępnej zarówno w wersji działającej po stronie serwera, jak i jako usługa sieciowa zgodna z Ajaksem. Listing 7.15. Pokaz zdjęć utworzony jako aplikacja używająca równolegle kodu PHP i Ajaksa

">Trwały odnośnik do strony

"
• " "
• " "
• " "
• " "
• "
  
  . . . . .
  
  $exif['Model'] . "
"; $exif['ISOSpeedRatings']. ""; $exif['ExposureTime'] . ""; $exif['DateTimeOriginal'] . ""; $exif['COMPUTED']['ApertureFNumber'] . "";

?>

">Wstecz

?photo=1">Start

">Dalej

Następne zagadnienie wiąże się z dodawaniem trwałego odnośnika do obszaru strony zawierającego metadane. Ten odnośnik zawiera adres URL oparty na kodzie PHP. Adres ten pozwala pobrać bieżące zdjęcie poprzez argument zapytania. Można mieć nadzieję, że zachęci to użytkowników do używania odnośnika, jeśli nie chcą bezpośrednio korzystać z aplikacji. Dane z plików EXIF dostępne w aplikacji opartej na języku PHP są takie same jak te wyświetlane w aplikacji ajaksowej. W czasie początkowego wczytywania aplikacji jedną z pierwszych operacji wykonywanych przez wersję ajaksową jest przypisanie funkcji obsługi zdarzenia click trzech przycisków nawigacyjnych. Powoduje to zastąpienie standardowych działań podejmowanych w wyniku kliknięcia tych przycisków przez wczytywanie „stron” za pomocą Ajaksa. Jednak jeśli obsługa skryptów jest wyłączona, kliknięcie odnośników spowoduje otwarcie stron wygenerowanych przez kod PHP, co powinno wystarczyć nie tylko osobom, które wyłączyły skrypty, ale także botom internetowym.

Trwałość w starym i nowym stylu — ramię w ramię

| 245

Plik CSS wymaga tylko drobnych modyfikacji. W nowej wersji znajdują się dwie różne klasy dla przycisków: jedna używana wtedy, kiedy przycisk jest widoczny, a druga — kiedy jest ukryty. Na początku pokazu niewidoczny jest przycisk Wstecz, a na końcu — Dalej: #slideshow { border: 3px solid #cfc; width: 650px; } #content { margin: 10px; } #main { border: 2px dashed #060; font-size: 18px; height: 500px; overflow: scroll; } #navigation { margin-bottom: 20px; } .navlink, .hiddennavlink, .displaynavlink { background-color: #fcc; display: inline; margin: 5px; padding: 5px; } .hiddennavlink { visibility: hidden; } .displaynavlink { visibility: visible; } #photo { padding: 10px; }

Trzeba też wprowadzić pewne zmiany w kodzie JavaScript służącym do obsługi nawigacji, aby umożliwić ukrywanie i wyświetlanie przycisków: adjustNavigation : function() { var node = this.currentPage; // Dostosowanie nawigacji do następnego zdjęcia var next = aaElem('next'); if (!node.next) { next.className='hiddennavlink'; } else { next.className = 'displaynavlink'; } var previous = aaElem('previous'); if (!node.previous) { previous.className = 'hiddennavlink';

246 |

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

} else { previous.className = 'displaynavlink'; } },

Podstawowa zmiana w funkcjonalności dotyczy kodu JavaScript specyficznego dla aplikacji. Listing 7.16 przedstawia cały ten kod. Warto zauważyć, że nowa wersja aplikacji zawiera drobny wizualny efekt przejścia oparty na bibliotece moo.fx z pakietu mooTools (http://mootools.net). Obszar ze zdjęciem staje się niemal całkowicie przezroczysty tuż przed zmianą fotografii, a następnie jest przywracany do zwykłego stanu. Ilość kodu potrzebna do dodania tej szczypty elegancji jest dość mała. Listing 7.16. Część ajaksowa nowej, równoległej aplikacji opartej na Ajaksie i PHP function showPage() { window.location.hash = this.identifier; var photo = photos[this.identifier]; var func = "removeOld('" + photo + "')"; setTimeout(func, 500); new Fx.Style('main', 'opacity').custom(1,0.3); } function removeOld(photo) { getEXIF(photo); var main = aaElem('main'); // Usuwanie dawnej zawartości var current = aaElem('photo'); if (current) main.removeChild(current); var img = document.createElement("img"); img.src=photo; img.id='photo'; main.appendChild(img); new Fx.Style('main', 'opacity').custom(0.3,1); } function getEXIF(photo) { // Usuwanie starych danych if (aaElem('exifid')) { document.getElementsByTagName('head')[0].removeChild(aaElem('exifid')); } var url = 'get_photo.php?photo=' + photo; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url + '&callback=printEXIF'; script.id = 'exifid'; document.getElementsByTagName('head')[0].appendChild(script); } function createListItem(text,ul) { var li = document.createElement('li'); var txt = document.createTextNode(text); li.appendChild(txt); ul.appendChild(li); return ul; }

Trwałość w starym i nowym stylu — ramię w ramię

|

247

function printEXIF(exifObj) { // Dostęp do elementu meta i wyczyszczenie jego danych var index; var hash = window.location.hash; if (hash) { index = hash.split("#")[1]; } var meta = aaElem('meta'); var metacontent =aaElem('metacontent'); var permalink = aaElem('permalink'); if (metacontent) meta.removeChild(metacontent); if (permalink) meta.removeChild(permalink); var p = document.createElement('p'); p.id = 'permalink'; var a = document.createElement('a'); var href = window.location.pathname + "?photo=" + index; a.setAttribute('href', href); a.appendChild(document.createTextNode('Trwały odnośnik do strony')); p.appendChild(a); meta.appendChild(p); var ul = document.createElement('ul'); ul=createListItem(exifObj.Model,ul); ul=createListItem(exifObj.ISOSpeedRatings,ul); ul=createListItem(exifObj.ExposureTime,ul); ul=createListItem(exifObj.DateTimeOriginal,ul); ul=createListItem(exifObj.COMPUTED.ApertureFNumber,ul); ul.id="metacontent"; meta.appendChild(ul); } aaManageEvent(window,'load',function() { var home; var current; var index; var past; var hash = window.location.hash; // Pobieranie wartości skrótu if (hash) { index = hash.split("#")[1]; } // Tworzenie węzłów nawigacyjnych for (var id = 0; id < photos.length; id++) { var nav = Navigation.addNavigationNode(past,id,showPage); if (!past) { home = nav; } past = nav; if (index && id == index) current = nav; } // Ustawianie stron startowej i bieżącej Navigation.setHome(home); if (!current) { Navigation.setCurrentPage(home);

248 |

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

} else { Navigation.setCurrentPage(current); } // Dodawanie zdarzeń do przycisków do obsługi pokazu aaManageEvent(aaElem('next'),'click',aaBindObjMethod(Navigation,Navigation.nextPage)); aaManageEvent(aaElem('previous'),'click',aaBindObjMethod(Navigation,Navigation. prevPage)); aaManageEvent(aaElem('home'),'click', Navigation.returnHome); });

Przy pierwszym otwarciu strony żądanie jest przetwarzane przez aplikację PHP, jednak natychmiast zastępuje ją aplikacja ajaksowa. Wersja aplikacji ajaksowej użyta w tym przykładzie zapisuje znaki kratki w adresie URL, na wypadek gdyby użytkownik opuścił stronę, a następnie chciał na nią wrócić. Jednak aplikacja nie obsługuje przycisku Wstecz. Zastosowanie zegarów wyłącznie w tym celu to koszty, których nie chcę dodawać do aplikacji. Udostępnienie bardzo przejrzystej nawigacji w samej aplikacji i trwałych odnośników niezależnych od skryptów, a także obsługi kliknięcia odnośnika prowadzącego poza tę aplikację i otwarcia nowej strony w przeglądarce, oznacza rozwiązanie wszystkich kwestii w sposób, który działa w różnych przeglądarkach i wymaga minimalnej liczby nadzwyczajnych technik. Jedyny brakujący element to dostęp za pomocą klawiatury, można go jednak zapewnić, używając odmiany techniki „kliknij X, aby zamknąć” w połączeniu z nakładaniem, co opisuje rozdział 5. Przedstawione podejście można zastosować także do obsługi stron pobieranych z bazy danych, jednak w tym przypadku parametry zapytania trzeba przekazać do aplikacji PHP i zapisać jako element skrótu. Obie aplikacje współdziałają z funkcją „wczytywania na żądanie”, opisaną w tym rozdziale. Jest jednak jeszcze jedna technika, którą można zastosować do aplikacji ze stronami, jeśli danych jest na tyle mało, że można je wstępnie wczytać w momencie otwierania aplikacji. To rozwiązanie opisuje następny punkt.

Nowy wygląd strony Eric Mayer, znany ekspert od stylów CSS i autor materiałów na ten temat, utworzył opartą na standardach i dostępną platformę do tworzenia pokazów slajdów i prezentacji — S5 (ang. Simple Standards-Based Slide Show System; stąd „5” w nazwie). Działanie tej aplikacji polega na wczytaniu do dokumentu każdej strony (lub slajdu prezentacji) i nadaniu jej nazwy określonej klasy. Jeśli użytkownik otworzył stronę, a obsługa skryptów jest włączona, nazwy klas są przetwarzane za pomocą modelu DOM, a następnie „nakładane” na strony, po których można przejść przy użyciu mechanizmów nawigacyjnych. S5 zapewnia dobrą obsługę klawiatury. Na stronie http://meyerweb.com/eric/tools/s5 można znaleźć więcej informacji o S5, zobaczyć przykłady oraz pobrać kod tego narzędzia.

To rozwiązanie jest dobre, ponieważ jeśli obsługa skryptów jest wyłączona, aplikacja wyświetli wszystkie strony, jedna pod drugą. Użytkownicy mogą wtedy przewinąć stronę w dół i przeczytać każdą sekcję po kolei. Kod uruchamiany po stronie serwera jest niepotrzebny, a kod do zarządzania dynamiczną prezentacją nie musi być zbyt skomplikowany.

Nowy wygląd strony

| 249

Technicznie rzecz biorąc, nie jest to aplikacja ajaksowa, ponieważ nie ma w niej wywołań Ajaksa. Jednak zasięg Ajaksa zwiększył się i obejmuje większość dynamicznych zastosowań języka JavaScript, dlatego można nazwać to rozwiązanie ajaksowym przez pokrewieństwo. Po podzieleniu artykułu dotyczącego poleceń Uniksa można złożyć go z powrotem na potrzeby następnej aplikacji. Elementy pokazu slajdów nie wymagają zmian, a każda strona jest dodawana pod nimi i ma niepowtarzalny identyfikator oraz współdzieloną klasę „sekcji”. Nie przedstawiam tu pełnego kodu strony, ponieważ jest dość długi. Przytoczony fragment wystarcza, aby zrozumieć, jak działa ta strona (kompletny przykład wchodzi w skład kodu źródłowego, który można pobrać ze strony http://helion.pl/AJAXIM). Listing 7.17 zawiera część strony, która jest niemal identyczna z poprzednimi przykładami. Różnica to obecność fragmentów tekstu jako stron. Listing 7.17. Prezentacja obejmująca strony tekstu. Opiera się na rozwiązaniach z platformy S5

Wstecz

Start

Dalej

...

...

...

250

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

Jeśli użytkownik otworzy stronę, a obsługa skryptów będzie wyłączona, aplikacja usunie z układu strony elementy związane z pokazem slajdów, ustawiając ogólną właściwość display pokazu slajdów na none. Dzięki temu pokaz slajdów nie przeszkadza w dostępie do fragmentów strony, a ich styl obejmuje jedynie przerywaną ramkę i odstępy między elementami. Jednak jeśli obsługa skryptów działa, aplikacja wyświetli elementy pokazu slajdów (przyciski i ramki), a ukryje sekcje. Kod JavaScript do kontroli tej prostej aplikacji ze stronami (z prezentacją) jest dużo mniej złożony niż w poprzednich przykładach. Przedstawia go listing 7.18. Funkcja setup znajduje i ukrywa sekcje, a następnie używa ich identyfikatorów do utworzenia węzłów nawigacyjnych. Przy wyświetlaniu każdej strony aplikacja ustawia właściwość innerHTML strony głównej na zawartość ukrytej sekcji. Jest to pewne uproszczenie, a jeśli autor używa wypunktowania lub podobnych elementów, lepsze rozwiązanie polega na zastosowaniu modelu DOM do skopiowania materiałów do pokazu. Listing 7.18. Kod aplikacji do obsługi tekstowej prezentacji (pokazu slajdów) function showPage() { window.location.hash = this.identifier; var content = aaElem('page'); if (!content) { content = document.createElement('div'); content.id = 'page'; aaElem('main').appendChild(content); aaElem('slideshow').style.display = 'block'; } content.innerHTML = aaElem(this.identifier).innerHTML; } aaManageEvent(window,'load',function() { var past; var home; var current; var pageCount = 11; var index; var hash = window.location.hash; if (hash) { index = hash.split("#")[1]; } var elems = document.getElementsByTagName('div'); var pages = []; for (var j = 0; j < elems.length; j++) if (elems[j].className == 'section') { elems[j].style.display = 'none'; pages[pages.length] = elems[j]; } for (var i = 0; i < pages.length; i++) { var id = pages[i].id; var nav = Navigation.addNavigationNode(past,id,showPage); if (!past) { home = nav; } past = nav; if (index && id == index) current = nav; }

Nowy wygląd strony

|

251

Navigation.setHome(home); if (!current) { Navigation.setCurrentPage(home); } else { Navigation.setCurrentPage(current); } aaManageEvent(aaElem('next'),'click',aaBindObjMethod(Navigation,Navigation.nextPage)); aaManageEvent(aaElem('previous'),'click',aaBindObjMethod(Navigation,Navigation. prevPage)); aaManageEvent(aaElem('home'),'click', Navigation.returnHome); });

Ta aplikacja wygląda tak samo jak rozwiązanie z listingu 7.7 przedstawione we wcześniejszej części rozdziału, w którym każdy fragment strony był wczytywany za pomocą aplikacji zewnętrznej i wywołań Ajaksa. Także skróty działają niezależnie od tego, czy obsługa skryptów jest włączona, czy nie. Wystarczy umieścić nazwane znaczniki anchor na początku każdej sekcji. Umieszczenie zawartości na stronie tworzy pewnego rodzaju pamięć podręczną. Nie jest to wydajne rozwiązanie, jeśli strona zawiera wiele materiału, duże rysunki lub inne multimedia, jednak sprawdza się dobrze w przypadku prezentacji i dłuższych artykułów.

Analiza końcowa Nie wszystkie aplikacje mogą opierać się na dostępnych, dyskretnych rozwiązaniach z elegancką degradacją działania. W przypadku bardziej złożonych aplikacji ajaksowych, które naśladują działanie edytorów tekstu, arkuszy kalkulacyjnych, klientów poczty elektronicznej i innych podobnych programów, potrzeba olbrzymiej ilości kodu, aby choć spróbować przywrócić podstawową funkcjonalność internetu lub zapewnić dostępność. Nawet ostatnie przykłady przedstawione w tym rozdziale nie będą współdziałać z większością aplikacji odczytujących tekst z ekranu. Wyjątkiem jest ostatnie rozwiązanie, które po wczytaniu strony zawiera wszystkie dane. W przypadku aplikacji, które można uruchamiać równolegle z funkcjami obsługiwanymi po stronie serwera lub inną dyskretną implementacją, próba „przywrócenia” całej funkcjonalności internetu niekoniecznie jest warta poświęconego czasu i wysiłku. Lepiej jest wbudować w aplikację dobrze widoczny wewnętrzny system nawigacyjny, niż próbować zapewnić działanie prawdziwego przycisku Wstecz. Należy unikać stosowania zegarów wyłącznie w celu zapewnienia takiej funkcjonalności, ponieważ mogą wtedy wystąpić nieoczekiwane efekty uboczne. Warto natomiast udostępnić oparty na skryptach tymczasowy adres URL, który może pomóc w odtworzeniu stanu strony, jeśli użytkownik kliknie odnośnik prowadzący poza aplikację lub otworzy inną witrynę za pomocą zakładki. Nie należy jednak traktować takich adresów jako trwałych odnośników do strony. Wszystkie przykłady przedstawione w tym rozdziale są luźno oparte na pokazach slajdów, jednak tego samego podejścia można użyć dla stronicowanej zawartości dowolnego rodzaju. Obejmuje to strony z zakładkami, które opisuje rozdział 9.

252

|

Rozdział 7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych

ROZDZIAŁ 8.

Dodawanie zaawansowanych efektów wizualnych

Ajax nie wymaga skomplikowanych efektów wizualnych. Jedyne potrzebne efekty to te przedstawione w poprzednich rozdziałach: możliwość dodawania, zmieniania i usuwania zawartości strony, ukrywania i wyświetlania nowych danych oraz wyróżniania zmian. Wszystkie te efekty opierają się na stosunkowo prostych i rozpowszechnionych technologiach, takich jak HTML czy CSS. Po drugiej stronie rodziny aplikacji ajaksowych znajdują się bogate aplikacje internetowe (ang. Rich Internet Applications — RIA). Takie programy mają naśladować w przeglądarkach internetowych tradycyjne aplikacje stacjonarne, a do ich tworzenia programiści używają technologii ajaksowych. Aplikacje tego typu to edytory tekstu, arkusze kalkulacyjne, klienty poczty elektronicznej, a nawet programy graficzne, podobne do Painta, GIMP-a (ang. GNU Image Manipulation Program) czy Photoshopa. Aplikacje RIA stawiają większe wymagania funkcjom graficznym przeglądarek. Tych potrzeb zwykle nie zaspokajają style CSS, a na pewno nie ich prostsze zastosowania. Choć tworzenie aplikacji tego typu znacznie wykracza poza zakres tej książki, inaczej jest w przypadku narzędzi wizualnych używanych przez autorów programów RIA. A przynajmniej nie wykraczają one na tyle daleko, żeby nie poświęcić jednego rozdziału na odrobinę zabawy i nie spędzić nieco czasu na poznawaniu efektów, jakie można dodać do edycji w miejscu czy sprawdzania aktualizacji. Przy dodawaniu zaawansowanych efektów wizualnych do aplikacji sieciowych można zastosować dwa podejścia. Pierwsze z nich jest dostępne we wszystkich przeglądarkach internetowych i opiera się na efektach zarządzanych za pomocą stylów CSS. Obejmuje to przezroczystość, zmiany rozmiaru, przycinanie i tak dalej. Drugie podejście polega na wykorzystaniu wyspecjalizowanych obiektów i specyfikacji. W tym przypadku programiści mają szczęście w nieszczęściu, ponieważ dostępnych jest wiele różnych bibliotek graficznych, obiektów i technologii, spośród których można wybierać. Duży wybór jest korzystny, a dotyczy to także programowania aplikacji sieciowych, o ile dostępne narzędzia działają we wszystkich docelowych przeglądarkach. I tu leży problem związany ze specyfikacjami efektów wizualnych dostępnymi programistom Ajaksa: obsługa zaawansowanych efektów wizualnych jest wbudowana w niemal wszystkie powszechnie używane przeglądarki, jednak każda z nich współdziała tylko z niektórymi rozwiązaniami, a żadna technika nie jest powszechnie obsługiwana we wszystkich najważniejszych przeglądarkach.

253

Inne firmy promują następną specyfikację graficzną: skalowalną grafikę wektorową (ang. Scalable Vector Graphics — SVG). Format SVG jest obecnie obsługiwany w przeglądarkach opartych na Gecko (takich, jak: Mozilla, Camino, Firefox), w Operze, a także w rozwojowej wersji Safari (WebKit). Dostępne są wtyczki, które zapewniają obsługę formatu SVG także w innych przeglądarkach, między innymi w Internet Explorerze. Specyfikację SVG zatwierdziło konsorcjum W3C i prawdopodobnie w przyszłości format ten stanie się standardem. Firma Apple utworzyła rozszerzenie Canvas dla przeglądarki WebKit. Udostępnia ono implementację grafiki dla widgetów Dashboard i przeglądarki Safari. Zapewnia dostęp do interfejsu API Cocoa 2D z poziomu języka JavaScript, co ma znaczenie oczywiście wyłącznie w systemie Mac OS X. Mimo to element canvas został uwzględniony w standardzie Web Applications 1.0 HTML firmy WhatWG, nazywanym powszechnie specyfikacją HTML 5. Dlatego obsługa tego elementu znajduje się także w przeglądarkach opartych na Gecko oraz w Operze i Safari. Ponieważ obsługa formatu VML jest ograniczona, nie omawiam go w tym rozdziale. Wspominam o nim, tylko opisując biblioteki, które zapewniają obsługę VML i SVG w różnych przeglądarkach. W zamian koncentruję się na elemencie canvas i formacie SVG oraz przedstawiam bardziej zaawansowane zastosowania CSS. Prace nad HTML5 w WhatWG zostały skoordynowane z W3C w celu utworzenia nowej, zaktualizowanej wersji języka HTML. Te wysiłki koncentrują się na udostępnieniu nowej, ustandaryzowanej wersji znaczników, będącej alternatywą dla programistów witryn internetowych, którzy nie są gotowi do przejścia na XHTML. Więcej informacji o specyfikacji HTML5 WhatWG można znaleźć na stronie http://www.whatwg. org/specs/web-apss/current-work oraz w witrynie W3C pod adresem http://www.w3.org/ html/wg.

Zaawansowane sztuczki z CSS Zawsze uważałam, że efekty wizualne przedstawione we wcześniejszych rozdziałach — takie, jak zapewnianie przezroczystości obiektów, ukrywanie i wyświetlanie elementów czy przenoszenie ich na żądanie — są dość zaawansowane. Jednak w aplikacjach ajaksowych można zastosować także inne sztuczki oparte na CSS. Czy którakolwiek ze sztuczek prezentowanych w tym miejscu jest niezbędna? Moim zdaniem żadne efekty nie są konieczne — i nie powinny być, jeśli jednym z celów jest to, aby zastosowanie Ajaksa było dyskretne. Jednak efekty pozwalają dodać elegancji stronom internetowym, co może być równie ważne jak zapewnienie dostępności. Co jednak najlepsze, jeśli efekty są już wbudowane w bibliotekę, można oszczędzić sobie wiele pracy.

Zaokrąglone narożniki Ajax i zaokrąglone narożniki pasują do siebie jak ręka do rękawiczki. Zwykle do utworzenia tego efektu używane są rysunki zaokrąglonych narożników wyświetlane jak tło dla wielu warstw, co tworzy „pudełko”, którego rozmiar można zmienić w pionie i poziomie. Inne rozwiązania, oparte na obrazach PNG i przezroczystości, pozwalają „tworzyć” zaokrąglone narożniki po kilka pikseli naraz. Nie przepadam za tą techniką, zwłaszcza ze względu na słabą obsługę przezroczystości alfa obrazów PNG w przeglądarce Internet Explorer. 254 |

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

Kilka omówionych w tej książce bibliotek Ajaksa udostępnia zaokrąglone narożniki tworzone przy użyciu kodu JavaScript. Rozwiązanie z biblioteki Rico jest proste w użyciu i udostępnia opcje umożliwiające przenikanie oraz określanie tylko jednego narożnika, na przykład opcję tl (górny lewy narożnik): Rico.Corner.round('div1'); // Określenie identyfikatora elementu Rico.Corner.round('div', {corners: "tl"});

Proste, jednak zaokrąglanie za pomocą Rico ma specyficzny efekt uboczny. Jeśli programista użyje dopełnienia lub ustawi wysokość elementu na większą niż długość treści, aplikacja wyświetli „powygryzany” blok, co przedstawia rysunek 8.1.

Rysunek 8.1. Dziwny efekt zaokrąglonych narożników

Sposobem na uniknięcie „wcięć” jest rezygnacja z dopełnienia i nieustawianie wysokości. Jeśli programista chce zastosować wewnętrzne dopełnienie, może użyć bloku wewnętrznego i odpowiednio ustawić jego marginesy. Narożniki z biblioteki Rico będą wtedy działały prawidłowo. Więcej przykładów zaokrąglania za pomocą Rico można zobaczyć na stronie http://openrico.org/demos/?demo=corner. Pakiet MochiKit także obsługuje zaokrąglone narożniki. Służy do tego biblioteka Visual. Umożliwia ona zaokrąglanie bloków całej klasy elementów, a nie tylko po jednym naraz: roundClass('div');

Zaawansowane sztuczki z CSS

|

255

Jest to wygodna opcja. Jednak aby jej użyć, trzeba dołączyć kilka bibliotek: MochiKit/Base.js MochiKit/Iter.js MochiKit/DOM.js MochiKit/Color.js MochiKit/Visual.js

Jednak MochiKit to kompletna biblioteka Ajaksa, a także infrastruktura. Jeśli programista używa innych komponentów do odmiennych zadań, może zastosować bibliotekę Visual do zaokrąglania. W przeciwnym razie warto zrezygnować z krzywizn. MochiKit, podobnie jak Rico, także zagrożona jest efektem „wcięć” i trzeba użyć wewnętrznych elementów z marginesem, jeśli potrzebne są dopełnienia. MochiKit udostępnia bardzo ciekawą dokumentację, o czym można się przekonać na przykładzie biblioteki Visual.js, odwiedzając stronę http://mochikit.com/ doc/html/MochiKit/Visual.html. Zaokrąglone narożniki mogą dodać stronie internetowej elegancji. Decyzja o użyciu w tym celu grupy rysunków lub kodu JavaScript zależy od tego, czy programista używa już biblioteki. Warto jednak pamiętać o tym, że jeśli rozwiązanie opiera się na kodzie JavaScript, a obsługa skryptów jest wyłączona, efekt zostanie utracony.

Suwaki i paski przewijania Suwaki to elementy wizualne składające się z uchwytu, dwóch punktów końcowych oraz wąskiego prostokąta o szerokości uchwytu, ograniczonego przez punkty końcowe. Już niektóre z pierwszych dynamicznych pakietów z komponentami wizualnymi HTML miały wbudowaną obsługę pasków przewijania, a obecnie można znaleźć mnóstwo bibliotek języka JavaScript i wyspecjalizowanych bibliotek Ajaksa zapewniających tę funkcjonalność. Wszystkie powinny zapewniać obsługę zdarzeń, a także dostęp za pomocą klawiatury i alternatywne, tekstowe rozwiązanie w przypadku wyłączonej obsługi skryptów. Powinny, ale w wielu nie ma alternatywy dla skryptów — zwykle trzeba zapewnić ją samemu. Paski przewijania to odmiana suwaków. Znajdują się w prawej lub dolnej części elementu i służą do przewijania w pionie lub poziomie treści, która wykracza poza ramy danego elementu. Paski przewijania można wbudować w dowolny element, używając stylów CSS. Ustawienie właściwości overflow na scroll powoduje automatyczne dodanie pasków przewijania do elementu. Niestety, takie paski są widoczne nawet wtedy, kiedy materiał nie wykracza poza obszar elementu, jednak poprawne używanie tej techniki może nadać elementom nowy wymiar. Inne rozwiązanie polega na nadaniu określonej wysokości elementowi i ustawieniu overflow na wartość auto, co powoduje, że pasek przewijania będzie widoczny tylko wtedy, kiedy zawartość przekroczy rozmiar elementu. Ajaksowe paski przewijania zwykle wiążą się z zagadnieniem ajaksowego stronicowania, choć samych suwaków można używać do różnych zadań, włączając w to dostosowywanie kolorów obiektów i zmianę szerokości elementów. Jest tak wiele dobrych bibliotek do tworzenia suwaków i pasków przewijania, że nie mogę wyobrazić sobie, aby potrzebne było tworzenie własnych. Yahoo! UI ma wbudowany suwak, a w X Library Mike’a Fostera także znajduje się ciekawe rozwiązanie (ta biblioteka oraz jej dokumentacja są dostępne na stronie http://cross-browser.com). Dojo zawiera komponent w postaci suwaka, podobnie jak script.aculo.us. Wpisanie w wyszukiwarce słowa „slider” prawdopodobnie pozwoli znaleźć komponent w postaci suwaka, dokumentację stosowania wbu256

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

dowanych suwaków i przykłady ich zastosowania. A są to tylko zastosowania ajaksowe. Po wpisaniu wyrażenia „javascript and slider” można znaleźć bardziej zaawansowane wersje suwaków, które działają niezależnie od bibliotek Ajaksa. Jak wspomniałam w poprzednich rozdziałach, bardzo cenię stronicowanie. Uważam, że nawigacja po zawartości strony podzielonej na warstwy w formie stron z zakładkami czy pokazu slajdów działa bardzo dobrze. Przy zwracaniu wyników z zapytania, jeśli zwrócone dane są proste, stronicowanie pozwala udostępnić ciekawy efekt. Niewątpliwie jest to dobry przykład zastosowania suwaków i pasków przewijania. Następny przykład obejmuje stronicowanie przy użyciu usługi kierującej zapytania o dane. Usługa ta została utworzona w rozdziale 7. na potrzeby jednostronicowej aplikacji (pokazu slajdów) korzystającej z bazy danych. Usługa działająca na zapleczu nie wymaga żadnych zmian. Fronton składa się z suwaka i elementu strony zawierającego tabelę HTML, w której wraz z przesuwaniem suwaka w dół wyświetlane są wiersze o coraz wyższych numerach. Tabela umożliwia przewijanie w górę i w dół na podstawie ruchów suwaka, dzięki czemu można wyświetlić niedawno pobrane lub starsze dane. Poniższa strona internetowa jest bardzo prosta. Zawiera suwak oraz elementy przeznaczone na tabelę HTML (listing 8.1). Listing 8.1. Przykładowa strona internetowa z suwakiem i stronicowaniem

Zaawansowane sztuczki z CSS

|

257

Użyta miniatura pochodzi z przykładu z biblioteki YUI, jednak można zastosować dowolny inny rysunek. Plik CSS używany w tym przykładzie także jest prosty. Najważniejsze jest ustawienie pionowego suwaka po lewej stronie, obszaru z tabelą po prawej, a głównego obszaru tak, aby aplikacja ukrywała nadmiarowe wiersze w celu utworzenia efektu „przewijania” przy przenoszeniu danych na podstawie ruchów suwaka: #container { margin: 20px auto; width: 700px; height: 440px; } #sliderbg { background-color: #ccc; border: 1px outset #333; float: left; height: 420px; width: 10px; } #main { position: absolute; background-color: #ccc; border: 1px outset #333; height: 420px; margin-left: 20px; overflow: hidden; width: 600px; } #inner { margin: 5px; top: 10px; } tr { margin-bottom: 3px; margin-top: 3px; } td { margin: 2px; } table { width: 98%; }

Kod JavaScript aplikacji, przedstawiony na listingu 8.2, to zmodyfikowana wersja kodu z listingu 7.9 z rozdziału 7. Jedyna różnica polega na tym, że w czasie wczytywania strony tworzona jest tabela i powiązany z nią suwak, a pobierane dane aplikacja umieszcza w tej właśnie tabeli. Listing 8.2. Kod JavaScript do obsługi suwaka i stronicowania var cache = { offset : 80, fetch : 40 };

258

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

aaManageEvent(window,"load", function() { var slider = YAHOO.widget.Slider.getVertSlider("sliderbg", "sliderthumb", 0, 400); slider.setValue(0,true); slider.subscribe("change",adjustPage); // Dostosowanie pozycji z uwagi na specyfikę przeglądarki Internet Explorer createTable(); getRows(0); aaElem('inner').style.position='relative'; }); // Dostosowuje kontener na tabelę na podstawie pozycji // i określa, czy trzeba zwiększyć pamięć podręczną // dla bazy danych function adjustPage(offset) { var inner = aaElem('inner'); var newTop = -offset; inner.style.top = newTop + "px"; // Jeśli przesunięcie jest większe niż w pamięci podręcznej, // należy pobrać wiersze i zaktualizować tę pamięć if (offset > cache.offset) { getRows(cache.fetch); cache.offset+=80; cache.fetch+=40; } } // Pobiera następną grupę wierszy function getRows(start) { var url = 'getposts.php?start=' + start; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url + '&limit=40&callback=printRows'; document.getElementsByTagName('head')[0].appendChild(script); } // Tworzy i dołącza komórkę tabeli function createTableCell(value,tr) { // Tworzy element var cell = document.createElement("td"); // Tworzy węzeł tekstowy var text = document.createTextNode(value); // Dołącza utworzony węzeł tekstowy do komórki cell.appendChild(text); // Dołącza komórkę do wiersza tr.appendChild(cell); return tr; } // Tworzy pustą tabelę i dodaje do strony; // ustawia styl top kontenera function createTable() { var inner = aaElem('inner'); var table = document.createElement('table');

Zaawansowane sztuczki z CSS

|

259

table.id = 'dataTable'; var tableBody = document.createElement("tbody"); tableBody.id = "dataTableBody"; table.appendChild(tableBody); inner.appendChild(table); inner.style.top = "0px"; } // Dodaje nowo pobrane wiersze jako wiersze tabeli function printRows(rowsObj) { // Usuwa stare dane var tableBody = aaElem('dataTableBody'); // Wiersze tabeli for(var i = 0; i < rowsObj.length; i++) { // Tworzy element var row = document.createElement("tr"); row = createTableCell(rowsObj[i].id, row); // Tworzy znacznik anchor i tytuł var cell = document.createElement("td"); cell.innerHTML = "" + rowsObj[i].title + ""; row.appendChild(cell); row = createTableCell(rowsObj[i].comments,row); tableBody.appendChild(row); tableBody.style.overflow="hidden"; } }

Po poruszeniu suwaka atrybut top stylów CSS tabeli jest ustawiany na wartość ujemną przesunięcia suwaka (jego odległości od góry). Dzięki temu tabela zawsze jest przewijana w górę wraz z przeciąganiem suwaka w dół, a aplikacja przewija ją w dół, kiedy użytkownik przeciągnie suwak w górę. Na początku pobieranych jest jedynie 40 wierszy, a globalny obiekt służący jako pamięć podręczna służy do określania liczby wczytanych wierszy. W tym celu aplikacja sprawdza, czy przesunięcie suwaka jest większe niż wartość ustawiona przy ostatniej aktualizacji pamięci podręcznej. Pasek przewijania o długości 400 pikseli wymaga w tym przypadku mniej więcej pięciu operacji pobierania danych z bazy. Układ jest domyślnie statyczny, a aby przycinanie działało prawidłowo, wewnętrznemu elementowi zawierającemu tabelę trzeba nadać pozycję względną, zachowując jednocześnie pozycję absolutną elementu zewnętrznego. Jednak z powodu specyfiki działania przeglądarki Internet Explorer elementowi wewnętrznemu można nadać pozycję względną dopiero po utworzeniu tabeli HTML. W przeciwnym razie przewijanie tabeli będzie możliwe, jednak aplikacja nie przytnie jej przy krawędzi głównego kontenera. Także w tym przypadku jest to najprostsze możliwe zastosowanie suwaków, ale działa. Aby upewnić się, że aplikacja pozostanie dostępna, stronę można zaimplementować w sposób opisany w rozdziale 7., czyli użyć kodu uruchamianego po stronie serwera do pobierania danych i tworzenia tabeli przy użyciu pierwszej grupy wierszy, udostępniając przy tym odnośniki do następnych grup. To działanie powinna zastąpić aplikacja ajaksowa, jeśli użytkownik otworzy stronę za pomocą przeglądarki z włączoną obsługą skryptów. Obie aplikacje mogą używać tej samej usługi sieciowej do pobierania wierszy.

260

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

Suwak ma wiele zmiennych elementów, włączając w to rozbudowaną obsługę przeciągania, dlatego ułatwiłam sobie pracę i użyłam biblioteki zewnętrznej — YUI. Przedstawione tu zastosowanie stronicowania rzadko spotyka się jako efekt Ajaksa. Częściej używane są menu dynamiczne, opisane w następnym podpunkcie.

Menu zgodne z WWW Menu mogą pojawiać się z boku, opadać z góry, swobodnie pływać po stronie, rozwijać się, zwijać, a czasem pozostają całkowicie niezmienne. Menu to obszar, który wymaga zachowania najwyższej ostrożności, ponieważ w przypadku udostępnienia menu opartego wyłącznie na języku JavaScript użytkownicy bez obsługi skryptów nie będą mieli żadnej możliwości poruszania się po witrynach i aplikacjach sieciowych. Menu mogą składać się z przycisków i elementów div, jednak także w tym przypadku, jeśli programista nie użyje odnośników hipertekstowych, pozbawi możliwości nawigacji osoby, które nie używają myszy. Można utworzyć skalowalne, hierarchiczne i dynamiczne menu przy zachowaniu dostępnej nawigacji, nie wspominając o poprawności semantycznej. W tym celu należy użyć menu spopularyzowanego przez autorów witryny A List Apart (http://alistapart.com/articles/dropdowns), znanego jako menu Suckerfish. Jest ono oparte na liście nieuporządkowanej, pseudoatrybucie :hover stylów CSS oraz małej ilości kodu JavaScript, który jest potrzebny, aby rozwiązanie działało w przeglądarkach Internet Explorer 6.x, ponieważ obsługują one pseudoatrybut :hover wyłącznie dla znaczników anchor (a). Wspomniane menu rozwinięto następnie jako Son of Suckerfish. Nowa wersja umożliwia stosowanie więcej niż dwóch poziomów menu oraz rozwiązuje pewne problemy specyficzne dla różnych przeglądarek (http://www.htmldog.com/articles/suckerfish/dropdowns). W przypadku wielopoziomowych menu korzystanie z tego rozwiązania jest nieco skomplikowane i trzeba poradzić sobie z kaskadowym efektem stylów CSS. W oryginalnym menu Suckerfish przy zastosowaniu więcej niż jednego poziomu otwarcie pierwszego poziomu powodowało wyświetlenie wszystkich dodatkowych poziomów. Aby temu zapobiec, trzeba było dodać style CSS ukrywające dodatkowe poziomy po wyświetleniu poziomu pierwszego. Nowsza wersja tego menu to (Son-of-)Suckerfish z obsługą przeglądarki Internet Explorer 7: http://de.siteof.de/ extended-menu-faq-suckerfish-ie7.html. Technologia posuwa się naprzód, a Suckerfish wciąż ma się dobrze. To menu jest dostępne, działa bez obsługi skryptów i umożliwia utworzenie hierarchicznego systemu nawigacyjnego na złożonych witrynach. Menu Suckerfish jest tylko częściowo zgodne z wymogami dostępności, ponieważ użytkownicy korzystający z klawiatury muszą wielokrotnie wciskać klawisz Tab.

Niestety, większość systemów do obsługi menu dostępnych w bibliotekach Ajaksa wymaga skryptów. System nawigacyjny to jeden z obszarów, których nie wolno naruszyć przy dodawaniu efektów języka DHTML czy Ajaksa do witryny. Dlatego nie zalecam stosowania żadnych menu DHTML, chyba że mają działać w aplikacji całkowicie zależnej od skryptów. W takiej sytuacji włączenie lub wyłączenie obsługi skryptów to kwestia hipotetyczna. Zaawansowane sztuczki z CSS

|

261

Przenośne kontenery Materiały przedstawione w tym punkcie zapożyczyłam z napisanej przeze mnie książki dotyczącej języka JavaScript, Learning JavaScript1 (O’Reilly). Nie przepadam za techniką przeciągania, ponieważ większość jej zastosowań jest niezgodna z oczekiwaniami użytkowników. W trakcie zakupów w sklepie internetowym użytkownik nie oczekuje, że może przeciągać produkty do koszyka. Spodziewa się, że zakupy znajdą się w koszyku po kliknięciu przycisku. W przypadku przenoszenia elementów na stronie w celu dostosowania środowiska pracy może się zdarzyć, że użytkownicy przeciągną pola na inne, początkowo niewidoczne elementy. Mimo to warto zobaczyć, jak działa przeciąganie, ponieważ czasem zastosowanie tej techniki jest usprawiedliwione. Jednym z takich przypadków jest witryna Google Maps, w której można przeciągnąć mapę w kontenerze i wyświetlić wcześniej niewidoczny obszar. Ta możliwość przeciągania „w obrębie” kontenera, aby zobaczyć zakryte fragmenty, to dobra alternatywa dla obsługi pasków przewijania, nadmiarowych fragmentów i podobnych zagadnień. Listing 8.3 obejmuje zawartość strony internetowej wraz z arkuszem stylów, zagnieżdżonym w celu uproszczenia przykładu. Warto zwrócić uwagę, że strona zawiera jedynie element img umieszczony w elemencie div. Rysunek używany w tym przykładzie jest dużo większy niż widoczny fragment, a nadmiarowa część jest ukryta. Listing 8.3. Okno z przeciąganym widokiem

1

Wydanie polskie: JavaScript. Wprowadzenie, Helion, 2007 — przyp. tłum.

262

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

Kod do obsługi tego efektu przedstawia listing 8.4. Choć ten kod obsługuje element znajdujący się w kontenerze, można go użyć dla dowolnego elementu. Wystarczy włączyć dla danego obiektu obsługę przeciągania, używając funkcji makeDraggable i przekazując do niej identyfikator tego obiektu. Listing 8.4. Kod JavaScript do obsługi przeciągania w kontenerze // Zmienne globalne var dragObject; var mouseOffset; // Przechwytywanie zdarzeń związanych z myszą aaManageEvent(document,'mouseup',mouseUp); aaManageEvent(document,'mousemove',mouseMove); aaManageEvent(window,'load', function() { makeDraggable('img1'); }); // Tworzenie punktu ze współrzędnymi myszy function mousePoint(x,y) { this.x = x; this.y = y; } // Wykrywanie pozycji myszy function mousePosition(evnt){ var x = parseInt(evnt.clientX); var y = parseInt(evnt.clientY); return new mousePoint(x,y); } // Pobieranie przesunięcia elementu na stronie function getMouseOffset(target, evnt){ evnt = evnt ? evnt : window.event; var mousePos = mousePosition(evnt); var x = mousePos.x - target.offsetLeft; var y = mousePos.y - target.offsetTop; return new mousePoint(x,y); } // Wyłącza przeciąganie function mouseUp(evnt){ dragObject = null; } // Przechwytuje ruch myszy (tylko przy przeciąganiu) function mouseMove(evnt){ if (!dragObject) return; evnt = evnt ? evnt : window.event; var mousePos = mousePosition(evnt); // Jeśli element umożliwia przeciąganie, należy określić nową pozycję bezwzględną if(dragObject){ dragObject.style.position = 'absolute'; dragObject.style.top dragObject.style.left return false;

= mousePos.y - mouseOffset.y + "px"; = mousePos.x - mouseOffset.x + "px";

} } // Umożliwia przeciąganie obiektu function makeDraggable(item){

Zaawansowane sztuczki z CSS

|

263

if (item) { item = aaElem(item); item.onmousedown = function(evnt) { dragObject = this; mouseOffset = getMouseOffset(this, evnt); return false; }; } }

Programiści języka JavaScript prawdopodobnie zetknęli się już z przeciąganiem, dlatego nie będę tu opisywać szczegółów działania tej techniki. W witrynie Web Reference znajduje się dobry elektroniczny samouczek na ten temat (http://www.webreference.com/programming/javascript/ mk/column2.html). Aplikację udostępniającą przeciąganie w kontenerze można połączyć z utworzonym wcześniej efektem stronicowania i umożliwić przeciąganie tabeli w górę, co przypomina wyjmowanie kartki papieru z teczki w celu przeczytania tekstu znajdującego się na dole. Przeciąganie jest często stosowane do obsługi sortowania, o czym już wspominałam, jednak do zarządzania tym efektem zalecam wykorzystanie gotowych bibliotek. W tej książce często pojawiają się inne efekty CSS, włączając w to wyróżnianie, okna wyskakujące czy wprowadzanie elementów na stronę. Dostępne są także efekty, które powodują wybuchanie, wyskakiwanie czy przesuwanie się obiektów. Większość bibliotek Ajaksa udostępnia takie funkcje poprzez rozszerzenie, bibliotekę podrzędną lub wtyczkę o nazwie effects lub fx. W następnym punkcie przejdziemy ze świata stylów CSS do formatu SVG.

Skalowalna grafika wektorowa Według fragmentu witryny internetowej W3C dotyczącej formatu SVG jest to „… język do opisu dwuwymiarowej grafiki i aplikacji graficznych w formacie XML” (http://www.w3.org/ Graphics/SVG). Najnowsza udostępniona wersja tej specyfikacji to 1.1, jednak obecnie trwają prace nad poprawianiem projektu wersji 1.2 i dostępne są wersje Print oraz Mobile tej specyfikacji. Obecnie format SVG jest obsługiwany przez przeglądarki Firefox i Opera, planowane jest dodanie jego obsługi do przeglądarki Safari (w automatycznie kompilowanych wersjach ta obsługa już się pojawia), a firma Adobe udostępniła przeglądarkę umożliwiającą wyświetlanie obrazów SVG w Internet Explorerze. Przeglądarkę Adobe SVG Viewer dla Internet Explorera można pobrać z witryny firmy Adobe — http://www.adobe.com/svg/viewer/install/main.html. Warto jednak wiedzieć, że od 1 stycznia 2008 roku Adobe ma zaprzestać udzielania pomocy technicznej dla tej przeglądarki.

SVG jest oparty na języku XML i składa się z podstawowego zestawu elementów XML, z których każdy ma atrybuty określające sposób wyświetlania. Są dwa sposoby na dołączenie rysunków w formacie SVG. Pierwszy z nich polega na użyciu znaczników SVG w odrębnym dokumencie i zagnieżdżeniu go na stronie. Druga technika to zastosowanie wewnątrzwierszowego kodu SVG.

264 |

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

Zagnieżdżanie kodu SVG Aby zastosować zagnieżdżanie, należy utworzyć odrębny plik SVG i użyć elementu embed, object lub iframe w celu dołączenia tego pliku do strony internetowej. Zalecane jest używanie nowszego, standardowego elementu object. Przykład użycia tego elementu z plikiem SVG wygląda tak:

Jeśli programista chce udostępnić alternatywne rozwiązanie dla przeglądarek bez obsługi SVG, powinien umieścić w obrębie znaczników elementu object odpowiedni kod HTML:

Niestety, jedyny element, jaki obsługują starsze przeglądarki (mam tu na myśli Netscape 2 i 3), to embed. Ten element obsługuje też wtyczka SVG Viewer firmy Adobe. Jeśli programista chce, aby można było wyświetlać obrazy SVG za pomocą tej wtyczki, powinien użyć właśnie elementu embed:

Jedyny problem z elementem embed polega na tym, że nie wchodzi on w skład specyfikacji HTML, dlatego zawierający go dokument nie przejdzie walidacji jako HTML lub XHTML. Ponadto Internet Explorer nie obsługuje tego elementu i wymaga użycia nowszego elementu object. Na wiki dotyczącej formatu SVG (http://wiki.svg.org/SVG_and_HTML) opisana jest technika umożliwiająca rozwiązanie problemu z walidacją. Należy dodać definicje danych, aby zdefiniować zagnieżdżony element i atrybuty na stronie internetowej.

Trzecie podejście umożliwiające rozwiązanie omawianych problemów polega na użyciu ramek iframe. Ten element jest obsługiwany we wszystkich docelowych przeglądarkach, a ponadto ma znacznik otwierający i zamykający, co pozwala wstawić alternatywną zawartość używaną w przypadku braku obsługi SVG. Listing 8.5 przedstawia krótką stronę SVG, która zawiera czerwony okrąg z czarnym obramowaniem. Elementy SVG są opisane w dalszej części rozdziału, jednak w tym miejscu warto wspomnieć, że poniższy kod uruchomiony w walidatorze XML (http://validator.w3.org) przejdzie walidację jako dokument SVG 1.1. Należy zwrócić uwagę na użycie typu DTD SVG oraz przestrzeni nazw domyślnej dla elementów SVG. Listing 8.5. Prosty plik SVG z jednym okręgiem
Skalowalna grafika wektorowa

|

265

style="fill:rgb(255,0,0); stroke:rgb(0,0,0);stroke-width:2"/>

Jeśli serwer internetowy zwraca dokumenty XML, można otworzyć ten plik bezpośrednio w przeglądarce obsługującej format SVG, a wyświetli ona okrąg. Z kolei na stronie internetowej przedstawionej na listingu 8.6 użyto wszystkich trzech elementów służących do otwierania plików SVG: object, embed i iframe. Listing 8.6. Strona wczytująca plik SVG za pomocą trzech technik

Element embed

Element object

Element iframe

Można przetestować tę stronę w różnych przeglądarkach. W przeglądarce Firefox 2.0 widoczne są trzy czerwone okręgi. Jest to oczekiwane działanie, ponieważ ta wersja Firefoksa (i używanego w nim silnika Gecko) obsługuje większą część specyfikacji SVG 1.1. Trzy okręgi są widoczne także w przypadku otwarcia strony w przeglądarce Opera 9 i jej nowszych wersjach. Jednak otwarcie strony w przeglądarce Safari spowoduje wyświetlenie błędu informującego o braku obsługi formatu SVG. Pobranie i zainstalowanie programu SVG Viewer firmy Adobe umożliwia oglądanie plików SVG w Safari, a przeglądarka wyświetli wtedy wszystkie trzy okręgi. Trzy okręgi będą widoczne także po otwarciu strony w przeglądarce WebKit, co sygnalizuje, że w Safari w przyszłości pojawi się wbudowana obsługa plików SVG. Przejdźmy do komputerów PC. Można sprawdzić działanie strony w przeglądarce Internet Explorer 6.x w systemie Windows 2000. Także w tym przypadku plik SVG będzie niedostępny bez wtyczki firmy Adobe, jednak nawet z nią obsługiwane będą tylko elementy object i iframe. To samo dotyczy przeglądarki Internet Explorer 7 w systemie Windows XP. Ponieważ iframe to prawidłowy element XHTML Transitional (choć już nie Strict), warto ograniczyć się do niego przy zagnieżdżaniu plików SVG. Dostępna jest wyspecjalizowana wtyczka dla przeglądarki Konqueror, KSVG, wchodząca w skład środowiska KDE. Więcej informacji o niej zawiera strona pomocy technicznej w witrynie http://svg.kde.org.

266

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

Dodawanie skryptów Można zrobić wiele, umieszczając kod SVG w odrębnym pliku, który jest ostatecznie zagnieżdżany na stronie. Ponieważ XHTML to prawidłowy kod XML, można go użyć wraz z SVG, co oznacza, że możliwe jest umieszczenie kodu JavaScript w elemencie script w celu manipulowania obiektami SVG. Obiekty SVG są częścią modelu DOM w takim samym stopniu co każdy inny element na stronie. Element script można umieścić bezpośrednio w elemencie svg, jednak warto dodać sekcję CDATA wokół skryptu lub ustawić atrybut src na zewnętrzny plik z kodem JavaScript. Progra-

mista jest wtedy także bardziej zależny od metod modelu DOM, poziom 2, ponieważ nie ma dostępu do wielu skrótowych metod języka XHTML, które prawdopodobnie zna. W takiej sytuacji naprawdę przydatne są narzędzia takie jak Firebug z przeglądarki Firefox. Używając opcji Script i DOM, można łatwo sprawdzić każdy obiekt w kodzie i zobaczyć, jakie właściwości i metody są dostępne. Technika ta działa dla dowolnego dokumentu XML, włączając w to pliki SVG.

Listing 8.7 przedstawia dokument SVG podobny do tego przedstawionego wcześniej, jednak tym razem do elementu svg dodano blok script. Poniższy kod JavaScript zmienia atrybut cx (pozycję w poziomie) elementu, a także jedno z ustawień stylów. Po pierwszym kliknięciu obiektu aplikacja przeniesie go w prawo i zmieni jego kolor na niebieski. Ponowne kliknięcie spowoduje powrót do stanu wyjściowego. Listing 8.7. Dokument SVG ze skryptem

Nie jest potrzebna dodatkowa przestrzeń nazw dla elementu script, ponieważ jest on częścią pełnej specyfikacji SVG 1.1. Po otwarciu dokumentu SVG we wcześniejszym testowym dokumencie XHTML kliknięcie dowolnego z trzech okręgów spowoduje przekształcenie danego elementu (oczywiście zależy to od używanej przeglądarki). Skalowalna grafika wektorowa

|

267

Informacje dla osób, które nie korzystały dotąd zbyt często z wymiarów stron: wszystkie wartości powiązane z literą y dotyczą osi pionowej, x jest powiązana z osią poziomą, a z — z prostopadłą do dwóch pozostałych. Inaczej mówiąc — y to bok, x to podstawa, a z biegnie prosto w kierunku twarzy programisty.

Przeglądarka Firefox i te z rodziny Mozilla obsługują pełną specyfikację SVG 1.1 (a przynajmniej jej większą część), podobnie jak Opera i WebKit. Oznacza to, że przedstawiony przykład będzie w nich działał zgodnie z oczekiwaniami. Jedna wtyczka firmy Adobe służąca do wyświetlania rysunków SVG obsługuje jedynie specyfikację ograniczoną (SVG 1.1 tiny), która obejmuje tylko podzbiór pełnej specyfikacji, bez elementu script. W ostatnim przykładzie dodano element script do dokumentu SVG. A czy można umieścić kod SVG w dokumencie XHTML, a następnie użyć elementu script do manipulowania grafiką?

Zagnieżdżony kod SVG Możliwość wczytania rysunku SVG do elementu object jest wygodna, jednak czasem programista chce, aby kod SVG był częścią strony. Można wtedy połączyć go z innymi elementami dokumentu. Tworzenie zagnieżdżonego kodu SVG jest zarówno proste, jak i skomplikowane, a jest tak z powodu różnic między przeglądarkami. Wiki dotycząca SVG zawiera doskonałą stronę na temat zagnieżdżonego kodu SVG (http://wiki.svg.org/index.php?title=Inline_SVG), a w tym miejscu postaram się przedstawić jej praktyczne streszczenie. Jeśli strona zostanie utworzona jako dokument XHTML i jest traktowana jako kod XML, w przeglądarkach Firefox i Opera zagnieżdżony kod SVG będzie przetwarzany poprawnie. Jednak Internet Explorer nie interpretuje kodu XML w podobny sposób i jedynie wyświetla składnię, zamiast ją przetwarzać. Lub mówiąc bardziej precyzyjnie — zamiast użyć wtyczki firmy Adobe do przetworzenia kodu. Jeśli strona internetowa jest traktowana jako dokument HTML, Internet Explorer interpretuje kod SVG jako następną odmianę języka HTML, co oznacza, że wtyczka przetworzy go prawidłowo. Jednak Firefox (i inne przeglądarki oparte na Gecko) używa odrębnego parsera dla języków HTML i XML, dlatego nie przetworzy kodu SVG w poprawny sposób. Oznacza to, że jeśli programista użyje rozszerzenia htm lub html albo typu MIME HTML, kod SVG zostanie prawidłowo przetworzony w przeglądarce Internet Explorer, jednak już nie w Firefoksie, Mozilli, Camino, Operze, Safari lub WebKit. Z kolei rozszerzenie xml lub xhtml działa we wszystkich przeglądarkach oprócz Internet Explorera. W wiki dotyczącej SVG znajduje się rozwiązanie, dzięki któremu można zwracać strony z zagnieżdżonym kodem SVG działające we wszystkich przeglądarkach, a jest to ta sama technika, która umożliwia prawidłowe przetwarzanie stron XHTML (jej opis znajduje się w rozdziale 1.). To obejście problemu polega na utworzeniu pliku .htaccess w katalogu witryny i dodaniu do niego poniższych dyrektyw. Zawierają one instrukcje dotyczące tego, jak serwer ma przesyłać strony internetowe. Jeśli agent użytkownika obsługuje format XHTML, strony są zwracane właśnie w nim. W przeciwnym razie serwer zwraca strony jako dokumenty HTML: AddType text/html .xhtml RewriteEngine on RewriteBase / RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0

268 |

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

RewriteCond %{REQUEST_URI} \.xhtml$ RewriteCond %{THE_REQUEST} HTTP/1\.1 RewriteRule .* - [T=application/xhtml+xml]

W ten sposób można użyć zagnieżdżonego kodu SVG, a ten powinien działać w najbardziej popularnych przeglądarkach. Pozostałe przykłady zastosowania kodu SVG w tym rozdziale opierają się na tym podejściu zagnieżdżonym, co ułatwia analizę rozwiązań. Teraz przyszła pora, aby bliżej przyjrzeć się temu, jakie efekty można utworzyć za pomocą języka SVG.

Krótki przegląd języka SVG Kompletna analiza języka SVG wymagałaby całej książki, dlatego w tym miejscu jedynie wspominam o pewnych popularnych elementach i operacjach, co pozwoli na rozpoczęcie korzystania z tego formatu. W kilku poprzednich punktach zobaczyłeś, że element svg sam działa jako kontener, do którego można dodawać inne obiekty. Można określić jego szerokość i wysokość, numer wersji czy przestrzeń nazw SVG, a w przypadku umieszczenia go w innym elemencie svg można też podać współrzędne x i y, aby wyznaczyć położenie:

W tym rozdziale opisuję język SVG w dużym skrócie. Osoby, które chcą go poznać bardziej szczegółowo, zachęcam do wizyty w następujących witrynach: witrynie z samouczkiem SVG Basics (http://www.svgbasics.com), witrynie społeczności SVG (http://svg.org) i wiki dotyczącej SVG (http://wiki.svg.org).

Podstawowe figury i atrybuty W SVG dostępnych jest kilka podstawowych figur: ellipse (elipsa), circle (okrąg), rect (prostokąt), line (linia), polyline (linia łamana) i polygon (wielokąt). Każdemu z tych obiektów można nadać wysokość i szerokość, a także określić jego lokalizację, zaokrąglić narożniki, wypełnić, użyć kreski różnej grubości, ustalić przezroczystość, przycięcie i tak dalej — oczywiście w zależności od figury. Wszystkie elementy mają także atrybut style, w którym można podać style CSS i wyspecjalizowane atrybuty SVG. Listing 8.8 demonstruje wszystkie podstawowe kształty dostępne w SVG. Dla poszczególnych figur użyto często stosowanych dla nich atrybutów. W przykładzie zastosowałam wewnątrzwierszowy kod SVG. Dokument ma rozszerzenie xhtml, a jest pobierany z katalogu, w którym wprowadzono zmiany w pliku .htaccess. Ponadto dokument jest zaprojektowany tak, aby przeszedł walidację jako typ XHTML 1.1 plus MathML 2.0 plus SVG 1.1. Ten typ dokumentu jest podany na początku pliku. Listing 8.8. Prawidłowy dokument XHTML z elementami SVG

Krótki przegląd języka SVG

|

269

Kod SVG zagnieżdżony w XHTML

Atrybut DOCTYPE jest tu przeładowany, jednak umożliwia zastosowanie elementów XHTML, a także SVG i MathML, jeśli programista chce ich użyć, aby uatrakcyjnić wygląd witryny. Zajmijmy się teraz elementami strony. Element polyline tworzy linię na podstawie grupy punktów określonych przez pary liczb, które w tym przypadku są rozdzielone przecinkami, choć można także użyć odstępów. Po elemencie polyline znajduje się circle. Jego środek wyznaczają podane współrzędne cx i cy (pozycja w poziomie i w pionie), a średnica tego okręgu to 50. Element line przyjmuje punkt początkowy i końcowy, podczas gdy polygon funkcjonuje podobnie jak polyline, używając podanych punktów, jednak tworzy zamkniętą figurę. Element rect ma tu zaokrąglone narożniki, co określają atrybuty rx i ry. Ten element oraz ellipse (podobnie jak circle) są umieszczane w elemencie svg na podstawie wartości x i y oraz cx i cy. Wszystkie figury mają wartości fill i stroke (ta ostatnia określa ramkę), a elementy rectangle i circle są częściowo przezroczyste (atrybut opacity ma wartość mniejszą niż 1.0). Rysunek 8.2 przedstawia wygląd tej strony w przeglądarce Firefox. Dzieło to nie jest niczym specjalnym, jednak pokazuje, jak funkcjonują wszystkie figury względem zawierającego je elementu svg. Warto zauważyć, że elipsa, znajdująca się w prawej dolnej części strony, jest przycięta, ponieważ wykracza poza kontener. Należy także zwrócić uwagę na to, że zygzakowaty element polyline jest widoczny przez okrąg z uwagi na przezroczystość elementu circle. Można także zobaczyć prostą linię za półprzezroczystym prostokątem. Ten przykład demonstruje różne sposoby dostosowywania elementów, włączając w to zastosowanie stylów i atrybutów SVG. Ponadto warto zauważyć, że w przykładzie użyto nazw kolorów, choć zwykle takie podejście uznawane jest za nieeleganckie. Lepszym rozwiązaniem jest stosowanie ustawień RGB (także zostały użyte w przykładzie) lub wartości w kodzie szesnastkowym (takich jak #ff0000; można je spotkać w arkuszach CSS). 270

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

Rysunek 8.2. Przykładowy kod SVG w prawidłowym dokumencie XHTML

Elementy def, gradienty, filtry i efekty Oprócz figur język SVG udostępnia dość bogaty zestaw efektów wizualnych, które można stosować do obiektów tego języka. Wiele z nich jest dołączanych w elementach def, które umożliwiają wstępne definiowanie obiektów i efektów używanych w dalszej części dokumentu. Takie elementy są używane zwykle w dokumentach SVG, a nie w postaci zagnieżdżonej w XHTML, można je jednak dołączyć do stron za pomocą opisanych wcześniej technik. Wstępnie definiowane obiekty i efekty należy umieszczać między otwierającym a zamykającym znacznikiem elementu def. Do wyświetlania takich obiektów służy odpowiednio nazwany element use. Listing 8.9 przedstawia przykładowy dokument SVG, wyświetlający okrąg zapełniony gradientem, który przechodzi od czerwonego poprzez żółty do ciemnozłotego. Obramowanie tego okręgu ma taki sam odcień złotego. Listing 8.9. Okrąg wypełniony trójkolorowym gradientem

Krótki przegląd języka SVG

|

271



Jak na kilka wierszy kodu XML, efekt robi wrażenie, a przedstawia go rysunek 8.3. Pamiętaj, że ten rysunek został utworzony za pomocą kodu XML, a nie programu graficznego.

Rysunek 8.3. Okrąg wypełniony gradientem, utworzony przy użyciu kodu SVG

Format SVG to coś, czego brakowało w programowaniu aplikacji WWW od samego początku — wbudowany, działający w różnych przeglądarkach, złożony słownik graficzny, który umożliwia tworzenie wspaniałych efektów bez konieczności korzystania z technologii Flash czy obciążania strony obrazami. Co jeszcze ważniejsze, dzięki możliwości manipulowania elementami za pomocą skryptów można połączyć efekty Ajaksa z grafiką opartą na SVG i tworzyć imponujące prezentacje. Niektóre opcje języka SVG, na przykład filtry, nie są obsługiwane w pewnych przeglądarkach. W czasie pisania tej książki filtrów nie obsługiwała przeglądarka Firefox 2.x, jednak jej producenci planują dodanie tej funkcji. Firefox umożliwia używanie ścieżek przycinania i masek, jednak te zagadnienia pozostawiam do samodzielnej eksploracji. Ponieważ określanie układu elementów SVG i próba wyobrażania ich sobie to dość ryzykowane rozwiązanie, dostępne są edytory, które umożliwiają manipulowanie obiektami i generowanie kodu SVG. Jednym z takich programów jest Inkscape (http://www.inkscape.org), dostępny 272

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

w wersjach dla systemów: Mac OS X, Windows i Linux. Istnieją też inne narzędzia tego typu, a lista wybranych znajduje się na stronie SVGI (http://www.svgi.org). Następny punkt opisuje łączenie SVG i Ajaksa.

Mikser — SVG i Ajax Obsługa języka SVG w przeglądarkach jest wciąż bardzo młoda, jednak producenci są zaangażowani w jej rozwój, a wraz z pojawianiem się nowych wersji przeglądarek następuje coraz ściślejsza integracja między elementami języka SVG i zwykłymi elementami stron internetowych. W ten sposób chcę powiedzieć, że przykłady łączące SVG i Ajaksa działają głównie w przeglądarkach Firefox i Opera, zwykle w WebKit, a dość rzadko w Internet Explorerze. W tej książce unikam przedstawiania tak ograniczonych rozwiązań, jednak czasem warto pozwolić sobie na nieco zabawy. Na potrzeby aplikacji produkcyjnych należy stosować zagnieżdżony kod JavaScript i skrypty, a jeśli na stronie znajdują się ramki iframe, można ich użyć do komunikacji między oboma środowiskami. Warto też ograniczyć stosowanie SVG do elementów, które nie są niezbędne. Kod na listingu 8.10 jest oparty na przykładzie stronicowania przedstawionym na listingu 8.1 i generuje „kółka” określające popularność. Pod stronicowaną tabelą zagnieżdżony jest mały okrąg utworzony za pomocą SVG. Umieszczenie kursora myszy nad tabelą powoduje wyróżnienie odpowiedniego wiersza przez ustawienie jego tła na kolor czerwony. Po przesunięciu kursora nad inny wiersz kolor poprzedniego zmienia się z powrotem na szary. Aplikacja sprawdza liczbę komentarzy do każdego wpisu. Wartość ta jest zapisana w ostatniej komórce poszczególnych wierszy i służy do określenia wielkości elementu circle w kodzie SVG. Brak komentarzy oznacza brak okręgu, a jego wielkość rośnie wraz z ich liczbą. Zmiany w porównaniu z kodem JavaScript z listingu 8.2 byłyby dość drobne, jednak trzeba poradzić sobie z problemem obsługi różnic między przeglądarkami. Zbyt mało przeglądarek obsługuje zagnieżdżony kod SVG, dlatego trzeba go umieścić w odrębnym pliku, a następnie wczytać do obiektu internetowego. Po pobraniu strony, w zależności od tego, czy używana przeglądarka to Internet Explorer, czy nie, obiekt SVG jest umieszczany albo w elemencie embed, albo w object: aaManageEvent(window,"load", function() { var slider = YAHOO.widget.Slider.getVertSlider("sliderbg", "sliderthumb", 0, 400); slider.setValue(0,true); slider.subscribe("change",adjustPage); // Wykrycie przeglądarki Internet Explorer i użycie elementu embed if (document.all && !window.opera) { var embed = document.createElement('embed'); embed.src = 'bubble.svg'; embed.type = 'image/svg+xml'; embed.width='100%'; embed.height = '300'; aaElem('obj').appendChild(embed); } else { var obj= obj.type obj.id = obj.data

document.createElement('object'); = 'image/svg+xml'; 'svgDoc'; = 'bubble.svg';

Mikser — SVG i Ajax

|

273

obj.width = '100%'; obj.height = '300'; aaElem('obj').appendChild(obj); } createTable(); getRows(0); aaElem('inner').style.position="relative"; });

Po wyświetleniu wierszy aplikacja przypisuje do ich zdarzeń mouseover i mouseout funkcje obsługi: aaManageEvent(row,'mouseover',showBubble); aaManageEvent(row,'mouseout',restoreRow);

Kiedy uruchomione zostanie zdarzenie mouseover, aplikacja wywoła funkcję showBubble, a kolor danego wiersza tabeli zmieni się na czerwony. Ponadto aplikacja sprawdza wartość kolumny z liczbą komentarzy i używa jej do zmiany rozmiaru okręgu SVG: function showBubble(evnt) { var row = this; var val = parseInt(row.lastChild.firstChild.nodeValue); val = val * 5; row.style.backgroundColor = "#ff0000"; // Pobieranie w przeglądarce Internet Explorer if (document.all && !window.opera) { var svgDocument = document.embeds[0].getSVGDocument(); var svgObject = svgDocument.getElementById('circle1'); // Pobieranie w pozostałych przeglądarkach } else { var svgDocument = document.getElementById("svgDoc").contentDocument; var svgObject = svgDocument.getElementById('circle1'); } // Ustawianie we wszystkich przeglądarkach svgObject.setAttribute("r",val); }

Uruchomienie zdarzenia mouseout powoduje ponowną zmianę koloru wiersza tabeli na szary: function restoreRow(evnt) { var row = this; row.style.backgroundColor="#ccc"; }

Listing 8.10 przedstawia stronę internetową z nowym elementem SVG. Także w tym przypadku dodanie kodu SVG do dokumentu XHTML jest niezwykle proste — jeśli tylko dana przeglądarka obsługuje ten format. Listing 8.10. Przykład stronicowania zintegrowanego z SVG

274

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

Rysunek 8.4 przedstawia tę stronę wyświetloną w Operze. Jest to dość prosty przykład, jednak pokazuje, jak łatwa może być integracja obu omawianych technologii. Niektóre biblioteki Ajaksa zapewniają obsługę języka SVG. Dojo udostępnia ograniczoną obsługę poprzez bibliotekę dojo.gfx, jednak nie jest ona jeszcze dostępna w wersji produkcyjnej. Działa w różnych przeglądarkach i obejmuje obsługę dla systemu Windows, prawdopodobnie poprzez VML. MochiKit zawiera pakiet do tworzenia wykresów i grafów, PlotKit SVG, który używa obiektu canvas języka HTML (opisanego w następnym punkcie) oraz języka SVG. Google Maps wykorzystuje SVG do tworzenia linii, jednak cofa się do VML w przypadku przeglądarki Internet Explorer. Ponadto Google udostępnia widget SVG w pakiecie GWT (ang. Google Web Toolkit). Najważniejszy czynnik ograniczający zastosowania SVG to brak obsługi tego języka w przeglądarce Internet Explorer. Można jednak mieć nadzieję, że niemal powszechna obsługa języka SVG we wszystkich innych przeglądarkach skłoni Microsoft do zapewnienia jej także w Internet Explorerze. Na razie obok wtyczki firmy Adobe dostępne są biblioteki, które przekształcają kod SVG na VML, aby można było użyć go w przeglądarce Internet Explorer. Te biblioteki to między innymi SVG-VML-3D (www.lutanho.net/svgvml3d/index.html), JsVectorGraphics (www.walterzorn.com/jsgraphics/jsgraphics_e.htm) i RichDraw (http://starkravingfinkle.org/ blog/2006/04/richdraw-simple-vmlsvg-editor). Dodatkowe informacje na ten temat można uzyskać, wpisując w wyszukiwarce wyrażenie „SVG VML JavaScript Libraries”.

Mikser — SVG i Ajax

|

275

Rysunek 8.4. Integracja Ajaksa z SVG

Obiekt Canvas w HTML5 Apple zaprojektował element canvas nie tylko na potrzeby przeglądarki Safari, ale także do użytku w widgetach Dashboard w systemie Mac OS X. Element ten został podchwycony przez grupę WhatWG i został włączony do przyszłego standardu HTML 5.0 — następnej wersji języka HTML. Ten element jest obsługiwany przez przeglądarki oparte na Gecko, takie jak Firefox, przez Safari (oczywiście) i Operę. Internet Explorer nie obsługuje go, jednak trwają prace w celu utworzenia obiektów działających w różnych przeglądarkach (obecnie taki projekt prowadzi Google). W odróżnieniu od SVG, który jest formalnym dialektem języka XML, element canvas to tylko zwykły element. W większości przypadków dostęp do elementu canvas odbywa się poprzez model DOM. Element ten służy zwykle do tworzenia pewnych zaawansowanych efektów. Inaczej niż w przypadku SVG, efekty te wymagają stosowania kodu JavaScript. Projekt Mozilla udostępnia dobry samouczek dotyczący korzystania z obiektu canvas (http://developer.mozilla.org/en/docs/Canvas_tutorial). Także firma Apple ma podobną stronę (http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html).

Obiekt canvas jest dość łatwy w użyciu. Najpierw wystarczy dodać element canvas do strony internetowej:

276

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

Aby utworzyć grafikę, należy pobrać kontekst obiektu canvas, używając specyficznej dla tego obiektu metody modelu DOM, getContext. Najpierw jednak trzeba sprawdzić, czy dana przeglądarka obsługuje ten obiekt: var canvas = aaElem('graph'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ... }

Po utworzeniu obiektu canvas można wykonać przy jego użyciu wiele operacji graficznych: tworzyć figury, rysować ścieżki, tworzyć łuki, manipulować obrazami (umieszczonymi w obiekcie canvas na stronie XHTML), tworzyć wykresy funkcji kwadratowych i tak dalej. Po utworzeniu obiektów można, podobnie jak w języku SVG, dodać do nich efekty, takie jak: kolory, wypełnienie, przezroczystość, a nawet utworzyć wzorce, takie jak symbole. Można też zastosować gradienty oraz ostre złączenia między liniami, co jest dość wyjątkowym efektem. Podobnie jak w SVG, można zarządzać efektami obiektu canvas za pomocą Ajaksa. Wracając do przykładu ze stronicowaniem, można zastąpić element svg elementem canvas:

W nowej wersji kodu aplikacja pobiera liczbę komentarzy w momencie dodawania wierszy i używa tej wartości do wygenerowania odzwierciedlającej ją linii na dole strony. Służą do tego metody moveTo i lineTo. Wraz z umieszczaniem danych na stronie linia staje się coraz dłuższa, aż w końcu zajmuje cały dół strony. Listing 8.11 przedstawia kod JavaScript tego rozwiązania. Listing 8.11. Generowanie linii reprezentującej liczbę komentarzy przy użyciu obiektu canvas var startx = 20; var starty = 150; var cache = { offset : 80, fetch : 40 }; aaManageEvent(window,"load", function() { var slider = YAHOO.widget.Slider.getVertSlider("sliderbg", "sliderthumb", 0, 400); slider.setValue(0,true); slider.subscribe("change",adjustPage); createTable(); getRows(0); aaElem('inner').style.position='relative'; }); // Dostosowuje kontener tabeli na podstawie przesunięcia; // określa, czy trzeba dodać elementy do pamięci // podręcznej dla bazy danych function adjustPage(offset) { var inner = aaElem('inner'); var newTop = -offset; inner.style.top = newTop + "px";

Mikser — SVG i Ajax

|

277

// Jeśli faktyczne przesunięcie jest większe niż w pamięci // podręcznej, należy pobrać wiersze i zaktualizować tę pamięć if (offset > cache.offset) { getRows(cache.fetch); cache.offset+=80; cache.fetch+=40; } } // Pobiera brakującą grupę wierszy function getRows(start) { var url = 'getposts.php?start=' + start; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url + '&limit=40&callback=printRows'; document.getElementsByTagName('head')[0].appendChild(script); } // Tworzy i dołącza komórkę tabeli function createTableCell(value,tr) { // Tworzy element var cell = document.createElement("td"); // Tworzy węzeł tekstowy var text = document.createTextNode(value); // Dołącza utworzony węzeł tekstowy do komórki cell.appendChild(text); // Dołącza komórkę do wiersza tr.appendChild(cell); return tr; } // Tworzy pustą tabelę i dodaje ją do strony; // ustawia właściwość top kontenera function createTable() { var inner = aaElem('inner'); var table = document.createElement('table'); table.id = 'dataTable'; var tableBody = document.createElement("tbody"); tableBody.id = "dataTableBody"; table.appendChild(tableBody); inner.appendChild(table); inner.style.top = "0px"; } // Dołącza nowo pobrane wiersze jako wiersze tabeli function printRows(rowsObj) { // Usuwanie dawnej zawartości var tableBody = aaElem('dataTableBody'); // Wiersze tabeli for(var i = 0; i < rowsObj.length; i++) { // Tworzy element var row = document.createElement("tr"); row = createTableCell(rowsObj[i].id, row); // Tworzy element anchor oraz tytuł var cell = document.createElement("td"); cell.innerHTML = "" + rowsObj[i].title + "";

278

|

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

row.appendChild(cell); row = createTableCell(rowsObj[i].comments,row); tableBody.appendChild(row); } var canvas = aaElem('graph'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); for (var j = 0; j < rowsObj.length; j++) { ctx.moveTo(startx,starty); startx+=5; starty = 150 - (parseInt(rowsObj[j].comments) * 5); ctx.lineTo(startx, starty); } ctx.stroke(); } }

Zmodyfikowane fragmenty kodu są wyróżnione pogrubieniem, co demonstruje, jak łatwo jest użyć obiektu canvas. Rysunek 8.5 przedstawia działanie tego przykładu w przeglądarce Safari, która obsługuje obiekt canvas, choć na razie nie zapewnia obsługi języka SVG.

Rysunek 8.5. Stosowanie obiektu canvas do śledzenia liczby komentarzy

Mikser — SVG i Ajax

|

279

Przedstawiony materiał to tylko krótkie wprowadzenie. Doskonałym przeglądem wszystkich możliwości obiektu canvas jest wspomniany już samouczek w witrynie projektu Mozilla.

Przyszłość grafiki Grafika to ostatnia bariera dla stron internetowych, jednak na szczęście widać duży postęp, jeśli chodzi o możliwości dostępne programistom. Wszystkie przeglądarki obsługują przynajmniej znaczący podzbiór stylów CSS, a także co najmniej jedną z rozszerzonych bibliotek graficznych lub jeden z takich obiektów. Niestety, nie wszystkie przeglądarki obsługują każdą bibliotekę. Firefox i Opera obsługują najwięcej mechanizmów, choć WebKit sprawia, że można wiązać duże oczekiwania z Safari, a Microsoft czyni kroki w kierunku zbliżenia Internet Explorera do pozostałych przeglądarek. Dzięki pomysłowości programistów większość funkcji graficznych przedstawionych w tym rozdziale ma obsługę w postaci bibliotek działających w różnych przeglądarkach, a obsługa ta wykracza poza dość proste przykłady zaprezentowane w tym miejscu. Z używaniem jakiejkolwiek grafiki wiążą się pewne problemy, z których wcale nie najmniej istotnym jest to, że wymaga ona elementów „wizualnych”, dlatego dla osób z upośledzeniem wzroku takie efekty nie będą użyteczną nowością w witrynie. Jednak jak ilustrują to przedstawione przykłady, grafika może być zabawnym i interesującym dodatkiem do istniejących aplikacji, zwłaszcza w postaci wizualnych wykresów dla danych dostępnych już jako tekst. Większość zastosowań jest zależna od skryptów, jednak także w tym przypadku brak ich obsługi sprawia, że efekt po prostu nie zostanie wyświetlony, a aplikacja nie straci na funkcjonalności. Jeśli chodzi o różnice między przeglądarkami, takie jak w ostatnim przykładzie, jeśli przeglądarka nie obsługuje obiektu canvas, aplikacja nie wyświetli grafiki. Jednak wciąż dostępna będzie tabela z danymi. Wszystkie zaawansowane efekty wizualne i obiekty omówione w tym rozdziale, jeśli używa się ich jako ciekawych dodatków, pozwalają dodać stronie wiele uroku stosunkowo małym kosztem.

280 |

Rozdział 8. Dodawanie zaawansowanych efektów wizualnych

ROZDZIAŁ 9.

Witryny typu mashup

Dodanie Ajaksa do witryny otwiera ją na świat usług sieciowych, aplikacji, a także różnorodnych widgetów. Yahoo! i Google udostępniają usługi zwracające mapy, Amazon — pamięć zewnętrzną, Flickr — obrazy, Newsgator — dane z kanałów RSS, a poprzez XML, mikroformaty czy format RDF (ang. Resource Description Framework) dostępnych jest mnóstwo metadanych. Czasem programiści nie znają umiaru i tworzą witryny, które próbują pobrać na pasek boczny niemal cały internet, jednak mądrze stosowane usługi zewnętrzne mogą być naprawdę wartościowym dodatkiem do aplikacji. Z drugiej strony każdy może udostępniać usługi we własnej witrynie innym, tworząc widgety służące do korzystania ze specyficznych usług lub danych. Dlaczego warto to robić? Z tych samych przyczyn, z których widgety są udostępniane przez autorów innych witryn: aby dane usługi były bardziej popularne od konkurencji, co ułatwia ich sprzedaż i rozpowszechnianie. Stopień integracji z usługami zewnętrznymi zależy od ich dostawcy. Google zarządza wszystkimi aspektami usługi zwracającej mapy, jednak udostępnia niezły interfejs API, który umożliwia wyświetlanie lokalizacji na mapie, rysowanie tras podróży i określanie punktów docelowych. Jednak wciąż jest to okno z widokiem firmy Google, a jeśli pewnego dnia zdecyduje się ona dodać reklamy, programista nie będzie miał w tej kwestii nic do powiedzenia. Inne usługi, takie jak interfejs API oznaczeń z witryny del.icio.us, zapewniają dostęp do nieprzetworzonych danych, jednak mogą narzucać ograniczenia na sposób ich używania, a także częstotliwość korzystania z nich — niektóre usługi umożliwiają wywoływanie danego API przy użyciu jednej licencji tylko określoną liczbę razy w ciągu dnia. Nie zamierzam przedstawiać szczegółowego opisu API omawianych w tym rozdziale, ponieważ każdy z tych interfejsów ma doskonałą dokumentację, do której odsyłam. W zamian skoncentruję się na tym, jak rozpocząć łączenie różnych usług i API, a także jak szukać nowych okazji do wykorzystania witryn mashup we własnej pracy.

Z łączeniem danych w witryny typu mashup wiąże się także pewne zagrożenie: usługa może zniknąć, zostać ograniczona lub otrzymać nowy interfejs API. Jeśli aplikacja jest zależna od usług zewnętrznych, może być zagrożona. Jednak utworzenie aplikacji, widgeta lub produktu na podstawie danych ze źródeł zewnętrznych albo jako nowego ciekawego interfejsu istniejącej usługi pozwala uzyskać sukces, nawet jeśli jest to tylko coś nowego i ciekawego dla użytkowników danej witryny lub osób używających kodu napisanego przez

281

danego programistę. Mówiąc inaczej, nie należy zbytnio polegać na usługach zewnętrznych, ponieważ może to prowadzić to problemów.

Wyświetlanie map za pomocą Google’a Usługi Google Maps wzbudziły zainteresowanie Ajaksem bardziej niż jakakolwiek inna aplikacja. Dzięki tym usługom można umieścić we własnej witrynie mapę (z widokiem z satelity i mieszanym), udostępniając wskazówki i inne uwagi, a wszystkimi elementami można łatwo zarządzać za pomocą stosunkowo prostego w użyciu interfejsu API dla języka JavaScript. Był to najbardziej rozbudowany produkt Google. Na stronie http://www.google.com/apis/maps można zobaczyć przykłady usług Google Maps i uzyskać klucz do ich API.

Firma Google poinformowała, że obecnie API Google Maps nie wyświetla reklam, a także obiecała, że w razie ich wprowadzenia powiadomi o tym użytkowników 90 dni wcześniej. Ponadto każdy klucz do map pozwala na użycie usługi 50 000 razy dziennie. Zasady korzystania określają, że usługi świadczone przez programistę powinny być dostępne nieodpłatnie. Mówiąc inaczej, nie można obciążać opłatami użytkowników korzystających ze zmodyfikowanych wersji aplikacji Google Maps. Do usługi dołączony jest także długi punkt „Appropriate Conduct and Prohibited Uses” (opisujący odpowiednie postępowanie i niedozwolone sposoby używania), który znajduje się w sekcji z zasadami korzystania — warto go przejrzeć przed rozpoczęciem korzystania z usługi. Po otrzymaniu klucza do usług Google Maps warto pamiętać, że jest on specyficzny dla danego podkatalogu i można go używać tylko z tego miejsca.

Google Maps — szybko i łatwo Używanie usług Google Maps jest stosunkowo proste. Należy utworzyć element (zwykle div) na stronie, na której ma się znajdować mapa, a przy tworzeniu mapy należy przekazać do API identyfikator tego elementu. Aby sprawdzić, czy przeglądarka spełnia minimalne wymagania niezbędne do wyświetlania map Google, można użyć poniższego kod JavaScript. Ten kod tworzy mapę, umieszczając ją w elemencie div o identyfikatorze map i wyświetlając w centrum punkt o podanych współrzędnych geograficznych: if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(38.627952, -90.1843880), 13); }

To w zasadzie wszystko, co jest potrzebne do umieszczenia mapy na stronie i określenia lokalizacji. Za pomocą dostępnego API można także przesuwać mapę za pomocą przeciągania, które jest wbudowane w obiekt map. Zwykle jednak warto zapewnić większą kontrolę nad mapą, aby użytkownik mógł przybliżać i oddalać obraz w celu wyświetlenia większej lub mniejszej liczby szczegółów. Do udostępniania podstawowej kontrolki do obsługi mapy służy metoda addControl obiektu map:

282

|

Rozdział 9. Witryny typu mashup

if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.setCenter(new GLatLng(38.627952, -90.1843880), 13); }

Ten kod spowoduje utworzenie po lewej stronie mapy małej kontrolki ze znakiem plus (+), służącym do przybliżania, znakiem minus (–), służącym do oddalania, i strzałkami do przewijania za pomocą kliknięcia. To wystarczy, jednak dlaczego programista miałby poprzestać na tych opcjach? Skoro usługi Google Maps udostępniają trzy różne typy widoku — zwykła mapa, obraz z satelity i widok mieszany — po prostu nie wypada nie umożliwić wyboru rodzaju mapy. Także tym razem posłuży do tego metoda addControl, jednak tym razem utworzy ona kontrolkę type usług Google Maps: if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(38.627952, -90.1843880), 13); }

Mniej więcej w taki sposób działa interfejs API usług Google Maps — udostępnia zbiór obiektów z metodami, do których można przekazać jako parametry obiekty lub inne wartości, a wszystkie użyte elementy składają się na pojedynczą mapę. Wszystkie instrukcje należy połączyć ze zdarzeniem onload obiektu window, a listing 9.1 dokładnie obrazuje, jak łatwo jest dodać funkcjonalność usług Google Maps do własnej witryny. Listing 9.1. Google Maps — szybko i łatwo

Powyższy listing tworzy mapę wypośrodkowaną na łuku Gateway w Saint Louis. Mapa ta ma małą kontrolkę nawigacyjną, a także przełącznik typu widoku. Zachęcam do wypróbowania obrazu z satelity i przybliżenia łuku — efekt robi wielkie wrażenie. Oczywiście, aby samodzielnie uruchomić ten przykład, trzeba uzyskać klucz, jednak jest to łatwe. Wystarczy wejść na witrynę dotyczącą API usług Google Maps, wpisać adres URL, podać nazwę użytkownika Google, zaakceptować zasady — i gotowe. Inna rzecz na listingu 9.1 warta uwagi przed zajęciem się „scalaniem” witryny mashup to użycie zdarzenia onunload. Ponieważ usługa Google Maps używa domknięć funkcji (funkcji anonimowych wewnątrz innych funkcji), jej API udostępnia procedurę „porządkującą”, aby zapobiec wyciekaniu pamięci, co może mieć miejsce przy używaniu takich struktur języka JavaScript w przeglądarkach Internet Explorer 6.x. Niezależnie od używanych funkcji i obiektów warto dołączyć do aplikacji funkcje porządkujące. Mapę, która otwiera się na stronie, można przeciągnąć i przewinąć w prawo, w lewo, w górę lub w dół. Można też przybliżyć lub oddalić obraz za pomocą kontrolek znajdujących się po lewej stronie, a także przełączyć typ widoku przy użyciu kontrolek widocznych u góry. Wszystkie elementy można włączyć za pomocą kilku wywołań funkcji, ale można zrobić coś więcej: zintegrować usługi Google Maps z własnymi danymi. Tak będzie działała pierwsza witryna mashup tworzona w tym rozdziale. Przykłady w tym rozdziale mają typ DOCTYPE XHTML, jednak strony są przesyłane jako dokumenty HTML. Wynika to z tego, że aplikacja Google Map nie działa na stronach o formacie XHTML.

Trasa podróży Jeśli Google Map ma służyć jedynie do wyświetlania ogólnej lokalizacji biura, domu lub innego ważnego miejsca, w tym miejscu można zakończyć pracę. Jednak dostępne API umożliwia wykonywanie wielu innych operacji. Do każdej mapy Google można dodać grafikę za pomocą nakładanej warstwy, na przykład umieszczając za pomocą kodu wyróżnik w określonej lokalizacji, aby była bardziej widoczna: var point = new GlatLng(lat, long); var marker = new GMarker(point); map.addOverlay(marker);

Teraz po wyświetleniu mapy w określonym miejscu pojawi się ikona. Jeśli programista nie poda ikony, użyta zostanie jej domyślna wersja, czyli czerwony balonik z czarną kropką w środku.

284 |

Rozdział 9. Witryny typu mashup

Można też pokazać na mapie trasę, udostępniając tablicę punktów w kolejności, w jakiej ma przez nie przebiegać droga: for (var i = 0; i < points.length; i++) { var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var mark = new GMarker(point); map.addOverlay(mark); points.push(point); } map.addOverlay(new GPolyline(points));

W tym przypadku podawana jest tablica elementów zawierających punkty odpowiadające długości i szerokości geograficznej, a w każdym z nich aplikacja tworzy wyróżnik. Współrzędne są umieszczane w tablicy, która następnie służy do dodania nowej warstwy. Jest to linia łamana łącząca podane punkty. Można także dodać opis do wyróżnika, udostępniając okno z informacjami, czyli dołączany do wyróżnika dymek zawierający tekst, który programista chce przekazać: marker.openInfoWindowHtml(text);

Dokąd prowadzą punkty wyróżników i linii łamanej? I skąd pochodzi tekst w oknie z informacjami dotyczącymi wyróżnika? W tym miejscu na scenę wkracza Ajax. API usług Google Maps udostępnia funkcję GdownloadUrl, która na żądanie wczytuje dane zewnętrzne z podanego adresu URL i wywołuje funkcję zwrotną w celu przetworzenia pobranych informacji. Dane zewnętrzne to w tym przypadku plik XML, który zwykle zawiera współrzędne, ale może obejmować także inne informacje. Jedyne ograniczenie związane jest z tym, że funkcja używa obiektów XMLHttpRequest, dlatego adres URL prowadzący do danych musi być lokalny względem domeny strony internetowej. Kod z listingu 9.2 wiąże wszystkie elementy — dane lokalne oraz API usług Google Maps — i tworzy aplikację, która wczytuje i wypośrodkowuje mapę oraz udostępnia kontrolki do obsługi przybliżania obrazu i zmiany typu widoku. Ponadto element div funkcjonuje jak przycisk, który użytkownicy mogą kliknąć, aby pobrać dane zewnętrzne. Plik z danymi zawiera cztery punkty ze współrzędnymi, a także tekst wyświetlany w oknie z informacjami. Kiedy użytkownik kliknie dany element div, na którym widnieje napis „Wczytaj dane”, aplikacja pobierze dane i wyświetli wyróżniki oraz trasę. Kliknięcie jednego z wyróżników powoduje otwarcie nad nim dymku z informacjami oraz, jeśli ten dymek wychodzi poza krawędzie okna, przesunięcie mapy. Listing 9.2. Interfejs API usługi Google Maps ze znacznikami, linią trasy i oknami z informacjami

Pobierz dane

Warto zwrócić uwagę na wyróżnione fragmenty listingu 9.2. Dodają one specyfikację języka VML (ang. Vector Markup Language), co jest niezbędne do działania funkcji polyline w przeglądarce Internet Explorer. Usługi Google Maps używają języka SVG do oznaczania trasy w obsługujących go przeglądarkach, ale udostępniają też obsługę języka VML dla przeglądarki Internet Explorer. Należy jednak pamiętać, że po dodaniu wyróżnionych elementów strona nie przejdzie walidacji. Rysunek 9.1 przedstawia mapę Google wczytaną w przeglądarce Safari bezpośrednio po pobraniu danych zewnętrznych, kliknięciu jednego ze znaczników oraz wyświetleniu okna z informacjami.

Rysunek 9.1. Mapa Google ze znacznikami, trasą i oknem z informacjami wyświetlonym po wczytaniu danych zewnętrznych

Jeśli używasz przeglądarki Firefox z zainstalowanym rozszerzeniem Firebug, uruchom to narzędzie przed zgłoszeniem żądania. W oknie Console wyświetlony zostanie plik żądania i będzie można zobaczyć zarówno dane, jak i nagłówki odpowiedzi.

Wyświetlanie map za pomocą Google’a

|

287

Ten przykład ilustruje łączenie danych lokalnych i API usług Google Map, ale prawdziwa witryna mashup to połączenie dwóch lub więcej usług zewnętrznych z wykorzystaniem własnych danych albo bez nich.

Druga usługa — Flickr Aplikacja Flickr jest znana jako witryna do udostępniania zdjęć nakierowana na kontakty towarzyskie. Użytkownicy nie tylko mogą zamieszczać tam fotografie (a także dodawać oznaczenia, kategoryzować zdjęcia, opisywać je i udostępniać), lecz także komentować dzieła innych osób, korzystać z forów i integrować usługi Flickr z niezależnymi aplikacjami. Dostępne jest darmowe konto Flickr, z limitem liczby zdjęć przesyłanych w ciągu miesiąca, oraz konto „profesjonalne”, praktycznie bez ograniczeń ilości przesyłanych danych i z dużą ilością dostępnego miejsca. Aplikacja Flickr została zakupiona przez Yahoo! i jest dostępna pod adresem http://flickr.com. Witryna dotycząca omawianego w tym punkcie interfejsu API usług Flickr znajduje się pod adresem http://www.flickr.com/services/api. Ta witryna zawiera także odnośnik do strony, na której można uzyskać klucz do API usług Flickr. Stosowanie tego API wymaga niepowtarzalnego klucza, jest on jednak bezpłatny. Usługi sieciowe Flickr to jedne z najbardziej kompletnych spośród dostępnych usług i obsługują protokoły: REST, XML-RPC, SOAP, oraz bibliotekę PHP (ponieważ język ten jest wszechobecny), a niedawno dołączono także obsługę formatu JSON. Ten ostatni element jest szczególnie istotny, ponieważ umożliwia kierowanie bezpośrednich wywołań do usług za pomocą Ajaksa bez konieczności obchodzenia zabezpieczeń przeglądarki. Interfejs API usług Flickr jest podzielony na klasy obiektów, takie jak: zdjęcia, osoby, grupy, zbiory zdjęć. Każda klasa obejmuje zestaw dostępnych usług. Witryna dotycząca API usług Flickr zawiera doskonałą dokumentację tego, co udostępnia każda usługa oraz co trzeba przekazać w jej wywołaniu. Wszystkie żądania kierowane do usług wymagają podania klucza API. Przykłady przedstawione w tym punkcie używają Ajaksa do pobierania danych między domenami; zastosowano tu podejście REST, a żądania są przekazywane w adresach URL. Wywołania obejmują także wartość określającą format (json), co sprawia, że zwracane dane będą miały format JSON. W wywołaniu podana jest także wywoływana zwrotnie funkcja. Przykładowe żądanie wygląda tak: http://api.flickr.com/services/rest/?method=flickr.photos.geo.getLocation&photo_id=" + photo.id + "&api_key=klucz&format=json&jsoncallback=placeMarker

Jeśli tego kodu użyć jako adresu URL w atrybucie src nowego elementu script, dane zostaną zwrócone jako obiekt JSON w parametrach funkcji wywoływanej zwrotnie. Wynik służy do dynamicznego utworzenia bloku skryptów, co opisują wcześniejsze rozdziały. Ponieważ dynamiczne skrypty są przeznaczone do wielokrotnego wykorzystania, proces ich tworzenia to dobry kandydat do umieszczenia w bibliotece Adding Ajax, w pliku addingajax.js. Ten sam kod jest używany za każdym razem, a zmienia się jedynie adres URL punktu końcowego usługi sieciowej. Nowa funkcja, aaAddScript, wygląda tak: // Dodaje skrypt function aaAddScript(url) { var script = document.createElement('script'); script.type = 'text/javascript';

288 |

Rozdział 9. Witryny typu mashup

script.src = url; document.getElementsByTagName('head')[0].appendChild(script); }

Przedstawione wcześniej żądanie do usług Flickr pobiera współrzędne geograficzne na podstawie podanego identyfikatora zdjęcia. To poprzez dane dotyczące lokalizacji aplikacja łączy API usług sieciowych Google Maps i Flickr.

Tworzenie witryny typu Mashup Następna aplikacja zgłasza żądanie wyszukiwania do usług Flickr, które zwracają zdjęcia wykonane przez użytkownika o podanym identyfikatorze. Domyślny limit w przypadku żądania bez ograniczeń to zwykle 100 zdjęć. Można utworzyć miniaturowy pokaz slajdów w prawej części strony i umieścić miejsce na mapę Google po lewej. Po otwarciu każdego zdjęcia aplikacja będzie umieszczać na mapie wyróżnik pokazujący miejsce wykonania danej fotografii. Kod JavaScript należy umieścić w odrębnym pliku, pozostawiając samą stronę HTML, którą przedstawia listing 9.3. Po usunięciu kodu JavaScript na stronie zostaje bardzo mało elementów: kilka miejsc na dane i arkusz stylów. Listing 9.3. Strona XHTML ze znacznikami script

Dalej

Element div, który służy jako przycisk, jest dodawany jako pierwszy, dzięki czemu osoby korzystające z klawiatury mogą go użyć od razu i nie muszą używać klawisza Tab w celu przejścia po wszystkich pozostałych odnośnikach, włączając w to elementy dodane przez usługę Google. Ponieważ pozycja elementów jest określana bezwzględnie, dołączenie tego przycisku jako pierwszego nie ma wpływu na układ strony. Prawdziwa wartość tej aplikacji leży w pliku JavaScript, googleflickr.js. Przedstawia go listing 9.4. Poniżej znajduje się podsumowanie operacji wykonywanych przez tę aplikację:

1. W czasie wczytywania strony wyświetlany jest domyślny fragment mapy Google. 2. Aplikacja sprawdza właściwość hash obiektu location, a jeśli jest ona określona, program wyświetla na stronie określone zdjęcie.

3. Wykonywane jest pierwsze wywołanie usług Flickr w celu pobrania tablicy zdjęć na podstawie podanego identyfikatora użytkownika.

4. Aplikacja wyświetla pierwsze lub zapisane zdjęcie i ponownie wywołuje usługę Flickr, aby pobrać współrzędne geograficzne miejsca wykonania danej fotografii.

5. Lokalizacja zwrócona przez usługę Flickr służy do utworzenia wyróżnika wyświetlanego na mapie Google. Aplikacja usuwa wtedy poprzedni wyróżnik i zmienia widoczną część mapy.

Kiedy użytkownik kliknie przycisk Dalej, aplikacja pobierze następne zdjęcie z tablicy Photos, określi lokalizację i doda wyróżnik do mapy. Zmienne globalne znajdują się na początku pliku i służą jako pamięć podręczna na listę zdjęć zwróconą przez usługę Flickr, a także jako licznik określający obecnie wyświetlane zdjęcie. Także wyróżnik usług Google Maps jest przechowywany globalnie, ponieważ umożliwia to jego usunięcie przed utworzeniem nowego na podstawie następnego zdjęcia. Listing 9.4. Kod JavaScript witryny mashup używającej usług Google i Flickr // Zmienne globalne var map; var photos; var currentPhoto=0; var marker; // Ustawienie zdarzeń load i unload

290

|

Rozdział 9. Witryny typu mashup

aaManageEvent(window,"load",setUp); aaManageEvent(window,"unload",GUnload); // Jeśli przeglądarka jest zgodna z mapą, należy utworzyć mapę i pobrać zdjęcia na podstawie // identyfikatora użytkownika; używane są ustawienia domyślne - pobieranie informacji o 100 zdjęciach function setUp() { // Sprawdzanie wartości skrótu właściwości location i odpowiednie ustawianie aplikacji var hash = window.location.hash; if (hash) { var subLoc = hash.split("#")[1]; currentPhoto = parseInt(subLoc); } // Tworzenie mapy if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(38.627952, -90.1843880), 13); aaManageEvent(document.getElementById('button'),'click',loadPhoto); aaAddScript("http://api.flickr.com/services/rest/?method=flickr.photos.search& user_id=69562477@N00&api_key=klucz&format=json& jsoncallback=processPhotos"); } } // Globalne przypisywanie zdjęć; należy najpierw je wczytać function processPhotos(obj) { photos = obj.photos.photo; getPhoto(); } function loadPhoto(evnt) { evnt = evnt ? evnt : window.event; aaCancelEvent(evnt); getPhoto(); return false; } // Pobieranie adresu URL zdjęcia; // pobieranie współrzędnych wykonania zdjęcia function getPhoto() { var photo = photos[currentPhoto]; var pic = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + ".jpg"; // Określenie ‘lokalizacji’ window.location.hash = currentPhoto; aaElem("image").src=pic; aaAddScript("http://api.flickr.com/services/rest/?method=flickr.photos.geo.getLocation &photo_id=" + photo.id + "&api_key=uzywany_klucz&format=json&jsoncallback=placeMarker"); // Aktualizacja licznika zdjęć i zerowanie go, jeśli jego wartość przekracza długość tablicy zdjęć currentPhoto++; if (currentPhoto == photos.length) currentPhoto = 0; } // Usunięcie istniejącego znacznika i dodanie nowego function placeMarker(obj) { var point = new GLatLng(parseFloat(obj.photo.location.latitude), parseFloat(obj.photo.location.longitude)); if (marker) map.removeOverlay(marker);

Druga usługa — Flickr

|

291

marker = new GMarker(point); map.addOverlay(marker); map.setCenter(point, 13); }

Pierwsza funkcja, setUp, tworzy mapę Google, podobnie jak w dwóch poprzednich przykładach. Zgłasza także pierwsze wywołanie do usług Flickr, używając funkcji aaAddScript dodanej wcześniej do biblioteki addingajax.js. To wywołanie jest zgodne z podejściem REST i przekazuje identyfikator użytkownika konta Flickr oraz klucz programisty (klucz trzeba uzyskać samodzielnie, jednak identyfikator użytkownika podany w przykładzie jest prawidłowy). Na końcu wywołania znajduje się żądanie danych w formacie JSON oraz nazwa funkcji wywoływanej zwrotnie. Usługi Flickr przyjmują, że parametr określający taką funkcję ma nazwę jsoncallback. Następna funkcja w przykładowym kodzie to wywoływana zwrotnie funkcja processPhotos, która pobiera tablicę zdjęć ze zwracanego obiektu i przypisuje ją do zmiennej globalnej. Wywołuje także metodę getPhoto, wczytującą pierwsze zdjęcie. Adres URL zdjęcia należy pobrać z parametrów zwróconych dla każdej fotografii. Opis metody pobierania tych adresów znajduje się w witrynie dla programistów używających usługi Flickr, jednak kod użyty w tym miejscu powinien działać poprawnie we wszystkich dalszych rozwiązaniach. Funkcja ustawia także właściwość hash obiektu location, aby zapewnić wyświetlanie odpowiedniego zdjęcia po odświeżeniu strony (ta technika opisana jest w rozdziale 7.). Po wczytaniu strony aplikacja zgłasza następne żądanie do usług Flickr, tym razem pobierając lokalizację zdjęcia. Wywoływana zwrotnie funkcja placeMarker powiązana z tym żądaniem pobiera lokalizację ze zwróconego obiektu i używa jej do utworzenia nowego wyróżnika mapy Google, usuwając najpierw poprzedni. Rysunek 9.2 przedstawia przykładową stronę. W czasie wyświetlania kolejnych slajdów pokazu współrzędne geograficzne zdjęcia służą do określania lokalizacji wyróżnika, a także wypośrodkowania mapy względem tego punktu.

Rysunek 9.2. Witryna mashup używająca usług Flickr i Google 292

|

Rozdział 9. Witryny typu mashup

Jest to dość prosta witryna mashup, a jednak użyteczna. Żądanie współrzędnych to jedyna niewydajna operacja. Jeśli aplikacja wielokrotnie wykonuje to samo wywołanie do usług, pobierając te same dane, lepiej jest zapisać informacje lokalnie, w pamięci.

Tworzenie obiektów Photo i dalsze rozważania o bibliotece Prototype i funkcjach lokalnych Rozwiązanie umożliwiające zarządzanie danymi wraz ze zdjęciami polega na utworzeniu obiektu reprezentującego każde zdjęcie. Składowe takiego obiektu obejmują miejsce wykonania i adres URL zdjęcia. Adres można ustawić w trakcie tworzenia obiektu, ale lokalizację — dopiero przy wyświetlaniu fotografii: var photo = function(url) { this.url = url; this.longitude = null; this.latitude = null; this.setLocation(lon,lat) { this.longitude = lon; this.latitude = lat; } }

Aby utworzyć i zachować tablicę obiektów reprezentujących zdjęcia, trzeba najpierw przygotować jeden obiekt globalny, Photo, który składa się ze wspomnianej tablicy oraz składowej przechowującej indeks bieżącej fotografii. Można utworzyć taki obiekt i zarządzać nim za pomocą biblioteki takiej jak Prototype. Na razie jednak utworzę własną bibliotekę i umieszczę w niej wszystkie metody związane ze zdjęciami. Jednym z mechanizmów potrzebnych w obiekcie Photo jest możliwość wiązania zdarzenia z obiektem w taki sposób, aby nie trzeba było ponownie definiować obiektu. Jednak wciąż potrzebny jest dostęp do zdarzenia, dlatego nie należy go usuwać. W rozdziale 7. do biblioteki addingajax.js dodana została metoda aaBindObjMethod, która wiąże kontekst obiektu z funkcją. Teraz trzeba rozszerzyć tę bibliotekę i dodać podobną funkcję — zachowującą kontekst i przekazującą zdarzenie wiązane z metodą obsługi. Także w tym przypadku inspiracją dla nowej metody dodawanej do biblioteki addingajax.js, aaBindEventListener, będzie biblioteka Prototype. Zamiast funkcji apply metoda ta używa wywołania Function.call, co umożliwia przekazanie wielu argumentów. Nowa metoda biblioteki przekazuje zdarzenie oraz obiekt: function aaBindEventListener(obj, method) { return function(event) { method.call(obj, event || window.event)}; }

Dzięki tej nowej funkcji można użyć metod obiektu jako metod obsługi zdarzeń i zachować pewność, że metoda pobierze obiekt zdarzenia, a kontekst obiektu zostanie zachowany. Pora wrócić do kodu JavaScript specyficznego dla aplikacji. Kod na listingu 9.5 to nowa wersja biblioteki JavaScript przedstawionej na listingu 9.4, używająca nowych obiektów: photo i Photo. Obiekt Photo jest tylko jeden i zawiera wszystkie metody związane z przetwarzaniem zdjęć.

Druga usługa — Flickr

|

293

Listing 9.5. Nowa wersja biblioteki JavaScript korzystającej z usług Google i Flickr // Funkcja obiektowa dla każdego // pojedynczego elementu photo function photo(id, url) { this.id = id; this.url = url; this.longitude = null; this.latitude = null; this.setLocation = function(lon,lat) { this.longitude = lon; this.latitude = lat; } } // Globalny obiekt Photo służący do zarządzania // wszystkimi wywołaniami Ajaksa związanymi ze zdjęciami // i przetwarzania wszelkich danych dotyczących zdjęć var Photo = { // Pobiera tablicę zdjęć i ustawia ich adresy URL processPhotos : function(obj) { this.currentPhoto : -1; this.photos = new Array(obj.photos.photo.length); for (var i = 0; i < obj.photos.photo.length; i++) { var pic = obj.photos.photo[i]; var url = "http://farm" + pic.farm + ".static.flickr.com/" + pic.server + "/" + pic.id + "_" + pic.secret + ".jpg"; this.photos[i] = new photo(pic.id, url); } aaManageEvent(aaElem('button'),'click',this.loadPhoto.bindAsEventListener(this)); this.getPhoto(); }, // Metoda obsługi zdarzeń pobierająca następne zdjęcie loadPhoto : function(evnt) { evnt = evnt ? evnt : window.event; aaCancelEvent(evnt); this.getPhoto(); return false; }, // Przetwarza żądanie pobrania następnego zdjęcia i pobiera lokalizację, // jeśli nie jest jeszcze dostępna w obiekcie photo getPhoto : function() { this.currentPhoto++; if (this.currentPhoto >= this.photos.length) this.currentPhoto = 0; var pic = this.photos[this.currentPhoto]; aaElem("image").src=pic.url; if (!pic.latitude) { aaAddScript("http://api.flickr.com/services/rest/?method=flickr.photos.geo. getLocation&photo_id=" + pic.id + "&api_key=klucz&format=json&jsoncallback=Photo.placeMarker"); } else { var point = new GLatLng(pic.latitude,pic.longitude); map.setCenter(point,13); } window.location.hash = this.currentPhoto; }, // Dodaje wyróżnik placeMarker : function(obj) { var lat = parseFloat(obj.photo.location.latitude); var lon = parseFloat(obj.photo.location.longitude);

294 |

Rozdział 9. Witryny typu mashup

this.photos[this.currentPhoto].setLocation(lon,lat); var point = new GLatLng(lat,lon); var marker = new GMarker(point); map.addOverlay(marker); map.setCenter(point, 13); } }; // Konfiguracja zdarzeń load i unload aaManageEvent(window,"load",setUp); aaManageEvent(window,"unload",GUnload); // Jeśli przeglądarka jest zgodna z mapą, należy utworzyć mapę i pobrać zdjęcia na podstawie // identyfikatora użytkownika; używane są ustawienia domyślne - wywołanie pobiera informacje o 100 zdjęciach function setUp() { if (GBrowserIsCompatible()) { map = new GMap2(aaElem("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(38.627952, -90.1843880), 13); aaAddScript("http://api.flickr.com/services/rest/?method=flickr.photos.search& user_id=69562477@N00&api_key=klucz&format=json&jsoncallback=gPic.processPhotos"); } var hash = window.location.hash; if (hash) { var subLoc = hash.split("#")[1]; Photo.currentPhoto = parseInt(subLoc) - 1; } }

Nowa wersja biblioteki jest bardziej wydajna i ułatwia zarządzanie funkcjonalnością zgrupowaną w obiekcie. Zapobiega także konieczności tworzenia wielu niezależnych funkcji globalnych, które mogłyby powodować konflikt z funkcjami innych bibliotek. Warto także dodać do biblioteki funkcje do obsługi map i umieścić je w obiekcie Map. Można spróbować użyć obiektu prototype języka JavaScript dla API usług Google Maps, jednak nadmierne manipulowanie bibliotekami, zwłaszcza tymi, które się zmieniają, nie jest najlepszym pomysłem. Należy zwrócić uwagę na pewien efekt, jaki umieszczenie wywołań do API usług Flickr ma na aplikację przy pierwszym wyświetlaniu zdjęć. W czasie pierwszej serii wywołania kierowane są zarówno do API usług Flickr, jak i API usług Google. Następnie aplikacja zgłasza wywołania tylko do usług Google (oprócz żądań zdjęć kierowanych do usług Flickr). Także w tym przypadku warto umieszczać w pamięci podręcznej fragmenty map, dzięki czemu nie trzeba wywoływać usług Google, jednak dodanie tej funkcjonalności nie leży już w Twoich rękach. Jednym z zagrożeń związanych z witrynami mashup jest oczywiście to, że programista nigdy nie wie, czy używana usługa nie zmieni się lub nie stanie się niedostępna. W czasie pisania tego rozdziału interfejs API usług Flickr powodował tymczasowe problemy i zwracał wciąż tę samą funkcję wywoływaną zwrotnie — jsonFlickrApi. Problem jest większy, kiedy trzeba używać więcej niż jednego API różnych usług. Jednak jeśli programista korzysta ze stabilnych usług sieciowych, problemy powinny występować rzadko, a zmiany w API nie powinny pojawiać się często.

Usługi Flickr obok miejsca wykonania zdjęcia udostępniają także inne dane. Dostępne są metadane zapisane wraz z fotografią, takie jak producent i model aparatu, data wykonania zdjęcia i ustawienia związane z naświetleniem. Można pobrać także dane używane w witrynie

Druga usługa — Flickr

|

295

Flickr, włączając w to tytuł, opis, komentarze, przynależność do zbioru i oznaczenia zdjęcia. Oznaczenie to słowo kluczowe powiązane z obiektem, które stanowi pewną formę globalnej kategoryzacji. Ułatwia to zebranie prac grupy użytkowników wokół danego oznaczenia, traktowanego jako motyw przewodni. Zbiór obiektów zgrupowanych na podstawie takiego oznaczenia to chmura oznaczenia (ang. tag cloud). W przykładach przedstawionych w tym rozdziale pobieranie informacji o oznaczeniach jest istotne, ponieważ można ich użyć do dodania do rozwijanej witryny mashup innych usług sieciowych. Jest to następna przydatna funkcja oznaczeń — wiele usług sieciowych „nastawionych na społeczność” obsługuje mechanizm tego typu i zwykle udostępnia go poprzez API. Jednak jeśli w witrynie mashup ma się znaleźć więcej danych, trzeba lepiej zaplanować układ strony. Na szczęście dostępny jest utworzony w rozdziale 5. interfejs API strony z zakładkami, tabs.js, a przekształcenie omawianej aplikacji na taką stronę jest uzasadnione. Pierwszym zadaniem przed dodaniem następnego elementu witryny będzie użycie zakładek do uporządkowania strony korzystającej z usług Flickr i Google. Ta operacja doprowadzi do odkrycia następnego wyzwania związanego z witrynami mashup, dotyczącego oczekiwań autorów bibliotek zewnętrznych.

Usługi Flickr i Google na stronie z zakładkami Przekształcenie aplikacji na stronę z zakładkami nie powinno sprawić trudności. Jednak najpierw trzeba od nowa zaplanować układ strony, aby miał strukturę niezbędną dla biblioteki tabs.js, włączając w to elementy reprezentujące nagłówek i zawartość zakładek. Następnie trzeba utworzyć obiekt tabs i ustawić kolory informujące o tym, czy dana zakładka jest aktywna, czy nie. Pozostałe elementy powinny dobrze pasować do tej struktury. W końcu zarówno usługi Flickr, jak i usługi Google Map wymagają jedynie specyficznego elementu, w którym będzie można umieścić zawartość, a miejsce jej położenia na stronie nie powinno mieć znaczenia. Nie powinno, ale okazuje się, że jednak ma. Ponieważ przycisk do kontrolowania zawartości jest powiązany ze zdjęciem, należy umieścić go na stronie pierwszej zakładki, a mapę — na stronie drugiej zakładki. Jednak po zastosowaniu tego rozwiązania okazuje się, że mapa Google nie jest widoczna po otwarciu strony drugiej zakładki. Znajduje się na niej platforma aplikacji, ale już nie komponenty mapy. Wewnętrzne mechanizmy API usług Google Maps są nieznane i tak pozostanie, przynajmniej przy pobieżnej analizie, za sprawą technik zaciemniania kodu JavaScript zastosowanych w tym interfejsie. Można jednak zgadywać, co się w nim dzieje, a moim zdaniem API nie potrafi „narysować” mapy w niewidocznym obszarze, ponieważ używa jego wysokości i szerokości do określenia, ile paneli mapy jest potrzebnych do utworzenia jej pełnego obrazu. Jednak otwarcie strony z obszarem na mapę i późniejsze przełączenie się do strony ze zdjęciem powoduje rozpraszający uwagę efekt wizualny, który zaburza płynność prezentacji. Rozwiązanie jest dość proste i ponownie można być wdzięcznym za możliwości, jakie daje model DOM. Zamiast tworzyć mapę bezpośrednio na stronie zakładki, należy utworzyć ją jako odrębny niewidoczny element, a po utworzeniu i wczytaniu mapy wystarczy użyć modelu DOM do dołączenia mapy do obszaru z zawartością na panelu, na którym ma się znajdować. Po pobraniu elementów mapy ich wyświetlenie nie stanowi problemu, ponieważ Google zna już rozmiar elementu przeznaczonego na mapę i tym samym ma informacje potrzebne do określenia, co ma wczytać. Nie jest istotne, czy dany element jest widoczny. 296

|

Rozdział 9. Witryny typu mashup

To rozwiązanie działa dla prawie wszystkich przeglądarek docelowych używanych na potrzeby tej książki. Wyjątek to przeglądarki Internet Explorer 6.x i 7, które powodują specyficzne dla obu wersji, ciekawe problemy z usługami Google Maps. Na końcu tego punktu znajduje się opis rozwiązania problemów z przeglądarką Internet Explorer w omawianej aplikacji mashup. Wszystkie przykłady z tego rozdziału powinny działać w przeglądarkach opartych na silniku Gecko (Camino, Firefox), a także w Operze, Safari (również w WebKit) i OmniWeb.

Listing 9.6 przedstawia nową stronę używającą nowej biblioteki języka JavaScript, googflicobj.js, a także bibliotek globalnych: Adding Ajax (addingajax.js) i Tabs (tabs.js). Zawartość strony została uporządkowana tak, aby miała strukturę wymaganą przez bibliotekę Tabs. Listing 9.6. Witryna mashup z usługami Google i Flickr na stronie z zakładkami

Zdjęcie:

Mapa:

Dalej

Druga usługa — Flickr

|

297

Arkusz stylów aplikacji także należy umieścić w odrębnym pliku, mashup.css: #map { border: 1px solid #ccc; height: 335px; visibility: hidden; width: 500px; } #loader { background-color: #ccf; margin: 20px; padding: 5px; text-align: center; width: 150px; } #button { background-color: #fff; border: 1px solid #000; font: 12px arial; padding: 2px; text-align: center; width: 50px; } .name { border: 1px solid #000; display: inline; padding: 10px; text-align: center; } .elements { background-color: #ccf; border: 1px solid #000; height: 500px; margin-top: 10px; width: 600px; } .content { display: none; margin: 10px; } .tab { display: inline; } .footer { clear: both; } .container { margin: 30px; }

Styl obiektu map na stronie nowej aplikacji to invisible. Obiekt ten jest całkowicie usuwany ze struktury zakładek, aby jego wymiary nie miały wpływu na układ. Elementy zakładek także są uwzględnione w arkuszu stylów, a kolor panelu to miły, delikatny odcień niebieskiego.

298 |

Rozdział 9. Witryny typu mashup

Nie warto ponownie przytaczać całego pliku googlflicobj.js, ponieważ jego większa część przypomina kod z listingu 9.5. Poniżej przedstawiona jest procedura setUp, która obecnie zawiera mały fragment kodu do przenoszenia obiektu map i zmiany jego widzialności po wczytaniu: // Jeśli przeglądarka jest zgodna z mapą, należy utworzyć mapę i pobrać zdjęcia na podstawie // identyfikatora użytkownika; używane są ustawienia domyślne - pobieranie informacji o 100 zdjęciach function setUp() { setUpTabs(); if (GBrowserIsCompatible()) { map = new GMap2(aaElem("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(38.627952, -90.1843880), 13); // Powiązanie mapy ze stroną var cnt = aaElem("mapcontent"); var mapObj = aaElem("map"); cnt.appendChild(mapObj); mapObj.style.visibility="visible"; var hash = window.location.hash; if (hash) { var subLoc = hash.split("#")[1]; Photo.currentPhoto = parseInt(subLoc) - 1; } aaAddScript("http://api.flickr.com/services/rest/?method=flickr.photos.search& user_id=69562477@N00&api_key=klucz&format=json&jsoncallback=Photo.processPhotos"); } }

Jedyny dodatkowy wiersz kodu potrzebny w tym pliku JavaScript tworzy obiekt tabs: var tabs = new Tabs("#ccf","#fff");

Nową, opartą na zakładkach wersję witryny mashup z usługami Google i Flickr przedstawia rysunek 9.3. Widoczna jest na nim strona z mapą. Teraz, po przygotowaniu miejsca na dodanie nowych materiałów, pora zapełnić je następnymi elementami.

Dodawanie usług Technorati do witryny mashup Technorati to wyszukiwarka do przeszukiwania blogów, która śledzi wpisy na podstawie oznaczeń, a także innych kryteriów. Główna strona tej witryny to http://technorati.com. Jak już wspomniałam, popularną funkcją wielu współczesnych usług sieciowych jest obsługa oznaczeń. Ma je Flickr, a także Technorati. Witryna Technorati sama udostępnia aplikację typu mashup, która pobiera zdjęcia związane z oznaczeniami z witryny Flickr, a także pliki wideo z witryny YouTube w celu umieszczania uwag na stronach z oznaczeniami. API usług Technorati ma interfejs zgodny z REST, obsługuje żądania GET i POST oraz wymaga stosowania bezpłatnego klucza API. Usługa istotna w tym miejscu, związana z oznaczeniami, zwraca wpisy z blogów powiązane z określonym oznaczeniem. Żądania obejmują dwa wymagane parametry i mają następujący format: http://api.technorati.com/tag?key=[kluczapi]&tag=[oznaczenie]

Dodawanie usług Technorati do witryny mashup

|

299

Rysunek 9.3. Witryna mashup z usługami Google i Flickr w wersji z zakładkami

Jest też kilka parametrów opcjonalnych: format XML w przypadku formatu XML, RSS dla RSS 2.0. Limit

Liczba wpisów zwracanych z blogu — domyślnie 20, maksymalnie 100. start

Służy do obsługi stronicowania, a jeśli zostanie ustawiony na maksymalną wartość: plus 1 (limit+1), powoduje zwrócenie następnej strony wyników.

excerptsize

Liczba zwracanych znaków — domyślnie 100. Topexcerptsize

Liczba znaków zwracanych dla pierwszego wpisu — domyślnie 150. Technorati nie obsługuje skryptów dynamicznych ani funkcji wywoływanych zwrotnie, co oznacza, że trzeba zastosować bardziej formalne żądania usług. Ponieważ żądanie pochodzi z innej domeny, należy utworzyć pośrednika, który będzie kierował żądania usług na serwer i przekazywał zwrócone dane z powrotem do klienta. Dość łatwo jest utworzyć program PHP zgłaszający żądania usług zgodne z REST, a usługi Technorati nie są tu wyjątkiem. Wybrany format zależy od tego, do czego programista chce użyć wyników. W następnym przykładzie potrzebne są raczej dane zwracane w formacie XML niż RSS. 300 |

Rozdział 9. Witryny typu mashup

Listing 9.7 zawiera kod pośrednika usługi sieciowej, który używa funkcji cURL do zarządzania żądaniem. Po zwróceniu danych pośrednik dołącza nagłówek XML do odpowiedzi i przekazuje go bezpośrednio do klienta. Listing 9.7. Kod pośrednika zarządzającego żądaniami do usług sieciowych Technorati 'klucz', 'tag' => $tag, 'limit' => '10' ); foreach ($params as $key => $value) { $query_string .= "$key=" . urlencode($value) . "&"; } $url = "$base?$query_string"; // Wykonywanie żądania za pomocą instrukcji curl $c = curl_init($url); curl_setopt($c, CURLOPT_RETURNTRANSFER, 1); $xml = curl_exec($c); curl_close($c); return $xml; } $xml = getTechnorati($tag); // Ustawienie nagłówka i przesłanie odpowiedzi header("Content-Type: text/xml; charset=utf-8"); echo $xml; ?>

Jedyna zmiana w kodzie samej strony internetowej polega na dodaniu nowych nazw stron z zakładkami, powiązanych z oznaczeniami z witryny Flickr i wpisami z witryny Technorati. Ponieważ dane na tych stronach są dodawane dynamicznie, potrzebny jest sposób na dostęp do konkretnych informacji: ...

Oznaczenia z witryny Flickr:

Wpisy z witryny Technorati:

...

Dodawanie usług Technorati do witryny mashup

|

301

W tej wersji witryny mashup nowa strona służy do wyświetlania oznaczeń Flickr powiązanych z danym zdjęciem, jednak nie wszystkich z nich. Flickr obsługuje oznaczenia maszynowe, podobne do specyfikacji RDF, ale w innym formacie. Są ciekawe i w innej witrynie mashup mogą być przydatne, jednak w tym przypadku używane są jedynie oznaczenia niemaszynowe. Oznaczeniom towarzyszą odnośniki do strony z takimi samymi oznaczeniami w witrynie Technorati, choć aplikacja modyfikuje zwracane dane i wyświetla jedynie 10 najnowszych wpisów dotyczących danego oznaczenia. Sam adres URL służy bardziej do „identyfikacji” odnośnika niż do otwierania odrębnych stron. Zastosowanie tego odnośnika umożliwia dostęp do elementu za pomocą klawiatury i informuje, że można go kliknąć. Kliknięcie odnośnika powoduje zgłoszenie żądania do pośrednika, który zwraca najnowsze wpisy z witryny Technorati powiązane z danym oznaczeniem. Aplikacja przetwarza je i zapełnia stronę zakładki Wpisy z witryny Technorati odnośnikami do artykułów. Zakładka name jest niewidoczna, jeśli użytkownik nie wybrał żadnego oznaczenia, a aplikacja wyświetla ją dopiero wtedy, kiedy wczyta na stronę wpisy dotyczące danego oznaczenia. Poniżej znajduje się lista wykonywanych operacji:

1. Po wczytaniu strony aplikacja tworzy mapę Google i przenosi ją do zakładki Mapa. Jeśli

dostępna jest właściwość hash, program używa obiektu location do określenia wyświetlanego zdjęcia.

2. Aplikacja żąda od usług Flickr zdjęć wykonanych przez określonego użytkownika. 3. Zdjęcia służą do utworzenia poszczególnych obiektów photo, które są dołączane do tablicy zdjęć obiektu Photo.

4. Przy pobieraniu każdego zdjęcia z tablicy aplikacja sprawdza miejsce jego wykonania. Jeśli go nie znajdzie, zgłasza żądanie do witryny Flickr i pobiera współrzędne.

5. Także przy pobieraniu zdjęć aplikacja pobiera oznaczenia z witryny Flickr, jeśli wcześniej nie zapisała ich w obiekcie.

6. Środek mapy jest ustawiany według współrzędnych miejsca wykonania bieżącego zdjęcia. 7. Aplikacja zapełnia stronę Oznaczenia z witryny Flickr na podstawie bieżącego zdjęcia. 8. Jeśli użytkownik kliknie oznaczenie na stronie Oznaczenia z witryny Flickr, aplikacja zgłasza żądanie do lokalnej usługi sieciowej w celu pobrania z witryny Technorati wpisów powiązanych z danym oznaczeniem.

9. Pobrane wpisy służą do zapełnienia czwartej strony, Wpisy z witryny Technorati. Ta strona jest wyświetlana dopiero po jej zapełnieniu.

Listing 9.8 przedstawia kompletny kod JavaScript aplikacji. Nowe elementy są wyróżnione, aby łatwiej było je zauważyć. Listing 9.8. Kompletny kod JavaScript zmodyfikowany w celu dodania obsługi usług Technorati var tabs = new Tabs("#ccf","#fff"); var map; var xmlhttp; // Funkcja obiektowa dla // każdego elementu photo function photo(id, url) { this.id = id; this.url = url;

302

|

Rozdział 9. Witryny typu mashup

this.longitude = null; this.latitude = null; this.tags = []; this.setLocation = function(lon,lat) { this.longitude = lon; this.latitude = lat; } } // Globalny obiekt Photo służący do zarządzania // wszystkimi wywołaniami Ajaksa związanymi ze zdjęciami // i przetwarzania wszelkich danych dotyczących zdjęć var Photo = { // Tworzy tablicę obiektów photo pobranych z witryny // Flickr na podstawie identyfikatora użytkownika processPhotos : function(obj) { this.currentPhoto = -1; this.photos = new Array(obj.photos.photo.length); for (var i = 0; i < obj.photos.photo.length; i++) { var pic = obj.photos.photo[i]; var url = "http://farm" + pic.farm + ".static.flickr.com/" + pic.server + "/" + pic.id + "_" + pic.secret + ".jpg"; this.photos[i] = new photo(pic.id, url); } aaManageEvent(aaElem('button'),'click',aaBindEventListener(this,this.loadPhoto)); this.loadPhoto(); }, this.getPhoto(); }, // Metoda obsługi zdarzeń do pobierania następnego zdjęcia loadPhoto : function(evnt) { evnt = evnt ? evnt : window.event; aaCancelEvent(evnt); this.getPhoto(); return false; }, // Przetwarzanie żądania dotyczącego nowego zdjęcia i pobieranie lokalizacji, // jeśli nie jest jeszcze zapisana w obiekcie photo getPhoto : function() { if (this.currentPhoto >= this.photos.length) this.currentPhoto = 0; var pic = this.photos[this.currentPhoto]; aaElem("image").src=pic.url; // Ustawianie mapy if (!pic.latitude) { aaAddScript("http://api.flickr.com/services/rest/?method=flickr.photos.geo. getLocation&photo_id=" + pic.id + "&api_key=klucz&format=json&jsoncallback=Photo.placeMarker"); } else { this.recenterMap(); } // Ustawienie oznaczeń z witryny Flickr if (pic.tags.length == 0) { aaAddScript("http://api.flickr.com/services/rest/?method=flickr.tags. getListPhoto&photo_id=" + pic.id + "&api_key=klucz&format=json&jsoncallback=Photo.createTagArray"); } else { this.resetTags(); } window.location.hash = this.currentPhoto;

Dodawanie usług Technorati do witryny mashup

| 303

this.currentPhoto++; }, // Zmiana położenia mapy i dodanie znacznika placeMarker : function(obj) { var lat = parseFloat(obj.photo.location.latitude); var lon = parseFloat(obj.photo.location.longitude); this.photos[this.currentPhoto].setLocation(lon,lat); var point = new GLatLng(lat,lon); var marker = new GMarker(point); map.addOverlay(marker); map.setCenter(point, 13); }, // Sama zmiana położenia mapy, jeśli znacznik jest już dostępny recenterMap : function() { var pic = this.photos[this.currentPhoto]; var point = new GLatLng(pic.latitude,pic.longitude); map.setCenter(point,13); }, // Dołączenie tablicy oznaczeń do zdjęcia createTagArray : function(obj) { var pic = this.photos[this.currentPhoto]; var tags = obj.photo.tags.tag; for (var i = 0; i < tags.length; i++) { if (tags[i].machine_tag != 1) { var tag = tags[i].raw; pic.tags[pic.tags.length] = tag; } } this.resetTags(); }, // Wyświetlenie na zakładce z oznaczeniami oznaczeń bieżącego zdjęcia resetTags : function() { var pic = this.photos[this.currentPhoto]; aaElem('techpostname').style.visibility="hidden"; var tagArea = aaElem('flickrtags'); var ul = aaElem('tagUl'); // Zmiana wyświetlanych elementów if (ul) tagArea.removeChild(ul); if (pic.tags.length > 0) { ul = document.createElement('ul'); ul.id = 'tagUl'; // Dodanie poszczególnych oznaczeń for (var i = 0; i < pic.tags.length; i++) { var li = document.createElement('li'); var a = document.createElement('a'); a.setAttribute('href', 'http://technorati.com/tag/' + pic.tags[i]); a.appendChild(document.createTextNode(pic.tags[i])); li.appendChild(a); aaManageEvent(li,'click',aaBindEventListener(this,this.getTechPosts)); ul.appendChild(li); } tagArea.appendChild(ul); } }, // Pobieranie z Technorati wpisów odpowiadających oznaczeniom z Flickr getTechPosts : function(evnt) { evnt = evnt ? evnt : window.event;

304 |

Rozdział 9. Witryny typu mashup

aaCancelEvent(evnt); var target = evnt.target ? evnt.target : evnt.srcElement; var tag = target.childNodes[0].nodeValue; // Wyczyszczenie obszaru z wpisami z witryny Technorati var content = aaElem('techpostcontent'); if (content) aaElem('techposts').removeChild(content); // Pobieranie obiektu XHR, przygotowywanie i wysyłanie żądania if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); var qry = "tag=" + tag; var url = 'technorati.php?' + qry; console.log(url); xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = this.processTechPosts; xmlhttp.send(null); }, // Przetwarzanie wpisów z witryny Technorati processTechPosts : function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var items = xmlhttp.responseXML.getElementsByTagName('item'); var content = document.createElement('div'); content.id = 'techpostcontent'; // Dołączanie odnośników do wpisów if (items.length > 0) { for (var i = 0; i < items.length; i++) { var name = ""; if (items[i].getElementsByTagName('name')[0].firstChild) name = items[i].getElementsByTagName('name')[0].firstChild.nodeValue; var title = "Brak tytułu"; if (items[i].getElementsByTagName('title')[0].firstChild) title = items[i].getElementsByTagName('title')[0]. firstChild.nodeValue; var link = ""; if (items[i].getElementsByTagName('permalink')[0].firstChild) link = items[i].getElementsByTagName('permalink')[0]. firstChild.nodeValue; var a = document.createElement('a'); a.appendChild(document.createTextNode(title)); a.setAttribute('href',link); var p = document.createElement('p'); p.appendChild(a); p.appendChild(document.createTextNode(' autor: ' + name)); content.appendChild(p); } } else { content.appendChild(document.createTextNode('Brak wpisów z Technorati')); } aaElem('techposts').appendChild(content); aaElem('techpostname').style.visibility="visible"; } } }; // Konfiguracja zdarzeń load i unload aaManageEvent(window,"load",setUp); aaManageEvent(window,"unload",GUnload);

Dodawanie usług Technorati do witryny mashup

| 305

// Jeśli przeglądarka jest zgodna z mapą, należy utworzyć mapę i pobrać zdjęcia na podstawie // identyfikatora użytkownika; używane są ustawienia domyślne - pobieranie informacji o 100 zdjęciach function setUp() { setUpTabs(); aaElem('techpostname').style.visibility="hidden"; if (GBrowserIsCompatible()) { map = new GMap2(aaElem("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(38.627952, -90.1843880), 13); // Powiązanie mapy ze stroną var cnt = aaElem("mapcontent"); var mapObj = aaElem("map"); cnt.appendChild(mapObj); mapObj.style.visibility="visible"; var hash = window.location.hash; if (hash) { var subLoc = hash.split("#")[1]; Photo.currentPhoto = parseInt(subLoc); } aaAddScript("http://api.flickr.com/services/rest/?method=flickr.photos.search& user_id=69562477@N00&api_key=klucz&format=json&jsoncallback=Photo.processPhotos"); } }

Dużo kodu, prawda? Rzeczywiście, jednak spora jego część służy do żmudnego tworzenia strony i zarządzania sposobem jej wyświetlania po pobraniu danych. Obie grupy operacji można łatwo umieścić w funkcjach wyższego poziomu, nadających się do wielokrotnego wykorzystania, lub użyć do ich obsługi zewnętrznych bibliotek Ajaksa. Kod jest nie tyle skomplikowany, co długi. Usługi Technorati dodane do witryny mashup przedstawia rysunek 9.4. Jak można usprawnić aplikację po utworzeniu działającego prototypu witryny mashup obejmującej dane i usługi udostępniane przez trzy różne firmy? Zwykle w przypadku witryn mashup programista najpierw tworzy prostą wersję testową, aby sprawdzić interakcję między wszystkimi danymi. Kiedy prototyp działa, przychodzi pora na jego modyfikowanie i dodawanie usprawnień w zakresie przetwarzania, zabezpieczeń i dostępności. Aplikacja w obecnej wersji nie nadaje się do użytku przy wyłączonej obsłudze skryptów, a nawet ze skryptami nie będzie działać w przeglądarce Internet Explorer. Ponadto występują pewne problemy z bezpieczeństwem, z których najważniejszy wiąże się z udostępnieniem klucza API usług Flickr w kodzie JavaScript aplikacji. Dostępny jest także klucz Google, którego jednak można używać tylko w specyficznym podkatalogu, zawierającym zwracaną stronę. Jednak klucza API usług Flickr można używać w dowolnym miejscu. Choć Flickr i jej właściciel, Yahoo!, nie przejmują się zbytnio poufnością kluczy, udostępnianie ich innym osobom nie leży w interesie programistów, ponieważ grozi to nadużyciem danego klucza i zablokowaniem konta. Wszystkie te problemy porusza następny punkt rozdziału, który opisuje modyfikację aplikacji pod kątem zwiększenia jej stabilności i dostępności.

306

|

Rozdział 9. Witryny typu mashup

Rysunek 9.4. Witryna mashup obejmująca usługi Google Maps, Flickr i Technorati

Modyfikowanie witryny mashup Najważniejsza zmiana dotyczy interfejsu z zakładkami. W poprzednich rozdziałach opisałam interfejs działający bez skryptów, który można następnie przekształcić w stronę z zakładkami, jeśli obsługa skryptów jest włączona. To przekształcanie wymaga użycia jedynie stylów CSS oraz małej ilości kodu JavaScript. Po zakończeniu modyfikowania zakładek następny etap obejmuje udostępnienie interfejsu działającego po stronie serwera przeznaczonego dla wszystkich usług oprócz Google Maps. Ta sama aplikacja ma udostępniać usługi dla kodu działającego po stronie serwera, który nie wymaga obsługi skryptów, oraz ajaksowego klienta opartego na języku JavaScript. Usługi Google Maps są trudne do eleganckiego przekształcenia na interfejs, który nie wymaga skryptów. Można jednak użyć współrzędnych do utworzenia odnośnika do usług Google Maps, dzięki czemu użytkownik strony może zdecydować, czy chce włączyć skrypty na potrzeby tych usług. Można też użyć lokalizacji do utworzenia odnośnika prowadzącego do mapy w witrynie Google lub Yahoo!, a nawet po prostu wyświetlić same współrzędne.

Modyfikowanie witryny mashup

|

307

Podobnie jak we wcześniejszych rozdziałach, wersja bez skryptów jest generowana przez kod działający po stronie serwera, który udostępnia także trwały odnośnik do każdej „strony”. Aby to rozwiązanie działało, należy zastosować jedno z kilku rozwiązań. Trzeba albo zapewnić obsługę dla wszystkich oznaczeń z usług Flickr za pomocą powiązania w trybie „na żądanie” pomiędzy usługami Flickr i Technorati, albo udostępnić jedynie odnośnik do witryny Technorati, albo wyświetlać wpisy na odrębnej stronie. W tym przypadku, ponieważ jest to witryna mashup, aplikacja generuje odnośniki dla wszystkich wpisów na podstawie wybranego oznaczenia z witryny Flickr. W aplikacji ajaksowej wciąż obowiązuje tryb „na żądanie”. Podobnie jak w aplikacjach przedstawionych w rozdziale 7., odnośniki do stron wygenerowanych po stronie serwera są zastępowane w wersji ajaksowej, aby udostępnić funkcjonalność działającą po stronie klienta. Jednak najważniejsza zmiana po stronie klienta polega na tym, że dynamiczne skrypty związane z usługami Flickr zostały zastąpione wywołaniem usługi sieciowej, która zgłasza żądanie na rzecz aplikacji. Pozwala to ukryć klucz API usług Flickr. Pierwsze zadanie to przekształcenie strony z zakładkami na pionowo uporządkowane bloki strony.

Dostępne zakładki Aktualna wersja zakładek nie nadaje się do zastosowania w aplikacji ze zmiennym układem. Nazwy zakładek trzeba powiązać z ich ciałem poprzez fizyczną bliskość, dzięki czemu po wyświetleniu elementów w warstwach jako zakładek nazwa i ciało zostaną w naturalny sposób wyświetlone w poziomie — jako element nagłówka wraz z obszarem zawartości. Układ strony z zakładkami obejmuje kontener div, zawierający zbiór elementów div dla zakładek, po których bezpośrednio następują elementy div dla zawartości. Każdy obszar z zawartością może ponadto zawierać inne elementy, jednak podstawowa struktura obejmuje wymienione obiekty. Zakładki mają klasę name, a obszary z zawartością — content. Te klasy są konieczne z powodu stylów CSS używanych dla widoków z obsługą skryptów i bez niej. Przykładową strukturę strony z trzema zakładkami przedstawia poniższy fragment kodu:

Zdjęcia:

Panel ze zdjęciami

Oznaczenia z witryny Flickr:

Oznaczenia z witryny Flickr

Wpisy z witryny Technorati:

Wpisy z witryny Technorati

308 |

Rozdział 9. Witryny typu mashup

Znaczniki odróżniają widok z obsługą skryptów od widoku bez takiej obsługi. W przypadku wersji ze skryptami pozycja paneli z zawartością jest określana bezwzględnie (styl absolute), co powoduje usunięcie ich z widoku. Same zakładki są następnie wyświetlane w trybie inline, przez co aplikacja wyświetla je od lewej do prawej wzdłuż górnej krawędzi kontenera: .name { border: 1px solid #000; display: inline; margin: 0px; text-align: center; padding: 10px; } .content { background-color: #ccf; border: 1px solid #000; height: 500px; width: 600px; position: absolute; } .container { margin: 30px; }

W przypadku widoku bez skryptów do kontenera automatycznie dodawane są poziome marginesy, aby zawartość znalazła się na środku, a zakładki i panele są rozmieszczane zgodnie z kolejnością pojawiania się na stronie. Ograniczenie dotyczące wysokości jest usunięte, ponieważ w tym przypadku nie jest istotne, czy zawartość jednego panelu jest dłuższa od zawartości drugiego: .name { border: 1px solid #000; margin: 0px; text-align: center; margin-bottom: 10px; padding: 10px; width: 580px;

} .content { background-color: #ccf; border: 1px solid #000; width: 600px; margin-bottom: 10px; } .container { margin: 30px auto; width: 600px; }

Kod biblioteki Tabs języka JavaScript, który wybiera panel wyświetlany po kliknięciu zakładki, jest niemal identyczny jak we wcześniejszych przykładach. Różnica polega na tym, że atrybut display każdego panelu przyjmuje wartość 'none'. Panele są umieszczane w warstwach, jeden nad drugim, a bez wprowadzenia tej drobnej zmiany ostatni panel byłby na wierzchu nawet po zastosowaniu biblioteki Tabs do wyświetlania stron po kliknięciu zakładki przez użytkownika. Ta modyfikacja nie wpływa na działanie poprzednich przykładów, dlatego można ją wprowadzić w ogólnej bibliotece tabs.js: Modyfikowanie witryny mashup

| 309

function setUpTabs() { var divs = document.getElementsByTagName('div'); var tabCount = 0; for (var i = 0; i < divs.length; i++) { if (divs[i].className == 'name') { tabs.addTab(divs[i]); } else if (divs[i].className == 'content') { tabs.addPanel(divs[i]); divs[i].style.display = 'none'; } } tabs.showPanel(0); }

Potrzebna jest jeszcze jedna zmiana, specyficzna dla przeglądarki. Internet Explorer 6.x i 7 nieprawidłowo określają pozycje w przypadku arkusza stylów w wersji z obsługą skryptów. Aby dostosować ten arkusz do przeglądarek Microsoftu, trzeba ustawić górny margines na 30 pikseli, a odległość od lewej krawędzi — na 40 pikseli: .content { margin-top: 30px; left: 40px; }

Powoduje to problemy we wszystkich pozostałych przeglądarkach, dlatego te drobne zmiany trzeba dodać do arkusza stylów specyficznego dla przeglądarki Internet Explorer, iemashuphacks.css. Ponadto należy zastosować warunek wykrywający przeglądarki Internet Explorer i używać tego arkusza tylko wtedy, kiedy użytkownik korzysta z tej przeglądarki:

Można spędzić więcej czasu nad rozwojem stylów CSS i utworzyć arkusz, który będzie działał we wszystkich przeglądarkach. Jednak używając Ajaksa, warto wiedzieć o możliwości zastosowania arkusza stylów specyficznego dla przeglądarki Internet Explorer. Możliwe, że kiedyś ta technika okaże się potrzebna. Do wyłączania innych arkuszy stylów i dołączania arkusza dla wersji z obsługą skryptów służy skrypt. Jeśli skrypty są wyłączone, za wygląd odpowiada arkusz stylów dla wersji bez obsługi skryptów. Kod zmieniający arkusze to odmiana przełącznika arkuszy stylów, używanego na wielu witrynach. Listing 9.9 przedstawia stronę testową zakładek ze skryptem włączającym arkusz stylów dla wersji z obsługą skryptów. Listing 9.9. Strona testowa zakładek

Zdjęcia:

Panel ze zdjęciami

Oznaczenia z witryny Flickr:

Oznaczenia z witryny Flickr

Wpisy z witryny Technorati:

Wpisy z witryny Technorati

Można wypróbować tę stronę w kilku przeglądarkach i z włączoną oraz wyłączoną obsługą skryptów. Arkusz stylów powinien działać i zapewniać poprawny wygląd strony niezależnie od tego, czy obsługa skryptów jest włączona, czy nie. Teraz pora dostosować witrynę mashup tak, aby działała zarówno w środowisku z włączoną obsługą skryptów, jak i bez nich. Najpierw jednak należy podjąć decyzję co do usług Google Maps i problemów związanych z przeglądarką Internet Explorer. Inne podejście do udostępniania stron z zakładkami bez obsługi skryptów polega na zastosowaniu ramek iframe na zawartość i wczytywaniu do nich powiązanych danych w wyniku kliknięcia odnośnika. Ramka iframe może nawet zajmować całą stronę, a witrynę można utworzyć jako pojedynczą aplikację obsługiwaną po stronie serwera, która będzie wyświetlać różne typy zawartości w zależności od przekazanych parametrów. Taka strona nie wymaga skryptów, ale jej interfejs „wygląda” i „działa” podobnie jak w wersji opartej na skryptach.

Modyfikowanie witryny mashup

|

311

Google Maps, Internet Explorer i sytuacje, kiedy lepiej odpuścić W poprzednich przykładach z zakładkami otwieranie map Google w niewidocznym elemencie wymagało sporo nieoczekiwanej pracy. Jest to jedno z wyzwań związanych z używaniem widgetów obsługujących zarówno prezentację, jak i funkcjonalność, zamiast interfejsów API, za pomocą których można samodzielnie zarządzać prezentacją. Przykłady przedstawione do tej pory nie działają w przeglądarce Internet Explorer, a nawet w innych przeglądarkach wymagają przesyłania dużych ilości danych między usługami Google a aplikacją. Powoduje to problemy z czasem wczytywania strony i zwiększenie obciążenia łączy. Ponadto usługi Google Maps nie działają zbyt dobrze w środowisku bez obsługi skryptów i nie zapewniają eleganckiej degradacji. Nie można ich dołączyć do wersji aplikacji bez obsługi skryptów. Mapy Google były pierwszym elementem rozwijanej witryny mashup, ale nie są kluczowe dla ogólnej funkcjonalności, dlatego zabraknie ich w ostatecznej wersji. Google obsługuje strukturę odnośników umożliwiającą otwieranie map bezpośrednio z określonym zbliżeniem, a jest to podejście przynajmniej tak dobre, jeśli nie lepsze, jak umieszczenie mapy na stronie drugiej zakładki. Nie tylko rozwiązuje to problem z przeglądarką, ale także zapewnia synchronizację między wersją z obsługą skryptów i bez nich, ponieważ obie mają dostęp do tych samych danych scalanych z różnych źródeł. Do aplikacji wciąż trzeba przekazać informacje o współrzędnych pobranych z witryny Flickr, aby utworzyć odpowiedni odnośnik do mapy Google, a ten odnośnik odpowiada mniej więcej żądaniu REST, dzięki czemu koncepcja witryny mashup zostaje zachowana — choć w nieco bardziej zdalnej odmianie. Co jednak najlepsze, nie trzeba martwić się o przyszłe reklamy wyświetlane w aplikacji czy klucz API usług Google Maps potrzebny dla każdego podkatalogu. Po poradzeniu sobie z kłopotliwymi usługami Google Maps pora ukończyć pozostałą część aplikacji. Najpierw należy zapewnić dostęp do usług sieciowych zarówno aplikacji działającej po stronie serwera, jak i ajaksowemu klientowi. Inne rozwiązanie polega na udostępnieniu obok odnośnika do witryny Google odnośnika obsługiwanego za pomocą skryptów, który otwiera nad stroną warstwę z mapą Google i wypośrodkowuje tę mapę w miejscu wykonania zdjęcia.

Abstrakcja usług sieciowych W aplikacji przedstawionej na listingu 9.8 żądania kierowane do usług Flickr są obsługiwane bezpośrednio w ajaksowym kliencie za pomocą punktów końcowych wywołań zwrotnych korzystających z formatu JSON. To podejście wiąże się z trzema problemami. Pierwszy z nich to brak bezpieczeństwa i stabilności. Dostęp do usług Flickr odbywa się bezpośrednio z poziomu kodu klienta, co oznacza, że jeśli usługi zmienią się, kod klienta będzie wymagał zmian na wszystkich stronach korzystających z tych usług. Potrzebna jest warstwa abstrakcji między nieprzetworzonym żądaniem usługi sieciowej a kodem tworzącym klienta.

312

|

Rozdział 9. Witryny typu mashup

Ponadto żądania kierowane do usług zawierają bezpośrednio widoczny klucz API usług Flickr, dlatego inne osoby mogą go łatwo przechwycić. Nawet jeśli programista zaciemni kod, czego sama nie lubię robić, klucz będzie można łatwo znaleźć nawet w nieczytelnym kodzie. Po trzecie, obecnie dwa klienty używają tej samej grupy usług sieciowych: aplikacja, która nie używa skryptów, napisana za pomocą prostego kodu PHP, oraz klient ajaksowy. Kod PHP używa usług sieciowych jako funkcji, a klient ajaksowy — jako lokalnych wywołań usług. Omawiane zagadnienia są charakterystyczne dla wszystkich aplikacji ajaksowych i warto wymienić je jeszcze raz: • Zamiast używać danych ze zdalnych usług bezpośrednio w wielu klientach, warto udo-

stępnić warstwę abstrakcji do przetwarzania zdalnych danych, która przekształca je na format specyficzny dla aplikacji. Wszystkie klienty mogą następnie korzystać z tej warstwy abstrakcji. • Używając kluczy API, należy je ukrywać przez umieszczenie ich w pośrednikach działa-

jących po stronie serwera. Nie należy używać kluczy w kodzie JavaScript. • Stosując się do zasad stopniowego usprawniania, trzeba zapewnić dostęp do usług zarów-

no aplikacji ajaksowej, jak i tradycyjnej aplikacji sieciowej. Najlepiej jest udostępniać usługi obu klientom od samego początku. Wywołania usług Technorati są już zgłaszane lokalnie, jednak trzeba je umieścić w funkcji, którą będzie mógł wywołać program PHP działający jako interfejs klienta ajaksowego oraz, bezpośrednio, aplikacja bez obsługi skryptów: 'klucz', 'tag' => $tag, 'limit' => '10' ); foreach ($params as $key => $value) { $query_string .= "$key=" . urlencode($value) . "&"; } $url = "$base?$query_string"; // Wykonanie żądania za pomocą instrukcji curl $c = curl_init($url); curl_setopt($c, CURLOPT_RETURNTRANSFER, 1); $xml = curl_exec($c); curl_close($c); return $xml; } ?>

Modyfikowanie witryny mashup

|

313

Klient ajaksowy nie wywołuje bezpośrednio funkcji uruchamianej po stronie serwera, a do zarządzania interakcją między tymi elementami służy warstwa interfejsu:

Ajaksowy klient nie wymaga żadnych zmian. Korzysta już z lokalnej usługi sieciowej, o czym można się przekonać, analizując zmodyfikowany kod JavaScript aplikacji. Teraz jednak usługi Flickr są dostępne także dla aplikacji napisanej w języku PHP. Wahałam się, czy zamieścić w tekście wszystkie biblioteki języka PHP i kod warstw abstrakcji, ponieważ jest to książka o Ajaksie, a technologia ta powinna być niezależna od języka używanego po stronie serwera. Jednak bez wszystkich fragmentów aplikacja byłaby niezrozumiała, dlatego proszę o wybaczenie mi „bonusowego” kodu PHP. Listing 9.10 przedstawia „nakładkę” na usługi sieciowe Flickr. Listing 9.10. Nakładka PHP na usługi sieciowe Flickr 'flickr.photos.search', 'api_key' => 'klucz', 'user_id' => '69562477@N00', 'format' => $format ); foreach ($params as $key => $value) { $query_string .= "$key=" . urlencode($value) . "&"; } $url = "$base?$query_string"; if (!empty($callback)) $url = $url . 'jsoncallback=' . $callback; $rsp = file_get_contents($url); if ($format == 'php_serial') { $output = unserialize($rsp); } else { $output = $rsp; } return $output; }

314

|

Rozdział 9. Witryny typu mashup

// Opakowuje żądanie pobierające miejsce wykonania zdjęcia function getLocation($callback,$format,$photo) { // Przygotowanie żądania $base = 'http://api.flickr.com/services/rest/'; $query_string = ''; $params = array( 'method' => 'flickr.photos.geo.getLocation', 'api_key' => 'klucz', 'photo_id' => $photo, 'format' => $format ); foreach ($params as $key => $value) { $query_string .= "$key=" . urlencode($value) . "&"; } $url = "$base?$query_string"; if (!empty($callback)) $url = $url . 'jsoncallback=' . $callback; $rsp = file_get_contents($url); if ($format == 'php_serial') { $output = unserialize($rsp); } else { $output = $rsp; } return $output; } // Opakowuje żądanie pobierające oznaczenia zdjęcia function getTags($callback, $format,$photo) { // Przygotowanie żądania $base = 'http://api.flickr.com/services/rest/'; $query_string = ''; $params = array( 'method' => 'flickr.tags.getListPhoto', 'api_key' => 'klucz', 'photo_id' => $photo, 'format' => $format, 'jsoncallback' => $callback ); foreach ($params as $key => $value) { $query_string .= "$key=" . urlencode($value) . "&"; } $url = "$base?$query_string"; if (!empty($callback)) $url = $url . 'jsoncallback=' . $callback; $rsp = file_get_contents($url); if ($format == 'php_serial') { $output = unserialize($rsp); } else { $output = $rsp; }

Modyfikowanie witryny mashup

|

315

return $output; } ?>

To jedynie naprędce utworzona aplikacja z dużą ilością nadmiarowego kodu, jednak to dopiero punkt wyjścia. Klient ajaksowy nadal obsługuje żądania do usług sieciowych za pomocą punktów końcowych usług oraz skryptów dynamicznych. Jednak obecnie także kod PHP ma dostęp do zdalnych danych, choć nie używa formatu JSON. W zamian korzysta z nowego formatu obsługiwanego przez Flickr, php_serial, wraz z funkcjami serialize i unserialize języka PHP, które służą do umieszczania danych w tablicy asocjacyjnej języka PHP. Teraz, po opakowaniu usług sieciowych i wyabstrahowaniu zewnętrznych zależności z lokalnego kodu, pora utworzyć klienta. Wymaga to podjęcia następnych decyzji.

Nowa wersja klientów Najważniejsza decyzja w tym momencie dotyczy tego, czy tworzyć aplikację działającą po stronie serwera i klienta ajaksowego w obrębie tych samych stron. Takie podejście zastosowałam w rozdziale 7., jednak nie zawsze jest ono najbardziej korzystne dla aplikacji. Czasem użytkownik może mieć włączoną obsługę skryptów, ale chce użyć wersji aplikacji bez skryptów. Osoby korzystające z programów odczytujących tekst z ekranu zwykle wolą wersje bez skryptów, jednak mogą mieć włączoną ich obsługę. W końcu nie wszystkie skrypty służą do przemieszczania elementów po stronie. Inne osoby mogą korzystać z niestandardowych przeglądarek, które obsługują strony w dziwny sposób, a jeszcze inni użytkownicy mogą po prostu nie lubić Ajaksa (nie! — jak to możliwe?!), dlatego wypada dać im wszystkim wybór.

Aplikacja bez skryptów Zarówno wersja ze skryptami, jak i bez nich rozpoczynają działanie na tej samej stronie startowej, która używa kodu PHP do wyświetlenia wszystkich odnośników do „statycznych” stron ze zdjęciami (w praktyce powoduje to umieszczenie w pamięci podręcznej wyników żądania do usług Flickr, pobierającego wyjściowy zestaw zdjęć), a także odnośnika do pokazu slajdów. Odnośniki do zdjęć zawierają wszystkie informacje potrzebne do zapełnienia strony przez aplikację działającą po stronie serwera, włączając w to identyfikator fotografii i inne dane identyfikacyjne potrzebne w adresie URL zdjęcia. Listing 9.11 przedstawia kod tej strony. Listing 9.11. Strona startowa niezależna od skryptów

Lista zdjęć

316

|

Rozdział 9. Witryny typu mashup

$title"; } ?>

... lub widok zarządzany za pomocą Ajaksa Pokaz slajdów --wymaga języka JavaScript i współczesnej przeglądarki

Istotna różnica między aplikacją bez skryptów a klientem ajaksowym polega na tym, że w aplikacji nie ma sterowanego zdarzeniami powiązania pomiędzy kliknięciem oznaczenia z witryny Flickr w celu zapełnienia okna a pobieraniem wpisów dotyczących tego oznaczenia z witryny Technorati. W przypadku aplikacji bez obsługi skryptów każde oznaczenie z witryny Flickr służy do przygotowania żądania kierowanego do usług Technorati, a następnie wyświetlane są wszystkie zwrócone wyniki, z wcięciem względem każdego oznaczenia. Nie jest to jednak odpowiednie podejście, jeśli oznaczeń jest dużo. Lepsze rozwiązanie polega na umożliwieniu użytkownikom kliknięcia odnośnika powiązanego z każdym oznaczeniem z witryny Flickr i wyświetlaniu wyników z witryny Technorati na odrębnej stronie. Jednak w przypadku przykładowej aplikacji za wszystko odpowiada aplikacja jednostronicowa slideshow.php, przedstawiona na listingu 9.12. Listing 9.12. Alternatywny klient przykładowej witryny mashup — nie wymaga skryptów
Nowa wersja klientów

|

317

content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />

Zdjęcia:

Oznaczenia z witryny Flickr:

' . $tag['raw'] . ''; } ?>

Wpisy z witryny Technorati:

' . $tag['raw'] . '

'; echo '

'; $xmlstr = getTechnorati($tag['raw']); $xml = new SimpleXMLElement($xmlstr); foreach ($xml->document->item as $item) { echo '
• permalink . '">' . $item->title . '
'; } echo '

'; } } ?>

Zastosowanie serializacji przy użyciu języka PHP pozwala wstawić dane z witryny Flickr do tablicy asocjacyjnej, a za pomocą obiektu SimpleXMLElement można zrobić to samo z danymi z witryny Technorati. Inne rozwiązanie polega na zastosowaniu języka XSLT do przekształcenia danych XML, jednak w tak prostym przykładzie wystarczy użyć tablicy asocjacyjnej.

318

|

Rozdział 9. Witryny typu mashup

Choć trudno pokazać działanie tej aplikacji za pomocą zrzutu, rysunek 9.5 przedstawia niektóre z nachodzących na siebie obszarów strony.

Rysunek 9.5. Strona częściowa utworzona za pomocą aplikacji bez skryptów

Udostępnienie alternatywnej opcji, która nie wymaga skryptów, nie tylko daje użytkownikom wybór, ale też pozwala programistom używającym Ajaksa wykorzystać pełnię możliwości tej technologii (w obrębie ograniczeń związanych z przeglądarkami). Następny podpunkt opisuje ostatni element — klienta ajaksowego.

Nowy klient ajaksowy Ta wersja ma trzy zakładki zamiast czterech, ponieważ nie obejmuje usług Google Maps. Jednak na pierwszej stronie, pod zdjęciem, aplikacja wyświetla teraz listę nieuporządkowaną z trzema odnośnikami. Pierwszy prowadzi do witryny Flickr ze względu na zasady korzystania z tych usług. Drugi służy jako trwały odnośnik i kieruje użytkownika do alternatywnej — niewymagającej skryptów — strony statycznej ze zdjęciem. Trzeci odnośnik prowadzi do map Google i przekazuje współrzędne geograficzne, dzięki czemu na mapie widoczne będzie miejsce wykonania zdjęcia (zobacz rysunek 9.5). Aplikacja rozrosła się do dość dużych rozmiarów. Zbyt dużych, aby móc przedstawić cały kod aplikacji w jednym miejscu. W zamian warto przyjrzeć się kolejnym fragmentom i zobaczyć, jak działają.

Nowa wersja klientów

|

319

Tę aplikację, jak również pozostały przykładowy kod, można pobrać ze strony http://helion.pl/AJAXIM.htm.

Funkcja wczytująca stronę tworzy interfejs z zakładkami, a także stosuje sztuczkę ze znakiem kratki. Kod do inicjowania mapy Google nie jest już potrzebny, dlatego został usunięty, a początkowe wywołanie usług Flickr dotyczy teraz usługi lokalnej: // Konfiguracja zdarzeń load and unload aaManageEvent(window,"load", function() { setUpTabs(); aaElem('techpostname').style.visibility="hidden"; var hash = window.location.hash; if (hash) { var subLoc = hash.split("#")[1]; Photo.currentPhoto = parseInt(subLoc) - 1; } aaAddScript("flickrjs.php?service=getPhotos&format=json& callback=Photo.processPhotos"); });

Funkcja processPhotos obiektu Photo działa prawie tak samo jak wcześniej. Tworzy obiekt photo dla każdego obiektu tego typu zwróconego przez usługi w wyniku zgłoszenia żądania. Różnica polega na tym, że oryginalny obiekt photo pobrany z witryny Flickr jest przypisywany do obiektu photo aplikacji w celu zapisania wszystkich danych, które będą potrzebne w adresie URL, bez konieczności tworzenia szeregu różnych właściwości. Poniższy kod jest niezbędny ze względu na zmiany wprowadzone w usłudze sieciowej: processPhotos : function(obj) { this.photos = new Array(obj.photos.photo.length); for (var i = 0; i < obj.photos.photo.length; i++) { var pic = obj.photos.photo[i]; var url = "http://farm" + pic.farm + ".static.flickr.com/" + pic.server + "/" + pic.id + "_" + pic.secret + ".jpg"; this.photos[i] = new photo(pic.id, url); this.photos[i].origObject = obj.photos.photo[i]; } aaManageEvent(aaElem('button'),'click',aaBindEventListener(this,this.loadPhoto)); this.getPhoto(); },

Do zarządzania większością mechanizmów aplikacji służy metoda Photo.getPhoto. To ona wyświetla zdjęcie, zgłasza żądania współrzędnych geograficznych i oznaczeń do usług Flickr, a także tworzy i wczytuje do elementu div dodawanego do panelu ze zdjęciem dwa z trzech odnośników z pierwszej strony: wymagany odnośnik do witryny Flickr i trwały odnośnik do strony statycznej. Poniższe punkty zawierają podsumowanie operacji wykonywanych przez tę metodę:

1. Pobiera bieżący obiekt photo z tablicy zdjęć. 2. Używa atrybutu src do określenia widocznego rysunku. 3. Tworzy odnośnik do oryginalnego zdjęcia w witrynie Flickr i dołącza go do strony z fotografią.

320

|

Rozdział 9. Witryny typu mashup

4. Tworzy odnośnik do zdjęcia na stronie bez skryptów jako odmianę trwałego odnośnika i dodaje go do strony z fotografią.

5. Jeśli aplikacja nie pobrała jeszcze oznaczeń zdjęcia z witryny Flickr, omawiana metoda zgłasza żądanie Ajaksa w celu uzyskania tych informacji.

6. Wywołuje metodę jako wywołanie zwrotne w celu przetworzenia oznaczeń z witryny Flickr.

7. Jeśli aplikacja nie pobrała jeszcze współrzędnych miejsca wykonania zdjęcia, omawiana metoda zgłasza żądanie Ajaksa w celu uzyskania tych informacji.

8. Wywołuje funkcję jako wywołanie zwrotne w celu dodania do strony ze zdjęciem odnośnika ze współrzędnymi prowadzącego do witryny Google Maps.

Listing 9.13 przedstawia kod JavaScript metody getPhoto. Listing 9.13. Kod JavaScript metody getPhoto // Wczytuje określone zdjęcie na stronę, pobiera miejsce jego // wykonania, dane dla Google Maps i oznaczenia, jeśli // aplikacja nie pobrała ich wcześniej getPhoto : function() { // Pobiera następne zdjęcie this.currentPhoto++; if (this.currentPhoto >= this.photos.length) this.currentPhoto = 0; var pic = this.photos[this.currentPhoto]; // Ustawienie zdjęcia aaElem("image").src=pic.url; // Wymagany odnośnik do witryny Flickr i stały odnośnik do strony ze zdjęciem if (aaElem('maplinks')) aaElem('required').removeChild(aaElem('maplinks')); var a = document.createElement('a'); a.setAttribute('href','http://flickr.com/photos/69562477@N00/' + pic.id + '/'); a.appendChild(document.createTextNode('Odnośnik do zdjęcia na witrynie Flickr')); var ul = document.createElement('ul'); ul.setAttribute('id','maplinks'); var li = document.createElement('li'); li.appendChild(a); ul.appendChild(li); // Ustawianie stałego odnośnika do statycznej strony ze zdjęciem a = document.createElement('a'); var url = "slideshow.php?farm=" + pic.origObject.farm + "&server=" + pic.origObject.server + "&id=" + pic.id + "&secret=" + pic.origObject.secret; a.setAttribute('href',url); a.appendChild(document.createTextNode('Stały odnośnik do statycznej strony ze zdjęciem')); li = document.createElement('li'); li.appendChild(a); ul.appendChild(li); aaElem('required').appendChild(ul); // Ustawianie oznaczeń z witryny Flickr if (pic.tags.length == 0) { aaAddScript("flickrjs.php?service=getTags&format=json&callback=Photo. createTagArray&photo_id=" + pic.id); } else { this.resetTags(); }

Nowa wersja klientów

|

321

// Pobieranie danych o miejscu wykonania zdjęcia if (!pic.latitude) { aaAddScript("flickrjs.php?service=getLocation&format=json&callback=Photo. placeLocation&photo_id=" + pic.id); } // Zapamiętywanie bieżącej pozycji window.location.hash = this.currentPhoto; }

Warto zwrócić uwagę na ostatni wiersz tej funkcji. W tym miejscu aplikacja ustawia właściwość location.hash, co pozwala przywrócić stronę, kiedy użytkownik opuści ją, a następnie użyje historii lub przycisku Wstecz, aby na nią wrócić. Duża część kodu służy do tworzenia elementów pierwszej strony za pomocą modelu DOM. Jest to dobry przykład korzyści ze stosowania bibliotek Ajaksa, które umożliwiają znaczne skrócenie kodu aplikacji. Rysunek 9.6 przedstawia pierwszą stronę aplikacji. Warto zauważyć, że zakładka Wpisy z witryny Technorati jest niewidoczna — i nie zmieni się to do momentu wybrania oznaczenia z witryny Flickr.

Rysunek 9.6. Pierwsza strona witryny mashup używającej usług: Flickr, Technorati i Google

322

|

Rozdział 9. Witryny typu mashup

Przedstawiony wcześniej kod zgłasza dwa żądania do usług. Jedno z nich służy do pobierania oznaczeń, a drugie pobiera współrzędne miejsca wykonania zdjęcia. Funkcja do przetwarzania lokalizacji, Photo.placeLocation, jest znacznie uproszczona w porównaniu z wcześniejszymi przykładami, ponieważ nie trzeba zmagać się z obsługą map Google. Obecnie jedyne potrzebne operacje to przypisanie lokalizacji do obiektu photo i dodanie do pierwszej strony odnośnika prowadzącego do witryny Google Maps: // Kod do obsługi map Google placeLocation : function(obj) { var lat = parseFloat(obj.photo.location.latitude); var lon = parseFloat(obj.photo.location.longitude); this.photos[this.currentPhoto].setLocation(lon,lat); var ul = aaElem('maplinks'); var li = document.createElement('li'); var a = document.createElement('a'); var url = "http://maps.google.com/maps?f=q&hl=en&q=" + lat + "," + lon + "&ie=UTF8&z=15&om=0&iwloc=addr"; a.setAttribute('href',url); a.appendChild(document.createTextNode('Odnośnik do Google Maps wyświetlający dane miejsce')); li.appendChild(a); ul.appendChild(li); }

Funkcja Photo.createTagArray przetwarza oznaczenia z witryny Flickr na kolekcję tags danego zdjęcia. Umieszczając oznaczenia zdjęcia w pamięci podręcznej, można ograniczyć liczbę żądań zgłaszanych do usług zewnętrznych: // Dołączanie tablicy oznaczeń do zdjęcia createTagArray : function(obj) { var pic = this.photos[this.currentPhoto]; var tags = obj.photo.tags.tag; for (var i = 0; i < tags.length; i++) { if (tags[i].machine_tag != 1) { var tag = tags[i].raw; pic.tags[pic.tags.length] = tag; } } this.resetTags(); },

Metoda Photo.resetTags przetwarza oznaczenia i tworzy stronę Oznaczenia z witryny Flickr. Także w tym przypadku duża część kodu składa się z wywołań metod modelu DOM w celu utworzenia elementów strony: // Ustawia zakładkę z oznaczeniami bieżącego zdjęcia resetTags : function() { var pic = this.photos[this.currentPhoto]; aaElem('techpostname').style.visibility="hidden"; var tagArea = aaElem('flickrtags'); var ul = aaElem('tagUl'); // Usuwanie elementów if (ul) tagArea.removeChild(ul); if (pic.tags.length > 0) { ul = document.createElement('ul'); ul.id = 'tagUl'; // Dodawanie kolejnych oznaczeń for (var i = 0; i < pic.tags.length; i++) { var li = document.createElement('li');

Nowa wersja klientów

|

323

var a = document.createElement('a'); a.setAttribute('href', 'http://technorati.com/tag/' + pic.tags[i]); a.appendChild(document.createTextNode(pic.tags[i])); li.appendChild(a); aaManageEvent(li,'click',aaBindEventListener(this,this.getTechPosts)); ul.appendChild(li); } tagArea.appendChild(ul); } },

Kiedy użytkownik kliknie odnośnik z oznaczeniem z witryny Flickr, aplikacja wyświetli zakładkę Wpisy z witryny Technorati. Do strony z oznaczeniami z witryny Flickr dodawany jest także komunikat „… w toku”, a jego wyświetlaniem zarządza metoda Photo.getTechPosts. Ten komunikat to wskazówka, że aplikacja przetwarza żądanie. Kiedy żądanie skierowane do witryny Technorati zwróci wyniki, aplikacja usunie wspomniany komunikat ze strony z oznaczeniami z witryny Flickr i wyświetli zakładkę Wpisy z witryny Technorati zawierającą pobrane wyniki. W tym przypadku żądanie jest zgłaszane za pomocą obiektu XMLHttpRequest, a nie punktu końcowego, głównie dlatego, że chciałam połączyć obie te techniki. Inny powód to chęć zachowania większej prywatności lokalnej usługi sieciowej: // Pobieranie wpisów z witryny Technorati pasujących do oznaczenia z witryny Flickr getTechPosts : function(evnt) { var tagarea = aaElem('flickrtags'); var p = document.createElement('p'); p.setAttribute('id','working'); p.appendChild(document.createTextNode('...w toku')); tagarea.appendChild(p); evnt = evnt ? evnt : window.event; aaCancelEvent(evnt); var target = evnt.target ? evnt.target : evnt.srcElement; var tag = target.childNodes[0].nodeValue; // Czyszczenie obszaru z wpisami z witryny Technorati var content = aaElem('techpostcontent'); if (content) aaElem('techposts').removeChild(content); // Tworzenie obiektu XHR, przygotowywanie i zgłaszanie żądania if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest(); var qry = "tag=" + tag; var url = 'technorati.php?' + qry; xmlhttp.open('GET', url, true); xmlhttp.onreadystatechange = this.processTechPosts; xmlhttp.send(null); }

Ostatnia metoda obiektu Photo to Photo.processTechPosts, która przetwarza dane XML pobrane z witryny Technorati i tworzy na ich podstawie odnośniki do wpisów widoczne na trzeciej stronie. Także tu większość kodu to metody elementów modelu DOM. Ten przykład pozwala przynajmniej dobrze zapoznać się z technikami modelu DOM: // Przetwarzanie wpisów z witryny Technorati processTechPosts : function() { if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { var working = aaElem('working'); working.parentNode.removeChild(working);

324 |

Rozdział 9. Witryny typu mashup

var items = xmlhttp.responseXML.getElementsByTagName('item'); var content = document.createElement('div'); content.id = 'techpostcontent'; // Dołączanie odnośników do wpisów if (items.length > 0) { for (var i = 0; i < items.length; i++) { var name = ""; if (items[i].getElementsByTagName('name')[0].firstChild) name = items[i].getElementsByTagName('name')[0].firstChild.nodeValue; var title = "Brak tytułu"; if (items[i].getElementsByTagName('title')[0].firstChild) title = items[i].getElementsByTagName('title')[0].firstChild. nodeValue; var link = ""; if (items[i].getElementsByTagName('permalink')[0].firstChild) link = items[i].getElementsByTagName('permalink')[0].firstChild. nodeValue; var a = document.createElement('a'); a.appendChild(document.createTextNode(title)); a.setAttribute('href',link); var p = document.createElement('p'); p.appendChild(a); p.appendChild(document.createTextNode(' autor: ' + name)); content.appendChild(p); } } else { content.appendChild(document.createTextNode('Brak wpisów na witrynie Technorati')); } aaElem('techposts').appendChild(content); aaElem('techpostname').style.visibility="visible"; } }

Rysunek 9.7 przedstawia ostatnią stronę z kilkoma wpisami z witryny Technorati. Bez usług Google Maps aplikacja działa znacznie wydajniej przy nieznacznej utracie funkcjonalności, ponieważ jeden z odnośników prowadzi do strony głównej Google Maps. Ostatnią zmianą potrzebną, aby aplikacja była w pełni dostępna, jest dodanie dobrej obsługi klawiatury i umożliwienie dostępu przy jej użyciu do różnych zakładek, a także poszczególnych odnośników na stronach. Nawigację po zakładkach należy wbudować w bibliotekę Tabs.

Podsumowanie informacji o witrynach mashup Tworzenie witryn mashup przypomina budowanie dowolnej aplikacji ajaksowej (lub aplikacji każdego innego typu) pod tym względem, że pisanie kodu nie jest jedynym zadaniem (choć ilość potrzebnego kodu może być w tym przypadku dość duża). Jednym z największych zagrożeń związanych z aplikacjami ajaksowymi jest niechęć do porzucenia wyjściowego pomysłu, kiedy okaże się zbyt trudny w implementacji lub niepraktyczny. Panuje mocne przekonanie, że programista potrafi znaleźć drogę do rozwiązania każdego problemu. Może to i prawda, jednak niekoniecznie oznacza to, że aplikacja będzie dobra po włożeniu w nią dużej ilości pracy.

Podsumowanie informacji o witrynach mashup

|

325

Rysunek 9.7. Ostatnia strona klienta ajaksowego witryny mashup korzystającej z usług: Flickr, Technorati i Google

Następne zagrożenie związane jest z próbą zarządzania dostępnością i wszystkimi efektami Ajaksa na jednej stronie lub grupie stron. Większość efektów Ajaksa jest zgodna ze zwykłą funkcjonalnością stron. Jednak w przypadku większych witryn lub aplikacji, w których większość strony jest tworzona i zarządzana za pomocą kodu JavaScript, zwykle lepiej jest przygotować odrębną wersję bez skryptów. Po zastosowaniu takiego podejścia może się okazać, że potrzeba było tylko jednej trzeciej wyjściowego kodu, a utworzona aplikacja jest łatwiejsza do zarządzania. Mam nadzieję, że ten rozdział pokazał, jak ciekawe jest łączenie różnych usług w jednej witrynie mashup. Przy przeglądaniu publicznie dostępnych usług, takich jak te wymienione w witrynach http://programmableweb.com i http://mashup.com, jedyna trudność polega na wyborze usług, które warto wypróbować jako pierwsze, oraz określeniu, ile z nich można połączyć, zanim ktoś nie zabierze programiście klawiatury i nie każe mu się opanować.

326

|

Rozdział 9. Witryny typu mashup

ROZDZIAŁ 10.

Skalowanie, infrastruktura i tworzenie witryn od podstaw

Pod niektórymi względami Ajax to po prostu następna technika tworzenia aplikacji sieciowych. Użytkownicy wchodzą w interakcje, żądają danych i wywołują usługi, a aplikacje tworzą lub modyfikują strony internetowe. Ajax jest zależny od tych samych czynników co inne aplikacje — od dobrze zaprojektowanej bazy danych, bezpiecznych usług sieciowych, wydajnych transakcji i udostępniania zgodnych ze standardami oraz dostępnych stron, które działają w większości przeglądarek i innych agentów. Jednak Ajax stawia przed programistami nowe wyzwania, zwłaszcza dotyczące warunku „działania w większości przeglądarek”. Między przeglądarkami a serwerami występuje związek partnerski, który zastosowanie Ajaksa narusza. W tradycyjnym internecie przeglądarki pobierają strony, które już zawierają dane, a przy ponownym dostępie do strony można ją pobrać z pamięci podręcznej, ponieważ dane nie przedawniają się. W aplikacjach działających po stronie serwera nie ma ograniczeń związanych z miejscem wywołania usługi lub pobierania danych. Dane wbudowane w strony internetowe są dostępne dla programów odczytujących tekst z ekranu oraz użytkowników, którzy wybiorą opcję Pokaż kod źródłowy. Nie jest istotne, czy obsługa skryptów jest włączona. Po dodaniu Ajaksa można zapomnieć o wszystkich wymienionych cechach. Mimo to — co, mam nadzieje, ilustruje niniejsza książka — poprawnie używany Ajax może poprawić komfort pracy czytelników stron, klientów i użytkowników aplikacji. Trzeba tylko pamiętać, że tworzenie stron internetowych i aplikacji sieciowych jest wtedy dużo trudniejsze. Jednak korzyści mogą być warte zachodu. W tym rozdziale ponownie omawiam wymagania infrastrukturalne aplikacji ajaksowych, a także zagadnienia, które trzeba uwzględnić, projektując witrynę lub aplikację od podstaw. Obejmuje to wybór języka używanego po stronie serwera oraz decyzję o stosowaniu platformy, a nawet kilku. Wszystkie przykłady do tego miejsca opierały się na podejściu, według którego Ajaksa integrowano z istniejącą aplikacją lub platformą. Podstawowym językiem stosowanym w przykładach był PHP, ponieważ obecnie jest to najbardziej popularny język używany po stronie serwera. Wymaga także najmniej konfigurowania i jest udostępniany przez większość dostawców usług

327

hostingowych. Jednak przedstawione przykłady mogą współdziałać równie dobrze z usługami sieciowymi napisanymi w Javie, Perlu czy dowolnym innym języku do tworzenia usług sieciowych. Żaden z przykładów nie jest zależny od języka czy środowiska używanego do budowy usług sieciowych. Żaden z nich nie jest też zależny od jakiejkolwiek nowej platformy. W tym rozdziale wspomniane wcześniej ograniczenia nie są istotne. Daje to okazję do poznania zagadnień związanych z tworzeniem nowej witryny od podstaw. Pozwala też przyjrzeć się nowym językom używanym po stronie serwera i nowym platformom. W praktyce wybór platformy może determinować używany język. Nie chcę przez to powiedzieć, że trzeba pozbyć się wszystkich elementów starej witryny, aby zastosować nowe platformy. Można wyodrębnić fragmenty witryny internetowej i przekształcić je zgodnie z nową platformą, pozostawiając pozostałą część witryny bez zmian. Jedyna sytuacja, w której to podejście nie działa, wiąże się z używaniem platformy serwerowej wymagającej określonego systemu operacyjnego lub środowiska niezgodnego z istniejącą aplikacją. Jednak zdarza się to coraz rzadziej. Niezależnie od tego, czy programista rozpoczyna tworzenie witryny od podstaw czy rozszerza istniejącą aplikację, musi podjąć pewne decyzje. Czy użyć platformy, czy pisać kod od początku? Czy po utworzeniu usługi sieciowej udostępnić ją publicznie, czy nie? Które rozwiązanie jest lepsze: zastosowanie bibliotek zewnętrznych czy utworzenie własnych? W jak dużym stopniu należy zintegrować Ajaksa z witryną? Jeśli programista chce użyć platformy, którą z nich powinien wybrać i dlaczego? A niektórzy pewnie sądzili, że w przypadku Ajaksa jedynym zmartwieniem jest pisanie kodu.

Platformy — ścisłe czy luźne powiązanie W rozdziale 1. opisałam ścisłe i luźne powiązanie. Jest to istotne zagadnienie, jeśli programista tworzy witrynę od podstaw. Jest ono na tyle ważne, że warto zastanowić się nad nim raz jeszcze. Wszystkie przykłady w tej książce opierają się na założeniu, że efekty Ajaksa są integrowane z istniejącą aplikacją. Stosowane jest tu podejście „luźnego powiązania”, ponieważ wszystkie efekty są utworzone w taki sposób, że kod działający po stronie klienta nie zależy od kodu używanego po stronie serwera i na odwrót. Jeśli żądanie Ajaksa kierowane do usługi ma przyjmować dane w określonym formacie, nie jest istotne, w jaki sposób dane są zwracane lub jaki język do tego służy. Z drugiej strony, jeśli usługa sieciowa jest całkowicie niezależna od klienta, nie jest ważne, czy aplikacja zgłaszająca żądanie to przeglądarka internetowa czy inna aplikacja działająca po stronie serwera. Aplikacje serwerowe są zaprojektowane tak, aby można było z nich korzystać za pomocą różnych klientów, nie tylko tych opartych na Ajaksie. Klienty ajaksowe korzystają z usług sieciowych utworzonych w różny sposób, który nie ma w tym przypadku znaczenia. Jedyne „porozumienie” potrzebne między Ajaksem a usługą sieciową dotyczy formatu żądania oraz struktury zwracanych danych. Z kolei ściśle powiązane aplikacje wymagają, aby klient i serwer były splecione ze sobą. Zwykle duża część interfejsu klienta jest generowana przez wywołania kierowane na serwer. Zmiany po stronie serwera są natychmiast odzwierciedlane po stronie klienta, a modyfikacje klienta wymagają zmian po stronie serwera. 328

|

Rozdział 10. Skalowanie, infrastruktura i tworzenie witryn od podstaw

Takie ścisłe powiązanie serwera i klienta ma pewne zalety i wady. Korzystne jest to, że programiści używający Javy, Ruby czy innego języka nie muszą się uczyć języka JavaScript czy modelu DOM, aby móc tworzyć aplikacje ajaksowe. Ponadto komponenty generowane po stronie serwera można dostosować pod kątem aplikacji serwerowej, co pozwala poprawić wydajność rozwiązania. Kod bazowy może być też łatwiejszy do zarządzania, jeśli na etapie rozwoju nie wymaga ścisłego rozdziału na część kliencką i serwerową. W wielu platformach, w których występuje ścisłe powiązanie między klientem a serwerem, łatwiej jest także utworzyć i uruchomić aplikację. Zamiast pisać kod usługi sieciowej, a następnie kod JavaScript klienta, wystarczy napisać kilka wierszy kodu w aplikacji serwerowej, która wygeneruje komponenty działające po stronie serwera i klienta. Zadanie, które mogłoby wymagać całych dni pracy, może zająć tylko kilka godzin. Wady polegają na tym, że wygenerowany kod może być mniej wydajny od kodu napisanego samodzielnie. Ponadto diagnozowanie kodu w celu pełnego zrozumienia operacji zachodzących między klientem a serwerem może się okazać dużo trudniejsze. Wraz z pojawianiem się nowych przeglądarek wygenerowany kod nie będzie rozwijany pod kątem zmian i rozszerzeń, a aplikacja stanie się przestarzała. Które podejście wybrać? Nie ma zestawu reguł, który da ostateczną odpowiedź na to pytanie. Jeśli większość aplikacji danego programisty opiera się na języku Java, prawdopodobnie występują w nich już pewne powiązania, a z uwagi na dostępne biblioteki i infrastrukturę ścisłe powiązanie może okazać się dobrym rozwiązaniem. Jednak także niektóre infrastruktury oparte na PHP wymagają ścisłego powiązania. Ścisłe i luźne powiązanie to uniwersalne zagadnienie, które nie jest specyficzne dla konkretnego języka. Mimo to jest pewien język, w którym ścisłe powiązanie między serwerem a klientem w aplikacjach ajaksowych ma sens — język Ruby i platforma Ruby on Rails. Jest to środowisko, które rozwinęło się wokół Ajaksa. Stanowi ono przykład wysokiej integracji funkcjonalności używanej po stronie serwera z jedną z popularnych bibliotek Ajaksa (Prototype), a jest przy tym na tyle nowe, że przejście z luźnego do ścisłego powiązania nie musi wymagać znacznych zmian. Wreszcie w podjęciu decyzji projektowej może pomóc specyficzna platforma lub biblioteka. Jeśli programista chce koniecznie użyć pakietu Web Toolkit firmy Google, będzie korzystał z języka Java i stosował ścisłe powiązanie. Podejmując omawianą decyzję, warto pamiętać o pewnej kwestii: zmiana typu powiązania może wymagać dużej ilości pracy. Należy poświęcić nieco czasu na rozważenie możliwości przed podjęciem decyzji.

Usługi sieciowe — zasoby i bezpieczeństwo Jeśli programista nie chce używać wyłącznie usług utworzonych przez inne osoby, to w czasie tworzenia aplikacji ajaksowych musi przygotować własne usługi. W trakcie ich projektowania trzeba podjąć decyzję, czy mają udostępniać publiczne interfejsy, a jeśli tak, co zrobić, jeśli dana usługa nagle stanie się popularna. Z kolei jeśli usługi mają być prywatne, jakie zabezpieczenia mają zapewniać tę prywatność? Na kilka godzin przed udostępnieniem przez del.icio.us „oznaczeniomierza” — widgeta wyświetlającego oznaczenia powiązane ze stroną — rozgorzała dyskusja dotycząca punktu końcowego JSON. Padały komentarze typu: „Dlaczego nie udostępnić interfejsu API, który będzie Usługi sieciowe — zasoby i bezpieczeństwo

|

329

zwracał dane XML lub obsługiwał inne usługi?”. Wkrótce po udostępnieniu symboli stało się oczywiste, że punkt końcowy JSON służący do ich obsługi był dostępny, jednak do tego czasu zdążyły wzbudzić takie zainteresowanie, że właściciele del.icio.us (Yahoo!) pozostawili punkt końcowy „otwarty”. Jest to doskonały przykład zagrożeń związanych z aplikacjami ajaksowymi — jeśli dane są łatwo dostępne dla danej aplikacji, także inne osoby nie powinny mieć problemów z ich wykorzystaniem. Programista może wtedy zadać pytanie: „Czy chcę publicznie udostępniać interfejs API lub punkty końcowe usługi?”. Jeśli usługa stanie się popularna, może wystąpić znaczny wzrost kosztów związanych z przesyłem danych i utrzymaniem serwera, jednak warto też pomyśleć o bezpłatnym rozgłosie, nie wspominając o dobrej opinii, jaką można zdobyć. W przypadku gdy usługa zyska na popularności i wystąpią problemy z obciążeniem łączy oraz zasobami, można zmniejszyć koszty, używając niezależnych usług, na przykład Web Services Amazona, do przechowywania lub uruchamiania aplikacji albo zarządzania przesyłaniem w niej komunikatów. Zaletą jest w tym przypadku to, że firmy takie jak Amazon mają wiele lat doświadczenia w radzeniu sobie z równoważeniem obciążenia, żądań oraz w zarządzaniu zabezpieczeniami, a dostępna przepustowość łączy oraz zasoby procesora zapewniają prawidłowe działanie aplikacji nawet w przypadku nagłego wzrostu zainteresowania nią. Amazon Web Services (AWS) to komercyjna usługa. Informacje o niej można znaleźć na stronie http://aws.amazon.com.

Jeśli aplikacja będzie powiązana z niezależną usługą, warto przygotować warstwę abstrakcji między nimi, dzięki czemu można w przyszłości, kiedy zajdzie taka potrzeba, zrezygnować z zewnętrznych zależności. Oczywiście, powoduje to jeszcze większy wzrost złożoności, jednak może się to okazać warte zachodu. Można też zastanowić się nad rozwiązaniem o otwartym dostępie do kodu źródłowego, co czasem pozwala umieścić serwerową aplikację sieciową na serwerze lustrzanym, dzięki czemu serwer programisty nie zostanie przeciążony. Nawet w przypadku aplikacji komercyjnych rozpraszanie zasobów nie musi oznaczać utraty kontroli nad kodem chronionym prawem autorskim czy udostępniania go. Jeśli programista nie chce udostępniać usług publicznie, powinien zachować ostrożność, stosując skrypty dynamiczne, funkcje wywoływane zwrotnie, punkty końcowe JSON i usługi, które odpowiadają na żądania GET. Żaden z tych mechanizmów nie będzie działał za zaporą — żaden też nie jest przeznaczony do stosowania w systemach zamkniętych. Można też zastosować technikę używaną przez Google’a i ograniczyć możliwość kierowania żądania do usług na podstawie adresu IP, serwera czy pliku, choć, niestety, te zabezpieczenia można obejść, dlatego należy je traktować wyłącznie jako pierwszą linię obrony. Jeśli usługa ma być bezpieczna, warto rozważyć zastosowanie protokołu HTTPS do zarządzania komunikacją oraz szyfrowania i podpisów cyfrowych do ochrony danych. Można też przesyłać nazwę użytkownika i hasło jako część żądania wysyłanego przez obiekt XHR, jednak niezależnie od tego należy upewnić się, że nie ma otwartych punktów końcowych.

330

|

Rozdział 10. Skalowanie, infrastruktura i tworzenie witryn od podstaw

Biblioteki Ajaksa — własne czy zewnętrzne? Większość przykładów w tej książce nie korzysta z bibliotek innych niż Adding Ajax (addingajax.js), rozwijanej w poszczególnych rozdziałach. Wiąże się z tym następna ważna decyzja przy rozpoczynaniu stosowania Ajaksa: czy utworzyć własną bibliotekę, czy użyć jednej lub kilku z bezpłatnych bibliotek dostępnych w internecie? Niektóre biblioteki, na przykład Prototype, udostępniają podstawową funkcjonalność i są dość małe. Jednak inne mogą być dość rozbudowane, a jeśli programista nie jest zdecydowany na ich integrację z aplikacją, koszty ich przesyłania są nieusprawiedliwione. Można łączyć biblioteki, pod warunkiem że używają jakiegoś rodzaju przestrzeni nazw do zapobiegania konfliktom, a także obsługują zdarzenia w taki sposób, że nie przeszkadzają sobie nawzajem. W przypadku własnej biblioteki można użyć minimalnego, podstawowego narzędzia, takiego jak addingajax.js, i dodawać do niego własne komponenty. Jednym z takich dodatków są upraszczające pracę mechanizmy do dodawania elementów modelu DOM i uzyskiwania dostępu do nich, co pozwala zmniejszyć ilość kodu. Poniższy kod tworzy dwuelementową listę nieuporządkowaną, a każdy element zawiera znacznik anchor: // Tworzy kontener na listę nieuporządkowaną var ul = document.createElement('ul'); // Tworzy dwa elementy anchor var a1 = document.createElement('a'); var a2 = document.createElement('a'); a1.setAttribute('href','http://adresurl.pl/'); var txt1 = document.createElement('jakiś tekst'); a1.appendChild(txt1); a2.setAttribute('href','http://innyadresurl.pl/'); var txt1 = document.createElement('inny tekst'); a2.appendChild(txt2); // Tworzy elementy listy i dołącza odnośniki var li1 = document.createElement('li'); li1.appendChild(a1); var li2 = document.createElement('li'); li2.appendChild(a2); // Dołączanie do listy ul ul.appendChild(li1); ul.appendChild(li2);

Model DOM wymaga dużej ilości kodu, a ten przykład nie jest jeszcze zbyt złożony. Umieszczenie części kodu w bibliotece nie tylko pozwala zmniejszyć ilość potrzebnego kodu, ale także poprawia czytelność aplikacji i ułatwia zarządzanie nią. Można też wyeliminować błędy w aplikacji, umieszczając w bibliotekach często używane grupy elementów, których, po przetestowaniu, można używać bez konieczności ciągłego pisania kodu od nowa: var a[0] = aaCreateAnchor(link,text); var a[1] = aaCreateAnchor(link,text); // Tworzy listę nieuporządkowaną przez przekazanie tablicy jej elementów var ul = aaCreateList(listype, a);

Jeśli programista zdecyduje się użyć bibliotek zewnętrznych, przed rozpoczęciem korzystania z nich powinien przejrzeć cały ich kod i upewnić się, że rozumie, jak działają. Trudno mi Biblioteki Ajaksa — własne czy zewnętrzne?

|

331

wyrazić to wystarczająco dobitnie: jeśli programista nie wie, jakie operacje zachodzą w danej bibliotece, nie będzie umiał określić jej wpływu na inne biblioteki lub własny kod, co może prowadzić do dziwnych efektów ubocznych lub trudnych w wykryciu błędów. To zagadnienie nie jest tak ważne w przypadku korzystania z niezależnych interfejsów API, takich jak Google Maps. Jednak nawet w przypadku tego API można przesyłać strony tylko w formacie HTML, a nie XHTML. Jeśli biblioteka jest dostępna tylko w sformatowanej, zaciemnionej wersji albo jest zbyt duża, aby można było przeprowadzić jej analizę, a trzeba zintegrować ją z własnym kodem lub innymi bibliotekami, oznacza to, że jest zbyt niezrozumiała lub rozbudowana, by warto było jej używać.

Projektowanie aplikacji ajaksowych od podstaw Pod pewnymi względami dodawanie Ajaksa do istniejącej witryny jest dużo łatwiejsze niż rozwijanie aplikacji opartej na Ajaksie od podstaw. Przede wszystkim gotowa jest już wtedy wersja bez skryptów, a programisty nie będzie kusić, aby pominąć ten kluczowy element. Po wykonaniu wstępnych planów projektowych, co opisuje rozdział 1., a także po starannym przemyśleniu, gdzie i dlaczego dodać Ajaksa, pozostają do rozwiązania zagadnienia związane wyłącznie z procesem programowania.

Umieszczanie funkcjonalności w modułach Przyjmuje się, że kod JavaScript należy umieszczać w nadających się do wielokrotnego wykorzystania bibliotekach, jednak mało kto zastanawia się nad umieszczaniem w takich jednostkach kodu CSS czy HTML, nie wspominając już o kodzie uruchamianym po stronie serwera. Za dużą część takich operacji odpowiadają platformy, jednak programista powinien wykroczyć poza nie i określić, jak dużą część funkcjonalności — na przykład kodu CSS, HTML, platformy używanej po stronie serwera, a także skryptów i kodu Ajaksa — można umieścić w kompletnych jednostkach. Oczywiście, należy tu kierować się zdrowym rozsądkiem, ponieważ wysiłki zmierzające do wykrywania wszędzie wspólnego mianownika mogą doprowadzić do tego, że zarządzanie witryną będzie niemożliwe. Na przykład zamiast umieszczać kod CSS całej witryny w jednym pliku, można podzielić go na cztery odrębne arkusze powiązane z poszczególnymi efektami, a następnie wczytywać każdy z tych plików CSS tylko wtedy, kiedy na stronie potrzebny jest dany efekt. Oczywiście, im więcej takich plików, tym więcej żądań HTTP trzeba zgłosić, dlatego inne podejście polega na ręcznym złączaniu kodu CSS wszystkich efektów w jednym pliku, odpowiednim dla żądanej strony. Można też zautomatyzować ten proces w sposób podobny do tego używanego w bibliotece MochiKit. Wybrany efekt wyznacza, które biblioteki są potrzebne, a następnie mechanizm generuje odpowiednią bibliotekę kodu JavaScript. MochiKit potrafi nawet udostępniać wysoce skompresowane biblioteki, a także ich przejrzyste i czytelne wersje. Im silniejszy podział aplikacji na jednostki funkcjonalne, w tym większym stopniu można je powtórnie wykorzystać i tym prostsze jest zarządzanie kodem. Łatwiej jest też wtedy testować zmiany.

332

|

Rozdział 10. Skalowanie, infrastruktura i tworzenie witryn od podstaw

Zarządzanie i testy Często używam rozszerzenia Firebug, jednak jest to bardziej narzędzie diagnostyczne, przydatne w czasie tworzenia aplikacji, niż mechanizm do przeprowadzania testów. Dostępne są narzędzia i techniki testowania aplikacji inne niż dodanie napisu „beta” z dużą, pogrubioną gwiazdką i liczenie na to, że wystarczająca liczba osób będzie miała ochotę sprawdzić dany program. Niezależnie od używanego narzędzia włączenie obecnych lub potencjalnych użytkowników w proces testowania zawsze powinno być częścią planu. Nieważne, jak dobry jest dany test — naprawdę naruszyć aplikację potrafią tylko prawdziwi użytkownicy.

W witrynie projektu OWASP (ang. Open Web Application Security Project; http://www.owasp.org/ index.php/Main_Page) znajduje się artykuł dotyczący testowania Ajaksa. Można go znaleźć pod adresem http://www.owasp.org/index.php/Testing_for_AJAX:_introduction. Jakie są zagrożenia, które trzeba uwzględnić? Wstrzykiwanie kodu SQL, skrypty przesyłane między witrynami, wyciekanie pamięci (szczególnie narażona jest na to przeglądarka Internet Explorer), a nawet mosty ajaksowe, które polegają na używaniu jednej usługi sieciowej jako pośrednika dla całkowicie niezależnych usług sieciowych. Inaczej mówiąc, Yahoo! może udostępnić punkt końcowy JSON, który umożliwi korzystanie z usług sieciowych firmy Google. W porządku, ale czy można zaufać danym przechodzącym przez ten most? Jeśli chodzi o testy wydajności, Dan Wahlin opublikował listę narzędzi testowych i diagnostycznych. Znajduje się ona na stronie http://weblogs.asp.net/dwahlin/archive/2007/02/16/list-of-ajax-automated-testing-and-debugging-tools.aspx. Jest to prawdopodobnie najbardziej kompletna lista dotycząca testowania aplikacji ajaksowych. Do zautomatyzowanych narzędzi testowych współdziałających z Ajaksem należą między innymi: JsUnit (http://www.jsunit.net), HttpUnit (http://httpunit.sourceforge.net) i Selenium (http:// www.openqa.org/selenium). Selenium to rozszerzenie przeglądarki Firefox, które działa jako rejestrator i umożliwia zapisywanie przypadków testowych, na przykład w języku Ruby. Można je także rozbudować o warunki wait for służące do testowania aplikacji ajaksowych. Pewną zaletą tego narzędzia (i innych) jest to, że pokazują, jak ważne jest wbudowanie obsługi klawiatury w efekty Ajaksa i stosowanie odnośników dla elementów, które można kliknąć, ponieważ mechanizmy testowe zapisują informacje o tych funkcjach. Następne narzędzie to Fiddler, dostępne na stronie http://www.fiddlertool.com/fiddler, które rejestruje cały przepływ danych HTTP między danym komputerem a internetem. Można wstrzymać proces przesyłu, a następnie „pomajstrować” przy wysyłanych i odbieranych danych. Jest to doskonały pośrednik, który umożliwia przetestowanie wielu przypadków bez konieczności modyfikowania kodu. Jakie ma ograniczenia? Działa tylko w systemie Windows. Witryna Ajax Patterns, wspomniana we wcześniejszej części książki, także zawiera informacje o testach oraz listę narzędzi (http://ajaxpatterns.org/System_Test). Zachęcam do poszukania narzędzi zaprojektowanych specjalnie pod kątem używanego środowiska i wypróbowania ich wszystkich, a następnie sprawdzenia kilku mechanizmów nieograniczonych do specyficznego środowiska. Do testów zwykle należy użyć co najmniej dwóch lub trzech narzędzi.

Projektowanie aplikacji ajaksowych od podstaw

|

333

Wyciekanie pamięci, pamięć lokalna i stabilność Oprócz narzędzi testowych, które mogą pomóc w rozwiązaniu problemów z kodem, warto pamiętać o takich zagadnieniach, jak wyciekanie pamięci, wykorzystanie pamięci, wykorzystanie poszczególnych procesorów, dostęp do bazy danych i czas odpowiedzi serwera. Wyciekanie pamięci w przeglądarkach Internet Explorer można wykryć za pomocą narzędzia Drip/IE Sieve (http://sourceforge.net/projects/ieleak), a większość baz danych ma narzędzia do podglądu działania, a także mechanizmy do pomiaru wydajności. To samo dotyczy aplikacji sieciowych, a nawet jeśli użyto w nich Ajaksa, nadal zgłaszają żądania internetowe. Jednym ze sposobów na poprawę wydajności aplikacji ajaksowych jest zastosowanie pamięci lokalnej. Niektóre służące do tego techniki są specyficzne dla platformy, na przykład pamięć modelu DOM w przeglądarce Firefox czy mechanizm userData w Internet Explorerze. Jednak należy ich unikać, podobnie jak zbyt dużej zależności od obiektów Flash Local Shared Object. Niedoceniane pliki cookie na pozór nie mają dużej pojemności, ale zaskakujące jest, jak wiele informacji można w nich zapisać przy ograniczeniu pamięci podręcznej i trwałych danych do minimum. Więcej o obiektach Shared Data Object firmy Adobe można przeczytać na stronie http://www.adobe.com/support/flash/action_scripts/local_shared_object.

Redukowanie efektów do ich najprostszej postaci Najlepsze aplikacje to nie te najbardziej wymyślne, tylko najbardziej użyteczne. Wiem, ile pracy wymaga utworzenie programu graficznego działającego w przeglądarce, ale uwielbiam aplikacje umożliwiające wpisywanie, modyfikowanie i usuwanie informacji bezpośrednio na stronie. Internetowe aplikacje do rozmów internetowych robią wrażenie, jednak zamieniłabym je wszystkie na naprawdę dobrą prezentację lub efektowny pokaz slajdów z obsługą Ajaksa. W trakcie tworzenia projektu nie należy starać się zrobić wrażenia na kolegach programistach, ale oczarować użytkowników. Na przykład jedno kliknięcie w celu dodania produktu do koszyka i natychmiastowego sprawdzenia dostępności towaru jest lepsze niż konieczność kliknięcia tego elementu i przeciągnięcia go do obszaru reprezentującego koszyk. Powtórzę jeszcze raz: nie przepadam za techniką przeciągania, choć muszę przyznać, że wraz z rozwojem przyszłych komputerów i innych narzędzi używanie palca jako instrumentu stanie się standardem. W urządzeniu iPhone firmy Apple palec służy do wykonywania wszystkich operacji, włączając w to przeciąganie w celu zmiany wielkości elementów. Pozostawiając aspekt dostępności techniki przeciągania na boku, jest to niewygodna metoda dla użytkowników laptopów z panelami dotykowymi, a także urządzeń trzymanych w ręku, takich jak pilot firmy Firefly. Przeciąganie wymaga od użytkownika kliknięcia elementu, przeniesienia go w obrębie strony i podniesienia palca (lub zwolnienia przycisku myszy) tylko w celu wykonania operacji, którą można obsłużyć za pomocą jednego kliknięcia.

334 |

Rozdział 10. Skalowanie, infrastruktura i tworzenie witryn od podstaw

To pokazuje, że najlepsze aplikacje ajaksowe to te zgodne z intuicyjnymi działaniami użytkowników, maksymalnie upraszczające operacje, co ułatwia pracę. Przeciąganie elementu i upuszczanie go do koszyka może wyglądać ciekawie, jednak użytkownikom łatwiej jest po prostu kliknąć przycisk Kup.

Krytyczne obszary witryny Choć już wielokrotnie powtarzałam to na kartach tej książki i nie chcę nudzić, przypomnę jeszcze raz, że kluczowe funkcje witryny oraz najważniejsze obszary i dane muszą być dostępne także bez stosowania nawigacji lub technik opartych na Ajaksie. Nie jest to tylko kwestia dobrego projektu. Takie ograniczenia mogą zostać narzucone przez rząd, a ich nieprzestrzeganie naraża autorów na pozwy za lekceważenie użytkowników mających specjalne potrzeby. Ponadto, ponieważ bezpieczeństwo wciąż pozostaje problemem, użytkownicy często wyłączają skrypty. Można założyć, że obsługa skryptów jest wyłączona, a autor musi zdobyć zaufanie użytkowników, zanim ją włączą. Ponadto strony powinny wyglądać dobrze niezależnie od tego, czy obsługa skryptów jest włączona, czy nie. Osoby odwiedzające witrynę lub użytkownicy aplikacji nie powinni czuć się, jakby byli nieproszonymi gośćmi wpuszczanymi tylnymi drzwiami. Aplikacja powinna mówić: „Cieszę się, że tu jesteście. Jeśli możecie włączyć obsługę skryptów, zróbcie to. Jeśli nie, nie ma problemu”.

Rozwaga w tworzeniu witryn mashup Niektórzy użytkownicy otwierają strony za pomocą modemu, a nawet w przypadku łączy szerokopasmowych zawsze należy zastanowić się nad wykorzystaniem zasobów. Może ich zabraknąć na przykład w sytuacji, kiedy programista doda do witryny zbyt wiele usług zewnętrznych, co powoduje duże opóźnienia przy pobieraniu materiałów z niejednorodnych źródeł. Czasem po otwarciu strony internetowej obserwuję pasek stanu przeglądarki, podczas gdy aplikacja pobiera dane, rysunki i usługi z 20 różnych witryn. Obserwuję pasek, ponieważ nie mogę nic zrobić na stronie do czasu wczytania wszystkich elementów.

Różnorodność urządzeń To zagadnienie dotyczy w większym stopniu projektowania stron niż Ajaksa, ale trzeba pamiętać o tym, że obecnie strony są wyświetlane w bardzo różnych urządzeniach: telefonach, palmtopach, telewizorach i sama nie wiem w czym jeszcze. Zwykle te urządzenia albo nie obsługują języka JavaScript, albo jego obsługa jest specyficzna dla przeglądarki wbudowanej w dane urządzenie. Największy problem z urządzeniami tego typu występuje wtedy, kiedy programista na stałe zapisze w kodzie rozmiar elementów (jest to konieczne w wielu efektach) lub wymagane są operacje określonego typu, na przykład wspomniane już przeciąganie. Można jednak doprowadzić się do szaleństwa, martwiąc się zbytnio wszystkimi urządzeniami, które służą do przeglądania stron. Zgodnie z dobrą zasadą należy udostępnić wersję strony bez skryptów oraz arkusze stylów przeznaczone dla urządzeń przenośnych oraz do drukowania, jak również strony z ograniczoną liczbą rysunków, a wszystko powinno działać poprawnie. Trzeba jeszcze odpukać w niemalowane i nie zapominać o testach. Projektowanie aplikacji ajaksowych od podstaw

|

335

Ograniczanie „odjazdowych” efektów „Odjazdowe” efekty są ciekawe i początkowo sprawiają, że strona wygląda na bardziej aktywną i interesującą. Zwykle jednak im bardziej „odjazdowy” jest efekt, tym więcej zasobów wymaga i tym trudniej nim zarządzać, nie wspominając o ograniczeniach związanych ze środowiskiem jego działania. Można utworzyć całą witrynę opartą na Ajaksie, a inni programiści używający tej technologii będą uważać, że efekt jest niesamowity, jednak przestaje to mieć znaczenie z chwilą, kiedy użytkownik wyłączy obsługę skryptów, używając rozszerzenia NoScript przeglądarki Firefox. Na początku 2007 roku firma Wordpress.com, zajmująca się obsługą blogów, uruchomiła mechanizm ajaksowy o nazwie Snap we wszystkich zarządzanych przez nią witrynach. Powodował on, że po umieszczeniu kursora myszy nad odnośnikiem, w malutkim oknie pojawiała się miniatura witryny, do której prowadził dany odnośnik. Dołączyłam do grona osób, które nie znosiły tego efektu — rozpraszał, zakrywał inne materiały, utrudniał kliknięcie odnośnika i powodował zmianę położenia strony. Efekt był „odjazdowy” i niektórym osobom się podobał, jednak, co dziwne, większość projektantów stron internetowych nie cierpiała go. „Odjazdowe” efekty nie powinny przeszkadzać użytkownikom. Jaskrawe fragmenty grafiki podążające za kursorem, pływające bąbelki, wyskakujące reklamy, które poruszają się wraz z przewijaniem strony lub zasłaniają czytany artykuł, czy przeciąganie produktów do koszyka — wszystkie te techniki, choć na pozór ciekawe, przeszkadzają w dotarciu do prawdziwej zawartości witryny. Ajax i efekty ajaksowe mają usprawniać witrynę, należy je dodawać w jakimś celu, aby ułatwić używanie aplikacji, i nie powinny odciągać uwagi od ważnych elementów strony. Automatyczne uzupełnianie to doskonała technika, jednak nie przy obsłudze zbiorów danych obejmujących tysiące rekordów. Stronicowanie może działać poprawnie w określonych sytuacjach, na przykład przy wyświetlaniu danych z bazy lub wyników innych zapytań. Jednak nie jest to dobry sposób na kontrolowanie całej strony internetowej, zwłaszcza bez zastosowania pewnej odmiany pamięci podręcznej. Ajax stosowany prawidłowo, na przykład do obsługi edycji w miejscu dostępnej obok tradycyjnych technik wprowadzania zmian, może uatrakcyjnić aplikację lub witrynę. Użyty tylko w celu dodania tej techniki może naprawdę zepsuć dobrą stronę internetową.

Jednak czasem warto użyć „odjazdowych” efektów Po analizie wad „odjazdowych” efektów warto wspomnieć, że czasem dobrze jest je zastosować. Ja uwielbiam nowe możliwości graficzne. Dołączyłam nawet rozdział o grafice — zarówno dla przyjemności Czytelników, jak i własnej. Nie bój się stosować języków SVG i VML do wizualnego przedstawiania danych obok informacji opartych na tekście. Warto udostępniać aktywne menu działające niezależnie od tego, czy obsługa skryptów jest włączona, czy nie. Edycja w miejscu to jeden z moich ulubionych efektów, podobnie jak kontrolka accordion, która pozwala lepiej wykorzystać przestrzeń. Używanie zanikania do wyróżniania zmian pozwala zwiększyć elegancję witryny, zwłaszcza jeśli efekt ten zostanie dodany do innych technik wyświetlania powiadomień. Pobieranie da-

336

|

Rozdział 10. Skalowanie, infrastruktura i tworzenie witryn od podstaw

nych z witryn zewnętrznych może pomóc w utworzeniu aplikacji, która zademonstruje wartość stosowania znaczników w dużo większym stopniu niż samo rozprawianie o tym, jak użyteczne są przy tworzeniu „semantycznego” internetu. Wyświetlanie okna wyskakującego z mapką przedstawiającą drogę do firmy to lepsze rozwiązanie niż udostępnianie samego adresu. Filtrowanie na żywo pozwala zwiększyć ogólną wydajność aplikacji sieciowej, podobnie jak sortowanie na żywo i sprawdzanie poprawności formularzy. Uzależniłam się od korzystania z funkcji autouzupełniania w pasku Google w przeglądarce Firefox. Na okrągło używam jej do sprawdzania ortografii. Nawet straszne stronicowanie ajaksowe może działać poprawnie, jeśli tylko programista spełni pewne warunki i zapewni naprawdę dobrą obsługę pamięci podręcznej. Jedna z najciekawszych aplikacji przygotowanych na potrzeby tej książki, omówiona w rozdziale 8., wyświetla stronicowane dane z bazy danych i używa języka SVG oraz obiektu canvas. Obserwowanie małej grafiki obrazującej liczbę komentarzy było bardzo motywujące, a jednocześnie wciąż dostępne były dane tekstowe. To rozwiązanie może być jeszcze lepsze. Trzeba udostępnić statyczną tabelę z danymi z bazy, którą można przewijać w obrębie kontenera, a następnie dodać grafikę SVG, dzięki czemu dane będą dostępne także dla programów odczytujących tekst z ekranu i podobnych narzędzi. Pozostało jeszcze ostatnie zagadnienie przed rozpoczęciem pracy od podstaw: jeśli programista zdecyduje się użyć platformy, którą powinien wybrać? W ostatnim punkcie tego rozdziału opisuję wybrane z nich.

Rekomendowane platformy Niezależnie od ulubionego języka programowania i środowiska prawdopodobnie dostępna jest w nich platforma do tworzenia aplikacji ajaksowych. Zetknęłam się z takimi platformami dla języków: LISP, Cold Fusion i Smalltalk, nie wspominając już o bardziej popularnych. Jedną z najbardziej znanych platform jest Ruby on Rails języka Ruby, jednak prawdopodobnie najwięcej osób będzie używać platform opartych na .NET i języku Java. Nie pozostaje w tyle także język PHP, dla którego dostępnych jest kilka platform, a również Python ma ajaksowe perełki. Większość platform nie jest specyficzna dla Ajaksa, ale zapewnia obsługę podejścia model-widok-kontroler (ang. model-view-controller — MVC), zgodnie z którym platforma udostępnia większą część komponentu kontrolnego, integrując dostęp do danych i usług zaplecza, a zarazem ma wpływ na interfejs użytkownika („widok”), a nawet generuje go. Ajax wkracza na scenę jako nowy składnik środowiska aplikacji, jednak większość platform nie koncentruje się na tej technologii. Czasem Ajax jest zintegrowany z ogólnym środowiskiem, a czasem funkcjonuje jako dodatek lub rozszerzenie. Doskonałe miejsce do wyszukiwania platform dostępnych dla danego języka lub środowiska to strona Ajax Patterns Frameworks — http://ajaxpatterns.org/wiki/index.php? title=AJAXFrameworks.

Rekomendowane platformy

|

337

ASP.NET i AJAX Technologia Active Server Pages (ASP) Microsoftu jest dostępna od wielu lat, a kiedy Microsoft kilka lat temu rozpoczął prace nad .NET, została przekształcona w ASP.NET. Obecnie Microsoft udostępnia platformę AJAX, która umożliwia dodanie Ajaksa do aplikacji ASP.NET. Podstawowe ograniczenie związane z ASP.NET 2.0 i Ajaksem dotyczy oczywiście tego, że jako serwera można używać wyłącznie systemu Windows. Wszystkie inne platformy mogą działać w różnych systemach operacyjnych, włączając w to systemy: Linux, Unix i Mac OS X. Jednak osoby używające w przeszłości technologii .NET prawdopodobnie i tak są przyzwyczajone do środowiska Windows, dlatego nie jest to istotne ograniczenie. Jeśli programista nie ma własnego serwera, może skorzystać z jednej z firm hostingowych obsługujących technologię AJAX .NET, których liczba ciągle rośnie. ASP.NET AJAX to bezpłatna platforma, którą można pobrać z witryny AJAX-a — http://ajax. asp.net. Po jej zainstalowaniu można wykorzystać do tworzenia aplikacji ajaksowych umiejętności programowania w języku Visual Basic lub C#. Choć w branży obecnie zwykle używana jest nazwa „Ajax”, Microsoft nazwał platformę „AJAX”.

Platforma ASP.NET AJAX była początkowo rozwijana pod nazwą „Atlas”, którą zarzucono po wydaniu produktu. Występują pewne różnice między tymi środowiskami, dlatego osoby, które używały w przeszłości Atlasa, powinny zapoznać się z udostępnianymi przez Microsoft wskazówkami dotyczącymi migracji. Microsoft udostępnia dobrą dokumentację tej platformy. Zamiast omawiać samodzielne pisanie dużych ilości kodu, większość dokumentacji dotyczy tworzenia aplikacji za pomocą środowiska Visual Studio. Osoby, które nie mają pełnego środowiska Visual Studio 2005, mogą użyć bezpłatnej, „okrojonej” wersji, Visual Studio Express (http://msdn.microsoft.com/vstudio/ express), która współdziała z platformą ASP.NET AJAX. Jeśli programista zdecyduje się na to rozwiązanie, nie będzie miał odwrotu. Podobnie jak w przypadku większości platform, oznacza to przywiązanie do danego środowiska. Jednak to samo dotyczy zwykłych aplikacji ASP.NET czy programów pisanych za pomocą Javy i EJB. Obok rozbudowanej dokumentacji Microsoft udostępnia ciekawy zestaw plików wideo, które demonstrują, jak tworzyć rozwiązania w tym środowisku. Wraz z wprowadzeniem na rynek systemu Vista w dziedzinie programowania aplikacji dla środowiska Windows powinien nastąpić w następnych latach znaczny rozwój, a osoby używające kiedyś technologii ASP i ASP. NET powinny zwrócić na to uwagę. Microsoft, we współpracy ze społecznością programistów, udostępnia także pakiet ASP.NET AJAX Control Toolkit. Jest to część kliencka środowiska ASP.NET AJAX, udostępniająca elementy wizualne, na przykład kontrolkę accordion, animacje, wyszukiwanie przy użyciu filtrów i tak dalej. Główna witryna tego pakietu to http://www.codeplex.com/Wiki/View.aspx?Project Name=AtlasControlToolkit. Nie trzeba tworzyć oprogramowania w świecie Visual Studio i .NET, aby móc skorzystać z ajaksowej oferty Microsoftu. AJAX Library Microsoftu to biblioteka napisana wyłącznie w ję338 |

Rozdział 10. Skalowanie, infrastruktura i tworzenie witryn od podstaw

zyku JavaScript i można jej używać w obrębie innych platform lub w niezależnych aplikacjach. Ponieważ w tej książce językiem kodu zaplecza był PHP, chcę zwrócić uwagę na bibliotekę PHP for Microsoft AJAX Library Steve’a Marksa. Jest to kod zaplecza napisany w PHP, który można zintegrować z biblioteką Ajaksa do obsługi frontonu. Można ją pobrać ze strony http://codeplex.com/phpmsajax. Bibliotekę AJAX Library Microsoftu można pobrać niezależnie od reszty pakietu .NET.

Java i GWT Zawsze występowały bliskie związki między językami JavaScript i Java, choć w rzeczywistości nie ma fizycznych podobieństw między nimi ani rzeczywistego powiązania oprócz początkowych pomysłów, zresztą szybko zarzuconych i od dawna zapomnianych. Wspólnym elementem tych języków jest ich powiązanie z internetem, które obecnie rozszerza się na związki z Ajaksem. W odróżnieniu od aplikacji korporacyjnych opartych na warstwie pośredniej, takiej jak EJB czy WebSphere firmy IBM, Java i Ajax nie wymagają zmagania się ze złożonymi platformami oraz sztywnymi protokołami, aby możne było je zastosować w sposób użyteczny i zarazem ciekawy. Dzięki platformom i zestawom narzędzi takim jak Google Web Toolkit tworzenie aplikacji ajaksowych za pomocą języka Java jest niezwykle proste. Na początku trzeba pobrać i zainstalować pakiet GWT. Ma on trzy wersje, przeznaczone dla systemów: Windows, Mac i Linux. Instalacja nie wymaga ustawiania 150 różnych zmiennych środowiskowych, co jest często konieczne w przypadku Javy. Kiedy pierwszy raz pobrałam GWT na mojego maka, przygotowanie i uruchomienie aplikacji opartej na tej platformie zajęło mi mniej niż minutę — i to bez dokładniejszego zaglądania do dokumentacji. Może nie należy wyrabiać sobie tego typu nawyków, jednak pokazuje to, że platforma GWT nie wkracza na ścieżkę tworzenia oprogramowania korporacyjnego, ale bardziej wiąże się z servletami, JSP i internetowym obliczem Javy. Oznacza to, że jest łatwiejsza w nauce i implementacji, jednak niekoniecznie należy jej używać do ochrony największych sekretów firmy. W końcu jest to platforma sieciowa. Po zainstalowaniu można znaleźć kilka przykładów w podkatalogu samples w katalogu głównym. Każdy przykład jest powiązany ze skryptem powłoki, otwierającym kod w środowisku GWT. Rysunek 10.1 przedstawia przykładową aplikację KitchenSink uruchomioną w trybie Host na moim maku. Po skompilowaniu aplikacji można ją otworzyć w przeglądarce i zintegrować ze środowiskiem Tomcat. To ostatnie zagadnienie to największe ograniczenie dotyczące GWT, ponieważ jest to platforma języka Java, która wymaga środowiska Java oraz serwera (np. Tomcat) do przechowywania aplikacji sieciowych. Można używać własnego kodu JavaScript, choć dokumentacja GWT ostrzega przed tym. Jest to jednak typowe w przypadku platform — wyjście poza dane środowisko wiąże się z ryzykiem. Użytkownicy Eclipse mogą zintegrować GWT ze środowiskiem programistycznym, jednak dostępne jest też narzędzie uruchamiane z wiersza poleceń, za pomocą którego można budować aplikacje na podstawie plików z kodem źródłowym. Można też zintegrować aplikację z testami JUnit. GWT to dobry wybór dla programistów, którzy już używają środowiska opartego na języku Java. Rekomendowane platformy

|

339

Rysunek 10.1. Tryb Host przykładowej aplikacji KitchenSink opartej na platformie GWT firmy Google

Platformy języka PHP Choć użytkownicy języka PHP zwykle nie myślą o „platformach”, istnieją ajaksowe platformy dla tego języka. Jest ich nawet sporo. Jedna z nich to platforma o otwartym dostępie do kodu źródłowego Sajax (http://ajaxpatterns.org/wiki/index.php?title=AJAXFrameworks). Sajax ma prawdopodobnie najskromniejszą dokumentację ze wszystkich znanych mi platform — jedynie kilka akapitów i parę przykładów. Inne narzędzie, Zephyr (http://zephyr-php.sourceforge.net), udostępnia platformę MVC współdziałającą z systemem szablonów Smarty. System ten jest dość popularny, a Zephyr powinien zainteresować wszystkich użytkowników aplikacji opartych na tym systemie. Jedną z najbardziej popularnych platform dla języka PHP jest Symfony, dostępna na stronie http://www.symfony-project.com. Nie tylko udostępnia ona biblioteki przyspieszające programowanie, ale także zawiera mechanizmy do generowania katalogów i korpusu stanowiącego podstawę projektu. Wystarczy przyjrzeć się kilku przykładom, aby zauważyć duży wpływ platformy Ruby on Rails, która stanowi inspirację także dla autorów podobnych platform w innych bibliotekach. W związku z tą platformą oraz innymi niepokoi mnie jedynie to, że wygenerowane aplikacje nie spełniają wymogów dotyczących zaciemniania kodu, a skrypty są zagnieżdżone w różnych miejscach stron internetowych. Mimo to jest to ciekawa platforma i zachęcam programistów języka PHP do jej wypróbowania. 340 |

Rozdział 10. Skalowanie, infrastruktura i tworzenie witryn od podstaw

Python, GWT i Django Pakiet Google Web Toolkit jest oparty na języku Java, jednak w witrynie projektu pyjamas (http://pyjamas.pyworks.org) można znaleźć wersję tego pakietu dla języka Python. Jedną z zalet tej wersji — oprócz tego, że niektórzy programiści wolą Pythona — jest większa łatwość znalezienia serwera z obsługą Pythona niż Javy. Wciąż jednak najbardziej rozbudowaną platformą dla języka Python jest Django, którą można pobrać ze strony http://www.djangoproject.com. Zamiast tworzyć własną bibliotekę języka JavaScript, autorzy Django użyli Dojo — prawdopodobnie drugiej pod względem popularności infrastruktury języka JavaScript po Prototype. Jest to bardzo otwarte i rozszerzalne środowisko, jednak czasem zbyt duże i, niestety, o zbyt ubogiej dokumentacji. Wciąż jednak jest to pakiet o dużych możliwościach i bardzo otwarty.

Hej! Tu Perl! Były czasy, kiedy Perl napędzał rozwój internetu. Jednak zakres jego zastosowania znacznie zmalał, zwłaszcza w ciągu kilku ostatnich lat, wraz z rosnącą popularnością aplikacji opartych na Javie i PHP. Nikt jednak nie powie, że Perl to nie „gruba ryba”. Są dwa moduły Perla służące do obsługi Ajaksa. Jeden z nich to CGI::Ajax, który eksportuje metody Perla do kodu JavaScript zarządzającego Ajaksem, co jest dość ciekawym rozwiązaniem. Drugi to HTML::Prototype, który generuje kod HTML i JavaScript zintegrowany z biblioteką Prototype. Jeśli chodzi o kompletną platformę MVC dla języka Perl, zdecydowanym liderem w tej kategorii jest Catalyst (http://www.catalystframework.org). Ta platforma udostępnia równie bogate i kompletne środowisko programowania oraz produkcyjne co inne platformy na tej liście.

Ruby on Rails, Ajax i ścisłe powiązanie Od najstarszego przechodzimy do najnowszego — od Perla do Ruby. Ruby to względna nowość w świecie języków programowania, jednak szybko nadrabia dystans do innych języków dzięki rzeszy zwolenników, którzy wychwalają jego użyteczność. Popularność języka Ruby wynika głównie ze zwięzłej składni i wbudowanej obsługi programowania obiektowego. Jeśli chodzi o platformy dla tego języka, to w zasadzie istnieje tylko jedna — Ruby on Rails (inaczej RoR, częściej Rails). Istnieje bliskie powiązanie między Rails a Ajaksem. Na przykład biblioteka Prototype składa się niemal w całości z elementów przypominających język Ruby. Nie jest to zaskoczeniem, jeśli wziąć pod uwagę to, że Sam Stephenson, autor biblioteki Prototype, pracuje także w głównym zespole rozwijającym Rails. W szczególności funkcje dolara są bardzo specyficzne dla języka Ruby, podobnie jak struktura obiektowa wszystkich głównych klas. Stosowanie Rails w tworzeniu rozwiązań ajaksowych jest ułatwione dzięki ścisłej integracji bibliotek Prototype i script.aculo.us z bieżącą wersją tej platformy. Dostępne są znaczniki platformy Rails służące do dołączania bibliotek, a także zapewniające dostęp do szeregu funkcji „pomocniczych”, które generują kod działający po stronie klienta.

Rekomendowane platformy

|

341

Mimo że platforma Rails jest bardzo ciekawa, panuje jedno błędne przekonanie, wedle którego jest to „jedyne” środowisko do tworzenia aplikacji ajaksowych. Na wszystkich konferencjach technicznych, jeśli ktoś wspomni o „Ajaksie” i „platformie”, wielu osobom przychodzi na myśl Rails, jednak w rzeczywistości nie jest to najczęściej używane rozwiązanie dla aplikacji ajaksowych działające po stronie serwera. Palma pierwszeństwa należy się tu wszechobecnemu językowi PHP.

A więc naprzód z Ajaksem Ajax nie sprawi, że zła aplikacja stanie się dobra, jednak pozwala ulepszyć poprawne programy. Kiedy używa się go do stopniowego usprawniania witryny, pozwala dodać nową funkcjonalność bez poświęcania wyjściowej dostępności i użyteczności. Warto zastanowić się przed użyciem niektórych nowatorskich efektów Ajaksa, jednak wraz ze wzrostem liczby programistów Ajaksa oraz zainteresowania programowaniem przy użyciu tej technologii oczekuję bardziej powszechnego zastosowania takich funkcji, jak: edycja w miejscu, powiadomienia z wyróżnieniem, pewne techniki zarządzania przestrzenią i aktualizacje na żywo. Najlepsze jest to, że stosowanie Ajaksa nie wymaga żadnych inwestycji oprócz czasu. Nie są też potrzebne duże platformy. Programista nie jest ograniczony do jednego języka czy maszyny konkretnego typu. Wystarczy edytor tekstu, przeglądarka oraz miejsce, w którym można umieścić stronę, i jesteśmy w grze.

342 |

Rozdział 10. Skalowanie, infrastruktura i tworzenie witryn od podstaw

Skorowidz

$(), 80 $F(), 80, 82 .htaccess, 19, 268 :hover, 261 __method.call(), 157

A aaBindObjMethod(), 223 aaGetXmlHttpRequest(), 50, 53 aaScreenIE(), 55 abort(), 48 absolute, 142 abstrakcja usług sieciowych, 312 access, 139 accesskey, 139 accordion, 91, 136 Adding Ajax, 150 display, 137 efekt przejścia, 141 kończenie przejścia, 143 łączenie kontrolek z wywołaniami Ajaksa, 153 obsługa, 140 panele, 136 pobieranie wysokości i szerokości elementów, 141 Rico, 145 rozszerzanie, 153 rozwijanie paneli, 137 stosowanie kontrolek, 144 tworzenie efektu, 137 udostępnianie danych na żądanie, 153 umieszczanie kodu efektu w bibliotece, 148 wskaźniki, 137 żądania, 153 Accordion, 144, 152 accordionrico.js, 156 action, 43, 45 ActiveX, 18, 41, 49

ActiveXObject, 69 addEventListener(), 95, 105, 106 Adding Ajax, 149, 150, 297, 331 addingajax.js, 55, 114, 161, 331 addNavigationNode(), 221 adjustNavigation(), 220 Adobe, 213 adres URL, 52 agenty użytkowników, 34 agregator źródeł RSS, 197 Ajax, 7, 15, 16, 41 asynchroniczność, 76 bezpieczeństwo, 74 dane XML, 62 fragmenty kodu HTML, 57, 67 innerHTML, 57, 59 JSON, 64 odpowiedzi, 56, 57 parametry żądania, 52 przetwarzanie odpowiedzi, 56 przygotowywanie obiektu XMLHttpRequest do użytku, 48 punkty końcowe, 71 synchroniczność, 76 widgety, 71 wydajność, 75 wysyłanie żądania, 50, 52 XMLHttpRequest, 47 zabezpieczenia języka JavaScript, 71 żądania, 50 Ajax.Request, 81, 82 Ajax.Updater, 81 aktywna walidacja platformy Adobe, 213 album fotograficzny, 223 analiza narzędzi służących do odwiedzania stron, 34 anchor, 115 animacje, 127 API, 38 API Cocoa 2D, 254

343

aplikacje ajaksowe, 15 AJAX, 101 ASP.NET, 338 bazodanowe, 209 bez skryptów, 316 jednostronicowe, 215, 216 luźno powiązane, 38 REST, 51 RIA, 253 serwerowe, 38 sieciowe, 41 ściśle powiązane, 38 Appear, 89 Application Programming Interface, 38 application/xhtml+xml, 19 apply(), 128 appName, 55 appVersion, 55 Array, 85, 86 ASP.NET, 338 ASP.NET 2.0, 338 ASP.NET AJAX, 338 asynchroniczność, 76 Asynchronous JavaScript and XML, 16 Atlas, 338 attachEvent(), 95, 106 autocomplete, 214 AWS, 330 AWStats, 34

B baza danych, 209 bezpieczeństwo, 37, 74 edycja w miejscu, 188 usługi sieciowe, 329 biblioteki, 15 Fade Anything Technique, 192 zewnętrzne, 86 biblioteki Ajaksa, 79, 331 Dojo, 92 jQuery, 99 MochiKit, 100 moo.fx, 100 mooTools, 100 Prototype, 80 qForms, 101 Rico, 90 Sarissa, 101 script.aculo.us, 87 WZ_jsGraphics, 101 Yahoo! UI, 100

344 |

Skorowidz

bind(), 128 bindAsEventListener(), 154 BlindDown, 89 BlindUp, 89 blink, 29 Blockbuster Online, 118 Bloglines, 197 bogate aplikacje internetowe, 253 BOM, 19 bot internetowy, 25 brak obsługi skryptów, 68 Browser Object Model, 19

C CancelEvent(), 115 canvas, 276 Canvas, 254 Cascading Style Sheets, 7 CDATA, 97 CGI::Ajax, 341 chmura oznaczenia, 296 chwilowe powiadomienia, 130 circle, 269, 270 class, 148 Class.create(), 154, 157 className, 57 clientHeight, 142 clipping, 135 Cold Fusion, 337 colspan, 26 comments.js, 132 createElement(), 61 CSS, 7, 17 menu zgodne z internetem, 261 obsługa przeglądarek, 31 paski przewijania, 256 przenośne kontenery, 262 suwaki, 256 zaokrąglone narożniki, 254 CSS Validator, 23 cx, 270 cy, 270 czcionki, 29

D Dalej, 242 dane EXIF, 225, 245 JSON, 64, 81 XHTML, 67 XML, 18, 61

dane dynamiczne, 177 dwuetapowe zatwierdzanie, 208 edycja w miejscu, 178 efekty bibliotek zewnętrznych, 211 walidacja na żywo, 205 wydajność, 208 wyróżnianie zmian, 191 Dashboard, 276 def, 271 deklaratywny HTML, 95, 96 DELETE, 51, 196 detachEvent(), 106 DHTML, 18, 34, 217 Dictionary, 93 display, 135, 136, 137 block, 137 div, 26, 57, 170 Django, 341 Dock, 93 DOCTYPE, 19, 30, 149 Document Object Model, 17 document.getElementById(), 80 document.write(), 61, 88 document.writeln(), 88 dodawanie Ajaksa, 31, 35 dodawanie kodu JavaScript, 88 dodawanie w miejscu, 204 dojo, 93 Dojo, 92 deklaratywny HTML, 95 edycja wewnątrzwierszowa, 191 FilterTable, 214 fisheye, 93, 95 łańcuchy funkcji obsługi zdarzeń, 94 moduł ładujący, 94 moduły, 93 rozwiązanie problemu niestandardowych atrybutów, 96 SortableTable, 214 system obsługi zdarzeń, 107 Dojo Event System, 107 Dojo Toolkit, 92 dojo.animation.Animation, 93 dojo.crypto, 93 dojo.dom, 93 dojo.event, 191 dojo.event.connect(), 107 dojo.event.topic.subscribe(), 109 dojo.html, 93 dojo.js, 94, 191 dojo.lang, 93 dojo.string, 93 dojo.style, 93

dojo.widget, 191 dokumenty SVG, 267 DOM, 17, 19, 61 DOMParser, 69 dostępność, 22, 24 aktualizacja na stronie, 202 edycja w miejscu, 189 strony z zakładkami, 169 Drip/IE Sieve, 334 DropOut, 89 dwuetapowe zatwierdzanie, 208 dymki pomocy, 119 dynamiczne skrypty, 41, 73 dynamiczny HTML, 18

E easing, 100 ECMA 262, 18 ECMAScript, 7, 18 edycja w miejscu, 178 addingajax.js, 179 bezpieczeństwo, 188 dodawanie pól umożliwiających edycję, 178 dostępność, 189 kod kliencki, 180 strona serwerowa, 186 współpraca między serwerem a klientem, 179 wstrzyknięcie kodu SQL, 189 wydajność, 189 edycja wewnątrzwierszowa, 191 efekty, 271 accordion, 137 easing, 100 fisheye, 95 script.aculo.us, 88 wizualne, 253 zaokrąglone narożniki, 255 efekty interaktywne, 103 animacje, 127 chwilowe powiadomienia, 130 informacje w trybie JIT, 110 obsługa zdarzeń, 104 podgląd na stronie, 121 podgląd na żywo, 122 podpowiedzi, 117, 118 system obsługi zdarzeń, 107 zanikanie, 130 zanikanie kolorów, 126 zegary, 127 zegary ajaksowe, 128 Effect, 88 Effect.Appear, 89

Skorowidz

| 345

Effect.BlindDown, 89 Effect.BlindUp, 89 Effect.DropOut, 89 Effect.Fade, 89 Effect.Fold, 89 Effect.Grow, 89 Effect.Highlight, 89 Effect.Pulsate, 89 Effect.Shake, 89 Effect.Shrink, 89 Effect.SlideDown, 89 Effect.SlideUp, 89 Effect.Squish, 89 Effect.SwitchOff, 89 effects.js, 88 EJB, 339 elementy graficzne, 35 ellipse, 269 embed, 265, 266 encodeURIComponent(), 52 Enumerable, 80, 83 etykiety elementów formularza, 111 eval(), 64, 81 event, 106 eventHandler(), 107 EXIF, 223, 225 expandOrCollapse(), 152 Extensible Markup Language, 17

F Fade, 89 Fade Anything Technique, 192 fadeRow(), 196 FAT, 192 fieldset, 145 figury, 269 file_get_contents(), 227 filter(), 81 FilterTable, 214 filtry, 271 Firebug, 22 Firefox, 31 fisheye, 93, 95 Flash, 217 Flash Local Shared Object, 334 Flickr, 178, 288, 312 API, 288 chmura oznaczenia, 296 grupy, 288 nakładka PHP, 314 osoby, 288 oznaczenie, 296 Photo, 293

346 |

Skorowidz

SimpleXMLElement, 318 strona z zakładkami, 296 tworzenie witryny, 289 zarządzanie danymi, 293 zbiory zdjęć, 288 zdjęcia, 288 float, 26 fly-ins, 136 focus, 111 Fold, 89 font, 29 font-family, 32 for...in, 86 forEach(), 81 format JSON, 64, 224 SVG, 254 formularze, 43, 211 jotForm, 211 podgląd na żywo, 122 podpowiedzi, 117, 119 pomoc, 111 pomoc „na żądanie”, 113 walidacja na żywo, 206 WuFoo, 211 zarządzanie, 211 fragmenty kodu HTML, 57, 67 Function, 128 funkcja obsługi zdarzeń, 104 funkcje lokalne, 293

G GdownloadUrl, 285 generowanie linii, 277 GET, 43, 50, 51, 53 getAllResponseHeaders(), 48, 55 getcomments.js, 204 getElementById(), 80 getElementsByTagName(), 62, 142 getPhoto(), 321 getProperty(), 141 getResponsiveHeader(), 48 GIMP, 253 globally unique identifier, 231 Google Maps, 16, 282, 307 GdownloadUrl, 285 Internet Explorer, 312 trasa podróży, 284 widoki, 283 Google Web Toolkit, 100, 275, 341 googleflickr.js, 290 googlflicobj.js, 299

gradienty, 271 grafika, 280 Grow, 89 GUID, 231 GWT, 100, 275, 339, 341

H hash, 235 height, 141 Highlight, 89 historia, 215 HTML, 15 HTML 4.01 Strict, 19, 21 HTML 5.0, 276 HTML Tidy, 29 HTTPS, 330 HttpUnit, 333

znacznikowy, 7 JIT, 31, 110 jotForm, 211 JPEG, 223 jQuery, 99, 213 noConflict(), 99 JSON, 18, 64 punkty końcowe, 71 JsUnit, 333 JsVectorGraphics, 275 just-in-time, 31, 111

K

I identyfikator GUID, 231 iframe, 265, 266, 273 img, 30, 223 informacje w trybie JIT, 110 infrastruktura, 327 infrastruktura pokazu slajdów, 217 inlineEditBox, 191 innerHTML, 57, 59, 122, 125 Internet Explorer, 19, 31 IO, 208 IRB, 223 iteracje, 80

J Java, 339 JavaScript, 7, 17, 18 prototype, 84 tablice asocjacyjne, 86 JavaScript na żądanie, 88 JavaScript Object Notation, 18, 64 język ECMAScript, 7, 18 JavaScript, 7, 17, 18 PHP, 44, 340 Ruby, 329 SVG, 20, 269 VML, 287 XHTML, 19 XML, 7 XSLT, 18

kaskadowe arkusze stylów, 7 klienci, 33 kod CSS, 44 HTML, 15 PHP, 44 XML, 60 komunikaty o błędach, 126 konserwacja funkcji obsługi zdarzeń, 104 kontrola strony, 31 kontrolki accordion, 91, 136 LiveGrid, 214 kończenie przejścia, 143 korektor języków skryptowych, 80 krytyczne obszary witryny, 335

L latające elementy, 136 line, 269 LISP, 337 LiveGrid, 214 luźne powiązanie, 38, 328

Ł łańcuchy, 99 funkcja obsługi zdarzeń, 94 łączenie funkcje obsługi zdarzeń, 104 kontrolki accordion z wywołaniami Ajaksa, 153

M manageEvent(), 107 margin, 32 marginesy, 32

Skorowidz

|

347

Markup Validation Service, 21, 22 mashup, 281 MathML, 270 mechanizm obsługi zdarzeń, 107 menu, 261 fisheye, 94 Microsoft.XMLHTTP, 18 miejsca, 215 MIME, 19 MochiKit, 100, 332 sortowalne elementy, 214 model BOM, 19 model-widok-kontroler, 337 modyfikacja witryny mashup, 307 moo.fx, 100 mooTools, 100, 247 sortowanie, 214 mouseout, 119 mouseover, 114, 119 MSXML2.XMLHttp, 49 MSXML2.XMLHttp.3.0, 49 MSXML2.XMLHttp.4.0, 49 MVC, 337

N nagłówki, 32 nagłówki odpowiedzi HTTP, 48 nakładanie, 136, 170 naruszenie bezpieczeństwa, 75 narzędzia testowe, 333 naśladowanie cofania, 239 Navigation, 219, 222, 235 addNavigationNode(), 221 setCurrentPage(), 239 navigation.js, 219 NavigationNode, 219 Navigator, 55 nawigacja, 215, 220 Netflix, 118 nextPage(), 219, 223 notacja z kropką, 85

O obiekty ActiveX, 18, 49 XHR, 49 XMLHttpRequest, 18, 41

348 |

Skorowidz

object, 265, 266 Object, 86 obsługa CSS, 31 dane, 211 DOM, 61 iteracje, 80 język JavaScript, 35 łańcuchy, 99 nawigacja, 220 przeciąganie, 263 suwak, 258 zdarzenia, 94, 106 zdarzenia w bibliotece Dojo, 108 zdarzenia zgodnie z Ajaksem, 104 żądania XHR, 52 obsługiwane przeglądarki, 39 obszar przycięcia, 135 ochrona danych, 330 odjazdowe efekty, 336 odnośniki, 32, 216 odpowiedzi Ajax, 56, 57 HTTP, 48 offsetHeight, 142 ograniczenie do jednej domeny, 71 okna wyskakujące, 170 okno z informacjami, 285 onclick, 138 onComplete, 81 onfocus, 111 onInteractive, 81 onLoaded, 81 onLoading, 81 onreadystatechange, 48, 53, 77 onsubmission, 54 opacity, 142 Open Web Security Project, 75 open(), 47 opóźnienie w obsłudze żądań asynchronicznych, 77 otwarte drzwi, 34 otwieranie pliki SVG, 266 połączenia z adresem URL, 47 overflow, 256 overlay, 136, 170 overrideMimeType(), 50 OWASP, 75, 333 oznaczenia maszynowe, 302 oznaczenie, 296

P padding, 32 pamięć lokalna, 334 podręczna, 209 panele, 136 parametry żądania, 52 parseJSON(), 64 parser XML, 69 paski przewijania, 256 PEAR, 224 Perl, 341 photo, 293 Photo, 224, 293 Photo.createTagArray(), 323 Photo.getTechPosts(), 324 Photo.placeLocation(), 323 Photo.processTechPosts(), 324 Photo.resetTags(), 323 PHP, 44, 340 plan usprawniania witryny, 37 remont generalny, 39 stopniowe usprawnianie, 39 platformy, 80, 328, 337 S5, 250 pliki EXIF, 223, 225 SVG, 265 PNG, 254 pobieranie informacje ze zdjęć, 223 wysokość i szerokość elementów, 141 podgląd ajaksowy, 124 podgląd na stronie, 121 podgląd na żywo, 122 podpisy cyfrowe, 330 podpowiedzi, 117, 118 tworzenie, 120 podział tekstu, 227 pokaz slajdów, 217, 242 baza danych, 232 Navigation, 219 obsługa nawigacji, 220 obsługa tekstowej prezentacji, 251 odnośniki nawigacyjne, 223 pliki EXIF, 225 pobieranie informacji ze zdjęć, 223 podział tekstu, 227 przechodzenie po stronach danych, 230 przeglądanie wyników wyszukiwania, 230 slideshow.css, 219 strona XHTML, 217

szablon strony, 217 tworzenie, 223 usługa sieciowa, 224 ustawienia arkusza stylów, 218 węzeł, 219 wstawianie elementów, 219 zapytania do bazy danych, 234 zdjęcia, 223 polityka otwartych drzwi, 34 polyline, 269, 270, 287 pomoc generowanie dynamiczne, 114 JIT, 116 na żądanie, 113 w formularzach, 111 POST, 50, 51, 53 pośrednik ajaksowy, 92 potrzeby użytkowników, 33 prevPage(), 219, 223 problem niestandardowych atrybutów, 96 prognoza pogody, 91 projektowanie aplikacje ajaksowe, 332 szkielet witryny, 36 prototype, 84, 86 Prototype, 80, 293 $(), 80 $F(), 80, 82 Ajax.Request, 81, 82 Ajax.Updater, 81 bind(), 128 dane JSON, 81 dodawanie biblioteki do projektów, 80 emulacja metod HTTP, 81 Enumerable, 80, 83 odpowiedź obiektu XMLHttpRequest, 81 tablice asocjacyjne, 85 wady, 86 wyszukiwanie danych, 83 zagrożenia, 85 zarządzanie obiektami XMLHttpRequest, 81 zdarzenia, 81 przechodzenie po stronach danych, 230 przechwytywanie zdarzeń, 105 przeciąganie, 136, 211 na boku, 334 przeciągany widok, 262 przeglądanie wyników wyszukiwania, 230 przeglądarki, 19, 30, 39 XMLHttpRequest, 48 przekształcanie strona HTML na XHTML, 29 tabele na układ strony oparty na CSS, 25

Skorowidz

| 349

przenośne kontenery, 262 przestrzeń, 135 przestrzeń w poziomie, 136 przesyłanie formularza w przypadku braku obsługi skryptów, 68 przetwarzanie kod XML, 60 odpowiedzi Ajax, 56 żądania, 44 żądania Ajax, 188 przewijanie na żywo, 90 przezroczystość, 254 przycięcie, 135 przyciski Submit, 53 Wstecz, 215 przygotowanie obiekt XMLHttpRequest do użytku, 48 żądanie, 50 Pulsate, 89 punkty końcowe, 71 JSON, 71 PUT, 51 Python, 341

Q qForms, 101 quirks, 19

R Rails, 341 ramki iframe, 273 RDF, 281 readyState, 48, 54 rect, 269 rectangle, 270 redukcja efektów, 334 rekomendowane platformy, 337 relative, 142 removeEventListener(), 106 repeat, 28 Representational State Transfer, 51 require_once(), 44 Resource Description Framework, 281 responseText, 48, 56, 64 responseText.parseJSON(), 64 responseXML, 48, 60, 61, 69 REST, 50, 51, 56, 299 RIA, 253 RichDraw, 275

350

|

Skorowidz

Rico, 90 accordion, 145 LiveGrid, 214 prognoza pogody, 91 strefa bezpieczeństwa, 92 stronicowanie w Ajaksie, 90 Weather Watch, 91 widgety, 91 zabezpieczenia języka JavaScript, 92 Rico.Corner.round(), 255 roundClass(), 255 rozwiązanie problemu niestandardowych atrybutów, 96 rozwijane menu, 34 rozwijanie paneli, 137 różnorodność urządzeń, 335 RSS, 281, 300 Ruby, 329, 341 Ruby on Rails, 329, 341 rx, 270 ry, 270

S S5, 249 Safari, 31 Sajax, 340 Sarissa, 101 saveComment(), 204 script, 268 script.aculo.us, 87 efekty, 88, 89 Effect, 88 effects.js, 88 Shake, 88 sortowanie za pomocą przeciągania, 211 Section 508, 24 select, 44 Selenium, 333 send(), 48, 52, 53 Services_JSON, 223 setAttribute(), 97 setCurrentPage(), 239 setInterval(), 127, 199 setRequestHeader(), 47, 52 setTimeout(), 127, 128 setUp(), 199, 204 Shake, 88, 89 Shrink, 89 Simple Standards-Based Slide Show System, 249 SimpleXMLElement, 318

skalowalna grafika wektorowa, 7, 254, 264 Ajax, 273 atrybuty, 269 canvas, 276 circle, 269, 270 def, 271 dostosowywanie elementów, 270 efekty, 271 ellipse, 269 figury, 269 filtry, 271 gradienty, 271 GWT, 275 język SVG, 269 kształty, 269 line, 269 otwieranie plików SVG, 266 polyline, 269, 270 przeglądarki, 266 rect, 269, 270 rectangle, 270 skrypty, 267 stronicowanie, 274 wewnątrzwierszowy kod SVG, 268 zagnieżdżanie kodu SVG, 265 skalowanie, 327 skrót, 85, 235 skrypty, 8 sleep(), 77 SlideDown, 89 SlideUp, 89 Smalltalk, 337 Snap, 336 Son of Suckerfish, 261 Sortable, 212 SortableTable, 214 sortowanie, 214 przeciąganie, 211 specyfika przeglądarek, 30 spełnianie wymagań użytkowników, 37 sprawdzanie aktualizacja, 197 aktualizacja komentarzy, 201 dostępność, 22, 24 przeglądarka, 55 Squish, 89 stabilność, 334 status, 48 statusText, 48 stopniowe usprawnianie, 16, 39 stopniowe zmiany wysokości, 144 strefa bezpieczeństwa, 71, 92 strona, 216

stronicowana zawartość, 216 stronicowanie, 136 Ajax, 90 integracja z SVG, 274 strony z zakładkami, 159 dostępność, 169 Flickr, 296 Google Maps, 296 tabs.js, 165 TabView, 166 uniwersalne zakładki, 165 zawartość stron, 159 struktura obiektów XMLHttpRequest, 47 struktury skrótów, 85 style, 57 style CSS, 25, 249 style czcionek, 33 submit, 53 subskrybcja metod, 109 Suckerfish, 261 suwaki, 256 SVG, 8, 20, 254, 268, 269 SVG 1.1, 268 SVG 1.1 tiny, 268 SVG-VML-3D, 275 SwitchOff, 89 SXSW, 16 sygnalizacja aktualizacji, 197 sygnalizowanie usuwania, 191, 202 Symfony, 340 synchroniczność, 76 system obsługi zdarzeń w Dojo, 107 system pomocy, 35 JIT, 111 szablon strony, 217 szkielet witryny, 36 szyfrowanie, 330

Ś ścisłe powiązanie, 38, 328

T tab, 160 tabele, 25 tablice asocjacyjne, 85, 86 haszujące, 85 Tabs, 297 tabs.js, 165 TabView, 166, 168 tag cloud, 296

Skorowidz

|

351

target, 114, 115 technika wydawca-subskrybent, 109 technika zanikania, 130 technologie ajaksowe, 17 Technorati, 299 klucz API, 299 odnośniki do artykułów, 302 zarządzanie żądaniami, 301 żądania, 299 testy, 333 text/xml, 60 textarea, 131 this, 108 tooltip, 120 Total Validator, 20 transakcje z bazą danych, 209 trasa podróży, 284 trwałość, 242 try...catch, 126 tryb quirks, 19 try-catch, 49 tworzenie chwilowe powiadomienia, 130 obiekt ActiveX, 49 obiekt XMLHttpRequest, 49 podpowiedzi, 120 pokaz zdjęć, 223 tablice asocjacyjne, 85 uniwersalne zakładki, 165 witryny mashup, 289 witryny od podstaw, 327

U uchwyty zdarzeń, 104 udostępnianie danych na żądanie, 153 układ, 25 CSS, 29 elastyczny, 28 płynny, 28 stały, 28 umieszczanie funkcjonalności w jednostkach, 332 umieszczanie kodu efektu accordion w bibliotece, 148 uniwersalne zakładki, 165 urządzenia, 335 userData, 334 usługi sieciowe, 56, 71, 329 bezpieczeństwo, 329 zasoby, 329 Usuń teraz, 203 usuwanie na stronie, 191, 202, 208

352

|

Skorowidz

V Validate HTML, 23 validation.js, 207 Visual Studio Express, 338 VML, 275, 287

W W3C WAI 1.0, 24 W3C Web Accessibility Initiative, 22 WAI, 22, 24 walidacja na żywo, 205, 209 walidatory kodu, 20, 21 CSS, 22 HTML, 21 XHTML, 21 wczytywanie plików SVG, 266 Weather Watch, 91 Web Applications 1.0, 254 Web Developer, 23 Web Developer Toolbar, 22 Web Developer Toolbar for Firefox, 20 Web Services Amazona, 330 Webalizer, 34 WebKit, 254, 266 wewnątrzwierszowy kod SVG, 268 widgety, 71 fisheye, 95 Rico, 91 TabView, 168 Weather Watch, 91 wielokrotne wykorzystanie kodu, 332 window, 49, 205 window.addEventListener(), 95 window.attachEvent(), 95 window.location, 235 window.location.hash, 235, 239 window.onload, 55, 97 witryny mashup, 281, 325, 335 aplikacja bez skryptów, 316 Flickr, 288, 312 Google Maps, 282 Internet Explorer, 312 klient ajaksowy, 319 modyfikacja, 307 nowa wersja klientów, 316 onunload, 284 Technorati, 299 tworzenie, 289 zakładki, 308 współdziałanie Ajaksa z elementami aplikacji, 208 Wstecz, 215, 242

wstrzyknięcie kodu SQL, 189 wtyczki, 101 WuFoo, 211 wycieki pamięci, 334 wycofanie żądania, 48 wydajność, 75, 208 dwuetapowe zatwierdzanie, 208 wydawca-subskrybent, 109 wygląd strony, 249 wymagania infrastrukturalne aplikacji ajaksowych, 327 wyróżnianie zmian, 191 dodawanie w miejscu, 204 dostępność, 202 sygnalizacja aktualizacji, 197 sygnalizowanie usuwania, 191, 202 Usuń teraz, 203 wysyłanie żądań, 48, 50, 52 wyszukiwanie elementów, 148 wyszukiwarki, 215 wyświetlanie mapy, 282 podpowiedzi formularza, 119 wywoływana zwrotnie funkcja, 52 WZ_jsGraphics, 101

X X Library, 256 XHR, 49 XHTML, 7, 17, 19 XHTML 1.0 Strict, 19 XHTML 1.0 Transitional, 21 XHTML 1.1, 21 X-JSON, 81 XML, 7, 17, 73 XMLHttpRequest, 17, 18, 36, 41, 69 abort(), 48 asynchroniczność, 77 getAllResponseHeaders(), 48 getResponsiveHeader(), 48 obsługa żądania, 52 odpowiedź, 55 onreadystatechange, 48 open(), 47 przeglądarki, 48 przygotowywanie obiektu do użytku, 48 readyState, 48, 54 responseText, 48 responseXML, 48 send(), 48 setRequestHeader(), 47 status, 48 statusText, 48

tworzenie obiektu, 49 wysyłanie żądania, 52 XMP, 223 XSLT, 17, 101

Y Yahoo! UI, 100 autocomplete, 214 TabView, 166 YUI, 100

Z zaawansowane efekty wizualne, 253 zabezpieczenia języka JavaScript, 71, 92 zagnieżdżanie kodu SVG, 265 zakładki, 159, 308 zanikanie, 89, 130 kolory, 126 zaokrąglone krawędzie, 91 zaokrąglone narożniki, 254 zapamiętywanie miejsc, 235 fragmenty stron, 235 naśladowanie cofania, 239 obsługa, 238 przechwytywanie adresu URL, 238 zapobieganie wstrzyknięciu kodu SQL, 189 zapytania do bazy danych, 234 zarządzanie, 333 formularze, 211 komentarze, 199 obiekty XMLHttpRequest, 81 przestrzeń, 135, 148 zawartość stronicowana, 216 zawartość z zakładkami, 159 zdarzenia, 104 Dojo Event System, 107 event, 106 focus, 111 funkcja obsługi, 104 łączenie funkcji obsługi zdarzeń, 104 mouseout, 119 mouseover, 119 obsługa, 104 przechwytywanie, 105 uchwyty, 104 wydawca-subskrybent, 109 zegary, 127 Ajax, 128 Zephyr, 340 zmiana stanu żądania, 48 znaki specjalne protokołu HTTP, 52

Skorowidz

|

353

Ż żądania asynchroniczne, 77 DELETE, 196 GET, 43, 50 parametry, 52 POST, 50 REST, 50 synchroniczne, 76 wysyłanie, 52

354 |

Skorowidz

---

Powers S. - Grafika w Internecie

Read more

Tim Powers Wrota Anubisa 1

Read more

temat 2 - AJAX

Read more

2008-Head First Ajax

Read more

Helion - Ajax on Java

Read more

2006-Head Rush Ajax

Read more

Ajax for Dummies (ISBN - 0471785970)

Read more

Tim Powers Wrota Anubisa 2

Read more

Noam Chomsky Powers and Prospects

Read more

Powers Tim - Wrota Anubisa 2

Read more

Powers Tim - Wrota Anubisa 1

Read more

Na nieznanych wodach - Tim Powers - ebook

Read more

Helion - Ajax on Rails - Scott Raymond [HQ]

Read more

JavaScript and AJAX for Dummies (ISBN - 0470417994)

Read more

Noam Chomsky Powers and Prospects

Read more

Noam Chomsky - Powers and Prospects

Read more

Ullman C. - Ajax. Od podstaw

Read more

Riordan R. - Head First. Ajax

Read more

Powers Tim - Ostatnia odzywka 01 - Ostatnia odzywka

Read more

The Central Powers (Images of War)

Read more

S.20 -S.21

Read more

S O S Laconia

Read more

S samolot

Read more

S Notatka

Read more

Alarm S

Read more

Profile Morskie 1-700 vol.1 (HMS Resolution 1942HMS Eagle 1942HMS Ajax 1940 HMS Naiad 194

Read more

s-10

Read more

koszulki s

Read more

s-3

Read more

chalk s

Read more