INSTYTUT INśYNIERII I GOSPODARKI WODNEJ
POLITECHNIKA KRAKOWSKA im. TADEUSZA KOŚCIUSZKI
Piotr Gogacz
WYKORZYSTANIE GOOGLE WEB TOOLKIT
DO BUDOWY SYSTEMU
DOKUMENTACJI FOTOGRAFICZNEJ
DLA POTRZEB INŻYNIERII WODNEJ
praca magisterska
studia dzienne
kierunek studiów: informatyka
specjalność: informatyka stosowana w inŜynierii środowiska
promotor: dr inŜ. Robert Szczepanek
nr pracy: 2184
KRAKÓW 2009
ul. Warszawska 24, 31-155 Kraków
tel/fax (+48 12) 628 20 41
e-mail: [email protected]
internet: www.iigw.pl
Podziękowania
Mamie za, dopingowanie oraz
motywowanie do pisania.
Spis Treści:
ROZDZIAŁ 1: WPROWADZENIE ................................................................................................................... 1
1.1
1.2
CEL ............................................................................................................................................. 2
PLAN PRACY.................................................................................................................................. 3
ROZDZIAŁ 2: WEBGIS................................................................................................................................... 4
2.1
DEFINICJA .................................................................................................................................... 5
ARCHITEKTURA WEBGIS-U ............................................................................................................................ 6
2.2
INTEROPERACYJNOŚĆ I OPEN GEOSPATIAL CONSORTIUM ....................................................................... 7
ROZDZIAŁ 3: AJAX...................................................................................................................................... 10
3.1
3.2
3.3
CZYM JEST AJAX? ....................................................................................................................... 11
OBIEKT XMLHTTPREQUEST ........................................................................................................... 14
AJAX-OWE FRAMEWORKI ............................................................................................................. 19
ROZDZIAŁ 4: GOOGLE WEB TOOLKIT ........................................................................................................ 20
4.1
WPROWADZENIE W ŚWIAT GWT.................................................................................................... 21
4.2
PODSTAWY GWT ........................................................................................................................ 25
Interfejs użytkownika – User Interface (UI) ...................................................................................... 28
Image Bundle.................................................................................................................................... 30
Zdalne Wywoływanie Procedur ........................................................................................................ 31
JavaScript Native Interface............................................................................................................... 32
Internacjonalizacja - Internationalization (I18n) .............................................................................. 35
Dostęp do elementów — Document Object Model.......................................................................... 36
Deferred Binding .............................................................................................................................. 38
ROZDZIAŁ 5: IMPLEMENTACJA APLIKACJI ................................................................................................ 41
5.1
ZAŁOŻENIA ................................................................................................................................. 42
5.2
IMPLEMENTACJA.......................................................................................................................... 43
Tworzenie – Interfejs Użytkownika................................................................................................... 43
Wykorzystanie — Image Bundle....................................................................................................... 46
Użycie kaskadowych arkuszy stylów ................................................................................................ 48
Wykorzystanie — Internacjonalizacja .............................................................................................. 49
Wykorzystanie — JavaScript Native Interface.................................................................................. 51
GWT RPC .......................................................................................................................................... 53
5.3
PREZENTACJA DZIAŁANIA APLIKACJI .................................................................................................. 55
ROZDZIAŁ 6: PODSUMOWANIE ................................................................................................................ 60
BIBLIOGRAFIA............................................................................................................................................ 61
SPIS RYSUNKÓW ....................................................................................................................................... 62
SPIS TABEL ................................................................................................................................................. 63
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rozdział 1:
WPROWADZENIE
1
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
1.1 CEL
Niniejsza
praca
magisterska
poświęcona
jest
aplikacji
internetowej
wykorzystującej mapy Google’a do zaprezentowania zbiorów fotograficznych
Regionalnego Zarządu Gospodarki Wodnej w Krakowie (RZGW). Zbiór ten (rys. 1)
dokumentuje zjawiska przyrodnicze powstające na rzekach i zbiornikach wodnych.
Wiele z fotografii pokazuje skutki powodzi, jak również prace budowlane związane
z przedsięwzięciami hydrotechnicznymi. Zbiór gromadzono przez lata, niektóre
fotografie są ponadstuletnie, ma on więc wartość historyczną. Jednakże Regionalny
Zarząd Gospodarki Wodnej w Krakowie nie udostępnia go społeczeństwu. Celem tej
pracy jest zatem stworzenie aplikacji internetowej, która zaprezentuje ten unikatowy
zbiór fotografii. Dzięki wykorzystaniu jako podkładu map Google’a użytkownik uzyska
dostęp do informacji o lokalizacji danego obiektu. Razem z informacją o położeniu
odbiorca dostanie również informację o czasie, w jakim dane zjawisko miało miejsce.
Do każdego z prezentowanych zdjęć dołączony jest odpowiedni opis. Dzięki
gromadzeniu
tych
danych
użytkownik
będzie
mieć
możliwość
wyszukania
interesujących go obiektów. Prezentowana aplikacja ma bez wątpienia wartości
edukacyjne.
Celem pracy jest również prezentacja bieżących technologii informatycznych
służących do budowy aplikacji internetowych wykorzystujących serwis mapowy.
Technologie te zostaną przedstawione w aspekcie ich wykorzystania już w konkretnej
aplikacji. Aplikacja internetowa jak już wspomniano jako podkład w prezentacji zbioru
fotograficznego
wykorzystuje
serwis
mapowy
Google’a.
Jest
to
obecnie
najpopularniejszy serwis mapowy w Internecie. Różnica pomiędzy tą aplikacją a
setkami bądź tysiącami innych serwisów polega na doborze wykorzystywanych
technologii. Przedstawione są wady i zalety poszczególnych podejść do tworzenia
systemu mogącego prezentować zbiór. Autor koncentruje się na wyjaśnieniu dlaczego
do budowy aplikacji mapowej wybrano framework — Google Web Toolkit. Framework
ten stanowi równocześnie generalną różnicę pomiędzy opisywanym serwisem,
a serwisami oferującymi podobną funkcjonalność.
2
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
1.2 PLAN PRACY
Prezentowaną pracę można podzielić na cztery główne części. Rozdział drugi,
„WebGIS”, definiuje pojęcie WebGIS-ów. Ukazuje jak duże znaczenia mają mapy
internetowe. Nakreśla także typową architekturę serwisów mapowych najczęściej
spotykaną w tego typu rozwiązaniach. Omawia kwestię interoperacyjności oraz opisuje
fenomen Google Maps.
Rozdział trzeci przedstawia technikę Ajax, która pozwala na tworzenie
interaktywnych
aplikacji.
Techniki
wykorzystywane
przez
AJAX
są
również
wykorzystywane przez framework Google Web Toolkit (GWT). Dzięki omówieniu
techniki AJAX możliwe będzie zrozumienie tego, co nowego do budowy aplikacji
internetowych wnosi framework GWT.
Kolejny rozdział opisuje framework Google Web Toolkit. GWT stanowi nowe
podejście w wykorzystaniu techniki AJAX. Do budowy aplikacji internetowej
wykorzystano właśnie ten framework. Rozdział opisuje poszczególne elementy
składające się na tę technikę tworzenia aplikacji webowych.
Rozdział piąty przedstawia założenia stawiane przed aplikacją, zapoznaje
z jej implementacją oraz prezentuje jej działanie.
Rozdział szósty stanowi podsumowanie.
Rysunek 1Kolekcja zdjęć Regionalnego Zarządu Gospodarki Wodnej w Krakowie
3
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rozdział 2:
WEBGIS
4
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
2.1 DEFINICJA
GIS – czyli Systemy Informacji Geograficznej (ang. Geographic Information
Systems) to specjalistyczne systemy służące gromadzeniu, przetwarzaniu oraz
prezentacji danych geograficznych.
Rozwój systemów GIS w ostatnich latach cechuje się bardzo dużą dynamiką,
jeszcze szybszy rozwój ma miejsce w przypadku internetowych GIS — WebGIS. Postęp
Internetu sprawił, że zwykli jego użytkownicy mają dostęp do serwisów oferujących
mapy. Czyli „WEB-GIS to taki GIS który można obsługiwać za pomocą przeglądarki
internetowej”[www.geostrada.com].
POTENCJAŁ WEBGIS
GIS swój początek miały w latach 60. ubiegłego stulecia. Pojawiły się w kręgach
akademickich kilku amerykańskich uniwersytetów oraz pozostawały (co wydaje się
dość oczywiste) w strefie zainteresowań wielu armii, w pełni świadomych potencjału
drzemiącego w tej technologii. GIS są więc, biorąc pod uwagę szybkość zmian
w informatyce dziedziną dość starą. Internet, który w ciągu niemal dwóch dekad
całkowicie zmienił funkcjonowanie gospodarki i wywarł ogromny wpływ na życie wielu
ludzi, nie mógł nie czerpać z potencjału GIS. Można oczywiście spierać się, czy to
Internet wykorzystuje systemy informacji geograficznej, czy GIS wykorzystuje siłę
Internetu. To zapewne zależy od konkretnego przypadku. Niepodważalnym natomiast
pozostaje fakt, że internetowe mapy w dalszym ciągu mają przed sobą przyszłość.
Kropka nad „i” w tej kwestii nie została jeszcze postawiona. Motorem postępu są, jak
w każdej dziedzinie, pieniądze i to nie są bynajmniej niewielkie sumy. Pieniądze te
mobilizują zarówno duże korporacje do tworzenia ogólnodostępnych serwisów
mapowych, czego przykładami są takie produkty jak: Google Maps, Yahoo Maps czy
Microsoft Live Search Maps, jak również pojedynczych web developerów, którzy
wykorzystują na swoich stronach owe serwisy mapowe. Samych stron posługujących
się tymi serwisami są tysiące. Tak więc mamy tu do czynienia z fenomenem.
5
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
ARCHITEKTURA WEBGIS-U
Tę architekturę można podzielić na trzy główne składniki: pierwszą warstwą jest
użytkownik, a konkretniej przeglądarka internetowa, poprzez którą użytkownik wysyła
zapytania oraz odbiera interesujące go dane. Drugim składnikiem jest serwer WWW,
który odbiera zapytania przesłane przez użytkownika oraz generuje na ich podstawie
odpowiedź. Trzecim składnikiem architektury typowego serwisu WebGIS jest baza
danych służąca przechowywaniu informacji. Informacje te mają często bardzo różny
charakter, mogą mieć one postać zwykłych danych, map postaci wektorowej, bądź w
postaci rastrowej. Poniżej przedstawiono typową architekturę web serwisu.
Rysunek 2: Architektura web serwisu
W modelu tym można podzielić klientów na cienkich oraz grubych. Niektórzy
dzielą również klientów web serwisów na jeszcze jedną grupę: średnich. I tak klient
cienki zazwyczaj odbiera tylko wszelkie dane, potrzebne obliczenia przeprowadzane
na serwerze. Dzięki temu użytkownik nie musi być zaawansowany i w pełni świadomy,
co znacznie poszerza potencjalne grono odbiorców. Również brak potrzeby instalacji
jakiegokolwiek oprogramowania na komputerze sprawia, że użytkownicy nie są
zniechęceni instalacją plugin-ów. Natomiast gruby klient jest przeciwieństwem klienta
cienkiego, jest bardziej świadomy. Do swojej pracy bardzo często potrzebuje
dodatkowego oprogramowania, jak choćby ArcExplorer, czy Google Earth. Jednak
założeniem rozwijanej aplikacji jest dotarcie do możliwie najszerszego kręgu
odbiorców, więc w aplikacji za potencjalnego klienta został przyjęty klient cienki.
6
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
2.2 INTEROPERACYJNOŚĆ I OPEN GEOSPATIAL CONSORTIUM
Open Geospatial Consortium, Inc (OGC) to międzynarodowe konsorcjum
składające się z ponad 300 firm, instytucji rządowych oraz uniwersytetów skupionych
na rozwoju publicznie dostępnych specyfikacji interfejsów. Konsens w rozwoju
standardów jest niezmiernie ważny ze względu na dalszy rozwój Systemów Informacji
Geograficznej. Wiele firm czy agencji rządowych posiada oprogramowanie od kilku
dostawców. Oprogramowania te często nie może ze sobą współpracować — formaty
danych są różne, co znacząco zwiększa koszty użytkowania. Dostawcy oprogramowania
muszą więc razem współdziałać, a najlepszym miejscem do osiągnięcia trwałego
konsensu jest właśnie OGC. Rozwój aplikacji powinien o ile to możliwe uwzględniać
wytyczne OGC.
Interoperacyjność to zdolność do wzajemnego współdziałania różnych
systemów informatycznych[www.idg.pl]. W praktyce oznacza to możliwość wymiany
danych. Dane te muszą mieć w związku z tym określoną strukturę tak aby systemy o
zupełnie innej architekturze również potrafiły ją zrozumieć. Jest to jeden z
podstawowych aspektów, nad którymi trwają prace w OGC.
Ukazałem już cele pracy OGC, oraz omówiłem współczesne problemy
użytkowania oprogramowania GIS. Czytelnik być może zastanawia się, co ma
wspólnego web aplikacja z bardzo zaawansowanym oprogramowaniem. Pamiętajmy,
że jednym z założeń stawianych przed aplikacją jest zdolność do rozwoju. Rozwój
serwisu jest tylko jedną z ewentualnych możliwości wykorzystania informacji
wprowadzonych do bazy. Właśnie w tym tkwi siła informatyki, to jest przecież ciągłe
użytkowanie tych samych informacji przez różnorodne systemy.
7
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Można
zapytać
jak
pogodzić
tę
naczelną
zasadę
informatyki
—
interoperacyjność — z jednym z założeń stawianych przed aplikacją, tj. szerokim
dostępem. W tym miejscu przychodzi z pomocą właśnie OGC. Na dzień dzisiejszy
w OGC trwają prace nad specyfikacją gramatyki XML-a do zakodowania i transportu
danych geograficznych dla prezentowania ich w bardziej zaawansowanych
przeglądarkach Ziemi niż sam Google Map. Do tej grupy przeglądarek należą takie
produkty jak: Google Earth, ArcExplorer firmy ESRI, czy też NASA World Wind. Za
gramatykę odpowiedzialny jest format KML. Opowiada on za to, co jest wyświetlane
oraz precyzuje sposób prezentacji. Przewiduje się, że w przyszłości w tym formacie
użytkownik otrzymywać będzie dane. Dzięki temu będzie miał możliwość zapisania
bieżących informacji i — w razie potrzeby — kontynuowania pracy w jednej z
przeglądarek Ziemi. Proces ten sprawi, że doświadczeni użytkownicy będą mogli
pracować na oprogramowaniu bardziej zaawansowanym. Również odbiorcy mniej
wprawieni, jeśli tylko będą chcieli, uzyskają możliwość przeglądania zbioru RZGW w
trójwymiarowym środowisku, co niewątpliwie może przyczynić się do wzrostu liczby
użytkowników serwisu.
Wybór formatu dekodowania i transportu danych ma więc kolosalne znaczenie,
jeśli założymy rozwój i pracę w różnorodnym środowisku.
GOOGLE MAPS I ZBIÓR FOTOGRAFII RZGW
Serwis Google Maps jest obecnie najbardziej rozpowszechnionym serwisem
mapowym w Internecie. Nie jest to bynajmniej przypadek. Fenomen popularności
Google Maps bierze się z polityki firmy Google, która zmusiła konkurentów do
wdrożenia w swoich serwisach podobnych rozwiązań. Najważniejszą cechą serwisu jest
to, że mapę Google może dodać każdy do swojej strony internetowej i to zazwyczaj
całkowicie za darmo. Mapa ta obejmuje zasięgiem całą Ziemię, zaś w przypadku wielu
zachodnich miast dzisiejsza dokładność planów była jeszcze kilkanaście lat temu
praktycznie nie do wyobrażenia.
8
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Co więcej produkt, który oferuje Google jest cały czas rozwijany — nie tak
dawno pojawiła się możliwość wykorzystania również technologii Flash w celu
prezentacji danych. Jakość zdjęć jest z roku na rok coraz lepsza. Wystarczy kilka linijek
kodu HTML i mapa jest już wstawiona w stronę. Wszystkie te zalety spowodowały, że
jako podkład w prezentacji zbioru RZGW wykorzystano serwis Google Maps. W chwili
obecnej samo wstawienie w stronę mapy nie zagwarantuje serwisowi popularności.
Aby zapewnić potencjalne grono użytkowników należy zadbać o prezentowane dane.
W tym momencie z pomocną dłonią przychodzi zbiór fotografii RZGW. Zbiór, który jak
powiedziano na wstępie jest unikatowy. Użytkownik otrzyma narzędzie umożliwiające
precyzyjną lokalizację prezentowanych zdjęć, wraz z opisem i określeniem daty
wykonania danej fotografii.
9
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rozdział 3:
AJAX
10
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
3.1 CZYM JEST AJAX?
Początki sieci World Wide Web sięgają roku 1990, kiedy to Tim Berners-Lee
stworzył pierwszą przeglądarkę internetową – Mozaic, pierwszy Web serwer oraz
pierwszą stronę internetową. Wszystko to zostało utworzone w jednym celu — aby
można było dzielić się dokumentami HTML. Pierwotnie dokumenty HTML miały postać
statyczną, zaś sieć Web działała na zasadzie: „kliknij, czekaj i odśwież”. Przeglądarka
najpierw wysyłała zapytanie HTTP, serwer generował odpowiedź — statyczny plik
HTML, aż w końcu przeglądarka odświeżała i wyświetlała nową stronę. Działanie
powyższego schematu oraz powolność internetowych łączy sprawiły, że niektórzy
użytkownicy Internetu używali innego określenia na sieć — World Wide Wait.
Filozofia działania techniki AJAX opiera się na zupełnie innym podejściu.
Zapytania kierowane są asynchronicznie — użytkownik często nie zdaje sobie sprawy,
że w tle generowane są zapytania i odbierane są odpowiedzi. Można by zapytać,
dlaczego się tak dzieje? Odpowiedź jest bardzo prosta, użytkownik nie traci nawet
na chwilę wpływu na działanie strony. Odnosi on wrażenie, jakby pracował na lokalnej
aplikacji, co zwiększa produktywność. W czasie, gdy generowana jest odpowiedź,
użytkownik może zająć się innym działaniem. Odświeżana jest tylko ta część strony,
która uległa zmianie, nie ma potrzeby odświeżania za każdym razem całej strony jak
w przypadku statycznych stron HTML.
Wiemy już, co jest fundamentem działania AJAX-a – asynchroniczna
komunikacja. W dalszym ciągu nie wiemy, czym jest sam AJAX. Otóż jest to nowy
sposób wykorzystania starych dobrych i sprawdzonych standardów:
•
JavaScript
•
XML
•
(X)HTML
•
CSS
Wszystkie te standardy są dobrze znane programistom, a co ważniejsze —
wspierane są przez wszystkie główne przeglądarki. Można więc śmiało powiedzieć,
że AJAX jest niezależny od konkretnej wersji przeglądarki.
11
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Należy również wspomnieć o pewnym elemencie AJAX-a służącym do wysyłania
asynchronicznych zapytań — XMLHttpRequest (XHR). Odpowiada on za wymianę
informacji z serwerem. Obiekt ten odpowiedzialny jest za aktualizację strony bez jej
odświeżania. XHR to serce AJAX-a. W różnych przeglądarkach w odmienny sposób
tworzony jest obiekt XMLHttpRequest, ale zasada jego działania pozostaje ta sama.
Przyjrzyjmy się teraz kolejnym składnikom czyniącym AJAX tak potężnym.
JAVASCRIPT
JavaScript to obiektowy skryptowy język programowania, stworzony pierwotnie
przez
firmę
Netscape.
Język
ten
wykorzystywany
jest
przede
wszystkim
w przeglądarkach internetowych. Służy on do interakcji z użytkownikiem, sprawdzania
danych wprowadzonych do formularzy, czy też do tworzenia zaawansowanych
układów nawigacyjnych. Obsługiwany jest przez wszystkie współczesne przeglądarki
internetowe.
Język ten obecnie rozwijany jest przez organizacje: Ecma International (ang.
European Association for Standardizing Information and Communication Systems) —
Europejskie Stowarzyszenie na rzecz Standaryzacji Systemów Informacyjnych
i Komunikacyjnych. Zadaniem tej organizacji jest standaryzacja oraz rozwój języka.
JavaScript jest również znany pod nazwą EcmaScript, jednak nazwa nie jest ona
tak popularna, więc w publikacji używana będzie nazwa JavaScript. Oficjalnym
standardem JavaScriptu jest ECMA-262. Bardzo często JavaScript bywa mylony z Javą,
jednak nie ma on z nią żadnego związku. JavaScript jest językiem interpretowanym
przez przeglądarki, nie jest on kompilowany przed użyciem.
XML
XML to rozszerzalny język znaczników (ang. Extensible Markup Language). XML
jest metajęzykiem służącym do definiowania innych języków. Nie sprecyzowano w nim
języka znaczników, jak również gramatyki. I to właśnie jest siłą XML-a. Rozmaite
technologie bazujące na XML-u dają programistom nieprawdopodobne możliwości jeśli
chodzi o wymianę informacji. Jedną z najważniejszych cech XML-a jest to, że separuje
dane od sposobu ich prezentacji.
12
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Dane w XML-u przechowywane są w pliku tekstowym, dzięki czemu są one
również zrozumiałe dla człowieka. Co więcej, można go również tworzyć oraz
modyfikować w zwykłym edytorze tekstowym. W rozproszonym i zróżnicowanym
środowisku, jakim niewątpliwie jest Internet, XML nadaje się wyśmienicie do wymiany
informacji. Ponadto XML posłużył już do stworzenia takich języków znaczników jak:
XHTML, WAP, RSS, MathML, GML oraz wielu innych.
(X)HTML
HTML, czyli hipertekstowy język znaczników (ang. HyperText Markup Language)
to język służący do definiowania dokumentów, które mogą być wyświetlane przez
przeglądarki. Opisuje on strukturę informacji zawartej w dokumencie, stworzony został
na podstawie SGML (ang. Standard Generalized Markup Language). Rozszerzeniem
HTML-a jest XHTML — rozszerzalny hipertekstowy język znaczników, będący następcą
HTML-a. Każdy dokument XHMTL-a jest także dokumentem XML. Dlatego jest on
również bardziej restrykcyjnie traktowany przez przeglądarki internetowe, które
wyświetlają dokument XHTLM jedynie wtedy, gdy jest on poprawnie zbudowany.
CSS
CSS — czyli kaskadowe arkusze stylów (ang. Cascading Style Sheets) to z kolei
język służący do prezentacji danych. Jest on zbiorem reguł (dyrektyw) na podstawie
których przeglądarka internetowa wie w jaki sposób prezentować dane. Język ten służy
do odseparowania treści od prezentacji, dzięki czemu te same dane mogą być
zaprezentowane w różny sposób, w zależności od urządzenia, które je wyświetla.
Separacja w znaczący sposób ułatwia tworzenie, a później modyfikacje aplikacji,
ponieważ modyfikacja odbywa się w jednym miejscu, a nie w różnych częściach
witryny.
Pokrótce opisałem składniki AJAX-a, jednakże dogłębne omówienie wszystkich
tych technologii wykracza poza tematykę mojej publikacji. Następnym punktem będzie
objaśnienie obiektu XMLHttpRequest.
13
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
3.2 OBIEKT XMLHTTPREQUEST
Obiekt XMLHttpRequest (XHR) implementuje interfejs pozwalający skryptom
działającym po stronie klienta na ładowanie danych z serwera asynchronicznie. Brzmi
to zawile, ale działanie obiektu XHR pozwala na pobieranie danych z serwera już po
załadowaniu strony. Po pobraniu danych obiekt ten wywołuje funkcję odpowiedzialną
za modyfikowanie bieżącej strony.
Metody oraz właściwości obiektu mają kluczowe znaczenie w wykorzystywaniu
aplikacji opartych na technice AJAX. Dane przesyłane z serwera mają najczęściej postać
XML-a, JSON-a, mogą być również przesyłane w postaci czystego tekstu. Najbardziej
znanymi aplikacjami opierającymi swoje działanie o AJAX-a są w tej chwili: Google
Gmail, Google Maps oraz Windows Live Local. Nie pozostaje mi nic innego, jak
omówienie poszczególnych składników XMLHttpRequest.
Obiekt XHR obsługuje dwa modele żądań GET oraz POST. Dzięki obsłudze
metody POST istnieje możliwość wysłania i odbioru większej ilości danych niż 512
bajtów, a jest to maksymalna ilość, jaką jest w stanie obsłużyć metoda GET. Najczęściej
metodę GET wykorzystuje się do odpytywania serwera, natomiast metodę POST do
odbioru danych z serwera. Obiekt XHR wykorzystywany w tandemie z bazą danych daje
ogromne możliwości tworzenia interaktywnej aplikacji.
Bardzo
często
można
spotkać
się
z
wykorzystaniem
obiektu
XHR
w formularzach logujących użytkownika do serwisów internetowych. W momencie,
gdy użytkownik skończy wprowadzać swój login do formularza, obiekt XHR wysyła
zapytanie do serwera „Czy użytkownik o podanym loginie istnieje?”. Jeżeli odpowiedź
jest negatywna, twórca serwisu ma możliwość poinformowania użytkownika o błędzie.
Ponieważ, odpowiedź jest bardzo szybka, użytkownik zanim jeszcze dokończy
wpisywać hasło ma szansę poprawienia błędu. Zwiększa się tym samym użyteczność
serwisu. Jest to jeden z najczęstszych sposobów wykorzystania obiektu XHR — różnego
rodzaju formularze wstawiane są w większość serwisów internetowych. Poniżej
przedstawiono schemat funkcjonowania obiektu XHR obsługującego bazę danych.
14
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rysunek 3: Obiekt XHR wykonujący zapytanie do bazy danych [opracowanie własne]
Pora zapoznać się ze sposobem tworzenia obiektu XHR. Z powodu różnic
w implementacji obiektu XHR w różnych przeglądarkach tworzenie jego jest
w niektórych z nich inne. W przeglądarkach z rodziny Internet Explorer wykorzystujemy
obiekt
ActiveX.
Natomiast
pozostałe
przeglądarki
udostępniają
metodę
XMLHttpRequest, która zwraca obiekt XHR. Poniżej przedstawiono tworzenie obiektu
XHR.
Listing: Tworzenie obiektu XHR
var xhr = false;
if(window.XMLHttpRequest) / przeglądarki spoza rodziny IE
{
xhr = new XMLHttpRequest();}
else if(window.ActiveXObject)/
IE
{
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);}
15
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Obiekt XHR posiada szereg właściwości oraz metod. Poniżej tabelarycznie
przedstawiono właściwości i metody obiektu XHR.
Tabela 1. Właściwości obiektu XHR
Właściwość
Opis
readyState
Zwraca wartość liczbową wskazującą bieżący
stan obiektu.
onreadystatechange
Funkcja obsługi zdarzenia wywoływana,
gdy zmieni się stan obiektu żadania.
status
Kod odpowiedzi serwera (np. 404 dla "Not
Found" lub 200 dla "OK").
statusText
Kod odpowiedzi serwera w postaci tekstowej
(np. "Not Found" lub "OK").
responseXML
Odpowiedź serwera w postaci XML
ResponseText
Odpowiedź serwera w postaci łancucha
tekstowego
Tabela 2. Metody obiektu XHR
Właściwość
Opis
Abort()
Anuluje bieżące żądanie HTTP.
getAllResponseHeaders()
Pobiera wartości wszystkich nagłówków HTTP.
GetResponseHeader
(etykieta)
Zwraca wartość nagłówka o podanej etykiecie
open(medota_transmisji,url
asynch, użytkownik, hasło)
Inicjalizuje żądanie.
Wskazuje metodę, URL, oraz dane
uwierzytelniające.
send(zawartość)
Wysyła żądanie.
setRequestHeader(
nazwaNagłówka,
zawartośćNagłówka )
Dodaje parę nagłówek/zawartość do żądania
HTTP.
16
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Powyższa lista właściwości i metod wykorzystywana przez obiekt XHR pozwala
tworzyć interaktywne aplikacje internetowe. Innymi słowy, wykorzystując tę nie wielką
liczbę właściwości oraz metod obiektu XHR jesteśmy w stanie tworzyć bogate
internetowe aplikacje.
Poniżej przedstawiono przykładową implementację żądania przy pomocy
obiektu XHR.
Listing: Tworzenie żądania.
xhr.open("GET", "index.html",true);
xhr.onreadystatechange=function() {
if (xhr.readyState==4) {
if(xhr.status==200){
alert(xhr.responseText);
}
}
xhr.send(null);
Poniższa tabelka zawiera listę wartości właściwości readyState, właściwość ta
jest wykorzystywana przy budowaniu żądania
Tabela 3. Lista wartości właściwości readyState
Właściwość readyState
Nazwa
Opis
0
Niezainicjowany
Obiekt nie został zainicjowany.
1
Wczytany
Obiekt ładuje swoje dane.
2
Załadowany
Obiekt ukończył ładowanie
danych.
3
Interaktywny
Możliwa jest interakcja
użytkownika z obiektem. Nawet
jeśli obiekt nie został w pełni
załadowany.
4
Gotowy
Obiekt całkowicie załadowany.
17
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Poniżej przedstawiono przykład wykorzystania AJAX-a do sprawdzenia
poprawności danych wprowadzonych przez użytkownika.
Kroki prezentowane na poniższym rysunku:
1. Klient wywołuje zdarzenie
2. Obiekt XHR jest tworzony i konfigurowany
3. Obiekt XHR wywołuje zapytanie
4. Zapytanie obsługiwane jest przez serwer WWW
5. Serwer WWW zwraca odpowiedź do obiektu XHR
6. Obiekt XHR wywołuje funkcję zwrotną
7. Dokument HTML jest modyfikowany
Rysunek 4: Wykorzystanie AJAX-a do sprawdzenie poprawności danych [Sun
Microsystems]
18
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
3.3 AJAX-OWE FRAMEWORKI
Framework (rama projektowa, szkielet) to w programowaniu struktura
wspomagająca tworzenie, rozwój i testowanie powstającej aplikacji. Z reguły na
framework składają się programy wspomagające, biblioteki kodu źródłowego i inne
podobne narzędzia. [Źródło Wikiepdia].
Celem powstawania kolejnych frameworków jest wspomaganie budowy
aplikacji. W przypadku AJAX-a, istnieje wiele różnorodnych szkieletów mających
ułatwić nam budowę aplikacji. Przystępując do tworzenia nowej aplikacji należy
zastanowić się nad wyborem najodpowiedniejszego z gotowych już szkieletów
programistycznych. Do najbardziej popularnych obecnie framworków należą: Dojo
Toolkit, Ext, GWT, JQuery, jMaki, Prototype, Yahoo! UI Library. Różnią się one
licencjami, wielkością, jaką zajmują, komponentami interfejsu użytkownika, jakie
oferują, jak również wersjami przeglądarek, które dany framework potrafi poprawnie
obsłużyć. Wybierając konkretny framework, możemy w pewnych aspektach naszej
aplikacji ułatwić sobie rozwiązanie problemów, zaś w innych utrudnić. To wszystko
musi zostać przeanalizowane zanim zabierzemy się za kodowanie.
Kolejny rozdział przedstawia framework Google Web Toolkit. Rozdział ten
stanowić będzie próbę omówienia zasadniczych wad i zalet wyboru właśnie tego
szkieletu aplikacji.
19
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rozdział 4:
GOOGLE WEB TOOLKIT
20
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
4.1 WPROWADZENIE W ŚWIAT GWT
Google Web Toolkit (GWT) to nowe podejście do tworzenia AJAX-owych
aplikacji. GWT zostało przedstawione w maju 2006 roku, jest to więc nowa
technologia. Technologia, która umożliwia tworzenie AJAX-owych aplikacji w Javie.
Wykorzystuje więc moc i mnogość narzędzi tego bardzo popularnego języka. Sercem
GWT jest kompilator, który kompiluje kod Javy do postaci JavaScriptu oraz HTML-a. Dla
programistów pracujących głównie w Javie jest to niewątpliwie duże ułatwienie
—
możliwość pisania w ulubionym języku przy pomocy tych samych narzędzi, z którymi na
co dzień pracują programując w Javie. Jednak nie jest to jedyna innowacyjność. Jest
ich o wiele więcej. A wszystkie one całkowicie zmieniają podejście do tworzenia web
aplikacji.
Google tworząc framework GWT postawiło mocny akcent na użytkownika — to
on jest najważniejszy. A najistotniejszym usprawnieniem dla końcowego użytkownika
jest szybkość działania aplikacji. Dlatego w Google wykluło się powiedzenie — „Fast is
better than slow.” Na szybkość działania aplikacji składa się wiele różnorodnych
technik, które zostały wprowadzone na potrzeby tego podejścia do tworzenia aplikacji.
Na powstanie GWT, złożyło się wiele problemów w zarządzaniu typową AJAXową aplikacją. Problemów, które do tej pory nie zostały rozwiązane przez żaden
z AJAX-owych frameworków, poza — jak można się łatwo domyślić — GWT. Do tych
problemów należy przede wszystkim debugowanie aplikacji. Debugowanie w typowej
AJAX-owej aplikacji występuje w czasie wykonywania programu. Każdy programista
wie jak trudne do wykrycia i naprawienia są tego rodzaju błędy. W przypadku
tworzenia dużej aplikacji może to stanowić olbrzymi problem dla zespołu i niekiedy
doprowadzić nawet do niepowodzenia przy realizacji projektu. Proces debugowania w
większym projekcie w tej sytuacji jest żmudny oraz długi, co automatycznie przekłada
się na wzrost kosztów wdrożenia aplikacji. Podczas prac nad aplikacją AJAX-ową zespół
programistów musi uporać się z problemem — jak efektywnie zarządzać kodem.
Istnieje również duże ryzyko utworzenia kodu „spaghetti”. Trudność sprawia nawet
dokumentowanie aplikacji.
21
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Jak widać tworzenie AJAX-owej aplikacji jest prawdziwym wyzwaniem nawet
dla zgranego zespołu. Wspomnieć należy również o najgorszej sytuacji, w której
znajdują się Web developerzy, a są nią same technologie, które wchodzą w skład AJAXa. Ponieważ AJAX składa się z szeregu różnych technologii, występujących w różnych
wersjach, które jakby tego było mało, są inaczej interpretowane przez poszczególne
przeglądarki, a te w dodatku mogą być w odmiennych wersjach — web developer musi
być prawdziwym ekspertem w tej dziedzinie. W typowym projekcie, często zdarza się,
że developer większość czasu poświęca wyłapywaniu i naprawie błędów, zamiast
wykorzystać go na rozwijanie projektu.
Zjawisko to można nazwać wręcz plagą, która web developerów wręcz
przyprawia o kołatanie serca. W końcowym rozrachunku problemy te dotykają również
użytkowników, którzy albo otrzymują produkt nie zawsze poprawnie działający w ich
ulubionej przeglądarce lub, jeśli wymagany jest bardzo stabilny produkt, jak dla
przykładu aplikacje bankowe, użytkownicy dopłacą z własnej kieszeni za rozwiązanie
tego rodzaju problemów. Tutaj z pomocą przychodzi GWT, które stara się większość
takich problemów rozwikłać, jak również nie tworzyć nowych.
Google Web Toolkit jednakże ma pewnie ograniczenie; otóż mechanizm, który
służy do indeksowania stron internetowych w przypadku aplikacji opartych o GWT
zawodzi. Zawodzi on także, w odniesieniu do typowych aplikacji AJAX-owych. Dzieje się
tak ponieważ aplikacja oparta o GWT nie składa się, jak w wypadku typowych portali, z
szeregu stron, oraz linków do nich prowadzących. Może się przez to zdarzyć, że taka
aplikacja nie znajdzie się na samym szczycie w rankingu wyszukiwarek. Można
próbować
zaradzić
temu
poprzez
stworzenie
alternatywnego
serwisu
udostępniającego pewną minimalną funkcjonalność dla użytkowników z wyłączoną
obsługą JavaScriptu. Serwis ten byłby jednocześnie indeksowany i zapewniłby
możliwość wykrycia zawartości web aplikacji przez internetowe wyszukiwarki.
Google Web Toolkit oparty jest na licencji Apache 2.0. Jest więc w pełni
darmowy, co więcej, stale rosnąca społeczność użytkowników sprawia, że GWT wydaje
się przyszłościowym frameworkiem do tworzenia web aplikacji. Pora więc na garść
suchych faktów, które pozwolą łatwiej poznać GWT.
22
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Poniżej przedstawione są korzyści, które czerpie użytkownik z wykorzystania GWT:
szybka odpowiedź na akcję użytkownika ― „Fast is better than slow”
od użytkownika nie jest wymagane instalowanie żadnego plugin-u,
czy wirtualnej maszyny Javy (JVM)
zarządzanie historią
Natomiast korzyści, które czerpie developer z użycia GWT są następujące:
jeden język programowania do zarządzania wszystkim!
błędy komplikacji, zamiast błędów czasu wykonania
testowanie — JUnit
wykorzystanie obiektowych właściwości języka Java
łatwość zarządzania dokumentacją — javadoc
Po za tym web developer już nie musi być ekspertem w zarządzaniu
niekompatybilnością i błędami, ponieważ to zadaniem GWT jest rozwiązywanie tego
rodzaju problemów. W przypadku małych projektów developer może nawet nie
wykorzystywać
JavaScript.
Nie
ma
więc
potrzeby
nauki
kolejnego
języka
programowania. Developer skupiony jest na pisaniu w jednym języku (Java) — tym,
w którym jest ekspertem. Pisze w nim po stronie serwera jak było do tej pory, jak
również po stronie klienta, z wykorzystaniem tych samych narzędzi, do których jest
przyzwyczajony. To nie jest powolna ewolucja, z jaką mieliśmy do czynienia do tej pory,
lecz z całą pewnością rewolucja, która może zmienić porządek rzeczy w Internecie.
Do głównych komponentów wchodzących w skład GWT należą:
Kompilator Java-JavaScript —tłumaczenie kodu Javy na postać kodu JavaScript
Biblioteki emulujące środowisko unieruchomienia Javy (JRE) —implementacja w
postaci JavaScriptu najczęściej używanych bibliotek Javy (większość klas
wchodzących w skład pakietu java.lang oraz część klas wchodzących w skład
pakietu — java.util)
Biblioteki klas interfejsu użytkownika — User Interfaces (UI) — zbiór interfesów i
klas służących budowaniu interfejsu użytkownika
Tryb urochomienia — hosted mode — umożliwia uruchomienie aplikacji na
maszynie wirtualnej Javy ― nie ma konieczności kompilowania do postaci
JavaScriptu i HTML-a, co ułatwia proces debugowania
23
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Samo uruchomienie aplikacji GWT może odbyć się w jednym z dwóch trybów:
Hosted mode — aplikacja uruchamia się jako bytecode Javy na
maszynie wirtualnej Javy (JVM)
Web mode — aplikacja uruchamia się jako JavaScript i HTML. Tryb
ten z reguły jest używany do wdrażania aplikacji.
Poniżej pokazano aplikację uruchomioną w trybie hosted mode.
Rysunek 5: Aplikacja działąjca w trybie hosted mode
24
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
4.2 PODSTAWY GWT
Przyszła już pora na omówienie serca Google Web Toolkit, sercem tym jest
kompilator Java-JavaScript. Kompilator w bieżącej wersji GWT 1.5 potrafi kompilować
kod Javy, jeśli kod źródłowy wykorzystuje konwencje znane z Javy 5.0. Mowa jest
w tym momencie o kodzie wykorzystywanym po stronie klienckiej. Natomiast kod
pisany po stronie serwera może wykorzystywać konwencje zawarte w Javie 5.0 jak
i nowszych wersjach.
Kompilator GWT wspiera kilka typów wynikowej postaci JavaScriptu, do tych
typów zaliczamy tryb „obfuscate” (zaciemniony). Tryb zaciemniony sprawia,
że wynikowy kod JavaScriptu przypomina zupę lub zbiór liter alfabetu, co czyni ten kod
dla człowieka całkowicie nieczytelnym. W praktyce używany jest on do ukrywania
implementacji. Istotną korzyścią wynikającą z jego stosowania jest również niewielki
plik wynikowy powstały wskutek kompilacji, co ma wpływ na szybkość działania
aplikacji. Im mniejszy plik, tym szybciej można go przesłać przez sieć.
Pracownicy Google’a uważają, że wielkość pliku ma wpływ na szybkość
interpretowania go przez przeglądarki. Jest to więc przykład wykorzystania
paradygmatu „Fast is better than slow”. Kolejnym trybem jest tryb „pretty” (ładny),
który tworzy kod możliwym do odczytania przez człowieka. Natomiast tryb „detailed”
(wyszczególnienie), przypomina tryb ładny, ale zawiera pełne nazwy klas oraz metod,
co ułatwia śledzenie kodu JavaScript.
Kompilator GWT:
wspiera przechwytywanie wyjątków Javy – bloki takie jak: try, catch
oraz finalny są całkowicie akceptowalne
nie wspiera mechanizmu refleksji oraz dynamicznego ładowania klas
nie wspiera mechanizmu serializacji Javy , zamiast niego stosuje
własne rozwiązania
wspiera następujące typy: byte, char, short, int, long ,float, double,
Object, String, jak również tablice tych typów
25
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
GWT dostarcza emulację wykonania bibliotek JRE. Jednakże GWT emuluje tylko
pewien zasób klas wchodzących w skład J2SE oraz J2EE. Dlaczego jedynie niewielki
zasób klas jest emulowany? Z bardzo prostego powodu, ponieważ JavaScript, który jest
językiem dość prostym, nie jest w stanie wykorzystać wszystkich dobrodziejstw
wynikających z użycia nawet podstawowego zestawu klas Javy SE. Nie zapominajmy o
tym, że środowiskiem uruchomieniowym JavaScriptu jest przeglądarka internetowa.
Poniżej przedstawiono zbiór klas należących do pakietów java.lang, java.io, java.sql
oraz java.util, które dostępne są dla kompilatora GWT.
Tabela 4. Klasy z pakietu java.util dostępne w GWT
Klasy
AbstractCollection
AbstractList
AbstractMap
AbstractQueue
AbstractSequentialList
Arrays
ArrayList
AbstractSet
Collections
Date
EnumMap
EnumSet
HashMap
HashSet
IdentityHashMap
LinkedHashMap
LinkedHashSet
LinkedList
PriorityQueue
Stack
TreeMap
TreeSet
Vector
Wyjatki/Błędy
EmptyStackException
NoSuchElementException
TooManyListenersExcepion
MissingResourceExcep
tion
Interfejsy
Collection
Comparator
EventListener
Enumeration
List
ListItereator
Iterator
Map.Entry
Map
RandomAccess
Set
Queue
SortedMap
SortedSet
26
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Tabela 5: Klasy z pakietu java.sql dostępne w GWT
Klasy
Date
Time
TimeStamp
Tabela 6: Klasy z pakietu java.io dostępne w GWT
Klasy
FilterOutputStream
OutputStream
PrintStream
Interfejsy
Serializable
Tabela 7. Klasy z pakietu java.lang dostepne w GWT
Klasy
Boolean
Byte
Character
Class
Double
Enum
Float
Integer
Long
Math
Number
Object
Short
StackTraceElement
String
StringBuffer
StringBuilder
System
Throwable
Wyjątki/Błędy
ArithmeticException
ArrayIndexOutOfBoundsException
ArrayStoreException
AsserationError
ArrayStoreException
ClassCastException
Exception
Error
IllegalArgumentException
IllegalStateExcetion
IndexOutOfBoundsException
NegativeArraySizeException
NullPointerException
NumberFormatException
RuntimeException
StringIndexOutOfBoundException
UnsupportableOperationException
Interfejsy
CharSequence
Clonable
Comparable
Iterable
27
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
INTERFEJS UŻYTKOWNIKA – USER INTERFACE (UI)
Biblioteki wchodzące w skład interfejsu użytkownika są bardzo podobne do klas
składających się na bibliotekę graficzną tworzącą Swing. Podobieństwo to jest celowe,
a każdy programista, który kiedykolwiek używał Swinga programując w Javie bez
problemu odnajdzie się w tym interfejsie. Biblioteki interfejsu użytkownika zawierają
wstępnie zdefiniowane komponenty, które podczas kompilacji tłumaczone są na ich
odpowiedniki w postaci JavaScriptu i HTML dla konkretnej już przeglądarki. Cały ciężar
kompatybilności interfejsu użytkownika spada na GWT. Każdy, kto choć raz starał się
stworzyć spójny, jak również działający interfejs użytkownika dla różnych przeglądarek
wie, jak trudne jest to zadanie. Poniżej przedstawiony jest przykładowy komponent
klasy „Button” interfejsu użytkownika GWT.
Rysunek 6: Button ― przykład interfejsu użytkownika
Interfejs użytkownika to nie tylko komponenty, ale również panele je
przechowujące i jednocześnie stanowiące o układzie komponentów. Panel na szczycie
hierarchii, od którego zaczyna się budowa układu graficznego to RootPanel. Domyślnie
RootPanel dołączony jest do znacznika <body> w HTML-u, jednakże może zostać
powiązany z innym elementem. Z założenia uzyskiwany jest on przy pomocy metody
„RootPanel.get()”. Natomiast aby dołączyć go do innego elementu należy wywołać
metodę RootPanel.get(String element). Wielkość każdego komponentu możemy
kontrolować przy pomocy wywołań metod takich jak: setSize(), setWidth(), setHeight().
Argumenty w wywołaniach tych metod są typu String, ponieważ typ ten jest
akceptowalny przez kaskadowe arkusze stylów.
28
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
RootPanel może zawierać inne panele, które lepiej organizują układ graficzny.
Poniżej przedstawiony został przykładowy panel „DockPanel”. Potrafi on organizować
lokalizację komponentów w oparciu o położenie w stosunku do krawędzi.
Rysunek 7: DockPanel przykład interfejsu użytkownika
Wygląd każdego komponentu został wyszczególniony w kaskadowych
arkuszach stylów (ang. CSS). Dzięki temu odseparujemy treść (w naszym przypadku są
to komponenty) od prezentacji. Dzięki temu, że prezentacja znajduje się w oddzielnym
pliku nie mieszamy treści i prezentacji, co pozwala lepiej zarządzać naszym kodem.
Przykładowo, gdybyśmy chcieli powiększyć rozmiar tekstu wyświetlonego na przycisku
w arkuszu stylów napisalibyśmy następującą regułę:
.gwt-Button { font-size: 150%; }
Oczywiście możemy tworzyć na własne potrzeby nowe komponenty, jeśli te
standardowe
nie
sprostają
naszym
oczekiwaniom.
Dostępne
są
również
niestandardowe komponenty tworzone zarówno przez społeczność użytkowników
GWT, jak również przez firmy komercyjne.
29
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
IMAGE BUNDLE
Jedną z nowości, którą wprowadziła w GWT firma Google jest „Image Bundle”,
na potrzeby pracy pokuszę się o własne tłumaczenie tego określenia jako – „zbiór
obrazków”. Ale zanim przestawię zbiór obrazków opowiem, dlaczego firma Google
wprowadziła to rozwiązanie w GWT.
Jak wspomniałem, postawą wszystkich nowinek wprowadzonych w GWT jest
paradygmat „Fast is better than slow”. Otóż pracownicy firmy Google zaproponowali
rozwiązanie problemu, który w wielu aplikacjach czy stronach internetowych jest dość
częsty. Przeglądarka internetowa pobiera z osobna każdy obrazek czy ikonę.
Pamiętajmy, że protokół HTTP 1.1 ogranicza ilość zapytań dla danej domeny/portu do
dwóch. W przypadku, gdy do pobrania jest spora ilość plików skutecznie zapychane
jest łącze internetowe. Tym samym następuje spowolnienie działania aplikacji.
Przeglądarka ma w założeniach wykorzystywać połączenie tylko dla naprawdę istotnej
pracy.
W pomyśle Google przeglądarka już nie pobiera kolejnych obrazków za każdym
razem, gdy są potrzebne. Można było oczywiście próbować ich cache’owania, ale
pamiętajmy, że również dla obrazków, które znajdują się w pamięci przeglądarki,
wysyłane są zapytania, czy dany obrazek nie uległ zmianie. Rozwiązanie Google
sprawia, że przeglądarka wysyła tylko jedno zapytanie do serwera, otrzymując tylko
jeden obrazek. Obraz ten składa się z tych wszystkich obrazków, dla których normalnie
przeglądarka wysyłałaby zapytania. I to właśnie jest zbiór obrazków.
Zbiór obrazków można utworzyć tylko z plików mających następujące typy:
png, gif, jpg. Są to zarazem najczęstsze typy plików graficznych, jakie wysyłane są do
przeglądarek.. Poniżej pokazany jest przykładowy zbiór obrazków, który powstał ze
złożenia trzech plików graficznych.
Rysunek 8: Przykład "Image bundle"
30
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
ZDALNE WYWOŁYWANIE PROCEDUR
Zdalne wywoływanie procedur (ang. Remote Procedure Call — RPC) to
technologa, której początki sięgają połowy lat 70., dość popularna w 90., a która za
sprawą GWT zyskała drugą młodość. W skrócie można powiedzieć, że GWT RPC to
metoda polegająca na wywołaniu przez klienta kodu Javy znajdującego się na
serwerze. Pozwala ona na przekazanie obiektów do/z serwera poprzez protokół HTTP.
Każdy obiekt przekazywany przy pomocy GWT musi być serializowany.
Poprawne użycie GWT RPC daje nam możliwość przeniesienia całej logiki
interfejsu użytkownika na stronę klienta. Odciąża to znacząco stronę serwera,
minimalizując ilość przesyłanych danych. Prawidłowa implementacja GWT RPC
sprawia, że protokołem HTTP przesyłane są wyłącznie dane.
Typy Javy, które są serializowane:
Prymitywne: char, byte, short, int, long, boolean, float, double.
String, Date oraz klasy opakowujące typy proste: Character, Byte,
Short, Integer, Boolean, Float, Double
Tablice serializowanych typów (włączając w to inne serializowane
tablice)
Klasy zdefiniowane przez użytkownika implementujące interfejs
Serializable
Kroki, które należy wykonać, aby zaimplementować GWT RPC:
1. Napisać dwa interfejsy serwisu:
Synchroniczny interfejs
Asynchroniczny interfejs
2. Zaimplementować serwis po stronie serwera
3. Konfiguracja serwisu w plikach:
deskryptora web.xml
w pliku definiującym moduł dostępu (rozszerzenie gwt.xml)
31
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
JAVASCRIPT NATIVE INTERFACE
JavaScript Native Interface (JSNI) to jeden z ważniejszych elementów
wchodzących w skład GWT. JSNI pozwala na wykonanie kodu JavaScript z poziomu
języka Java. W tym miejscu należy przypomnieć, że wynikiem kompilacji w przypadku
GWT jest zawsze JavaScript. Jest to więc bardzo potężne narzędzie, a przy tym pozwala
ono na wywołanie metod Javy z poziomu kodu JavaScript. Mamy również możliwość
wykorzystania obiektów Javy przez metody JavaScriptu. Zastosowanie JSNI daje nam
ogromne perspektywy, ale musimy pamiętać o kilku problemach z tym związanych.
Ponieważ kod, którym posługujemy się przy pisaniu jest niskopoziomowy, mogą
pojawić się problemy dotyczące niekompatybilności przeglądarek. Również kod
wykorzystywany przez JSNI jest trudnej optymalizowany przez kompilator GWT.
Zastosowanie JSNI można porównać do wykorzystywania kodu assemblera w zwykłym
programie.
JSNI można użyć do:
Implementacji metod Javy w JavaScripcie
Wywołanie kodu Javy z poziomu JavaScriptu i odwrotnie
Odczytywanie i zapisywanie pól Javy przy pomocy JavaScript
Metody JSNI deklarowane są jako native, deklaracja ta informuje kompilator,
że ma do czynienia z metodą macierzystą. Oprócz deklaracji metody jako native
wymagany jest specjalny blok komentarza obejmujący cały kod napisany
w JavaScripcie. Zaczyna się on od – „/*-{” , natomiast kończy się na „}-*/”.
Poniżej przedstawione jest przykładowe użycie metody JSNI do wywołania
metody JavaScript „alert” z poziomu języka Java. Musimy zapamiętać, że kiedy
w metodzie JSNI żądamy dostępu do obiektu okna lub obiektu dokumentu, dostęp ten
musimy poprzedzić odpowiednio $wnd i $doc.
public static native void alert(String msg) /*-{
$wnd.alert(msg);
}-*/;
32
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Jak już wspomniano, dzięki JSNI można również wywoływać kod Javy przy
pomocy JavaScriptu. Aby to zrobić należy użyć specjalnej składni.
[instance-expr.]@nazwa-klasy::nazwa-metody(parametry-sygnatury)(argumenty)
Gdzie:
instance-exp: kwalifikator egzemplarza klasy
nazwa-klasy: to pełna nazwa klasy wraz z ścieżką dostępu do niej
nazwa-metody: normalna nazwa
parametry-sygnatury: parametry sygnatury Java Native Interface
argumenty: aktualna lista parametrów przekazywana do metody
Dostęp do pól Javy przy pomocy JavaScriptu realizowany jest przy pomocy
następującej składni:
[instance-expr.]@nazwa-klasy::nazwa-pola
Poniższa tabela zawiera sygnatury metod używanych przez Java Native Interface (JNI)
Tabela 8. Sygnatury metod Java Native Interface
Typ sygnatury
Typ Javy
Z
boolean
B
byte
C
char
m
short
I
int
J
long
F
float
D
double
Ljava/lang/String
String
Lpełna_nazwa_klasy
pełna_nazwa_klasy
[ typ
typ[]
33
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
A oto praktyczny przykład użycia JSNI:
Package gogo;
public class PrzykladJSNI {
String mojePole;
static int mojeStatycznePole;
void Foo(String s) {
// uŜycie s
}
static void statycznyFoo(String s) {
// uŜycie s
}
public native void bar(PrzykładJSNI x, String s) /*-{
// Wywołanie metody Foo() na bieŜącej instancji klasy
//PrzykladJSNI - dlatego uŜywamy słowa this
[email protected]::Foo(Ljava/lang/String;)(s);
// Wywołanie metody Foo() na egzemplarzu x klasy PrzykladJSNI
[email protected]::Foo(Ljava/lang/String;)(s);
// Wywolanie statycznej metody statycznyFoo
@gogo.JSNIExample::staticFoo(Ljava/lang/String;)(s);
// Czytanie pola z bieŜącej instancji klasy PrzykladJSNI
var val = [email protected]::mojeStatycznePole;
// Zapis pola mojePole naleŜącego do klasy JSNI egzemplarza x
[email protected]::mojePole = Val;
// Odczyt statycznego pola - (kwalifikator egzemplarza nie
//jest wymagany)
@gogo.PrzykladJSNI::mojeStatycznePole = val;
}-*/;
34
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
INTERNACJONALIZACJA - INTERNATIONALIZATION (I18N)
Internacjonalizacja (I18n) w GWT może zostać przeprowadzona na klika
sposobów, dzięki czemu programista ma możliwość wybrania właściwej w danym
projekcie procedury. Jedno z rozwiązań I18n — wykorzystanie statycznych znaków —
opiera się na plikach właściwości. Aby jednak jakakolwiek metoda internacjonalizacji
mogła działać musimy dodać do pliku definiującego moduł GWT następującą sekcje:
Listing: Plik konfiguracyjny – (gogo.rzgw.Main.gwt.xml)
<module>
<inherits name="com.google.gwt.i18n.I18N"/>
</module>
Po zdefiniowaniu sekcji konieczne jest utworzenie własnego interfejsu
rozszerzającego klasę Constants. Aby, dla przykładu zlokalizować statyczny ciąg znaków
„discover”, oraz „objects” tworzymy następujący interfejs:
Listing: Interfejs MojeStale - (gogo.rzgw.MojeStale.java)
public interface MojeStale extends Constants {
String discover();
String objects();
}
Teraz należy skojarzyć powyższy interfejs z nowo utworzonym w tym celu
plikiem właściwości – MojeStale.properties:
Listing: Plik właściwości (gogo.rzgw.MojeStale.properties)
discovery = discovery
objects = objects
35
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Dodawnie lokalizacji sprowadza się do tworzenia dla każdej z nich nowego pliku
właściwości. Dodanie polskiej lokalizacji będzie wyglądało następująco:
Listing: Plik właściwości (gogo.rzgw.MojeStale_pl.properties)
discovery = wyszukaj
objects = obiekty
Aby użyć zlokalizowanych stałych trzeba jeszcze utworzyć implementację
interfejsu wykorzystując metodę GWT – GWT.create(class):
public void uzyjMojeStale() {
MojeStale mojeStale = (MojeStale)
GWT.create(MojeStale.class);
Window.alert(mojeStale.discover());
}
DOSTĘP DO ELEMENTÓW — DOCUMENT OBJECT MODEL
Document Object Model (DOM), czyli obiektowy model dokumentu to interfejs
programistyczny, który pozwala programom i skryptom na dynamiczny dostęp,
modyfikację struktury, zawartości i stylu dokumentu.[W3C].
Jak wiadomo, manipulowanie zawartością DOM HTML jest sercem aplikacji
DHMTL i AJAX. W większości języków i środowisk programistycznych, manipulowanie
DOM naśladuje konwencję ustanowioną przez World Wide Web Consortium (W3C).
W poprzedniej wersji GWT — 1.4, istniało pewne odstępstwo od tej konwencji. W tej
właśnie
wersji
używana
była
klasa
DOM,
należąca
do
pakietu
com.google.gwt.user.client. Klasa ta zawierała zbiór statycznych metod służących
manipulowaniu obiektowym modelem dokumentu. Wersja bieżąca GWT ― 1.5,
wprowadza
pewną
ilość
nowych
klas
DOM
umieszczonych
w
pakiecie
com.google.gwt.dom.client. Te klasy wspierają konwencje nazewnictwa interfejsów
HTML DOM dla Javy, pozwalają też na pisanie bardziej zwięzłego kodu, który
równocześnie umożliwia większą kontrolę typów.
36
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Poniżej przedstawiono przykładową funkcję, która tworzy nową tabelkę, a w jej
komórkę wstawia tekst. Kod przedstawiono w starej oraz w bieżącej wersji GWT.
Listing: Stara wersja GWT (1.4)
public void tableExample() {
Element table = DOM.createTable();
Element tr = DOM.createTR();
DOM.appendChild(table, tr);
Element td = DOM.createTD();
DOM.appendChild(tr, td);
DOM.setInnerText(td, "Stare podejście");
DOM.appendChild(getBodyElement(), table);
}
public static native Element getBodyElement() /*-{
return $doc.body;}
-*/;
Listing: Bieżąca wersja GWT (1.5)
public void tableExample() {
TableElement table = doc.createTableElement();
TableRowElement tr = table.insertRow(0);
TableCellElement td = tr.insertCell(0);
td.setInnerText("Nowe podejście");
doc.getBody().appendChild(table);
}
Zmiany, które zaszły w bieżącej wersji GWT, spowodowały jednakże pewne
zamieszanie dotyczące nazewnictwa. Istnieją dwie klasy Element, jedna z nich to
pozostałość
po
wersji
1.4
GWT.
Klasa
ta
znajduje
się
w
pakiecie
com.google.gwt.user.client, rozszerza ona klasę dodaną w wersji 1.5 GWT, a znajdującą
się w pakiecie com.google.gwt.dom.client. Dzięki temu rozwiązaniu kod utworzony we
wcześniejszych wersjach GWT może być również skompilowany w bieżącej wersji GWT.
37
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
DEFERRED BINDING
Deferred Binding ― odroczone wykonanie, jest techniką używaną przez
kompilator GWT do utworzenia i wybrania specyficznej implementacji klasy na
postawie zbioru parametrów. [Google doc]. Można założyć, że technika ta stanowi
odpowiedniki mechanizmu refleksji w Javie. Umożliwa ona stworzenie kilku wersji
aplikacji w zależności od środowiska przeglądarki. Dzięki temu przeglądarka pobiera
jedynie wersję dla niej utworzoną.
Główną korzyścią tej metody jest redukcja wynikowego kodu JavaScript, który
przeglądarka pobiera. Jest to osiągane poprzez redukcję kodu tylko do tego który jest
niezbędny do uruchomienia w danej wersji przeglądarki oraz lokalizacji. Dlaczego
użytkownik Firefoxa miałby pobierać kod specyficzny dla Safari, skoro nigdy tego kodu
nie
użyje?[Google].
Przykładem
zastosowania
odroczonego
wykonania
jest
internacjonalizacja. Kompilator GWT tworzy oddzielne wersje aplikacji dla każdego
języka. Również klasy wykorzystywane w implementacji obiektowego modelu
dokumentu posiłkują się tą techniką. Deferred binding jest jednym z kluczowych
mechanizmów pozwalających tworzyć wysoce zoptymalizowany kod JavaScript.
Mechanizm ten jest całkowicie konfigurowalny i nie wymaga edycji
skompilowanego kodu GWT. Odroczone wykonanie jest konfigurowane przez edycje
pliku modułu XML.
Istnieją dwie metody implementacji odroczonego wykonania:
„Zastępstwo” ― jedna klasa jest zastępowana inna w zależności od warunku
„Generator” ― zbiór klas pochodnych jest automatycznie tworzony, a następnie
zastępowany w zależności od warunku
Zastępstwo ― (ang. Replacement) oznacza redefiniowanie jednej klasy inną w
momencie kompilacji. Poniższy rysunek przedstawia hierarchię dziedziczenia dla klasy
DOM. Analiza rysunku oraz fragmentu zawartości modułu DOM.gwt.xml pozwoli
zrozumieć mechanizm zastępstwa.
38
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rysunek 9: Hierarchia dziedziczenia dla klasy DOM [opracowanie własne]
Poniżej pokazano przykład zastępstwa dla klasy DOM.
Listing: Fragment zawartości modułu DOM.gwt.xml (com.google.gwt.dom.client)
<module>
<inherits name="com.google.gwt.core.Core"/>
<inherits name="com.google.gwt.user.UserAgent"/>
<replace-with
class="com.google.gwt.dom.client.DOMImplOpera">
<when-type-is class="com.google.gwt.dom.client.DOMImpl"/>
<when-property-is name="user.agent" value="opera"/>
</replace-with>
<replace-with class="com.google.gwt.dom.client.DOMImplSafari">
<when-type-is class="com.google.gwt.dom.client.DOMImpl"/>
<when-property-is name="user.agent" value="safari"/>
</replace-with>
…
</module>
39
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Powyższy kod podpowiada kompilatorowi GWT, że powinien zamienić klasę
DOMImpl klasą DOMImplOpera, jeżeli wartość właściwość user.agent jest równa
opera.
Aby utworzyć przykładowo egzemplarz klasy DOMImpl, należy wywołać
statyczną metodę create() należącą do klasy GWT.
static final DOMImpl impl = GWT.create(DOMImpl.class);
40
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rozdział 5:
IMPLEMENTACJA APLIKACJI
41
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
5.1 ZAŁOŻENIA
Zaprojektowana aplikacja ma na celu w interaktywny sposób prezentować zbiór
fotograficzny będący w posiadaniu Regionalnego Zarządu Gospodarki Wodnej
w Krakowie. Prace obejmują również skatalogowanie istniejącego zbioru oraz budowę
bazy danych służącej do przechowywania tegoż zbioru. Aplikacja umożliwiać ma
wygodny dostęp do takich atrybutów zbioru fotograficznego jak lokalizacja, czas czy
kategoria uwidocznionego obiektu. W tym celu wykorzystano jedno z najmłodszych
będących do dyspozycji rozwiązań ― Google Web Toolkit.
Z racji wykorzystania GWT całe oprogramowanie tworzone jest w tym samym
języku programowania ― Java. W pracy używa się jednego z darmowych środowisk
developerskich takich jak: Netbeans lub Eclipse. Programista nie musi więc uczyć się
obsługi innych narzędzi czy też nowych języków programowania. Bazą danych, którą
posługujemy się w pracy jest MySQL. W publikacji celowo pomijam rozdział
zapoznający czytelnika z budową bazy danych.
Kolejnym założeniem jest to, aby stworzona web aplikacja mogła uruchamiać
się na dowolnej przeglądarce internetowej. Aplikacja do poprawnego działania nie
będzie potrzebować dodatkowych wtyczek. Oprogramowanie, które użyte jest do
zbudowania, jak również oprogramowanie potrzebne do działania web aplikacji jest
darmowe.
42
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
5.2 IMPLEMENTACJA
TWORZENIE – INTERFEJS UŻYTKOWNIKA
W przypadku tradycyjnych stron internetowych interfejs użytkownika
definiowany jest przez odpowiednie znaczniki HTML-a. Interfejs użytkowania w GWT
tworzony jest przez wywołanie odpowiednich metod. Jest to całkowicie odmienne
podejście. Komponenty utworzone przez GWT są w momencie kompilacji zamieniane
na odpowiadające im znaczniki HTML-a oraz powiązany z nimi kod JavaScriptu.. Na
potrzeby web aplikacji stworzono szereg komponentów, które wyodrębniono i
umieszczono w osobnym pakiecie ― gogo.rzgw.client.view(rys.10).
Rysunek 10: Klasy komponentów interfejsu użytkownika
Powyższe klasy odpowiadają wyłącznie za stworzenie komponentów interfejsu
użytkownika. Poniżej prezentacja jednej z wymienionych klas przybliżająca sposób
budowy komponentów interfejsu użytkownika.
Klasa Wyszukaj buduje przewijalny panel, który przypomina rozwiązanie
stosowane w programie Microsoft Outlook. Klasa to rozszerza klasę Composite, dzięki
czemu możemy zdefiniować własny komponent interfejsu. Należy pamietać, że tak
zdefiniowany komponent inicjalizowany jest metodą initWidget(). Inicjalizacja tak
zdefiniowanego komponentu może odbyć się tylko raz, w przeciwnym wypadku pojawi
się błąd. Poniżej przedstawiono wygląd panelu Wyszukaj.
43
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rysunek 11: Komponent Wyszukaj
Listing: Kod odpowiedzialny za stworzenie komponentu Wyszukaj.
public class Wyszukaj extends Composite {
private static StackPanel stackPanel = null;
MyImageBundle myImageBundle =
(MyImageBundle)GWT.create(MyImageBundle.class);
MojeStale mojeStale = (MojeStale) GWT.create(MojeStale.class);
AbstractImagePrototype InfoImgPrototype = myImageBundle.InfoIcon();
AbstractImagePrototype TaskImgPrototype = myImageBundle.TaskIcon();
AbstractImagePrototype KMLImgPrototype = myImageBundle.KMLIcon();
public Wyszukaj() {
stackPanel = new StackPanel();
stackPanel.add(new Wyszukiwanie(),
createHeaderHTML(InfoImgPrototype.createImage(),
mojeStale.discover()),true);
stackPanel.add(Obiekty.getInstance(),createHeaderHTML(
TaskImgPrototype.createImage(), mojeStale.object()), true);
stackPanel.add(new KML(),createHeaderHTML(
KMLImgPrototype.createImage(), "KML"), true);
stackPanel.showStack(0);
initWidget(stackPanel);
}
private String createHeaderHTML(Image image, String caption) {
return "<table align='left'><tr>" + "<td>" + image + "</td>" +
"<td style='vertical-align:middle'><b style='white-space:nowrap'>"
+ caption + "</b></td>" + "</tr></table>";
}}
44
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Powyższy listing przedstawia tworzenie komponentu Wyszukaj. Można
zauważyć sporą analogię do tworzenia interfejsu użytkownika w Swingu.
Podobieństwo to jest celowe. Programista, który wcześniej programował interfejs przy
pomocy Swinga powinien bez trudu odnaleźć się w interfejsie użytkownika GWT. Jest
to całkowicie odmienne podejście w sposobie tworzenia interfejsów w porównaniu do
tradycyjnych
technik.
Kod
powyżej
przedstawiony
kompilowany
jest
do
odpowiadających mu znaczników HTML-a. To zadaniem kompilatora GWT jest
stworzenie odpowiadających znaczników i elementów. Poniżej przedstawiono
fragment kodu HTML-a wygenerowanego przez kompilator GWT dla przeglądarki
Firefox.
Listing: Fragment Html-a wygenerowanego na podstawie klasy Wyszukaj.
<table cellspacing="0" cellpadding="0" class="gwt-StackPanel">
<tbody>
<tr>
<td height="1" class="gwt-StackPanelItem gwt-StackPanelItemfirst">
<div>
<table align="left">
<tbody>
<tr>
<td>
<img border="0" style="background: transparent
url(http://localhost/rzgw/gogo.rzgw.Main/B73817FC244C5FAA1C346540F1228
00D.cache.png) no-repeat scroll -324px -17px; width: 32px; height:
32px; -moz-background-clip: -moz-initial; -moz-background-origin: moz-initial; -moz-background-inline-policy: -moz-initial;"
src="http://localhost/rzgw/gogo.rzgw.Main/clear.cache.gif" class="gwtImage"/>
</td>
<td style="vertical-align: middle;">
<b style="white-space: nowrap;">Wyszukaj</b>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
45
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
WYKORZYSTANIE — IMAGE BUNDLE
Technikę Image Bundle wykorzystano w budowie szeregu komponentów.
Komponenty te zawierają obrazki. Jak wspomniano w poprzednim rozdziale, technika
ta generuje na podstawie szeregu obrazków jeden obrazek. Przypomina ona technikę
Image Spites. Jednakże w przypadku tej techniki programista uwolniony jest całkowicie
od wstawiania odpowiednich selektorów w pliku CSS.
Jedynym wymaganiem w stosunku do programisty jest zdefiniowanie interfejsu,
który rozszerzać będzie interfejs ImageBundle. W intefejesie tym tworzymy metody
zwracające obiekt klasy AbstractImagePrototype. Przed każdą metodą wstawiamy tag
― @gwt.resource, który informuje kompilator o nazwie obrazka. W implementowanej
aplikacji
interfejs
służący
budowie
Image
Bundle
zdefiniowano
w
pliku
MyImageBundle. Poniżej przedstawiono fragment listingu pliku MyImageBundle.
Listing: Fragment pliku MyImageBundle.
public interface MyImageBundle extends ImageBundle {
/**
* @gwt.resource gogo/rzgw/public/info.png
*/
public AbstractImagePrototype InfoIcon();
/**
* @gwt.resource gogo/rzgw/public/kml.png
*/
public AbstractImagePrototype KMLIcon();
/**
* @gwt.resource gogo/rzgw/public/task.gif
*/
public AbstractImagePrototype TaskIcon();
…
Aby móc skorzystać z powyższego interfejsu należy stworzyć egzemplarz klasy
MyImageBundle. Egzemplarz ten tworzony jest wywołaniem metody GWT.create().
MyImageBundle myImageBundle =
(MyImageBundle)GWT.create(MyImageBundle.class);
46
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Mając już egzemplarz interfejsu MyImageBundle można wywołać uprzednio
zdefiniowaną metodę zwracającą obiekt AbstractImagePrototype. Końcowym punktem
jest wywołanie metody createImage() na powyższym obiekcie. Przykładem tworzenia
obrazków jest poniższy fragment pliku TopPanel.
Listing: Fragment pliku TopPanel — przykład tworzenia zbioru obrazków za pomocą
techniki Image Bundle.
…
MyImageBundle myImageBundle = (MyImageBundle)
GWT.create(MyImageBundle.class);
AbstractImagePrototype RzgwHeader = myImageBundle.RzgwHeader();
AbstractImagePrototype RzgwPolska = myImageBundle.RzgwPolska();
AbstractImagePrototype _1972 = myImageBundle._1972();
AbstractImagePrototype kosciol = myImageBundle.Kosciol();
public TopPanel() {
horizontal.add(_1972.createImage());
horizontal.add(kosciol.createImage());
horizontal.add(RzgwHeader.createImage());
…
Poniżej przedstawiono wygenerowany plik zawierający zbiór obrazków na
podstawie interfejsu MyImageBundle.
Rysunek 12: Plik wygenerowany na podstawie interfejsu MyImageBundle
47
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
UŻYCIE KASKADOWYCH ARKUSZY STYLÓW
W GWT wygląd każdego komponentu zależy od kaskadowych arkuszy styli
(CSS). Domyślnie styl komponentu określony jest w regule, którą definiuje się
następująco: gwt-<nazwa klasy komponentu>. Nic nie stoi na przeszkodzie, aby
własnym
komponentom
nadawać
własne
style.
Służy
temu
metoda
setStyleName(nazwa reguły), która za parametr przyjmuje nazwę odpowiedniej reguły.
W aplikacji ustalono wygląd szeregu komponentów. Jednym z nich jest
komponent Wyszukiwanie, w którym zdefiniowano, że regułą odpowiedzialną za
wygląd jest rzgw-FlexTable.
layout.setStyleName("rzgw-FlexTable");
Poniżej na listingu przedstawiono regułę rzgw-FlexTable.
Listing: Fragment pliku welcome.css — przykład definiowania wyglądu komponentu.
.rzgw-FlexTable td {
border: 1px solid #6565FF;
padding: 3px;
font-size: 12px;
width: 270px;
vertical-align: bottom;
text-align: center;
}
Poniżej wygląd komponentu zdefiniowanego przez powyżej zdefiniowaną regułę.
Rysunek 13: Przykład użycia CSS do zdefiniowania wyglądu komponentu
48
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
WYKORZYSTANIE — INTERNACJONALIZACJA
Internacjonalizacja w przypadku tej aplikacji została przeprowadzona w oparciu
o pliki właściwości. Poniżej przedstawiono fragment kodu odpowiedzialnego za
lokalizację dla komponentu Wyszukiwanie.
Listing: Fragment pliku Wyszukiwanie — przykład internacjionalizacji
…
MojeStale mojeStale = (MojeStale) GWT.create(MojeStale.class);
…
ListBox kategorie = new ListBox();
…
kategorie.addItem(mojeStale.all(),"Wszystko");
kategorie.addItem(mojeStale.flood(),"Powodz");
kategorie.addItem(mojeStale.bridge(),"Most");
kategorie.addItem(mojeStale.build(),"Budowa");
…
Ato fragmenty pliku właściwości dla lokalizacji hiszpańskiej oraz angielskiej.
Listing: Fragment pliku MojeStale_sp.properties.
find = Encontrar
category = Categoría
river = Río
place = Lugar
years = Años
search =
Buscar
Listing: Fragment pliku MojeStale_en.properties.
find = Find
category = Category
river = River
place = Place
years = Years
search = Search
49
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Poniższe rysunki demonstrują użycie internacjonalizacji.
Rysunek 14: Hiszpańska wersja komponentu Wyszukiwanie
Rysunek 15: Anielska wersja komponentu Wyszukiwanie.
50
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
WYKORZYSTANIE — JAVASCRIPT NATIVE INTERFACE
JavaScript Native Interface (JSNI) to technika wykorzystania GWT, bez której
stworzenie systemu opierającego się o mapy Google’a nie byłoby w ogóle realne.
W czasie powstania tej aplikacji firma Google nie udostępniała żadnej biblioteki
umożliwiającej wykonanie funkcji JavaScript dostępnych dla Google Maps Api
z poziomu GWT. Aby wstawić mapę oraz obsłużyć interakcje użytkownika związaną
z obsługą map autor musiał sam napisać niezbędne funkcje obsługujące JavaScript.
Stanowi to tym samym bardzo dobry przykład wykorzystania JSNI.
Firma Google dopiero niedawno udostępniła bibliotekę umożliwiającą wgląd do
Google Maps Api bezpośrednio z poziomu GWT bez pisania dodatkowego kodu
JavaScript. Tym samym tworzona aplikacja wyprzedzała rozwiązania dostarczane przez
Google’a.
Aby możliwe było dodanie mapy Google’a stworzono specjalny komponent
GMap2Widget. Komponent ten rozszerza klasę Widget. Zawiera on klasę GMap2,
której konstruktor jest wywoływany w konstruktorze klasy Widget. Poniżej
przedstawiono listing komponentu Widget.
Listing: Kodu źródłowego komponentu Widget .
public class GMap2Widget extends Widget {
private GMap2 gMap2;
public GMap2Widget() {
Element e = DOM.createDiv();
setElement(e);
int szerokosc = Window.getClientWidth();
int dlugosc =
Window.getClientHeight();
gMap2 = GMap2.create(e, szerokosc, dlugosc);
}
}
Klasa GMap2 stanowi opakowanie natywnego obiektu JavaScriptObject, który
nie może być tworzony bezpośrednio. Obiekt ten powinien być deklarowany jako typ
zwracany przez metodę natywną. Tą metodą na niżej przedstawionym listingu jest
metoda create().
51
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Listing: Kod źródłowy komponentu GMap2.
public class GMap2 extends JavaScriptObject {
private static GMap2Impl impl = new GMap2Impl();
protected GMap2() {}
public static final GMap2 create(Element e,int szerok,int wysok){
return impl.create(e, szerokosc, wysokosc);
}
Pozostała jeszcze do omówienia klasa implementująca wyżej przedstawiony
obiekt. Klasa ta to GMap2Impl. Stworzenie jej przedstawiało pewną trudność z uwagi
na to, że należało dokładnie wczytać się we właściwości i funkcje obiektu JavaScript
GMap2 dostarczanego w bibliotece Google Maps Api. Poniżej przedstawiono listing
klasy GMap2Impl.
Listing: Fragment kodu źródłowego klasy GMap2Impl.
public class GMap2Impl {
/*-{ var gMap2;
* var markery[]; }-*/
public native GMap2 getGMap2()/*-{
return this.gMap2;}-*/;
public native GMap2 create(Element e, int szer,int wys)/*-{
var options = { size : new $wnd.GSize(szer-345, wys-140) }
gMap2 = new $wnd.GMap2(e,options);
gMap2.addControl(new $wnd.GLargeMapControl());
gMap2.addControl(new $wnd.GMapTypeControl());
gMap2.addControl(new $wnd.GScaleControl());
gMap2.addControl(new $wnd.GOverviewMapControl());
gMap2.addMapType($wnd.G_PHYSICAL_MAP);
gMap2.setCenter(new $wnd.GLatLng(49.75,21.50), 8);
gMap2.enableScrollWheelZoom();
return gMap2;
}-*/;
52
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Na powyższym listingu przedstawiono metodę create(), która zwraca obiekt
JavaScript GMap2.
Zastosowanie JavaScript Native Interface nie jest prostą sprawą, aczkolwiek
dzięki tej technice otrzymujemy z poziomu GWT dostęp do wielu natywnych bibliotek
JavaScript. Bez wykorzystania tych bibliotek tworzone aplikacje nie będą posiadać
pewnych funkcjonalności. W przypadku pisania tej aplikacji, bez posłużenia się
techniką JSNI w ogóle nie byłoby wykonalne wstawienie mapy Google’a. Technika ta
daje ogromne możliwości integracji już istniejącego kodu JavaScript z GWT. Korzystając
z niej musimy jednakże pamiętać o tym, że kompilator GWT nie jest w stanie
efektywnie go zoptymalizować.
GWT RPC
W aplikacji implementacja zdalnego wywoływania procedur (RPC) ma na celu
wyszukiwanie obiektów o pożądanych przez użytkownika parametrach. Do specyfikacji
parametrów służy prezentowany wcześniej komponent Wyszukiwanie. Składa się on z
szeregu rozwijanych list umożliwiających wybór odpowiednich parametrów. Po
sprecyzowaniu właściwości takich jak: kategoria poszukiwanego obiektu, rzeka, na
jakiej jest zlokalizowany, miejsca oraz zakres lat. Serwis, który jest zdefiniowany w
części serwerowej ma możliwość przepytania bazy danych pod kątem istnienia
określonych przez użytkownika parametrów. Jeśli takowe obiekty istnieją serwis w
odpowiedzi przesyła ich listę. Przyjrzyjmy się teraz implementacji interfejsów po
stronie klienckiej.
Listing: Kod źródłowy synchronicznego interfejsu Szukaj
public interface Szukaj extends RemoteService {
/**
* @gwt.typeArgs <gogo.rzgw.client.model.Obiekt>
*/
public ArrayList<gogo.rzgw.client.model.Obiekt>
mySzukaj(String s);
}
53
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Listing: Kod źródłowy asynchronicznego interfejsu SzukajAsync.
public interface SzukajAsync {
public void mySzukaj(String s, AsyncCallback callback);
}
Jak widać definiowanie interfejsów po stronie klienckiej jest czynnością dość
łatwą. Pozostaje jeszcze zdefiniowanie kodu po stronie serwera. Serwis, który
definiowany będzie po stronie serwera, musi implementować synchroniczny interfejs,
który został uprzednio zdefiniowany. Serwis ten musi również rozszerzać klasę
RemoteServiceServlet.
Aby wykonać połączenie i otrzymać wygenerowaną odpowiedź, konieczne jest
stworzenie danego serwisu używając znanej funkcji GWT.crete(). Funkcja ta
zdefiniowana została w specjalnej klasie Controller, która tworzy instancje serwisów
oraz odbiera i zarządza odpowiedzią serwera. Otrzymana odpowiedź serwera powinna
być w jakiś sposób zarządzana. Służy temu implementacja asynchronicznego obiektu
nasłuchującego odpowiedzi. Po zdefiniowaniu wszystkich tych interfejsów pozostaje
tylko wykonanie zapytania.
54
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
5.3 PREZENTACJA DZIAŁANIA APLIKACJI
WYGLĄD INTERFEJSU UŻYTKOWNIKA
Aplikacja podzielona została na trzy odrębne panele (rys.16). Panel umieszczony
na górze strony (kolor obramowania zielony) stanowi element dekoracyjny. Zawiera on
z prawej strony linki do zmiany języka wyświetlania strony.
Panel po lewej „Wybór i Lista” (kolor czerwony) zawiera komponenty, które
ułożone są jeden nad drugim. Komponenty te to „Wyszukaj”, „Obiekt” oraz „KML”.
Zawartość tylko jednego z nich może być w danej chwili wyświetlona. Posiadają one
nagłówek, który w momencie klikniecia na niego rozwija zawartość komponentu.
Panel zajmujący najwięcej miejsca (kolor niebieski) zawiera mapę Google’a. Na
mapie tej wyświetlane są markery. Poniższy rysunek obrazuje widok ogólny aplikacji.
Rysunek 16: Widok ogólny aplikacji
55
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Użytkownik przy pomocy panelu znajdującego się po lewej stronie (rys.17) ma
możliwość wyboru charakterystki poszukiwanych przez siebie obiektów. Do wyboru są
kategorie obiektu hyrotechniczego bądź zjawiska hydrologicznego. Kolejną opcją jest
wybór rzeki oraz miejsca. Możliwe jest też określenie przedziału lat. Użytkownik w
momencie wybrania charakterystyki poszukiwanych obiektów wysyła odpowiednie
zapytanie do serwera, który przesyła w odpowiedzi poszukiwaną przez użytkownika
listę obiektów. Lista ta jest prezentowana w komponencie „Obiekty”. W momencie
odbioru danych komponent „Obiekty” automatycznie rozwija się przedstawiając
otrzymane informacje(rys. 18).
Rysunek 17: Panel służący do wyszukiwaniu obiektów oraz prezentacji listy wyników
56
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rysunek 18: Rozwinięty komponent "Obiekty" prezentujący listę wyników wyszukiwania
Klikniecie na któryś z obiektów znajdujących się na liście automatycznie zmienia
widok mapy tak, aby prezentowała ten obiekt. Użytkownikowi w momencie klikniecia
na marker obiektu pokazywane jest okienko z informacją o obiekcie, które zawiera
również zdjęcie prezentowanego obiektu. Okno to mieści dwie zakładki. Zawartością
drugiej zakładki „Info” jest krótki opis prezentowanego obiektu. Poniżej przedstawiono
zawartość zakładki „Info”.
Rysunek 19: Okno informacyjne ― zakładka „Info”
57
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Zawartością pierwszej zakładki „RZGW” jest zdjęcie, wraz z podstawowymi
informacjami takimi jak: nazwa przedstawionego obiektu, miejsce jak również
współrzędne geograficzne obiektu. Poniżej ukazano zawartość zakładki „RZGW”.
Rysunek 20: Okno informacyjne przedstawiające zdjęcie oraz informacje o obiekcie ―
zakładka „RZGW”
Przedstawiono już najważniejsze elementy składające się na interfejs
użytkownika. Poniższy rysunek przedstawia widok aplikacji.
58
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rysunek 21: Widok aplikacji
59
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
Rozdział 6:
PODSUMOWANIE
Problemem, jaki niniejsza praca dyplomowa miała rozwiązać była prezentacja
zbioru fotograficznego dla potrzeb inżynierii wodnej. Stworzono w tym celu web
aplikację, która prezentowała ten zbiór wykorzystując jako podkład mapy Google’a.
Aplikację wykonano przy użyciu jednego z najnowszych dostępnych w tym celu
framework-ów ― Google Web Toolkit. W pracy omówiono WebGIS. Przedstawiono
dokładnie technikę AJAX. Szczegółowo omówiono teoretyczne i praktyczne
zastosowanie Google Web Toolkit na potrzeby prezentacji zbioru fotograficznego.
Aplikacja zgodnie z założeniami działa w każdej przeglądarce internetowej, do
swojego działania nie potrzebuje żadnych dodatkowych wtyczek. Dostępna jest dla
każdego. W atrakcyjny sposób dokumentuje zbiór fotograficzny. Umożliwia także
wygodny dostęp do takich cech jak: lokalizacja, czas i kategoria wybranego obiektu
zbioru. Użytkownik uzyskuje narzędzie, dzięki któremu jest w stanie wyszukać
interesująca go listę obiektów. Sama prezentacja obiektu jest atrakcyjna. Aplikacja, co
warto podkreślić ma walory edukacyjne. Dzięki wykorzystaniu technik oferowanych
przez GWT powstała aplikacja jest również szybka. Autor dużo uwagi poświęcił takiemu
zaprojektowaniu interfejsu użytkownika, aby aplikacja była intuicyjna.
Koncepcja takiego podejścia do tworzenia web aplikacji sprawdziła się.
Stworzone narzędzie może być z powodzeniem wykorzystane na potrzeby
prezentacyjne inżynierii wodnej.
60
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
BIBLIOGRAFIA
Cooper R., Collins C., GWT In Practice, Manning, 2008
Hadlock K., AJAX Dla Twórców Aplikacji Internetowych, Helion, 2007
Hanson R., Tacy A., GWT In Action, Manning, 2007
Bradley D., Adding Panoramas to Google Maps Using AJAX, Department of Computer
Science”, University of British Columbia
Hemrajani A., Java –Tworzenie Aplikacji Sieciowych za pomocą Springa, Hibernate i
Eclispe, Helion, 2007
Jędryczka R., Wykorzystanie Google Earth we własnej aplikacji do internetowej
wizualizacji danych geograficznych”, Archiwum Fotogrametrii, Kartografii i Teledetekcji,
Vol. 16, 2006
Ort E., Brydor S., Basler M., Mashup Styles, Part 1: Server-Side Masups, Sun
Microsystems,
http://java.sun.com/developer/technicalArticles/J2EE/mashup_1/index.html (Maj
2008)
Piszczek K., WebGIS i Webmapping – technologie dla globalnych systemów informacji
przestrzennej”, (praca magisterska), 2007
Purvis M., Sambells J., Turner C.,Beginning Google Maps Application with PHP and
AJAX: From Novice to Professional, Appres, 2006
Schalk C., Mashing Google Maps with Oracle Databases,
Oracle, http://www.oracle.com/technology/pub/articles/schalk-googlemaps.html
(październik 2008)
Smart J.F., Integrating Maps into Your Java Web Application with Google Maps and
AJAX, http://today.java.net/pub/a/today/2006/10/25/integrating-google-maps-intoweb-application.html (wrzesień 2008)
61
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
SPIS RYSUNKÓW
RYSUNEK 1KOLEKCJA ZDJĘĆ REGIONALNEGO ZARZĄDU GOSPODARKI WODNEJ W KRAKOWIE .......................................... 3
RYSUNEK 2: ARCHITEKTURA WEB SERWISU ............................................................................................................ 6
RYSUNEK 3: OBIEKT XHR WYKONUJĄCY ZAPYTANIE DO BAZY DANYCH [OPRACOWANIE WŁASNE].................................... 15
RYSUNEK 5: APLIKACJA DZIAŁĄJCA W TRYBIE HOSTED MODE .................................................................................... 24
RYSUNEK 6: BUTTON ― PRZYKŁAD INTERFEJSU UŻYTKOWNIKA ................................................................................ 28
RYSUNEK 7: DOCKPANEL PRZYKŁAD INTERFEJSU UŻYTKOWNIKA ............................................................................... 29
RYSUNEK 8: PRZYKŁAD "IMAGE BUNDLE" ............................................................................................................ 30
RYSUNEK 9: HIERARCHIA DZIEDZICZENIA DLA KLASY DOM [OPRACOWANIE WŁASNE] ................................................... 39
RYSUNEK 10: KLASY KOMPONENTÓW INTERFEJSU UŻYTKOWNIKA ............................................................................. 43
RYSUNEK 11: KOMPONENT WYSZUKAJ ............................................................................................................... 44
RYSUNEK 12: PLIK WYGENEROWANY NA PODSTAWIE INTERFEJSU MYIMAGEBUNDLE ................................................... 47
RYSUNEK 13: PRZYKŁAD UŻYCIA CSS DO ZDEFINIOWANIA WYGLĄDU KOMPONENTU..................................................... 48
RYSUNEK 14: HISZPAŃSKA WERSJA KOMPONENTU WYSZUKIWANIE .......................................................................... 50
RYSUNEK 15: ANIELSKA WERSJA KOMPONENTU WYSZUKIWANIE.............................................................................. 50
RYSUNEK 16: WIDOK OGÓLNY APLIKACJI ............................................................................................................. 55
RYSUNEK 17: PANEL SŁUŻĄCY DO WYSZUKIWANIU OBIEKTÓW ORAZ PREZENTACJI LISTY WYNIKÓW .................................. 56
RYSUNEK 18: ROZWINIĘTY KOMPONENT "OBIEKTY" PREZENTUJĄCY LISTĘ WYNIKÓW WYSZUKIWANIA.............................. 57
RYSUNEK 19: OKNO INFORMACYJNE ― ZAKŁADKA „INFO” ..................................................................................... 57
RYSUNEK 20: OKNO INFORMACYJNE PRZEDSTAWIAJĄCE ZDJĘCIE ORAZ INFORMACJE O OBIEKCIE ― ZAKŁADKA „RZGW”..... 58
RYSUNEK 21: WIDOK APLIKACJI ......................................................................................................................... 59
62
Piotr Gogacz
praca magisterska
Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla
potrzeb inżynierii wodnej
SPIS TABEL
TABELA 1. WŁAŚCIWOŚCI OBIEKTU XHR ............................................................................................................. 16
TABELA 2. METODY OBIEKTU XHR..................................................................................................................... 16
TABELA 3. LISTA WARTOŚCI WŁAŚCIWOŚCI READYSTATE ......................................................................................... 17
TABELA 4. KLASY Z PAKIETU JAVA.UTIL DOSTĘPNE W GWT...................................................................................... 26
TABELA 5: KLASY Z PAKIETU JAVA.SQL DOSTĘPNE W GWT ...................................................................................... 27
TABELA 6: KLASY Z PAKIETU JAVA.IO DOSTĘPNE W GWT ........................................................................................ 27
TABELA 7. KLASY Z PAKIETU JAVA.LANG DOSTEPNE W GWT .................................................................................... 27
TABELA 8. SYGNATURY METOD JAVA NATIVE INTERFACE ........................................................................................ 33
63
Polecamy darmowe prace mgr - serwis z pracami dyplomowymi - prace magisterskie i
licencjackie - całkowicie za darmo
Download

Wykorzystanie Google Web Toolkit do budowy systemu dokumentacji fotograficznej dla potrzeb inżynierii wodnej