informatyka ajax implementacje shelley powers ebook

Wydawnictwo Helion
ul. Koœciuszki 1c
44-100 Gliwice
tel. 032 230 98 63

e-mail: helion@helion.pl

Ajax. Implementacje

Autor: Shelley Powers
T³umaczenie: Tomasz Walczak
ISBN: 978-83-246-1330-4
Tytu³ orygina³u:

Adding Ajax

Format: B5, stron: 360

Pod¹¿aj za swoj¹ wyobraŸni¹

i usprawniaj strony www za pomoc¹ efektów Ajaksa!

•

Jak u¿ywaæ kodu JavaScript do rozwi¹zywania problemu niestandardowych

atrybutów?

•

Jak ³¹czyæ funkcje obs³ugi zdarzeñ?

•

Jak tworzyæ zaawansowane efekty bazuj¹ce na CSS?

Ajax to coœ wiêcej ni¿ zbiór technologii obejmuj¹cy jêzyki oparte na znacznikach, jest
bowiem narzêdziem, które – ewoluuj¹c – na bie¿¹co dotrzymuje kroku rozwijaj¹cej siê
technice informatycznej, a tak¿e wyobraŸni programistów. Po zastosowaniu
stopniowego usprawniania mo¿na dodawaæ nowoczesne efekty Ajaksa i w ten sposób
przenosiæ tradycyjne aplikacje sieciowe i ich funkcjonalnoœæ na wy¿szy poziom.

„

Ajax. Implementacje

”

to ksi¹¿ka dla programistów, którzy maj¹ doœwiadczenie

w tworzeniu witryn internetowych i s¹ zainteresowani ulepszaniem istniej¹cych ju¿
aplikacji. Czytaj¹c j¹, nauczysz siê, jak zwiêkszaæ mo¿liwoœci stron www poprzez
dodawanie do nich efektów Ajaxa, dowiesz siê, jak korzystaæ z jêzyka SVG oraz obiektu
Canvas. Poznasz jedn¹ z najciekawszych mo¿liwoœci Ajaksa, czyli dodawanie us³ug
sieciowych i ³¹czenie danych bezpoœrednio na stronach internetowych na wiele ró¿nych
sposobów.

„

Ajax. Implementacje

”

zawiera ca³¹ niezbêdn¹ wiedzê potrzebn¹, aby mieæ

nowoczesne i funkcjonalne strony www, nie buduj¹c ich od nowa.

•

Stronicowanie w Ajaksie

•

Strefa bezpieczeñstwa i zabezpieczenia jêzyka JavaScript

•

Obs³uga zdarzeñ zgodna z Ajaksem

•

System obs³ugi zdarzeñ Dojo i obiekty docelowe

•

Dane dynamiczne

•

Prawid³owe wspó³dzia³anie Ajaksa z innymi elementami aplikacji

•

Efekty bibliotek zewnêtrznych s³u¿¹ce do obs³ugi danych

•

Historia, nawigacja i miejsca w aplikacjach jednostronicowych

•

Dodawanie zaawansowanych efektów wizualnych

•

Witryny typu mashup

•

Skalowanie, infrastruktura i tworzenie witryn od podstaw

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

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

3. Narz

ýdzia i pojýcia zwiézane z Ajaksem ...................................................................79

Prototype

script.aculo.us

Rico

Dojo

Inne biblioteki

_ Spis treļci

4. Efekty interaktywne .................................................................................................. 103

Obsäuga zdarzeþ zgodna z Ajaksem

104

Informacje w trybie JIT

110

Podglñd na stronie

121

Zanikanie kolorów w wyniku sukcesu lub niepowodzenia

126

5. Przestrze

ħ — ostateczna granica ............................................................................. 135

Przestrzeþ w poziomie — accordion

136

Strony z zakäadkami

159

Nakäadanie

170

6. Dane dynamiczne .......................................................................................................177

Edycja w miejscu

178

Edycja w miejscu — wydajnoĈè, bezpieczeþstwo i dostöpnoĈè

188

WyróĔnianie zmian

191

Jeszcze raz o dostöpnoĈci aktualizacji na stronie

202

Walidacja na Ĕywo

205

WydajnoĈè i dwuetapowe zatwierdzanie

208

Efekty bibliotek zewnötrznych säuĔñce do obsäugi danych

211

7. Historia, nawigacja i miejsca w aplikacjach jednostronicowych ............................. 215

Wyzwanie — stronicowana zawartoĈè

216

Zapamiötywanie miejsc

235

TrwaäoĈè w starym i nowym stylu — ramiö w ramiö

242

Nowy wyglñd strony

