Many times I’ve been asked to provide a set of Web Services interfaces where both JSON and XML clients can communicate with the server. Primarily it’s done for a set of reasons:

1. XML is very convenient to use for inter-service communication.
2. JSON is great for AJAX (web) clients. It’s perfect for GWT too.

In the recent project we’ve been using XStream for all serialization aspects and, since it can serialize both to XML and JSON, it was plugged into Jersey as a provider too. Following you can see XML and JSON providers implemented using XStream library.

XML Provider (annotated to be a default provider, it’ll be used if no Content-Type or Accept headers provided):

package com.igorshare.myserver.ws;

import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.OutputStreamWriter;
import java.lang.annotation.Annotation;
import java.lang.reflect.Type;
import java.util.HashSet;
import java.util.Set;
import javax.ws.rs.Consumes;
import javax.ws.rs.Produces;
import javax.ws.rs.WebApplicationException;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.MultivaluedMap;
import javax.ws.rs.ext.Provider;
import com.sun.jersey.core.provider.AbstractMessageReaderWriterProvider;
import com.thoughtworks.xstream.XStream;
import com.thoughtworks.xstream.io.xml.CompactWriter;

@Produces({ MediaType.APPLICATION_XML, MediaType.TEXT_XML, MediaType.WILDCARD})
@Consumes({ MediaType.APPLICATION_XML, MediaType.TEXT_XML, MediaType.WILDCARD})
@Provider
public class XStreamXmlProvider extends AbstractMessageReaderWriterProvider<Object> {
    private static final Set<Class<?>> processed = new HashSet<Class<?>>();
    private static final XStream xstream = new XStream();
    private static final String DEFAULT_ENCODING = "utf-8";

    // Static initializer
    {
        xstream.setMode(XStream.NO_REFERENCES);
        xstream.autodetectAnnotations(true);
    }

    @Override
    public boolean isReadable(Class<?> type, Type genericType, Annotation[] annotations, MediaType arg3) {
        return true;
    }

    @Override
    public boolean isWriteable(Class<?> type, Type genericType, Annotation[] annotations, MediaType arg3) {
	return true;
    }

    protected static String getCharsetAsString(MediaType m) {
        if (m == null) {
            return DEFAULT_ENCODING;
        }
        String result = m.getParameters().get("charset");
        return (result == null) ? DEFAULT_ENCODING : result;
    }

    protected XStream getXStream(Class<?> type) {
        synchronized (processed) {
            if (!processed.contains(type)) {
                xstream.processAnnotations(type);
                processed.add(type);
            }
        }
        return xstream;
    } 

    public Object readFrom(Class<Object> aClass, Type genericType, Annotation[] annotations,
            MediaType mediaType, MultivaluedMap<String, String> map, InputStream stream)
            throws IOException, WebApplicationException  {
        String encoding = getCharsetAsString(mediaType);
        XStream xStream = getXStream(aClass);
        return xStream.fromXML(new InputStreamReader(stream, encoding));
    }

    public void writeTo(Object o, Class<?> aClass, Type type, Annotation[] annotations,
            MediaType mediaType, MultivaluedMap<String, Object> map, OutputStream stream)
            throws IOException, WebApplicationException {
        String encoding = getCharsetAsString(mediaType);
        XStream xStream = getXStream(o.getClass());
        xStream.marshal(o, new CompactWriter(new OutputStreamWriter(stream, encoding)));
    }
}

JSON Provider (Note: it uses different formats for in-stream and out-stream to simplify the AJAX eval() structure):

package package com.igorshare.myserver.ws;

import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.OutputStreamWriter;
import java.io.Writer;
import java.lang.annotation.Annotation;
import java.lang.reflect.Type;
import java.util.HashSet;
import java.util.Set;
import javax.ws.rs.Consumes;
import javax.ws.rs.Produces;
import javax.ws.rs.WebApplicationException;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.MultivaluedMap;
import javax.ws.rs.ext.Provider;
import com.sun.jersey.core.provider.AbstractMessageReaderWriterProvider;
import com.thoughtworks.xstream.XStream;
import com.thoughtworks.xstream.io.HierarchicalStreamWriter;
import com.thoughtworks.xstream.io.json.JettisonMappedXmlDriver;
import com.thoughtworks.xstream.io.json.JsonHierarchicalStreamDriver;
import com.thoughtworks.xstream.io.json.JsonWriter;

@Produces({MediaType.APPLICATION_JSON })
@Consumes({MediaType.APPLICATION_JSON })
@Provider
public class XStreamJsonProvider extends AbstractMessageReaderWriterProvider<Object>
{
    private static final Set<Class<?>> processed = new HashSet<Class<?>>();
    private static final XStream xstreamIn = new XStream(new JettisonMappedXmlDriver());
    private static final XStream xstreamOut = new XStream(new JsonHierarchicalStreamDriver() {
	    public HierarchicalStreamWriter createWriter(Writer writer) {
	        return new JsonWriter(writer, new char[0], "", JsonWriter.DROP_ROOT_MODE);
	    }
	});
    private static final String DEFAULT_ENCODING = "utf-8";

