Home

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(){

    var devices_tree = webix.protoUI({...})

})();

How to properly initialize a new component

1. Create application's ui after platform_context.init i.e. in application's main controller do:

//controllers/tango_webapp/main_controller.js
"platform_context.init subscribe": function (event) {
  var platform_context = event.data;// event.data contains fully properly initialized PlatformContext model
  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',
            body: {
                view: 'devices_tree',
                id: 'devices-tree-test',
                //PlatformContext is created automatically during tests setup
                //see test/setup.js
                context: PlatformContext  
            }
        }).show();

        this.assert_not($$('devices-tree-test').isVisible());
    }

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>