2007.06_Google Web Toolkit _[Ajax].pdf

Narzędzia

Google Web Toolkit

Czyli AJAX na szynach

Google Web Toolkit (GWT), to nowe dziecko Google, wydane na świat

niespełna dwa lata temu. Swoją karierę GWT rozpoczął na sympozjum

JavaOne w 2006 roku i od tego czasu jego popularność lawinowo wzrasta.

Niedawno ogłoszono, że GWT ściągnęło już ponad milion użytkowników.

Można zaryzykować stwierdzenie, że świat Javy oszalał na punkcie GWT.

Dowiesz się...

• Jakie są zalety GWT.

Powinieneś wiedzieć...

• Przydatna będzie podstawowa znajomość JAVA.

Wprowadzenie do GWT

Teraz, gdy już wiemy, że Google Web Toolkit

to narzędzie do tłumaczenia kodu Java na Java-

Script, warto wspomnieć, że to także doskona-

ły framework, którego zaletą jest prostota w wy-

korzystaniu AJAX. Tak naprawdę GWT składa

się z trzech części, zamkniętych w pojedyn-

czych plikach JAR (Java ARchiwe) :

Poziom trudności

• pierwsza aplikacja – gdzie pokażemy jak to

działa, ale na razie tylko po stronie klienckiej;

• GWT i RPC / AMFPHP – gdzie przedsta-

wimy bardziej zaawansowany przykład,

w którym komunikujemy się z serwerem;

• dodatkowe informacje – gdzie wejdziemy

mocniej w szczegóły, które, mamy nadzie-

ję, przekonają do GWT tych jeszcze nie-

przekonanych.

2.0 GWT się liczy? Odpowiedź jest

prosta, daje możliwości wykorzysta-

nia rozbudowanych i dojrzałych narzędzi ję-

zyka Java, przy pracy z JavaScript–em. Dzię-

ki GWT , możemy teraz refaktorować swój Ja-

vaScript, debugować go, używać mechanizmu

podpowiadania nazw i składni. Już samo to, da-

je duże możliwości w pracy z JavaScriptem, ale

GWT idzie dalej!

Wyobraźmy sobie, że możemy wykorzystać

w JavaScript–cie wszystkie zalety silnie obiek-

towego języka wysokiego poziomu, a przy tym

dalej tworzyć kod zrozumiały dla przeglą-

darek internetowych. To jest np. możliwość

używania interfejs’ów, typowania zmiennych

(a co za tym idzie i przeładowania konstruk-

torów czy metod) i wielu, wielu innych. Posia-

da cechy, które zawiera język Java, a które nie

są dostępne w JavaScript. Jak to możliwe? To

niesamowicie proste, GWT pozwala Ci tłuma-

czyć aplikacje napisane w Javie na JavaScript,

przy zachowaniu pełnej kontroli nad wyniko-

wym kodem. W artykule tym dowiesz się, co

tak naprawdę to oznacza i dlaczego jest to tak

rewolucyjne. Cała treść podzielona została na

cztery części:

• gwt–user.jar – to paczka przechowująca

gotowe do wykorzystania w środowisku JS

komponenty i narzędzia;

• gwt–servlet.jar – paczka implemen-

tująca mechanizmy pozwalające na ko-

Listing 1. Uruchamiamy projectCreator

C:\gwt>projectCreator –overwrite –eclipse SmallBear –ant smallbear –out c:\workspace\

smallbear

w wyniku czego powinniśmy zobaczyć:

Created directory c:\workspace\smallbear\src

Created directory c:\workspace\smallbear\test

Created ile c:\workspace\smallbear\smallbear.ant.xml

Overwriting existing ile c:\workspace\smallbear\.project

Overwriting existing ile c:\workspace\smallbear\.classpath

a następnie aplicationCreator poleceniem:

C:\gwt>applicationCreator –overwrite –eclipse SmallBear –out c:\workspace\smallbear

pl.rmalinowski.client.SmallBear

w wyniku czego powinniśmy zobaczyć:

Created directory c:\workspace\smallbear\src\pl\rmalinowski

Created directory c:\workspace\smallbear\src\pl\rmalinowski\client

Created directory c:\workspace\smallbear\src\pl\rmalinowski\public

Created ile c:\workspace\smallbear\src\pl\rmalinowski\SmallBear.gwt.xml

Created ile c:\workspace\smallbear\src\pl\rmalinowski\public\SmallBear.html

Created ile c:\workspace\smallbear\src\pl\rmalinowski\client\SmallBear.java

Created ile c:\workspace\smallbear\SmallBear.launch