249

Analiza koþcowa

252

8. Dodawanie zaawansowanych efektów wizualnych ...............................................253

Zaawansowane sztuczki z CSS

254

Skalowalna grafika wektorowa

264

Krótki przeglñd jözyka SVG

269

Mikser — SVG i Ajax

273

PrzyszäoĈè grafiki

280

9. Witryny typu mashup ................................................................................................ 281

WyĈwietlanie map za pomocñ Google’a

282

Druga usäuga — Flickr

288

Dodawanie usäug Technorati do witryny mashup

299

Modyfikowanie witryny mashup

307

Nowa wersja klientów

316

Podsumowanie informacji o witrynach mashup

325

Spis tre

ļci

10. Skalowanie, infrastruktura i tworzenie witryn od podstaw ................................... 327

Platformy — Ĉcisäe czy luĒne powiñzanie

328

Usäugi sieciowe — zasoby i bezpieczeþstwo

329

Biblioteki Ajaksa — wäasne czy zewnötrzne?

331

Projektowanie aplikacji ajaksowych od podstaw

332

Rekomendowane platformy

337

A wiöc naprzód z Ajaksem

342

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

253

ROZDZIA

Ĥ 8.

Dodawanie zaawansowanych

efektów wizualnych

Ajax nie wymaga skomplikowanych efektów wizualnych. Jedyne potrzebne efekty to te przed-
stawione w poprzednich rozdziaäach: moĔliwoĈè dodawania, zmieniania i usuwania zawar-
toĈ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 prze-
glñ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 sprawdza-
nia aktualizacji.

Przy dodawaniu zaawansowanych efektów wizualnych do aplikacji sieciowych moĔna zasto-
sowaè dwa podejĈcia. Pierwsze z nich jest dostöpne we wszystkich przeglñdarkach interneto-
wych i opiera siö na efektach zarzñdzanych za pomocñ stylów CSS. Obejmuje to przezroczy-
stoĈè, 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 zaawansowa-
nych efektów wizualnych jest wbudowana w niemal wszystkie powszechnie uĔywane prze-
glñdarki, jednak kaĔda z nich wspóädziaäa tylko z niektórymi rozwiñzaniami, a Ĕadna techni-
ka nie jest powszechnie obsäugiwana we wszystkich najwaĔniejszych przeglñdarkach.

254

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

Inne firmy promujñ nastöpnñ specyfikacjö graficznñ: skalowalnñ grafikö wektorowñ (ang.
Scalable Vector Graphics — SVG). Format SVG jest obecnie obsäugiwany w przeglñdarkach opar-
tych 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 konsor-
cjum 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 imple-
mentacjö 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. Wspo-
minam o nim, tylko opisujñc biblioteki, które zapewniajñ obsäugö VML i SVG w róĔnych prze-
glñ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öp-
nieniu nowej, ustandaryzowanej wersji znaczników, bödñcej alternatywñ dla progra-
mistó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 prze-
noszenie 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 zastoso-
wanie 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 utworze-
nia 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.

Zaawansowane sztuczki z CSS

_ 255

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ö

(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');

256

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

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Ĕy-
wa innych komponentów do odmiennych zadaþ, moĔe zastosowaè bibliotekö Visual do za-
okrñ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Ĕ biblio-
teki. Warto jednak pamiötaè o tym, Ĕe jeĈli rozwiñzanie opiera siö na kodzie JavaScript, a ob-
sä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 wbudo-
wanñ obsäugö pasków przewijania, a obecnie moĔna znaleĒè mnóstwo bibliotek jözyka Java-
Script 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

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 wy-
miar. 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 po-
staci suwaka, podobnie jak script.aculo.us. Wpisanie w wyszukiwarce säowa „slider” praw-
dopodobnie pozwoli znaleĒè komponent w postaci suwaka, dokumentacjö stosowania wbu-

Zaawansowane sztuczki z CSS

_ 257

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 na-
wigacja po zawartoĈci strony podzielonej na warstwy w formie stron z zakäadkami czy poka-
zu 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 przy-
kä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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Suwak</title>
<link rel="stylesheet" type="text/css" href="pagination.css" />
<!-- Pliki

Ĩródáowe z przestrzenią nazw -->

<!-- Zale

Īne pliki Ĩródáowe -->

<!-- Plik

Ĩródáowy do obsáugi suwaka -->

<script type="text/javascript" src="addingajax.js">
</script>
<script type="text/javascript" src="paginate.js">
</script>

</head>
<body>
<div id="container">
<div id="sliderbg">
<div id="sliderthumb"><img src="verticalSlider.gif" alt="suwak" /></div>
</div>
<div id="main">
<div id="inner">
</div>
</div>
</div>
</body>
</html>

258

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

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 usta-
wienie 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 li-
stingu 7.9 z rozdziaäu 7. Jedyna róĔnica polega na tym, Ĕe w czasie wczytywania strony two-
rzona 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
};

