Sorting lists in GWT

Quick one:
Lists.sort(list, comparator) is not implemented in the GAE JVM.
But, as a replacement/alternative, Collections.sort(list, comparator) is.

How to Execute Code When the GWT Application Is Going Down

My goal was to store the UI state of my application just before it gets terminated to be able to restore it next time the way the user left it the other day.

I tried to add an addAttachHandler to the RootPanel to get informed about the root panel getting detached from the DOM so that I can finalize my application. Surprisingly, that does not work in Chrome (tested Chrome and Firefox only).

But besides that this sounds like a bug to me, I found the “proper” way of doing things before the application ends:

Window.addWindowClosingHandler(new Window.ClosingHandler() {
	@Override public void onWindowClosing(ClosingEvent event) { ... }
});

In the end, I think something like Document.addUnloadHandler would be more suggestive… closing the window or reloading a page is both exiting the application by unloading the DOM – not closing the window.

Disable an Anchor in GWT

Unexpectedly, calling setEnabled(false) does not prevent a link/anchor from being clicked. That means, the click events still get triggered.
The reason is more or less a bug in GWT as it updates the list of events that are going to be triggered only at the moment when it gets attached to the DOM (Btw, in GWT, this process is called to sink and to unsink events, where the former enables a specific event to be triggered and the latter disables it).
I found a workaround by creating my own Anchor class and forcing the underlying GWT Anchor to update the list of events to be sunk.

...
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Event;

public class Anchor extends com.google.gwt.user.client.ui.Anchor {

	@Override public void setEnabled(boolean enabled) {
		super.setEnabled(enabled);
		if (isAttached()) {
			onDetach();
			if (enabled) {
				sinkEvents(Event.ONCLICK);
			} else {
				unsinkEvents(Event.ONCLICK);
			}
			onAttach();
		}
	}

	@Override protected void onLoad() {
		super.onLoad();
		if (isEnabled()) {
			sinkEvents(Event.ONCLICK);
		} else {
			unsinkEvents(Event.ONCLICK);
		}
	}
}

Note the onLoad method, it sets up the state when the widget gets attached to the DOM the first time. It is required because setEnabled() could have been called before the anchor got attached.

If you encountered the same issue, please vote for this bug report.

Disable Context Menu in GWT

To make use of the right mouse button, it is necessary to disable the native browser context menu (the popup menu appearing on right click). This can be achieved like this:

RootLayoutPanel.get().addDomHandler(new ContextMenuHandler() {

	@Override public void onContextMenu(ContextMenuEvent event) {
		event.preventDefault();
		event.stopPropagation();
	}
}, ContextMenuEvent.getType());

Same should work for RootPanel.

After that, it is possible to make use of the right mouse button for example like this:

