Home

How TangoWebapp is organized

1. TangoWebapp is implemented using layers architecture:

Basically there are 3 layers (from bottom to top): transport; models; UI. Lower layer does not know anything about layers ontop of it, it sends events via OpenAjax hub. Higher layers talks to the lower ones via API calls.

UI is implemented using concept of smart components. These are rich components build ontop of Webix components. Each UI component is completely standalone.

2. TangoWebapp is divided into Platform and Application parts. While Application is a specific part of the application, Platform is a generic one and can be used as a base for other applications built ontop of Tango REST API. Platform provides basic UI, errors handling etc

How to resolve webix in IDEA

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

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

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" //<--------
    ]
});

//... 

3. 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:

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
"platform_context.create 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')
}

2. In your component define _ui and $init functions:

//resources/tango_webapp/devices_tree.js


/**
 * This function returns ui definition for this component. It can be of any complexity
 * 
 * @private
 */
_ui:function(){
  return {
    template: 'ui'
  };
},
/**
 * @param {Object} config a configuration object passed to webix.ui function call
 */
$init: function(config){
    webix.extend(config, this._ui());//attach our custom UI to this component

    //config.context is a platform_context passed from main_controller, see above
}

How to do test driven development

JavaScriptMVC provides testing facility. Tests can be unit or functional.

Functional

1. Create functional test using command line tool:

$/tango_webapp> ./jmvcc jmvc/generate/test functional devices_tree

This creates file in test/functional. Move it into tango_webapp if required.

2. Add newly created test:

//apps/tango_webapp/test.js

include.functional_test(
  "tango_webapp/devices_tree"
);

3. Now add some tests:

//test/functional/tango_webapp/devices_tree_test.js
new Test.Functional('devices_tree_test', {
    test_open: function () {
        webix.ui({
            view: 'window',
            id: 'devices-tree-test-window',
            body: {
                view: 'devices_tree',
                id: 'devices-tree-test',
                //PlatformContext is created automatically during tests setup
                //see test/setup.js
                context: PlatformContext  
            }
        }).show();

        this.assert($$('devices-tree-test').isVisible());
    },
    //Do some tests
    test_close: function () {
        $$('devices-tree-test-window').destructor();
        this.assert_not($$('device-panel-test'));
    }

4. Reload application. Make sure your are running it in test mode:

//index.html
<script type="text/javascript" src="jmvc/include.js?tango_webapp,test"></script>
                                                                 ^------------//

How to test app in production mode

1. Build the app, from the project root execute gradle command:

$> gradle prepareWar

The good output is:

...
<<<<<< Compiler output end.
Compressed to 'apps/tango_webapp/production.js'.
Executing compiler with arguments: [--js, resources/tango_webapp/logger_view.js, --js, resources/tango_webapp/dashboard.js, --js, resources/tango_webapp/devices_tree.js, --js, resources/tango_webapp/spectrum_plot.js, --js, resources/tango_webapp/image_plot.js, --js, resources/tango_webapp/test_device_panel.js, --js, resources/tango_webapp/device_view.js, --js, resources/tango_webapp/device_properties_view.js, --js, resources/tango_webapp/device_polling_view.js, --js, resources/tango_webapp/device_events_view.js, --js, resources/tango_webapp/device_attributes_config_view.js, --js, resources/tango_webapp/device_logging_view.js, --js, resources/tango_webapp/device_monitor_view.js, --js_output_file, apps/tango_webapp/webix.js]
Compressed to 'apps/tango_webapp/webix.js'.
:prepareWar

BUILD SUCCESSFUL

Total time: 11.414 secs
$>

2. Define a new artifact in File->Project Structure:

Add a new artifact (Web application exploded) (1); Name it (2) and add build (created by gradle command) as a directory content (3)

3. Run->Edit configurations->Tomcat switch to deployment tab and add newly created artifact, specify context:

4. Run or restart Tomcat popup your browser and point it to localhost:8080/TangoWebappProduction. You are now see the app in production mode.