Google Web Toolkit. Powinieneś wiedzieć... Przydatna będzie podstawowa znajomość JAVA.

Transkrypt

1 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. Poziom trudności Dlaczego w dzisiejszym świecie Web 2.0 GWT się liczy? Odpowiedź jest prosta, daje możliwości wykorzystania rozbudowanych i dojrzałych narzędzi języka Java, przy pracy z JavaScript em. Dzięki GWT, możemy teraz refaktorować swój JavaScript, debugować go, używać mechanizmu podpowiadania nazw i składni. Już samo to, daje 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 obiektowego 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 konstruktorów czy metod) i wielu, wielu innych. Posiada 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łumaczyć aplikacje napisane w Javie na JavaScript, przy zachowaniu pełnej kontroli nad wynikowym 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: wprowadzenie do GWT gdzie poznasz podstawowe informacje, jak rozpocząć pracę z GWT; Powinieneś wiedzieć... Przydatna będzie podstawowa znajomość JAVA. pierwsza aplikacja gdzie pokażemy jak to działa, ale na razie tylko po stronie klienckiej; GWT i RPC / AMFPHP gdzie przedstawimy bardziej zaawansowany przykład, w którym komunikujemy się z serwerem; dodatkowe informacje gdzie wejdziemy mocniej w szczegóły, które, mamy nadzieję, przekonają do GWT tych jeszcze nieprzekonanych. Listing 1. Uruchamiamy projectcreator 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 wykorzystaniu AJAX. Tak naprawdę GWT składa się z trzech części, zamkniętych w pojedynczych plikach JAR (Java ARchiwe): gwt user.jar to paczka przechowująca gotowe do wykorzystania w środowisku JS komponenty i narzędzia; gwt servlet.jar paczka implementująca mechanizmy pozwalające na ko- 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 file c:\workspace\smallbear\smallbear.ant.xml Overwriting existing file c:\workspace\smallbear\.project Overwriting existing file c:\workspace\smallbear\.classpath a następnie aplicationcreator poleceniem: C:\gwt>applicationCreator overwrite eclipse SmallBear out c:\workspace\smallbear w wyniku czego powinniśmy zobaczyć: pl.rmalinowski.client.smallbear 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 file c:\workspace\smallbear\src\pl\rmalinowski\smallbear.gwt.xml Created file c:\workspace\smallbear\src\pl\rmalinowski\public\smallbear.html Created file c:\workspace\smallbear\src\pl\rmalinowski\client\smallbear.java Created file c:\workspace\smallbear\smallbear.launch Created file c:\workspace\smallbear\smallbear shell.cmd Created file c:\workspace\smallbear\smallbear compile.cmd 46 06/2007