someWidget.addDomHandler(new MouseMoveHandler() {

	@Override public void onMouseMove(MouseMoveEvent event) {
		if (event.getNativeButton() == NativeEvent.BUTTON_RIGHT) {
		...

GWT Error Message “Asked for attribute parser of no type”

Example:

public boolean isCollapsed() {
	return panel.isVisible();
}

public void setCollapsed() {
	panel.setVisible(false);
}

Seen it? Despite the complicated and cryptic error message, the mistake is rather simple: the setter method is missing a parameter, i.e. “public void setCollapsed(boolean collapsed) {“.

Testing GWT Application in Virtual Machine

I am developing on a Mac, but to test my GWT applications for cross-browser compatibility in Internet Explorer I need to use Windows, thus I got Windows 7 installed using Parallels. Just by the way, to be able to test in different Internet Explorer version, I am using a pretty handy application called IETester.
But trying to access localhost with IE in the virtual machine did not work. I got a “404 page not found” error instead of seeing my app running on the local App Engine instance. Obviously, Parallels does not automatically forward localhost requests to OSX and maybe that is actually a good idea security-wise.
To fix the issue, you need to run Google App Engine on a public network interface, or in other words, bind the App Engine server to all available IP addresses. The down side: everybody knowing your IP address can see the GWT app now, but otherwise you are not allowed to access it in the virutal machine as from your OSX’s point of view, that Windows machine is “some other guy accessing from the outside”, too. To make GAE accessible from the outside, add the parameter “-bindAddress 0.0.0.0″ when launching you local GAE. Using Eclipse you can achieve that by right clicking your project -> Run As -> Run Configurations -> Choose “(x)= Arguments” tab; add the option to the top most box titled “Program arguments” in the options area (e.g. before “-port 8888″).

The first part of the list of arguments should look something like that:

-remoteUI "${gwt_remote_ui_server_port}:${unique_id}" -startupUrl GlocalUiPg2.html -logLevel INFO -codeServerPort 9997 -bindAddress 0.0.0.0 -port 8888 ...

Now, you can access you app using the OSX’s public IP address. (You can get to know your IP by having a look at the network preferences panel.) Launching GAE from Eclipse, you will see a different link (URL) in the “Development Mode” tab now, containing the public IP already. Using that one in, say, your Firefox on Mac, it will ask you now whether you want to allow the debugger access. That is also due to the fact, that you are now using a public address, so it is not clear to your local debug server, whether that request came from the same computer or someone else in the network.

Adding a New Service (GWT)

Adding a new servlet/service to you GWT application is quite straight forward, e.g. by copying the example “greetingService” or creating a new servlet. But it’s easy to overlook a required change/adjustment of your project’s configuration and you might end up with an error message like “Blocked attempt to access interface ‘some.package.SomeService’, which is not implemented by ‘some.other.package.SomeOtherServiceImpl’; this is either misconfiguration or a hack attempt”.

Check list (some should be replaced with whatever you want to call your new service):

• Copy or create files:
  SomeService.java and SomeServiceAsync.java in client package
  SomeServiceImpl.java in server package + change implementation statement to SomeService
• Adjust web.xml:

  <servlet>
  	<servlet-name>someServlet</servlet-name>
  	<servlet-class>some.package.SomeServiceImpl</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>someServlet</servlet-name>
  	<url-pattern>/[copy base directory name from other service declaration]/some</url-pattern>
  </servlet-mapping>

• Annotate interface SomeService.java:

  @RemoteServiceRelativePath("some")

• Connect to your new service in the client:

  private final SomeServiceAsync someService = GWT.create(SomeService.class);

Definitely some possibilities to make a mistakes or miss something here.

Using the XML Parser in GWT

I tried using the XML parsing features of the GWT like that:

form.addSubmitCompleteHandler(new SubmitCompleteHandler() {
	@Override
	public void onSubmitComplete(SubmitCompleteEvent event) {
		// One time upload only, to upload again, user needs to start the upload process from scatch – keeping it simple for now
		panel.clear();
		Window.alert(event.getResults());
		Document result = XMLParser.parse(event.getResults());
		...
});

But GWT kept telling me “No source code is available for type com.google.gwt.xml.client.Document; did you forget to inherit a required module?”. It turns out, you are required to explicitly add the XML functionalities to your project by adding following line to your ….gwt.xml file:

<inherits name='com.google.gwt.xml.XML'/>

Raises a question: What’s the point of AJAX (Asynchronous JavaScript and XML) without XML? Or in other words there is no AJAX without XML! So it’s up to you to add the AX part to GWT manually. What’s next?

GWT FileUpload: Adding Widgets to a FormPanel

If you build your first GWT form, for example something like that:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<g:FormPanel ui:field="form"> 
<g:FileUpload ui:field="uploadField" name="file"/>
<g:SubmitButton ui:field="submitButton">Upload</g:SubmitButton>
</g:FormPanel>
</g:HTMLPanel>
</ui:UiBinder>

And your console keeps telling you during runtime something like this: “java.lang.IllegalStateException: SimplePanel can only contain one child widget”. Instead of writing a long page of explanations and complaints like I did before, it’s simply like that:

“Just put all your widgets in a panel (like HorizontalPanel) and add that panel to the FormPanel.” (Jake − cf. comment below)

Thanks Jake!

GWT Does Not Load Module in Local AppEngine

The issue arose after I renamed the module file (ending with .gwt.xml) to better represent the module functionality. I also updated all relevant files in the project (search for files containing the old name to find them) accordingly.

Starting the application after that modifications ended up in an error (“[ERROR] Unable to find ‘<old module name>.gwt.xml’ on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?”) as the AppEngine tried loading the module by its old name.

Solution: Delete the launch profile for the project (by choosing “Run As…” -> “Run Configurations…” from the context menu).

Obviously the GWT does not check nor update the automatically generated launch profile thus you need to delete it to force the GWT to create a new profile from scratch taking the project changes into account. You might also adjust the profile according to the changes made, but deleting it is the safe and easy way.

First GWT Steps

Just started to work with GWT – a pretty interesting approach for web development compared to PHP or JSF. The whole Application engine is quite impressive especially allowing you to quickly test your applications locally by supporting automatic hot deployment after each code update.
One thing that took me a while was one of that “[ERROR] Unable to find ’[some-file].xml’ on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?” errors. If you are sure the file is in place, I realized restarting the App Engine or Eclipse mostly solves that problem.