Intro

 

The Form Demo shows how you can use XSTM to manage data entered through a form. It is implemented on GWT but it could be done in Java or .NET in the same way.

 

The data entered in the form is automatically replicated on the server. If you launch two browsers and modify the same field concurrently, the conflict is detected and the last modification is cancelled. The undo button aborts the current transaction, which cancels the modifications that where done to the form.

 

 

Here are the steps followed to implement this demo:

 

1. Define the object model

 

XSTM needs to generate the objects it will replicate between the clients and the server. The usual way to do this is to define them in an XML file:

 

 

This generates a Java class named Form with two getter/setters of type String. It also generates a FormObjectModel class which represents the object model itself. See XSTM overview for more info: http://xstm.pbwiki.com.

 

The GWT version of XSTM has to generate two sets of files, one client side which uses the GWT version of XSTM and one server side based on the Java version. Generated code is similar for each side, and public fields and methods are the same.

 

2. Write the server code

 

The first thing to do in your XSTM program is to register the object model you just generated. This is done on the local site as shown in the code below. It must be done on all machines involved in the replication as it is needed by XSTM to recognize the objects it receives from other machines.

 

In XSTM, objects modifications are replicated if the objects are part of a share. Here we will create the share server side as only one is needed for all clients. Then we add to it an instance of the Form object we generated before. As soon as the form Form instance is in the share it is replicated to the connected browsers. TransportServiceImpl is the GWT RPC service used by XSTM to communicate with clients.

 

 

 

The line

 

getServer().getServerAndClients().getOpenShares().add(share);

 

specify which machines will be involved in the share. Here we retrieve an instance of the  Group class which represents "the server and its clients". Group is an XSTM class which represents a group of machines. We add the share to its set of open shares which means that this share will be opened on the server and all clients. We could have added the share to the set of open shares of some specific clients to share objects only with them. Here all machines will see the shared form.

 

3. Write the client code

 

Like on the server, we first register our object model on the local site. Then we connect to the server using the GWTClient transport. When the onResult callback is invoked, we are connected. Client side, it is possible to access the Group which represents "the server and all its clients" and retrieve the share that the server has added.

 

 

 

This share allows us to retrieve the form which has been created server side. Then the UI must show the form's fields and allow their edition. In this demo we create a TextBox for each field. When a TextBox is edited, a transaction is started which will represent the update. We store this transaction in an "activeTransaction" field so we can commit or abort it using UI buttons in another part of the code.

 

 

If this transaction is committed the update will be propagated to the server and other clients. All classes which are generated by XSTM have listeners to get notified when they change. Here we add a listener which will update the UI when a given field changes on our shared form:

 

 

 

 

If it is aborted the fields on the shared Form instance will return to their previous state. It is then possible to update the UI from the form fields to erase the changes:

 

 

Here it is, we have a simple form editor which automatically synchronizes with the server!

 

Links 

 

Compiled Demo: http://jstm4gwt.googlecode.com/files/FormDemo.zip

 

Client side source: http://jstm4gwt.googlecode.com/svn/trunk/jstm4gwt.examples.form/src/client/MyApplication.java

 

Eclipse projects of demos: http://jstm4gwt.googlecode.com/files/jstm4gwt-examples-eclipse-projects-0.3.zip