Caplin Reaver – Hackday Project

Caplin Reaver (name pending review) was a small project created by Neal Dangerfield and myself to explore how to make the XMC (Xaqua Management Console) into a more compelling feature for Caplin Xaqua.
The XMC is a great tool. It allows developers and administrators to get an in-depth view of the state of the Xaqua Components without needing to crawl through log files. However its somewhat annexed nature means that it can be annoying to use as it requires client side installation and server side configuration which can take some time to set-up if you are using a co-workers environment.

So we decided that it was about time that we created a web-based interface to the XMC information. As this was a “mobile” hackday we decided to use the principles of Mobile First when designing the interface, making sure that developers could easily administer the Caplin Xaqua server components from their phones. Problem arises when out to lunch or on the train? No problem, the Caplin Reaver will be responsive and simple to use on the modern smartphone of your choice.

Reaver is based on two main components: the backend which servers JSON and the front end which binds the JSON to a view. The front end itself has almost no business logic, simply serving up what is fed by the backend API feeds to it. This not only makes the interface incredibly simple to develop and maintain, but also allows new interfaces for the XMC functionality  to be easily developed. If a developer wants to create a really simple interface for one particular aspect of Xaqua functionality, the API is fully open to allow them to do so.

Our interface is based on Jquery Mobile. While JM is a little slow,  the speed of development and ease of use make it a perfect tool for developing this application. To take a JSON object from the API and bind it to a list object is trivial 7 line piece of code.

Here you can see the code to bind all the Liberator Objects to a List:

var datasourceName = sessionStorage.getItem('datasource');
$.getJSON('[REDACTED]', {cmd : "objects", name : datasourceName}, function (data) {
$.each(data.objects, function(key, val) {
$("#objects").append("<li><a href='object.html' onClick='sessionStorage.setItem(\"object\",\"" +
 val["Object Name"] + "\");'>" + val["Object Name"] + "");
});
$('ul').listview('refresh');
});

This simply takes the objects returned from the JSON, iterates through them adding them to a list and at the end calls the “listview.(‘refresh’);” which will apply all the required stylings and events to the list elements. Notice the onClick method to use sessionStorage.I couldn’t find any JM documentation about what is the preferred way to exchange state between pages and  I found this to be the best method.

While there is still a significant amount of work to do (especially around the areas of security), I think this product should soon be ready for deployment with Caplin Xaqua!