2 GWT munikację serwera napisanego w Javie z aplikacją napisaną w JS. (My nie używamy); gwt dev windows.jar lub gwt dev linux. jar serce GWT, mechanizmy tłumacząca Javę na JS. Aby rozpocząć pracę z GWT musimy: mieć zainstalowaną wirtualną maszynę Java (min wersja 1.4), jeśli jej nie masz, ściągnij i zainstaluj Sun Java Standard Edition SDK ( index.jsp); ściągnąć Google Web Toolkit package ( html); posiadać podstawy w rozumieniu języka Java 1.4. 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 tworzenia szkieletu projektu i aplikacji zgodnej z zaleceniami developerów z Google. Prawidłowa aplikacja GWT składa się z: eclipse tworzy konfiguracje uruchamiającą projekt eclipsowy w trybie debug; out folder do zapisania plików wynikowych (domyślnie bieżący); overwrite nadpisuje istniejące pliki; ignore ignoruje istniejące pliki, (nie nadpisuje); classname pełna nazwa tworzonej startowej klasy aplikacji. Pierwsza aplikacja Przechodzimy do stworzenia pierwszej aplikacji w GWT. Jeśli pojawiły się już jakieś niejasności, to ten krok prawdopodobnie większość 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 klikamy 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 nadpisania tak powstałego zalążka nowego projektu, przez szkielet generowany przy użyciu narzędzi GWT. Uruchamiamy projectcreator poleceniem: (Listing 1.). Po wykonaniu przedstawionych komend i odświeżeniu projektu w Eclipse, pliku HTML, w którym osadzana zostanie 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 EntryPoint, jest to miejsce w którym rozpoczyna pracę nasz program. Przyjrzymy się teraz, jak działają wspomniane narzędzia: Rysunek 1. Widok szkieletu aplikacji GWT w Eclipse projectcreator tworzy szkielet nowego projekt, jego składnia to: ProjectCreator [ ant projectname] [ eclipse projectname] [ out dir] [ overwrite] [ ignore] gdzie: ant generuje Ant buildfile do kompilacji źródeł (.ant.xml będzie dodany); eclipse generuje projekt eclipsowy out folder do zapisania plików wynikowych (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 47

3 Rysunek 3. Widok działającej aplikacji w przeglądarce Firefox (WebMode) Rysunek 4. Przeglądanie serwisów AMFPHP. szkielet aplikacji GWT powinien wyglądać tak, jak na Rysunku 1. Warto w tym miejscu zauważyć, że tworząc aplikację, klasę startową umieściliśmy w pakiecie client. Jest to zalecane przez developerów Google i jeśli tego nie zrobimy, skrypt generujący schemat aplikacji powinien pokazać nam mniej więcej taki komunikat: (Listing 2.). Warto o tym pamiętać, by w przypadku takiego przeoczenia nie marnować czasu na zastanawianie się, gdzie popełniliśmy błąd. Ponieważ skorzystaliśmy z generatora szkieletu aplikacji, tak przygotowany projekt możemy od razu uruchomić. Do wyboru mamy dwa tryby: HostedMode i WebMode. Tryb HostedMode jest trybem w pełni zarządzanym przez GWT, oznacza to, że możemy 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, czyli wskazana przez nas przeglądarka internetowa. 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 Firefoksie, będzie on działał tak samo. Aby uruchomić aplikację w trybie Hosted wywołujemy wygenerowany w katalogu domowym projektu skrypt SmallBear shell, efekt oczekiwany widoczny jest na Rysunku 2. Aby uruchomić aplikację w trybie Web uruchamiamy 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ć). Warto zauważyć, że tak wygenerowana aplikacja, jest zwykłą stroną html, którą możemy otworzyć bezpośrednio na dysku twardym, innymi słowy, nie potrzebujemy do tego serwera WWW. Efekt uruchomienia pliku SmalBear.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 implementuje interfejs EntryPoint. EntryPoint to miejsce, w którym rozpoczyna pracę aplikacja. Pisząc dokładniej, przy ładowaniu strony internetowej, w pierwszej kolejności ładowane 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 rozpoczyna się praca programu. Jak widać, nie ma tu trudności, w kroku 1. tworzony jest nowy przycisk z etykietką Click me, w kroku 2. tworzona jest pusta etykieta. Następnie oprogramowujemy zdarzenie onclick przycisku 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 razem, 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 wstawiamy 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.]. Ciekawsze miejsca to (1), gdzie dodajemy wygenerowany przez GWT kod JavaScript aplikacji. (2) to opcjonalne włączenie emulatora historii, 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ładowania strony internetowej. W punkcie (3) tworzona jest tabelka z dwoma identyfikatorami slot1i slot2, łatwo skojarzyć to z punktami (9,10) Listingu 3., by zauważyć, że jest to miejsce, gdzie zostaną wstrzyknięte przycisk i etykieta aplikacji. Dzięki takiemu zapisowi możemy two /2007

