Openbravo Mobile: Technical Overview and Roadmap

Have you seen the power of Openbravo Mobile already? As you may have read in a previous post, we have been looking for the best HTML5 framework for Openbravo Mobile. After several months of researching, prototyping and testing we have decided that Enyo is our best option.

What’s Enyo?

Enyo is an object-oriented JavaScript application framework emphasizing modularity and encapsulation.

Back in January, HP announced the new version of Enyo, the framework powering webOS applications, but this time, a cross-browser solution optimized for mobile devices and released under the Apache license.

Since this initial announcement we have been tracking the evolution of the framework on every release. In February I posted a very simple example on how to consume Openbravo JSON REST WebServices, using Enyo (core).

In July the first non beta version was a released, by then we knew that Enyo was a real option for us.

Our experience with Enyo

We’ve been working with Enyo for several of months now and we are really pleased and enjoying the experience.

After investing time in prototypes and getting to know Enyo, our first real work was the code refactor using Enyo abstractions (Kind, Component, Control, Event) in Openbravo Web POS.

Openbravo Web POS – Powered by Enyo

The experience and result of this process gave us enough knowledge and confidence to decide and go for it:

Enyo is the right framework for Openbravo Mobile, as it provides the building blocks for developing a modular, extensible, thin, and fast mobile applications

In Openbravo Mobile we’ll use the full suit of Enyo, core, onyx and layout. Here you have some examples of the output of this great framework.

Grid View – Purchase Order Lines

Form View – Purchase Order (Processing)

The Data Model

We’ll also use Backbone.js Models and Collections for representing the entities declared in the Application Dictionary and Enyo will provide the UI widgets for manipulating those collections and models.

In the back-end we’ll use the same modular architecture in Openbravo 3.

Openbravo Mobile Architecture

The Roadmap

The main goal of Openbravo Mobile is to deliver the framework for developing mobile applications by the end of Q4-2012, with a few milestones in between:

• Basic infrastructure (Login + Workspace): Be able to login using a mobile device, and open a window
• Standard Windows: Support for windows declared in the Application Dictionary
• Processes and Reports: Support for launching reports and processes from a mobile device
• Support for Manual Windows: Support for View Implementations (aka Manual Windows)
• Fine-tune Functional Flows: Revisit the flows and usability in a mobile device (Q1-2013)

I hope this gives you an overview on what has being going on in Openbravo Mobile, the Roadmap and milestones of this project. To know more about Enyo visit http://enyojs.com

How to build a Manual Window in Openbravo 3

Here you have the recorded session on “How to build a View Implementation” in two parts.

I. The basics

II. Adding a button and an Action Handler

Timeline

• 35m28s: I said “punto” that means “dot” in Spanish. A few seconds later I say “chuleta” that means “cheat sheet” in Spain.
• 45m55s: I started talking on “Don’t be fooled by console.log“
• 52m02s: The importance of using OB.Constants.FIELDSEPARATOR and OB.Constants.IDENTIFIER
• 57m15s: An idea on how to support a dynamic generation of a Selector in a view implementation

You can get the code of this example at: https://bitbucket.org/iperdomo/org.openbravo.training.manualwindow

Re-introduction to JavaScript and Openbravo 3 Architecture

Yesterday we had a session with the Development Team on Re-introduction to JavaScript and Openbravo 3 Architecture.

Some of the topics covered in this talk:

• What happens when I login into Openbravo
• What’s a Component Provider or a Component
• What’s a Data Source
• Which are the JavaScript classes behind a Openbravo window
• When I need to compile or just restart Tomcat server

You can watch them online at:

• http://openbravo.adobeconnect.com/p80kovni69u/
• http://openbravo.adobeconnect.com/p9qym5viat5/

Enjoy!