Skip to content

Developer Guide

Jump to bottom
Ingvord edited this page Apr 17, 2018 · 10 revisions

Developer Guide

Short introduction into JSMVC

app.js and include

controllers/models/views/resources

testing

production mode

Implementing new widget

step by step + explanation ...

PlatformContext

PlatformContext is a globally available object. As for v0.3 it contains references to

  • UserContext and UserContextController
  • TangoRestApi -- REST API model
  • Tango hosts collection
  • Devices collection

Custom widgets may bind (see webix docs) to tangos hosts or/and devices.

UserContext

UserContext contains data relevant to a user of TangoWebapp. As for v0.3 UserContext contains the following information:

  • user name
  • rest url -- REST API entry point URL aka http://localhost:10001
  • tango hosts -- a number of tango hosts entered by the user via tango hosts widget
  • device filters -- a number of device filters entered by the user via device filters widget

Customizing

Use ext field. For instance, attrs_monitor_view

External storage

By default TangoWebapp comes with an embedded in-memory server side storage for the UserContext. This means that all the data will be lost if app is restarted. However it is very easy to implement a permanent storage.

Such storage can be a dedicated service that follows very simple API:

GET url?id=user_name returns base64 encoded stringified JSON UserContext instance

POST url?id=user_name&data=data, where data is a base64 encoded stringified JSON value of the UserContext instance to overwrite the stored data or null to delete the data

Once such storage has been deployed you need to refer to it. For this set url field of the TangoRemoteStorage model:

TangoRemoteStorage.url = http://my-host/my-storage

The later script can be placed in an arbitrary resource file:

..
 |-resources
    |-custom_storage.js

and then applied in the app.js file:

//apps/tango_webapp.js

include.resources('custom_storage')

Platform API

...

models

controllers

views

How to resolve webix in IDEA

  1. Go to index.html and download webix library:

Download webix

  1. Once downloaded go to project structure (File->Project Structure); choose Global Libraries and attach webix_debug to a module with your application:

Attach webix

How to add new webix component

  1. create new file in resources/tango_webapp e.g. resources/tango_webapp/device_tree.js
  2. add newly created file to resources/tango_webapp/setup.js:
MVC.Object.extend(TangoWebapp.ui, {
    _webix_files: [
        "dashboard",
        "devices_tree" //<--------
    ]
});

//...
  1. start prototyping your component:
/** @module DevicesTree*/
(function(){
    //it is better to assign protoUI to a variable to ease navigation in project structure tab, see below
    /**
     * @type {webix.protoUI}
     */
    var devices_tree = webix.protoUI({...})

})();

With protoUIs assigned to variables Structure tab gives an easy way to navigate between protoUIs:

Structure

How to properly initialize a new component

  1. Create application's ui after platform_context.create i.e. in application's main controller do:
//controllers/tango_webapp/main_controller.js
"tango_webapp.initialize subscribe": function (event) {
  // event.data contains fully properly initialized PlatformContext model
  var platform_context = event.data;
  webix.ui({
     view: 'devices_tree', // custom webix component created above
     context: platform_context
  } ,0, 'content')
}
  1. In your component define __ui

Clone this wiki locally