Zaproszenia do Google Wave

Pozostało mi 5 zaproszeń do Google Wave, więc jeśli ktoś chciałby takie zaproszenie to proszę w komentarzu podać swój adres e-mail. Liczy się kolejność zgłoszeń.

Zagadka

Może ktoś jest w stanie odpowiedzieć co jest przedstawione na tym zdjęciu?
Podpowiem, że gdzieś na blogu można znaleźć podpowiedź.

Wykorzystanie Google Maps w aplikacji GWT - Eclipse

Tym razem za tematem postu, jest wykorzystanie Google Maps & GWT w aplikacji utworzonej w Eclipse. Piszę, ponieważ zawsze znajdą się osoby bardziej ceniące "zaćmienie" :-). Zaczynamy.!

Pierwsze co należało by zrobić to konfiguracja Eclipse do pracy z GWT. Nie będę jednak omawiał tego zagadnienia, gdyż można znaleźć w polskiej blogosferze (i nie tylko) posty jak należy to przeprowadzić. Zobacz notatki: Jacka Laskowskiego albo poczytaj Simplify Ajax development using Cypal Studio for GWT

Następnie ściągamy plik GMapaEclipse.war
Kolejnym krokiem jest import ściągniętego archiwum.
U mnie wygląda to tak:

Klikamy przycisk Next a później Finish.
Projekt został zaimportowany, jednak chwilka, coś jest jeszcze nie tak, to nie koniec:-).
Pozostaje nam jeszcze skonfigurowanie Build Path, klikamy więc prawym klawiszem myszy na projekcie, z menu wybieramy Build Path, a następnie Configure Build Path.
W ten sposób wyskakuje nam takie właśnie okieneczko:



I tak jak w przypadku Nebeansa naszym kolejnym krokiem jest utworzenie nowej biblioteki GWT i zaimportowanie jej, albo zaimportowanie z katalogu instalacyjnego GWT trzech znanych nam plików gwt-user.jar, gwt-servlet.jar oraz gwt-dev-windows.jar.

Zrobione.! Mamy już przykład wykorzystania Google Maps oraz GWT w naszym ulubionym środowisku, jedyne co nam pozostaję to omówienie kodu źródłowego. W kolejnym poście przyjrzymy się bliżej wykorzystaniu szkieletu MVC w aplikacji.

Wykorzystanie Google Maps w aplikacji GWT

Pierwszym krokiem jaki należy wykonać jest pobranie Netbean'sowego projektu GMapa i rozpakowanie.

Otwórzmy projekt, w tym momencie wyskakuje nam okienko o błędach ("Reference Problems"),jednak nie należy się niczym przejmować. Za chwilę temu zaradzimy. :-)

Klikamy prawym klawiszem myszy na otwartym projekcie i z menu kontekstowego wybieramy opcje Properties. Oczom naszym ukazuje się okienko:



Przechodzimy do zakładki Freamworks, w niej klikamy na znany nam przycisk Browse i wybieramy katalog instalacyjny GWT.

Kolejnym naszym krokiem będzie usunięcie zbędnej ("złamanych referencji") biblioteki GWT. Usuwamy wszystkie pozycje z listy i dodajemy bibliotekę, którą utworzyliśmy we wcześniejszym ćwiczeniu.

W bieżącej chwili projekt jest już w pełni kompilowany. Uruchommy projekt:
I to by było na tyle, zainteresowani z pewnością zajrzą do źródła. :-).
Omówienie kodu to już temat na osobny wątek.

Instalacja oraz konfiguracja Nebeans`a

Zaczynamy od ściągnięcia Netbeans IDE:
Netbeans
Wybieramy wersje "Web & Java EE" i chwile czekamy...aż się wszystko zapisze na dysku:-)
Klikamy na ściągnięty plik, w tym momencie pojawia się nam okienko wyboru serwera aplikacji, odznaczamy GlassFish V2 UR2, gdyż nie będzie on nam potrzebny do projektu. Kolejne kroki są trywialne, więc Next->Next->Next i mamy już Nebeansa na pokładzie.

Uruchamiamy,
kolejnym naszym krokiem będzie ściągnięcie pluginu umożliwiającego tworzenie aplikacji GWT w Netbean`sie. Aby to zrobić, należy wejść w do menu Tools, a następnie wybrać opcje Plugins. Powinno ukazać się następujące okienko:

