Reading Time: 9 minutes

There are some cool new features in 3 for building AJAX applications. I figured I'd take you through a tour of the GPS Walker, an small example that demonstrates how to use AJAX to communicate from a Mule Service to the browser. This example uses other new features in Mule 3 including automatic JSON bindings, the @Schedule annotation and Flow.

gpswalker1

Server Side

Lets start with the server side of things. There is a single component called CityStroller that is responsible for generating random GPS coordinates and publishing them. It does this by using the previously published coordinates and generating a random value for distance and angle.

    private GpsCoord currentCoord = SAN_FRANCISCO;
    private AtomicBoolean firstTime = new AtomicBoolean(true);

    @Schedule(interval = 3000)
    public GpsCoord generateNextCoord()
    {
        if (firstTime.get()) {
            firstTime.set(false);
        }
        else {
            double dist = Math.random() * 0.002;
            double angle = Math.random() * Math.PI;

            float lat = currentCoord.getLatitude() + (float) (dist * Math.sin(angle));
            float lng = currentCoord.getLongitude() + (float) (dist * Math.cos(angle));

            currentCoord = new GpsCoord(lat, lng);
        }
        return currentCoord;
    }
latest report
Learn why we are the Leaders in management and

This service method has a @Schedule annotation that will cause the method to be invoked every 3 seconds; a cron expression could also be used.
The CityStroller component produces GPSCoord objects. GPSCoord is a JavaBean that will get automatically serialized to JSON so that it can be easily consumed by JavaScript in the browser.

public class GpsCoord
{
    @JsonProperty
    private float latitude;
    @JsonProperty
    private float longitude;

    public GpsCoord(float lat, float lng)  {
        latitude = lat;
        longitude = lng;
    }

    public float getLatitude() {
        return latitude;
    }

    public float getLongitude()  {
        return longitude;
    }

    public void setLatitude(float latitude) {
        this.latitude = latitude;
    }

    public void setLongitude(float longitude) {
        this.longitude = longitude;
    }
}

Note the @JsonProperty annotations, these tell Mule that this object should be serialized to a JSON string. Mule uses the Jackson Framework for working with JSON.

The final piece of the server side is the Mule configuration itself.

 

There are lots of new things here in Mule 3.

  • Line 4: There is a new ‘ajax' namespace. This allows Mule to bind services and flows to ajax channels on the browser.
  • Line 10: The ajax:connector creates an embedded AJAX server for this application. Note that the ‘resourceBase' attribute specifies a directory where HTML and other resources can be published. When the browser requests pages, they will be served from this location. The ${app.home} is a new placeholder available in Mule that references the route directory of your application.
  • Line 12: We are using the new Flow configuration. Flow is less verbose than Service for many scenarios. Note that there is no inbound endpoint for the flow since the @Scheduler annotation triggers it. You could still use a quartz endpoint here if you prefer.
  • Line 14: We declare our CityStroller component, it is declared a singleton since we maintain state between requests (the current coordinates).
  • Line 16: Finally, we define an outbound ajax channel called ‘/gpswalker'. The GPSCoord produced by CityStroller will be sent over this channel to any listeners that have subscribed. Remember, Mule will automatically serialise the GPSCoord to JSON.

Client Side

In the browser we use the new Mule JavaScript client to receive coordinates from the server. To use the Mule JavaScript client you need a single script import:

    Mule GPS Walker Example
    

When this script gets loaded, the Mule client is automatically loaded and available via the ‘mule' variable.

<script type="text/javascript">// <![CDATA[
function init() {
        setupMap();
        mule.subscribe("/gpswalker", callback);
    }

Now we can create subscriptions to Mule services that publish to AJAX channels. Here we subscribe to /gpswalker which is the same channel as our CityStroller service publishes to. That is all that is required to get your ESB and the browser talking to each other!
The subscribe method requires a callback method to be passed in. This will get invoked every time a message is received on the /gpswalker channel.

?View Code JAVASCRIPT
function callback(message) {
        if (message) {
            var latLng = new GLatLng(message.data.latitude, message.data.longitude);
            map.addOverlay(new GPolyline([marker.getPoint(),latLng]));
            marker.setPoint(latLng);
            map.setCenter(latLng);
        }
    }

The message is received in JSON format, which means the data is easily accessible on in JavaScript. We create a new GLatLng object from the latitude and longitude sent from the server and add an overlay to the google Map. I will not cover the Google Map code here, but you get the picture. You can see the full source for the index.html here.
gpswalker2

To Sum Up

We cover a number of new features here. We create a service that is triggered using a scheduler, the service publishes data to a client application and we use JSON data bindings to automatically manage data transfer between Java and JavaScript. AJAX is used to communicate between the server and client and the client plots data from the server onto a Google map. All with very little coding.

Mule makes it very easy to create Service-oriented AJAX applications. This is a very compelling model for web applications since it promotes service-oriented architecture on the server and inherently requires a clean separation of data and presentation. There are many benefits to this approach to application development. I am already seeing many applications being built this way I'd love to hear about what you are doing.