Internationalization in GWT UiBinder For Dummies

Internationalization in GWT UiBinder For Dummies

Supporting Multilingual in GWT is simple and very few steps to follow.

<ui:msg> tag for text to support multilingual as shown below.

<ui:msg key="street1" description="Address Street1">Street1</ui:msg>

here key attribute is optional (GWT will create random key if you didn't use key attribute), but its highly recommended to use a key.

while compiling the gwt project, pass -extra <folder_name> argument to the compiler, it will create  properties files for each uibinder files inside the directory with <folder_name>.

1. Properties file with package name can be found eg: com.gwt.sample.client.content.SkillsetDialogViewBinderImplGenMessages.properties

2. Delete package name in the file, eg: SkillsetDialogViewBinderImplGenMessages.properties

3. Place it in the proper package(in the above case, the file must be place in  com.gwt.sample.client.content package

4. Try changing the properties file name (eg: SkillsetDialogViewBinderImplGenMessages_fr.properties for french) for locales and modify the values for each key accordingly.

5. Change the language in browser or pass the language in the URL like below :

http://127.0.0.1:8888/Project.html?gwt.codesvr=127.0.0.1:9997&locale=fr

Dialog Box in GWTP for Dummies

Dialog Box in GWTP  for Dummies

One of the important thing in GWT is Dialog box, which will enable user to get alerted, prompt messages, helped to give input to application etc...

Its very simple creating a dialog box in GWTP, create a Presenter with PopupView and inject the presenter into the place (Parent Presenter) it is required based on the event in Parent presenter.

The example show a simple dialog box appear for the button click event in mail window.

<g:DialogBox width="" glassEnabled="true" animationEnabled="true"

modal="true">

<g:caption>This is Heading</g:caption>

<g:HTMLPanel width="400px" height="200px">

<g:VerticalPanel spacing="10" horizontalAlignment="ALIGN_CENTER"

width="100%" height="100%" verticalAlignment="ALIGN_MIDDLE">

<g:Button width="150px" height="30px" ui:field="close"> Close Me!!!</g:Button>

</g:VerticalPanel>

</g:HTMLPanel>

</g:DialogBox>

Dialog box in this example is Modal and with glass enable is set to true to make the user not to navigate in rest of the window other than Dialog box.

Sample