Następnie przechodzimy do zakładki Available Plugins i wybieram z listy dostępnych pluginów GWT4NB. Prawda, że proste?

Kontener servletów mamy już zainstalowany, pozostaje nam skonfigurowanie Google Web Toolkit. Jeśli jeszcze nie mamy zaintalowanego GWT, kolejnym naszym krokiem będzie pobranie go ze strony Google`a

Mamy już, wszystkie nie zbędne składniki do rozpoczęcia pracy. Zalecanym krokiem w tym momencie, jest utworzenie biblioteki plików GWT. Jeszcze raz wybieramy z głównego menu Tools, a następnie Libraries. Jeśli wszystko zrobiliśmy dobrze, powinniśmy zobaczyć następujące okno:



Klikamy przycisk New Library, do okienka wpisujemy wersje GWT, która posiadamy na komputerze. W moim przypadku będzie to GWT_1.52. Klikamy Okey, następnie klikamy przycisk Add Jar/Folder i przechodzimy do katalogu w którym mamy GWT. Zaznaczamy 3 pliki gwt-user, gwt-servlet oraz gwt-dev-windows. I klikamy Add Jar/Folder. Sprawę bibliotek GWT mamy już zamkniętą.

Pora sprawdzić naszą konfigurację na jakimś przykładzie. Z menu File wybieramy New Project, następnie wybieramy kategorie Web (okienko po lewej stronie), a z okienka po prawej stronie Web Application. Klikamy przycisk Next. Możemy teraz wybrać nazwę projektu, oraz jego lokalizację, nie zmieniamy niczego tylko klikamy przycisk Next.

W następnym oknie, ukaże się nam do wyboru możliowść zmiany servera oraz zmiany ścieżki dostępu do naszej aplikacji, nie zmieniamy niczego kontynujemy.

W ostatnim naszym oknie z listy dostępnych freamworków wybieramy Google Web Toolkit. W tym momencie ukażą się nam dwa pola tekstowe. Klikamy przycisk Browse przy polu oznaczonym etykietą "GWT Instaltion Folder:" i jak nie trudno się domyślić wybieramy katalog instalacyjny GWT. W moim przypadku wygląda to tak:



W tym momencie możemy kliknąć przycisk Finish, ponieważ instalacja i konfiguracja się zakończyła. Miłej zabawy.!,

I nie zapomnij dodać do projektu utworzonej przez siebie biblioteki GWT.


Koniecznie zajrzyj do dokumnetacji Tomcata. Po prostu musisz trochę poczytać, zanim zaczniesz na poważnie używać Tomcata.

Wstęp - Projekt RZGW

Cel, zakres oraz wymagania

Celem pracy jest interaktywna prezentacja zbiorów fotograficznych na potrzeby Regionalnego Zarządu Gospodarki Wodnej (RZGW) w Krakowie. W celu prezentacji wykorzystywane są najnowsze technologie tworzenia współczesnych web aplikacji.

Technologie te powinny przyciągnąć oraz zainteresować potencjalnego użytkownika.

Zakres prac obejmuje stworzenie serwisu opartego na Google Maps i udostępniającego informację o fotograficznych zbiorach będących w posiadaniu RZGW. Prace obejmują również skatalogowanie istniejącego zbioru oraz budowa bazy danych służącej do przechowywania tegoż zbioru.

Wymagania - web aplikacja uruchamiana w dowolnej przeglądarce internetowej, która do poprawnego działania nie potrzebuje dodatkowych pluginów. Oprogramowanie, które użyte jest do zbudowania, jak również oprogramowanie potrzebne do działania web aplikacji jest darmowe. W przyszłość przewiduje się rozwój serwisu, co należy uwzględnić w fazie projektowania oraz implementacji serwisu.

Środowiska rozwoju i wdrożenia aplikacji

Jak już wspominano jednym z wymagań stawianych jest budowa web serwisu z wykorzystaniem jedynie darmowych środowisk developerskich. W praktyce oznacza to korzystanie z oprogramowania typu open source, czyli oprogramowania o otwartym kodzie źródłowym.

Platformą, na której web aplikacja jest rozwijania jest Java. Platforma ta rozwijania jest przez szereg firm, jak również przez bardzo liczną społeczność skupiona wokół ruchu open source. Dość powiedzieć, że swój wkład w rozwój Javy mają takie firmy jak: Sun, IBM, Googl’e czy Oracle.

Środowiskiem, w którym tworzona jest aplikacja jest Netbeans – jest to zintegrowane środowisko programistyczne (IDE). Które notabene rozwijane jest jako projekt open source. Serwerem na, którym działać będzie web aplikacja jest Apache Tomcat . Tomcat jest kontenerem aplikacji web`owych, który umożliwia uruchamianie aplikacji w technologiach takich jak Java Server Pages i servlets. Oczywiście Tomcat jest otwarty.

