Google Web Toolkit

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ę...
Powinieneś wiedzieć...
• Jakie są zalety GWT.
• Przydatna będzie podstawowa znajomość JAVA.
Poziom trudności
D
laczego 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;
46
• 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.
Wprowadzenie do GWT
Teraz, gdy już wiemy, że Google Web Toolkit
to narzędzie do tłumaczenia kodu Java na JavaScript, 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):
•
– to paczka przechowująca
gotowe do wykorzystania w środowisku JS
komponenty i narzędzia;
• gwt–servlet.jar – paczka implementująca mechanizmy pozwalające na kogwt–user.jar
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 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
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 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
06/2007
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 (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.
• 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,
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:
• 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.
Rysunek 1. Widok szkieletu aplikacji GWT w Eclipse
Przyjrzymy się teraz, jak działają wspomniane narzędzia:
• projectCreator – tworzy szkielet nowego
projekt, jego składnia to:
ProjectCreator [–ant projectName] [–
eclipse projectName] [–out dir] [–
overwrite] [–ignore] gdzie:
•
•
•
•
•
•
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:
ant
ApplicationCreator
[–eclipse projectName] [–out
dir] [–overwrite] [–ignore]
className gdzie:
www.phpsolmag.org
Rysunek 2. Widok działającej aplikacji w trybie HostedMode
47
Narzędzia
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 wybo-
ru 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
Rysunek 3. Widok działającej aplikacji w przeglądarce Firefox (WebMode)
Rysunek 4. Przeglądanie serwisów – AMFPHP.
48
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 two06/2007
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.
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 http://
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 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:
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 (http://
www.5etdemi.com/blog/) (dla niecierpliwych
asyncGet(String url,
ResponseTextHandler handler)
gdzie:
url to – to URL (musi być adresem
bezwsględnym)
handler –to obiekt, który zostanie
poinformowany w momencie
odpowiedzi serwera.
R
www.phpsolmag.org
E
K
L
A
M
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: http://www.5etdemi.com/
uploads/amfphp-1.9.beta.20070513.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: http://localhost//amfphpjson/
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.
A
Narzędzia
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 meto-
dę 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ć do-
datkowy 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
Rysunek 5. Debugowanie aplikacji GWT w Eclipse IDE
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.
Testy jednostkowe
Rysunek 6. Wynik testów jednostkowych w Eclipse IDE
50
GWT wspiera również testy jednostkowe.
Wraz z narzędziami ProjectCreator i AplicationCreator dostajemy JunitCreator. Jest to
06/2007
GWT
narzędzie do automatycznego generowania
testów i osadzenia ich we wskazanym projekcie. Składnia JunitCreator-a to:
Listing 3. Plik SmallBear.java
package pl.rmalinowski.client;
// klasy, które będziemy wykorzystywać w tym przykładzie
• JUnitCreator – junit
pathToJUnitJar
– module moduleName [–eclipse
projectName] [–out dir] [–overwrite]
[–ignore] className gdzie:
•
•
•
•
•
•
•
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.
junit
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 (http://junit.org) 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 wszystwww.phpsolmag.org
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:#000000}
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
Narzędzia
Listing 5. Przykład asynchronicznej komunikacji
button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
HTTPRequest.asyncGet("http://whatismyip.org", new ResponseTextHandler() { //(1)
public void onCompletion(String responseText) { //(2)
Window.alert("My ip is: " + responseText); //(3)
}
});
}
});
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.
Listing 6. Przykład klasy implementującej serwis wAMFPHP
Podsumowanie
<?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 = "http://localhost//amfphp/json.php/MyService.getSum/"+arg1.toString()+
"/"+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!");
}
});
}
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 (http://code.
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.
});
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
52
RAFAŁ MALINOWSKI
(http://rmalinowski.pl) – zawodowo pracuje jako
Java EE 5 projektant i programista, bierze udział
w kilku projektach opensource rozwijanych w technologii PHP i Flash.
06/2007