Created ile c:\workspace\smallbear\SmallBear–shell.cmd

Created ile c:\workspace\smallbear\SmallBear–compile.cmd

• wprowadzenie do GWT – gdzie poznasz

podstawowe informacje, jak rozpocząć

pracę z GWT;

06/2007

D laczego w dzisiejszym świecie Web

GWT

munikację serwera napisanego w Javie z

aplikacją napisaną w JS. (My nie używa-

my);

• gwt–dev–windows.jar lub gwt–dev–linux.

jar – serce GWT, mechanizmy tłumaczą-

ca Javę na JS.

• eclipse tworzy konfiguracje urucha-

miającą projekt eclipsowy w trybie de-

bug;

• out folder do zapisania plików wyniko-

wych (domyślnie bieżący);

• overwrite nadpisuje istniejące pliki;

• ignore ignoruje istniejące pliki, (nie nad-

pisuje);

• className pełna nazwa tworzonej

startowej klasy aplikacji.

z nich rozwieje. Na początku stwórzmy nowy

projekt w Eclipse. W tym celu klikamy: Menu

–> File –> New –> Project.

Z wyświetlonych kreatorów wybieramy

Java Project , nazywamy go SmallBear i klika-

my na przycisk Finish , zapamiętując położenie

naszego nowo powstającego projektu, (ramka

Contents pole Direcotry) w naszym przypadku

to c:\workspace . Teraz przechodzimy do nad-

pisania tak powstałego zalążka nowego projek-

tu, przez szkielet generowany przy użyciu na-

rzędzi GWT.

Uruchamiamy projectCreator poleceniem:

(Listing 1.). Po wykonaniu przedstawionych

komend i odświeżeniu projektu w Eclipse,

Aby rozpocząć pracę z GWT musimy:

• mieć zainstalowaną wirtualną maszynę Ja-

va (min wersja 1.4), jeśli jej nie masz, ścią-

gnij i zainstaluj Sun Java Standard Edition

SDK ( http://java.sun.com/javase/downloads/

index.jsp );

• ściągnąć Google Web Toolkit package

(http://code.google.com/webtoolkit/download.

html);

• posiadać podstawy w rozumieniu języka

Java 1.4.

Pierwsza aplikacja

Przechodzimy do stworzenia pierwszej aplika-

cji w GWT. Jeśli pojawiły się już jakieś nieja-

sności, to ten krok prawdopodobnie większość

Do pracy przydatny będzie też edytor tekstu,

posiadający możliwości analizowania składni

Java, my używać będziemy Eclipse, ponieważ

ma on bezpośrednie wsparcie dla i w GWT.

GWT nie trzeba instalować, wystarczy ścią-

gnąć i rozpakować np. do katalogu c:\gwt.

Wraz z GWT dostajemy narzędzia do tworze-

nia szkieletu projektu i aplikacji zgodnej z za-

leceniami developerów z Google. Prawidłowa

aplikacja GWT składa się z:

• pliku HTML, w którym osadzana zosta-

nie nasza aplikacja JS, musi tu też zostać

zainicjowany podstawowy moduł GWT;

• plik nazwa_mojego_modułu. gwt.xml , w któ-

rym opisane są dodatkowe parametry dla

translatora GWT;

• klasy, implementującej interfejs EntryPo-

int, jest to miejsce w którym rozpoczyna

pracę nasz program.

Rysunek 1. Widok szkieletu aplikacji GWT w Eclipse

Przyjrzymy się teraz, jak działają wspomnia-

ne narzędzia:

• projectCreator – tworzy szkielet nowego

projekt, jego składnia to:

ProjectCreator [–ant projectName] [–

eclipse projectName] [–out dir] [–

overwrite] [–ignore] gdzie:

• ant generuje Ant buildile do kom-

pilacji źródeł (.ant.xml będzie doda-

ny);

• eclipse generuje projekt eclipsowy

• out folde r do zapisania plików wyniko-

wych (domyślnie bierzący);

• overwrite nadpisuje istniejące pliki;

• ignore ignoruje istniejące pliki, (nie

nadpisuje);

• applicationCreator – tworzy szkielet

startowej aplikacji, jego składnia to:

ApplicationCreator

[–eclipse projectName] [–out

dir] [–overwrite] [–ignore]

className gdzie:

Rysunek 2. Widok działającej aplikacji w trybie HostedMode

www.phpsolmag.org

Narzędzia

szkielet aplikacji GWT powinien wyglądać tak,

jak na Rysunku 1.

Warto w tym miejscu zauważyć, że two-

rząc aplikację, klasę startową umieściliśmy w