    // Static Initializer
    {
        xstreamIn.setMode(XStream.NO_REFERENCES);
        xstreamOut.setMode(XStream.NO_REFERENCES);
        xstreamOut.autodetectAnnotations(true);
    }

    @Override
    public boolean isReadable(Class<?> type, Type genericType, Annotation[] annotations, MediaType arg3) {
    	return true;
    }

    @Override
    public boolean isWriteable(Class<?> type, Type genericType, Annotation[] annotations, MediaType arg3) {
	return true;
    }

    protected static String getCharsetAsString(MediaType m) {
        if (m == null) {
            return DEFAULT_ENCODING;
        }
        String result = m.getParameters().get("charset");
        return (result == null) ? DEFAULT_ENCODING : result;
    }

    protected XStream getXStreamIn(Class<?> type) {
        synchronized (processed) {
            if (!processed.contains(type)) {
                xstreamIn.processAnnotations(type);
                processed.add(type);
            }
        }
        return xstreamIn;
    }

    public Object readFrom(Class<Object> aClass, Type genericType, Annotation[] annotations,
            MediaType mediaType, MultivaluedMap<String, String> map, InputStream stream)
            throws IOException, WebApplicationException {
        String encoding = getCharsetAsString(mediaType);
        XStream xStream = getXStreamIn(aClass);
        return xStream.fromXML(new InputStreamReader(stream, encoding));
    }	

    public void writeTo(Object o, Class<?> aClass, Type type, Annotation[] annotations,
            MediaType mediaType, MultivaluedMap<String, Object> map, OutputStream stream)
            throws IOException, WebApplicationException {
        String encoding = getCharsetAsString(mediaType);
        xstreamOut.toXML(o, new OutputStreamWriter(stream, encoding));
    }
}

Note: XStream is rapidly falling out of my favor and  many people I’ve recently talked too because of it’s quirks and a limited control over the serialized structure. Recently I’ve started using JAXB as a primary serialization mechanism. Stay tuned – I’ll post the JAXB examples too.

Reference: I’ve found another reference that covers the same topic – XML Provider on XStream and JSON provider on Json-lib.

Let’s see how we can improve our UI by adding some watermarked “spice”:

Let’s define the primary style for the text box (textInput) and the dependent style for the watermark (textInput-watermark):

.textInput {
	border: 1px solid #C9C7BA;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding-left: 2px;
	padding-top: 2px;
}

.textInput-watermark {
   /* background-image: url('images/overlay.gif');
   background-repeat: no-repeat;
   padding-left: 20px;
   vertical-align: middle; */
   font-style: italic;
   color: DarkGray;
}

Note that the watermark style can contain images as well (see the commented out piece).

After the styles were defined we need to add some code that will apply it to the text box. To do this I’m going to extend the default GWT TextBox. The trick is to hijack the OnBlur and OnFocus events. When the OnBlur is occurring, we’re going to show the watermark and OnFocus – hide it:

public class WatermarkedTextBox extends TextBox implements BlurHandler, FocusHandler
{
	String watermark;
	HandlerRegistration blurHandler;
	HandlerRegistration focusHandler;

	public WatermarkedTextBox( )
	{
		super();
		this.setStylePrimaryName("textInput");
	}

	public WatermarkedTextBox(String defaultValue)
	{
		this();
		setText(defaultValue);
	}

	public WatermarkedTextBox(String defaultValue, String watermark)
	{
		this(defaultValue);
		setWatermark(watermark);
	}

	/**
	 * Adds a watermark if the parameter is not NULL or EMPTY
	 *
	 * @param watermark
	 */
	public void setWatermark(final String watermark)
	{
		this.watermark = watermark;

		if ((watermark != null) && (watermark != ""))
		{
			blurHandler = addBlurHandler(this);
			focusHandler = addFocusHandler(this);
			EnableWatermark();
		}
		else
		{
			// Remove handlers
			blurHandler.removeHandler();
			focusHandler.removeHandler();
		}
	}

	@Override
	public void onBlur(BlurEvent event)
	{
		EnableWatermark();
	}

	void EnableWatermark()
	{
		String text = getText();
		if ((text.length() == 0) || (text.equalsIgnoreCase(watermark)))
		{
			// Show watermark
			setText(watermark);
			addStyleDependentName("watermark");
		}
	}

	@Override
	public void onFocus(FocusEvent event)
	{
		removeStyleDependentName("watermark");

		if (getText().equalsIgnoreCase(watermark))
		{
			// Hide watermark
			setText("");
		}
	}
}

Gotta love this …

Stay tuned …

Stay tuned …

After months of working (mainly fighting with quirks of Java) with GWT I’ve accumulated so much knowledge on the topic so, I feel, it starts spilling over. I’m planning to convert this spill into a series of articles on how to build fat REST-full GWT web fat clients both on Java and .NET.

Here is the list of topics I’ll cover:

