Google Web Toolkit (12-14) 2008/2009

Z JASR Wiki

<<< Powrót do Tworzenie aplikacji wielowarstowych 2008/2009

Spis treści

Wprowadzenie

Instalacja

Potrzebne są:

Dla radości pisania:

Należy rozpakować paczki. W artykule dalej zakłada się, że folder zawierający GWT, będzie miał ścieżkę $GWT_HOME

Prezentacja możliwości GWT

Na początku warto zapoznać się z przykładami dostarczonymi razem z dystrybucją GWT. Wszystkie znajdują się w $GWT_HOME/samples. Przy założeniu, że bieżący katalog to $GWT_HOME/samples, uruchamia się przez ./$NAZWA_PRZYKLADU/$NAZWA_PRZYKLADU-shell. Sugerowana kolejność:

  • Hello :: aplikacja składa się tylko z jednego przycisku, po klinknięciu którego jest wykonywana jakaś akcja.
  • I18N :: wsparcie GWT dla internacjonalizacji; mało ciekawy, ale z punktu widzenia tworzenia aplikacji - może być przydatny
  • Showcase :: przeglądarka gotowych komponentów, pozwala na przełączanie między wyglądem komponentów, a kodem źródłowym
  • Mail :: aplikacja, wyglądająca jak klient poczty.

Ćwiczenie 0: applicationCreator (można pominąć)

GWT daje możliwość wygenerowania skryptów tworzących strukturę projektu oraz jego uruchamiania, a także kompilacji do JS bez użycia IDE. W efekcie dostajemy strukturę podobną jak w samples.

Jeśli już zdecydujemy się, żeby wypróbować applicationCreator, szybko dojdziemy do wniosku, że mimo wszystko przydałby się jakiś edytor (np. Eclipse). Możemy łatwo stworzyć projekt Eclipsowy zgodnie z:

Ćwiczenie 1: Pierwsza aplikacja ze wsparciem IDE

Intellij IDEA 8.1 posiada natywne wsparcie dla GWT. Dodatkowo w sieci dostępny jest tutorial, w którym tworzy się prostą aplikację w GWT, przy użyciu tegoż narzędzia. Propozycja jest o tyle ciekawa, że dzięki użyciu IDE nie musimy rozwiązywać problemów, których istnienia na początku nie jesteśmy nawet świadomi.

Zadanie polega na stworzeniu przeglądarki zdjęć takiej jak w tutorialu, zalecane jest użycie Intellij IDEA, aczkolwiek nie jest to obowiązkowe.

Ćwiczenie 2: Kółko i krzyżyk

Napisać kółko i krzyżyk w GWT. Pola powinny być przyciskami, które po kliknięciu zmieniają etykietę (aButton.setText(..)). Rozmiar planszy to 3x3. Przydatne mogą być 2 klasy: 

 HorizontalPanel hp = new HorizontalPanel();
 hp.setSpacing(5);
 
 /*oraz*/

 VerticalPanel vp = new VerticalPanel();
 vp.setSpacing(5);

 /*panele można zagnieżdżać*/

 vp.add(hp);

 /*oraz dodawać do RootPanel*/ 
 
 RootPanel.get().add(vp);


Ćwiczenie 3: Bardziej wyszukane komponenty

Poeksperymentować z komponentami z Showcase lub spróbować użyć biblioteki ExtGWT.

Uwaga: Korzystanie z zewnętrznych bibliotek wiąże się z koniecznością ich zadeklarowania w deskryptorze modułu: 

<!-- dla ExtGWT -->
<inherits name='com.extjs.gxt.ui.GXT'/>


Nieco bardziej zaawansowane przykłady

Ich uruchomienie po zmianie wersji na aktualne, może sprawiać kłopoty, dlatego polecam jeśli ktoś lubi wyzwania

GWT + Maven

zobacz artykuł Jacka Laskowskiego na temat połączenia GWT i Maven2

GWT + JPA

zobacz artykuł Jacka Laskowskiego na temat połączenia GWT i Java Persistence API

ExtGWT

W aplikacjach komercyjnych, czasami chciałoby się mieć więcej gotowych elementów do prezentacji danych (np. bardziej rozbudowane tabelki). Można oczywiście za każdym razem takie rzeczy oprogramowywać od zera, ale na rynku dostępny jest produkt komercyjny (bezpłatny do celów edukacyjnych) o otwartym kodzie źródłowym.

Producent popularnej biblioteki Javascript'owej (http://extjs.com) przeniósł (napisał od zera) większość funkcjonalności znanych z ExtJS do "ekosystemu Javy", czyli zintegrował to z GWT.

Tutoriale


Ciekawe linki

Źródło „http://duch.mimuw.edu.pl/~sroka/wiki/index.php/Google_Web_Toolkit_(12-14)_2008/2009”
Osobiste