Log in / create account
Openbravo.com
Issues
Forge
University
View source | Discuss this page | Page history | Printable version   

Mobile Terminal

Contents

Introduction

In a Openbravo Mobile application, Terminal is the container of the whole application. It is composed of a view, which is a placeholder to render windows and by a model, which maintains the global settings for the application.

Mobile-layout.png

Model

Terminal Model is a Backbone model extending OB.Model.Terminal. Its purpose is to store the application global settings.

For convenience this object is globally exposed by OB.MobileApp.model 

 
OB.MYMOD.Terminal.Model = OB.Model.Terminal.extend({
  initialize: function () {
    this.set({
      appModuleId: '12B324560ABB478BAC79FFF6C9C75C69',
      appName: 'MYMOD_Application',
      appDisplayName: 'My Mobile App'
      ...
    });
 
    OB.Model.Terminal.prototype.initialize.call(this);
  },
 
  renderMain: function () {
    this.navigate('myMainWindow');
  }
});

The two main methods to implement are:

initialize
At this point, all global configurations should be set (a more detailed information about which are the properties that can be configured is in the next section). This method is invoked when the terminal is loaded, this is at the very beginning of the application start up process. This means that, at this point, the user has not already logged in into the application and no session info is available.
renderMain
Invoked when the user has logged in into the application and all offline models have been loaded. This method is in charge of navigating to our main window. At this point it is also possible to retrieve some session specific settings if required.

Configuration

Here is a list of the common properties that can be configured at terminal level

Terminal utilities

Properties Loader

After the login and before navigating to the main window, is quite common to load data from different sources using, usually, an asynchronous approach. Properties Loader mechanism is provided to make easier this synchronization process and to ensure that all data is loaded before navigating to the main window. 

 
OB.MobileApp.model.addPropertiesLoader(propertiesLoader);

Properties Loader object must indicate the properties which are set in the terminal (you can set more properties in other places, but terminal properties must be indicated in properties array) and must define the function to load this data (loadFunction). This function receives the terminal model (terminalModel) as parameter and will be in charge of get the data, save it into terminal and indicate that this loader has finished.

If a module is adding data to the terminal, the name of the properties which are being set must start with the module DB prefix to avoid conflicts. 

 
      OB.MobileApp.model.addPropertiesLoader({
        properties: ['location'],
        loadFunction: function (terminalModel) {
          console.log('loading... ' + this.properties);
          var me = this;
          new OB.DS.Request('org.openbravo.retail.posterminal.term.Location').exec({
            org: terminalModel.get('terminal').organization
          }, function (data) {
            // data is ready. Save it
            terminalModel.set(me.properties[0], data);
            // this loader has finished
            terminalModel.propertiesReady(me.properties);
          });
        }
      });

Those properties that are set in the terminal model are stored locally and can be used even working offline.

View

Terminal view is an enyo kind extending OB.UI.Terminal. It is used as a container to render windows into it.

It is globally exposed by OB.MobileApp.view.

It's terminal property, links to the terminal model.

In general, it is not required to implement any method in this kind.

Application

Finally, to put all together, the application entry point is a html file looking like this: 


 
<!DOCTYPE html>
<html class="enyo-document-fit">
    <head>
        <title>Openbravo Mobile Warehouse Operations</title>
        <link rel="shortcut icon" href="assets/favicon.ico">
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="shortcut icon" href="./web/images/favicon.ico" />
        <script src="../../org.openbravo.client.kernel/OBMOBC_Main/Lib?_id=Enyo"></script>
        <script src="../../org.openbravo.client.kernel/OBMOBC_Main/Lib?_id=Deps"></script>
        <script src="../../org.openbravo.client.kernel/OBMOBC_Main/StaticResources?_appName=MYMOD_Application"></script>
        <link rel="stylesheet" type="text/css" href="../../org.openbravo.client.kernel/OBCLKER_Kernel/StyleSheetResources?_appName=MYMOD_Application"/>
    </head>
    <body class="enyo-body-fit webkitOverflowScrolling" style="background-color: darkgray; background: url(../org.openbravo.mobile.core/assets/img/BACKGROUND-PNG24.png) top left">
    <script>
      var app = new OB.UI.Terminal({terminal: new MYMOD.Terminal.Model()});
      app.write();
    </script>   
    </body>
</html>

This html is in charge of loading the required libraries:

the static javascript resources for the application:

and the Style Sheets:

More information about appName can be found here

Finally, it creates a new terminal view linked to the application specific terminal model and renders it: 

 
      var app = new OB.UI.Terminal({terminal: new MYMOD.Terminal.Model()});
      app.write();

Retrieved from "http://wiki.openbravo.com/wiki/Mobile_Terminal"

This page has been accessed 8,442 times. This page was last modified on 30 October 2013, at 09:55. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.