pakiecie client . Jest to zalecane przez develo-

perów Google i jeśli tego nie zrobimy, skrypt

generujący schemat aplikacji powinien po-

kazać nam mniej więcej taki komunikat:

(Listing 2.).

Warto o tym pamiętać, by w przypadku ta-

kiego przeoczenia nie marnować czasu na za-

stanawianie się, gdzie popełniliśmy błąd.

Ponieważ skorzystaliśmy z generatora

szkieletu aplikacji, tak przygotowany pro-

jekt możemy od razu uruchomić. Do wybo-

ru mamy dwa tryby: HostedMode i WebMo-

de. Tryb HostedMode jest trybem w pełni za-

rządzanym przez GWT, oznacza to, że może-

my tu debugować uruchamiany kod i śledzić

kolejne jego kroki, analizując dokładnie to, co

dzieje się z powołanymi do życia zmiennymi

czy obiektami.

Tryb WebMode to już domyślny tryb,

w jakim będzie pracować nasza aplikacja, czy-

li wskazana przez nas przeglądarka interneto-

wa. Developerzy GWT dają nam gwarancję,

że aplikacja uruchamiana w trybie Hosted ,

będzie działała identycznie jak w trybie Web .

Warto tu zauważyć, że oznacza to też, że

niezależnie od tego, czy uruchomimy nasz

skrypt w Internet Explorerze czy też w Fire-

foksie, będzie on działał tak samo. Aby uru-

chomić aplikację w trybie Hosted wywołu-

jemy wygenerowany w katalogu domowym

projektu skrypt SmallBear–shell , efekt

oczekiwany widoczny jest na Rysunku 2. Aby

uruchomić aplikację w trybie Web urucha-

miamy skrypt SmallBear–compile, który to

jednak nie otworzy nam domyślnej przeglą-

darki, a jedynie przetłumaczy aplikację Java

na JavaScript.

Wynik tego tłumaczenia widoczny jest

w katalogu www (jest to domyślny katalog

generowania JS – można to zmienić). War-

to zauważyć, że tak wygenerowana aplikacja,

jest zwykłą stroną html, którą możemy otwo-

rzyć bezpośrednio na dysku twardym, inny-

mi słowy, nie potrzebujemy do tego serwera

WWW. Efekt uruchomienia pliku SmalBe-

ar.html w przeglądarce Firefox widoczny jest

na Rysunku 3.

Prześledźmy teraz kod programu (Listing 3.),

aby sprawdzić co się tak naprawdę stało.

Stworzyliśmy klasę SmallBear , która imple-

mentuje interfejs EntryPoint . EntryPoint to

miejsce, w którym rozpoczyna pracę aplika-

cja. Pisząc dokładniej, przy ładowaniu stro-

ny internetowej, w pierwszej kolejności ła-

dowane jest i inicjowane środowisko GWT

(plik gwt.js).

W kroku następnym ładowana jest nasza

aplikacja, a po zakończeniu uruchamiana

jest metoda onModuleLoad. Tu rozpoczy-

na się praca programu. Jak widać, nie ma

tu trudności, w kroku 1. tworzony jest no-

wy przycisk z etykietką Click me , w kroku

2. tworzona jest pusta etykieta. Następnie

oprogramowujemy zdarzenie onClick przy-

cisku button krok 3., tworząc do tego calu

tak zwaną klasę anonimową, czyli klasę bez

nazwy, implementującą metodę onClick (4).

Metoda ta zostanie wywołana za każdym ra-

zem, gdy przycisk button zostanie kliknięty.

Sprawdzamy tu, czy etykieta label jest wciąż

pusta (5), jeśli tak, to ustawiamy nowy tekst

do wyświetlania (6), jeśli nie (7) to czyścimy

nazwę etykiety (8). Na koniec jeszcze wsta-

wiamy przycisk (9) i etykietę (10) na stronę

tak, by użytkownik mógł je zobaczyć.

Na koniec warto jeszcze spojrzeć na to, jak

wygląda plik htmlowy (Listing 4.]. Ciekaw-

sze miejsca to (1), gdzie dodajemy wygene-

rowany przez GWT kod JavaScript aplikacji.

(2) to opcjonalne włączenie emulatora histo-

rii, dzięki tej linii kodu w przyszłości będzie

można używać przycisku przeglądarki cofnij

mimo, że nie doszło ani razu do przeładowa-

nia strony internetowej.

W punkcie (3) tworzona jest tabelka

z dwoma identyfikatorami slot1 i slot2 , ła-

two skojarzyć to z punktami (9,10) Listingu