Baza danych, która przechowywać będzie fotografie, jak również wszelkie niezbędne informacje o katalogowanym zbiorze jest MySQL. MySQL jest w tej chwili najpopularniejszą otwartą bazą danych na świecie. Dzięki przejęciu w ostatnim czasie przez Sun producenta MySQL współpraca Javy z MySQL’em, mimo że już teraz jest dobra w przyszłości może być tylko lepsza.<.p>

Debugowanie wdrożeniowej aplikacji przeprowadzone jest przy pomocy Firefox’a – najpopularniejszej open sourco’ wej internetowej przeglądarki. Dodatki do Firefox’a takie jak Web developer czy Firebug, czynią proces odnajdowania błędów znacznie łatwiejszym, co jest niezmiernie ważnym czynnikiem w pracy developera.

W aplikacji wykorzystywane jest Google Map API, interfejs ten umożliwia dodawanie mapy do własnej strony internetowej. Umożliwi to potencjalnemu użytkownikowi aplikacji lokalizację na mapie fotografii, wraz z informacją o przeglądanym zbiorze.

Prezentacja projektu (czerwiec 2008)

JavaScript Native Interface

JavaScript Native Interface to jeden z ważniejszych elementów wchodzących w skład GWT. JSNI pozwala na wykonanie kodu JavaScript z poziomu języka Java. W tym miejscu musimy przypomnieć, że wynikiem kompilacji w przypadku GWT jest zawsze JavaScript. Jest to więc bardzo potężne narzędzie, co więcej pozwala ona również na wywołanie metod Javy z poziomu kodu JavaScript. Mamy również możliwość wykorzystania obiektów Javy przez metody JavaScriptu. Wykorzystanie JSNI to daję nam ogromne możliwości, ale musimy pamiętać o kilku problemach z tym związanych. Ponieważ, kod wykorzystywany przy pisaniu jest niskopoziomowy, mogą pojawić się problemy związane z niekompatybilnością przeglądarek. Również, kod wykorzystywany przez JSNI jest trudnej optymalizowany przez kompilator GWT. Wykorzystanie JSNI można porównać do wykorzystywanie kodu assemblera w zwykłym programie.

JSNI można wykorzystać do:

• Implementacji metod Javy w JavaScripcie


• Wywołanie kodu Javy z poziomu JavaScriptu i odwrotnie


• Odczytywanie i zapisywanie pól Javy przy pomocy JavaScriptu

Metody JSNI deklarowane są jako native, deklaracja ta informuje kompilator, że ma do czynienia z metoda macierzystą. Oprócz deklaracji metody jako native, wymagany jest specjalny blok komentarza obejmujący cały kod napisany w JavaScripcie. Zaczynający się on od – „/*-{” , natomiast kończy się na „}-*/”.

Poniżej przedstawiony jest przykładowe użycie metody JSNI, do wywołania JavaScript’owej metody alert z poziomu języka Java. Musimy zapamiętać, że kiedy w metodzie JSNI żądamy dostępu do obiektu okna lub obiektu dokumentu, dostęp ten musimy poprzedzić odpowiednio $wnd i $doc.

public static native void alert(String msg) /*-{
$wnd.alert(msg);
}-*/;

Jak już wspomniano, przy pomocy JSNI można również wywoływać, kod Javy przy pomocy JavaScriptu. Aby to zrobić, należy użyć specjalnej składni.

[instance-expr.]@nazwa-klasy::nazwa-metody(parametry-sygnatury)(argumenty)
Gdzie:

• Instancje-exp -


• nazwa-klasy: to pełna nazwa klasy wraz z ścieżką dostępu do niej


• nazwa-metody: normalna nazwa


• parametry-sygnatury: parametry sygnatury Java Native Interface


• argumenty: aktualna lista parametrów przekazywana do metody

Dostęp do pól Javy przy pomocy JavaScriptu realizowany jest przy pomocy następującej składni:

[instance-expr.]@nazwa-klasy::nazwa-pola