Wednesday, January 2, 2013

Fun Week 2012 - Carte Mobile (Part 2)



This is the second part of my Funweek 2012 project.  My original goal during the week was to create a mobile application for Carte but I could not muster up the desire to do this with the current state of Carte servlets/XML output.  I basically did not care much for writing XML parsing code in JavaScript during Funweek when I know how great life can be if we had JSON.  So..  part one of my Funweek, which is already documented (LINK), was to add Jerser/REST (JAX-RS) to Carte.


Since I used, and enjoyed, Sencha Touch 2 for Pentaho Mobile and I only had 2 days left to write Carte Mobile I had to go with something I already knew.  I also had the confidence that I could use Sencha Touch to get the job done in the limited time without any major hurdles or snags.  I created a Sencha Touch application, eg:

Ext.application({
name: 'CarteMobile',

models: [
'Job', 'Transformation'
],

stores: [
'Jobs', 'Transformations'
],
launch: function() {
..
}
});

In the launch we add the code to login and then launch the primary UI of the application which is tabset showing status, jobs, transformations and config.



We use Sencha Touch's built-in List (Ext.List) widget and back it with a DataStore.  We have two different DataStores - jobs & transformations.  These stores are backed by the REST services.  Essentially, it is as simple as making an AJAX request to one of the jobs or transformation services, parsing the JSON and setting the JSON as the data for the DataStore.  For example:

Ext.Ajax.request({
url: 'http://' + localStorage.carteURL + '/api/carte/jobs/detailed',
success: function(response) {
var data = JSON.parse(response.responseText);
var store = Ext.getStore('Jobs');
store.setData(data);
}
});

The Ext.List widget supports Pull-to-Refresh if you enable it with the appropriate plugin, so I put this in as well.  Here's a code snippet showing how this was accomplished:

var list = Ext.create('Ext.List', {
plugins: [{
xclass: 'Ext.plugin.PullRefresh',
refreshFn: function(plugin) {
loadData(loadDataCallback);
}
}],
});

Once the application was written, it can be served by Carte itself.  More interesting is that if the resources (html, js, css, etc) are bundled up in a ZIP file (plus config file) they can be built using PhoneGap to provide mobile OS versions for publishing to the Apple App Store or Android Play Store.  The only thing I do in the mobile version different than the Carte served version is detect if we are running in PhoneGap to know if we have to prompt for the server name for Carte (we already know this information in the other case).  PhoneGap provides a cloud-specific build for most of the mobile platforms.  In this case, I was interested in the Android (APK) distribution.  See http://build.phonegap.com

Once I had the Android APK I uploaded it to the Android Play Store, where it can be downloaded and enjoyed today.  Here are a few screenshots from the mobile application on an Android phone.





No comments:

Post a Comment