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.
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
- loginUtilsUrl: See documentation in Security Model
- loginUtilsParams: It is a javascript object containing the parameters to be sent to the loginUtils Servlet
- supportsOffline. Should be
true
in case the application is designed to be used offline - loginHandlerUrl: See documentation in Security Model
- appModuleId: ID of the module that delivers the application
- appName: It is a String used in the backend to identify the application
- appDisplayName: User friendly Application Name that is displayed in the log in page
- profileOptions. Javascript object with the settings to configure the Profile popup, which is used to allow the user to change the session settings (such as role, organization, etc). This popoup can be opened from main menu > User > Profile. Properties inside this object are:
- showOrganization. If
true
organization combo will be displayed to allow user to switch the session's organization - showWarehouse. If
true
warehouse combo will be displayed to allow user to switch the session's warehouse - defaultProperties. Javascript object that defines the DAL properties in User entity that will be used in case the profile settings are marked by the user as default. In case they are not configured, common Openbravo ones will be used, in this way the default settings defined in this application will be used also in the ERP. The properties that can be set are:
- role
- organization
- warehouse
- languagage
- showOrganization. If
- localDB. Javascript object defining setting for local (WebSQL) database used to store offline data
- size: Size (in bytes) the database can use. Note in iOS this size is limited to 50MB
- name
- displayName
- version. When there are changes in database structure database version should be changed. In this case database structure is recreated. Note this recreation deletes data that might be stored in database
- useBarcode. Configures barcode scanner. See how to
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.
- Adding data to Properties Loader: Terminal model has a function to register a loader.
OB.MobileApp.model.addPropertiesLoader(propertiesLoader);
- Defining a Properties Loader:
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.
- propertiesReady function: The developer must call to this function to indicate that the loader process has finished. OPTIONALLY the properties array could be sent as parameter for logging purposes.
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:
-
../../org.openbravo.client.kernel/OBMOBC_Main/Lib?_id=Enyo
-
../../org.openbravo.client.kernel/OBMOBC_Main/Lib?_id=Deps
the static javascript resources for the application:
-
../../org.openbravo.client.kernel/OBMOBC_Main/StaticResources?_appName=MYMOD_Application
and the Style Sheets:
-
../../org.openbravo.client.kernel/OBCLKER_Kernel/StyleSheetResources?_appName=MYMOD_Application
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();