Red Hat
Jul 9, 2012
by kborchers

At this year’s JBossWorld Keynote, one of the things we wanted to show was the extension of business logic and business rules into the mobile landscape. The premise of the demo was to have a mobile shopping cart app that the sales team of our fictitious company could use to purchase electronics and swag for their customers. Rules were put into place based on the dollar amount of the order placed which would then trigger one or more approvals which would need to happen before the order was placed.

Image of the Mobile AppThe app was first built as a mobile web app hosted on OpenShift using a combination of jQuery Mobile and Backbone.js. jQuery Mobile provided the structure of the app giving it a mobile-friendly layout and set of controls. Backbone.js was used to provide a clean way to handle data modeling and synchronization, presentation of that data through jQuery Mobile enhanced views as well as the app’s URL based routing.¬†Once the app was a full-featured web app, we used Apache Cordova to wrap it up as a native app that could be installed on iOS, Android and Blackberry devices.

Whether the user was on the mobile web version or the native app, they received the same experience. The user could navigate the catalog, add and remove items from their cart and submit orders. Once an order was submitted, using a similar interface, an approver level user would see the order enter their list of orders. This user could then take control of the order and either approve or reject it. This is when our business rules come into play. After an approver approves an order, depending on its dollar amount and the current rules in place, a high-dollar order may need a vice president level approval. If this is the case, the order is then displayed on the VP’s order list and using the same process as the approver, that user can either reject or give final approval to the order. Once approved, the original order submitter’s home screen is updated to show their new approved/rejected/pending totals and with this demo, other events are triggered which update the leader board to show new totals and other useful information.

To learn about all of the other pieces that went into building this demo, check out this blog post and to view the source, grab a copy of this repo and play with it yourself! To get you started, here are a few of the main areas of the code to start exploring:

  • index.html – Very small, require.js loads the appropriate modules and gets the app going
  • main.js – This is the entry point to the application which defines the router and fires the first route
  • modules – This is where all of the magic happens. Each module represents a model and/or collection and the associated view(s)
  • libs – The external libraries used in the app including backbone.js, jQuery Mobile and others
  • requirejs – This folder includes a copy of Rhino and the r.js optimizer which takes the AMD modularized version of the app and builds and optimized production version with concatenated/minified JS and CSS files
Original Post