Zaawansowane sztuczki z CSS

_ 259

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 <td>
var cell = document.createElement("td");

// Tworzy w

Ċzeá tekstowy

var text = document.createTextNode(value);

// Do

áącza utworzony wĊzeá tekstowy do komórki <td>

cell.appendChild(text);

// Do

áącza komórkĊ <td> do wiersza <tr>

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');

260

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

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 <tr>
var row = document.createElement("tr");

row = createTableCell(rowsObj[i].id, row);

// Tworzy znacznik anchor i tytu

var cell = document.createElement("td");
cell.innerHTML = "<a href='" + rowsObj[i].guid + "'>" + rowsObj[i].title +
"</a>";
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ñ prze-

suniö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 prze-
ciñ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 ostat-
niej 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 ele-
mentowi zawierajñcemu tabelö trzeba nadaè pozycjö wzglödnñ, zachowujñc jednoczeĈnie po-
zycjö 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 utwo-
rzeniu 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 opi-
sany 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.

Zaawansowane sztuczki z CSS

_ 261

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 zachowa-
nia 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 po-
ruszania 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 spo-
pularyzowanego 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

(

Wspomniane menu rozwiniöto nastöpnie jako Son of Suckerfish. Nowa wersja umoĔliwia sto-
sowanie 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 doda-
waniu efektów jözyka DHTML czy Ajaksa do witryny. Dlatego nie zalecam stosowania Ĕad-
nych menu DHTML, chyba Ĕe majñ dziaäaè w aplikacji caäkowicie zaleĔnej od skryptów. W ta-
kiej sytuacji wäñczenie lub wyäñczenie obsäugi skryptów to kwestia hipotetyczna.

262

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

Przeno

ļne kontenery

Materiaäy przedstawione w tym punkcie zapoĔyczyäam z napisanej przeze mnie ksiñĔki do-
tyczñcej jözyka JavaScript, Learning JavaScript

(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è pro-
dukty 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<title>Efekt podobny do Google Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#div1
{
border: 5px solid #000;
height: 200px;
left: 100px;
overflow: hidden;
position: absolute;
top: 100px;
width: 400px;
}
img
{
border: 1px solid #000;
}
</style>
<script type="text/javascript" src="addingajax.js">
</script>
<script type="text/javascript" src="draggable.js">
</script>
</head>
<body>
<div id="div1" >
<img id="img1" src="robin1.jpg" alt="du

šy rysunek ciekawskiego drozda" />

</div>
</body>
</html>

Wydanie polskie: JavaScript. Wprowadzenie, Helion, 2007 — przyp. täum.

Zaawansowane sztuczki z CSS

_ 263

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 identy-

fikator 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 = mousePos.y - mouseOffset.y + "px";
dragObject.style.left = mousePos.x - mouseOffset.x + "px";
return false;
}
}

// Umo

Īliwia przeciąganie obiektu

