Walk this Way: Building AJAX apps with Mule

October 13 2010

5 comments 0
motif

There are some cool new features in Mule 3 for building applications. I figured I’d take you through a tour of the GPS Walker, an small example that demonstrates how to use 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.

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.

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:

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

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.

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.

// ]]>

// ]]>


We'd love to hear your opinion on this post


5 Responses to “Walk this Way: Building AJAX apps with Mule”

  1. Will this work if Mule is embedded in a Servlet container(tomcat)? Do I need to use a ‘ajax:servlet-inbound-endpoint’ instead?

  2. Does a ‘ajax:servlet-inbound-endpoint’ (as below) even work (in Mule 3.0.0)?

    I was quickly able to get the above example () to work, but not a “ajax:servlet-outbound-endpoint” (while Mule is embedded in a Servlet container)

  3. Does a ‘ajax:servlet-outbound-endpoint’ (as below) even work (in Mule 3.0.0)?
    <ajax:servlet-outbound-endpoint channel=”/services/gpswalker”/>

    I was quickly able to get the above example (<ajax:outbound-endpoint channel=”/gpswalker”/>) to work, but not a “ajax:servlet-outbound-endpoint” (while Mule is embedded in a Servlet container)

  4. Hi Sajeev, You need to add the MuleAjaxServlet to your web.xml, there is an example here: http://www.mulesoft.org/documentation/display/MULE3USER/AJAX+Transport#AJAXTransport-EmbeddinginaServletContainer

  5. Hi!

    Could you put a download link to the complete Mule Project?

    Regards!