3., by zauważyć, że jest to miejsce, gdzie zo-

staną wstrzyknięte przycisk i etykieta apli-

kacji. Dzięki takiemu zapisowi możemy two-

Rysunek 3. Widok działającej aplikacji w przeglądarce Firefox (WebMode)

Rysunek 4. Przeglądanie serwisów – AMFPHP.

06/2007

GWT

rzyć oddzielnie własną strukturę HTML, wy-

pełniając tylko odpowiednie elementy, w peł-

ni zarządzanymi przez GWT obiektami. Aby

upewnić się, że wszystko jest zrozumiałe, pro-

ponujemy dokonać własnych zmian w kodzie,

sprawdzając, jak zareaguje (albo czy w ogó-

le zareaguje) na to aplikacja GWT. Po więcej

ciekawych przykładów wykorzystania GWT

odsyłamy na stronę domową projektu: http:

//code.google.com/webtoolkit/documentation/

examples/ . Warto obejrzeć dema, zanim przej-

dziemy do następnego tematu.

Aby w najprostszy z możliwych sposo-

bów zaprezentować działanie powyższe-

go, zmieńmy bazową aplikację tak, by na

zdarzenie kliknięcia pobierała informa-

cję o naszym numerze IP z witryny http://

whatismyip.org/ .

W tym celu zmieniamy implementację me-

tody onClick w klasie SmallBear (patrz Li-

sting 5.), tak by w kroku 1. zapytać serwer

o nasz numer IP, w kroku 2. zareagować na

odpowiedź serwera, wyświetlając odpowiedź

w kroku 3. – JavaScriptowy alert. To nam wy-

starczy, by upewnić się, że komunikacja asyn-

chroniczna działa.

Listing 2. Komunikat skryptu generującego

schemat aplikacji

Please use 'client' as the inal

package , as in 'com.

example.foo.client.MyApp' .

It isn ' t technically necessary ,

but this tool enforces the best

practice .

link bezpośredni: http://www.5etdemi.com/

uploads/amfphp-1.9.beta.20070513.zip ).

Po ściągnięciu wystarczy rozpakować ar-

chiwum do katalogu hdocs serwera apache

i przejść do katalogu bazowego aplikacji,

czyli {$HTDOC_DIR}/amfphp/services . To

tutaj będziemy umieszczali nasze usługi dla

GWT.

Zasada działania AMFPHP jest bardzo pro-

sta, jeśli wywołamy na serwerze www zapy-

tanie postaci: http://localhost//amfphpjson/

json.php/MyService.myRemoteMethod/arg1/

arg2 to zostanie ono obsłużone w następu-

jący sposób:

GWT i HTTPRequest

Jak na razie pokazaliśmy jedynie, że tłuma-

czenie Javy do JavaScrpt–u działa, ale nie było

w tym nic z asynchronicznej komunikacji z ser-

werem (AJAX). Powoli przejdziemy do wywo-

ływania zdalnych metod na serwerze PHP. Za-

czniemy od odrobiny teorii.

Dla naszych potrzeb, komunikacją z serwe-

rem w GWT, zajmuje się klasa HTTPRequest.

Posiada ona cztery statyczne metody imple-

mentujące asynchroniczną wymianę informa-

cji. W poniższym przykładzie wykorzystamy

tylko jedną z nich:

GWT i AMFPHP

Potrafimy już wysyłać i odbierać proste da-

ne z serwera. Bardziej skomplikowane struk-

tury danych trzeba niestety serializować.

My do tego celu będziemy używać forma-

tu JSON (JavaScript Object Notation), któ-

ry doczekał się implementacji parserów

w większości znanych języków programo-

wania, a napewno w PHP i GWT. Pozosta-

je nam tylko odebrać komunikat po stronie

PHP, zdeserializować go, przetworzyć zapy-

tanie i wysłać odpowiedź do GWT.

Sprawa prosta, ale dla bardziej zaawanso-

wanych aplikacji, gdy serwer implementować

będzie wiele zdalnie wywoływanych metod,

należałoby przewidzieć możliwość dobrego

zarządzania takimi metodami.

Z pomocą przychodzi dojrzała już apli-

kacja AMFPHP. AMFPHP w wersji 1.9 na

dzień pisania tego artykułu był dostępny

