Oracle Database. Tworzenie
aplikacji internetowych
w AJAX i PHP
Autorzy: Lee Barney, Michael McLaughlin
T³umaczenie: Andrzej Stefañski
ISBN: 978-83-246-1977-1
Tytu³ orygina³u:
& PHP Web Application Development
Format: 168
×237, stron: 408
Wykorzystaj mo¿liwoœci najlepszych technologii!
• Jak wykorzystaæ obiekt XMLHttpRequest?
• Jak manipulowaæ modelem DOM?
• Jakie mo¿liwoœci kryje w sobie jêzyk PL/SQL?
Duet PHP i MySQL cieszy siê nies³abn¹c¹ popularnoœci¹. Jednak na rynku rozwi¹zañ
bazodanowych istnieje tak¿e wiele innych produktów. Wœród nich znajdziesz równie¿
bazê danych firmy Oracle. Przez znaczn¹ czêœæ profesjonalistów uwa¿ana jest ona za
najlepsz¹, najbezpieczniejsz¹ i najwydajniejsz¹ platformê do tworzenia zaawansowanych
rozwi¹zañ. Dziêki tej ksi¹¿ce dowiesz siê, jak wykorzystaæ bazê Oracle w po³¹czeniu
z PHP oraz dynamicznymi mo¿liwoœciami technologii AJAX.
W pierwszej kolejnoœci zapoznasz siê z mo¿liwoœciami skalowania rozwi¹zañ
korzystaj¹cych z JavaScriptu i PHP. Nastêpnie nauczysz siê wykorzystywaæ obiekt
XMLHttpRequest, a st¹d ju¿ tylko krok do opanowania technologii AJAX. Ponadto dowiesz
siê, jak manipulowaæ elementami w modelu DOM oraz pracowaæ zdalnie z obiektami
PHP. Autorzy ksi¹¿ki w wyczerpuj¹cy, a równoczeœnie przejrzysty i przyjazny sposób
wprowadz¹ Ciê w tajniki administrowania bazami Oracle oraz pos³ugiwania siê sk³adni¹
jêzyków SQL i PL/SQL, wykorzystywanych w tej bazie. Ksi¹¿ka ta w umiejêtny sposób
³¹czy wiedzê na temat projektowania przyjaznego i dynamicznego interfejsu u¿ytkownika
oraz zastosowania najlepszych rozwi¹zañ w dziedzinie baz danych.
• Skalowalnoœæ JavaScriptu i PHP
• Obiektowoœæ w tych jêzykach
• Mo¿liwoœci i sposoby wykorzystania obiektu XMLHttpRequest
• Manipulowanie modelem DOM za pomoc¹ JavaScriptu
• Zdalne wywo³ania w PHP i HTTP-RPC
• Obs³uga przycisku „Cofnij” w AJAX-ie
• Zalecenia przy tworzeniu skalowalnych i elastycznych aplikacji
• Udostêpnianie VOIP oraz IM
• Wykaz znaczników HTML
• Podstawy jêzyka PHP
• Administrowanie bazami danych Oracle
• Sk³adnia i wykorzystanie jêzyka SQL oraz PL/SQL
Projektuj skalowalne i elastyczne aplikacje!
Spis treci
5
Spis treci
O autorach ................................................................................................. 9
O redaktorze technicznym ........................................................................ 11
Wprowadzenie .......................................................................................... 13
Cz I
Tworzenie podstaw ............................................................... 17
Rozdzia 1. Skalowalno JavaScript i PHP ................................................................. 19
Skalowalno ...............................................................................................................................20
Redukcja obcienia procesora i pamici ....................................................................................21
Skalowanie struktur kontrolnych .................................................................................................22
Skalowanie przetwarzania cigów znaków ..................................................................................26
Skalowanie prostych operacji matematycznych ..........................................................................28
Wpyw obiektów i ich metod na skalowanie ...............................................................................33
Wpyw wielokrotnych da wydruku na skalowanie .................................................................35
Redukcja obcienia sieci ............................................................................................................36
Wykorzystanie AJAX do zmniejszenia obcienia sieci .......................................................36
Wykorzystanie kompresji do zmniejszenia obcienia .........................................................38
Podsumowanie .............................................................................................................................40
Rozdzia 2. Modularno PHP i JavaScript .................................................................. 41
Modularno ................................................................................................................................41
Projektowanie w rzeczywistym wiecie ......................................................................................42
Gówny modu i kontrolery .........................................................................................................49
Kontroler aplikacji i odwzorowania ............................................................................................50
Modularno JavaScript z kontrolerami i odwzorowaniami ........................................................52
Podsumowanie .............................................................................................................................54
Rozdzia 3. Obiekty JavaScript i PHP .......................................................................... 55
Definiowanie i tworzenie klas .....................................................................................................55
Dziedziczenie ..............................................................................................................................59
Konstruktory ................................................................................................................................61
Publiczne, chronione i prywatne ..................................................................................................63
Atrybuty i metody w JavaScript ..................................................................................................66
Obiekty modelu, kontrolera i obiekty kontrolne w PHP ..............................................................69
Obiekty modelu, kontrolera i obiekty kontrolne w JavaScript .....................................................74
Podsumowanie .............................................................................................................................76
6
Oracle Database. Tworzenie aplikacji internetowych w AJAX i PHP
Cz II Dynamiczna prezentacja: komunikacja
midzy interfejsem uytkownika i serwerem .......................... 77
Rozdzia 4. Obiekt XMLHttpRequest ........................................................................... 79
Tworzenie dania i obsuga jego rezultatów ..............................................................................79
Tworzenie moduu Server Access Object ....................................................................................83
Podsumowanie .............................................................................................................................90
Rozdzia 5. AJAX, zaawansowany HTML i komunikacja HTTP ....................................... 93
Tworzenie rozwijanych tabel HTML ...........................................................................................93
Nagówki HTTP, bdy i komunikacja z serwerem ...................................................................102
Podsumowanie ...........................................................................................................................108
Rozdzia 6. Modyfikowanie DOM za pomoc JavaScript ............................................. 109
Obiektowy model dokumentu (DOM) .......................................................................................110
Przecignij i upu .....................................................................................................................112
Biblioteka ............................................................................................................................112
Obiekty kontrolne w PHP ....................................................................................................122
Obiekty kontrolne JavaScript ..............................................................................................125
Zapisywanie informacji z mechanizmu przecignij i upu w bazie danych .............................130
Podsumowanie ...........................................................................................................................133
Cz III Zaawansowane zagadnienia dynamicznej prezentacji
i komunikacji ..................................................................... 135
Rozdzia 7. Dostp do danych z innych aplikacji ........................................................ 137
Zdalne wywoania w PHP i HTTP-RPC ....................................................................................138
Zdalne wywoania za pomoc klientów i usug XML-RPC z PEAR .........................................142
Podsumowanie ...........................................................................................................................152
Rozdzia 8. AJAX, tworzenie wykresów i proste przesyanie danych ............................ 155
Korzystanie z biblioteki SimplePlot ..........................................................................................155
Generowanie danych do wykresu ..............................................................................................159
Pobieranie danych za pomoc AJAX ........................................................................................162
Podsumowanie ...........................................................................................................................165
Rozdzia 9. Przycisk cofania w AJAX ......................................................................... 167
Dodawanie ledzenia historii .....................................................................................................167
Korzystanie z historii iframe .....................................................................................................175
Sesje po stronie klienta ..............................................................................................................177
Podsumowanie ...........................................................................................................................179
Cz IV Tworzenie bardzo elastycznych, skalowalnych aplikacji ........ 181
Rozdzia 10. Sesje po stronie klienta i po stronie serwera ........................................... 183
ledzenie i wykorzystywanie stanu logowania po stronie klienta .............................................183
ledzenie i wykorzystywanie stanu logowania po stronie serwera ............................................192
Definiowanie i przechowywanie preferencji uytkownika midzy sesjami ...............................197
Wykorzystanie preferencji zapisanych przez uytkownika .......................................................201
JSON .........................................................................................................................................204
Podsumowanie ...........................................................................................................................205
Spis treci
7
Rozdzia 11. Tworzenie modyfikowanych przez uytkowników serwisów typu mashup .... 207
Tworzenie prostej strony typu mashup ......................................................................................208
Wbudowanie mashupa do systemu obsugi danych medycznych ..............................................211
Jak to dziaa ...............................................................................................................................214
Podsumowanie ...........................................................................................................................218
Rozdzia 12. Wielowymiarowa komunikacja: VOIP, IM oraz predefiniowane raporty ...... 219
Udostpnianie VOIP i IM ..........................................................................................................220
Rozproszone, ukierunkowane, raportowane ..............................................................................225
Podsumowanie ...........................................................................................................................243
Dodatki
.............................................................................. 245
Dodatek A
Indeks znaczników HTML ........................................................................ 247
Dodatek B
Wprowadzenie do PHP ............................................................................ 255
Historia i to ...............................................................................................................................256
Czym jest PHP? ...................................................................................................................256
Czym jest Zend? ..................................................................................................................257
Tworzenie aplikacji internetowych ............................................................................................257
Co z czym czy i dlaczego? ..............................................................................................257
Co Oracle wnosi do PHP? ...................................................................................................258
Dlaczego PHP 5 jest wany? ...............................................................................................259
Jak korzysta z PHP? ..........................................................................................................259
Jak za pomoc PHP i OCI8 korzysta z bazy danych Oracle? ............................................278
Podsumowanie ...........................................................................................................................299
Dodatek C
Wprowadzenie do administracji baz danych Oracle ................................. 301
Architektura baz danych Oracle ................................................................................................302
Uruchamianie i wyczanie bazy danych Oracle .......................................................................307
Operacje w systemie Linux .................................................................................................307
Operacje w systemie Windows ...........................................................................................311
Uruchamianie i wyczanie procesu nasuchujcego .................................................................314
Korzystanie z programu SQL*Plus ...........................................................................................319
Interfejs wiersza polece .....................................................................................................321
Zmienne czce ..................................................................................................................323
Podsumowanie ...........................................................................................................................323
Dodatek D
Wprowadzenie do SQL ............................................................................ 325
Typy danych Oracle SQL ..........................................................................................................326
Jzyk definicji danych (DDL) ...................................................................................................329
Zarzdzanie tabelami i ograniczeniami ...............................................................................330
Zarzdzanie widokami ........................................................................................................333
Zarzdzanie procedurami skadowanymi ............................................................................334
Zarzdzanie sekwencjami ....................................................................................................335
Zarzdzanie wasnymi typami .............................................................................................336
Jzyk pobierania danych (DQL) ................................................................................................338
Zapytania .............................................................................................................................338
Jzyk modyfikacji danych (DML) .............................................................................................342
Polecenia INSERT ..............................................................................................................342
Polecenia UPDATE .............................................................................................................344
Polecenia DELETE .............................................................................................................345
Jzyk sterowania danymi (DCL) ...............................................................................................345
Podsumowanie ...........................................................................................................................346
8
Oracle Database. Tworzenie aplikacji internetowych w AJAX i PHP
Dodatek E
Wprowadzenie do PL/SQL ...................................................................... 347
Struktura bloków PL/SQL .........................................................................................................348
Zmienne, przypisania i operatory ..............................................................................................352
Struktury sterujce .....................................................................................................................354
Instrukcje warunkowe .........................................................................................................355
Ptle .....................................................................................................................................358
Procedury skadowane, funkcje skadowane oraz pakiety .........................................................360
Funkcje skadowane ............................................................................................................361
Procedury ............................................................................................................................364
Pakiety .................................................................................................................................366
Wyzwalacze bazodanowe ..........................................................................................................369
Wyzwalacze DDL ...............................................................................................................370
Wyzwalacze DML ...............................................................................................................370
Wyzwalacze „zamiast” ........................................................................................................372
Wyzwalacze systemowe lub bazodanowe ...........................................................................372
Kolekcje ....................................................................................................................................373
Typ danych VARRAY ........................................................................................................374
Typ danych NESTED TABLE ............................................................................................375
Tablica asocjacyjna .............................................................................................................376
Interfejs kolekcji ..................................................................................................................379
Wykorzystanie pakietu DBMS_LOB ........................................................................................379
Konfiguracja i weryfikacja rodowiska dla typów LOB .....................................................379
Zapis i odczyt typu danych CLOB ......................................................................................381
Podsumowanie ...........................................................................................................................386
Skorowidz .............................................................................................. 387
Rozdzia 11.
Tworzenie modyfikowanych
przez uytkowników
serwisów typu mashup
Gdy wydajne komputery stay si popularniejsze, uytkownicy zaczli postrzega je jako narz-
dzia do agregacji informacji. Wpyno to bezporednio na rozwój funkcjonalnoci serwisów
web. Takie serwisy pozwalaj uytkownikom wybiera informacje do przegldania. Dzisiejsze
przegldarki umoliwiaj te wywietlanie kanaów RSS w postaci odnoników na stronie lub
zakadek. E-mail ju dawno zosta poczony z przegldark. Wszystko to, cznie z aplikacjami
AJAX, prowadzi uytkownika do wniosku, e skoro przegldarka suy do agregacji danych, to
takie jest te najwaniejsze zastosowanie komputera.
Poniewa uytkownicy wymagaj coraz wikszej elastycznoci aplikacji internetowych, te
musz si dostosowa . Jednym ze sposobów na to jest wykorzystanie serwisów typu mashup
wywietlajcych kilka czci rónych stron na jednej stronie. Przykadow definicj tego, czym
jest mashup, mona znale w angielskiej Wikipedii pod adresem http://en.wikipedia.org/wiki/
Mashup_ (web_application_hybrid).
Przeczytanie tego rozdziau pozwoli tworzy strony umoliwiajce uytkownikom poczenie
danych z rónych zdalnych serwisów internetowych lub aplikacji w jedn, opart na AJAX apli-
kacj internetow. Bd oni mogli zdefiniowa , jakie czci stron wywietli i gdzie maj si
one znale na stronie.
W tym rozdziale zostan poruszone zagadnienia takie jak:
wykorzystanie JavaScript do definiowania i wywietlania wielu fragmentów stron
internetowych na jednej stronie,
wykorzystanie JSON do zapisywania i pobierania danych,
API biblioteki mashup.
Dynamiczne usugi typu mashup umoliwiaj uytkownikowi dostosowanie aplikacji przy maym
wysiku zarówno ze strony samego uytkownika, jak i programisty.
208
Cz IV
i Tworzenie bardzo elastycznych, skalowalnych aplikacji
Tworzenie prostej strony typu mashup
Pielgniarze opiekujcy si pacjentami w domu nie maj tak duej kontroli nad otoczeniem swo-
ich pacjentów jak pielgniarze w szpitalu. Dlatego potrzebuj narzdzia do kontroli temperatu-
ry i jakoci powietrza w okolicy, w której mieszka pacjent. Cho istnieje wiele serwisów, które
mog dostarczy czci tych informacji dla dowolnej lokalizacji, niewiele z nich lub wrcz aden
nie dostarcza wszystkich. Aby mie aktualne informacje i dziaa profilaktycznie, pielgniarze
musieliby regularnie odwiedza kilka serwisów w cigu dnia. Due ograniczenia czasowe, jakie
ludzie ci maj w pracy, i potencjalne zagroenie zdrowia lub ycia pacjentów w wypadku igno-
rowania tego typu informacji powoduj, e potrzebny jest prosty sposób wybrania preferowa-
nych róde informacji i ich wywietlania. Serwis typu mashup nadaje si do tego idealnie.
Serwis typu mashup skada si z fragmentów innych stron internetowych umieszczonych na
jednej stronie. W swojej najprostszej postaci mashup jest definiowany przez programist lub
inyniera i nie pozwala uytkownikowi na dodawanie nowych stron. Plik mashupExample.html,
który mona pobra z ftp://ftp.helion.pl/przyklady/ordatw.zip, pokazano na rysunku 11.1. Stano-
wi on przykad takiego prostego serwisu mashup i wywietla informacje o parametrach powietrza
z obszaru Salt Lake City w amerykaskim stanie Utah.
Rysunek 11.1.
Prosta strona typu mashup w przegldarce Firefox
Ramki mashupa skadaj si z wywietlanych stron i daj uytkownikowi moliwo zmiany
rozmiaru, wybrania czci strony ródowej do wywietlenia, przesunicia wywietlanej ramki
i jej usunicia. Strona mashupExample.html zawiera równie przycisk pozwalajcy uytkowni-
Rozdzia 11.
i Tworzenie modyfikowanych przez uytkowników serwisów typu mashup
209
kowi na dodanie nowych ramek do mashupa. Wszystkie zmiany na tej stronie maj charakter
tymczasowy, poniewa nie s przesyane do zapisania na serwerze. Sposób zapisywania tych
informacji w bazie danych Oracle zosta opisany w dalszej czci tego rozdziau.
Poniewa ramki mashupa odwouj si do ródowych stron przez sie , zawsze wywietlaj
informacje z aktualnej strony zdalnego serwera. Dlatego gdy strona ródowa si zmienia, zmie-
nia si take zawarto ramki wywietlanej w mashupie. Umoliwia to utrzymanie aktualnoci
danych. Z tego powodu jedyny czynnik do wzicia pod uwag przy wybieraniu strony ródowej
dla ramki mashupa stanowi stabilno wygldu strony. Poniewa wywietlany jest tylko wybrany
obszar strony ródowej, jeli zmieni si ukad tej strony w obszarze wybranym do wywietlania,
w ramce mashupa bdzie znajdowaa si inna tre .
Opisane w tabeli 11.1 API wykorzystywane do tworzenia mashupów zawiera trzy funkcje i zaley
od biblioteki dostarczajcej mechanizm przecignij i upu , opisanej w rozdziale 6. Te trzy funkcje
umoliwiaj programicie zdefiniowanie ramek mashupa i pobranie opisu stanu kadej z nich.
Biblioteka mashup znajdujca si w pliku mashup.js do pobrania z ftp://ftp.helion.pl/przyklady/
ordatw.zip zostaa napisana w taki sposób, by obsugiwa najnowsze wersje przegldarek Fire-
fox i Safari na OS X oraz Firefox i IE w Windows. Dopracowania wymaga wsparcie przegl-
darki Firefox dla systemu Linux.
Plik mashupExample.html korzysta z dwóch funkcji API opisanych w tabeli 11.1. Skada si on
z czterech ramek mashupa — rozmieszczonych w rónych miejscach i majcych róne roz-
miary — wywietlajcych aktualn temperatur i informacje o jakoci powietrza w Salt Lake
City w amerykaskim stanie Utah.
<html>
<head>
<link rel="stylesheet" type="text/css" href="mashup.css" />
<script src="util.js" type="text/javascript"></script>
<script src="mashup.js" type="text/javascript"></script>
<script src="JSON_Util.js" type="text/javascript"></script>
<script>
function init(){
new MashFrame('www.intermountainallergy.com/pollen.html',
´'displayDiv',0,30,550,200,300,60);
new MashFrame('http://www.airquality.utah.gov/slc.html',
´'displayDiv',0,295,700,250,210,200);
new MashFrame('www.ksl.com/index.php?nid=88', 'displayDiv',625,30,400,230,850,0);
new MashFrame('www.ksl.com/index.php?nid=88',
´'displayDiv',740,310,380,220,550,40);
}
</script>
</head>
<body id='mainBody' onload='init()'>
<input type = 'button' value='Add New Page' onclick='requestNewMashFrame("displayDiv")' />
<div id='displayDiv' style='width: 1000px; height: 3000px; top: 50px;' >
</div>
</body>
</html></div>
</body>
</html>
210
Cz IV
i Tworzenie bardzo elastycznych, skalowalnych aplikacji
Tabela 11.1.
API biblioteki mashup
Funkcja
Opis
MashFrame (aURL, parentID,
xLoc, yLoc, width, height,
scrollDown, scrollRight)
Ta funkcja konstruuje ramk mashupa. Wymaga podania dwóch parametrów,
ale moe przyjmowa sze dodatkowych parametrów opcjonalnych.
Wymagane parametry:
aURL
URL róda strony. Nie musi zawiera prefiksu
http://
. Wszystkie
URL powinny korzysta z protokou HTTP, a nie FTP czy innego.
parentID
Identyfikator elementu HTML, który bdzie zawiera ramk
mashupa. Jest to zazwyczaj element
div
HTML.
Opcjonalne parametry:
xLoc
Poziome przesunicie lewej krawdzi ramki mashupa od brzegu
zajmowanego elementu HTML. Domylna warto to 0 pikseli.
yLoc
Pionowe przesunicie górnej krawdzi ramki mashupa w stosunku
do górnej krawdzi zajmowanego elementu HTML. Domylna warto
to 0 pikseli.
width
Szeroko wywietlanej ramki mashupa w pikselach. Domylna
warto to 300 pikseli.
height
Wysoko wywietlanej ramki mashupa w pikselach. Domylna
warto to 294 piksele.
scrollDown
Pionowe przesunicie w dó widocznego obszaru strony
ródowej w pikselach. Domylna warto to 0 pikseli.
scrollRight
Poziome przesunicie w prawo widocznego obszaru strony
ródowej w pikselach. Domylna warto to 0 pikseli.
requestNewMashFrame(parentID)
Ta funkcja opakowuje konstruktor
MashFrame
, korzystajc z wartoci
domylnych wszystkich opcjonalnych parametrów. Po uruchomieniu funkcja
ta pyta uytkownika o URL strony ródowej. Wymaga podania jednego
parametru.
parentID
Identyfikator elementu HTML, który bdzie zawiera ramk
mashupa. Jest to zazwyczaj element
div
HTML.
getMashupDescriptor()
Ta funkcja zwraca tablic opisów ramek mashupów. Kady deskryptor
zawiera wszystkie aktualne wartoci ramki mashupa. Zwrócona tablica
jest wykorzystywana do zapisywania aktualnego stanu wszystkich ramek
mashupa na serwerze.
Naley zauway , e element
displayDiv
ma ustawion du szeroko i wysoko . Jest to nie-
zbdne, poniewa gdy ramka mashupa jest przenoszona lub zmieniany jest jej rozmiar, czasem
kursor moe opuci szary pasek wykorzystywany do przecigania lub zmiany rozmiarów
ramki mashupa. Jest to typowe zjawisko w przegldarkach z powodu iloci czasu potrzebnego
do interpretowania i wykonywania kodu JavaScript, a nastpnie rysowania zmian. Aby to pokona ,
biblioteka mashup, za pomoc biblioteki przecignij i upu util.js, dodaje funkcj obsugujc
zdarzenia myszy do elementu nadrzdnego, co powoduje, e ramka mashupa „przechwytuje” mysz.
Czasem ten sam problem wystpuje te w obszarze wywietlania ramki mashupa. We wszystkich
przegldarkach oprócz IE ramka mashupa ponownie czy si z mysz. Przy przemieszczaniu
lub zmianie rozmiaru ramki mashupa w IE naley zachowa ostrono i przesuwa mysz do
wolno, by nie wesza w obszar wywietlania ramki. Powodem tego jest fakt, e w IE wiele aktyw-
nych komponentów, takich jak odnoniki, zawsze ma najwyszy priorytet w kolejnoci wywie-
tlania, niezaleny od priorytetu deklarowanego dla nich przez elementy nadrzdne, i dlatego kod
przechwytujcy nie moe by zaimplementowany.
Rozdzia 11.
i Tworzenie modyfikowanych przez uytkowników serwisów typu mashup
211
Poniewa biblioteka mashup.js korzysta z pustego, przykrywajcego obszar wywietlania znacz-
nika
div
, nazywanego te
glass pane
, moe wykrywa opuszczone ruchy myszy i zatrzymy-
wa ramk mashupa. W IE obiekt
glass pane
zosta usunity, poniewa aktywne komponenty
wywietlanej strony i tak byyby powyej niego. Z powodu takiej implementacji priorytetów
kolejnoci wywietlania w IE pojedyncze aktywne komponenty przechwytuj zdarzenia zwi-
zane z ruchem myszy i ramka mashupa nie jest przywizywana do kursora myszy. Dla zacho-
wania spójnoci warstwa
glass pane
zostaa tutaj usunita. W bibliotece mashup pojawiaj si
te inne ograniczenia.
Jeli wywietlana strona zawiera Flash lub inne wbudowane interpretery, moe si zdarzy , e
film lub inna zawarto tego typu bdzie widoczna nawet poza ramk mashupa. Problem ten
wystpuje czciej w Windows, zarówno w przegldarce Firefox, jak i IE, ni w OS X i nie zosta
przetestowany w systemie Linux. Wydaje si bardziej zaleny od wywietlanej strony ni od
przegldarki, dlatego naley ostronie wybiera wywietlane w mashupie strony.
Innym ograniczeniem s menu w JavaScript. Niektóre serwisy maj menu, które automatycznie
pojawiaj si po zaadowaniu strony. Takie menu równie mog czasem si pojawia nawet
wtedy, gdy znajduj si poza obszarem wywietlania ramki mashupa.
Istnieje równie rónica w funkcjonalnoci pomidzy tym, jak biblioteka mashup dziaa w sys-
temie Windows, i w innych systemach operacyjnych. Rysunek 11.1 pokazuje prosty przykad
w przegldarce Firefox pracujcej pod kontrol systemu Linux. Naley zauway , e okna mas-
hupów nie maj tam pasków przewijania. Przeciganie zawartoci w ramce mashupa zmienia
wywietlany tam obszar strony ródowej. Przy takim podejciu do wywietlania strony ródo-
wej w Firefoksie i IE pod systemem Windows obie przegldarki le odrysowyway wywietlany
obszar i poza oknem wywietlania pojawiay si widoczne pozostaoci. Problem ten znik przy
uyciu pasków przewijania pokazanych na rysunku 11.2.
Te widoczne pozostaoci nie pojawiaj si w przegldarkach Firefox i Safari dziaajcych w sys-
temach OS X i Linux, dlatego wyglda na to, e problem dotyczy biblioteki MFC Windows wyko-
rzystywanej do wywietlania grafiki w obu tych przegldarkach pod Windows.
Jest nadzieja, e z czasem biblioteka mashup zostanie usprawniona oraz rozbudowana, a pro-
blemy te zostan pokonane.
Wbudowanie mashupa do systemu
obsugi danych medycznych
Jak ju wspomniano na pocztku poprzedniego podrozdziau, wykorzystanie mashupa bardzo
pomogoby pielgniarzom opiekujcym si ludmi w ich wasnych domach. W tej sytuacji
wane jest, aby mashup by prosty w uyciu oraz pamita ustawienia. Jeli takie same kompo-
nenty interfejsu uytkownika s stosowane w innych czciach systemu obsugi danych medycz-
nych, uytkownik moe atwo wykorzysta t funkcjonalno . Wykorzystujc takie samo podej-
cie projektowe jak w innych rozdziaach tej ksiki, programista moe atwo doczy potrzebn
funkcjonalno . Rysunek 11.3 pokazuje ramki mashupa umieszczone na gównej stronie.
212
Cz IV
i Tworzenie bardzo elastycznych, skalowalnych aplikacji
Rysunek 11.2.
Prosta strona mashup wywietlona w przegldarce Firefox pod Windows
W rozdziale 10. zostao omówione, jak obiekty sesji po stronie klienta s zapisywane i pobierane
z bazy danych Oracle za pomoc AJAX. Poniewa ustawienia mashupa wprowadzone przez uyt-
kownika musz zosta zapisane, mona je doda do obiektu sesji w taki sam sposób jak infor-
macj o wybranej stronie startowej w poprzednim rozdziale. Proces logowania z rozdziau 10.
w tej sytuacji powinien pobra te ustawienia i umieci je w obiekcie sesji, tak aby byy dostp-
ne, gdy uytkownik zada wywietlenia mashupa.
Aby wykorzysta kod sucy do zapisywania obiektu sesji, musi by stworzone BCO wedug
wzoru opisanego w rozdziale 3. Obiekt
saveMashupBCO
znajduje si w pliku CO.js, który mona
pobra z ftp://ftp.helion.pl/przyklady/ordatw.zip.
function saveMashupBCO(){
//utwórz atrybut lub zastp nowym
session.addAttribute('mashupDesc', getMashupDescriptor());
//umie cig opisujcy sesj na serwerze bez korzystania z VCO
theSAO.makeCall('POST', null, 'Text', true, '',
'cmd=store&sessDef='+session.toJSONString());
}
Obiekt
saveMashupBCO
wstawia opisy wszystkich ramek zdefiniowanego przez uytkownika
mashupa, dopisujc rezultat dziaania funkcji
getMashupDescriptor
API jako atrybut obiektu
Session
. Nastpnie, wykorzystujc funkcj, która suy do zapisywania sesji klienta i któr
Rozdzia 11.
i Tworzenie modyfikowanych przez uytkowników serwisów typu mashup
213
Rysunek 11.3.
System obsugi danych medycznych po wybraniu opcji Poka Mashup
stworzono w rozdziale 10., generuje widoczne tutaj danie HTTP
POST
. Spowoduje to, e opisy
zostan zapisane w polach bazy danych zawierajcych sesj w postaci cigu znaków JSON.
Wicej o JSON mona dowiedzie si z ostatniego podrozdziau rozdziau 10.
Jak widzielimy w poprzednich rozdziaach, w sytuacji, gdy uytkownik chce wywietli mas-
hup, musi zosta wywoany BCO i odpowiadajcy mu VCO. Obiekt
mashupBCO
pokazany w poni-
szym kodzie i w pliku CO.js róni si od wikszoci omawianych dotychczas obiektów BCO
w JavaScript tym, e nie pobiera danych z serwera. Gdy uytkownik jest zalogowany, utworzony
obiekt
Session
zawiera wszystkie zapisane informacje na temat mashupa.
function mashupBCO(){
//nie jest potrzebne poczenie z serwerem, poniewa
//informacje o sesji zostay pobrane przy logowaniu
var mashupDescriptorArray = session.getAttribute('mashupDescre');
var aVCO = new mashupVCO();
aVCO.notify(mashupDescriptorArray);
}
Z tego powodu BCO musi tylko pobra te informacje z obiektu sesji i wywoa bezporednio
odpowiedni VCO, przekazujc dane jako parametr.
Oba te obiekty s bardzo proste. Obiekt
mashupVCO
znajdujcy si w CO.js jest równie bardzo
prosty dziki wykorzystaniu biblioteki mashup.
function mashupVCO(){
this.notify = function(data){
var displayString = "<div>";
214
Cz IV
i Tworzenie bardzo elastycznych, skalowalnych aplikacji
displayString += "<input type='button' value='Dodaj kolejn stron'
´onclick='requestNewMashFrame(\"mashupContainer\")' />";
displayString += "<input type='button' value='Zapisz zmiany w mashupie'
´onclick='saveMashupBCO()' />";
displayString += "<div id='mashupContainer' style='height: 4000px; width:
´2000px;'></div></div>";
document.getElementById('content').innerHTML = displayString;
MashFrame.mashCount = 0;
MashFrame.mashArray = new Array();
if(data != null){
var numFrames = data.length;
for(var i = 0; i < numFrames; i++){
var aDescription = data[i];
new MashFrame(aDescription.URL, 'mashupContainer', aDescription.left,
´aDescription.top,
aDescription.width, aDescription.height,
´aDescription.scrollDown, aDescription.scrollRight);
}
}
}
}
Obiekt
mashupVCO
powoduje wywietlenie dwóch obiektów
div
. Pierwszy zawiera przyciski umo-
liwiajce dodawanie nowych ramek mashupa oraz zapisanie opisów mashupów na serwerze. Drugi
div
zawiera same ramki mashupa. Dodatkowo ten VCO tworzy obiekt
MashupFrame
dla kadego
zapisanego opisu i umieszcza go w odpowiednim miejscu.
Jak to dziaa
Biblioteka mashup znajdujca si w pliku mashup.js do pobrania z ftp://ftp.helion.pl/przyklady/
ordatw.zip wymaga zrozumienia najwaniejszej koncepcji, modyfikowania elementów za po-
moc JavaScript, aby zmieni atrybuty stylów CSS. Aby nie odkrywa koa na nowo, wiele
z tych modyfikacji jest wykonywanych za pomoc biblioteki obsugujcej mechanizm przeci-
gnij i upu opisanej w rozdziale 6. Dziki wykorzystaniu gotowej biblioteki znajdujcej si
w pliku util.js dziaania takie jak modyfikacja lokalizacji, szerokoci i wysokoci ramek mas-
hupa s obsugiwane za pomoc gotowych funkcjonalnoci. Gdy klient jest uruchomiony w sys-
temie OS X, równie przesuwanie wywietlanej strony w ramce mashupa jest wykonywane za
pomoc przecigania i upuszczania, a nie za pomoc pasków przewijania jak w Windows.
Poza tym aby zrozumie , co dzieje si w bibliotece mashup, trzeba wiedzie , e kada ramka
mashupa skada si z dwóch gównych czci — ramki
iframe
wywietlajcej dan stron
oraz
div
przechowujcego t ramk oraz majcego styl CSS
overflow
ustawiony na
hidden
.
Aby pomóc w zrozumieniu, jak to dziaa, utworzono stron mashupBasics.html niekorzystajca
z biblioteki przecignij i upu . Strona ta, pokazana na rysunku 11.4, umoliwia uytkownikowi
modyfikowanie tych samych atrybutów CSS co biblioteka przecignij i upu , ale za pomoc
pól do wprowadzania danych.
Rozdzia 11.
i Tworzenie modyfikowanych przez uytkowników serwisów typu mashup
215
Rysunek 11.4.
Prosta strona
typu mashup
Na podstawie tego przykadu, umoliwiajcego bezporednie modyfikowanie atrybutów stylu
CSS zamiast uycia biblioteki przecignij i upu , mona zrozumie lec u podstaw prostot
wbudowywania ramek mashupa.
Plik mashupBasics.html pokazany w poniszym kodzie mona pobra z ftp://ftp.helion.pl/
przyklady/ordatw.zip. Zawiera on gównie kod HTML sucy do definiowania wywietlania.
Funkcjonalno JavaScript skada si z dwóch funkcji,
updateEmbeddedPage
oraz
getUpperLeft
´Point
. Wane jest, by zrozumie , e funkcja
updateEmbeddedPage
nie jest wykorzystywana
w bibliotece mashup, ale zostaa utworzona, aby umoliwi takie same modyfikacje jak ta biblio-
teka za pomoc biblioteki przecignij i upu .
<html>
<head>
<title>Podstawowy mashup</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#containerDiv{
width: 1px;
height: 1px;
}
#maskDiv{
width: 350px;
height: 220px;
border: solid;
position: absolute;
top: 150px;
left: 10px;
overflow: hidden;
background-color: white;
}
#display{
width: 1000px;
216
Cz IV
i Tworzenie bardzo elastycznych, skalowalnych aplikacji
height: 5000px;
border: none;
position: absolute;
}
</style>
<script>
function updateEmbeddedPage(){
var basePoint = getUpperLeftPoint(document.getElementById('containerDiv'));
var aURL = document.getElementById('url').value || 'http://www.byui.edu/CIT';
var locX = document.getElementById('locX').value || 0;
var locY = document.getElementById('locY').value || 0;
var visX = document.getElementById('visX').value || 0;
var visY = document.getElementById('visY').value || 0;
var width = document.getElementById('width').value || 350;
var height = document.getElementById('height').value || 220;
//ustaw URL ramki iframe
if(document.getElementById('display').src != aURL){
document.getElementById('display').src = aURL;
}
//ustaw pooenie góry i lewego brzegu sekcji div z zawartoci
var maskDiv = document.getElementById('maskDiv');
maskDiv.style.top = (basePoint.topValue+(locY*1))+'px';
maskDiv.style.left = (basePoint.leftValue+(locX*1))+'px';
//ustaw szeroko i wysoko sekcji div z zawartoci
maskDiv.style.width = width+'px';
maskDiv.style.height = height+'px';
//ustaw pooenie górnego i lewego brzegu ramki iframe
var display = document.getElementById('display');
display.style.top = visY+'px';
display.style.left = visX+'px';
}
//ustal odlego elementu w pikselach od góry i lewej strony,
//gdzie 0,0 jest lewym górnym rogiem strony,
//a nie innego elementu nadrzdnego
function getUpperLeftPoint(aNode){
var aPoint = new Object()
aPoint.leftValue = aNode.offsetLeft;
aPoint.topValue = aNode.offsetTop;
while((aNode = aNode.offsetParent) != null){
aPoint.leftValue += aNode.offsetLeft;
aPoint.topValue += aNode.offsetTop;
}
return aPoint;
}
</script>
<body>
<table>
<tr>
<td>URL: </td>
<td><input id='url' value='http://www.byui.edu/CIT'</td>
</tr>
<tr>
<td>Wspórzdna X: </td>
<td><input id='locX' value='0'/></td>
<td>Wsp. widoku X: </td>
<td><input id='visX' value='0'/></td>
</tr>
Rozdzia 11.
i Tworzenie modyfikowanych przez uytkowników serwisów typu mashup
217
<tr>
<td>Wspórzdna Y: </td>
<td><input id='locY' value='0'/></td>
<td>Wsp. widoku Y: </td>
<td><input id='visY' value='0'/></td>
</tr>
<tr>
<td>Szeroko
: </td>
<td><input id='width' value='350'/></td>
<td>Wysoko
: </td>
<td><input id='height' value='220'/></td>
</tr>
</table>
<input type='button' value='Update Display' onclick='updateEmbeddedPage()';
<hr/>
<div id='containerDiv'>
<div id='maskDiv'>
<iframe id='display' src="http://www.byui.edu/CIT" ></iframe>
</div>
</div>
<div style='position: absolute; top: 500px;'>
</div>
</body>
</html>
Funkcja
updateEmbeddedPage
rozpoczyna si od pobrania wszystkich wartoci z wejcia strony
i zapisania ich w zmiennych wewntrz JavaScript. Jeli uytkownik nie wprowadzi odpowied-
nich wartoci, do zmiennych przypisywane s domylne wartoci. Gdy zostanie to wykonane,
rozpoczyna si proces modyfikacji stylów CSS.
Jak zostao powiedziane wczeniej, istniej dwa gówne elementy: zawierajcy ramk element
div
nazwany
maskDiv
oraz ramka
iframe
nazwana
display
. Atrybut
iframe
src
przechowujcy
lokalizacj strony do wywietlenia jest ustawiony na warto odnalezion w polu URL. Jak
w przypadku kadej ramki
iframe
, po wprowadzeniu modyfikacji strona jest odwieana.
Góra i lewy brzeg strony wywietlanej w ramce
iframe
s ustawiane wzgldem górnego, lewego
rogu caej strony. Umoliwia to umieszczanie
maskDiv
w dowolnym miejscu. Moe to sugerowa ,
e zawarto przemieszczana jest w elemencie
maskDiv
, ale w rzeczywistoci przesuwana jest po
caej stronie. Z tego powodu ramka umieszczona jest w
maskDiv
, z wartoci
hidden
ustawion
w atrybucie
overflow
stylu CSS elementu
maskDiv
. Dziki temu caa zawarto
iframe
znajdu-
jca si poza
maskDiv
jest ukrywana. Takie zachowanie powodujce, e zawarto strony poza
iframe
jest ukrywana, daje ramce mashupa szczególne waciwoci.
Plik mashupBasics.html umoliwia eksperymentowanie z pozycj i rozmiarami elementów, co
pozwala na zrozumienie, co komponenty biblioteki przecignij i upu zastosowane w biblio-
tece mashup musz robi . Przygotowuje to te do samodzielnego analizowania samej biblioteki
mashup.
218
Cz IV
i Tworzenie bardzo elastycznych, skalowalnych aplikacji
Podsumowanie
Dziki wykorzystaniu biblioteki mashup oraz obiektów sesji po stronie serwera i ich zapisywa-
nia z rozdziau 10. wstawianie ramek mashupa do aplikacji obsugujcej dane medyczne, jak
te i umieszczanie ich na innych stronach lub w innych aplikacjach jest atwe. Umoliwia to
uytkownikowi doczanie dodatkowych danych, które s mu potrzebne, do aplikacji bez zmiany
jej kodu. Robic to, uytkownik staje si partnerem w wikszym stopniu ni kiedykolwiek wcze-
niej w historii aplikacji sieciowych i uzyskuje pewnego rodzaju poczucie wspóuczestnictwa
w tworzeniu aplikacji bez koniecznoci zapoznawania si z kodem czy nawet powicania na
to minimalnej iloci czasu. Doczenie mashupów do aplikacji zmniejsza obcienie jej twórców
i wyranie zwiksza ilo pozytywnych dowiadcze uytkowników.
Wyszukiwarka
Podobne podstrony:
Oracle Database 10g Express Edition Tworzenie aplikacji internetowych w PHP or10tw
React w dzialaniu Tworzenie aplikacji internetowych reacwd
więcej podobnych podstron