Serwis formularze.eu tworzyłem przy pomocy Google Web Toolkit. Po jakimś czasie postanowiłem, żeby moja aplikacja była dostępna w innych językach. Framework Google’a po raz kolejny miło mnie zaskoczył, bowiem dostarczał całkiem przyjazne i proste rozwiązanie dla tej kwestii.
W tym artykule pokażę jak wykorzystać mechanizm internacjonalizacji w GWT przy pomocy Eclipse (z zainstalowanym plugin’em GWT). Zakładam u czytelnika znajomość Javy i technologii GWT. Koniecznie jest też zainstalowane GWT SDK oraz dodane go do zmiennej PATH (dla użytkowników Windows).
No to zaczynamy:
- Ważne, żeby pliki typu „*.property” były kodowane w UTF-8. Z Menu „Window” wybieramy „Preferences” -> General -> Content Types. W drzewie typów wybieramy „Java Properties File” a w „Default encoding” wpisujemy UTF-8.
- Tworzymy nowy projekt przy użyciu plugin’a GWT.
Jako nazwy pakietu użyłem „com.infosystem.internacjonalizacja”, a sam projekt nazwałem „Internacjonalizacja” w efekcie otrzymałem projekt o następującej strukturze.
- Otwieramy linię poleceń CMD Przechodzimy do katalogu, w którym jest nasz projekt.
- W linii poleceń uruchamiam narzędzie „i18nCreator”, które jest częścią GWT SDK.
Konkretnie wywołuję polecenie: i18nCreator -eclipse internacjonalizacja com.infosystem.internacjonalizacja.client.I18nMessageProvider. Jeśli utworzyłeś/łaś projekt o innej nazwie wówczas po parametrze „-eclipse” wpisz jego nazwę, ostatni parametr to nazwa interface’u, który będzie źródłem internacjonalizacji.
WSKAZÓWKA! Dla wygody można „złożyć” sobie polecenie w jakimś edytorze, bowiem o literówkę bardzo łatwo. żeby nie przepisywać nazwy pakietu można go wybra i z menu kontekstowego wybrać „Copy qualified name”
- Odświeżamy projekt (Wybieramy „Refresh” z menu kontekstowego po kliknięciu prawym przyciskiem myszy na projekcie w „Projeckt Explorerze”). Powinny pojawić się 3 nowe pliki.
- W naszym przykładzie chcemy sprawić by napis „Send” był wyświetlany w różnych językach. Otwórzmy zatem plik „I18nMessageProvider.properties” i zmieńmy treść pliku na następującą:
ClassName: I18nMessageProvider
SendButtonLabel: Send - Zapisujemy plik i kopiujemy go do tego samego katalogu, a konflikt nazw rozwiązujemy w następujący sposób „I18nMessageProvider_pl.properties”. Jak się domyślacie końcówka „_pl” wskazuje na język.
- Otwieramy plik „I18nMessageProvider_pl.properties” i zmieńmy treść pliku na następującą:
ClassName: I18nMessageProvider
SendButtonLabel: Wyślij - Zapisujemy zmiany. Teraz możemy wygenerować pliki ze stałymi. Klikamy dwa razy na I18nMessageProvider-i18n.cmd. W systemie Windows na moment może pojawić się okno konsoli.
- Odświeżamy projekt. Powinien pojawić się nowy plik
- Teraz musimy dołączyć utworzony Interface do naszego modułu. Otwieramy plik „Internacjonalizacja.java” i dokonujemy następujących zmian.
- Następnie musimy „poinformować” moduł, że ma dodatkowy pliki z polskimi stałymi. Do pliku Internacjonalizacja.gwt.xml dopisujemy
<inherits name="com.google.gwt.i18n.I18N"/>
<extend-property name="locale" values="pl" />
- Teraz uruchamiamy aplikację. Najpierw odwiedzamy adres http://localhost:8888/Internacjonalizacja.html?gwt.codesvr=192.168.0.100:9997
a potem http://localhost:8888/Internacjonalizacja.html?gwt.codesvr=192.168.0.100:9997&locale=pl. Po zmianie języka, zmiana tekstu na guziku powinna być widoczna. - Teraz, gdy jesteśmy pewni, że mechanizm internacjonalizacji działa poprawnie przystępujemy do zmiany pozostałych napisów. Wykorzystamy do tego bardzo przydatne narzędzie standardowo dostępne w Eclipse, ale zanim się za to zabierzemy, musimy odseparować tagi HTML, które są zaszyte w kodzie. Łatwo to zrobić w następujący sposób. Wystarczy umieścić kursor wewnątrz łańcucha, a następnie użyć skrótu klawiszowego Ctrl + Shift +T, z menu kontekstowego wybrać „Extract Constants”.
- Klikamy prawym klawiszem myszy na pakiecie „com.infosystem.internacjonalizacja.client” z podmenu „Source” wybieramy „Externalize Strings”.
- Wybieramy plik Internacjonalizacja.java i klikamy „Externalize”.
- Zmieniamy prefiks z „Internacjonalizacja.” na „Internacjonalizacja”.
- Następnie usuwamy zaznaczenia z łańcuchów, które nie podlegają internacjonalizacji tj. nazw stylów, identyfikatorów, itp. W efekcie nasze okno powinno wyglądać następująco:
- Klikamy „Next” tak długo aż przejdziemy do końca Wizard’a a potem wybieramy „Finish”
- W pakiecie „com.infosystem.internacjonalizacja.client pojawi się nowy plik „messages.properties”
Gdy go otworzymy powinien mieć następującą treść
Internacjonalizacja10=Remote Procedure Call
Internacjonalizacja11=Close
Internacjonalizacja14=Sending name to the server:
Internacjonalizacja15=Server replies:
Internacjonalizacja16=
Internacjonalizacja17=Remote Procedure Call – Failure
Internacjonalizacja19=Remote Procedure Call
Internacjonalizacja3=An error occurred while
Internacjonalizacja4=attempting to contact the server. Please check your network
Internacjonalizacja.5=connection and try again. Internacjonalizacja.6=GWT User - Zamieniamy znaki “=” na dwukropki (warto użyć Ctrl+F)
- Kopiujemy zawartość pliku do plików „I18nMessageProvider_pl.properties” oraz „I18nMessageProvider.properties”. W polskim pliku dokonujemy tłumaczenia.
- Plik „messages.properties” oraz „Messages.java” usuwamy. Pojawi się mnóstwo błędów, ale nie martwimy się o to, bo zaraz sprawimy, że błędy kompilacji znikną.
- Wybieramy w „Project Explorer” nasz projekt i z menu „Search” wybieramy „Search” (Ctrl +H).
- W zakładce File Search w pole „Containing Text” wpisujemy “Messages\.getString\("(\w+)"\)” i zaznaczamy “Regular Expressions”.
- Klikamy “Search”. W wynikach powinny pojawić się wszystkie pozycje, które wygenerowaliśmy narzędziem „Externalize Strings”.
- Kilkamy prawym klawiszem myszy na wynikach wyszukiwania i klikamy „Replace”.
- W polu „With” wpisujemy „Internacjonalizacja.messages.\1()”
- Klikamy „OK”.
- Teraz możemy wygenerować pliki ze stałymi. Klikamy dwa razy na I18nMessageProvider-i18n.cmd.
- Odświeżamy projekt.
- Zmieniamy deklarację stałej „messages” na następującą “public static final I18nMessageProvider messages = GWT.create(I18nMessageProvider.class);” oraz przenosimy ją przed deklarację stałej „SERVER_ERROR”
- Błędy kompilacji powinny zniknąć
- Uruchamiamy i sprawdzamy czy nam się udało
- Voila - gotowe, teraz idziemy na kawę.
Mam nadzieję, że powyższy przykład dokładnie pokazuje jak korzystać z internacjonalizacji w GWT. Jeśli coś jest niejasne proszę o kontaktm, poza tym wszelka konstruktywna krytyka mile widziana.
UWAGI!
- W sekcji head strony koniecznie musi się znaleźć wpis:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - Zamiast korzystania ze stałej messages, warto użyć wzorca Singleton
- Jeśli wyświetlany język ma być określany z poziomu serwera to w sekcji head strony musimy zamieścić wpis:
<meta name="gwt:property" content="locale=#{skrótJęzykaPobranyZSerwera}" />
Powyższy tekst jest inspirowany tym artykułem, który wzbogaciłem o moje własne doświadczenia, poprawiłem też kilka małych błędów merytorycznych.
Tutaj można ściągnąć projekt eclipse, który powstał zgodnie z opisem zawartym w tym artykule.