jedynie na blogu twórcy projektu ( http://

www.5etdemi.com/blog/ ) (dla niecierpliwych

asyncGet (String url,

ResponseTextHandler handler)

• AMFPHP powoła do życia instancje klasy

MyService (której definicja musi znajdo-

wać się w pliku MyService.php w katalogu

/services );

• sprawdzi, czy myRemoteMethod jest me-

todą ze zdefiniowanym zdalnym dostę-

pem;

• uruchomi metodę myRemoteMethod z ar-

gumentami arg1, arg2 odpowiednio dese-

rializując parametry, jeśli trzeba;

• na koniec serializuje i zwraca wynik.

gdzie:

url to – to URL (musi być adresem

bezwsględnym)

handler –to obiekt, który zostanie

poinformowany w momencie

odpowiedzi serwera.

R E K L A M A

www.phpsolmag.org

Narzędzia

Przykład klasy implementującej prosty serwis

dla AMFPHP widać na Listingu 5. W Punk-

tach:1., 2. i 3. definiujemy odpowiednio na-

zwę udostępnianej metody, jej opis i zdalny

typ dostępu.

Punkt 4. to już implementacja metody,

której nazwę zdefiniowaliśmy w Punkcie

1. Dla tak zdefiniowanego serwisu, może-

my uruchomić dostarczoną przez AMFPHP

przeglądarkę do testowania usług. Wystarczy

otworzyć plik browser/index.html i powin-

niśmy zobaczyć jak AMFPHP widzi nasz ser-

wis (Rysunek 4.).

Tu możemy też, po raz pierwszy, sprawdzić

czy działa on poprawnie. Przetestujmy meto-

dę getSum, wpisując w odpowiednie pola wy-

brane wartości i uruchamiając metodę po-

przez naciśnięcie przycisku call . Wynik spo-

dziewany, widoczny jest na Rysunku 4. Pozo-

staje teraz wywołać daną metodę poprzez apli-

kację GWT.

Po stronie AMFPHP serializacja i deseriali-

zacja robiona jest automatycznie, po stronie

GWT musimy obsłużyć ją sami.

Do tego przykładu wykorzystamy wbu-

dowaną w GWT bibliotekę ( com.google.gwt.

json.JSON ).

Aby móc ją wykorzystać, musimy do pliku

SmallBear.gwt.xml (w tym przypadku plik-

ten znajduje się w katalogu c:\workspace\

smallbear\src\pl\rmalinowski\ ) dodać do-

datkowy wpis:

<inherits name=

'com.google.gwt.json.JSON'/>

Poinformuje on kompilator GWT, że do wyge-

nerowanego JavaScript–u należy dodać wska-

zaną bibliotekę. Użycie biblioteki wygląda na-

stępująco:

• serializacja:

JSONNumber jsonNumber = new

JSONNumber(12.0) ;

// zwraca zakodowaną wartość

//numeryczną

JSONNumber.toString();

• deserializacja :

try {

JSONObject jsonObject =

(JSONObject) JSONParser.parse(

jsonStringWith

SerializedObject);

} catch (JSONException e) {

Window.alert('JSON parse error!');

}

Możemy teraz przejść do etapu komunikacji

z serwerem AMFPHP. W tym celu URL z Li-

stingu 5., kroku 1., zamieniamy zgodnie z sza-

blonem przedstawionym powyżej. Wywoła-

nie zdalnej metody powinno wyglądać jak na

Listingu 7. Tak przygotowaną aplikację może-

my już uruchamiać.

Rysunek 5. Debugowanie aplikacji GWT w Eclipse IDE

Dodatkowe informacje

Przedstawiony przykład komunikacji GWT

z PHP jest bardzo prosty i dla bardziej za-

awansowanych aplikacji wymaga rozbudo-

wania.

Zanim zdecydujemy się, czy używać

GWT we własnych projektach, warto jesz-

cze zapoznaćsię z kilkoma dodatkowymi

funkcjonalnościami, jakie zapewnia ten fra-

mework.

Debugowanie

Uruchamiając aplikację GWT w tzw. hosted

mode, mamy możliwość debugowania jej,

co oznacza, że możemy śledzić krok po kro-

ku jak wykonuje się aplikacja, jeszcze przed

przetłumaczeniem jej na JavaScript.

Używając eclipse wystarczy z menu wy-

brać Run –> Debug a następnie z listy Java

Aplication wybrać nazwę projektu i klik-

nąć w przycisk Debug. Jeśli wcześniej zo-

stały ustawione breakpoint–y , to powinni-

śmy zobaczyć widok podobny do ekranu

z Rysunku 5.

Rysunek 6. Wynik testów jednostkowych w Eclipse IDE

Testy jednostkowe

GWT wspiera również testy jednostkowe.

Wraz z narzędziami ProjectCreator i Aplica-

tionCreator dostajemy JunitCreator. Jest to

06/2007

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: