Nowe JUGi w Opolu i Tarnowie oraz obsługa obrazków w GWT z ImageBundle

JAVArsovia 2008 za nami, a jej echo wciąż rozbrzmiewa. Powstają nowe grupy użytkowników technologii Java (JUG = Java User Group) i na scenie pojawiła się opolska grupa JUG - Opole JUG. Mówi się, że Opole to miasto .Net i PHP, więc dużo pracy przed opolskimi jugowiczami. Andrzej - lider Opole JUG - pewnie nie przypuszcza jak wiele pracy na niego czeka ;-) Podczas rozmowy z MaGiem* udało nam się namierzyć połączenia do Opola z Warszawy, które pozwalają na 6-godzinny pobyt w Opolu - wyjazd o 06:45-11:11 (InterCity), a powrót 18:26-22:45 (ponownie IC). Zatem Opole w zasięgu.

Działają już domeny jugowe na jug.pl, więc wystarczy tylko pomyśleć o JUGu w swoim mieście i wejść do Warszawa JUG, albo Lublin JUG, albo Łódź JUG, albo...i tak dalej. A skoro o nich i o nowych JUGach, muszę jeszcze wspomnieć o kolejnej grupie na polskiej scenie javowej - Tarnow JUG. Ta grupa również w zasięgu kolei i bezpośrednie połącznie EX - 6:05 (10:16 w Tarnowie), bądź EC - 9:05 (13:09), a powrót EC - 16:47 (20:49 w Warszawie), czy EX - 18:32 (22:50), więc można obrócić w jeden dzień ;-) Dziękujemy naszemu MaGowi od jug.pl za założenie domeny tarnow.jug.pl!

[*] Dla niewtajemniczonych: MaG to Marek G., czyli głównodowodzący jug.pl (nie zdradzę nazwiska, bo mu się jeszcze w głowie poprzewraca od sławy ;-))

Od kilku dni dokańczam moją aplikacyjkę Szachy pisaną w Google Web Toolkit (GWT) - wspominałem o niej w GWT 1.5 i Eclipse Ganymede z Cypal Studio for GWT (RC6). Dzisiaj po obsłudze ruchów, przyszła pora na upiększenie jej w postaci dodania ikon reprezentujących bierki. Mój kompletny brak znajomości efektów graficznych pozwolił mi jedynie na odszukanie odpowiednich ikonek w Sieci i dopasowanie ich do aplikacji, tj. bierki białe mają białe ikony, podczas gdy czarne czarne i nie jest to bynajmniej realizowane przez odpowiedni styl (CSS) i potencjalnie przeźroczyste ikony, a po prostu parę ikon - czarną i białą per bierka.

Każda bierka to klasa dziedzicząca po com.google.gwt.user.client.ui.ToggleButton, gdzie w konstruktorze podaję wskazanie na odpowiadającą ikonkę. Nie spodziewałem się, że to wymaganie zostanie tak szybko zrealizowane w GWT (!) Zajęło mi to bodajże minuty (i wierzę, że tyle zajmie przedstawienie tego cudeńka). Efektem jest przesłanie pojedyńczego zbiorczego obrazka, które jest sklejeniem owych ikonek reprezentujących bierki. Wszystko z pomocą GWTowego ImageBundle.

Rozpoczynamy od stworzenia klasy, w zasadzie interfejsu rozszerzającego com.google.gwt.user.client.ui.ImageBundle.

 package pl.jaceklaskowski.gwt.szachy.client;

 import com.google.gwt.user.client.ui.AbstractImagePrototype;
 import com.google.gwt.user.client.ui.ImageBundle;

 public interface SzachyImages extends ImageBundle {

     AbstractImagePrototype hydra_bialy();

     AbstractImagePrototype hydra_czarny();

 }

Dla każdego pliku graficznego o nazwie pewna_nazwa.[png|gif|jpg] tworzymy odpowiadającą jej metodę o sygnaturze:

 AbstractImagePrototype pewna_nazwa();

Wczytanie pliku następuje bezpośrednio z pliku o nazwie jak nazwa metody z rozszerzeniem png, gif, jpg (w tej kolejności). Możliwe jest skorzystanie z adnotacji @Resource, która wskaże na właściwą nazwę pliku, jeśli nie odpowiada ona nazwie metody.

Ikonki należy umieścić w katalogu, gdzie znajduje się nasza klasa rozszerzająca ImageBundle, tj. dla mojego pl.jaceklaskowski.gwt.szachy.client.SzachyImages, będzie to katalog pl/jaceklaskowski/gwt/szachy/client. Możliwe jest również załadowanie ikonek z pliku jar po wskazaniu przez wspomnianą adnotację @Resource.w

W klasie/metodzie, gdzie chcemy skorzystać z ikonek pozostaje skonstruować egzemplarz SzachyImages z pomocą GWT.create()

 public static final SzachyImages images = (SzachyImages) GWT.create(SzachyImages.class);

i wywołanie metody createImage()

 Szachy.images.hydra_bialy().createImage()

skonstruuje egzemplarz reprezentujący naszą ikonkę.

Jako przykład można skonstruować przycisk typu com.google.gwt.user.client.ui.ToggleButton, gdzie w jednym z konstruktorów podajemy właśnie ikonkę. ToggleButton to bardzo ciekawa kontrolka, która umożliwia wyrysowanie przycisku, z którym właściwy styl CSS pozwoli na symulowanie przycisku w stanie przyciśnięty, normalny i po najechaniu myszką. Wystarczy skojarzyć odpowiednią klasę stylu CSS z przyciskiem za pomocą metody setStylePrimaryName("szachy-BierkaButton") i z poniższym stylem:

 .szachy-BierkaButton
 {
     background-color            :    #ffa;
     color                       :    #555;
     border                      :    2px solid #666;

     cursor                      :    hand;
     cursor                      :    pointer;
     font-size                   :    75%;

     width                       :    51px;
     text-align                  :    center;
 }
 .szachy-BierkaButton-up-hovering
 {
     color                       :    #009;
     background-color            :    #ffd;
     border-top                  :    2px solid #fff;
     border-left                 :    2px solid #fff;
     border-right                :    2px solid #888;
     border-bottom               :    2px solid #888;
 }
 .szachy-BierkaButton-down, .szachy-BierkaButton-down-hovering
 {
     background-color            :    #ff0;
     border-top                  :    2px solid #333;
     border-left                 :    2px solid #333;
     border-right                :    2px solid #ccc;
     border-bottom               :    2px solid #ccc;
 }

efekt wciśnięcia i wyłączenia mam zrealizowany "za darmo". Sam styl znalazłem na stronie poświęconej przykładom GWT - Roughian Examples. Podobnie jak ikony zgarnięte z Sieci. Chętnie skorzystałbym z pomocy osób ze smakiem graficznym i posługującymi się stylami CSS, które mogłyby uatrakcyjnić moją gierkę. W zamian mogę zaoferować publiczne podziękowania, a w przypadku firm umieszczenie logo firmy w Notatniku. Chętni?

Aplikacja nie jest tak wspaniała jak Sudoku Tomka z Apus Interactive i pomijając przepiękną szatę graficzną brakuje w mojej co najmniej funkcjonalności Przeciągnij-i-Upuść. Może w następnej wersji?!

Gotowa aplikacja (z wieloma TODO) jako projekt eclipsowy jest do pobrania jako gwt-szachy.zip. Jest w niej tyle miejsc oznaczonych jako TODO, że zapewne tylko wytrwali zdołają przebrnąć przez nie i dostrzec coś użytecznego. Komentarze mile widziane.

Pytanie konkursowe: Jaka klasa GWT odpowiedzialna jest za skonstruowanie zbiorczego obrazka? Nagrodą jest możliwość pogrania w magiczne szachy mojego autorstwa ;-) Miłej zabawy!