4 GWT rzyć oddzielnie własną strukturę HTML, wypełniając tylko odpowiednie elementy, w pełni zarządzanymi przez GWT obiektami. Aby upewnić się, że wszystko jest zrozumiałe, proponujemy 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 przejdziemy do następnego tematu. GWT i HTTPRequest Jak na razie pokazaliśmy jedynie, że tłumaczenie Javy do JavaScrpt u działa, ale nie było w tym nic z asynchronicznej komunikacji z serwerem (AJAX). Powoli przejdziemy do wywoływania zdalnych metod na serwerze PHP. Zaczniemy od odrobiny teorii. Dla naszych potrzeb, komunikacją z serwerem w GWT, zajmuje się klasa HTTPRequest. Posiada ona cztery statyczne metody implementujące asynchroniczną wymianę informacji. W poniższym przykładzie wykorzystamy tylko jedną z nich: asyncget(string url, gdzie: ResponseTextHandler handler) url to to URL (musi być adresem bezwsględnym) handler to obiekt, który zostanie poinformowany w momencie odpowiedzi serwera. Aby w najprostszy z możliwych sposobów zaprezentować działanie powyższego, zmieńmy bazową aplikację tak, by na zdarzenie kliknięcia pobierała informację o naszym numerze IP z witryny whatismyip.org/. W tym celu zmieniamy implementację metody onclick w klasie SmallBear (patrz Listing 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 wystarczy, by upewnić się, że komunikacja asynchroniczna działa. GWT i AMFPHP Potrafimy już wysyłać i odbierać proste dane z serwera. Bardziej skomplikowane struktury danych trzeba niestety serializować. My do tego celu będziemy używać formatu JSON (JavaScript Object Notation), który doczekał się implementacji parserów w większości znanych języków programowania, a napewno w PHP i GWT. Pozostaje nam tylko odebrać komunikat po stronie PHP, zdeserializować go, przetworzyć zapytanie i wysłać odpowiedź do GWT. Sprawa prosta, ale dla bardziej zaawansowanych 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ż aplikacja AMFPHP. AMFPHP w wersji 1.9 na dzień pisania tego artykułu był dostępny jedynie na blogu twórcy projektu ( (dla niecierpliwych Listing 2. Komunikat skryptu generującego schemat aplikacji Please use 'client' as the final package, as in 'com. example.foo.client.myapp'. It isn't technically necessary, but this tool enforces the best practice. link bezpośredni: uploads/amfphp-1.9.beta zip). Po ściągnięciu wystarczy rozpakować archiwum 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 prosta, jeśli wywołamy na serwerze www zapytanie postaci: json.php/myservice.myremotemethod/arg1/ arg2 to zostanie ono obsłużone w następujący sposób: AMFPHP powoła do życia instancje klasy MyService (której definicja musi znajdować się w pliku MyService.php w katalogu /services); sprawdzi, czy myremotemethod jest metodą ze zdefiniowanym zdalnym dostępem; uruchomi metodę myremotemethod z argumentami arg1, arg2 odpowiednio deserializując parametry, jeśli trzeba; na koniec serializuje i zwraca wynik. R E K L A M A

5 Rysunek 5. Debugowanie aplikacji GWT w Eclipse IDE Przykład klasy implementującej prosty serwis dla AMFPHP widać na Listingu 5. W Punktach:1., 2. i 3. definiujemy odpowiednio nazwę 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żemy uruchomić dostarczoną przez AMFPHP przeglądarkę do testowania usług. Wystarczy otworzyć plik browser/index.html i powinniśmy zobaczyć jak AMFPHP widzi nasz serwis (Rysunek 4.). Tu możemy też, po raz pierwszy, sprawdzić czy działa on poprawnie. Przetestujmy metodę getsum, wpisując w odpowiednie pola wybrane wartości i uruchamiając metodę poprzez naciśnięcie przycisku call. Wynik spodziewany, widoczny jest na Rysunku 4. Pozostaje teraz wywołać daną metodę poprzez aplikację GWT. Po stronie AMFPHP serializacja i deserializacja robiona jest automatycznie, po stronie GWT musimy obsłużyć ją sami. Do tego przykładu wykorzystamy wbudowaną w GWT bibliotekę (com.google.gwt. json.json). Aby móc ją wykorzystać, musimy do pliku SmallBear.gwt.xml (w tym przypadku plikten znajduje się w katalogu c:\workspace\ smallbear\src\pl\rmalinowski\) dodać dodatkowy wpis: <inherits name= 'com.google.gwt.json.json'/> Poinformuje on kompilator GWT, że do wygenerowanego JavaScript u należy dodać wskazaną bibliotekę. Użycie biblioteki wygląda nastę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 Listingu 5., kroku 1., zamieniamy zgodnie z szablonem przedstawionym powyżej. Wywołanie zdalnej metody powinno wyglądać jak na Listingu 7. Tak przygotowaną aplikację możemy już uruchamiać. Dodatkowe informacje Przedstawiony przykład komunikacji GWT z PHP jest bardzo prosty i dla bardziej zaawansowanych aplikacji wymaga rozbudowania. Zanim zdecydujemy się, czy używać GWT we własnych projektach, warto jeszcze zapoznaćsię z kilkoma dodatkowymi funkcjonalnościami, jakie zapewnia ten framework. Debugowanie Uruchamiając aplikację GWT w tzw. hosted mode, mamy możliwość debugowania jej, co oznacza, że możemy śledzić krok po kroku jak wykonuje się aplikacja, jeszcze przed przetłumaczeniem jej na JavaScript. Używając eclipse wystarczy z menu wybrać Run > Debug a następnie z listy Java Aplication wybrać nazwę projektu i kliknąć w przycisk Debug. Jeśli wcześniej został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 AplicationCreator dostajemy JunitCreator. Jest to 50 06/2007

6 GWT narzędzie do automatycznego generowania testów i osadzenia ich we wskazanym projekcie. Składnia JunitCreator-a to: JUnitCreator junit pathtojunitjar module modulename [ eclipse projectname] [ out dir] [ overwrite] [ ignore] classname gdzie: junit określa ścieżkę do junit.jar (wymagane); module nazwa testowanego modułu GWT (wymagane); eclipse tworzy konfiguracje integrujący junit z eclipse; out folder do zapisania plików wynikowych (domyślnie bierzący); overwrite nadpisuje istniejące pliki; ignore ignoruje istniejące pliki, (nie nadpisuje); classname pełna nazwa tworzonej klasy testowej. Aby móc przeprowadzać testy jednostkowe projektu SmallBear uruchamiamy junitcreator : C:\gwt>junitCreator junit c:\junit\ junit.jar module pl.rmalinowski. SmallBear eclipse SmallBear out c: \workspace\smallbear pl.rmalinowski. client.smallbeartest Używając junitcreator a należy wskazać ścieżkę dostępu do biblioteki junit.jar, w tym przypadku jest to c:\junit\junit.jar. Jeśli nie posiadasz biblioteki junit.jar, możesz ją ściągnąć ze strony projektu ( lub użyć biblioteki wbudowanej w eclipse: ({$ECLIPSE_DIR\plugins\ org.junit_3.8.1\junit.jar) wynik to: Listing 8. Po odświeżeniu projektu w oknie eclipse, powinniśmy zobaczyć nowy katalog test, a w nim wygenerowany test. Klikając prawym przyciskiem na pl.rmalinowski.client.smallbeartest, a następnie wybierając Debug as > Java application rozpoczynamy test aplikacji. (Test uruchomić możemy również, wybierając z menu Run > Debug > Junit > SmallBearTest). Do wyboru mamy dwa rodzaje testów, testy w trybie hosted i web. Tak jak to zostało już na początku wspomniane, pierwszy tryb wykonuje aplikację bez tłumaczenia jej na JS, a drugi tryb najpierw konwertuje Javę do JS i dopiero wtedy ją uruchamia. W tym przypadku testy zostaną wykonane już na domyślnym kodzie JS. Rysunek 6. przedstawia ekran, prezentujący wynik sumaryczny uruchomionych testów. JavaScript Native Interface GWT nie byłby tak popularny, gdyby zamykał drzwi tym, którzy chcieliby mimo wszyst- Listing 3. Plik SmallBear.java package pl.rmalinowski.client; // klasy, które będziemy wykorzystywać w tym przykładzie import com.google.gwt.core.client.entrypoint; import com.google.gwt.user.client.ui.button; import com.google.gwt.user.client.ui.clicklistener; import com.google.gwt.user.client.ui.label; import com.google.gwt.user.client.ui.rootpanel; import com.google.gwt.user.client.ui.widget; // i jeszcze to co będzie wykorzystywane w następnych przykładach import com.google.gwt.user.client.httprequest; import com.google.gwt.user.client.window; import com.google.gwt.user.client.responsetexthandler; import com.google.gwt.json.client.jsonexception; import com.google.gwt.json.client.jsonnumber; import com.google.gwt.json.client.jsonparser; public class SmallBear implements EntryPoint { public void onmoduleload() { final Button button = new Button("Click me"); //(1) final Label label = new Label(); //(2) button.addclicklistener(new ClickListener() { //(3) public void onclick(widget sender) { //(4) if (label.gettext().equals("")) //(5) label.settext("hello World!"); //(6) else //(7) label.settext(""); //(8) ); RootPanel.get("slot1").add(button); //(9) RootPanel.get("slot2").add(label); //(10) Listing 4. Plik SmallBear.html <html> <head> <title>wrapper HTML for SmallBear</title> <style> body,td,a,div,.p{font family:arial,sans serif div,td{color:# a:link,.w,.w a:link{color:#0000cc a:visited{color:#551a8b a:active{color:#ff0000 </style> <script language='javascript' src='pl.rmalinowski. SmallBear.nocache.js'></script> <! (1) > </head> <body> <iframe src="javascript:''" id=" gwt_historyframe " style="width:0;height:0;border:0"></iframe> <! (2) > <h1>smallbear</h1> <p> This is an example of a host page for the SmallBear application. (...). </p> <table align=center> <tr> <td id="slot1"></td><td id="slot2"></td> <! (3) > </tr> </table> </body> </html> 51

7 Listing 5. Przykład asynchronicznej komunikacji button.addclicklistener(new ClickListener() { public void onclick(widget sender) { HTTPRequest.asyncGet(" new ResponseTextHandler() { //(1) public void oncompletion(string responsetext) { //(2) Window.alert("My ip is: " + responsetext); //(3) ); ); Listing 6. Przykład klasy implementującej serwis wamfphp <?php class MyService{ function MyService(){ $this >methodtable = array( "getsum" => array( //(1) "description" => "Returns sum of two int", //(2) "access" => "remote"//(3) ) ); public function getsum($a, $b) { //(4) return $a + $b;?> Listing 7. Przykład klasy komunikującej się z serwisem AMFPHP button.addclicklistener(new ClickListener() { public void onclick(widget sender) { JSONNumber arg1 = new JSONNumber(12.0); JSONNumber arg2 = new JSONNumber(100.0); String url = " "/"+arg2.tostring(); HTTPRequest.asyncGet(url, new ResponseTextHandler() { //(1) public void oncompletion(string responsetext) { //(2) try { JSONNumber jsonnumber = (JSONNumber) JSONParser.parse(responseText); Window.alert("Sum = " + jsonnumber.getvalue()); catch (JSONException e) { Window.alert("JSON parse error!"); ); ); Listing 8. Wynik użycia biblioteki wbudowanej w eclipse Created directory c:\workspace\smallbear\test\pl\rmalinowski\client Created file c:\workspace\smallbear\test\pl\rmalinowski\client\smallbeartest.java Created file c:\workspace\smallbear\smallbeartest hosted.launch Created file c:\workspace\smallbear\smallbeartest web.launch Created file c:\workspace\smallbear\smallbeartest hosted.cmd Created file c:\workspace\smallbear\smallbeartest web.cmd ko uruchamiać natywny kod JavaScript. Kiedy zachodzi taka potrzeba? Przede wszystkim w przypadku, gdy mamy już napisane sporo w JS i w nieinwazyjny sposób chcielibyśmy połączyć taki kod z GWT. Inną potrzebą wykorzystania JSNI, jest przekazywanie parametrów z PHP do GWT. Możemy wtedy generować stronę, w której osadzany jest moduł GWT z wygenerowanym przez PHP kodem JS np.: Array wypełnionymi danymi, a poprzez JSNI odwoływać się do tej tablicy. Podsumowanie Przedstawiliśmy zaledwie zarys możliwości, jakie daje Google Web Toolkit. Nic nie wspomnieliśmy o prostocie dodawania dodatkowych komponentów do naszej aplikacji, a pojawia się ich coraz więcej. Nie zostało też wspomniane o zarządzaniu historią przeglądarki, dzięki czemu, nawet jeśli cała interakcja z użytkownikiem przebiega na jednej nieprzeładowanej stronie, to cały czas mamy do dyspozycji przycisk cofnij, który może dla nas zapamiętywać poprzednie stany aplikacji. Nie wspomnieliśmy też o jednym z najważniejszych, że GWT to opensource. Odsyłamy do stron projektu ( google.com/webtoolkit/), gdzie wszystkie te i wiele innych informacji można doczytać. Na koniec postaramy się jeszcze odpowiedzieć na jedno pytanie. Kiedy warto wybrać GWT? Przede wszystkim, gdy planujemy stworzyć rozbudowaną aplikację kliencką. Przy naprawdę małych skryptach, tam gdzie istotna jest wielkość ściąganego przez przeglądarkę kodu, GWT nie jest dobrym wyborem. Zawsze, gdy tylko zaczynamy myśleć, jak ułatwić użytkownikowi administrowanie naszym sklepem, czy CMS'em. Tam gdzie rodzą się pomysły na dynamiczne pojawianie się list rozwijanych, automatyczne uzupełnianie nazw artykułów, czy choćby walidacja kodów pocztowych, tam też jest miejsce dla GWT. Najlepsze jednak jest to, że kod GWT napisany raz, działa na wielu przeglądarkach, a jeśli nie działa, jest duże prawdopodobieństwo, że za chwilę będzie wszystko w porządku. Dlatego jeśli tylko mamy wybór, uczyć się JS, czy uczyć się Javy pod kątem GWT, proponujemy wybrać GWT. RAFAŁ MALINOWSKI ( zawodowo pracuje jako Java EE 5 projektant i programista, bierze udział w kilku projektach opensource rozwijanych w technologii PHP i Flash /2007