Home

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: