View source | Discuss this page | Page history | Printable version   

Mobile Windows

Contents

Introduction

The main UI component in Openbravo Mobile are windows. Generally, each window represents a different functional flow. It, optionally, can be opened from the main menu.

A window is composed by a model containing the data and business logic and a view representing it in the UI.

Main Layout

Layout of Mobile Applications consists on:

Mobile-layout.png

Window definition

A window is composed by two main parts, view and model. They are explained in the sections below.

View

A window view is the UI representation (enyo kind) of the window's data model (Backbone model). The view should take care of the representation whereas all the business logic should be implemented by its associated window model.


The source would look similar to this snippet:

 
enyo.kind({
  name: 'OB.MYMODMyWindow.UI.MyWindow',
  kind: 'OB.UI.WindowView',
  windowmodel: OB.MYMODMyWindow.Model.MyWindow,
  components: [...],
 
  init: function(model) {
    ...
  }
});


Two Column Layout

Standard layout for mobile windows consists in two columns. Note that this is optional. You can create your window as a component in the way it better fits your needs, but this default layout is designed to properly work in different mobile devices.

More detailed information on how to support this layout can be found here.

Window Model

Each window has a model, this model is in charge of loading the data required by the window and of implementing the client side business logic of the window.

A window model is a javascript class extending OB.Model.WindowModel, which is a Backbone model.

 
OB.MYMODMyWindow.Model.MyWindow = OB.Model.WindowModel.extend({
  models: [...],
  init: function() {
    ...
  }
});

Usually, a window model contains a collection of data models as an array of model classes in the models property. When the window is opened, all the online data models are loaded and the init method is invoked afterwards. A window needs at least one model to initialize.

Data loaded in these models can be accessed using the getData method. This method receives as parameter the modelName of the data model and returns the Backbone collection with the loaded data.

Data for models can be loaded from the backend at two different moments, regarding on the model type:

More information about how to define data models can be found here.

Registering a window

To make the window accessible and navigable, it is necessary to register it in this way:

 
OB.MobileApp.windowRegistry.registerWindow({
  windowClass: OB.MYMODMyWindow.UI.MyWindow,
  route: 'mymod.myWindow',
  menuPosition: 100,
  menuI18nLabel: 'MYMOD_LblMyWindow',
  permission: 'MYMOD_PermissionPreference'
});

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

This page has been accessed 6,898 times. This page was last modified on 11 September 2013, at 07:30. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.