1. Building GWT fat client
2. Java REST-full Web services
3. .NET REST-full Web services
4. Internationalization and localization
5. IOC/DI
6. Unit testing and integration testing of all the components of the system
7. Build automation
8. and much, much more …

Here is a draft list of technologies I’ll be using:

1. GWT
2. Eclipse
3. Spring
4. Jersey
5. Tomcat
6. XStream
7. AJAX
8. JSON/XML
9. WCF
10. JUnit/TestND/NUnit
11. Selenium
12. Ant
13. TeamCity
14. and much, much more …

For starters, let’s see how to create a simple GWT fat client that talks to the REST-full Web services. As an example,

let’s think about contact management scenario where we’re going to create a web client that will be used to browse all your existing contacts.

We’re going to use:

1. GWT 1.6 + GWT RPC
2. Eclipse Ganymede + GWT Eclipse plugin

After creating a basic GWT project (in Eclipse you can use “Create GWT Project” icon on the toolbar), create a simple client (see the attached source code).

The client I’ll be using in my examples is very simple, but there are a couple of key points you should note. To make the GWT client to connect to the back end via GWT RPC you need to create 3 different classes:

1. ContactManagerService – Client side RPC stub
2. ContactManagerServiceAsync – The asyncronous counterpart of GreetingService
3. ContactManagerServiceImpl – The server side implementation of the RPC service

package com.igorshare.client;
@RemoteServiceRelativePath("contacts")
public interface ContactManagerService extends RemoteService {
	List<ContactInfo> getContacts(String filter);
}

package com.igorshare.client;
public interface ContactManagerServiceAsync {
	void getContacts(String filter, AsyncCallback<List<ContactInfo>> callback);
}

package com.igorshare.server;
public class ContactManagerServiceImpl extends RemoteServiceServlet implements
		ContactManagerService {
	public List<ContactInfo> getContacts(String filter) { ... }
}

Note that only serializable types can go over the wire. To make your own structure serializable, inherit it from IsSerializable interface. This will notify GWT generator to create a JSNI representation for this structure and an appropriate proxy.

This is how the ContactInfo class looks like:

package com.igorshare.client;
public class ContactInfo implements IsSerializable {

	public String FirstName;
	public String LastName;
	public String Company;

	...
}

This is as much ceremony as need to make sure that there is a REST-full communication between the server side and the client side.

To make a call to our new server, on the client side, a reference to the server proxy is needed as well as definition an asynchronous callback which  will handle a success and a failure of the execution. In our example the failure is not really handled – only an error message logged. On success – the contact table is cleaned and populated with the new data that came from the server.

private final ContactManagerServiceAsync greetingService = GWT
		.create(ContactManagerService.class);

...

// Add a handler to send the search criteria to the server
sendButton.addClickHandler(new ClickHandler() {
	/**
	 * Fired when the user clicks on the sendButton.
	 */
	public void onClick(ClickEvent event) {
		sendNameToServer();
	}

	/**
	 * Send the name from the nameField to the server and wait for a
	 * response.
	 */
	private void sendNameToServer() {
		greetingService.getContacts(filterField.getText(),
				new AsyncCallback<List<ContactInfo>>() {
					public void onFailure(Throwable caught) {
						// Show the RPC error message to the user
						GWT.log("Remote Procedure Call - Failure", caught);
					}

					public void onSuccess(List<ContactInfo> result) {
						contacts = result;
						updateContactTable();
					}

					private void updateContactTable()
					{
						// Clean contacts table
						for(int i=contactsTable.getRowCount()-1; i>0; i--)
							contactsTable.removeRow(i);

						// Fill the table with the data from the server
						for(ContactInfo contact : contacts)
						{
							int row = contactsTable.getRowCount();
							contactsTable.setText(row, 0, contact.FirstName);
							contactsTable.setText(row, 1, contact.LastName);
							contactsTable.setText(row, 2, contact.Company);
						}
					}
				});
	}
});

One more thing you should remember is that the relative path to the service (See the  @RemoteServiceRelativePath("contacts")  annotation on the ContactManagerService) should correspond to the path in the web.xml file:

<servlet>
	<servlet-name>contactsServlet</servlet-name>
	<servlet-class>com.igorshare.server.ContactManagerServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>contactsServlet</servlet-name>
	<url-pattern>/contactmanager/contacts</url-pattern>
</servlet-mapping>

On the next post I’ll show how to make this GWT client to talk to a JAX-RS REST-full web service. I’ll use Jersey to enable our back-end service.  Stay tuned …

The documentation was a little sparse so, if you’d like to subscribe to the click events on the tree nodes you need to add a selection handler.

This is how you add a selection handler to the whole tree:

Tree optionsTree = new Tree();
optionsTree.addSelectionHandler(new SelectionHandler()
{
    @Override
    public void onSelection(SelectionEvent event)
    {
        Window.alert(event.getSelectedItem().getText());
    }
});

If you’re looking for some guidance about deploying GWT applications on Tomcat, I found these articles helpful:

1. Deploy Google Web Toolkit(GWT) Applications using Tomcat
2. gwt-examples – tomcat6 Documentation