function makeDraggable(item){

264

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

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ö do-
bry 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 wyskaku-
jñce czy wprowadzanie elementów na stronö. Dostöpne s

ñ takĔe efekty, które powodujñ wy-

buchanie, wyskakiwanie czy przesuwanie siö obiektów. WiökszoĈè bibliotek Ajaksa udostöp-
nia takie funkcje poprzez rozszerzenie, bibliotekö podrzödnñ lub wtyczkö o nazwie

effects

lub

. 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 spe-
cyfikacji.

Obecnie format SVG jest obsäugiwany przez przeglñdarki Firefox i Opera, planowane jest do-
danie jego obsäugi do przeglñdarki Safari (w automatycznie kompilowanych wersjach ta ob-
sä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 fir-
my 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 ry-
sunkó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ñtrzwierszo-
wego kodu SVG.

Skalowalna grafika wektorowa

_ 265

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 ele-

mentu 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 ele-
mentu

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 tech-
nika 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 ra-
mek

iframe

. Ten element jest obsäugiwany we wszystkich docelowych przeglñdarkach, a po-

nadto 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 obramo-
waniem. 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) przej-
dzie 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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<ellipse id="ellipse1" cx="210" cy="90" rx="200" ry="80"

266

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

style="fill:rgb(255,0,0);
stroke:rgb(0,0,0);stroke-width:2"/>

</svg>

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 interneto-
wej przedstawionej na listingu 8.6 uĔyto wszystkich trzech elementów säuĔñcych do otwiera-
nia plików SVG:

object

embed

iframe

Listing 8.6. Strona wczytujñca plik SVG za pomocñ trzech technik

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
<head>
<title>Zagnie

šdšony plik SVG</title>

Īugi SVG</p>

</object>
<h3>Element iframe</h3>
<iframe src="test.svg" width="600" height="180" frameborder="0">
<p>Brak obs

Īugi SVG</p>

</iframe>
</body>
</html>

MoĔna przetestowaè tö stronö w róĔnych przeglñdarkach. W przeglñdarce Firefox 2.0 widocz-
ne sñ trzy czerwone okrögi. Jest to oczekiwane dziaäanie, poniewaĔ ta wersja Firefoksa (i uĔy-
wanego w nim silnika Gecko) obsäuguje wiökszñ czöĈè specyfikacji SVG 1.1. Trzy okrögi sñ wi-
doczne 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 sy-
gnalizuje, Ĕ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öp-

ny bez wtyczki firmy Adobe, jednak nawet z niñ obsäugiwane bödñ tylko elementy

object

iframe

. To samo dotyczy przeglñdarki Internet Explorer 7 w systemie Windows XP. Ponie-

waĔ

iframe

to prawidäowy element XHTML Transitional (choè juĔ nie Strict), warto ograni-

czyè siö do niego przy zagnieĔdĔaniu plików SVG.

Dostöpna jest wyspecjalizowana wtyczka dla przeglñdarki Konqueror, KSVG, wcho-
dzñca w skäad Ĉrodowiska KDE. Wiöcej informacji o niej zawiera strona pomocy tech-
nicznej w witrynie http://svg.kde.org.

Skalowalna grafika wektorowa

_ 267

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 mani-

pulowania 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

(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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<ellipse id="ellipse1" cx="210" cy="90" rx="200" ry="80"
style="fill:rgb(255,0,0);
stroke:rgb(0,0,0);stroke-width:2"/>
<script type="text/javascript">
<![CDATA[
document.getElementById('ellipse1').onclick=changeColor;

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 do-
kumencie XHTML klikniöcie dowolnego z trzech okrögów spowoduje przeksztaäcenie dane-
go elementu (oczywiĈcie zaleĔy to od uĔywanej przeglñdarki).

268

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

Informacje dla osób, które nie korzystaäy dotñd zbyt czösto z wymiarów stron: wszyst-
kie wartoĈci powiñzane z literñ y dotyczñ osi pionowej, x jest powiñzana z osiñ pozio-
mñ, a z — z prostopadäñ do dwóch pozostaäych. Inaczej mówiñc — y to bok, x to pod-
stawa, 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 przynajm-
niej 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 progra-

mista 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 skompli-
kowane, 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 trakto-
wana 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 precyzyj-
nie — 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 pra-
widä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 za-
gnieĔdĔonym kodem SVG dziaäajñce we wszystkich przeglñdarkach, a jest to ta sama tech-
nika, która umoĔliwia prawidäowe przetwarzanie stron XHTML (jej opis znajduje siö w roz-
dziale 1.). To obejĈcie problemu polega na utworzeniu pliku .htaccess w katalogu witryny i do-
daniu 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

Krótki przegl

éd jýzyka SVG

_ 269

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 wspo-
minam o pewnych popularnych elementach i operacjach, co pozwoli na rozpoczöcie korzy-
stania 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 wy-
sokoĈè, 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 obiek-

tó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 — oczy-
wiĈ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ñtrz-
wierszowy 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 prze-
szedä 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Kod SVG zagnie

šdšony w XHTML</title>

270

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

</head>
<body>
<h1>Kod SVG zagnie

šdšony w XHTML</h1>

</svg:svg>

</body>
</html>

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. Zaj-
mijmy siö teraz elementami strony. Element

polyline

tworzy liniö na podstawie grupy punk-

tó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 wyzna-

czajñ podane wspóärzödne

(pozycja w poziomie i w pionie), a Ĉrednica tego okrögu to

. 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

. Ten element oraz

ellipse

(podobnie jak

circle

) sñ umieszczane w elemencie

svg

na podstawie wartoĈci

oraz

. Wszystkie figury majñ wartoĈci

fill

stroke

(ta ostatnia okreĈla ramkö), a ele-

menty

rectangle

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 zygza-
kowaty 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 zasto-
sowanie stylów i atrybutów SVG. Ponadto warto zauwaĔyè, Ĕe w przykäadzie uĔyto nazw ko-
loró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 szes-
nastkowym (takich jak

#ff0000

; moĔna je spotkaè w arkuszach CSS).

Krótki przegl

éd jýzyka SVG

_ 271

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 sto-
sowaè 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 nazwa-

ny 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

<?xml version="1.0" standalone="no"?>
<svg viewBox="0 0 1100 400"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<circle id = "s1" cx = "200" cy = "200" r = "200" stroke = "#F5B800"
stroke-width = "1"/>
<radialGradient id = "g1" cx = "50%" cy = "50%" r = "50%">
<stop stop-color = "#f00" offset = "0%"/>
<stop stop-color = "#ff0" offset = "75%"/>

272

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

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 po-
czñ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 ele-
mentami za pomocñ skryptów moĔna poäñczyè efekty Ajaksa z grafikñ opartñ na SVG i two-
rzyè 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 pro-
ducenci 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Ĉè ryzykowa-
ne rozwiñzanie, dostöpne sñ edytory, które umoĔliwiajñ manipulowanie obiektami i genero-
wanie kodu SVG. Jednym z takich programów jest Inkscape (http://www.inkscape.org), dostöpny

Mikser — SVG i Ajax

_ 273

w wersjach dla systemów: Mac OS X, Windows i Linux. Istniejñ teĔ inne narzödzia tego ty-
pu, 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ñ zaan-
gaĔ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 interneto-
wych. 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 po-
zwoliè 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 ele-
mentó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 wy-
róĔ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

em-

bed

, 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= document.createElement('object');
obj.type = 'image/svg+xml';
obj.id = 'svgDoc';
obj.data = 'bubble.svg';

274

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

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

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 przypad-
ku dodanie kodu SVG do dokumentu XHTML jest niezwykle proste — jeĈli tylko dana prze-
glñdarka obsäuguje ten format.

Listing 8.10. Przykäad stronicowania zintegrowanego z SVG

îbelek</title>

Mikser — SVG i Ajax

_ 275

Ĩródáowy z przestrzenią nazw -->

<!-- Pliki

Ĩródáowe niezbĊdne ze wzglĊdu na zaleĪnoĞci -->

<!-- Plik

Ĩródáowy z suwakiem -->

<script type="text/javascript" src="addingajax.js">
</script>
<script type="text/javascript" src="paginate2.js">
</script>

</head>
<body>
<div id="container">
<div id="sliderbg">
<div id="sliderthumb"><img src=" verticalSlider.gif" alt="uchwyt suwaka"
/></div>
</div>
<div id="main">
<div id="inner">
</div>
</div>
</div>
<div id="obj">
</div>
</body>
</html>

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ñ ob-
sä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, prawdopodob-
nie 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 prze-
glñ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), JsVector-
Graphics (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”.

276

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

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özy-
ka HTML. Ten element jest obsäugiwany przez przeglñdarki oparte na Gecko, takie jak Fire-
fox, 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 pro-
wadzi 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 can-
vas (http://developer.mozilla.org/en/docs/Canvas_tutorial). TakĔe firma Apple ma podob-
nñ stronö (http://developer.apple.com/documentation/AppleApplications/Conceptual/Safari-
JSProgTopics/Tasks/Canvas.html).

Obiekt

canvas

jest doĈè äatwy w uĔyciu. Najpierw wystarczy dodaè element

canvas

do strony

internetowej:

Mikser — SVG i Ajax

_ 277

Aby utworzyè grafikö, naleĔy pobraè kontekst obiektu

canvas

, uĔywajñc specyficznej dla te-

go 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 obiek-
cie

canvas

na stronie XHTML), tworzyè wykresy funkcji kwadratowych i tak dalej. Po utwo-

rzeniu 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Ĕ zasto-
sowaè 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

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";

Czytaj dalej...

278

Rozdzia

ĥ 8. Dodawanie zaawansowanych efektów wizualnych

// 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

áącza komórkĊ tabeli

function createTableCell(value,tr) {

// Tworzy element <td>
var cell = document.createElement("td");

// Tworzy w

Ċzeá tekstowy

var text = document.createTextNode(value);

// Do

áącza utworzony wĊzeá tekstowy do komórki <td>

cell.appendChild(text);

// Do

áącza komórkĊ <td> do wiersza <tr>

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 <tr>
var row = document.createElement("tr");
row = createTableCell(rowsObj[i].id, row);

// Tworzy element anchor oraz tytu

var cell = document.createElement("td");
cell.innerHTML = "<a href='" + rowsObj[i].guid + "'>" + rowsObj[i].title +
"</a>";

Wyszukiwarka

Podobne podstrony:

więcej podobnych podstron