GWT z punktu widzenia front-endu

Opublikowany: 04.08.2011 12:49:43 | Komentarzy 4

Jak trafiłem do tego projektu?

To było proste. GWT kompiluje cały kod aplikacji do JS, a że znam JS to idealnie się nadaję do tego projektu :).

Czym jest GWT?

Google Web Toolkit (GWT) to framework do tworzenia dużych, webowych aplikacji biznesowych. Zaletą tego narzędzia jest to, że "nie trzeba być ekspertem od przeglądarek, XMLHttpRequest i JS". Cały ten framework jest stworzony jako swego rodzaju pomoc dla programistów JAVA, którzy nie muszą się bawić w webmastera. GWT oferuję dużą liczbę widgetów gotowych do użycia (wystarczy przypisać dane i akcje) np. rozwijane menu, dynamiczne tabele czy AJAX. Z punktu widzenia JAVY - cud, miód i orzeszki. Do czasu :).

Na GWT jest oparta najnowsza wersja AdWords.

Widgety

Jeśli chodzi o widgety, to jest ich dużo i zostały stworzone tylko te najczęściej wykorzystywane na stronach. Oprócz wspomnianianych wcześniej są też:

• menu z zakładkami,
• datepicker,
• suggest box (podpowiadanie),
• drzewka,
• i inne.

Całą dostępną galerię widgetów znajdzie tutaj.

Zaletą tych komponentów jest to, że działają poprawnie pod wszystkimi przeglądarkami. Prawie :).

Można oczywiście korzystać np. z jQuery, ale to będzie przerost formy nad treścią.

Pozorna kompatybilność ze wszystkimi przeglądarkami

Największą wadą GWT jest to, że jeżeli chcemy opakować naszą aplikację w inny design, niż ten dostarczony przez GWT, to zaczyna się ostra jazda bez trzymanki. I nie piszę tego złośliwie. Taka jest prawda. Wszystkie te komponenty są tworzone na tabelkach, które są opakowane w kontenery z pozycjami absolutnymi i relatywnymi. Aby było jeszcze fajniej, to wysokości i szerokości są generowane dynamicznie, co czasem robi się mega problematyczne. I weź się człowieku ogarnij w tym :).

JavaScript

Jak wspomniałem na początku, cała nasza aplikacja jest kompilowana do jednego pliku javascript. Jeżeli nie jest to coś skomplikowanego, to pliczek waży około 12Kb. Jeżeli to bardziej skomplikowany twór to może ważyć dużo więcej, nawet pół mega!

Inny problem który napotkałem, to IE. Niektóre rzeczy po prostu nie działają tak jak trzeba pod IE. Tutaj kompilator GWT nie daje rady. Kod JS rzuca błędami.

Wspomniałem, że w GWT (czyli w języki JAVA) można pisać czysty JS? :)

Ano można. Są jednak pewne ograniczenia. Aby napisać kawałek czystego kodu to w dowolnej klasie wystarczy zdefiniować natywną metodę:

native void showLoadingBox(Boolean hide) /*-{
   // Ciało metody.
   // Ale...
   var el = $wnd.document.getElementById("element");
}-*/

Są tutaj dwie rzeczy na które trzeba zwrócić uwagę:

• Ciało funkcji JS musi być "opakowana" w bloku komentarza /**/.
• Pojawia się globalna zmienna $wnd.

$wnd i $doc

Te dwie zmienne są dość kluczowe jeśli chodzi o pisanie funkcji JS. $wnd i $doc to nic innego jak window i document. Wszystko to przez fakt, że cała aplikacja ładuje się w iframe.

DOM

Bardzo fajnie rozwiązany jest DOM. GWT posiada specjalny obiekt o nazwie DOM za pomocą którego można poruszać się po całej strukturze dokumentu.

Ma on jednak jedną wadę. Nie wiedzieć czemu, nie wszystkie "polecenia" dobrze działają pod IE. Nie udało mi się tego ogarnąć. Nie przechodzi m.in.:

• Pobieranie elementów za pomocą DOM.getElementById().
• Nadanie pobranym elementom stylów.

Podsumowanie

Jeżeli ktoś będzie w tym robił projekt, to polecam poważnie się zastanowić. Chodzi oczywiście o front. Wg mnie największą bolączką GWT są problemy gdy chcemy wycisnąć wszystkie soki z tego frameworka. Do tego dochodzi kompatybilność z IE, jakiś fajny design i mamy zabawę na długi czas. Sytuacja wygląda calkiem inaczej gdy korzystamy tylko i wyłącznie z tego co oferuje nam GWT. Wtedy jest w miarę dobrze :).

Tagi: $doc $wnd java gwt