Reading Time: 9 minutes

There are some cool new features in Mule 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 API management and iPaaS
Read reports

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 data 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.